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/Benefit.tsx
+++ b/sections/Benefit.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import Headline from "@/components/ui/headline";
+import Image from "next/image";
+import { useEffect, useRef } from "react";
+import ScrollTrigger from "gsap/ScrollTrigger";
+import gsap from "gsap";
+import { useSplitHeading } from "@/lib/useTextRevealHeading";
+
+const Benefit = () => {
+  const headingRef = useRef<HTMLHeadingElement | null>(null);
+  const paraRef = useRef<HTMLParagraphElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useSplitHeading(headingRef, paraRef);
+  const benefits = [
+    {
+      icon: "/images/svg/mdi_water-check-outline (1).svg",
+      title: "Save Water & Costs",
+      description:
+        "Optimize irrigation with real-time data and reduce unnecessary water usage.",
+    },
+    {
+      icon: "/images/svg/entypo_tree.svg",
+      title: "Healthier Trees",
+      description:
+        "Detect stress early and ensure optimal growth and longevity.",
+    },
+    {
+      icon: "/images/svg/iconoir_reports.svg",
+
+      title: "Transparent Reports",
+      description:
+        "Provide actionable insights for councils, cities, and citizens alike.",
+    },
+    {
+      icon: "/images/svg/lucide_monitor-cog.svg",
+
+      title: "Fast Setup",
+      description:
+        "Deploy smart monitoring from pilot to full project within weeks.",
+    },
+  ];
+  useEffect(() => {
+    const cards = gsap.utils.toArray<HTMLDivElement>(".animation .card-inner");
+
+    cards.forEach((card) => {
+      gsap.from(card, {
+        x: -130,
+        opacity: 0,
+        duration: 1,
+        ease: "expo.out",
+        scrollTrigger: {
+          trigger: ".wrapper",
+          start: "top 80%",
+        },
+      });
+    });
+
+    return () => {
+      ScrollTrigger.getAll().forEach((st) => st.kill());
+    };
+  }, []);
+  return (
+    <section
+      ref={containerRef}
+      id="benefits"
+      className="bg-light-200 relative h-full w-full"
+    >
+      <div className="tab:px-6 mx-auto flex w-full max-w-[1420px] flex-col items-center justify-start gap-12 py-8 sm:px-2.5 lg:h-screen 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="Benefits" />
+          <h1
+            ref={headingRef}
+            className="font-switzer sm:text-h-mobile-30 sm:leading-h5 tab:text-[50px] tab:leading-h3 lg:text-h-2-60 lg:leading-h2 overflow-hidden text-center font-semibold text-black"
+          >
+            Smarter Trees. Greener{" "}
+            <span className="font-playfair text-brand font-semibold italic">
+              Cities.
+            </span>
+            Sustainable{" "}
+            <span className="font-playfair text-brand font-semibold italic">
+              Future.{" "}
+            </span>
+          </h1>
+          <p
+            ref={paraRef}
+            className="text-b-3-16 leading-b3 font-mium-reg text-center tracking-[-0.8px] text-black"
+          >
+            Experience real-time insights, efficient water use, and healthier
+            urban forests — start your pilot or schedule a demo today.
+          </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">
+          {benefits.map((benefit, index) => (
+            <div
+              key={index}
+              className="animation tab:max-w-[320px] group h-[350px] overflow-hidden sm:w-full"
+            >
+              <div
+                className={`tab:max-w-[320px] card-inner relative flex h-[350px] cursor-pointer flex-col items-start justify-between overflow-hidden rounded-[20px] bg-white px-6 py-5 transition-colors duration-500 ease-in-out sm:w-full`}
+              >
+                <div className="bg-brand absolute top-5 left-6 h-20 w-20 scale-0 rounded-full transition-transform duration-500 ease-out group-hover:scale-[10]"></div>
+                <div className="bg-light-200 relative z-20 flex h-20 w-20 items-center justify-center rounded-full">
+                  <Image
+                    src={benefit.icon}
+                    alt={benefit.title}
+                    width={32}
+                    height={32}
+                    className="object-cover"
+                  />
+                </div>
+                <div className="relative z-20 h-[124px]">
+                  <h3
+                    className={`text-h-7-24 leading-h5 font-switzer mb-2.5 text-left font-semibold text-black group-hover:text-white`}
+                  >
+                    {benefit.title}
+                  </h3>
+                  <p
+                    className={`text-b-3-16 leading-b3 font-mium-reg tracking-[-0.8px] text-black group-hover:text-white`}
+                  >
+                    {benefit.description}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Benefit;