import React, { useState } from 'react'; import { motion } from 'motion/react'; import { Check, Sparkles, Zap, Shield } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; import { Separator } from '@/components/ui/separator'; import { Container } from '@/components/ui/container'; interface PricingPlan { name: string; description: string; monthlyPrice: number; yearlyPrice: number; features: string[]; icon: React.ReactNode; popular?: boolean; } const plans: PricingPlan[] = [ { name: 'Starter', description: 'Perfect for individuals and small projects', monthlyPrice: 0, yearlyPrice: 0, icon: , features: [ 'Up to 3 projects', '1GB storage', 'Community support', 'Basic analytics', 'Email notifications' ] }, { name: 'Pro', description: 'For growing teams and businesses', monthlyPrice: 29, yearlyPrice: 24, icon: , popular: true, features: [ 'Unlimited projects', '50GB storage', 'Priority support', 'Advanced analytics', 'Custom integrations', 'Team collaboration', 'API access' ] }, { name: 'Enterprise', description: 'Scale with dedicated support and control', monthlyPrice: 99, yearlyPrice: 79, icon: , features: [ 'Everything in Pro', 'Unlimited storage', '24/7 dedicated support', 'Custom SLA', 'On-premise deployment', 'Advanced security', 'Training & onboarding' ] } ]; const PricingSection: React.FC = () => { const [isYearly, setIsYearly] = useState(false); return (

{/* Background Pattern */}

{/* Header */} Pricing

Simple, transparent pricing

Choose the perfect plan for your needs. No hidden fees, cancel anytime.

{/* Toggle */}

Monthly Yearly Save 20%

{/* Pricing Cards */}

{plans.map((plan, index) => ( {/* Popular Badge */} {plan.popular && ( Most Popular )}

{plan.icon}

{plan.name} {plan.description} {/* Price */}

${isYearly ? plan.yearlyPrice : plan.monthlyPrice} /month

{isYearly && plan.yearlyPrice > 0 && (

Billed ${plan.yearlyPrice * 12}/year

)}

{/* Features */}

{feature}

))}

{/* Trust Indicators */}

30-day

Free trial on paid plans

No credit

card required

Cancel

anytime, no questions

); }; export default PricingSection;

Pricing Section with Toggle