import React, { useState, useMemo } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Check, Zap, Shield, Globe, ArrowRight, Sparkles, Activity, Server, Database, Terminal } from "lucide-react"; import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'; import Header from "./components/Header"; import Footer from "./components/Footer"; import { Container } from "@/components/ui/container"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; import { Slider } from "@/components/ui/slider"; import { Badge } from "@/components/ui/badge"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; // Mock data generator for the pricing curve const generateCurveData = (scale: number) => { return Array.from({ length: 12 }, (_, i) => ({ name: `M${i + 1}`, cost: Math.floor(Math.pow(i + 1, 1.8) * scale), usage: Math.floor(Math.pow(i + 1, 2.1) * (scale * 0.8)) })); }; const PRICE_PER_UNIT = 0.0042; export default function App() { const [units, setUnits] = useState([25000]); const [billingCycle, setBillingCycle] = useState("monthly"); const currentUnits = units[0]; const monthlyCost = useMemo(() => { const base = currentUnits * PRICE_PER_UNIT; return billingCycle === "yearly" ? base * 0.8 : base; }, [currentUnits, billingCycle]); const chartData = useMemo(() => generateCurveData(currentUnits / 1000), [currentUnits]); const tiers = [ { name: "Starter", description: "For side projects and small experiments.", price: currentUnits < 50000 ? Math.floor(monthlyCost) : 0, features: ["Up to 50k requests", "Standard latency", "Community support", "10GB Storage"], icon: , active: currentUnits < 50000 }, { name: "Pro", description: "Optimized for scaling production apps.", price: (currentUnits >= 50000 && currentUnits < 500000) ? Math.floor(monthlyCost * 1.2) : 199, features: ["Unlimited requests", "Edge acceleration", "Priority 24/7 support", "500GB NVMe Storage", "Custom domain SSL"], icon: , highlight: true, active: currentUnits >= 50000 && currentUnits < 500000 }, { name: "Enterprise", description: "Mission critical infra with total control.", price: "Custom", features: ["Multi-region failover", "Dedicated hardware", "SLA guarantees", "Unlimited Storage", "Whitelabel dashboard"], icon: , active: currentUnits >= 500000 } ]; return (

{/* Hero Section */}

Pricing 2.0 — Now with 20% lower infra costs

Scale your vision,
not your bill.

Predictable pricing that scales with your traffic. Move the slider below to estimate your 2026 infrastructure costs.

{/* Pricing Builder Section */}

{/* Left Column: Interactive Controls */}

Usage Volume

Adjust monthly request volume

{(currentUnits / 1000).toFixed(0)}k reqs/mo

Free Tier Mid-Market Hyperscale

Billing Period

Monthly Yearly -20%

Estimated Monthly Burn

${currentUnits >= 500000 ? '---' : monthlyCost.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 })} /mo

{/* Data Viz Card */}

Real-time Projection

Growth Trajectory

{/* Right Column: Pricing Tiers */}

{tiers.map((tier, idx) => ( {tier.highlight && (

Popular

)}

{tier.icon}

{tier.name}

{tier.description}

{typeof tier.price === 'number' ? `$${tier.price}` : tier.price}

{typeof tier.price === 'number' &&

USD / Month

}

{feat}

{tier.active && ( )} ))}

{/* Social Proof Section */}

Trusted by the next generation

Powering infrastructure for 5,000+ scaling startups in 2026.

{[ { name: "Sarah Chen", role: "CTO @ Velocity AI", text: "NeuralScale reduced our latency by 40% while cutting infra costs by half. The dynamic builder made it so easy to plan our runway.", img: "https://i.pravatar.cc/200?img=32" }, { name: "Marcus Thorne", role: "Lead Engineer @ Quantum", text: "The most intuitive pricing I've ever seen. No hidden fees, just pure performance that scales as we grow. Absolute game changer.", img: "https://i.pravatar.cc/200?img=12" }, { name: "Elena Rodriguez", role: "Founder @ EcoCloud", text: "Finally a provider that understands startups. The Enterprise tier features at a Pro price point is unheard of in this industry.", img: "https://i.pravatar.cc/200?img=45" } ].map((testimonial) => (

{[1, 2, 3, 4, 5].map((s) => )}

"{testimonial.text}"

{testimonial.name}

{testimonial.role}

))}

); }

Dynamic Pricing Builder with Interactive Tiers