frontend/src/router/index.ts

@@ -36,6 +36,15 @@ const routes: RouteRecordRaw[] = [
       title: 'Home'
     }
   },
+  {
+    path: '/landing-preview',
+    name: 'LandingPreview',
+    component: () => import('@/views/landing/LandingView.vue'),
+    meta: {
+      requiresAuth: false,
+      title: 'PURO AI'
+    }
+  },
   {
     path: '/login',
     name: 'Login',

frontend/src/views/landing/LandingView.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="puro-page">
+    <div class="bg-glow"></div>
+    <div class="grain"></div>
+
+    <!-- NAV -->
+    <nav class="nav">
+      <div class="container nav-inner">
+        <a href="/" class="brand">
+          <span class="hex">⬢</span>
+          <span>PURO AI</span>
+        </a>
+        <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>
+  </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>
+.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);
+}
+</style>