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/CTA.tsx
+++ b/sections/CTA.tsx
@@ -0,0 +1,75 @@
+"use client";
+import Button from "@/components/shared/Button";
+import { useEffect, useRef } from "react";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+import Image from "next/image";
+import { useSplitHeading } from "@/lib/useTextRevealHeading";
+
+gsap.registerPlugin(ScrollTrigger);
+
+const CTA = () => {
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const paraRef = useRef<HTMLParagraphElement>(null);
+  const buttonRef = useRef<HTMLDivElement>(null);
+
+  useSplitHeading(headingRef, paraRef);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    if (buttonRef.current) {
+      gsap.from(buttonRef.current, {
+        opacity: 0,
+        y: 20,
+        duration: 0.8,
+        ease: "power2.out",
+        delay: 0.6,
+        scrollTrigger: {
+          trigger: containerRef.current,
+          start: "top 80%",
+        },
+      });
+    }
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      id="cta"
+      className="tab:mx-0 relative mx-auto h-full w-full sm:px-2.5"
+    >
+      <div className="tab:h-[450px] tab:my-6 relative mx-auto flex w-full max-w-[1420px] items-center justify-center overflow-hidden rounded-3xl bg-[url('/images/png/1-2.jpeg')] bg-cover bg-center sm:h-[490px]">
+        <div className="relative z-20 flex flex-col items-center justify-center gap-3 px-4">
+          <h1
+            ref={headingRef}
+            className="font-switzer tab:text-h-2-60 md:leading-h1 tab:leading-h2 text-center font-semibold text-white sm:text-[50px] sm:leading-[54px]"
+          >
+            Join the Future of Smart Tree Care
+          </h1>
+
+          <p
+            aria-hidden="true"
+            ref={paraRef}
+            className="text-b-3-16 leading-b3 font-mium-reg tab:w-9/12 text-center tracking-[-0.8px] text-white sm:w-full"
+          >
+            Experience real-time insights, efficient water use, and healthier
+            urban forests — start your pilot or schedule a demo today.
+          </p>
+
+          <div ref={buttonRef}>
+            <Button text="Book a Demo" />
+          </div>
+        </div>
+        <Image
+          src="/images/png/Blob 5.png"
+          width={700}
+          height={500}
+          alt="overlay"
+          className="absolute bottom-0 left-0 h-[410px] w-full object-cover"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CTA;