claudmax 2.0.0 → 2.0.1

package/src/app/faq/FAQClient.tsx

@@ -1,227 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import Header from '@/components/Header';
-import Footer from '@/components/Footer';
-import { MessageCircle, Zap, Shield, Code2, CreditCard, RefreshCw, BookOpen, Search, ChevronRight, ChevronDown, Globe } from 'lucide-react';
-
-const CATEGORIES = [
-  { id: 'all', label: 'All Topics' },
-  { id: 'getting-started', label: 'Getting Started' },
-  { id: 'api-keys', label: 'API Keys' },
-  { id: 'usage', label: 'Usage & Limits' },
-  { id: 'integrations', label: 'Integrations' },
-  { id: 'billing', label: 'Billing & Plans' },
-  { id: 'reseller', label: 'Reseller Program' },
-];
-
-const FAQS = [
-  // Getting Started
-  {
-    id: 'gs-1', category: 'getting-started', q: 'What is ClaudMax?',
-    a: 'ClaudMax is a high-performance Claude API gateway that routes your requests through OpenRouter\'s free-tier infrastructure. It provides a unified endpoint compatible with the Anthropic API, so you can use Claude Opus 4.6, Sonnet 4.6, and Haiku 4.5 without a direct Anthropic subscription.',
-  },
-  {
-    id: 'gs-2', category: 'getting-started', q: 'How do I sign up and get started?',
-    a: 'Visit claudmax.pro, create a free account, and generate your first API key from the dashboard. Then set ANTHROPIC_BASE_URL=https://api.claudmax.pro and ANTHROPIC_API_KEY=your-key in your environment. That\'s it — you\'re ready to build.',
-  },
-  {
-    id: 'gs-3', category: 'getting-started', q: 'What information do I need to provide?',
-    a: 'Only your email address for account creation. No credit card is required for the free plan.',
-  },
-  {
-    id: 'gs-4', category: 'getting-started', q: 'How quickly is my API key activated?',
-    a: 'Immediately. Once you generate a key, it\'s live and usable right away.',
-  },
-  // API Keys
-  {
-    id: 'ak-1', category: 'api-keys', q: 'How do I create an API key?',
-    a: 'Log into your ClaudMax dashboard, go to the Keys tab, and click "Create Key". Give it a name, select your plan, and choose the duration (7 or 30 days). Your new key will be displayed immediately — copy and save it securely.',
-  },
-  {
-    id: 'ak-2', category: 'api-keys', q: 'Are my API keys secure?',
-    a: 'Yes. Keys are stored with one-way hashing in our database. They\'re transmitted over HTTPS-only, and you can revoke them instantly from your dashboard at any time.',
-  },
-  {
-    id: 'ak-3', category: 'api-keys', q: 'Can I have multiple API keys?',
-    a: 'Yes. You can create multiple keys with different plans and durations for different use cases. Each key tracks its own usage independently.',
-  },
-  {
-    id: 'ak-4', category: 'api-keys', q: 'What if my API key expires?',
-    a: 'Expired keys stop working and you\'ll need to create a new one from your dashboard. You\'ll see a countdown timer on expiring keys.',
-  },
-  {
-    id: 'ak-5', category: 'api-keys', q: 'Can I revoke an API key?',
-    a: 'Yes. Click "Revoke" next to any key in your dashboard. It\'s immediately deactivated and any in-flight requests will fail.',
-  },
-  // Usage & Limits
-  {
-    id: 'ul-1', category: 'usage', q: 'How does usage tracking work?',
-    a: 'Usage is tracked per 5-hour rolling window. Your dashboard shows real-time request counts and token usage. Limits reset automatically when the window expires.',
-  },
-  {
-    id: 'ul-2', category: 'usage', q: 'What are the token display multipliers?',
-    a: 'Tokens are displayed with a 3x multiplier to reflect the real-world value of smaller model outputs. For example, 1,000 tokens on the API may show as 3,000 in your dashboard usage stats.',
-  },
-  {
-    id: 'ul-3', category: 'usage', q: 'What happens when I hit a limit?',
-    a: 'Requests and tokens are capped per window. When you\'re close to a limit, your dashboard will show a warning. Once the limit is reached, new requests return a 429 error until the window resets.',
-  },
-  {
-    id: 'ul-4', category: 'usage', q: 'Can I monitor my usage in real-time?',
-    a: 'Yes. Your dashboard shows live usage stats, and you can use the /check-usage page for a detailed breakdown including plan limits and time remaining in your window.',
-  },
-  // Integrations
-  {
-    id: 'in-1', category: 'integrations', q: 'Which SDKs and tools are compatible with ClaudMax?',
-    a: 'ClaudMax works with any tool or SDK that uses the Anthropic API format. This includes Claude Code, Cursor, Windsurf, Cline, Roo Code, and all official Anthropic SDKs for Python, TypeScript, Go, and more.',
-  },
-  {
-    id: 'in-2', category: 'integrations', q: 'How do I configure Claude Code with ClaudMax?',
-    a: 'Set two environment variables: ANTHROPIC_BASE_URL=https://api.claudmax.pro and ANTHROPIC_API_KEY=your-claudmax-key. That\'s all — Claude Code will use ClaudMax automatically.',
-  },
-  {
-    id: 'in-3', category: 'integrations', q: 'Can I use Claude Code on iPhone or iPad?',
-    a: 'Yes. Claude Code is available on Apple Silicon Macs and iOS devices. ClaudMax works the same way on mobile — just set the environment variables.',
-  },
-  {
-    id: 'in-4', category: 'integrations', q: 'Does ClaudMax support MCP (Model Context Protocol)?',
-    a: 'Yes. ClaudMax provides an MCP server package. Install it via: npm install -g claudmax-mcp and configure it in your MCP-compatible tool.',
-  },
-  {
-    id: 'in-5', category: 'integrations', q: 'How do I use Claude in Cursor?',
-    a: 'Go to Cursor Settings → Models → Custom Model. Set the base URL to https://api.claudmax.pro and enter your ClaudMax API key. Select any of the available models.',
-  },
-  {
-    id: 'in-6', category: 'integrations', q: 'Does ClaudMax support image and audio generation?',
-    a: 'Yes. Image generation uses a free endpoint via Pollinations AI (no API key needed). Audio TTS requires an OpenAI API key configured in your .env file as OPENAI_API_KEY.',
-  },
-  // Billing & Plans
-  {
-    id: 'bp-1', category: 'billing', q: 'What plans are available?',
-    a: 'Free Trial (7 days), Standard (30 days), and custom plans for high-volume users. All plans include the 3x display multiplier on token tracking.',
-  },
-  {
-    id: 'bp-2', category: 'billing', q: 'How do I upgrade my plan?',
-    a: 'Contact us via the chat form on claudiapro.com/support or message us on WhatsApp. We\'ll set up a custom plan based on your volume needs.',
-  },
-  {
-    id: 'bp-3', category: 'billing', q: 'Do you offer refunds?',
-    a: 'Yes. We offer full refunds within 7 days of purchase for any billing-related issues. Contact support for assistance.',
-  },
-  {
-    id: 'bp-4', category: 'billing', q: 'Is there a free trial available?',
-    a: 'Yes. Every new account gets a free trial with limited usage to test the service. No credit card required.',
-  },
-  // Reseller
-  {
-    id: 'rs-1', category: 'reseller', q: 'Do you have a reseller program?',
-    a: 'Yes. Approved resellers get access to a dedicated dashboard where they can create and manage API keys for their customers, set custom key limits, and apply their own pricing.',
-  },
-  {
-    id: 'rs-2', category: 'reseller', q: 'How do I apply to become a reseller?',
-    a: 'Contact us via the chat form below, WhatsApp, or email codewpremium@gmail.com with your use case and expected volume. We review applications within 24 hours.',
-  },
-  {
-    id: 'rs-3', category: 'reseller', q: 'What controls do resellers have?',
-    a: 'Resellers can set custom key durations (7–30 days), assign specific plans to users, and monitor all keys created under their account. Admins can also manage which plans each user is allowed to access.',
-  },
-];
-
-function FAQItem({ faq }: { faq: typeof FAQS[0] }) {
-  const [expanded, setExpanded] = useState(false);
-  return (
-    <div className="border border-gray-200 rounded-xl overflow-hidden bg-white">
-      <button onClick={() => setExpanded(e => !e)}
-        className="w-full flex items-center justify-between px-5 py-4 text-left hover:bg-gray-50 transition-colors">
-        <span className="text-sm font-medium text-gray-900 pr-4">{faq.q}</span>
-        {expanded
-          ? <ChevronDown className="w-4 h-4 text-gray-400 flex-shrink-0" />
-          : <ChevronRight className="w-4 h-4 text-gray-400 flex-shrink-0" />}
-      </button>
-      {expanded && <div className="px-5 pb-4 text-sm text-gray-600 leading-relaxed">{faq.a}</div>}
-    </div>
-  );
-}
-
-function CategoryIcon({ id }: { id: string }) {
-  const map: Record<string, React.ReactNode> = {
-    'getting-started': <Zap className="w-4 h-4" />,
-    'api-keys': <Shield className="w-4 h-4" />,
-    'usage': <Search className="w-4 h-4" />,
-    'integrations': <Code2 className="w-4 h-4" />,
-    'billing': <CreditCard className="w-4 h-4" />,
-    'reseller': <RefreshCw className="w-4 h-4" />,
-  };
-  return <>{map[id] ?? <BookOpen className="w-4 h-4" />}</>;
-}
-
-export default function FAQClient() {
-  const [activeCategory, setActiveCategory] = useState('all');
-  const [search, setSearch] = useState('');
-
-  const filtered = FAQS.filter(faq => {
-    const matchCat = activeCategory === 'all' || faq.category === activeCategory;
-    const matchSearch = !search || faq.q.toLowerCase().includes(search.toLowerCase()) || faq.a.toLowerCase().includes(search.toLowerCase());
-    return matchCat && matchSearch;
-  });
-
-  return (
-    <div className="min-h-screen bg-gray-50 flex flex-col">
-      <Header />
-      <main className="flex-1">
-        {/* Hero */}
-        <section className="bg-gradient-to-br from-indigo-600 via-purple-600 to-indigo-800 text-white py-16">
-          <div className="max-w-3xl mx-auto px-6 text-center">
-            <div className="w-14 h-14 rounded-2xl bg-white/10 flex items-center justify-center mx-auto mb-5">
-              <BookOpen className="w-7 h-7 text-white" />
-            </div>
-            <h1 className="text-3xl font-bold mb-3">Frequently Asked Questions</h1>
-            <p className="text-indigo-100 text-base max-w-lg mx-auto">Quick answers to everything about ClaudMax — from setup to integrations and billing.</p>
-          </div>
-        </section>
-
-        <div className="max-w-3xl mx-auto px-6">
-          {/* Search */}
-          <div className="-mt-5 mb-8">
-            <div className="bg-white rounded-xl shadow-sm border border-gray-100 flex items-center gap-3 px-4 py-3">
-              <Search className="w-4.5 h-4.5 text-gray-400 flex-shrink-0" />
-              <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search questions..."
-                className="flex-1 text-sm outline-none" />
-            </div>
-          </div>
-
-          {/* Category Tabs */}
-          <div className="flex gap-2 flex-wrap mb-6">
-            {CATEGORIES.map(cat => (
-              <button key={cat.id} onClick={() => setActiveCategory(cat.id)}
-                className={`flex items-center gap-1.5 px-3.5 py-2 rounded-full text-xs font-medium transition-colors ${
-                  activeCategory === cat.id
-                    ? 'bg-indigo-600 text-white'
-                    : 'bg-white text-gray-600 border border-gray-200 hover:border-indigo-300 hover:text-indigo-600'
-                }`}>
-                {cat.id !== 'all' && <CategoryIcon id={cat.id} />}
-                {cat.label}
-              </button>
-            ))}
-          </div>
-
-          {/* Results count */}
-          <div className="text-xs text-gray-400 mb-4">{filtered.length} question{filtered.length !== 1 ? 's' : ''}</div>
-
-          {/* FAQ Items */}
-          <div className="space-y-2 pb-20">
-            {filtered.length > 0
-              ? filtered.map(faq => <FAQItem key={faq.id} faq={faq} />)
-              : (
-                <div className="text-center py-12 text-gray-500 text-sm">
-                  No questions found for &quot;{search}&quot;. Try a different search term.
-                </div>
-              )}
-          </div>
-        </div>
-      </main>
-      <Footer />
-    </div>
-  );
-}

