673 lines
34 KiB
JavaScript
673 lines
34 KiB
JavaScript
/*
|
||
Copyright (C) 2025 QuantumNous
|
||
*/
|
||
|
||
import React, { useState, useEffect, useCallback, useRef, useContext } from 'react';
|
||
import { Link, useNavigate } from 'react-router-dom';
|
||
import { useTranslation } from 'react-i18next';
|
||
import {
|
||
Copy, Check, Box, Grid3X3, Trophy, BookOpen,
|
||
Zap, Shield, Globe, ArrowRight, Layers, Sparkles, ArrowUpRight,
|
||
Cpu, CreditCard, RefreshCw, MessageSquare, Send, Terminal,
|
||
Database, Workflow, Lock, BarChart3, Users, ChevronRight,
|
||
Cloud, Server, Activity, TrendingUp, Headphones, FileText,
|
||
Key, Settings, Monitor, Smartphone, BarChart2, Globe2,
|
||
} from 'lucide-react';
|
||
import { UserContext } from '../../context/User';
|
||
import { stringToColor, getSystemName } from '../../helpers';
|
||
|
||
|
||
|
||
/* ═══════════════ SECTION 1: HERO ═══════════════ */
|
||
function Hero() {
|
||
const { t } = useTranslation();
|
||
const [userState] = useContext(UserContext);
|
||
const [copied, setCopied] = useState(false);
|
||
|
||
const copyUrl = useCallback(() => {
|
||
navigator.clipboard.writeText('https://api.turingtoken.ai');
|
||
setCopied(true);
|
||
setTimeout(() => setCopied(false), 1500);
|
||
}, []);
|
||
|
||
return (
|
||
<section className="relative min-h-[580px] bg-gradient-to-br from-[#0a1929] via-[#0d2137] to-[#132f4c] overflow-hidden">
|
||
{/* Background decorative elements */}
|
||
<div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#1976d2]/10 rounded-full blur-[150px]" />
|
||
<div className="absolute bottom-0 left-[20%] w-[500px] h-[500px] bg-[#42a5f5]/5 blur-[120px]" />
|
||
|
||
{/* Grid pattern */}
|
||
<div className="absolute inset-0 opacity-[0.03]" style={{
|
||
backgroundImage: 'linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)',
|
||
backgroundSize: '60px 60px',
|
||
}} />
|
||
|
||
{/* Nav */}
|
||
<nav className="relative z-20 flex items-center justify-between px-6 lg:px-12 h-14 max-w-[1400px] mx-auto w-full">
|
||
<Link to="/" className="flex items-center gap-2.5">
|
||
<img src="/logo.jpg" alt="" className="w-7 h-7 rounded-lg object-cover" />
|
||
<span className="text-[16px] font-bold text-white tracking-tight">TuringToken</span>
|
||
</Link>
|
||
<div className="hidden md:flex items-center gap-1">
|
||
{[{ l: t('模型'), to: '/pricing', i: <Box size={14} /> }, { l: t('评测'), to: '/benchmarks', i: <Trophy size={14} /> }, { l: t('文档'), to: '/docs', i: <BookOpen size={14} /> }, { l: t('控制台'), to: '/console', i: <Grid3X3 size={14} /> }].map(n => (
|
||
<Link key={n.to} to={n.to} className="flex items-center gap-1.5 px-3 py-1.5 rounded text-sm text-white/70 hover:text-white hover:bg-white/5 transition-all">
|
||
{n.i}{n.l}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
{userState.user ? (
|
||
<Link to="/console" className="w-7 h-7 rounded border border-white/10 flex items-center justify-center hover:bg-white/10 transition-all">
|
||
<span className="w-4 h-4 rounded flex items-center justify-center text-[8px] font-bold text-white" style={{ backgroundColor: stringToColor(userState.user.username) }}>
|
||
{userState.user.username?.charAt(0).toUpperCase()}
|
||
</span>
|
||
</Link>
|
||
) : (
|
||
<Link to="/login" className="px-4 py-1.5 rounded text-sm font-medium text-white bg-[#1976d2] hover:bg-[#1565c0] transition-all">
|
||
{t('登录')}
|
||
</Link>
|
||
)}
|
||
</div>
|
||
</nav>
|
||
|
||
{/* Content */}
|
||
<div className="relative z-10 max-w-[1200px] mx-auto px-6 pt-14 pb-14">
|
||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||
{/* Left */}
|
||
<div>
|
||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-[#42a5f5]/30 bg-[#42a5f5]/10 mb-5">
|
||
<Sparkles size={12} className="text-[#42a5f5]" />
|
||
<span className="text-xs font-medium text-[#42a5f5]">Unified AI Gateway</span>
|
||
</div>
|
||
|
||
<h1 className="text-4xl sm:text-5xl lg:text-[52px] font-bold leading-[1.1] mb-5">
|
||
<span className="text-white">{t('更快、更稳、更省')}</span>
|
||
<br />
|
||
<span className="text-[#42a5f5]">{t('Token服务平台')}</span>
|
||
</h1>
|
||
|
||
<p className="text-white/60 text-lg leading-relaxed mb-8 max-w-lg">
|
||
{t('兼容 OpenAI / Claude / Gemini 等协议，覆盖文本、图像、视频、语音，智能路由，统一计费。')}
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-3 mb-10">
|
||
<Link to="/console/token" className="inline-flex items-center justify-center gap-2 px-7 py-3 bg-[#1976d2] text-white rounded font-medium hover:bg-[#1565c0] transition-all">
|
||
{t('开始使用')} <ArrowRight size={16} />
|
||
</Link>
|
||
<Link to="/pricing" className="inline-flex items-center justify-center gap-2 px-6 py-3 text-white/70 rounded font-medium border border-white/20 hover:border-white/30 hover:text-white hover:bg-white/5 transition-all">
|
||
{t('查看价格')}
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Stats */}
|
||
<div className="flex gap-10">
|
||
{[
|
||
{ n: '80+', l: 'AI 模型' },
|
||
{ n: '40+', l: '供应商' },
|
||
{ n: '99.9%', l: '可用率' },
|
||
].map((s, i) => (
|
||
<div key={i}>
|
||
<div className="text-2xl font-bold text-white mb-1">{s.n}</div>
|
||
<div className="text-sm text-white/40">{s.l}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right — Code card */}
|
||
<div className="relative">
|
||
<div className="rounded-lg border border-white/10 bg-[#0d2137]/80 backdrop-blur overflow-hidden shadow-2xl">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between px-4 py-2.5 border-b border-white/5 bg-[#0a1929]/80">
|
||
<div className="flex gap-1.5">
|
||
<span className="w-2 h-2 rounded-full bg-[#ff5f57]" />
|
||
<span className="w-2 h-2 rounded-full bg-[#febc2e]" />
|
||
<span className="w-2 h-2 rounded-full bg-[#28c840]" />
|
||
</div>
|
||
<span className="text-[10px] font-mono text-white/30 tracking-wider uppercase">terminal</span>
|
||
<button onClick={copyUrl} className="text-white/20 hover:text-[#42a5f5] transition-colors p-1 rounded hover:bg-white/5">
|
||
{copied ? <Check size={12} className="text-emerald-400" /> : <Copy size={12} />}
|
||
</button>
|
||
</div>
|
||
{/* Code */}
|
||
<div className="p-5 font-mono text-[11px] leading-[1.9]">
|
||
<div className="text-white/20 mb-3"># Quick start with curl</div>
|
||
<div>
|
||
<span className="text-[#42a5f5]">curl</span>{' '}
|
||
<span className="text-white/60">https://api.turingtoken.ai/v1/chat/completions</span> \
|
||
</div>
|
||
<div>{' '}<span className="text-amber-400">-H</span> <span className="text-emerald-400">"Authorization: Bearer $KEY"</span> \</div>
|
||
<div>{' '}<span className="text-amber-400">-H</span> <span className="text-emerald-400">"Content-Type: application/json"</span> \</div>
|
||
<div>{' '}<span className="text-amber-400">-d</span> <span className="text-yellow-400">'{'{'}</span></div>
|
||
<div>{' '}<span className="text-[#42a5f5]">"model"</span>: <span className="text-emerald-400">"gpt-4o"</span>,</div>
|
||
<div>{' '}<span className="text-[#42a5f5]">"messages"</span>: [{'{'}<span className="text-[#42a5f5]">"role"</span>: <span className="text-emerald-400">"user"</span>, <span className="text-[#42a5f5]">"content"</span>: <span className="text-emerald-400">"Hello"</span>{'}'}]</div>
|
||
<div><span className="text-yellow-400">{'}'}</span><span className="text-white/40">'</span></div>
|
||
<div className="mt-3 text-white/20"># Response</div>
|
||
<div className="text-white/50">{'{'} <span className="text-[#42a5f5]">"choices"</span>: [{'{'} <span className="text-[#42a5f5]">"message"</span>: {'{'} <span className="text-[#42a5f5]">"content"</span>: <span className="text-emerald-400">"Hello! How can I help?"</span> {'}'} {'}'}] {'}'}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom marquee */}
|
||
<div className="relative z-10 border-t border-white/5 py-4 overflow-hidden bg-white/[0.02]">
|
||
<div className="home-marquee flex gap-6 items-center">
|
||
{[...Array(3)].fill(null).map((_, gi) => (
|
||
<React.Fragment key={gi}>
|
||
{['OpenAI', 'Claude', 'Gemini', 'DeepSeek', 'Qwen', 'MiniMax', 'Kimi', '智谱', 'Groq', 'Azure'].map((name, i) => (
|
||
<span key={`${gi}-${i}`} className="flex-shrink-0 px-4 py-1 rounded border border-white/5 bg-white/[0.03] text-xs font-medium text-white/30 hover:text-white/50 hover:border-white/10 transition-all">
|
||
{name}
|
||
</span>
|
||
))}
|
||
</React.Fragment>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════ SECTION 2: CAPABILITIES ═══════════════ */
|
||
const CAPABILITIES = [
|
||
{ icon: <Layers size={22} />, title: '多协议兼容', desc: '原生支持 OpenAI、Claude、Gemini，切换 Base URL 即可接入' },
|
||
{ icon: <Zap size={22} />, title: '智能路由', desc: '根据模型名称自动路由至最优供应商，无需关心底层调度' },
|
||
{ icon: <CreditCard size={22} />, title: '统一计费', desc: '跨供应商统一 Token 消耗统计与账单，告别多平台充值' },
|
||
{ icon: <RefreshCw size={22} />, title: '容错降级', desc: '多供应商端点自动切换，逐级降级保障服务持续可用' },
|
||
{ icon: <Cpu size={22} />, title: '模型丰富', desc: '接入 80+ 主流模型，覆盖文本、图像、视频、语音全模态' },
|
||
{ icon: <Shield size={22} />, title: '开箱即用', desc: '一键登录，分钟级接入，兼容现有 SDK，零迁移成本' },
|
||
];
|
||
|
||
function Capabilities() {
|
||
const { t } = useTranslation();
|
||
return (
|
||
<section className="py-16 px-6 bg-white">
|
||
<div className="max-w-[1200px] mx-auto">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-2xl font-bold tracking-tight text-gray-900 mb-2">{t('平台核心能力')}</h2>
|
||
<p className="text-gray-500 text-sm">一个 API 网关，连接所有主流 AI 模型供应商</p>
|
||
</div>
|
||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{CAPABILITIES.map((p, i) => (
|
||
<div key={i} className="group p-5 rounded-lg border border-gray-200 bg-white hover:border-[#1976d2]/30 hover:shadow-lg hover:shadow-[#1976d2]/5 transition-all duration-300 cursor-pointer">
|
||
<div className="w-10 h-10 rounded-lg bg-[#e3f2fd] text-[#1976d2] flex items-center justify-center mb-3 transition-transform duration-300 group-hover:scale-110">
|
||
{p.icon}
|
||
</div>
|
||
<h3 className="font-bold text-base text-gray-900 mb-1.5 group-hover:text-[#1976d2] transition-colors">{t(p.title)}</h3>
|
||
<p className="text-sm text-gray-500 leading-relaxed">{t(p.desc)}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════ SECTION 3: HOW IT WORKS ═══════════════ */
|
||
const STEPS = [
|
||
{ n: '01', title: '注册账号', desc: '通过邮箱一键注册，即刻开始使用。', icon: <Users size={20} />, link: '/register' },
|
||
{ n: '02', title: '创建 API Key', desc: '在控制台创建密钥，支持多 Key 管理。', icon: <Key size={20} />, link: '/console/token' },
|
||
{ n: '03', title: '发起请求', desc: '使用你熟悉的 SDK 调用任意模型。', icon: <Send size={20} />, link: '/pricing' },
|
||
];
|
||
|
||
function HowItWorks() {
|
||
const { t } = useTranslation();
|
||
return (
|
||
<section className="py-16 px-6 bg-white">
|
||
<div className="max-w-[1000px] mx-auto">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-2xl font-bold tracking-tight text-gray-900">{t('三步接入，分钟级上线')}</h2>
|
||
</div>
|
||
<div className="grid md:grid-cols-3 gap-6 relative">
|
||
{STEPS.map((s, i) => (
|
||
<Link key={i} to={s.link} className="group text-center relative">
|
||
<div className="relative inline-flex">
|
||
<div className="w-14 h-14 rounded-full bg-[#1976d2] text-white flex items-center justify-center shadow-lg shadow-[#1976d2]/20 group-hover:shadow-xl group-hover:shadow-[#1976d2]/30 group-hover:scale-110 transition-all duration-300">
|
||
{s.icon}
|
||
</div>
|
||
<span className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-[#e3f2fd] text-[#1976d2] text-[10px] font-bold flex items-center justify-center border-2 border-white">
|
||
{s.n}
|
||
</span>
|
||
</div>
|
||
<h3 className="text-base font-bold text-gray-900 mt-4 mb-1.5 group-hover:text-[#1976d2] transition-colors">{t(s.title)}</h3>
|
||
<p className="text-sm text-gray-500 max-w-[200px] mx-auto leading-relaxed">{t(s.desc)}</p>
|
||
{i < STEPS.length - 1 && (
|
||
<div className="hidden md:block absolute top-7 left-[60%] w-[80%] h-px">
|
||
<div className="w-full h-full border-t-2 border-dashed border-[#bbdefb]" />
|
||
</div>
|
||
)}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════ SECTION 5: QUICK START ═══════════════ */
|
||
const PROVS = ['openai', 'claude', 'gemini'];
|
||
const PROV_LABELS = { openai: 'OpenAI', claude: 'Claude', gemini: 'Gemini' };
|
||
const LANGS = ['curl', 'python', 'nodejs'];
|
||
const LANG_LABELS = { curl: 'cURL', python: 'Python', nodejs: 'Node.js' };
|
||
const SAMPLES = {
|
||
openai: {
|
||
curl: `curl https://api.turingtoken.ai/v1/chat/completions \\
|
||
-H "Authorization: Bearer $OPENAI_API_KEY" \\
|
||
-H "Content-Type: application/json" \\
|
||
-d '{
|
||
"model": "gpt-4o",
|
||
"messages": [{"role": "user", "content": "Hello!"}]
|
||
}'`,
|
||
python: `from openai import OpenAI
|
||
|
||
client = OpenAI(
|
||
base_url="https://api.turingtoken.ai",
|
||
api_key="sk-your-key"
|
||
)
|
||
|
||
response = client.chat.completions.create(
|
||
model="gpt-4o",
|
||
messages=[{"role": "user", "content": "Hello!"}]
|
||
)
|
||
print(response.choices[0].message.content)`,
|
||
nodejs: `import OpenAI from "openai";
|
||
|
||
const client = new OpenAI({
|
||
baseURL: "https://api.turingtoken.ai",
|
||
apiKey: "sk-your-key",
|
||
});
|
||
|
||
const response = await client.chat.completions.create({
|
||
model: "gpt-4o",
|
||
messages: [{ role: "user", content: "Hello!" }],
|
||
});
|
||
console.log(response.choices[0].message.content);`,
|
||
},
|
||
claude: {
|
||
curl: `curl https://api.turingtoken.ai/v1/messages \\
|
||
-H "x-api-key: sk-your-key" \\
|
||
-H "anthropic-version: 2023-06-01" \\
|
||
-H "Content-Type: application/json" \\
|
||
-d '{
|
||
"model": "claude-sonnet-4-20250514",
|
||
"max_tokens": 1024,
|
||
"messages": [{"role": "user", "content": "Hello!"}]
|
||
}'`,
|
||
python: `import anthropic
|
||
|
||
client = anthropic.Anthropic(
|
||
base_url="https://api.turingtoken.ai",
|
||
api_key="sk-your-key"
|
||
)
|
||
|
||
response = client.messages.create(
|
||
model="claude-sonnet-4-20250514",
|
||
max_tokens=1024,
|
||
messages=[{"role": "user", "content": "Hello!"}]
|
||
)
|
||
print(response.content[0].text)`,
|
||
nodejs: `import Anthropic from "@anthropic-ai/sdk";
|
||
|
||
const client = new Anthropic({
|
||
baseURL: "https://api.turingtoken.ai",
|
||
apiKey: "sk-your-key",
|
||
});
|
||
|
||
const response = await client.messages.create({
|
||
model: "claude-sonnet-4-20250514",
|
||
max_tokens: 1024,
|
||
messages: [{ role: "user", content: "Hello!" }],
|
||
});
|
||
console.log(response.content[0].text);`,
|
||
},
|
||
gemini: {
|
||
curl: `curl "https://api.turingtoken.ai/v1beta/models/gemini-2.0-flash:generateContent?key=sk-your-key" \\
|
||
-H "Content-Type: application/json" \\
|
||
-d '{
|
||
"contents": [{"parts":[{"text": "Hello!"}]}]
|
||
}'`,
|
||
python: `import google.generativeai as genai
|
||
|
||
genai.configure(api_key="sk-your-key")
|
||
model = genai.GenerativeModel("gemini-2.0-flash")
|
||
response = model.generate_content("Hello!")
|
||
print(response.text)`,
|
||
nodejs: `import { GoogleGenerativeAI } from "@google/generative-ai";
|
||
|
||
const genAI = new GoogleGenerativeAI("sk-your-key");
|
||
const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });
|
||
const result = await model.generateContent("Hello!");
|
||
console.log(result.response.text());`,
|
||
},
|
||
};
|
||
|
||
function QuickStart() {
|
||
const { t } = useTranslation();
|
||
const [prov, setProv] = useState('openai');
|
||
const [lang, setLang] = useState('curl');
|
||
const [copied, setCopied] = useState(false);
|
||
const code = SAMPLES[prov]?.[lang] || '';
|
||
const copy = useCallback(() => { navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 1500); }, [code]);
|
||
|
||
return (
|
||
<section className="py-16 px-6 bg-[#f5f7fa]">
|
||
<div className="max-w-[900px] mx-auto">
|
||
<div className="text-center mb-10">
|
||
<h2 className="text-2xl font-bold tracking-tight text-gray-900">{t('快速开始')}</h2>
|
||
</div>
|
||
<div className="rounded-lg border border-gray-200 bg-white shadow-sm overflow-hidden">
|
||
<div className="flex items-center gap-1 px-3 pt-3 border-b border-gray-100">
|
||
{PROVS.map(p => (
|
||
<button key={p} onClick={() => setProv(p)} className={`px-4 py-2 rounded-t text-sm font-medium transition-all ${prov === p ? 'bg-[#1976d2] text-white' : 'text-gray-400 hover:text-gray-600'}`}>
|
||
{PROV_LABELS[p]}
|
||
</button>
|
||
))}
|
||
<div className="flex-1" />
|
||
<div className="flex items-center gap-3 pr-2">
|
||
{LANGS.map(l => (
|
||
<button key={l} onClick={() => setLang(l)} className={`text-xs font-mono pb-2 transition-all ${lang === l ? 'text-[#1976d2] font-semibold border-b-2 border-[#1976d2]' : 'text-gray-400 hover:text-gray-600'}`}>
|
||
{LANG_LABELS[l]}
|
||
</button>
|
||
))}
|
||
<button onClick={copy} className="p-1.5 rounded text-gray-400 hover:text-white hover:bg-[#1976d2] transition-all mb-2">
|
||
{copied ? <Check size={13} className="text-emerald-400" /> : <Copy size={13} />}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="bg-gradient-to-br from-[#0a1929] to-[#0d2137] p-5 border-t border-[#1976d2]/20">
|
||
<pre className="font-mono text-[11px] leading-[1.9] text-[#90caf9] overflow-x-auto"><code>{code}</code></pre>
|
||
</div>
|
||
</div>
|
||
<Link to="/pricing" className="group mt-5 flex items-center justify-between p-4 rounded-lg border border-gray-200 bg-white hover:border-[#1976d2]/30 hover:shadow-lg hover:shadow-[#1976d2]/5 transition-all">
|
||
<div>
|
||
<p className="text-xs font-mono text-[#1976d2] tracking-wider uppercase mb-1">Model Pricing</p>
|
||
<p className="font-bold text-gray-900 group-hover:text-[#1976d2] transition-colors">{t('查看模型定价，了解完整列表')}</p>
|
||
</div>
|
||
<ArrowUpRight size={18} className="text-gray-400 group-hover:text-[#1976d2] transition-all" />
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════ SECTION 6: CTA ═══════════════ */
|
||
function CTA() {
|
||
const { t } = useTranslation();
|
||
return (
|
||
<section className="py-16 px-6 bg-white">
|
||
<div className="max-w-[1000px] mx-auto">
|
||
<div className="relative rounded-lg overflow-hidden bg-gradient-to-br from-[#0a1929] via-[#0d2137] to-[#132f4c]">
|
||
<div className="absolute inset-0 opacity-[0.03]" style={{
|
||
backgroundImage: 'linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)',
|
||
backgroundSize: '30px 30px',
|
||
}} />
|
||
<div className="absolute top-4 right-4">
|
||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-red-500/20 text-red-400 text-xs font-medium">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse" />
|
||
限时活动
|
||
</span>
|
||
</div>
|
||
<div className="relative p-10 md:p-12 text-center">
|
||
<span className="inline-block px-3 py-1 rounded-full bg-[#42a5f5]/20 text-[#42a5f5] text-xs font-medium tracking-wider mb-5">SPECIAL OFFER</span>
|
||
<h2 className="text-3xl md:text-4xl font-bold text-white mb-3">{t('注册即送 ¥10 额度')}</h2>
|
||
<p className="text-white/60 text-base mb-6 max-w-lg mx-auto leading-relaxed">{t('新用户注册即赠 ¥10 Token，7 天有效期。兼容 OpenAI / Claude / Gemini 协议，一个 API Key 调用所有主流模型。')}</p>
|
||
<div className="flex items-center justify-center gap-4 mb-8 text-sm text-white/50">
|
||
<span className="flex items-center gap-1.5">
|
||
<Check size={14} className="text-emerald-400" />
|
||
无需绑定信用卡
|
||
</span>
|
||
<span className="flex items-center gap-1.5">
|
||
<Check size={14} className="text-emerald-400" />
|
||
即开即用
|
||
</span>
|
||
<span className="flex items-center gap-1.5">
|
||
<Check size={14} className="text-emerald-400" />
|
||
按量计费
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||
<Link to="/register" className="inline-flex items-center justify-center gap-2 px-8 py-3 bg-[#1976d2] text-white rounded font-medium hover:bg-[#1565c0] transition-all">
|
||
{t('免费注册')} <ArrowRight size={16} />
|
||
</Link>
|
||
<Link to="/pricing" className="inline-flex items-center justify-center gap-2 px-8 py-3 text-white/70 rounded font-medium border border-white/20 hover:border-white/30 hover:text-white hover:bg-white/5 transition-all">
|
||
{t('查看价格')}
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════ SECTION 7: STATS ═══════════════ */
|
||
function Stats() {
|
||
const { t } = useTranslation();
|
||
const nav = useNavigate();
|
||
return (
|
||
<section className="py-14 bg-[#f5f7fa]">
|
||
<div className="max-w-[1200px] mx-auto px-6">
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
||
{[
|
||
{ n: '80+', l: 'AI 模型', d: '覆盖主流模型' },
|
||
{ n: '40+', l: '供应商', d: '全球优质渠道' },
|
||
{ n: '99.9%', l: '可用率', d: '稳定可靠' },
|
||
{ n: '<100ms', l: '响应延迟', d: '极速响应' },
|
||
].map((s, i) => (
|
||
<div key={i} className="text-center p-5 rounded-lg bg-white border border-gray-100">
|
||
<div className="text-3xl font-bold text-[#1976d2] mb-1">{s.n}</div>
|
||
<div className="text-sm font-medium text-gray-900 mb-0.5">{s.l}</div>
|
||
<div className="text-xs text-gray-400">{s.d}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="text-center mt-8">
|
||
<button onClick={() => nav('/pricing')} className="inline-flex items-center gap-2 px-5 py-2 rounded border border-gray-200 bg-white text-sm font-medium text-gray-600 hover:border-[#1976d2]/30 hover:text-[#1976d2] hover:shadow-md hover:shadow-[#1976d2]/5 transition-all">
|
||
{t('查看全部模型')} <ArrowRight size={14} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════ SECTION 8: PRICING PREVIEW ═══════════════ */
|
||
const PRICING_MODELS = [
|
||
{ name: 'GPT-4o', input: '¥0.02/1K', output: '¥0.08/1K' },
|
||
{ name: 'Claude 3.5 Sonnet', input: '¥0.02/1K', output: '¥0.10/1K' },
|
||
{ name: 'Gemini 1.5 Pro', input: '¥0.01/1K', output: '¥0.05/1K' },
|
||
{ name: 'DeepSeek V3', input: '¥0.002/1K', output: '¥0.006/1K' },
|
||
];
|
||
|
||
function PricingPreview() {
|
||
const { t } = useTranslation();
|
||
const nav = useNavigate();
|
||
return (
|
||
<section className="py-14 bg-[#f5f7fa]">
|
||
<div className="max-w-[1000px] mx-auto px-6">
|
||
<div className="text-center mb-8">
|
||
<h2 className="text-2xl font-bold tracking-tight text-gray-900 mb-2">{t('透明定价')}</h2>
|
||
<p className="text-gray-500 text-sm">按量计费，用多少付多少，无隐藏费用</p>
|
||
</div>
|
||
<div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
|
||
<div className="grid grid-cols-4 bg-gray-50 border-b border-gray-200 text-xs font-medium text-gray-500">
|
||
<div className="px-4 py-3">模型</div>
|
||
<div className="px-4 py-3">输入价格</div>
|
||
<div className="px-4 py-3">输出价格</div>
|
||
<div className="px-4 py-3 text-right">操作</div>
|
||
</div>
|
||
{PRICING_MODELS.map((m, i) => (
|
||
<div key={i} className={`grid grid-cols-4 text-sm ${i < PRICING_MODELS.length - 1 ? 'border-b border-gray-100' : ''}`}>
|
||
<div className="px-4 py-3 font-medium text-gray-900">{m.name}</div>
|
||
<div className="px-4 py-3 text-gray-600">{m.input}</div>
|
||
<div className="px-4 py-3 text-gray-600">{m.output}</div>
|
||
<div className="px-4 py-3 text-right">
|
||
<button onClick={() => nav('/pricing')} className="text-[#1976d2] text-xs font-medium hover:underline">
|
||
查看详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="text-center mt-6">
|
||
<button onClick={() => nav('/pricing')} className="inline-flex items-center gap-2 px-5 py-2 rounded border border-gray-200 bg-white text-sm font-medium text-gray-600 hover:border-[#1976d2]/30 hover:text-[#1976d2] hover:shadow-md hover:shadow-[#1976d2]/5 transition-all">
|
||
{t('查看完整价格表')} <ArrowRight size={14} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════ SECTION 10: TESTIMONIALS ═══════════════ */
|
||
const TESTIMONIALS = [
|
||
{ name: '张工', role: 'AI 创业公司 CTO', content: '接入 TuringToken 后，我们无需逐一对接各家 API，开发效率提升了 3 倍。智能路由让我们的服务稳定性达到了 99.95%。' },
|
||
{ name: '李经理', role: '互联网大厂技术负责人', content: '统一计费功能非常实用，以前每个月要对账 5 家供应商，现在一个后台全搞定。成本降低了 20%。' },
|
||
{ name: '王同学', role: '独立开发者', content: '作为个人开发者，最看重的是按量计费和免费额度。TuringToken 让我能用上 GPT-4o 而不用担心账单。' },
|
||
];
|
||
|
||
function Testimonials() {
|
||
const { t } = useTranslation();
|
||
return (
|
||
<section className="py-14 bg-white">
|
||
<div className="max-w-[1200px] mx-auto px-6">
|
||
<div className="text-center mb-8">
|
||
<h2 className="text-2xl font-bold tracking-tight text-gray-900 mb-2">{t('用户评价')}</h2>
|
||
<p className="text-gray-500 text-sm">来自真实用户的声音</p>
|
||
</div>
|
||
<div className="grid md:grid-cols-3 gap-5">
|
||
{TESTIMONIALS.map((t, i) => (
|
||
<div key={i} className="p-5 rounded-lg border border-gray-200 bg-white hover:shadow-lg hover:shadow-gray-100 transition-all">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="w-10 h-10 rounded-full bg-[#e3f2fd] text-[#1976d2] flex items-center justify-center font-bold text-sm">
|
||
{t.name.charAt(0)}
|
||
</div>
|
||
<div>
|
||
<div className="text-sm font-medium text-gray-900">{t.name}</div>
|
||
<div className="text-xs text-gray-400">{t.role}</div>
|
||
</div>
|
||
</div>
|
||
<p className="text-sm text-gray-600 leading-relaxed">"{t.content}"</p>
|
||
<div className="flex gap-0.5 mt-3">
|
||
{[1,2,3,4,5].map(s => (
|
||
<svg key={s} className="w-4 h-4 text-amber-400 fill-current" viewBox="0 0 20 20">
|
||
<path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
|
||
</svg>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════ SECTION 11: FAQ ═══════════════ */
|
||
const FAQS = [
|
||
{ q: '什么是 TuringToken？', a: 'TuringToken 是一个统一的 AI 网关平台，通过一个 API Key 即可调用 OpenAI、Claude、Gemini 等多家主流大模型，无需分别对接。' },
|
||
{ q: '如何开始使用？', a: '注册账号后，在控制台创建 API Key，将 Base URL 设置为 api.turingtoken.ai 即可。兼容现有 OpenAI SDK，无需修改代码。' },
|
||
{ q: '支持哪些模型？', a: '目前支持 80+ 模型，包括 GPT-4o、Claude 3.5 Sonnet、Gemini 1.5 Pro、DeepSeek V3、通义千问、智谱 GLM-4 等主流模型。' },
|
||
{ q: '计费方式是什么？', a: '按 Token 消耗量计费，用多少付多少。新用户注册即送 ¥10 额度，7 天有效期。无最低消费，无月费。' },
|
||
{ q: '数据安全如何保障？', a: '我们不存储任何请求和响应内容，所有数据仅用于实时转发。支持 HTTPS 加密传输，企业版可选私有部署。' },
|
||
];
|
||
|
||
function FAQ() {
|
||
const { t } = useTranslation();
|
||
const [openIdx, setOpenIdx] = useState(null);
|
||
return (
|
||
<section className="py-14 bg-[#f5f7fa]">
|
||
<div className="max-w-[800px] mx-auto px-6">
|
||
<div className="text-center mb-8">
|
||
<h2 className="text-2xl font-bold tracking-tight text-gray-900 mb-2">{t('常见问题')}</h2>
|
||
<p className="text-gray-500 text-sm">如有其他问题，请联系 support@turingtoken.ai</p>
|
||
</div>
|
||
<div className="space-y-3">
|
||
{FAQS.map((f, i) => (
|
||
<div key={i} className="bg-white rounded-lg border border-gray-200 overflow-hidden">
|
||
<button
|
||
onClick={() => setOpenIdx(openIdx === i ? null : i)}
|
||
className="w-full flex items-center justify-between px-5 py-4 text-left"
|
||
>
|
||
<span className="text-sm font-medium text-gray-900">{f.q}</span>
|
||
<ChevronRight size={16} className={`text-gray-400 transition-transform ${openIdx === i ? 'rotate-90' : ''}`} />
|
||
</button>
|
||
{openIdx === i && (
|
||
<div className="px-5 pb-4">
|
||
<p className="text-sm text-gray-500 leading-relaxed">{f.a}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════ FOOTER ═══════════════ */
|
||
function Footer() {
|
||
const { t } = useTranslation();
|
||
return (
|
||
<footer className="bg-[#0a1929] border-t border-white/5">
|
||
<div className="max-w-[1200px] mx-auto px-6 py-12">
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-10">
|
||
<div>
|
||
<div className="flex items-center gap-2.5 mb-4">
|
||
<img src="/logo.jpg" alt="" className="w-6 h-6 rounded object-cover" />
|
||
<span className="font-bold text-white text-sm">TuringToken</span>
|
||
</div>
|
||
<p className="text-xs text-white/30 leading-relaxed">统一 AI 网关，一个 API 连接所有主流大模型。</p>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-sm font-medium text-white mb-3">产品</h4>
|
||
<div className="space-y-2">
|
||
<Link to="/pricing" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('定价')}</Link>
|
||
<Link to="/console" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('控制台')}</Link>
|
||
<Link to="/benchmarks" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('模型评测')}</Link>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-sm font-medium text-white mb-3">支持</h4>
|
||
<div className="space-y-2">
|
||
<Link to="/docs" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('文档')}</Link>
|
||
<Link to="/about" className="block text-xs text-white/40 hover:text-[#42a5f5] transition-colors">{t('关于我们')}</Link>
|
||
<span className="block text-xs text-white/40">support@turingtoken.ai</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 className="text-sm font-medium text-white mb-3">法律</h4>
|
||
<div className="space-y-2">
|
||
<span className="block text-xs text-white/40">服务协议</span>
|
||
<span className="block text-xs text-white/40">隐私政策</span>
|
||
<span className="block text-xs text-white/40">合规声明</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="pt-6 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-3">
|
||
<span className="text-xs text-white/20">© 2026 {getSystemName()} All rights reserved.</span>
|
||
<span className="text-xs text-white/20">Powered by QuantumNous</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
}
|
||
|
||
/* ═══════════════ EXPORT ═══════════════ */
|
||
const Home = () => (
|
||
<div className="min-h-screen">
|
||
<Hero />
|
||
<Capabilities />
|
||
<HowItWorks />
|
||
<QuickStart />
|
||
<Stats />
|
||
<PricingPreview />
|
||
<Testimonials />
|
||
<FAQ />
|
||
<CTA />
|
||
<Footer />
|
||
</div>
|
||
);
|
||
|
||
export default Home;
|