done landing page

2025-11-10 17:10:34 +05:30
parent 3852d46661
commit 483515e163
105 changed files with 3529 additions and 104 deletions
--- a/sections/HeroCase.tsx
+++ b/sections/HeroCase.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { SplitText } from "gsap/SplitText";
+
+gsap.registerPlugin(SplitText);
+
+interface HeroClientProps {
+  item: {
+    heroImage: string;
+    title: string;
+    description: string;
+  };
+}
+
+export default function HeroClient({ item }: HeroClientProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const subHeadingRef = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      if (!headingRef.current) return;
+
+      const headingSplit = new SplitText(headingRef.current, { type: "words" });
+      gsap.fromTo(
+        headingSplit.words,
+        { yPercent: 120, opacity: 0 },
+        {
+          yPercent: 0,
+          opacity: 1,
+          duration: 1.2,
+          ease: "expo.out",
+          stagger: 0.09,
+          delay: 0.3,
+        }
+      );
+
+      if (subHeadingRef.current) {
+        const subSplit = new SplitText(subHeadingRef.current, {
+          type: "words",
+        });
+        gsap.fromTo(
+          subSplit.words,
+          { yPercent: 100, opacity: 0 },
+          {
+            yPercent: 0,
+            opacity: 1,
+            duration: 1,
+            ease: "expo.out",
+            stagger: 0.04,
+            delay: 0.6,
+          }
+        );
+      }
+    }, containerRef);
+
+    return () => ctx.revert();
+  }, []);
+
+  return (
+    <section
+      ref={containerRef}
+      className="font-switzer tab:p-5 tab:h-[90vh] relative mx-auto w-full max-w-[1650px] overflow-hidden sm:h-[80vh] sm:p-2.5"
+    >
+      <div className="relative mx-auto flex h-full w-full items-center justify-center overflow-hidden rounded-2xl">
+        <Image
+          src={item.heroImage}
+          alt={item.title}
+          width={1200}
+          height={600}
+          className="absolute inset-0 h-full w-full rounded-2xl object-cover"
+        />
+        <div className="flex w-full max-w-[1420px] items-center px-5">
+          <div className="tab:p-0 tab:mt-0 relative z-20 flex w-full max-w-[850px] flex-col gap-5 sm:mt-10 sm:px-0">
+            <h1
+              ref={headingRef}
+              className="font-switzer sm:text-hero-mobile tab:text-h-1-96 tab:leading-h1 text-left font-semibold text-white sm:leading-[54px]"
+            >
+              {item.title}
+            </h1>
+            <p
+              ref={subHeadingRef}
+              className="font-mium-reg tab:text-b-1-20 sm:text-b-3-16 w-full text-left leading-normal text-white sm:tracking-[-0.6px]"
+            >
+              {item.description}
+            </p>
+          </div>
+        </div>
+        <Image
+          src="/images/png/Blob 5.png"
+          width={700}
+          height={500}
+          alt="overlay"
+          className="tab:h-[450px] absolute bottom-0 left-0 w-full object-cover sm:h-[40vh]"
+        />
+      </div>
+    </section>
+  );
+}