sub2api/frontend/src/views/landing/LandingView.vue

<template>
  <div class="puro-page">
    <div class="bg-glow"></div>
    <div class="grain"></div>

    <!-- NAV -->
    <nav class="nav">
      <div class="container nav-inner">
        <router-link to="/" class="brand">
          <span class="hex">⬢</span>
          <span>PURO AI</span>
        </router-link>
        <div class="nav-links">
          <a href="#features">产品</a>
          <a href="/docs">文档</a>
        </div>
        <div class="nav-cta">
          <router-link to="/login" class="btn btn-ghost">登录</router-link>
          <router-link to="/register" class="btn btn-primary">免费试用 →</router-link>
        </div>
      </div>
    </nav>

    <!-- HERO -->
    <section class="hero container">
      <div class="hero-eyebrow">
        <span class="pill">ChatGPT Plus · Claude Pro · Codex · Gemini</span>
      </div>
      <h1 class="hero-title">
        你的 AI 订阅，<br>
        <span class="text-puro-cyan">已经付过钱了。</span>
      </h1>
      <p class="hero-sub">
        Claude Pro · ChatGPT Plus · Codex · Gemini 订阅<br>
        聚合成统一 API，零改动接入 OpenAI / Anthropic SDK
      </p>
      <div class="hero-cta">
        <router-link to="/login" class="btn btn-primary btn-lg">登录 →</router-link>
        <a href="mailto:admin@puro.im" class="btn btn-ghost btn-lg">联系咨询</a>
      </div>
      <div class="hero-micro">
        已验证可用 Codex CLI · Claude Code · curl · 服务器出口新加坡
      </div>
    </section>

    <!-- ② 模型墙 -->
    <section class="block container" id="models">
      <div class="section-header">
        <div class="section-kicker">支持的 AI 平台</div>
        <h2 class="section-title">通过 OAuth 直接复用你的订阅</h2>
        <p class="section-sub">无需申请官方 API key，也无需切换账号</p>
      </div>
      <div class="model-wall">
        <div class="model-card">
          <div class="model-dot" style="background: var(--p-claude)"></div>
          <div>
            <div class="model-name">Claude Pro / Max</div>
            <div class="model-meta">Anthropic OAuth</div>
          </div>
        </div>
        <div class="model-card">
          <div class="model-dot" style="background: var(--p-gpt)"></div>
          <div>
            <div class="model-name">ChatGPT Plus / Pro</div>
            <div class="model-meta">OpenAI OAuth</div>
          </div>
        </div>
        <div class="model-card">
          <div class="model-dot" style="background: var(--p-codex)"></div>
          <div>
            <div class="model-name">Codex CLI</div>
            <div class="model-meta">OpenAI OAuth</div>
          </div>
        </div>
        <div class="model-card">
          <div class="model-dot" style="background: var(--p-gemini)"></div>
          <div>
            <div class="model-name">Gemini Code Assist</div>
            <div class="model-meta">Google OAuth</div>
          </div>
        </div>
        <div class="model-card is-muted">
          <div class="model-dot" style="background: var(--text-3)"></div>
          <div>
            <div class="model-name">更多</div>
            <div class="model-meta">规划中</div>
          </div>
        </div>
      </div>
    </section>

    <!-- ③ 三特性 -->
    <section class="block container" id="features">
      <div class="section-header">
        <div class="section-kicker">核心特性</div>
        <h2 class="section-title">一套 key，三件武器</h2>
      </div>
      <div class="features">
        <div class="feature">
          <div class="feature-icon">⚡</div>
          <h3>一个 key 接所有模型</h3>
          <p>不再为每个 provider 申请 API key、配置 base_url。统一 <code class="mono">sk-</code> 走 Claude / GPT / Gemini，按 model 自动路由到对应账号池。</p>
        </div>
        <div class="feature">
          <div class="feature-icon">🔄</div>
          <h3>账号池高可用</h3>
          <p>支持多账号自动调度与 failover。某个上游触发限流 / 冷却时，流量切到下一个健康账号，token 刷新全自动。</p>
        </div>
        <div class="feature">
          <div class="feature-icon">📊</div>
          <h3>用量看板</h3>
          <p>每条请求的 tokens、费用、上游账号、延迟全可视化。模型分布饼图 + 趋势曲线 + Top 排行。</p>
        </div>
      </div>
    </section>

    <!-- ④ Code Demo -->
    <section class="block container" id="code">
      <div class="section-header">
        <div class="section-kicker">快速接入</div>
        <h2 class="section-title">把 base_url 一改，就能用</h2>
        <p class="section-sub">兼容 OpenAI / Anthropic / Gemini SDK，<span class="text-puro-cyan">零代码改动</span></p>
      </div>
      <div class="code-demo">
        <div class="code-block">
          <div class="code-title mono">~/.codex/config.toml</div>
          <pre class="mono"><code><span class="cm">[model_providers.OpenAI]</span>
