header-5

1"use client";
2 
3import { AnimatePresence, motion } from "motion/react";
4import React, { useState } from "react";
5import { Logo } from "@/components/logo";
6import { Button } from "@/components/ui/button";
7import { useScroll } from "@/hooks/use-scroll";
8import { cn } from "@/lib/utils";
9import { Menu, Search, Sparkles, X } from "lucide-react";
10import Link from "next/link";
11 
12/**
13 * HEADER 5: NEURAL GLASS (REFINED)
14 * Minimalist, centered floating header with official branding and mobile precision.
15 */
16export function Header5() {
17  const scrolled = useScroll(80);
18  const [isOpen, setIsOpen] = useState(false);
19  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
20 
21  const navLinks = [
22    { name: "Features", href: "#" },
23    { name: "Solutions", href: "#" },
24    { name: "Enterprise", href: "#" },
25    { name: "Pricing", href: "#" },
26  ];
27 
28  return (
29    <header className="fixed top-0 z-50 w-full px-6 pt-6">
30      <motion.div
31        animate={{ 
32          y: 0, 
33          opacity: 1,
34          width: scrolled ? "auto" : "100%",
35          padding: scrolled ? "0.4rem 0.4rem 0.4rem 1rem" : "0.5rem 1.25rem"
36        }}
37        initial={{ y: -20, opacity: 0 }}
38        className={cn(
39          "mx-auto flex h-12 items-center justify-between transition-all duration-500",
40          "rounded-full border border-border/40 font-medium shadow-2xl",
41          scrolled 
42            ? "max-w-md bg-background/80 backdrop-blur-3xl ring-1 ring-white/10 dark:bg-zinc-900/80" 
43            : "max-w-7xl bg-background/30 backdrop-blur-lg"
44        )}
45      >
46        {/* Logo */}
47        <Link 
48          href="/" 
49          aria-label="Freddy UI Homepage"
50          className="flex items-center gap-2.5"
51        >
52          <motion.div
53            whileHover={{ scale: 1.05 }}
54            whileTap={{ scale: 0.95 }}
55            transition={{ type: "spring", stiffness: 400, damping: 17 }}
56            className="flex items-center"
57          >
58            <Logo className="h-4.5 w-auto" />
59          </motion.div>
60        </Link>
61 
62        {/* Center: Navigation (Desktop) */}
63        {!scrolled && (
64          <nav 
65            aria-label="Main Navigation"
66            className="absolute left-1/2 hidden -translate-x-1/2 items-center gap-0.5 md:flex"
67          >
68            {navLinks.map((link, i) => (
69              <Link
70                key={link.name}
71                href={link.href}
72                aria-label={`Navigate to ${link.name}`}
73// … truncated