"use client" import { useState } from "react" import { motion } from "motion/react" import { cn } from "@/lib/utils" const pricing = { title: "Pricing that scales with you", description: "Whichever plan you pick, it's free until you love your docs. That's our promise.", pricingItems: [ { name: "Free", href: "#", price: "$0", period: "month", yearlyPrice: "$0", features: [ "Custom domain", "SEO-optimizations", "Auto-generated API docs", "Built-in components library", ], description: "Perfect for individual users", buttonText: "Start Free", buttonColor: "bg-accent text-primary", isPopular: false, }, { name: "Startup", href: "#", price: "$12", period: "month", yearlyPrice: "$120", features: [ "Custom domain", "SEO-optimizations", "Auto-generated API docs", "Built-in components library", "E-commerce integration", "User authentication system", "Multi-language support", "Real-time collaboration tools", ], description: "Ideal for professionals and small teams", buttonText: "Upgrade to Pro", buttonColor: "bg-cyan-500 text-white", isPopular: true, }, { name: "Enterprise", href: "#", price: "$24", period: "month", yearlyPrice: "$240", features: [ "Custom domain", "SEO-optimizations", "Auto-generated API docs", "Built-in components librarys", "Real-time collaboration tools", ], description: "Best for large teams and enterprise-level organizations", buttonText: "Contact Sales", buttonColor: "bg-primary text-primary-foreground", isPopular: false, }, ], } interface TabsProps { activeTab: "yearly" | "monthly" setActiveTab: (tab: "yearly" | "monthly") => void className?: string } function PricingTabs({ activeTab, setActiveTab, className }: TabsProps) { return (

{["monthly", "yearly"].map((tab) => ( ))}

) } export function PricingSection() { const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">( "monthly" ) // Update price animation const PriceDisplay = ({ tier, }: { tier: (typeof pricing.pricingItems)[0] }) => { const price = billingCycle === "yearly" ? tier.yearlyPrice : tier.price return ( {price} ) } return (

{pricing.title}

{pricing.description}

{pricing.pricingItems.map((tier) => (

{tier.name} {tier.isPopular && ( Popular )}

/{billingCycle === "yearly" ? "year" : "month"}

{tier.description}

{tier.name !== "Basic" && (

Everything in {tier.name === "Pro" ? "Basic" : "Pro"} +

)}

{feature}

))}

) }

Pricing 01

Instalação

Dependências

Registry dependencies