Footer

Apercu

Le composant Footer affiche un pied de page simple avec le logo de la marque, un texte de copyright et une rangee de liens de navigation (Docs, GitHub, Twitter).

Fichier : src/components/Footer.tsx

Structure

Le footer utilise une disposition flex horizontale qui s'empile verticalement sur mobile :

export default function Footer() {
  return (
    <footer className="border-t border-gray-200 bg-white px-4 py-8 sm:px-6 lg:px-8">
      <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 sm:flex-row">
        {/* Logo + copyright */}
        {/* Nav links */}
      </div>
    </footer>
  );
}

Personnalisation

Changer le nom de la marque

Mettez a jour le texte du logo :

<span className="text-lg font-bold text-indigo-600">YourBrand</span>

Remplacez par une balise <img> pour un logo graphique.

Mettre a jour l'annee de copyright

L'annee est actuellement codee en dur. Pour une mise a jour dynamique :

<span className="text-sm text-gray-400">
  &copy; {new Date().getFullYear()}. All rights reserved.
</span>

Changer ou ajouter des liens

Les liens de navigation sont codes en dur dans le JSX. Ajoutez, supprimez ou modifiez-les :

<nav className="flex items-center gap-6">
  <a href="/docs" className="text-sm text-gray-400 transition hover:text-gray-600">
    Docs
  </a>
  <a href="https://github.com/your-repo" target="_blank" rel="noopener noreferrer" className="text-sm text-gray-400 transition hover:text-gray-600">
    GitHub
  </a>
  <a href="/privacy" className="text-sm text-gray-400 transition hover:text-gray-600">
    Privacy
  </a>
  <a href="/terms" className="text-sm text-gray-400 transition hover:text-gray-600">
    Terms
  </a>
</nav>

Ajouter des icones sociales

Remplacez les liens textuels par des icones Lucide pour les plateformes sociales :

import { Github, Twitter } from "lucide-react";

<a href="https://github.com/..." className="text-gray-400 hover:text-gray-600">
  <Github className="h-5 w-5" />
</a>

Ajouter plusieurs colonnes

Pour un pied de page plus detaille, restructurez en grille :

<div className="grid gap-8 sm:grid-cols-3">
  <div>
    <h4 className="font-semibold text-gray-900">Product</h4>
    {/* links */}
  </div>
  <div>
    <h4 className="font-semibold text-gray-900">Resources</h4>
    {/* links */}
  </div>
  <div>
    <h4 className="font-semibold text-gray-900">Legal</h4>
    {/* links */}
  </div>
</div>

Classes Tailwind principales

Classe	Fonction
`border-t border-gray-200`	Bordure superieure separant le footer du contenu
`flex-col sm:flex-row`	Empilage vertical sur mobile, horizontal sur desktop
`max-w-6xl mx-auto`	Largeur maximale coherente avec le reste de la page
`text-gray-400 hover:text-gray-600`	Liens discrets avec assombrissement au survol

Conseils

Incluez toujours des liens Politique de confidentialite et Conditions d'utilisation si vous traitez des donnees utilisateur.
Gardez le footer leger sur les pages d'atterrissage ; reservez les plans de site detailles pour l'application principale.

Fini ? Marquez cette page comme terminée.

Footer

On this page