announcement-3

1"use client";
2 
3import { Github } from "lucide-react";
4import { Logo } from "@/components/logo";
5import { Button } from "@/components/ui/button";
6 
7export default function DaytonaHeader() {
8  return (
9    <header className="sticky top-0 z-50 w-full bg-background font-sans tracking-tight">
10      {/* Top Announcement Bar */}
11      <div className="flex h-10 items-center justify-center border-border border-b bg-muted/40 px-4 text-center">
12        <p className="font-medium text-[13px] text-muted-foreground">
13          Freddy UI Pro: Elevate your SaaS dashboard with 50+ new premium blocks
14          {" // "}
15          <span className="cursor-pointer text-foreground underline underline-offset-4 transition-colors hover:text-primary">
16            Get Pro →
17          </span>
18        </p>
19      </div>
20 
21      {/* Main Navigation */}
22      <nav className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
23        <div className="flex items-center gap-6">
24          {/* Logo Section with Separator */}
25          <div className="flex items-center gap-4">
26            <Logo className="h-6" />
27            <span aria-hidden="true" className="font-thin text-2xl text-border">
28              /
29            </span>
30          </div>
31 
32          {/* All-Caps Navigation Links */}
33          <div className="hidden items-center gap-6 md:flex">
34            {["Components", "Blocks", "Templates", "Showcase", "Docs"].map(
35              (item) => (
36                <a
37                  className="font-bold text-[11px] text-muted-foreground uppercase tracking-[0.2em] transition-colors hover:text-foreground"
38                  href="#"
39                  key={item}
40                >
41                  {item}
42                </a>
43              )
44            )}
45          </div>
46        </div>
47 
48        {/* Right Actions */}
49        <div className="flex items-center gap-3">
50          <Button
51            className="hidden font-bold text-[13px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground md:inline-flex"
52            type="button"
53            variant="ghost"
54          >
55            Log In
56          </Button>
57 
58          {/* GitHub Stars Mock Button */}
59          <Button
60            className="flex h-9 items-center gap-2 rounded-lg border-border bg-muted/30 px-3 transition-all hover:bg-muted/50 active:scale-[0.98]"
61            type="button"
62            variant="outline"
63          >
64            <Github className="h-4 w-4" />
65// … truncated