package/src/app/faq/page.tsx

@@ -1,21 +0,0 @@
-import type { Metadata } from 'next';
-import FAQClient from './FAQClient';
-
-export const metadata: Metadata = {
-  title: 'FAQ | ClaudMax — Claude API Gateway',
-  description: 'Frequently Asked Questions about ClaudMax — API keys, usage tracking, plans, integrations with Claude Code, Cursor, Windsurf, and more.',
-  keywords: 'ClaudMax FAQ, Claude API FAQ, API gateway questions, usage limits, plans FAQ, Claude Code setup FAQ',
-  openGraph: {
-    title: 'FAQ | ClaudMax',
-    description: 'Frequently Asked Questions about ClaudMax API gateway.',
-    type: 'website',
-    url: 'https://claudmax.pro/faq',
-    siteName: 'ClaudMax',
-  },
-  twitter: { card: 'summary_large_image', title: 'FAQ | ClaudMax', description: 'Frequently Asked Questions about ClaudMax.' },
-  robots: { index: true, follow: true },
-};
-
-export default function FAQPage() {
-  return <FAQClient />;
-}

package/src/app/globals.css

@@ -1,75 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 210 20% 98%;
-    --foreground: 222 47% 11%;
-    --card: 0 0% 100%;
-    --card-foreground: 222 47% 11%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222 47% 11%;
-    --primary: 250 100% 67%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 220 14% 96%;
-    --secondary-foreground: 222 47% 11%;
-    --muted: 220 14% 96%;
-    --muted-foreground: 220 9% 46%;
-    --accent: 250 100% 67%;
-    --accent-foreground: 0 0% 100%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 220 13% 91%;
-    --input: 220 13% 91%;
-    --ring: 250 100% 67%;
-    --radius: 0.75rem;
-    --success: 160 84% 39%;
-    --success-bg: 150 94% 96%;
-    --success-border: 150 76% 70%;
-    --warning: 38 92% 50%;
-    --warning-bg: 48 96% 95%;
-    --warning-border: 38 92% 70%;
-  }
-}
-
-@layer base {
-  * { @apply border-border; }
-  body { @apply bg-background text-foreground antialiased; }
-  html { scroll-behavior: smooth; }
-}
-
-/* Custom scrollbar */
-::-webkit-scrollbar { width: 6px; }
-::-webkit-scrollbar-track { background: #F3F4F6; }
-::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }
-
-/* Selection */
-::selection { background: rgba(82, 68, 243, 0.15); }
-
-/* Card shadow */
-.card-shadow {
-  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.07), 0 1px 2px -1px rgba(0,0,0,0.07);
-}
-
-.card-shadow-md {
-  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.07);
-}
-
-/* Gradient text */
-.gradient-text {
-  background: linear-gradient(135deg, #5244F3, #818CF8);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-/* Pulse dot */
-@keyframes pulse-dot {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-.pulse-dot {
-  animation: pulse-dot 2s ease-in-out infinite;
-}

package/src/app/layout.tsx

@@ -1,80 +0,0 @@
-import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-import './globals.css';
-
-const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
-
-export const metadata: Metadata = {
-  metadataBase: new URL('https://claudmax.pro'),
-  title: {
-    default: 'ClaudMax — Claude API Gateway',
-    template: '%s | ClaudMax',
-  },
-  description:
-    'ClaudMax is a high-performance Claude API gateway powered by OpenRouter. Access Claude Opus 4.6, Sonnet 4.6, and Haiku 4.5 through a single endpoint. Works with Claude Code, Cursor, Windsurf, and every Anthropic SDK.',
-  keywords: [
-    'Claude API',
-    'Claude Code',
-    'API gateway',
-    'Anthropic',
-    'OpenRouter',
-    'Cursor AI',
-    'Windsurf',
-    'MCP',
-    'Model Context Protocol',
-    'AI proxy',
-    'Sonnet 4.6',
-    'Opus 4.6',
-    'Haiku 4.5',
-  ],
-  authors: [{ name: 'ClaudMax' }],
-  creator: 'ClaudMax',
-  openGraph: {
-    type: 'website',
-    locale: 'en_US',
-    url: 'https://claudmax.pro',
-    siteName: 'ClaudMax',
-    title: 'ClaudMax — Claude API Gateway',
-    description: 'High-performance Claude API gateway. Works with Claude Code, Cursor, Windsurf, and every Anthropic SDK.',
-    images: [
-      {
-        url: '/og-image.png',
-        width: 1200,
-        height: 630,
-        alt: 'ClaudMax — Claude API Gateway',
-      },
-    ],
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: 'ClaudMax — Claude API Gateway',
-    description: 'Access Claude Opus 4.6, Sonnet 4.6, and Haiku 4.5 through a single endpoint.',
-    images: ['/og-image.png'],
-  },
-  robots: {
-    index: true,
-    follow: true,
-    googleBot: {
-      index: true,
-      follow: true,
-      'max-video-preview': -1,
-      'max-image-preview': 'large',
-      'max-snippet': -1,
-    },
-  },
-};
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
-      </head>
-      <body className={`${inter.variable} font-sans antialiased bg-[#F9FAFB] min-h-screen flex flex-col`}>
-        {children}
-      </body>
-    </html>
-  );
-}

package/src/app/page.tsx

@@ -1,256 +0,0 @@
-import Link from 'next/link';
-import Header from '@/components/Header';
-import Footer from '@/components/Footer';
-
-export const metadata = {
-  title: 'ClaudMax — Claude API Gateway',
-  description: 'Access Claude Opus 4.6, Sonnet 4.6, and Haiku 4.5 through a single endpoint. Works with Claude Code, Cursor, Windsurf, and every Anthropic SDK instantly.',
-  keywords: 'Claude API, Claude Code, API gateway, Anthropic, Cursor, Windsurf, MCP, OpenAI compatible',
-  openGraph: {
-    title: 'ClaudMax — Claude API Gateway',
-    description: 'Drop-in Claude API gateway for Claude Code, Cursor, Windsurf and every Anthropic SDK.',
-    url: 'https://claudmax.pro',
-    siteName: 'ClaudMax',
-    type: 'website',
-  },
-};
-
-const NAV_LINKS = [
-  { href: '/docs', label: 'Docs' },
-  { href: '/docs?section=models', label: 'Models' },
-  { href: '/docs?section=limits', label: 'Pricing' },
-  { href: '/status', label: 'Status' },
-];
-
-const FEATURES = [
-  {
-    icon: (
-      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
-      </svg>
-    ),
-    title: 'Drop-in Replacement',
-    desc: 'Works with Claude Code, Cursor, Windsurf, Cline, and any Anthropic SDK. Just swap your base URL.',
-  },
-  {
-    icon: (
-      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
-      </svg>
-    ),
-    title: 'Per-Key Budget Controls',
-    desc: 'Set spending limits and token budgets per API key. Resellers can manage their own keys independently.',
-  },
-  {
-    icon: (
-      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <circle cx="12" cy="12" r="10"/>
-        <polyline points="12 6 12 12 16 14"/>
-      </svg>
-    ),
-    title: '5-Hour Rolling Windows',
-    desc: 'Isolated rate limits per key with automatic resets. Fair usage — no monthly caps that reset all at once.',
-  },
-  {
-    icon: (
-      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
-      </svg>
-    ),
-    title: 'Zero-Latency Streaming',
-    desc: 'Pass-through SSE streaming with no buffering or delays. Real-time responses for interactive use cases.',
-  },
-  {
-    icon: (
-      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-        <line x1="3" y1="9" x2="21" y2="9"/>
-        <line x1="9" y1="21" x2="9" y2="3"/>
-      </svg>
-    ),
-    title: 'Claude Native API',
-    desc: 'Full support for the Anthropic Messages API. Streaming, tools, and image input — everything Claude supports.',
-  },
-  {
-    icon: (
-      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
-        <circle cx="9" cy="7" r="4"/>
-        <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
-        <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
-      </svg>
-    ),
-    title: 'Multi-User & Resellers',
-    desc: 'Super admins, admins, and resellers with role-based access. Each reseller manages their own keys and users.',
-  },
-];
-
-const IDES = [
-  { name: 'Claude Code', icon: '⚡', color: 'bg-orange-50 border-orange-100 text-orange-600' },
-  { name: 'Cursor', icon: '◉', color: 'bg-violet-50 border-violet-100 text-violet-600' },
-  { name: 'VS Code', icon: '◇', color: 'bg-blue-50 border-blue-100 text-blue-600' },
-  { name: 'Windsurf', icon: '≋', color: 'bg-teal-50 border-teal-100 text-teal-600' },
-  { name: 'Cline', icon: '◈', color: 'bg-purple-50 border-purple-100 text-purple-600' },
-  { name: 'Roo Code', icon: '◎', color: 'bg-rose-50 border-rose-100 text-rose-600' },
-];
-
-export default function Home() {
-  return (
-    <div className="min-h-screen bg-[#F9FAFB] flex flex-col">
-      <Header />
-
-      {/* Hero */}
-      <section className="relative overflow-hidden pt-20 pb-24 px-6">
-        <div className="absolute top-[-200px] left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full bg-purple-200/20 blur-3xl pointer-events-none" />
-        <div className="absolute top-20 right-[-100px] w-[300px] h-[300px] rounded-full bg-purple-300/10 blur-3xl pointer-events-none" />
-
-        <div className="relative max-w-4xl mx-auto text-center">
-          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-purple-200/60 bg-purple-50/80 text-purple-600 text-xs font-semibold mb-8 backdrop-blur-sm">
-            <span className="relative flex h-2 w-2">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-purple-400 opacity-75"></span>
-              <span className="relative inline-flex rounded-full h-2 w-2 bg-purple-500"></span>
-            </span>
-            Powered by Claude Enterprise — 99.9% uptime
-          </div>
-
-          <h1 className="text-5xl sm:text-6xl lg:text-7xl font-black text-[#111827] leading-[1.1] tracking-tight mb-6">
-            Claude API.<br />
-            <span className="bg-gradient-to-r from-[#5244F3] via-[#7C3AED] to-[#9B59B6] bg-clip-text text-transparent">
-              Supercharged.
-            </span>
-          </h1>
-
-          <p className="text-lg sm:text-xl text-[#6B7280] max-w-2xl mx-auto mb-10 leading-relaxed">
-            Access Opus 4.6, Sonnet 4.6, and Haiku 4.5 through a single endpoint.
-            Works with Claude Code, Cursor, Windsurf, and every Anthropic SDK — instantly.
-          </p>
-
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mb-16">
-            <Link href="/docs">
-              <button className="w-full sm:w-auto bg-[#5244F3] hover:bg-[#4338CA] text-white rounded-full px-8 py-3 text-base font-semibold shadow-lg shadow-purple-200 transition-all hover:shadow-xl hover:shadow-purple-300 flex items-center gap-2">
-                Get Started
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
-              </button>
-            </Link>
-            <Link href="/docs">
-              <button className="w-full sm:w-auto bg-white hover:bg-gray-50 text-[#374151] border border-gray-200 rounded-full px-8 py-3 text-base font-semibold transition-all flex items-center gap-2">
-                Read the Docs
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
-              </button>
-            </Link>
-          </div>
-
-          {/* Terminal Preview */}
-          <div className="max-w-2xl mx-auto rounded-2xl border border-gray-200 bg-[#0d0d0d] overflow-hidden shadow-2xl shadow-gray-200/50 text-left">
-            <div className="flex items-center gap-1.5 px-4 py-3 border-b border-white/[0.06] bg-[#161616]">
-              <div className="w-3 h-3 rounded-full bg-red-500/60" />
-              <div className="w-3 h-3 rounded-full bg-yellow-500/60" />
-              <div className="w-3 h-3 rounded-full bg-green-500/60" />
-              <span className="ml-3 text-xs text-white/25 font-mono">terminal</span>
-            </div>
-            <div className="p-6 font-mono text-sm leading-relaxed space-y-2">
-              <div className="text-white/40"># One command to set up everything</div>
-              <div className="text-orange-400">$ <span className="text-white/80">curl -fsSL https://claudmax.pro/setup.sh | bash</span></div>
-              <div className="text-white/20 h-px bg-white/5 my-3" />
-              <div className="text-purple-400">⚡ ClaudMax Setup Wizard</div>
-              <div className="text-white/30">  ✓ Node.js v22 detected</div>
-              <div className="text-white/30">  ✓ Git detected</div>
-              <div className="text-white/30">  ✓ Claude CLI detected</div>
-              <div className="text-white/30">  → Configure IDEs: Claude Code, Cursor, Windsurf...</div>
-              <div className="text-emerald-400/80">  ✓ All systems configured successfully.</div>
-              <div className="text-white/20 mt-3"># Ready. Start building.</div>
-              <div className="text-orange-400">$ <span className="text-white/80">claude --model opus</span></div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Supported Platforms Strip */}
-      <section className="py-10 px-6 border-y border-gray-200 bg-white">
-        <div className="max-w-6xl mx-auto">
-          <p className="text-center text-[#9CA3AF] text-xs font-bold uppercase tracking-widest mb-6">Works with your favorite tools</p>
-          <div className="flex flex-wrap items-center justify-center gap-3">
-            {IDES.map((ide) => (
-              <div key={ide.name} className={`flex items-center gap-2 px-4 py-2 rounded-xl border text-sm font-semibold ${ide.color}`}>
-                <span className="text-base">{ide.icon}</span>
-                {ide.name}
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Features */}
-      <section className="py-24 px-6">
-        <div className="max-w-6xl mx-auto">
-          <div className="text-center mb-16">
-            <p className="text-[#5244F3] text-sm font-bold uppercase tracking-widest mb-3">Everything you need</p>
-            <h2 className="text-3xl sm:text-4xl font-black text-[#111827] tracking-tight">
-              Built for developers, by developers
-            </h2>
-          </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
-            {FEATURES.map((f) => (
-              <div key={f.title} className="group bg-white rounded-2xl border border-gray-200 p-6 hover:border-purple-200 hover:shadow-lg hover:shadow-purple-100/50 transition-all duration-200">
-                <div className="w-11 h-11 rounded-xl bg-purple-50 border border-purple-100 flex items-center justify-center text-[#5244F3] mb-4 group-hover:bg-[#5244F3] group-hover:text-white group-hover:border-transparent transition-all">
-                  {f.icon}
-                </div>
-                <h3 className="text-[#111827] font-bold text-base mb-2">{f.title}</h3>
-                <p className="text-[#9CA3AF] text-sm leading-relaxed">{f.desc}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Quick Start */}
-      <section className="py-24 px-6">
-        <div className="max-w-4xl mx-auto">
-          <div className="text-center mb-16">
-            <p className="text-[#5244F3] text-sm font-bold uppercase tracking-widest mb-3">Quick Setup</p>
-            <h2 className="text-3xl sm:text-4xl font-black text-[#111827] tracking-tight mb-4">
-              Up and running in 60 seconds
-            </h2>
-          </div>
-          <div className="space-y-4">
-            {[
-              {
-                num: '01',
-                title: 'Install ClaudMax CLI',
-                desc: 'One command installs the CLI and all system dependencies (Node.js, Git, Claude CLI).',
-                code: 'curl -fsSL https://claudmax.pro/setup.sh | bash',
-              },
-              {
-                num: '02',
-                title: 'Configure your API key',
-                desc: 'Run the setup wizard, enter your API key, and choose which IDEs to configure.',
-                code: 'npx claudmax',
-              },
-              {
-                num: '03',
-                title: 'Start building',
-                desc: 'Claude Code, Python, Node.js — everything works out of the box.',
-                code: 'claude --model opus',
-              },
-            ].map((step) => (
-              <div key={step.num} className="flex gap-5 bg-white rounded-2xl border border-gray-200 p-6 hover:border-purple-200 transition-all">
-                <div className="shrink-0 w-12 h-12 rounded-xl bg-[#5244F3]/5 border border-[#5244F3]/20 flex items-center justify-center text-[#5244F3] font-black text-lg">
-                  {step.num}
-                </div>
-                <div className="flex-1 pt-1">
-                  <h3 className="text-[#111827] font-bold text-base mb-1">{step.title}</h3>
-                  <p className="text-[#9CA3AF] text-sm mb-4">{step.desc}</p>
-                  <div className="bg-[#F9FAFB] rounded-xl border border-gray-200 px-4 py-3 font-mono text-sm text-[#5244F3] overflow-x-auto">
-                    {step.code}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      <Footer />
-    </div>
-  );
-}