'use client' import { useState } from 'react' import { Check, X, ChevronRight } from 'lucide-react' type PricingFeature = { name: string included: boolean } type PricingTier = { name: string description: string price: { monthly: number yearly: number } features: PricingFeature[] highlighted?: boolean badge?: string } const pricingTiers: PricingTier[] = [ { name: "Basic", description: "Everything you need to get started", price: { monthly: 15, yearly: 144, }, features: [ { name: "Up to 5 users", included: true }, { name: "Basic analytics", included: true }, { name: "24-hour support response time", included: true }, { name: "API Access", included: false }, { name: "Custom domain", included: false }, { name: "Dedicated support", included: false }, ], }, { name: "Pro", description: "Perfect for growing teams", price: { monthly: 29, yearly: 288, }, features: [ { name: "Up to 10 users", included: true }, { name: "Advanced analytics", included: true }, { name: "4-hour support response time", included: true }, { name: "API Access", included: true }, { name: "Custom domain", included: true }, { name: "Dedicated support", included: false }, ], highlighted: true, badge: "Most Popular" }, { name: "Enterprise", description: "For large-scale applications", price: { monthly: 59, yearly: 588, }, features: [ { name: "Unlimited users", included: true }, { name: "Custom analytics", included: true }, { name: "1-hour support response time", included: true }, { name: "API Access", included: true }, { name: "Custom domain", included: true }, { name: "Dedicated support", included: true }, ], badge: "Custom" }, ] // Modern Card Layout export function ModernPricingTable() { const [isYearly, setIsYearly] = useState(false) return (

Simple, transparent pricing

Choose the perfect plan for your needs

Monthly Yearly (Save 20%)

{pricingTiers.map((tier) => (

{tier.badge && (

{tier.badge}

)}

{tier.name}

{tier.description}

${isYearly ? tier.price.yearly : tier.price.monthly} /{isYearly ? 'year' : 'month'}

{feature.included ? ( ) : ( )} {feature.name}

))}

) } // Minimal Layout export function MinimalPricingTable() { const [isYearly, setIsYearly] = useState(false) return (

Choose your plan

Start with our free trial. No credit card needed.

{pricingTiers.map((tier) => (

{tier.name}

{tier.badge && ( {tier.badge} )}

{tier.description}

${isYearly ? tier.price.yearly : tier.price.monthly} /{isYearly ? 'year' : 'month'}

{feature.included && ( )} {feature.name}

))}

) } // Horizontal Layout export function HorizontalPricingTable() { const [isYearly, setIsYearly] = useState(false) return (

Compare plans

Find the right plan for your business

{pricingTiers.map((tier) => (

{/* Plan Info */}

{tier.name}

{tier.badge && ( {tier.badge} )}

{tier.description}

{/* Price */}

${isYearly ? tier.price.yearly : tier.price.monthly}

/{isYearly ? 'year' : 'month'}

{/* Features */}

{feature.included && ( )} {feature.name}

{/* CTA */}

))}

) } export default function PricingPage() { return (

) }

Modern Pricing Tables