Pricing

Overview

The Pricing component displays a single pricing card with a strikethrough original price, the current price, a list of included features with checkmarks, and a CTA button.

File: src/components/Pricing.tsx

Data Structure

The included features are defined in a features array:

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

Each string becomes a line item with a green Check icon from Lucide.

Customization

Change the price

Edit the price display in the 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>

Remove the line-through span if you do not want to show an original price.

Add or remove features

Add or remove strings from the features array. Each entry renders as a bullet with a green checkmark.

Change the CTA button

The button at the bottom links to #pricing (itself, for Stripe integration). Update the text and link:

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

Multiple pricing tiers

To support multiple plans, convert to a plan-based data structure:

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

Then map over plans and render a card for each. Use grid sm:grid-cols-2 for side-by-side layout.

Key Tailwind Classes

Tips

• Add a "Most Popular" badge above the card for social proof: use a <span> with bg-indigo-600 text-white positioned above the card.
• The money-back guarantee text at the bottom builds trust. Keep it visible.
• For monthly/yearly toggle pricing, add a state variable and conditionally display different prices.