76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
|
"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;
|