"use client"; import { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Check, X, ArrowRight, Lock, Mail, CreditCard, Sparkles } from "lucide-react"; export default function MorphingSubscriptionBox() { const [activePlan, setActivePlan] = useState(null); const [isSubmitting, setIsSubmitting] = useState(false); const plans = [ { id: "pro", name: "Pro", price: "29", description: "Everything you need to build advanced projects.", features: ["Unlimited Projects", "Custom Domains", "Advanced Analytics", "Priority Support"], accent: "from-blue-500 to-indigo-500", buttonColor: "bg-indigo-500 hover:bg-indigo-600", popular: false, }, { id: "lifetime", name: "Lifetime", price: "299", description: "Pay once, build forever. Ultimate value.", features: ["All Pro Features", "Early Access to Betas", "Direct Founder Chat", "No Monthly Fees"], accent: "from-amber-400 to-orange-500", buttonColor: "bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 hover:opacity-90", popular: true, } ]; const handleCheckout = (e: React.FormEvent) => { e.preventDefault(); setIsSubmitting(true); setTimeout(() => { setIsSubmitting(false); setActivePlan(null); }, 1500); }; return (

Choose your journey

Select the plan that fits your needs. Our seamless checkout process gets you up and running in seconds.

{plans.map((plan) => ( {plan.popular && (

Best Value

)}

{plan.name}

{plan.description}

$ {plan.price} {plan.id !== "lifetime" && /mo} {plan.features.map((feature) => (

{feature}

))} {activePlan !== plan.id ? ( setActivePlan(plan.id)} className={`w-full py-4 rounded-xl font-black text-[11px] uppercase tracking-[0.15em] transition-all active:scale-[0.98] ${ plan.popular ? "bg-amber-500 text-neutral-950 hover:bg-amber-400 shadow-lg shadow-amber-500/20" : "bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 hover:opacity-90" }`} > Get {plan.name} ) : (

Express Checkout

Secured by Stripe

)} ))}

); }