base_url = <span class="str">"https://ai.puro.im"</span>
wire_api = <span class="str">"responses"</span>
requires_openai_auth = <span class="kw">true</span></code></pre>
        </div>
        <div class="code-block">
          <div class="code-title mono">curl</div>
          <pre class="mono"><code><span class="cm">$</span> curl https://ai.puro.im/responses \
  -H <span class="str">"Authorization: Bearer sk-xxx"</span> \
  -d <span class="str">'{"model":"gpt-5.4","input":"hello"}'</span></code></pre>
        </div>
      </div>
      <div class="code-foot">支持 OpenAI Responses API · Anthropic Messages API · Gemini generateContent · 流式 SSE &amp; WebSocket</div>
    </section>

    <!-- ⑤ Dashboard mockup -->
    <section class="block container" id="dashboard">
      <div class="section-header">
        <div class="section-kicker">用量透明</div>
        <h2 class="section-title">每条请求都看得见</h2>
        <p class="section-sub">不像第三方 API 池子那种"扣了多少不告诉你"——扣哪个账号、跑哪个模型、用了多少 tokens、上游响应几秒，一目了然。</p>
      </div>
      <div class="dash-mock">
        <div class="dash-header">
          <span class="dash-title">Dashboard · 预览</span>
          <div class="dash-dots"><span></span><span></span><span></span></div>
        </div>
        <div class="dash-body">
          <div class="stat-row">
            <div class="stat"><div class="stat-label">今日请求</div><div class="stat-value">1,842</div><div class="stat-delta">+12.3%</div></div>
            <div class="stat"><div class="stat-label">输入 Tokens</div><div class="stat-value">2.1M</div><div class="stat-delta">+8.1%</div></div>
            <div class="stat"><div class="stat-label">输出 Tokens</div><div class="stat-value">485K</div><div class="stat-delta">+15.6%</div></div>
            <div class="stat"><div class="stat-label">今日费用</div><div class="stat-value">$1.23</div><div class="stat-delta down">-4.2%</div></div>
          </div>
          <div class="chart-card">
            <div class="chart-title">近 30 天用量趋势</div>
            <svg viewBox="0 0 600 120" class="chart-svg">
              <polyline points="0,90 40,80 80,70 120,65 160,60 200,50 240,55 280,45 320,40 360,35 400,30 440,25 480,20 520,25 560,15 600,10"
                fill="none" stroke="#22d3ee" stroke-width="2"/>
              <polyline points="0,100 40,95 80,90 120,88 160,85 200,82 240,80 280,78 320,75 360,73 400,70 440,68 480,65 520,63 560,60 600,58"
                fill="none" stroke="#a855f7" stroke-width="2" stroke-dasharray="4 4"/>
            </svg>
          </div>
          <table class="log-table mono">
            <thead>
              <tr><th>时间</th><th>模型</th><th>上游</th><th>状态</th><th>用量</th></tr>
            </thead>
            <tbody>
              <tr><td>12:34:07</td><td>gpt-5.4</td><td><span class="provider gpt"><span class="dot"></span>ChatGPT #1</span></td><td class="status-200">200</td><td>2,341</td></tr>
              <tr><td>12:34:02</td><td>claude-opus-4-7</td><td><span class="provider claude"><span class="dot"></span>Claude #2</span></td><td class="status-200">200</td><td>5,102</td></tr>
              <tr><td>12:33:58</td><td>gemini-2.5-pro</td><td><span class="provider gemini"><span class="dot"></span>Gemini #1</span></td><td class="status-200">200</td><td>843</td></tr>
              <tr><td>12:33:41</td><td>gpt-5.4</td><td><span class="provider gpt"><span class="dot"></span>ChatGPT #2</span></td><td class="status-429">429</td><td>—</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>

    <!-- ⑥ Footer -->
    <footer class="puro-footer">
      <div class="container footer-grid">
        <div class="footer-brand">
          <div class="brand"><span class="hex">⬢</span><span>PURO AI</span></div>
          <p class="footer-tagline">Self-hosted on puro.im</p>
          <p class="footer-meta">© 2026 puro.im · MIT License<br>fork of Wei-Shaw/sub2api</p>
        </div>
        <div class="footer-col">
          <div class="footer-col-title">产品</div>
          <a href="/docs">文档</a>
          <a href="https://git.puro.im/purovps/sub2api/commits/branch/main" target="_blank" rel="noopener noreferrer">更新日志</a>
        </div>
        <div class="footer-col">
          <div class="footer-col-title">资源</div>
          <a href="https://git.puro.im/purovps/sub2api" target="_blank" rel="noopener noreferrer">GitHub</a>
          <a href="/docs#codex">Codex 配置示例</a>
          <a href="https://status.puro.im" target="_blank" rel="noopener noreferrer">API 状态</a>
        </div>
        <div class="footer-col">
          <div class="footer-col-title">联系</div>
          <a href="mailto:admin@puro.im">admin@puro.im</a>
          <a href="https://git.puro.im" target="_blank" rel="noopener noreferrer">git.puro.im</a>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
