done landing page

components/ui/smooth-scroll-link.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface SmoothScrollLinkProps {
+  href: string;
+  children: React.ReactNode;
+  scrolled?: boolean;
+}
+
+const SmoothScrollLink = ({
+  href,
+  children,
+  scrolled = false,
+}: SmoothScrollLinkProps) => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    const targetId = href.replace("#", "");
+    const section = document.getElementById(targetId);
+    if (section) {
+      const yOffset = -80;
+      const y =
+        section.getBoundingClientRect().top + window.pageYOffset + yOffset;
+      window.scrollTo({ top: y, behavior: "smooth" });
+    }
+  };
+
+  return (
+    <a
+      href={href}
+      onClick={handleClick}
+      className={cn(
+        "font-mium-reg text-b-2-17 group relative inline-block h-full cursor-pointer font-medium tracking-[-0.8px] transition-all duration-700 ease-[cubic-bezier(0.19,1,0.22,1)]",
+        scrolled ? "text-black" : "text-white"
+      )}
+    >
+      {/* Smooth hover text animation */}
+      <span className="relative block overflow-hidden">
+        <span className="block transition-transform duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:-translate-y-6">
+          {children}
+        </span>
+        <span className="absolute top-6 left-0 transition-all duration-[1.125s] ease-[cubic-bezier(0.19,1,0.22,1)] group-hover:top-0">
+          {children}
+        </span>
+      </span>
+    </a>
+  );
+};
+
+export default SmoothScrollLink;