53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
|
import Link from "next/link";
|
||
|
|
|
||
|
|
import { Logo } from "@/components/marketing/logo";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
const nav = [
|
||
|
|
{ href: "/landing#features", label: "Features" },
|
||
|
|
{ href: "/landing#pipeline", label: "Pipeline" },
|
||
|
|
{ href: "/landing/pricing", label: "Pricing" },
|
||
|
|
] as const;
|
||
|
|
|
||
|
|
export function SiteHeader({ className }: { className?: string }) {
|
||
|
|
return (
|
||
|
|
<header
|
||
|
|
className={cn(
|
||
|
|
"sticky top-0 z-50 border-b border-[hsl(var(--hero-border))] bg-[hsl(var(--hero)/0.85)] text-[hsl(var(--hero-foreground))] backdrop-blur-md",
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<div className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-6 px-4 sm:px-6">
|
||
|
|
<Logo size="sm" variant="dark" />
|
||
|
|
|
||
|
|
<nav className="hidden items-center gap-8 md:flex" aria-label="Main">
|
||
|
|
{nav.map((item) => (
|
||
|
|
<Link
|
||
|
|
key={item.href}
|
||
|
|
href={item.href}
|
||
|
|
className="font-marketing text-sm text-[hsl(var(--hero-muted))] transition-colors hover:text-[hsl(var(--hero-foreground))]"
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div className="flex items-center gap-2 sm:gap-3">
|
||
|
|
<Link
|
||
|
|
href="/sign-in"
|
||
|
|
className="hidden font-marketing text-sm text-[hsl(var(--hero-muted))] transition-colors hover:text-[hsl(var(--hero-foreground))] sm:inline"
|
||
|
|
>
|
||
|
|
Sign in
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href="/sign-up"
|
||
|
|
className="inline-flex h-9 items-center border border-[hsl(var(--matter))] px-4 font-marketing text-sm font-medium text-[hsl(var(--matter))] transition-colors hover:bg-[hsl(var(--matter)/0.1)]"
|
||
|
|
>
|
||
|
|
Start free
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
}
|