// LandingView — public marketing landing page for PURO AI
// Rendered at `/` when user is unauthenticated (see router/index.ts)
</script>

<style scoped>
/* =============================================================
 * LandingView — component-local styles
 * Globals from puro.css (scoped to .puro-page) also provide:
 * - .log-table, .provider.{claude,gpt,gemini}, .status-200/429 (dashboard mockup)
 * - .nav, .nav-inner, .brand, .hex, .nav-links, .nav-cta (nav base)
 * - .mono, .container, .btn, .btn-primary, .btn-ghost, .btn-lg (primitives)
 * ============================================================= */

.puro-page {
  min-height: 100vh;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-sans);
  position: relative;
  overflow-x: hidden;
}

.hero {
  text-align: center;
  padding: 100px 24px 80px;
  position: relative;
  z-index: 2;
}
.hero-eyebrow { margin-bottom: 24px; }
.hero-title {
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.hero-sub {
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 36px;
}
.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.hero-micro {
  font-size: 13px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

/* Note: these rules (.container / .section-*) intentionally override
 * puro.css defaults with landing-page-specific values.
 * puro.css has global defaults of: container max-width 1100px/padding 32px,
 * section-title margin-bottom 16px, section-kicker letter-spacing 0.15em.
 * Source-order ensures the scoped values below win. */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.block { padding: 80px 24px; }
.section-header { text-align: center; margin-bottom: 40px; }
.section-kicker {
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
  font-family: var(--font-mono);
}
.section-title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.section-sub { color: var(--text-2); font-size: 15px; }

/* model wall */
.model-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.model-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-1);
  display: flex;
  align-items: center;
  gap: 12px;
}
.model-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.model-name { font-weight: 600; font-size: 14px; }
.model-meta { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); margin-top: 2px; }
.model-card.is-muted { opacity: 0.5; }
.model-card.is-muted .model-name { color: var(--text-2); }

/* features */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.feature {
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-1);
}
.feature-icon { font-size: 28px; margin-bottom: 14px; }
.feature h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.feature p { color: var(--text-2); font-size: 14px; line-height: 1.6; }
.feature code { color: var(--cyan); font-size: 13px; }

/* code demo */
.code-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 820px) { .code-demo { grid-template-columns: 1fr; } }
.code-block {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-code);
  overflow: hidden;
}
.code-title {
  padding: 10px 16px;
  background: var(--bg-1);
  font-size: 11px;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.code-block pre {
  padding: 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-1);
  overflow-x: auto;
}
.cm { color: var(--text-3); }
.str { color: var(--cyan); }
.kw { color: var(--amber); }
.code-foot {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

/* dash mockup */
.dash-mock {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--bg-1);
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8);
}
.dash-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash-title { font-size: 12px; color: var(--text-2); font-family: var(--font-mono); }
.dash-dots { display: flex; gap: 6px; }
.dash-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-2); }
.dash-body { padding: 20px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 720px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(15,23,42,0.6);
}
.stat-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.stat-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--font-mono); }
.stat-delta { font-size: 11px; color: var(--green); margin-top: 4px; font-family: var(--font-mono); }
.stat-delta.down { color: var(--red); }

.chart-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(15,23,42,0.6);
  padding: 16px;
  margin-bottom: 20px;
}
.chart-title { font-size: 12px; color: var(--text-2); margin-bottom: 12px; }
.chart-svg { width: 100%; height: 120px; display: block; }

/* Nav sticky + responsive tweaks (augments puro.css defaults)
 * Note: puro.css defines .puro-page .nav (z-index 50, blur 16px, gap 28px)
 * at higher specificity; rules here only add what puro.css lacks
 * (our darker sticky bg + mobile hide-nav-links). */
.nav {
  position: sticky;
  top: 0;
  background: rgba(10,14,26,0.75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px 24px;
  max-width: 1120px;
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
}
.brand .hex {
  color: var(--cyan);
  font-size: 20px;
}
.nav-links {
  display: flex;
  font-size: 14px;
  color: var(--text-2);
}
.nav-links a:hover { color: var(--text-0); }
.nav-cta {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
@media (max-width: 640px) {
  .nav-links { display: none; }
}

/* Footer */
.puro-footer {
  margin-top: 80px;
  padding: 60px 24px 40px;
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand .brand { margin-bottom: 12px; }
.footer-tagline { color: var(--text-2); font-size: 13px; margin-bottom: 8px; }
.footer-meta { color: var(--text-3); font-size: 12px; line-height: 1.7; }
.footer-col-title {
  color: var(--text-0);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}
.footer-col a {
  display: block;
  color: var(--text-2);
  font-size: 13px;
  padding: 4px 0;
}
.footer-col a:hover { color: var(--cyan); }

/* pill */
.pill {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-2);
  background: rgba(15,23,42,0.6);
}
</style>