hero-6

1"use client";
2 
3import React, { useState } from "react";
4import { Hero6 } from "./hero";
5import { Logo, LogoIcon } from "@/components/logo";
6import { Button } from "@/components/ui/button";
7import { Box, CircleDot, Share2, Sparkles, ChevronDown, Menu, X } from "lucide-react";
8import { cn } from "@/lib/utils";
9import { AnimatePresence, motion } from "motion/react";
10import Link from "next/link";
11 
12/**
13 * TOP BANNER (Slate Infrastructure)
14 * Emerald banner at the absolute top of the page.
15 */
16function TopBanner() {
17  return (
18    <div className="flex h-10 w-full items-center justify-between bg-[#03251E] px-6 text-[11px] font-bold text-white uppercase tracking-widest sm:px-10">
19      <div className="flex items-center gap-2">
20         <CircleDot className="size-3 animate-pulse text-[#BFFF70]" />
21         <span>The banner is to inform the visitors of an important message</span>
22      </div>
23      <div className="hidden items-center gap-4 sm:flex">
24         <Share2 className="size-3.5 cursor-pointer hover:text-[#BFFF70] transition-colors" />
25         <Box className="size-3.5 cursor-pointer hover:text-[#BFFF70] transition-colors" />
26         <Sparkles className="size-3.5 cursor-pointer hover:text-[#BFFF70] transition-colors" />
27      </div>
28    </div>
29  );
30}
31 
32/**
33 * SLATE HEADER (Internal for Demo)
34 * Refined with official Logo and mobile precision.
35 */
36function SlateHeader() {
37  const [isOpen, setIsOpen] = useState(false);
38 
39  return (
40    <header className="sticky top-0 z-40 w-full border-b border-zinc-50 bg-white/80 backdrop-blur-md dark:border-zinc-900 dark:bg-zinc-950/80">
41      <div className="mx-auto flex h-12 items-center justify-between px-6 sm:px-10">
42        
43        {/* Logo */}
44        <Link 
45          href="/" 
46          aria-label="Freddy UI Homepage"
47          className="flex items-center gap-2.5"
48        >
49          <motion.div
50            whileHover={{ scale: 1.05 }}
51            whileTap={{ scale: 0.95 }}
52            transition={{ type: "spring", stiffness: 400, damping: 17 }}
53            className="flex items-center"
54          >
55            <Logo className="h-4.5 w-auto" />
56          </motion.div>
57        </Link>
58 
59        {/* Links (Desktop) */}
60        <nav 
61          aria-label="Main Navigation"
62          className="hidden items-center gap-8 md:flex"
63        >
64          {["Features", "Pricing", "About", "Contact"].map((link) => (
65            <Link 
66              key={link}
67              href="#" 
68              aria-label={`Navigate to ${link}`}
69// … truncated