llmapi-v2 2.1.0

package/views/pages/index.ejs

@@ -0,0 +1,416 @@
+<%- include('../partials/header') %>
+
+<%- include('../partials/nav') %>
+
+<!-- Hero Section -->
+<section class="relative overflow-hidden">
+  <div class="absolute inset-0 bg-gradient-to-b from-claude-cream via-white to-claude-cream"></div>
+  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-20 sm:pt-28 sm:pb-28">
+    <div class="text-center max-w-4xl mx-auto">
+      <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold text-claude-dark tracking-tight leading-[1.1]">
+        Claude Code.<br>
+        <span class="text-claude-orange">90% Less.</span>
+      </h1>
+      <p class="mt-6 text-lg sm:text-xl text-gray-500 leading-relaxed max-w-2xl mx-auto">
+        The same powerful CLI. The same tool support. A fraction of the cost.<br class="hidden sm:block">
+        Set two environment variables and start coding.
+      </p>
+      <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
+        <a href="/register" class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-white bg-claude-orange rounded-xl hover:bg-claude-orange-hover transition-all shadow-md hover:shadow-lg">
+          Get Free API Key
+          <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+        </a>
+        <a href="/docs" class="w-full sm:w-auto inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-claude-dark bg-white rounded-xl border border-gray-200 hover:border-gray-300 hover:shadow transition-all">
+          Read the Docs
+        </a>
+      </div>
+      <div class="mt-12 flex items-center justify-center gap-6 sm:gap-10 text-sm text-gray-400 font-medium">
+        <span class="flex items-center gap-2">
+          <svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
+          Full Tool Support
+        </span>
+        <span class="flex items-center gap-2">
+          <svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
+          Streaming SSE
+        </span>
+        <span class="flex items-center gap-2">
+          <svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
+          99.9% Uptime
+        </span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- The Problem Section -->
+<section class="bg-claude-dark py-20 sm:py-28">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="text-center mb-16">
+      <h2 class="text-3xl sm:text-4xl font-bold text-white tracking-tight">The problem with Claude Code today</h2>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+      <!-- Pain Point 1 -->
+      <div class="bg-white/5 border border-white/10 rounded-2xl p-8 text-center">
+        <div class="w-14 h-14 mx-auto mb-5 rounded-xl bg-red-500/10 flex items-center justify-center">
+          <svg class="w-7 h-7 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+        </div>
+        <h3 class="text-lg font-semibold text-white mb-2">API costs $100-200/month</h3>
+        <p class="text-gray-400 text-sm leading-relaxed">Average developer spends $6/day on Claude API tokens. That adds up fast.</p>
+      </div>
+      <!-- Pain Point 2 -->
+      <div class="bg-white/5 border border-white/10 rounded-2xl p-8 text-center">
+        <div class="w-14 h-14 mx-auto mb-5 rounded-xl bg-yellow-500/10 flex items-center justify-center">
+          <svg class="w-7 h-7 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+        </div>
+        <h3 class="text-lg font-semibold text-white mb-2">Pro plan runs out in 45 min</h3>
+        <p class="text-gray-400 text-sm leading-relaxed">Rate limits kill your flow. You hit the cap right when you need it most.</p>
+      </div>
+      <!-- Pain Point 3 -->
+      <div class="bg-white/5 border border-white/10 rounded-2xl p-8 text-center">
+        <div class="w-14 h-14 mx-auto mb-5 rounded-xl bg-orange-500/10 flex items-center justify-center">
+          <svg class="w-7 h-7 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
+        </div>
+        <h3 class="text-lg font-semibold text-white mb-2">Alternatives are a nightmare</h3>
+        <p class="text-gray-400 text-sm leading-relaxed">LiteLLM breaks, proxies fail, tool calling doesn't work. Hours wasted debugging.</p>
+      </div>
+    </div>
+    <div class="text-center mt-14">
+      <p class="text-2xl sm:text-3xl font-bold text-white">We solved all three.</p>
+    </div>
+  </div>
+</section>
+
+<!-- How It Works Section -->
+<section class="py-20 sm:py-28 bg-claude-cream">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="text-center mb-16">
+      <h2 class="text-3xl sm:text-4xl font-bold text-claude-dark tracking-tight">Up and running in 60 seconds</h2>
+      <p class="mt-4 text-lg text-gray-500">Three steps. No configuration files. No proxy servers.</p>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+      <!-- Step 1 -->
+      <div class="text-center">
+        <div class="w-12 h-12 mx-auto mb-5 rounded-full bg-claude-orange text-white flex items-center justify-center text-xl font-bold">1</div>
+        <h3 class="text-lg font-semibold text-claude-dark mb-2">Sign up</h3>
+        <p class="text-gray-500 text-sm">Get your API key in 30 seconds. Free tier included.</p>
+      </div>
+      <!-- Step 2 -->
+      <div class="text-center">
+        <div class="w-12 h-12 mx-auto mb-5 rounded-full bg-claude-orange text-white flex items-center justify-center text-xl font-bold">2</div>
+        <h3 class="text-lg font-semibold text-claude-dark mb-2">Set two variables</h3>
+        <p class="text-gray-500 text-sm mb-4">Add these to your shell and you're done.</p>
+      </div>
+      <!-- Step 3 -->
+      <div class="text-center">
+        <div class="w-12 h-12 mx-auto mb-5 rounded-full bg-claude-orange text-white flex items-center justify-center text-xl font-bold">3</div>
+        <h3 class="text-lg font-semibold text-claude-dark mb-2">Code as usual</h3>
+        <p class="text-gray-500 text-sm">Claude Code works exactly the same. No changes needed.</p>
+      </div>
+    </div>
+    <!-- Code Snippet -->
+    <div class="max-w-2xl mx-auto mt-12">
+      <div class="bg-claude-dark rounded-2xl overflow-hidden shadow-xl">
+        <div class="flex items-center gap-2 px-5 py-3 border-b border-white/10">
+          <span class="w-3 h-3 rounded-full bg-red-500/70"></span>
+          <span class="w-3 h-3 rounded-full bg-yellow-500/70"></span>
+          <span class="w-3 h-3 rounded-full bg-green-500/70"></span>
+          <span class="ml-3 text-xs text-gray-500 font-mono">terminal</span>
+        </div>
+        <div class="p-6 font-mono text-sm leading-relaxed">
+          <p class="text-gray-400"># Point Claude Code to LLM API</p>
+          <p class="text-green-400 mt-1"><span class="text-gray-500">$</span> export ANTHROPIC_BASE_URL=https://llmapi.pro</p>
+          <p class="text-green-400 mt-1"><span class="text-gray-500">$</span> export ANTHROPIC_API_KEY=your-key</p>
+          <p class="text-gray-400 mt-4"># That's it. Start coding.</p>
+          <p class="text-green-400 mt-1"><span class="text-gray-500">$</span> claude</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- What's Included Section -->
+<section class="py-20 sm:py-28 bg-white">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="text-center mb-16">
+      <h2 class="text-3xl sm:text-4xl font-bold text-claude-dark tracking-tight">Everything you need</h2>
+      <p class="mt-4 text-lg text-gray-500">Built for Claude Code from the ground up.</p>
+    </div>
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-4xl mx-auto">
+      <!-- Card 1 -->
+      <div class="bg-claude-cream rounded-2xl p-8 border border-gray-100">
+        <div class="w-12 h-12 mb-5 rounded-xl bg-claude-orange/10 flex items-center justify-center">
+          <svg class="w-6 h-6 text-claude-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
+        </div>
+        <h3 class="text-lg font-semibold text-claude-dark mb-2">Full Anthropic API</h3>
+        <p class="text-gray-500 text-sm leading-relaxed">Every endpoint Claude Code uses. Messages, streaming, tool calling, extended thinking. Complete compatibility.</p>
+      </div>
+      <!-- Card 2 -->
+      <div class="bg-claude-cream rounded-2xl p-8 border border-gray-100">
+        <div class="w-12 h-12 mb-5 rounded-xl bg-claude-orange/10 flex items-center justify-center">
+          <svg class="w-6 h-6 text-claude-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+        </div>
+        <h3 class="text-lg font-semibold text-claude-dark mb-2">Smart Routing</h3>
+        <p class="text-gray-500 text-sm leading-relaxed">Requests automatically routed to the fastest available model. No configuration needed.</p>
+      </div>
+      <!-- Card 3 -->
+      <div class="bg-claude-cream rounded-2xl p-8 border border-gray-100">
+        <div class="w-12 h-12 mb-5 rounded-xl bg-claude-orange/10 flex items-center justify-center">
+          <svg class="w-6 h-6 text-claude-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
+        </div>
+        <h3 class="text-lg font-semibold text-claude-dark mb-2">Usage Dashboard</h3>
+        <p class="text-gray-500 text-sm leading-relaxed">Track tokens, monitor costs, manage API keys. All in one place.</p>
+      </div>
+      <!-- Card 4 -->
+      <div class="bg-claude-cream rounded-2xl p-8 border border-gray-100">
+        <div class="w-12 h-12 mb-5 rounded-xl bg-claude-orange/10 flex items-center justify-center">
+          <svg class="w-6 h-6 text-claude-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
+        </div>
+        <h3 class="text-lg font-semibold text-claude-dark mb-2">Always On</h3>
+        <p class="text-gray-500 text-sm leading-relaxed">Multi-provider failover. If one backend goes down, we switch automatically. Your work never stops.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Pricing Section -->
+<section id="pricing" class="py-20 sm:py-28 bg-claude-cream">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="text-center mb-16">
+      <h2 class="text-3xl sm:text-4xl font-bold text-claude-dark tracking-tight">Simple, honest pricing</h2>
+      <p class="mt-4 text-lg text-gray-500">No per-token surprises. Pick a plan and code.</p>
+    </div>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
+      <!-- Free -->
+      <div class="bg-white rounded-2xl p-7 border border-gray-200 flex flex-col">
+        <h3 class="text-base font-semibold text-claude-dark">Free</h3>
+        <div class="mt-3 mb-1"><span class="text-4xl font-bold text-claude-dark">$0</span></div>
+        <p class="text-sm text-gray-400 mb-5">50K tokens/mo</p>
+        <p class="text-sm text-gray-500 mb-6">3-4 conversations to try</p>
+        <a href="/register" class="mt-auto block text-center px-5 py-2.5 text-sm font-semibold rounded-xl border border-gray-200 text-claude-dark hover:border-claude-orange hover:text-claude-orange transition-colors">Get Started</a>
+      </div>
+      <!-- Starter -->
+      <div class="bg-white rounded-2xl p-7 border border-gray-200 flex flex-col">
+        <h3 class="text-base font-semibold text-claude-dark">Starter</h3>
+        <div class="mt-3 mb-1"><span class="text-4xl font-bold text-claude-dark">$9</span><span class="text-sm text-gray-400">/mo</span></div>
+        <p class="text-sm text-gray-400 mb-5">2M tokens/mo</p>
+        <p class="text-sm text-gray-500 mb-6">~130 conversations</p>
+        <a href="/register" class="mt-auto block text-center px-5 py-2.5 text-sm font-semibold rounded-xl border border-gray-200 text-claude-dark hover:border-claude-orange hover:text-claude-orange transition-colors">Get Started</a>
+      </div>
+      <!-- Pro (highlighted) -->
+      <div class="bg-claude-dark rounded-2xl p-7 border-2 border-claude-orange flex flex-col relative shadow-lg">
+        <span class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-0.5 text-xs font-semibold bg-claude-orange text-white rounded-full">Most Popular</span>
+        <h3 class="text-base font-semibold text-white">Pro</h3>
+        <div class="mt-3 mb-1"><span class="text-4xl font-bold text-white">$29</span><span class="text-sm text-gray-400">/mo</span></div>
+        <p class="text-sm text-gray-400 mb-5">10M tokens/mo</p>
+        <p class="text-sm text-gray-300 mb-6">~650 conversations</p>
+        <a href="/register" class="mt-auto block text-center px-5 py-2.5 text-sm font-semibold rounded-xl bg-claude-orange text-white hover:bg-claude-orange-hover transition-colors">Get Started</a>
+      </div>
+      <!-- Team -->
+      <div class="bg-white rounded-2xl p-7 border border-gray-200 flex flex-col">
+        <h3 class="text-base font-semibold text-claude-dark">Team</h3>
+        <div class="mt-3 mb-1"><span class="text-4xl font-bold text-claude-dark">$99</span><span class="text-sm text-gray-400">/mo</span></div>
+        <p class="text-sm text-gray-400 mb-5">50M tokens/mo</p>
+        <p class="text-sm text-gray-500 mb-6">~3,250 conversations</p>
+        <a href="/register" class="mt-auto block text-center px-5 py-2.5 text-sm font-semibold rounded-xl border border-gray-200 text-claude-dark hover:border-claude-orange hover:text-claude-orange transition-colors">Get Started</a>
+      </div>
+    </div>
+    <div class="text-center mt-10">
+      <p class="text-gray-500 text-sm">1 typical Claude Code conversation uses ~15K tokens</p>
+      <p class="text-gray-500 text-sm mt-1">Claude Code Max costs <span class="font-semibold text-claude-dark">$200/month</span> for similar usage. Our Pro plan is <span class="font-semibold text-claude-orange">$29</span>.</p>
+    </div>
+  </div>
+</section>
+
+<!-- Social Proof Section -->
+<section class="py-20 sm:py-28 bg-white">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="text-center mb-16">
+      <h2 class="text-3xl sm:text-4xl font-bold text-claude-dark tracking-tight">What developers say</h2>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+      <!-- Testimonial 1 -->
+      <div class="bg-claude-cream rounded-2xl p-8 border border-gray-100">
+        <div class="flex items-center gap-1 mb-4">
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+        </div>
+        <p class="text-gray-600 text-sm leading-relaxed mb-5">"Switched from the official API and saved $150 in the first month. Setup took literally two minutes. Everything just works."</p>
+        <div class="flex items-center gap-3">
+          <div class="w-9 h-9 rounded-full bg-claude-orange/10 text-claude-orange flex items-center justify-center text-sm font-bold">M</div>
+          <div>
+            <p class="text-sm font-semibold text-claude-dark">Marcus T.</p>
+            <p class="text-xs text-gray-400">Full-stack Developer</p>
+          </div>
+        </div>
+      </div>
+      <!-- Testimonial 2 -->
+      <div class="bg-claude-cream rounded-2xl p-8 border border-gray-100">
+        <div class="flex items-center gap-1 mb-4">
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+        </div>
+        <p class="text-gray-600 text-sm leading-relaxed mb-5">"I was burning through my Pro plan in under an hour. Now I code all day without worrying about limits. The tool support is flawless."</p>
+        <div class="flex items-center gap-3">
+          <div class="w-9 h-9 rounded-full bg-claude-orange/10 text-claude-orange flex items-center justify-center text-sm font-bold">S</div>
+          <div>
+            <p class="text-sm font-semibold text-claude-dark">Sarah K.</p>
+            <p class="text-xs text-gray-400">Backend Engineer</p>
+          </div>
+        </div>
+      </div>
+      <!-- Testimonial 3 -->
+      <div class="bg-claude-cream rounded-2xl p-8 border border-gray-100">
+        <div class="flex items-center gap-1 mb-4">
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+          <svg class="w-4 h-4 text-claude-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+        </div>
+        <p class="text-gray-600 text-sm leading-relaxed mb-5">"Our team of 4 moved to the Team plan. We went from $800/month combined to $99. The failover means we've had zero downtime."</p>
+        <div class="flex items-center gap-3">
+          <div class="w-9 h-9 rounded-full bg-claude-orange/10 text-claude-orange flex items-center justify-center text-sm font-bold">J</div>
+          <div>
+            <p class="text-sm font-semibold text-claude-dark">James R.</p>
+            <p class="text-xs text-gray-400">Engineering Lead</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- FAQ Section -->
+<section class="py-20 sm:py-28 bg-claude-cream">
+  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="text-center mb-16">
+      <h2 class="text-3xl sm:text-4xl font-bold text-claude-dark tracking-tight">Frequently asked questions</h2>
+    </div>
+    <div class="space-y-4">
+      <!-- FAQ 1 -->
+      <details class="group bg-white rounded-2xl border border-gray-100 overflow-hidden">
+        <summary class="flex items-center justify-between cursor-pointer px-7 py-5 text-base font-semibold text-claude-dark hover:text-claude-orange transition-colors list-none [&::-webkit-details-marker]:hidden">
+          Is this the real Claude?
+          <svg class="w-5 h-5 text-gray-400 group-open:rotate-45 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6"/></svg>
+        </summary>
+        <div class="px-7 pb-6 text-sm text-gray-500 leading-relaxed">
+          We provide a Claude Code-compatible API endpoint. Your Claude Code CLI connects to our infrastructure, which runs state-of-the-art coding models optimized for tool use and code generation. The experience is the same — the tools, the streaming, the workflow — all identical.
+        </div>
+      </details>
+      <!-- FAQ 2 -->
+      <details class="group bg-white rounded-2xl border border-gray-100 overflow-hidden">
+        <summary class="flex items-center justify-between cursor-pointer px-7 py-5 text-base font-semibold text-claude-dark hover:text-claude-orange transition-colors list-none [&::-webkit-details-marker]:hidden">
+          Will my tools work?
+          <svg class="w-5 h-5 text-gray-400 group-open:rotate-45 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6"/></svg>
+        </summary>
+        <div class="px-7 pb-6 text-sm text-gray-500 leading-relaxed">
+          Yes. Read, Write, Edit, Bash, Grep, Glob — everything works. We support the full Anthropic tool-calling specification, so Claude Code behaves exactly as you'd expect.
+        </div>
+      </details>
+      <!-- FAQ 3 -->
+      <details class="group bg-white rounded-2xl border border-gray-100 overflow-hidden">
+        <summary class="flex items-center justify-between cursor-pointer px-7 py-5 text-base font-semibold text-claude-dark hover:text-claude-orange transition-colors list-none [&::-webkit-details-marker]:hidden">
+          How is this so cheap?
+          <svg class="w-5 h-5 text-gray-400 group-open:rotate-45 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6"/></svg>
+        </summary>
+        <div class="px-7 pb-6 text-sm text-gray-500 leading-relaxed">
+          We optimize infrastructure costs and pass the savings to you. Smart routing, efficient batching, and multi-provider partnerships let us offer top-tier coding models at a fraction of the direct API cost.
+        </div>
+      </details>
+      <!-- FAQ 4 -->
+      <details class="group bg-white rounded-2xl border border-gray-100 overflow-hidden">
+        <summary class="flex items-center justify-between cursor-pointer px-7 py-5 text-base font-semibold text-claude-dark hover:text-claude-orange transition-colors list-none [&::-webkit-details-marker]:hidden">
+          Can I switch back to official Claude?
+          <svg class="w-5 h-5 text-gray-400 group-open:rotate-45 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6"/></svg>
+        </summary>
+        <div class="px-7 pb-6 text-sm text-gray-500 leading-relaxed">
+          Anytime. Just remove the <code class="bg-gray-100 px-1.5 py-0.5 rounded text-xs font-mono">ANTHROPIC_BASE_URL</code> environment variable and Claude Code will connect to the official API again. No lock-in, ever.
+        </div>
+      </details>
+      <!-- FAQ 5 -->
+      <details class="group bg-white rounded-2xl border border-gray-100 overflow-hidden">
+        <summary class="flex items-center justify-between cursor-pointer px-7 py-5 text-base font-semibold text-claude-dark hover:text-claude-orange transition-colors list-none [&::-webkit-details-marker]:hidden">
+          Is my code safe?
+          <svg class="w-5 h-5 text-gray-400 group-open:rotate-45 transition-transform flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12m6-6H6"/></svg>
+        </summary>
+        <div class="px-7 pb-6 text-sm text-gray-500 leading-relaxed">
+          We don't store your code. Requests are proxied in real-time and not logged. Your intellectual property stays yours.
+        </div>
+      </details>
+    </div>
+  </div>
+</section>
+
+<!-- CTA Banner -->
+<section class="py-20 sm:py-28 bg-claude-dark">
+  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <h2 class="text-3xl sm:text-4xl font-bold text-white tracking-tight">Start coding for free</h2>
+    <p class="mt-4 text-lg text-gray-400">No credit card required. Set up in under a minute.</p>
+    <div class="mt-10">
+      <a href="/register" class="inline-flex items-center justify-center px-10 py-4 text-base font-semibold text-white bg-claude-orange rounded-xl hover:bg-claude-orange-hover transition-all shadow-md hover:shadow-lg">
+        Get Free API Key
+        <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
+      </a>
+    </div>
+  </div>
+</section>
+
+<!-- Footer -->
+<footer class="bg-claude-cream border-t border-gray-200/60 pt-16 pb-8">
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
+      <!-- Brand -->
+      <div class="col-span-2 md:col-span-1">
+        <a href="/" class="flex items-center space-x-2 mb-4">
+          <svg class="w-7 h-7 text-claude-orange" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="28" height="28" rx="6" fill="currentColor" fill-opacity="0.1"/>
+            <path d="M9 8l5 6-5 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M16 18h4" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
+          </svg>
+          <span class="text-xl font-bold text-claude-dark tracking-tight">LLM <span class="text-claude-orange">API</span></span>
+        </a>
+        <p class="text-sm text-gray-400 leading-relaxed">Claude Code compatible API.<br>Fast, reliable, affordable.</p>
+      </div>
+      <!-- Product -->
+      <div>
+        <h4 class="text-sm font-semibold text-claude-dark mb-4">Product</h4>
+        <ul class="space-y-2.5">
+          <li><a href="/pricing" class="text-sm text-gray-500 hover:text-claude-orange transition-colors">Pricing</a></li>
+          <li><a href="/docs" class="text-sm text-gray-500 hover:text-claude-orange transition-colors">Docs</a></li>
+          <li><a href="/blog" class="text-sm text-gray-500 hover:text-claude-orange transition-colors">Blog</a></li>
+          <li><a href="/dashboard" class="text-sm text-gray-500 hover:text-claude-orange transition-colors">Dashboard</a></li>
+        </ul>
+      </div>
+      <!-- Company -->
+      <div>
+        <h4 class="text-sm font-semibold text-claude-dark mb-4">Company</h4>
+        <ul class="space-y-2.5">
+          <li><a href="/about" class="text-sm text-gray-500 hover:text-claude-orange transition-colors">About</a></li>
+          <li><a href="/terms" class="text-sm text-gray-500 hover:text-claude-orange transition-colors">Terms</a></li>
+          <li><a href="/privacy" class="text-sm text-gray-500 hover:text-claude-orange transition-colors">Privacy</a></li>
+        </ul>
+      </div>
+      <!-- Developer -->
+      <div>
+        <h4 class="text-sm font-semibold text-claude-dark mb-4">Developer</h4>
+        <ul class="space-y-2.5">
+          <li><a href="/docs" class="text-sm text-gray-500 hover:text-claude-orange transition-colors">API Reference</a></li>
+          <li><a href="/status" class="text-sm text-gray-500 hover:text-claude-orange transition-colors">Status</a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="border-t border-gray-200/60 pt-6 text-center">
+      <p class="text-xs text-gray-400">LLM API is an independent service and is not affiliated with Anthropic, PBC.</p>
+      <p class="text-xs text-gray-300 mt-2">&copy; <%= new Date().getFullYear() %> LLM API. All rights reserved.</p>
+    </div>
+  </div>
+</footer>
+
+</body>
+</html>

