Header

Apercu

Le composant Header affiche une barre de navigation fixe en haut de page avec un comportement responsive. Il comprend un logo, des liens de navigation desktop, un bouton CTA et un menu hamburger pour les ecrans mobiles.

Fichier : src/components/Header.tsx

Fonctionnement

• Utilise useState pour suivre la position de defilement et l'etat du menu mobile
• Ajoute une bordure inferieure et une ombre lorsque l'utilisateur fait defiler au-dela de 10px
• La navigation desktop est masquee sous le breakpoint md ; le menu mobile apparait a la place
• Cliquer sur un lien mobile ferme automatiquement le menu

Liens de navigation

Les liens sont definis dans le tableau navLinks en haut du fichier :

const navLinks = [
  { label: "Features", href: "#features" },
  { label: "Pricing", href: "#pricing" },
  { label: "FAQ", href: "#faq" },
  { label: "Docs", href: "#" },
];

Ajoutez, supprimez ou reordonnez les entrees pour modifier la navigation. Chaque objet prend un label (texte affiche) et un href (ancre ou URL).

Personnalisation

Changer le logo

Remplacez le texte du logo a l'interieur de la balise <a> pres du haut du bloc de retour :

<a href="#" className="text-xl font-bold text-indigo-600">
  YourBrand
</a>

Remplacez par un <img> ou un SVG pour un logo graphique.

Changer le bouton CTA

Les boutons CTA desktop et mobile pointent tous deux vers #pricing. Mettez a jour le texte et le href pour correspondre a votre offre :

<a href="#pricing" className="...">
  Get Started — $49
</a>

Classes Tailwind principales

Ombre au defilement

Le header applique conditionnellement border-b border-gray-200 shadow-sm lorsque la page est defilée. Ceci est controle par l'etat scrolled et un ecouteur de defilement passif enregistre dans useEffect.

Menu mobile

Le menu mobile s'affiche conditionnellement lorsque mobileOpen est true. Il apparait sous le header sous forme de colonne de liens plus le bouton CTA. Chaque lien appelle setMobileOpen(false) au clic pour fermer automatiquement le menu.

Conseils

• Pour ajouter une variante mode sombre, remplacez bg-white/95 par dark:bg-gray-900/95 et ajustez les couleurs de texte en consequence.
• Pour les liens externes (par ex. GitHub), ajoutez target="_blank" et rel="noopener noreferrer" a l'ancre.