import React, { useState } from 'react'; // Style 1: Modern Card Layout const ModernPricing = () => { const [isAnnual, setIsAnnual] = useState(true); return (

Choose Your Plan

Monthly Annual

{[ { name: 'Basic', price: isAnnual ? 99 : 10 }, { name: 'Pro', price: isAnnual ? 199 : 20 }, { name: 'Enterprise', price: isAnnual ? 299 : 30 } ].map((plan) => (

{plan.name}

${plan.price}

))}

); }; // Style 2: Feature-Focused Layout const FeaturePricing = () => { return (

{[ { name: 'Starter', price: 10, features: ['1 User', '5 Projects', 'Basic Support'] }, { name: 'Professional', price: 20, features: ['5 Users', '20 Projects', 'Priority Support', 'Analytics'] }, { name: 'Enterprise', price: 30, features: ['Unlimited Users', 'Unlimited Projects', '24/7 Support', 'Custom Features'] } ].map((plan) => (

{plan.name}

${plan.price}/mo

{feature}

))}

); }; // Main component that showcases all three variants const PricingShowcase = () => { return (

Modern Card Style

Feature-Focused Dark Style

); }; export default PricingShowcase;

Pricing Showcase

Usage