import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "motion/react"; import { Check, Info, Users, Cpu, ShieldCheck, Globe, ArrowRight } from "lucide-react"; import Header from "@/components/Header"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; import { Container } from "@/components/ui/container"; import { Slider } from "@/components/ui/slider"; import { Switch } from "@/components/ui/switch"; import { Label } from "@/components/ui/label"; import { Badge } from "@/components/ui/badge"; interface PlanProps { name: string; basePrice: number; seats: number; features: string[]; isYearly: boolean; highlighted?: boolean; } const PricingCard = ({ name, basePrice, seats, features, isYearly, highlighted }: PlanProps) => { const finalPrice = isYearly ? Math.floor(basePrice * 0.8 * seats) : basePrice * seats; return ( {highlighted && (

Popular Choice

)}

{name}

Scale your orchestration

$ {finalPrice} /mo

{features.map((feature, i) => (

{feature}

))}

); }; export default function App() { const [isYearly, setIsYearly] = useState(false); const [seats, setSeats] = useState([10]); const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); if (!mounted) return null; return (

{/* Hero Section */}

Pricing 2026 Edition

Fuel your growth engine.

Simple, transparent pricing that scales with your fleet. No hidden fees, no legacy bullshit. Just pure performance.

{/* Controls */}

{/* Seat Slider */}

Team Members

{seats}

Minimum 5 seats required for all plans.

{/* Billing Toggle */}

Switch to yearly billing

Get 2 months free per year

{/* 3D Card Grid */}

{/* Trust Indicators */}

Optimized Core

ISO 27001 Certified

Global Network

10ms Latency

); }

Interactive 3D Pricing Cards with Motion