391 lines
17 KiB
TypeScript
391 lines
17 KiB
TypeScript
// ============================================================
|
||
// LandingPage — 官网首页（含登录弹窗）
|
||
// 职责：未登录用户的落地页，展示产品介绍并提供登录/注册入口
|
||
// ============================================================
|
||
|
||
import { useCallback, useEffect, useRef, useState } from "react";
|
||
import { LoginModal } from "./LoginModal";
|
||
import "./LandingPage.css";
|
||
|
||
type ModalMode = "login" | "register";
|
||
|
||
export function LandingPage() {
|
||
const [modal, setModal] = useState<{ open: boolean; mode: ModalMode }>({
|
||
open: false,
|
||
mode: "login",
|
||
});
|
||
|
||
const openModal = useCallback((mode: ModalMode) => {
|
||
setModal({ open: true, mode });
|
||
}, []);
|
||
|
||
const closeModal = useCallback(() => {
|
||
setModal((prev) => ({ ...prev, open: false }));
|
||
}, []);
|
||
|
||
// ---- Scroll Reveal ----
|
||
const observerRef = useRef<IntersectionObserver | null>(null);
|
||
|
||
useEffect(() => {
|
||
observerRef.current = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add("lp-visible");
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.1, rootMargin: "0px 0px -40px 0px" }
|
||
);
|
||
|
||
document.querySelectorAll(".lp-fade-in").forEach((el) => {
|
||
observerRef.current?.observe(el);
|
||
});
|
||
|
||
return () => observerRef.current?.disconnect();
|
||
}, []);
|
||
|
||
return (
|
||
<div className="landing-page">
|
||
<div className="lp-bg-grid" />
|
||
|
||
{/* ========== Top Navigation ========== */}
|
||
<nav className="lp-nav">
|
||
<div className="lp-nav__logo">CamTalk</div>
|
||
<div className="lp-nav__links">
|
||
<a href="#problem">痛点</a>
|
||
<a href="#features">特性</a>
|
||
<a href="#scenes">场景</a>
|
||
<a href="#tech">技术</a>
|
||
</div>
|
||
<div className="lp-nav__actions">
|
||
<button type="button" className="lp-nav__btn lp-nav__btn--ghost" onClick={() => openModal("login")}>
|
||
登录
|
||
</button>
|
||
<button type="button" className="lp-nav__btn lp-nav__btn--primary" onClick={() => openModal("register")}>
|
||
免费注册
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* ========== HERO ========== */}
|
||
<section className="lp-hero">
|
||
<div className="lp-container lp-hero-content">
|
||
<div className="lp-hero-badge">
|
||
<span className="lp-hero-badge__dot" />
|
||
<span>XEngineers</span>
|
||
</div>
|
||
<h1>
|
||
<span className="lp-gradient">CamTalk</span>
|
||
<br />
|
||
给 AI 装上眼睛和耳朵
|
||
</h1>
|
||
<p className="lp-hero__sub">
|
||
多模态实时 AI 视觉对话助手。打开浏览器，对着摄像头说话，AI 实时理解画面和语音，以文字和语音同步回答你。
|
||
</p>
|
||
|
||
<div className="lp-hero-actions">
|
||
<button type="button" className="lp-cta-btn" onClick={() => openModal("register")}>
|
||
立即体验 CamTalk
|
||
</button>
|
||
<div className="lp-hero-actions__links">
|
||
<a href="https://www.bilibili.com/video/BV1dDJK6cE5S/" target="_blank" rel="noreferrer">
|
||
路演视频
|
||
</a>
|
||
<a href="https://github.com/XEngineers/CamTalk" target="_blank" rel="noreferrer">
|
||
GitHub
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Device Mockup - Double Bezel */}
|
||
<div className="lp-hero-visual">
|
||
<div className="lp-hero-visual__inner">
|
||
<div className="lp-hero-visual__screen">
|
||
<div className="lp-screen-left">
|
||
<div className="lp-scan-line" />
|
||
<div className="lp-camera-ring">
|
||
<svg viewBox="0 0 24 24">
|
||
<path d="M23 7l-7 5 7 5V7z" />
|
||
<rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div className="lp-screen-right">
|
||
<div className="lp-chat-bubble lp-chat-bubble--user">这道数学题怎么做？</div>
|
||
<div className="lp-chat-bubble lp-chat-bubble--ai">
|
||
这是一道二次方程求解题。观察方程 x² - 5x + 6 = 0，可以使用因式分解法……
|
||
<div className="lp-typing">
|
||
<span /><span /><span />
|
||
</div>
|
||
</div>
|
||
<div className="lp-chat-bubble lp-chat-bubble--user">能用求根公式再算一遍吗？</div>
|
||
<div className="lp-audio-wave">
|
||
<span /><span /><span /><span /><span /><span /><span />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ========== PROBLEM ========== */}
|
||
<section id="problem">
|
||
<div className="lp-container">
|
||
<div className="lp-section-header lp-fade-in">
|
||
<div className="lp-section-header__tag">痛点分析</div>
|
||
<h2>AI 能说会道，却看不到你眼前的世界</h2>
|
||
<p>传统 AI 助手存在三大断层，割裂了自然交流的直觉</p>
|
||
</div>
|
||
<div className="lp-problem-grid">
|
||
<div className="lp-problem-card lp-fade-in">
|
||
<div className="lp-problem-card__icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M23 7l-7 5 7 5V7z"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
|
||
</svg>
|
||
</div>
|
||
<h3>视觉断层</h3>
|
||
<p>用户必须先拍照、保存、上传、再打字描述上下文，AI 才能「看到」画面。四步操作，割裂了自然交流的直觉。</p>
|
||
</div>
|
||
<div className="lp-problem-card lp-fade-in">
|
||
<div className="lp-problem-card__icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||
<polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/>
|
||
</svg>
|
||
</div>
|
||
<h3>交互断层</h3>
|
||
<p>面对外语菜单、数学公式、电路图等复杂内容，打字描述极其低效。用户脑中的问题转不成文字，AI 也就无法作答。</p>
|
||
</div>
|
||
<div className="lp-problem-card lp-fade-in">
|
||
<div className="lp-problem-card__icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
|
||
<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
|
||
</svg>
|
||
</div>
|
||
<h3>成本断层</h3>
|
||
<p>实时视频流 + 大模型推理的组合让 API 成本居高不下。传统方案月成本高达 $5,000，无法面向普通用户商业化。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ========== SOLUTION ========== */}
|
||
<section id="solution">
|
||
<div className="lp-container">
|
||
<div className="lp-section-header lp-fade-in">
|
||
<h2>看 + 听 + 说 = 真正理解你的 AI</h2>
|
||
<p>CamTalk 用一个对话界面闭合所有断层</p>
|
||
</div>
|
||
<div className="lp-flow-wrapper lp-fade-in">
|
||
<div className="lp-flow-steps">
|
||
{[
|
||
{ icon: "📷", label: "摄像头采集" },
|
||
{ icon: "🧠", label: "边缘预处理" },
|
||
{ icon: "🔌", label: "WebSocket" },
|
||
{ icon: "⚡", label: "Eino 编排" },
|
||
{ icon: "👁️", label: "视觉理解" },
|
||
{ icon: "💬", label: "流式回复" },
|
||
{ icon: "🔊", label: "语音输出" },
|
||
].map((step, i, arr) => (
|
||
<div key={i} style={{ display: "contents" }}>
|
||
<div className="lp-flow-step">
|
||
<div className="lp-flow-step__node">{step.icon}</div>
|
||
<div className="lp-flow-step__label">{step.label}</div>
|
||
</div>
|
||
{i < arr.length - 1 && <div className="lp-flow-arrow">→</div>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ========== FEATURES ========== */}
|
||
<section id="features">
|
||
<div className="lp-container">
|
||
<div className="lp-section-header lp-fade-in">
|
||
<div className="lp-section-header__tag">核心亮点</div>
|
||
<h2>五大技术创新</h2>
|
||
<p>从端到端架构到成本控制，每一层都经过精心设计</p>
|
||
</div>
|
||
<div className="lp-features-grid">
|
||
{[
|
||
{
|
||
num: "01", icon: "⚡",
|
||
title: "流式并行推送",
|
||
desc: "LLM 文本流与 TTS 音频流并行输出。用户先看到文字，紧接着听到语音，感知延迟低于 0.5 秒，接近真人对话节奏。",
|
||
},
|
||
{
|
||
num: "02", icon: "🧠",
|
||
title: "声明式 AI 编排",
|
||
desc: "基于 CloudWeGo Eino Graph 的 7 节点 DAG 流水线（STT → History → ChatModel → Splitter → TTS），类型安全、可扩展、易测试。",
|
||
},
|
||
{
|
||
num: "03", icon: "💰",
|
||
title: "端云协同降本",
|
||
desc: "浏览器端 VAD 语音检测 + 关键帧像素比较 + 混合采样策略，节省 70% 带宽，月成本从 $5,000 降至 $300，降幅 90%。",
|
||
},
|
||
{
|
||
num: "04", icon: "🎯",
|
||
title: "多场景智能模式",
|
||
desc: "5 种 AI 角色（自由对话 / 模拟面试 / 英语老师 / 辩论对手 / 同声翻译）× 3 种视觉模式 × 观察模式，灵活覆盖学习与工作。",
|
||
},
|
||
{
|
||
num: "05", icon: "🏗️",
|
||
title: "生产级工程架构",
|
||
desc: "三级存储自动降级（Memory → Redis → PostgreSQL）、JWT 双 token 认证、Docker Compose 一键部署、完善的错误处理与降级策略。",
|
||
},
|
||
].map((f) => (
|
||
<div className="lp-feature-card lp-fade-in" key={f.num}>
|
||
<div className="lp-feature-card__number">{f.num}</div>
|
||
<div className="lp-feature-card__icon">
|
||
{f.icon}
|
||
</div>
|
||
<h3>{f.title}</h3>
|
||
<p>{f.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ========== USERS ========== */}
|
||
<section id="users">
|
||
<div className="lp-container">
|
||
<div className="lp-section-header lp-fade-in">
|
||
<h2>为每一类学习者而设计</h2>
|
||
<p>无论你是在学英语、准备面试，还是想让 AI 帮你看看眼前的世界</p>
|
||
</div>
|
||
<div className="lp-users-grid">
|
||
{[
|
||
{ avatar: "🧑🎓", title: "语言学习者", desc: "对着课本或实物，与 AI 英语外教用英语自由对话，实时纠正语法和发音" },
|
||
{ avatar: "💼", title: "面试准备者", desc: "开启模拟面试模式，AI 面试官通过摄像头观察你的表情与状态，给出针对性反馈" },
|
||
{ avatar: "🌍", title: "跨境交流者", desc: "出国旅行时对着外文菜单、路牌实时翻译，AI 语音播报翻译结果" },
|
||
{ avatar: "👁️", title: "视障人士", desc: "AI 实时描述摄像头画面中的环境、障碍物和文字，提供无障碍信息辅助" },
|
||
{ avatar: "🔬", title: "学生 / 教师", desc: "对着题目问「怎么做？」，AI 看到画面后逐步讲解，就像身边有一位私教" },
|
||
].map((u) => (
|
||
<div className="lp-user-card lp-fade-in" key={u.title}>
|
||
<div className="lp-user-card__avatar">{u.avatar}</div>
|
||
<h4>{u.title}</h4>
|
||
<p>{u.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ========== SCENES ========== */}
|
||
<section id="scenes">
|
||
<div className="lp-container">
|
||
<div className="lp-section-header lp-fade-in">
|
||
<h2>五种模式，覆盖真实需求</h2>
|
||
</div>
|
||
<div className="lp-scenes-list">
|
||
{[
|
||
{ icon: "💬", title: "自由对话", desc: "对着摄像头随意聊天，AI 实时理解画面并语音回答", tag: "通用" },
|
||
{ icon: "🗣️", title: "英语老师", desc: "AI 外教结合摄像头场景进行英语口语教学，实时纠正语法", tag: "学习" },
|
||
{ icon: "🎤", title: "模拟面试", desc: "AI 面试官根据你的回答追问，通过摄像头观察你的表现", tag: "求职" },
|
||
{ icon: "⚔️", title: "辩论对手", desc: "AI 反驳你的观点，锻炼你的逻辑思维和表达能力", tag: "思维" },
|
||
{ icon: "🌐", title: "同声翻译", desc: "实时识别画面中的外语文字并语音翻译，口语化输出", tag: "工具" },
|
||
].map((s) => (
|
||
<div className="lp-scene-row lp-fade-in" key={s.title}>
|
||
<div className="lp-scene-row__icon">{s.icon}</div>
|
||
<div>
|
||
<h4>{s.title}</h4>
|
||
<div className="lp-scene-row__desc">{s.desc}</div>
|
||
</div>
|
||
<div className="lp-scene-row__tag">
|
||
{s.tag}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ========== METRICS ========== */}
|
||
<section id="metrics">
|
||
<div className="lp-container">
|
||
<div className="lp-section-header lp-fade-in">
|
||
<h2>用数据说话</h2>
|
||
</div>
|
||
<div className="lp-metrics-grid">
|
||
{[
|
||
{ value: "< 2s", label: "端到端响应延迟" },
|
||
{ value: "90%", label: "API 成本降幅" },
|
||
{ value: "70%", label: "带宽节省率" },
|
||
{ value: "5+3", label: "场景 × 视觉模式" },
|
||
].map((m) => (
|
||
<div className="lp-metric-card lp-fade-in" key={m.label}>
|
||
<div className="lp-metric-card__value">{m.value}</div>
|
||
<div className="lp-metric-card__label">{m.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ========== TECH STACK ========== */}
|
||
<section id="tech">
|
||
<div className="lp-container">
|
||
<div className="lp-section-header lp-fade-in">
|
||
<h2>三层系统，生产级质量</h2>
|
||
<p>前端轻量预处理 → Go 网关智能编排 → 云端 AI 按需调用</p>
|
||
</div>
|
||
<div className="lp-tech-layers">
|
||
{[
|
||
{ badge: "前端层", tags: ["React 18", "TypeScript", "Vite", "WebRTC VAD", "Canvas 关键帧检测", "WebSocket", "i18n (中/英/日)"] },
|
||
{ badge: "网关层", tags: ["Go + Gin", "gorilla/websocket", "Eino Graph", "JWT 双 Token", "Zap 日志", "Viper 配置"] },
|
||
{ badge: "存储层", tags: ["L1 Memory", "L2 Redis", "L3 PostgreSQL", "TieredManager 自动降级"] },
|
||
{ badge: "AI 服务", tags: ["qwen3-vl-plus (LLM)", "MiMo ASR (STT)", "MiMo TTS", "Docker Compose"] },
|
||
].map((layer) => (
|
||
<div className="lp-tech-layer lp-fade-in" key={layer.badge}>
|
||
<div>
|
||
<div className="lp-tech-layer__badge">
|
||
{layer.badge}
|
||
</div>
|
||
</div>
|
||
<div className="lp-tech-layer__tags">
|
||
{layer.tags.map((tag) => <span key={tag}>{tag}</span>)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ========== CTA ========== */}
|
||
<section className="lp-cta-section">
|
||
<div className="lp-container lp-fade-in">
|
||
<h2>让 AI 看见你看见的世界</h2>
|
||
<p>CamTalk，不只是聊天，而是真正的多模态视觉对话。</p>
|
||
<button type="button" className="lp-cta-btn" onClick={() => openModal("register")}>
|
||
立即体验 CamTalk
|
||
</button>
|
||
<div className="lp-cta-links">
|
||
<a href="https://www.bilibili.com/video/BV1dDJK6cE5S/" target="_blank" rel="noreferrer">
|
||
路演视频
|
||
</a>
|
||
<a href="https://github.com/XEngineers/CamTalk" target="_blank" rel="noreferrer">
|
||
GitHub
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ========== Footer ========== */}
|
||
<footer className="lp-footer">
|
||
<div className="lp-container">
|
||
CamTalk © 2026 XEngineers
|
||
</div>
|
||
</footer>
|
||
|
||
{/* ========== Login Modal ========== */}
|
||
{modal.open && (
|
||
<LoginModal initialMode={modal.mode} onClose={closeModal} />
|
||
)}
|
||
</div>
|
||
);
|
||
}
|