Pricing

Apercu

Le composant Pricing affiche une carte de tarification unique avec un prix barre, le prix actuel, une liste de fonctionnalites incluses avec des coches et un bouton CTA.

Fichier : src/components/Pricing.tsx

Structure des donnees

Les fonctionnalites incluses sont definies dans un tableau features :

const features = [
  "Next.js + Supabase + Stripe boilerplate",
  "Authentication (email, OAuth, password reset)",
  "Stripe subscriptions & credit system",
  "13 email templates (Resend)",
  "Admin dashboard",
  // ...more items
];

Chaque chaine devient un element de liste avec une icone verte Check de Lucide.

Personnalisation

Changer le prix

Modifiez l'affichage du prix dans le JSX :

<div className="flex items-baseline justify-center gap-3">
  <span className="text-lg text-gray-400 line-through">$249</span>
  <span className="text-6xl font-extrabold text-gray-900">$99</span>
</div>
<p className="mt-2 text-sm text-gray-500">
  One-time payment. No subscription.
</p>

Supprimez le span line-through si vous ne souhaitez pas afficher un prix d'origine.

Ajouter ou supprimer des fonctionnalites

Ajoutez ou supprimez des chaines du tableau features. Chaque entree s'affiche avec une coche verte.

Changer le bouton CTA

Le bouton en bas pointe vers #pricing (lui-meme, pour l'integration Stripe). Mettez a jour le texte et le lien :

<a href="https://buy.stripe.com/your-link" className="...">
  Buy Now — $99
</a>

Plusieurs niveaux de tarification

Pour prendre en charge plusieurs formules, convertissez vers une structure basee sur les formules :

const plans = [
  { name: "Starter", price: 49, features: ["..."] },
  { name: "Pro", price: 99, features: ["..."], popular: true },
];

Puis iterez sur plans et affichez une carte pour chacun. Utilisez grid sm:grid-cols-2 pour une disposition cote a cote.

Classes Tailwind principales

Conseils

• Ajoutez un badge "Le plus populaire" au-dessus de la carte pour la preuve sociale : utilisez un <span> avec bg-indigo-600 text-white positionne au-dessus de la carte.
• Le texte de garantie satisfait ou rembourse en bas renforce la confiance. Gardez-le visible.
• Pour une tarification avec bascule mensuel/annuel, ajoutez une variable d'etat et affichez conditionnellement des prix differents.