import * as React from 'react'; import { motion, Variants } from 'framer-motion'; import { cn } from '@/lib/utils'; import { Check } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Switch } from '@/components/ui/switch'; import { Label } from '@/components/ui/label'; type PricingPlan = { name: string; price: { monthly: string; annual: string; }; description: string; features: string[]; cta: string; tag: string; link: string; highlight?: boolean; }; const pricingPlans: PricingPlan[] = [ { name: 'Starter', price: { monthly: 'Free', annual: 'Free', }, description: 'Perfect for individuals getting started', features: [ 'Up to 5 projects', '10GB storage', 'Basic analytics', 'Email support', ], cta: 'Get Started', link: '#', tag: 'Free Plan', }, { name: 'Professional', price: { monthly: '$49', annual: '$39', }, description: 'For growing teams and businesses', features: [ 'Unlimited projects', '50GB storage', 'Advanced analytics', 'Priority email support', 'API access', ], cta: 'Start Free Trial', link: '#', tag: 'Standard Plan', }, { name: 'Enterprise', price: { monthly: '$99', annual: '$79', }, description: 'For large scale organizations', features: [ 'Unlimited projects', 'Unlimited storage', 'Advanced analytics', '24/7 phone support', 'API access', 'Dedicated account manager', ], cta: 'Contact Sales', link: '#', tag: 'Premium Plan', highlight: true, }, ]; const containerVariants: Variants = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, }, }, }; const itemVariants: Variants = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0, transition: { type: 'spring', damping: 15, stiffness: 150, }, }, }; interface PricingProps { plans?: typeof pricingPlans; className?: string; } const PricingPage = ({ plans = pricingPlans, className }: PricingProps) => { const [isAnnual, setIsAnnual] = React.useState(true); return (

{/* Background elements */}

Pricing

{/* Pricing Container */}

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

); }; interface PriceDisplayProps { price: { monthly: string; annual: string; }; isAnnual: boolean; className?: string; } const PriceDisplay = ({ price, isAnnual, className }: PriceDisplayProps) => { return (

{price.monthly === 'Free' ? ( Free ) : ( <> {isAnnual ? price.annual : price.monthly} /{isAnnual ? 'y' : 'm'} )}

); }; interface PricingFeaturesProps { features: string[]; className?: string; } const PricingFeatures = ({ features, className }: PricingFeaturesProps) => { return (

{feature}

); }; interface PricingCardProps extends React.ComponentPropsWithoutRef { plan: PricingPlan; isAnnual: boolean; } const PricingCard = React.forwardRef( ({ plan, isAnnual, className, ...props }, ref) => { return (

{plan.tag}

); }, ); PricingCard.displayName = 'PricingCard'; interface BillingToggleProps { isAnnual: boolean; onCheckedChange: (checked: boolean) => void; className?: string; } const BillingToggle = ({ isAnnual, onCheckedChange, className, }: BillingToggleProps) => { return (

Monthly Annual (20% off)

); }; export default PricingPage; export type { PricingPlan }; export { pricingPlans }; export { PriceDisplay, PricingFeatures, PricingCard, BillingToggle };