package/views/pages/login.ejs

@@ -0,0 +1,170 @@
+<%- include('../partials/header') %>
+<%- include('../partials/nav') %>
+
+<main class="min-h-[calc(100vh-4rem)] flex items-center justify-center px-4 py-12">
+  <div class="w-full max-w-md">
+    <div class="bg-white rounded-2xl shadow-sm border border-claude-dark/5 p-8">
+      <!-- Header -->
+      <div class="text-center mb-8">
+        <h1 class="text-2xl font-bold text-claude-dark">欢迎回来</h1>
+        <p class="mt-2 text-sm text-claude-dark/60">登录您的 LLM API 账户</p>
+      </div>
+
+      <!-- Google Sign-In -->
+      <script src="https://accounts.google.com/gsi/client" async></script>
+      <div id="g_id_onload"
+        data-client_id="128504392054-4rfrtk05umm9fvfpd83l9qn9r4qnaa98.apps.googleusercontent.com"
+        data-callback="handleGoogleCallback"
+        data-auto_prompt="false">
+      </div>
+      <div class="flex justify-center mb-6">
+        <div class="g_id_signin"
+          data-type="standard"
+          data-shape="rectangular"
+          data-theme="outline"
+          data-text="continue_with"
+          data-size="large"
+          data-width="400">
+        </div>
+      </div>
+
+      <div class="relative mb-6">
+        <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-claude-dark/10"></div></div>
+        <div class="relative flex justify-center text-xs"><span class="bg-white px-3 text-claude-dark/40">or</span></div>
+      </div>
+
+      <!-- Error Display -->
+      <div id="loginError" class="hidden mb-4 p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700"></div>
+
+      <!-- Login Form -->
+      <form id="loginForm" class="space-y-5" onsubmit="handleLogin(event)">
+        <div>
+          <label for="email" class="block text-sm font-medium text-claude-dark/80 mb-1.5">邮箱地址</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            required
+            autocomplete="email"
+            placeholder="you@example.com"
+            class="w-full px-4 py-2.5 rounded-lg border border-claude-dark/15 bg-claude-cream/30 text-claude-dark placeholder-claude-dark/30 focus:outline-none focus:ring-2 focus:ring-claude-orange/30 focus:border-claude-orange transition-colors"
+          >
+        </div>
+
+        <div>
+          <label for="password" class="block text-sm font-medium text-claude-dark/80 mb-1.5">密码</label>
+          <div class="relative">
+            <input
+              type="password"
+              id="password"
+              name="password"
+              required
+              autocomplete="current-password"
+              placeholder="输入您的密码"
+              class="w-full px-4 py-2.5 rounded-lg border border-claude-dark/15 bg-claude-cream/30 text-claude-dark placeholder-claude-dark/30 focus:outline-none focus:ring-2 focus:ring-claude-orange/30 focus:border-claude-orange transition-colors"
+            >
+            <button
+              type="button"
+              onclick="togglePassword('password')"
+              class="absolute right-3 top-1/2 -translate-y-1/2 text-claude-dark/40 hover:text-claude-dark/70"
+            >
+              <svg id="password-eye" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <button
+          type="submit"
+          id="loginBtn"
+          class="w-full py-2.5 px-4 bg-claude-orange text-white font-medium rounded-lg hover:bg-claude-orange/90 transition-colors focus:outline-none focus:ring-2 focus:ring-claude-orange/30 disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          登录
+        </button>
+      </form>
+
+      <!-- Footer Links -->
+      <div class="mt-6 text-center">
+        <p class="text-sm text-claude-dark/60">
+          还没有账户？
+          <a href="/register" class="text-claude-orange hover:text-claude-orange/80 font-medium transition-colors">立即注册</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</main>
+
+<script>
+  function handleGoogleCallback(response) {
+    fetch('/api/auth/google/token', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ idToken: response.credential }),
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.success) window.location.href = '/dashboard';
+      else showError(data.error || 'Google login failed');
+    })
+    .catch(function() { showError('Google login failed'); });
+  }
+
+  function togglePassword(fieldId) {
+    const input = document.getElementById(fieldId);
+    input.type = input.type === 'password' ? 'text' : 'password';
+  }
+
+  function showError(msg) {
+    const el = document.getElementById('loginError');
+    el.textContent = msg;
+    el.classList.remove('hidden');
+  }
+
+  function hideError() {
+    document.getElementById('loginError').classList.add('hidden');
+  }
+
+  async function handleLogin(e) {
+    e.preventDefault();
+    hideError();
+
+    const btn = document.getElementById('loginBtn');
+    const email = document.getElementById('email').value.trim();
+    const password = document.getElementById('password').value;
+
+    if (!email || !password) {
+      showError('请填写邮箱和密码');
+      return;
+    }
+
+    btn.disabled = true;
+    btn.textContent = '登录中...';
+
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'same-origin',
+        body: JSON.stringify({ email, password }),
+      });
+
+      const data = await res.json();
+
+      if (data.success) {
+        window.location.href = '/dashboard';
+      } else {
+        showError(data.error || '登录失败，请重试');
+      }
+    } catch (err) {
+      showError('网络错误，请检查连接后重试');
+    } finally {
+      btn.disabled = false;
+      btn.textContent = '登录';
+    }
+  }
+</script>
+
+</body>
+</html>