adjusting the animation and the hero section bg (#43)

blackwavesdev · Nov 7, 2024 · 519685c · 519685c · github-actions · Nov 7, 2024
2 parents d56aba1 + 08275b8
commit 519685c
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 10 deletions.
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
@@ -34,15 +34,15 @@ const Hero = forwardRef<HTMLDivElement>((_, ref) => {
   return (
     <section
       ref={localRef}
-      className="overflow-y-hidden min-h-[100dvh] snap-start relative back bg-cover bg-center bg-fixed h-[100dvh] center "
+      className="overflow-x-hidden flex justify-center h-screen w-full snap-start "
     >
-      <div className="flex flex-col md:flex-row justify-center items-center ">
+      <div className="flex w-full h-full flex-col md:flex-row justify-center items-center ">
         <Image
           src={logo}
           alt="Hero Image"
           width={200}
           height={200}
-          className={`center ${
+          className={`flex justify-center items-center ${
             isInView
               ? "motion-scale-in-[0.5] motion-translate-x-in-[-88%] motion-translate-y-in-[-9%] motion-opacity-in-[0%] motion-rotate-in-[-10deg] motion-blur-in-[5px] motion-duration-[0.00s] motion-duration-[0.61s]/translate motion-ease-spring-bouncy"
               : ""
@@ -51,7 +51,7 @@ const Hero = forwardRef<HTMLDivElement>((_, ref) => {
         <p
           className={`text-white text-base md:text-lg text-center md:text-left lg:text-xl  text-pretty leading-relaxed p-4 md:p-6 ${
             isInView
-              ? "motion-scale-in-[0.5] motion-translate-x-in-[-88%] motion-translate-y-in-[-9%] motion-opacity-in-[0%] motion-rotate-in-[-10deg] motion-blur-in-[5px] motion-duration-[0.00s] motion-duration-[0.61s]/translate motion-ease-spring-bouncy"
+              ? "motion-scale-in-[0.5] motion-translate-x-in-[66%] motion-translate-y-in-[-6%] motion-opacity-in-[0%] motion-rotate-in-[-10deg] motion-blur-in-[5px] motion-duration-[0.00s] motion-duration-[0.61s]/translate motion-ease-spring-bouncy"
               : "hidden"
           }`}
         >

diff --git a/app/components/ScrollBySection.tsx b/app/components/ScrollBySection.tsx
@@ -60,9 +60,7 @@ const ScrollBySection: React.FC = () => {
 
   return (
     <div
-      className={`h-[100dvh] w-full ${
-        isDesktop ? "overflow-hidden" : "overflow-auto"
-      }`} // Overflow hidden only for desktop
+      className={`h-screen w-full ${isDesktop ? "overflow-y-hidden" : ""}`} // Overflow hidden only for desktop
     >
       <Hero
         ref={(el) => {

diff --git a/app/components/Welcome/Welcome.tsx b/app/components/Welcome/Welcome.tsx
@@ -38,7 +38,7 @@ const Welcome = forwardRef<HTMLDivElement>((_, ref) => {
     <section
       id="welcome"
       ref={localRef}
-      className="overflow-y-hidden min-h-[100dvh] snap-start bg-black pt-10 gap-5 md:gap-12 flex flex-col justify-around text-white"
+      className="overflow-x-hidden min-h-[100dvh] snap-start bg-black pt-10 gap-5 md:gap-12 flex flex-col justify-around text-white"
     >
       <div className="center flex-col mt-28">
         <h2

diff --git a/app/globals.css b/app/globals.css
@@ -6,7 +6,7 @@ body {
   scroll-behavior: smooth !important;
 }
 * {
-  overflow-y: hidden !important;
+  overflow-x: hidden !important;
 }
 body {
   font-family: Arial, Helvetica, sans-serif;

diff --git a/app/page.tsx b/app/page.tsx
@@ -4,7 +4,7 @@ import ScrollBySection from "./components/ScrollBySection";
 // import Welcome from "./components/Welcome/Welcome";
 export default function Home() {
   return (
-    <div className="min-h-[100dvh] overflow-y-hidden  scroll-smooth snap-y snap-mandatory">
+    <div className="min-h-[100dvh] back bg-cover bg-fixed bg-center overflow-x-hidden  scroll-smooth snap-y snap-mandatory">
       <Nav />
       {/* <Welcome />
       <MeetUs /> */}