Header

Top bar della landing: un “pill” floating in stile editoriale con brand mark a sinistra, link centrali e CTA a destra. Su mobile diventa un menu burger con drawer laterale.

File

components/Header.tsx

Uso base

Va in fondo al <body> del layout root o direttamente in cima a app/page.tsx:

import Header from "@/components/Header";

export default function Home() {
  return (
    <>
      <Header />
      {/* resto della pagina */}
    </>
  );
}

Personalizzare

• Nome del brand: prende config.appName, cambialo in config.ts.
• Link nav: modifica l'array links in cima al file — coppie { href, label }.
• CTA: la variabile cta è un <Link> che punta a /#pricing. Cambia destinazione o testo lì.
• Colori: usa i token --cream, --ink, --brick da app/globals.css. Cambi il tema, cambia tutto insieme.