"use client"; import { useState } from "react"; import { motion } from "framer-motion"; import { Check, ArrowRight, Cpu, Zap, Shield, RotateCcw, Database, Activity, Lock, Maximize } from "lucide-react"; interface Plan { name: string; price: string; description: string; icon: any; popular?: boolean; accent: string; frontFeatures: string[]; backSpecs: { icon: any; label: string; value: string }[]; } const plans: Plan[] = [ { name: "Hobby", price: "15", description: "Perfect for side projects and learning.", icon: Cpu, accent: "text-blue-500", frontFeatures: ["1 Workspace", "Shared Infrastructure", "Community Support", "Basic Analytics"], backSpecs: [ { icon: Database, label: "Database", value: "PostgreSQL (Shared)" }, { icon: Activity, label: "API Limit", value: "100 requests / min" }, { icon: Maximize, label: "Storage", value: "5GB SSD" }, { icon: Lock, label: "Security", value: "Standard SSL" }, ] }, { name: "Pro", price: "49", description: "For professionals requiring high performance.", icon: Zap, popular: true, accent: "text-violet-500", frontFeatures: ["Unlimited Workspaces", "Dedicated Resources", "Priority Support", "Advanced Analytics"], backSpecs: [ { icon: Database, label: "Database", value: "PostgreSQL (Dedicated)" }, { icon: Activity, label: "API Limit", value: "2,000 requests / min" }, { icon: Maximize, label: "Storage", value: "50GB NVMe" }, { icon: Lock, label: "Security", value: "Advanced DDoS Protection" }, ] }, { name: "Enterprise", price: "99", description: "Maximum scale for mission-critical apps.", icon: Shield, accent: "text-emerald-500", frontFeatures: ["Custom Infrastructure", "Global Edge Network", "24/7 Phone Support", "Custom SLA"], backSpecs: [ { icon: Database, label: "Database", value: "Distributed Cluster" }, { icon: Activity, label: "API Limit", value: "Unlimited" }, { icon: Maximize, label: "Storage", value: "1TB+ NVMe Multi-region" }, { icon: Lock, label: "Security", value: "SOC2 & HIPAA Compliant" }, ] } ]; export default function ThreeDFlipCardDetails() { return (

Power in every detail

Flip any card to explore the technical specifications and infrastructure details powering your applications.

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

); } function FlipCard({ plan }: { plan: Plan }) { const [isFlipped, setIsFlipped] = useState(false); const Icon = plan.icon; return (

{/* --- FRONT SIDE --- */}

{plan.popular && (

{plan.name}

{plan.description}

$ {plan.price} /mo

{feature}

{/* --- BACK SIDE --- */}

{plan.name} Specs

Technical infrastructure and strict limits applied to this tier.

{plan.backSpecs.map((spec) => (

{spec.label}

{spec.value}

))}

); }