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/CaseStudy.tsx
+++ b/sections/CaseStudy.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import Headline from "@/components/ui/headline";
+import { useSplitHeading } from "@/lib/useTextRevealHeading";
+import Image from "next/image";
+import ScrollTrigger from "gsap/ScrollTrigger";
+import gsap from "gsap";
+import { useEffect, useRef } from "react";
+import { useCases } from "@/data/useCases";
+import { useRouter } from "next/navigation";
+import { usePageTransition } from "@/layout/Layout";
+
+const CaseStudy = () => {
+  const headingRef = useRef<HTMLHeadingElement | null>(null);
+  const paraRef = useRef<HTMLParagraphElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const { startTransition } = usePageTransition();
+  useSplitHeading(headingRef, paraRef);
+
+  useEffect(() => {
+    gsap.registerPlugin(ScrollTrigger);
+
+    const cards = gsap.utils.toArray<HTMLDivElement>(".use-card");
+
+    gsap.from(cards, {
+      y: 100,
+      opacity: 0,
+      duration: 1.2,
+      ease: "power3.out",
+      stagger: 0.19,
+      scrollTrigger: {
+        trigger: ".use-wrapper",
+        start: "top 80%",
+        end: "bottom 60%",
+        toggleActions: "play none none none",
+      },
+    });
+
+    return () => {
+      ScrollTrigger.getAll().forEach((st) => st.kill());
+    };
+  }, []);
+
+  return (
+    <section
+      id="use-cases"
+      ref={containerRef}
+      className="bg-light-200 relative h-full w-full"
+    >
+      <div className="tab:px-6 mx-auto flex h-full w-full max-w-[1420px] flex-col items-center justify-start gap-12 py-8 sm:px-2.5 lg:px-0">
+        <div className="tab:w-9/12 flex flex-col items-center justify-center gap-4 sm:w-full md:w-7/12">
+          <Headline text="Use Case" />
+          <h1
+            ref={headingRef}
+            className="font-switzer text-h-mobile-30 leading-h5 tab:text-h-2-60 tab:leading-h2 text-center font-semibold text-black"
+          >
+            One Technology, Many{" "}
+            <span className="font-playfair text-brand font-semibold italic">
+              Applications
+            </span>
+          </h1>
+          <p
+            ref={paraRef}
+            className="text-b-3-16 leading-b3 font-mium-reg text-center tracking-[-0.8px] text-black"
+          >
+            Whether for municipalities, research, or contractors — FalktronTrees
+            brings actionable insights to every level of urban forestry.
+          </p>
+        </div>
+        <div className="tab:grid-cols-2 wrapper tab:gap-6 grid grid-cols-1 sm:grid-cols-1 sm:gap-3 md:grid-cols-3 lg:grid-cols-4">
+          {useCases.map((useCase, index) => (
+            <div
+              key={index}
+              className="group use-card relative overflow-hidden rounded-2xl bg-white p-3.5"
+            >
+              {/* Image */}
+              <div className="relative h-[190px] overflow-hidden rounded-2xl">
+                <Image
+                  src={useCase.image}
+                  alt={useCase.title}
+                  width={400}
+                  height={190}
+                  className="h-full w-full transform rounded-2xl object-cover transition-transform duration-500 ease-out group-hover:scale-105"
+                />
+              </div>
+
+              {/* Text Content */}
+              <div className="flex h-max flex-col items-start px-1 pt-6 pb-2 text-left">
+                <h3 className="text-b-1-20 font-switzer leading-b1 mb-2 text-left font-medium text-black">
+                  {useCase.title}
+                </h3>
+                <p className="text-gray font-mium-reg mb-6 line-clamp-3 text-left text-sm leading-5 tracking-[-0.8px]">
+                  {useCase.description}
+                </p>
+                <button
+                  onClick={() => startTransition(`/use-cases/${useCase.slug}`)}
+                  className="text-b-4-14 font-switzer bg-brand leading-b4 inline-flex cursor-pointer items-center gap-2 rounded-full px-4 py-3 font-normal text-white transition-all duration-300 hover:gap-3"
+                >
+                  Learn more
+                  <Image
+                    src="/images/svg/arrow.svg"
+                    alt="Learn more"
+                    className="h-4.5 w-4.5 object-contain"
+                    width={16}
+                    height={16}
+                  />
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CaseStudy;