Files
podcastdistributiona/components/marketing/site-header.tsx
T
Leon Serfaty cd1d6a1a28 Add brand logo + favicon across app surfaces
Ship the Podcast Distribution AI wordmark as real assets and replace the
Mic-tile + text placeholder everywhere it appeared.

- public/logo-dark.png (dark wordmark, for light backgrounds) and
  public/logo-light.png (light wordmark, for dark backgrounds)
- New <Logo> component swaps the two via Tailwind dark: variants, so the
  dark logo shows on all non-themed surfaces (marketing, auth, admin,
  public share) and the light logo only in dark-mode app surfaces
- Wire <Logo> into the marketing header/footer, auth layout, app header
  (default branch only - white-label org logos untouched), admin header
  (+ Admin badge), and the public share page
- Favicon via App Router file convention: app/icon.png + app/apple-icon.png

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-20 20:58:37 -04:00

33 lines
1.5 KiB
TypeScript

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Logo } from "@/components/ui/logo";
export function SiteHeader() {
return (
<header className="sticky top-0 z-40 w-full border-b border-border/70 bg-background/85 backdrop-blur-md">
<div className="container flex h-[72px] items-center justify-between">
<Link href="/" className="flex items-center" aria-label="Podcast Distribution AI">
<Logo className="h-7 w-auto" priority />
</Link>
<nav className="hidden items-center gap-8 text-sm font-medium text-muted-foreground md:flex">
<Link href="/#how-it-works" className="transition-colors hover:text-foreground">How it works</Link>
<Link href="/features" className="transition-colors hover:text-foreground">Features</Link>
<Link href="/pricing" className="transition-colors hover:text-foreground">Pricing</Link>
<Link href="/faq" className="transition-colors hover:text-foreground">FAQ</Link>
<Link href="/about" className="transition-colors hover:text-foreground">About</Link>
</nav>
<div className="flex items-center gap-2">
<Button asChild variant="ghost" size="sm" className="hidden sm:inline-flex">
<Link href="/sign-in">Log in</Link>
</Button>
<Button asChild size="sm">
<Link href="/sign-up">Get started</Link>
</Button>
</div>
</div>
</header>
);
}