Fix/landing hero

app/(pages)/(index-page)/_components/hero/heroInfo.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import Image from 'next/image';
 import HeartButton from '../HeartButton/heartButton';
+import WordCycle from './wordCycle';
 
 export default function HeroInfo() {
   return (
     <div className="flex flex-col items-start gap-[22px] break-625:items-end break-625:gap-[31px]">
       <div className="flex flex-col items-start text-left break-625:items-end break-625:text-right">
         <p className="flex gap-2 font-metropolis text-[30px] font-bold leading-[115%] tracking-[0.8px] break-625:text-[40px]">
-          <span className="text-white">create</span>
+          <span className="text-white">
+            <WordCycle />
+          </span>
           <span className="text-white/50">for</span>
         </p>
         <h1 className="font-metropolis text-[45px] font-bold leading-[115%] tracking-[0.9px] text-white break-625:text-[66px] break-625:leading-[100%] break-625:tracking-[3.52px] md:text-[88px]">

app/(pages)/(index-page)/_components/hero/heroMainSection.module.scss

@@ -0,0 +1,82 @@
+$wave-amplitude: -5%;
+$wave-period: 5s;
+
+@keyframes wave-1-motion {
+    0% {
+        transform: translateX(0);
+    }
+    50% {
+        transform: translateX($wave-amplitude);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+
+@keyframes wave-2-motion {
+    0% {
+        transform: translateX(5%);
+    }
+    50% {
+        transform: translateX(calc($wave-amplitude + 5%));
+    }
+    100% {
+        transform: translateX(5%);
+    }
+}
+
+@keyframes wave-3-motion {
+    0% {
+        transform: translateX(15%);
+    }
+    50% {
+        transform: translateX(calc($wave-amplitude + 15%));
+    }
+    100% {
+        transform: translateX(15%);
+    }
+}
+
+@keyframes wave-4-motion {
+    0% {
+        transform: translateX(3%);
+    }
+    50% {
+        transform: translateX(calc($wave-amplitude + 3%));
+    }
+    100% {
+        transform: translateX(3%);
+    }
+}
+
+.dark_water_layer {
+    position: absolute;
+    right: -45%;
+    z-index: 118;
+    width: 100%;
+}
+
+.light_water_layer {
+    position: absolute;
+    right: -0%; // to -5%
+    // top: -0.5px;
+    z-index: 120;
+    width: 66%;
+    animation: wave-1-motion $wave-period infinite ease-in-out;
+}
+
+.dark_beach_layer {
+    position: absolute;
+    right: -2%;
+    z-index: 115;
+    width: 84%;
+    animation: wave-2-motion $wave-period infinite ease-in-out;
+}
+
+.light_beach_layer {
+    position: relative;
+    right: -5%;
+    top: 0;
+    width: 120%;
+    animation: wave-4-motion $wave-period infinite ease-in-out;
+}

app/(pages)/(index-page)/_components/hero/heroMainSection.tsx

@@ -2,6 +2,12 @@ import React from 'react';
 import HeroInfo from './heroInfo';
 import HeroSun from './heroSun';
 import Image from 'next/image';
+import styles from './heroMainSection.module.scss';
+
+import DarkWaterLayer from '@public/Hero/dark_water_layer.svg';
+import LightWaterLayer from '@public/Hero/light_water_layer.svg';
+import LightBeachLayer from '@public/Hero/light_beach_layer.svg';
+import DarkBeachLayer from '@public/Hero/dark_beach_layer.svg';
 
 export default function HeroSection() {
   return (
@@ -93,23 +99,32 @@ export default function HeroSection() {
             className="h-[107.5px] w-[176px] md:h-[180px] md:w-[288px] lg:h-[180px] lg:w-[288px] xl:h-[215px] xl:w-[352px]"
           />
         </div>
-        <div className="absolute right-[-80px] z-[110] flex hidden justify-end pt-[651px] break-625:block sm:right-[0px] sm:pt-[651px] md:right-[-140px] md:pt-[647px] lg:right-[0px] xl:right-[-20px] xl:pt-[657px]">
-          <Image
-            src="/Hero/wave.svg"
-            alt="wave"
-            width={609}
-            height={261}
-            className="h-[142.5px] w-[304.5px] md:h-[215.75px] md:w-[456.75px] lg:h-[215.75px] lg:w-[456.75px] xl:h-[261px] xl:w-[609px]"
-          />
-        </div>
-        <div className="absolute right-[0px] z-[120] block pt-[611px] break-625:hidden">
-          <Image
-            src="/Hero/wave_mobile.svg"
-            alt="wave"
-            width={375}
-            height={223}
-            className="h-[223px] w-[375px]"
-          />
+        <div className="xl:1/3 absolute right-[-20px] top-[-1px] z-[110] w-2/5 justify-end pt-[611px] break-625:pt-[657px] md:right-[-15px] lg:right-[-20px] xl:right-[-40px] xl:pt-[657px] 2xl:w-1/4">
+          <div className="relative">
+            <Image
+              src={DarkWaterLayer}
+              alt="dark-water-layer"
+              className={styles.dark_water_layer}
+              // stationary
+            />
+            <Image
+              src={LightWaterLayer}
+              alt="light-water-layer"
+              className={styles.light_water_layer}
+              // only moves atmost 5% to the left
+            />
+            <Image
+              src={DarkBeachLayer}
+              alt="dark-beach-layer"
+              className={styles.dark_beach_layer}
+              // -23% to -5%
+            />
+            <Image
+              src={LightBeachLayer}
+              alt="light-beach-layer"
+              className={styles.light_beach_layer}
+            />
+          </div>
         </div>
         <div className="absolute left-[0px] z-[120] block pt-[431px] break-625:hidden">
           <Image

app/(pages)/(index-page)/_components/hero/wordCycle.module.scss

@@ -0,0 +1,27 @@
+.words {
+    display: block;
+    margin-bottom: 13px;
+    font-family: "Metropolis", sans-serif;
+    font-weight: 700;
+  }
+
+  .enter {
+    opacity: 0;
+    transform: translateY(35px);
+  }
+
+  .exit {
+    opacity: 1;
+  }
+
+  .enterActive {
+    opacity: 1;
+    transform: translateY(0px);
+    transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
+
+  .exitActive {
+    opacity: 0;
+    transform: translateY(-35px);
+    transition: all 400ms cubic-bezier(0.56, 0, 0.83, 0.16);
+  }

app/(pages)/(index-page)/_components/hero/wordCycle.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import styles from './wordCycle.module.scss';
+import { SwitchTransition, CSSTransition } from 'react-transition-group';
+
+const words = [
+  'create',
+  'code',
+  'design',
+  'collab',
+  'ideate',
+  'craft',
+  'hack',
+  'strive',
+  'build',
+];
+
+const WordCycle = () => {
+  const [wordIdx, setWordIdx] = useState(0);
+  const nodeRef = useRef(null);
+
+  useEffect(() => {
+    const swapInterval = setInterval(() => {
+      setWordIdx((idx) => (idx + 1) % words.length);
+    }, 3000);
+
+    return () => clearInterval(swapInterval);
+  }, []);
+
+  return (
+    <span className={styles.words}>
+      <SwitchTransition>
+        <CSSTransition
+          key={words[wordIdx]}
+          nodeRef={nodeRef}
+          timeout={400}
+          in
+          mountOnEnter
+          unmountOnExit
+          classNames={{
+            enter: styles.enter,
+            enterActive: styles.enterActive,
+            exit: styles.exit,
+            exitActive: styles.exitActive,
+          }}
+        >
+          <span style={{ display: 'inline-block' }} ref={nodeRef}>
+            {words[wordIdx]}
+          </span>
+        </CSSTransition>
+      </SwitchTransition>{' '}
+    </span>
+  );
+};
+
+export default WordCycle;

package.json

@@ -21,13 +21,15 @@
     "react-dom": "^18",
     "react-icons": "^5.3.0",
     "react-scroll-parallax": "^3.4.5",
+    "react-transition-group": "^4.4.5",
     "sass": "^1.81.0",
     "sharp": "^0.33.5"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-transition-group": "^4.4.12",
     "@typescript-eslint/eslint-plugin": "^8.14.0",
     "@typescript-eslint/parser": "^8.14.0",
     "eslint": "^8.57.1",