"use client" // shadcn import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" // assets import { Check } from "lucide-react" const pricingData = { monthly: [ { name: "Starter", premium: false, price: 19, features: ["Complete documentation", "Sketch files", "2 team members"], }, { name: "Pro", premium: false, price: 29, features: ["Complete documentation", "Cloud storage", "30 team members"], }, { name: "Premium", premium: true, price: 49, featured: true, buttoncolor: "from-red-400 to-red-100", features: [ "Complete documentation", "20GB storage", "100 team members", "Priority support", ], }, { name: "Enterprise", premium: false, price: 89, features: [ "Unlimited members", "100GB storage", "500 team members", "24/7 support", ], }, ], quarterly: [ { name: "Starter", premium: false, price: 49, features: ["Complete documentation", "Sketch files", "2 team members"], }, { name: "Pro", premium: false, price: 79, features: ["Complete documentation", "Cloud storage", "30 team members"], }, { name: "Premium", premium: true, price: 129, featured: true, buttoncolor: "from-red-400 to-red-100", features: [ "Complete documentation", "20GB storage", "100 team members", "Priority support", ], }, { name: "Enterprise", premium: false, price: 239, features: [ "Unlimited members", "100GB storage", "500 team members", "24/7 support", ], }, ], annual: [ { name: "Starter", premium: false, price: 199, features: ["Complete documentation", "Sketch files", "2 team members"], }, { name: "Pro", premium: false, price: 299, features: ["Complete documentation", "Cloud storage", "30 team members"], }, { name: "Premium", premium: true, price: 499, featured: true, buttoncolor: "from-red-400 to-red-100", features: [ "Complete documentation", "20GB storage", "100 team members", "Priority support", ], }, { name: "Enterprise", premium: false, price: 899, features: [ "Unlimited members", "100GB storage", "500 team members", "24/7 support", ], }, ], lifetime: [ { name: "Starter", premium: false, price: 499, features: ["Complete documentation", "Sketch files", "2 team members"], }, { name: "Pro", premium: false, price: 799, features: ["Complete documentation", "Cloud storage", "30 team members"], }, { name: "Premium", premium: true, price: 999, featured: true, buttoncolor: "from-red-400 to-red-100", features: [ "Complete documentation", "20GB storage", "100 team members", "Priority support", ], }, { name: "Enterprise", premium: false, price: 1499, features: [ "Unlimited members", "100GB storage", "500 team members", "24/7 support", ], }, ], } export default function PricingSection() { const tabs = ["monthly", "quarterly", "annual", "lifetime"] as const return (

Pick the best plan for you

Free updates and premium support included.

{tabs.map((tab) => ( {tab} ))} {tabs.map((tab) => ( {pricingData[tab].map((plan, index) => (

{plan.name}

{plan.featured && ( Popular )}

${plan.price} / {tab === "monthly" ? "month" : tab === "quarterly" ? "quarter" : tab === "annual" ? "year" : "lifetime"}

{feature}

))} ))}

) }