Features

Apercu

Le composant Features affiche une grille responsive de cartes de fonctionnalites. Chaque carte montre une icone Lucide, un titre et une courte description.

Fichier : src/components/Features.tsx

Structure des donnees

Les fonctionnalites sont definies dans le tableau features en haut du fichier :

const features = [
  {
    icon: Shield,
    title: "Authentication",
    description: "Email/password, Google & GitHub OAuth, password reset..."
  },
  // ...5 more entries
];

Chaque entree possede trois proprietes :

Personnalisation

Ajouter ou supprimer des fonctionnalites

Ajoutez un nouvel objet au tableau features. Importez l'icone depuis lucide-react :

import { Shield, CreditCard, Mail, LayoutDashboard, Palette, Rocket, Zap } from "lucide-react";

const features = [
  // ...existing features,
  {
    icon: Zap,
    title: "API Routes",
    description: "Pre-built API endpoints with rate limiting and validation.",
  },
];

Supprimez une entree pour reduire la grille. La grille s'adapte automatiquement car elle utilise sm:grid-cols-2 lg:grid-cols-3.

Changer le titre de la section

Modifiez le <h2> et le <p> a l'interieur de la div d'en-tete :

<h2 className="text-3xl font-bold text-gray-900 sm:text-4xl">
  Why choose us
</h2>
<p className="mx-auto mt-4 max-w-2xl text-lg text-gray-500">
  Your custom subtitle here.
</p>

Changer le style des cartes

Chaque carte utilise ces classes principales :

Pour changer la couleur d'accentuation, remplacez indigo par la couleur de votre marque (par ex. bg-blue-50 et text-blue-600).

Disposition de la grille

La grille utilise grid gap-8 sm:grid-cols-2 lg:grid-cols-3 :

• 1 colonne sur mobile
• 2 colonnes a partir de sm (640px+)
• 3 colonnes a partir de lg (1024px+)

Pour 4 colonnes, ajoutez xl:grid-cols-4. Pour 2 colonnes maximum, supprimez lg:grid-cols-3.

Conseils

• Gardez les descriptions sous 30 mots pour une coherence visuelle entre les cartes.
• Utilisez des icones de la meme famille Lucide pour un aspect homogene. Parcourez les icones disponibles sur lucide.dev.
• La section n'a pas de couleur de fond (bg-white herite). Ajoutez bg-gray-50 a la <section> pour un contraste subtil avec les sections adjacentes.