styles

src/app/(website)/components/Home/Hero/02-data.tsx

@@ -1,18 +1,9 @@
 "use client";
 
-import {
+import { motion, useScroll, useTransform } from "motion/react";
-  cubicBezier,
+import { useRef } from "react";
-  easeIn,
-  easeInOut,
-  easeOut,
-  motion,
-  useScroll,
-  useTransform,
-} from "motion/react";
-import { useEffect, useRef, useState } from "react";
 import type { HomeHero } from "@payload-types";
 import { RichText } from "@payloadcms/richtext-lexical/react";
-import { easeLinear } from "d3";
 import useWindow from "@/app/(website)/hooks/useWindow";
 
 const heroMap = {
@@ -59,16 +50,23 @@ const Item = ({ title, item }: { title: string; item: HeroItem }) => {
     [0.2, 0.8],
     [-height * yp, height * yp]
   );
-  const opacity = useTransform(scrollYProgress, [0.3, 0.5, 0.7], [0, 1, 0]);
+  const opacity = useTransform(
+    scrollYProgress,
+    [0.3, 0.4, 0.6, 0.7],
+    [0, 1, 1, 0]
+  );
 
   return (
     <div
       ref={containerRef}
       className="w-full h-screen max-w-6xl p-12 grid grid-cols-2 gap-12 z-10 items-center text-white"
     >
-      <div className="flex items-center flex-col bg-accent-600 rounded aspect-video">
+      <motion.div
+        style={{ opacity }}
+        className="flex items-center flex-col bg-accent-600 rounded aspect-video"
+      >
         IMAGE
-      </div>
+      </motion.div>
       <div className="relative">
         <motion.div
           style={{
@@ -78,9 +76,9 @@ const Item = ({ title, item }: { title: string; item: HeroItem }) => {
           className="flex flex-col gap-4 absolute top-1/2 -translate-y-1/2"
         >
           <h5 className="text-4xl font-display">{title}</h5>
-          <motion.div>
+          <div>
             <RichText className="text-xl" data={item} />
-          </motion.div>
+          </div>
         </motion.div>
       </div>
     </div>

src/app/(website)/page.tsx

@@ -6,6 +6,9 @@ import HeroIntro from "./components/Home/Hero/01-intro";
 import SmoothScroll from "./components/SmoothScroll";
 import HeroData from "./components/Home/Hero/02-data";
 
+import bgImage from "./bg.jpg";
+import Image from "next/image";
+
 const randomNumbers = Array.from({ length: 10 }).map((i) =>
   Array.from({ length: 20 }).map(
     (j) => letters[Math.floor(Math.random() * letters.length)]
@@ -21,6 +24,9 @@ export default async function Home() {
   return (
     <SmoothScroll snapAt={["section"]}>
       <div className="text-white">
+        <div className="absolute h-full mt-[var(--header-height)] w-full opacity-50">
+          <Image src={bgImage} alt="Bg image" objectFit="cover" />
+        </div>
         <div className="h-screen pt-[var(--header-height)] flex flex-col items-center justify-end text-white pb-[10vh] relative">
           {/* <ScrollingNumbers numbers={randomNumbers} /> */}
           <h1 className="text-4xl p-8 lg:text-7xl leading-tight max-w-6xl z-10 font-display">