Submatter/apps/web/components/marketing/site-header.tsx
Randall Stillwell 2f6adf4382 feat(web): Submatter marketing redesign with Signal Editorial system
Introduce public /landing and /pricing pages for the SBMTR brand with
bento features, convoy product demo, motion reveals, and scoped marketing
tokens. Unauthenticated visitors route to the landing page.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-10 22:50:05 -05:00

52 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>
);
}