"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, useInView, AnimatePresence } from "framer-motion"; import { Menu, X } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } interface HeaderProps { className?: string; } // Interactive CountUp Component for Metrics and Stats function CountUp({ to, duration = 2, suffix = "", decimals = 0 }: { to: number; duration?: number; suffix?: string; decimals?: number }) { const [count, setCount] = useState(0); const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-100px" }); useEffect(() => { if (!isInView) return; let startTime: number | null = null; const startValue = 0; const animate = (timestamp: number) => { if (!startTime) startTime = timestamp; const progress = Math.min((timestamp - startTime) / (duration * 1000), 1); const currentValue = startValue + progress * (to - startValue); setCount(currentValue); if (progress < 1) { requestAnimationFrame(animate); } else { setCount(to); } }; requestAnimationFrame(animate); }, [to, duration, isInView]); return ( {count.toFixed(decimals)} {suffix} ); } // Letter animation component for immersive high-fidelity loading effect function AnimatedText({ text, className }: { text: string; className?: string }) { const words = text.split(" "); const container = { hidden: { opacity: 0 }, visible: (i = 1) => ({ opacity: 1, transition: { staggerChildren: 0.06, delayChildren: 0.04 * i }, }), }; const child = { visible: { opacity: 1, y: 0, transition: { type: "spring", damping: 15, stiffness: 100, }, }, hidden: { opacity: 0, y: 15, }, }; return ( {words.map((word, wordIndex) => { // Highlight "minutes," word with special class logic const isMinutes = word.toLowerCase().includes("minutes,"); return ( {word} ); })} ); } function ButtonTextWave({ text }: { text: string }) { return ( {text.split("").map((char, index) => ( {char === " " ? "\u00A0" : char} ))} ); } export default function Header({ className }: HeaderProps) { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [activeMenu, setActiveMenu] = useState("Home"); const [hoveredMenu, setHoveredMenu] = useState(null); const [activeDropdown, setActiveDropdown] = useState(null); const [isVideoHovered, setIsVideoHovered] = useState(false); const [isGalleryHovered, setIsGalleryHovered] = useState(false); const [isGenerateHovered, setIsGenerateHovered] = useState(false); const [isPlayBtnHovered, setIsPlayBtnHovered] = useState(false); const [isVideoModalOpen, setIsVideoModalOpen] = useState(false); const [currentImgIndex, setCurrentImgIndex] = useState(0); const slideshowImages = [ "https://cdn.jiro.build/LogoGen/Images/header%20img%2001.png", "https://cdn.jiro.build/LogoGen/Images/header%20img%2002.png", "https://cdn.jiro.build/LogoGen/Images/header%20img%2003.png", "https://cdn.jiro.build/LogoGen/Images/header%20img%2004.png", "https://cdn.jiro.build/LogoGen/Images/header%20top%20left%20img.png" ]; useEffect(() => { const interval = setInterval(() => { setCurrentImgIndex((prev) => (prev + 1) % slideshowImages.length); }, 3500); return () => clearInterval(interval); }, []); const menuItems = ["Home", "Business Tools", "Products", "Pricing", "More AI"]; const dropdownItems: Record> = { "Business Tools": [ { title: "Logo Maker", description: "Generate beautiful custom vector logos instantly" }, { title: "Brand Book Creator", description: "Auto-generate brand identity style kits" }, { title: "Business Card Builder", description: "Format instant print-ready card templates" }, { title: "AI Typography Match", description: "Find perfect font pairings automatically" } ], "More AI": [ { title: "AI Banner Maker", description: "Create high-converting ad layouts dynamically" }, { title: "Social Media Suite", description: "Instantly re-scale logos for all channels" }, { title: "Vectorizer Engine", description: "Convert raster images into high-res SVG paths" }, { title: "AI Assistant", description: "Real-time generative code & style suggestions" } ] }; return (