done landing page

components/ui/headline.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
+
+type HeadlineProps = {
+  text: string;
+};
+
+const Headline: React.FC<HeadlineProps> = ({ text }) => {
+  const headlineRef = useRef<HTMLHeadingElement | null>(null);
+
+  useEffect(() => {
+    if (!headlineRef.current) return;
+
+    gsap.from(headlineRef.current, {
+      y: 80,
+      opacity: 0,
+      duration: 1,
+      ease: "expo.out",
+      scrollTrigger: {
+        trigger: headlineRef.current,
+        start: "top 90%",
+        toggleActions: "play none none none",
+      },
+    });
+  }, []);
+
+  return (
+    <div className="overflow-hidden">
+      <h6
+        ref={headlineRef}
+        className="bg-light-300 border-border font-switzer sm:text-b-4-14 tab:text-b-3-16 text-border sm:leading-b4 tab:leading-b2 tab:px-4 w-max rounded-full border py-1.5 font-normal sm:px-2.5"
+      >
+        {text}
+      </h6>
+    </div>
+  );
+};
+
+export default Headline;