Marketing-Navigation

Schwebende Navy-Pille mit Links und CTA. Unterhalb von 768 px wandern die Links in ein Sheet; Marke und Menü-Button bleiben sichtbar.

Live-Beispiel

Vorschau

Desktop, Tablet und Mobil über den Umschalter in der Kopfzeile. Unterhalb von 768 px greifen die echten Media-Queries im Rahmen.

Code

Der Block bringt keine Datenlogik mit; Inhalte kommen über Props. Links lassen sich über renderLink an den Router der App anschließen.

marketing-nav.tsxtsx

import { MarketingNav } from '@lukasfend/ui/blocks/marketing';
import { Button } from '@lukasfend/ui/components/button';

export function Kopfzeile() {
  return (
    <MarketingNav
      links={[
        { label: 'Produkt', href: '#produkt', active: true },
        { label: 'Preise', href: '#preise' },
      ]}
      cta={<Button size="sm" render={<a href="#start" />}>Kostenlos starten</Button>}
      renderLink={({ href, ...rest }) => <a href={href} {...rest} />}
    />
  );
}