FAQ

Apercu

Le composant FAQ affiche une liste de questions frequemment posees sous forme d'accordeon. Une seule reponse est visible a la fois. Cliquer sur une question affiche sa reponse et ferme tout element precedemment ouvert.

Fichier : src/components/FAQ.tsx

Structure des donnees

Les questions sont definies dans le tableau faqs :

const faqs = [
  {
    question: "What's included?",
    answer: "You get the complete source code for a production-ready SaaS boilerplate..."
  },
  // ...more entries
];

Chaque entree possede une question (chaine) et une answer (chaine).

Comportement de bascule

Le composant utilise un seul etat openIndex (type number | null) :

const [openIndex, setOpenIndex] = useState<number | null>(null);

const toggle = (i: number) => {
  setOpenIndex(openIndex === i ? null : i);
};

• Cliquer sur un element ouvert met openIndex a null (le ferme).
• Cliquer sur un element ferme met openIndex a l'index de cet element.
• Un seul element peut etre ouvert a la fois.

Pour permettre l'ouverture de plusieurs elements simultanement, changez openIndex en Set<number> et basculez l'appartenance a la place.

Personnalisation

Ajouter ou modifier des questions

Ajoutez des entrees au tableau faqs. Il n'y a pas de limite stricte, mais 5 a 8 questions est typique pour une page d'atterrissage.

{
  question: "Do you offer refunds?",
  answer: "Yes, we have a 30-day money-back guarantee."
},

Changer le titre de la section

<h2 className="text-center text-3xl font-bold text-gray-900 sm:text-4xl">
  Common questions
</h2>

Styliser les elements de l'accordeon

Chaque element FAQ utilise ces classes principales :

Animation du chevron

L'icone ChevronDown effectue une rotation de 180 degres lorsqu'un element est ouvert, en utilisant transition-transform pour une animation fluide.

Conseils

• Gardez les reponses concises (1 a 3 phrases). Renvoyez vers la documentation pour des explications detaillees.
• Ordonnez les questions par frequence : placez les questions les plus courantes en premier.
• Utilisez du texte enrichi dans les reponses en remplacant le <p> par du JSX contenant des balises <a> ou des elements <strong>.
• La section utilise bg-gray-50 pour la separer visuellement des sections blanches adjacentes.