"use client"; import { useState } from "react"; import { CircleCheck } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"; import { Separator } from "@/components/ui/separator"; import { Switch } from "@/components/ui/switch"; export default function PricingSection() { const [isYearly, setIsYearly] = useState(false); const plans = [ { id: "starter", name: "Starter", description: "Perfect for startups and small teams", monthlyPrice: "$29", yearlyPrice: "$290", features: [ "Up to 10 team members", "Access to all core features", "Email support", "5GB cloud storage" ], button: { text: "Get Started", url: "https://app.yoursaas.com/signup" } }, { id: "growth", name: "Growth", description: "For growing businesses needing more power", monthlyPrice: "$79", yearlyPrice: "$790", features: [ "Unlimited team members", "Advanced analytics", "Priority email & chat support", "Unlimited cloud storage" ], button: { text: "Start Free Trial", url: "https://app.yoursaas.com/signup" } } ]; return (

Flexible Plans for Every Stage

Whether you're just starting out or scaling fast, we’ve got a plan that fits your needs.

Monthly setIsYearly(!isYearly)} /> Yearly

{plans.map((plan) => (

{plan.name}

{plan.description}

{isYearly ? plan.yearlyPrice : plan.monthlyPrice} {isYearly ? "/yr" : "/mo"}

{feature}

))}

); }