import React, { useState } from 'react'; import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, } from '@/components/ui/card'; import { Button } from '@/components/ui/button'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; const plans = [ { id: 'starter', name: 'Starter', description: 'Built for early-stage marketers testing ideas.', monthly: 0, yearly: 0, features: ['1 active campaign', 'Basic analytics', 'Community support'], cta: 'Start for free', featured: false, }, { id: 'pro', name: 'Pro', description: 'For solo marketers and lean teams ready to grow.', monthly: 19, yearly: 144, features: ['Unlimited campaigns', 'Advanced analytics', 'Email automation', 'Priority support'], cta: 'Upgrade to Pro', featured: true, }, { id: 'team', name: 'Team', description: 'For marketing teams that move fast and scale faster.', monthly: 49, yearly: 408, features: [ 'Team collaboration', 'Custom domains', 'Lead scoring & CRM sync', 'Dedicated success manager', ], cta: 'Start your team', featured: false, }, ]; const PricingCard = ({ name, description, price, features, cta, featured, }: { name: string; description: string; price: number; features: string[]; cta: string; featured: boolean; }) => { return ( {name} {description}

{price === 0 ? 'Free' : `$${price}`} /mo

• {feature}

); }; const PricingSection = () => { const [isYearly, setIsYearly] = useState(false); return (

Monthly setIsYearly(val)} /> Yearly

{plans.map((plan) => ( ))}

); }

Simple Pricing Section