feat(landing): LandingView scaffold with Nav + Hero
Temporary route /landing-preview added for dev iteration. Will flip / to this view once all 6 sections are in place (Task 6). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -36,6 +36,15 @@ const routes: RouteRecordRaw[] = [
|
|||||||
title: 'Home'
|
title: 'Home'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/landing-preview',
|
||||||
|
name: 'LandingPreview',
|
||||||
|
component: () => import('@/views/landing/LandingView.vue'),
|
||||||
|
meta: {
|
||||||
|
requiresAuth: false,
|
||||||
|
title: 'PURO AI'
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/login',
|
path: '/login',
|
||||||
name: 'Login',
|
name: 'Login',
|
||||||
|
|||||||
96
frontend/src/views/landing/LandingView.vue
Normal file
96
frontend/src/views/landing/LandingView.vue
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user