"use client"; import React, { useRef, useEffect, useState } from "react"; import { motion, useMotionValue, useTransform, AnimatePresence } from "framer-motion"; export default function DigitalAgencyHeaderMachine({ className }: { className?: string }) { const [isBtnHovered, setIsBtnHovered] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const containerRef = useRef(null); const scrollValue = useMotionValue(0); useEffect(() => { const fontUrl = "https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800&display=swap"; if (!document.querySelector("link[href='" + fontUrl + "']")) { const link = document.createElement("link"); link.rel = "stylesheet"; link.href = fontUrl; document.head.appendChild(link); } }, []); useEffect(() => { const handleScroll = () => { const scrollTop = window.scrollY; const docHeight = document.documentElement.scrollHeight; const winHeight = window.innerHeight; const maxScroll = docHeight - winHeight; if (maxScroll > 0) { const currentProgress = Math.min(1, Math.max(0, scrollTop / maxScroll)); if (currentProgress === 0 && scrollTop > 10) { return; } scrollValue.set(currentProgress); } }; window.addEventListener("scroll", handleScroll, { passive: true }); window.addEventListener("resize", handleScroll, { passive: true }); handleScroll(); return () => { window.removeEventListener("scroll", handleScroll); window.removeEventListener("resize", handleScroll); }; }, [scrollValue]); const leftHandX = useTransform(scrollValue, [0, 0.6], ["0%", "-45%"], { clamp: true }); const rightHandX = useTransform(scrollValue, [0, 0.6], ["0%", "45%"], { clamp: true }); const headerOpacity = useTransform(scrollValue, [0.1, 0.6], [0, 1], { clamp: true }); const headerScale = useTransform(scrollValue, [0.1, 0.6], [0.85, 1], { clamp: true }); const helperOpacity = useTransform(scrollValue, [0, 0.2], [0.4, 0], { clamp: true }); return (

setIsBtnHovered(true)} onMouseLeave={() => setIsBtnHovered(false)} layout style={{ display: "flex", flexDirection: isBtnHovered ? "row-reverse" : "row", padding: isBtnHovered ? "8px 8px 8px 20px" : "8px 20px 8px 8px", alignItems: "center", gap: "10px", borderRadius: "40px", background: "#F3F3F3", border: "none", cursor: "pointer" }} transition={{ duration: 0.25, ease: "easeInOut" as const }} className="hover:bg-[#e8e8e8] select-none shadow-xs" > Start Project

{isMobileMenuOpen && ( <> setIsMobileMenuOpen(false)} className="fixed inset-0 bg-black/10 backdrop-blur-xs z-30 md:hidden" />

{[ { id: "features", label: "Services" }, { id: "technology", label: "Solutions" }, { id: "gallery", label: "Portfolio" }, { id: "flavours", label: "Contact" } ].map((item: { id: string; label: string }) => ( setIsMobileMenuOpen(false)} style={{ fontFamily: '"Cabinet Grotesk", sans-serif', fontSize: "17px", fontWeight: 500, color: "#000" }} className="py-2.5 px-4 hover:bg-[#F3F3F3] active:bg-[#ebebeb] rounded-2xl transition-colors duration-200 block" > {item.label} ))}

)}

Creative
Digital Agency {" "} Studio

Scroll Down

); }

Creative Digital Agency {" "} Studio

Creative
Digital Agency {" "} Studio