announcement-2

1"use client";
2 
3import {
4  ArrowRight,
5  ChevronDown,
6  Globe,
7  Layout,
8  Menu,
9  ShieldCheck,
10  Sparkles,
11  X,
12} from "lucide-react";
13import { AnimatePresence, motion } from "motion/react";
14import * as React from "react";
15import { createPortal } from "react-dom";
16import { Logo } from "@/components/logo";
17import { Button } from "@/components/ui/button";
18 
19const MARQUEE_ITEMS = [
20  {
21    icon: Sparkles,
22    text: "Freddy UI Pro is now available with 50+ premium blocks",
23  },
24  {
25    icon: Layout,
26    text: "New 'Announcement' category just dropped! Check it out",
27  },
28  {
29    icon: ShieldCheck,
30    text: "Built with Shadcn UI, Tailwind CSS and Framer Motion",
31  },
32  { icon: Globe, text: "Trusted by 5,000+ developers worldwide" },
33];
34 
35const NAV_LINKS = [
36  { label: "Components", hasDropdown: true },
37  { label: "Blocks", hasDropdown: true },
38  { label: "Showcase", href: "#" },
39  { label: "Templates", hasDropdown: true },
40  { label: "Docs", href: "#" },
41];
42 
43export const MarqueeHeader = () => {
44  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
45  const [mounted, setMounted] = React.useState(false);
46 
47  React.useEffect(() => {
48    setMounted(true);
49    if (isMobileMenuOpen) {
50      document.body.style.overflow = "hidden";
51    } else {
52      document.body.style.overflow = "";
53    }
54    return () => {
55      document.body.style.overflow = "";
56    };
57  }, [isMobileMenuOpen]);
58 
59  return (
60    <header className="sticky top-0 z-50 w-full border-border border-b bg-background/95 backdrop-blur-md">
61      {/* Marquee Bar */}
62      <div className="relative flex h-9 items-center overflow-hidden border-border border-b bg-muted/30">
63        <div className="flex animate-marquee whitespace-nowrap py-2 [--duration:40s] [--gap:2rem]">
64          {[1, 2, 3, 4].map((i) => (
65            <div
66              className="flex shrink-0 items-center gap-8 px-4"
67              key={`marquee-group-${i}`}
68            >
69              {MARQUEE_ITEMS.map((item, _idx) => (
70                <div
71                  className="flex items-center gap-2 font-medium text-[12px] text-muted-foreground transition-colors hover:text-foreground"
72                  key={item.text}
73                >
74                  <item.icon className="h-3.5 w-3.5 text-primary/60" />
75                  <span>{item.text}</span>
76                  <ArrowRight className="hidden h-3 w-3 opacity-30 group-hover:block" />
77                </div>
78              ))}
79            </div>
80          ))}
81        </div>
82 
83// … truncated