"use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { CheckIcon, Minus, Plus } from "lucide-react"; import { AnimatePresence, motion } from "framer-motion"; import cn from "clsx"; export interface Plan { title: string; monthlyPrice: number; annuallyPrice: number; desc: string; features: string[]; buttonText: string; } interface PricingWithUserScalingProps { plans?: Plan[]; defaultBilling?: "monthly" | "annual"; defaultUsers?: number; } export const DEFAULT_PLANS: Plan[] = [ { title: "Free", monthlyPrice: 0, annuallyPrice: 0, desc: "Perfect to start with personal usage", features: [ "20 volts per month", "Roll over volts", "Personal use license", "Public generations", "Plugins for Figma, Framer, Webflow", ], buttonText: "Get Started", }, { title: "Basic", monthlyPrice: 8, annuallyPrice: Math.round(8 * 12 * 0.8), desc: "For growing teams", features: [ "Roll over volts", "Royalty free commercial license", "Public generations", "Plugins for Figma, Framer, Webflow", ], buttonText: "Get Started", }, { title: "Standard", monthlyPrice: 16, annuallyPrice: Math.round(16 * 12 * 0.8), desc: "For professional creators", features: [ "Roll over volts", "Royalty free commercial license", "Public generations", "Plugins for Figma, Framer, Webflow", ], buttonText: "Get Started", }, { title: "Pro", monthlyPrice: 32, annuallyPrice: Math.round(32 * 12 * 0.8), desc: "Advanced tools for teams", features: [ "Roll over volts", "Royalty free commercial license", "Private generations", "Plugins for Figma, Framer, Webflow", ], buttonText: "Get Started", }, { title: "Mastermind", monthlyPrice: 64, annuallyPrice: Math.round(64 * 12 * 0.8), desc: "All-in-one for enterprises", features: [ "Roll over volts", "Royalty free commercial license", "Private generations", "Plugins for Figma, Framer, Webflow", ], buttonText: "Get Started", }, ]; const PlanCard = ({ plan, billing, users, }: { plan: Plan; billing: "monthly" | "annual"; users: number; }) => { const price = billing === "annual" ? plan.annuallyPrice : plan.monthlyPrice; return (

{plan.title}

${price * users} /{billing}

{plan.desc}

{billing === "monthly" ? "Billed monthly" : "Billed in one annual payment"}

Includes: {plan.features.map((feature, idx) => (

{feature}

))}

); }; export function PricingWithUserScaling({ plans = DEFAULT_PLANS, defaultBilling = "monthly", defaultUsers = 1, }: PricingWithUserScalingProps) { const [billing, setBilling] = useState<"monthly" | "annual">(defaultBilling); const [users, setUsers] = useState(defaultUsers); return (

{/* Controls */}

Users: {users}

{/* Grid */}

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

); }

Pricing with User Scaling

Installation

Usage