Header (Navbar)

Navegación fija en la parte superior con efecto glass-morphism al hacer scroll, links de navegación y menu hamburguesa en movil.

Import

import { Navbar } from "@/components/landing";

Que incluye

• Navegación sticky con position: fixed y z-50
• Efecto glass-morphism al hacer scroll (backdrop-blur)
• Logo con gradiente y nombre del sitio
• Links de navegación configurables (Demo, Pricing, FAQ)
• Boton CTA "Comenzar" que enlaza a #pricing
• Menu hamburguesa en movil con toggle animado (Menu/X)
• Scroll listener optimizado con requestAnimationFrame
• Accesibilidad: aria-label y aria-expanded en boton movil

Tips

• Manten el nombre de tu marca corto. Siempre incluye un link a Pricing.
• Usa maximo 3-4 links de navegación. Demasiados links confunden al visitante.
• El CTA del header debe ser el mismo que el del Hero para mantener consistencia.
• En movil, menos es mas: solo los links esenciales.

Personalizacion

Cambiar links de navegación

Edita el array navLinks dentro de components/landing/navbar.tsx:

const navLinks: NavLink[] = [
  { href: "#demo", label: "Demo" },
  { href: "#pricing", label: "Pricing" },
  { href: "#faq", label: "FAQ" },
];

Cambiar el logo

Busca el bloque <Link href="/"> en el componente y reemplaza el icono Sword y el texto:

<div className="w-9 h-9 rounded-lg bg-gradient-to-br from-primary to-gold flex items-center justify-center">
  <Sword className="w-5 h-5 text-white" />
</div>
<span className="font-bold text-lg">
  Tu<span className="text-primary">Marca</span>
</span>

Cambiar el texto del CTA

Busca el <Button> y cambia el texto y el link:

<Button size="sm" className="glow-sm" asChild>
  <a href="#pricing">Comenzar</a>
</Button>