import { useState } from "react"; import { motion } from "motion/react"; import { Check, Zap } from "lucide-react"; import { Container } from "@/components/ui/container"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Separator } from "@/components/ui/separator"; // Pricing data type interface Plan { id: string; name: string; description: string; price: { monthly: number; yearly: number }; features: string[]; isPopular?: boolean; isTeam?: boolean; } const PLANS: Plan[] = [ { id: "starter", name: "Starter", description: "For individual creators and hobbyists.", price: { monthly: 12, yearly: 9 }, features: [ "1 user", "10GB storage", "Basic analytics", "Email support", "Mobile app access", ], }, { id: "pro", name: "Pro", description: "For growing teams and power users.", price: { monthly: 29, yearly: 24 }, features: [ "Up to 5 users", "100GB storage", "Advanced analytics", "Priority support", "API access", "Custom integrations", "Team collaboration", ], isPopular: true, }, { id: "team", name: "Team", description: "For large organizations with complex needs.", price: { monthly: 79, yearly: 65 }, features: [ "Unlimited users", "1TB storage", "Real-time analytics", "24/7 dedicated support", "Advanced API access", "Custom SLAs", "SSO & SAML", "Audit logs", "On-premise option", ], isTeam: true, }, ]; export default function PricingSection() { const [billing, setBilling] = useState<"monthly" | "yearly">("monthly"); // Calculate discount for yearly const getDiscount = (monthly: number, yearly: number) => { const savings = ((monthly - yearly) / monthly) * 100; return `${Math.round(savings)}% off`; }; // Animation variants for cards const cardVariants = { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0, transition: { staggerChildren: 0.1 } }, }; return (

{/* Header Section */}

Simple Pricing

Plans that grow with you

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

{/* Billing Toggle */}

{/* Pricing Cards */} {PLANS.map((plan) => ( {/* Decorative SVG Mask Overlay */} {plan.isPopular && (

)}

{plan.name} {plan.isPopular && ( Popular )} {plan.isTeam && ( Enterprise )}

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

${billing === "monthly" ? plan.price.monthly : plan.price.yearly} /{billing === "yearly" ? "month" : "month"} {billing === "yearly" && ( {getDiscount(plan.price.monthly, plan.price.yearly)} )} {billing === "yearly" && (

Billed annually (${plan.price.yearly * 12})

)}

{/* Features List */}

{feature}

{/* CTA Button */} ))} {/* FAQ/Info Section */}

All plans include 14-day free trial. Cancel anytime. Enterprise pricing available for larger teams.

); }

Pricing Section with Toggle