ComponentsPricing Comparison

Pricing Comparison Component

PricingComparison Component Preview

page.tsx
import PricingComparison from "@/components/marketing/PricingComparison";
page.tsx
<PricingComparison
    title={
        <>
            Lorem ipsum dolor sit{" "}
            <span className="relative mt-4 inline-block whitespace-nowrap bg-blue-600 p-2 text-white">
                amet consectetur,
            </span>
            adipisicing elit.
        </>
    }
    subtitle="Lorem, ipsum dolor."
    description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, similique."
    plans={defaultPricingPlans}
    features={defaultPricingFeatures}
    buttonText="Start Now"
/>

Plan Naming: Use clear, benefit-focused names

// ❌ Bad Example - Generic names
plans: [
    { name: "Basic", price: "10" },
    { name: "Advanced", price: "20" },
];
 
// ✅ Good Example - Value-focused names
plans: [
    { name: "Starter", price: "10", subtitle: "For solo founders" },
    { name: "Scale", price: "20", subtitle: "For growing teams" },
];

Feature Comparison: Highlight key differentiators

// ❌ Bad Example - Vague features
features: [
    { name: "Support", basic: true, pro: true },
    { name: "Advanced Features", basic: false, pro: true },
];
 
// ✅ Good Example - Specific features
features: [
    { name: "Email Support", basic: "24/7", pro: "Priority 24/7" },
    { name: "API Calls", basic: "10K/month", pro: "Unlimited" },
];