fix: scrolling, responsive grid, analytics light theme, dashboard 2x3, sidebar spacing, skills top5
This commit is contained in:
qyyfw committed
1 parent
c729f61831
commit
4d9691187a
5 files changed
+2744
-2701
No files matched your search
@@ -1,451 +1,486 @@
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { mockAdBanners, mockApps } from '@/mock/data';
|
||||
import type { AdBanner, MarketApp } from '@/types';
|
||||
import './LandingPage.css';
|
||||
|
||||
const SVGIcon: React.FC<{ children: React.ReactNode; size?: number }> = ({ children, size = 16 }) => (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
{children}
|
||||
</svg>
|
||||
);
|
||||
|
||||
const typeLabels: Record<string, string> = { skill: 'Skill', agent: 'Agent', mcp: 'MCP' };
|
||||
const typeColors: Record<string, string> = { skill: '#10B981', agent: '#5B5FED', mcp: '#F59E0B' };
|
||||
|
||||
const LandingPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [isPaused, setIsPaused] = useState(false);
|
||||
const banners = mockAdBanners.filter(b => b.status === 'active');
|
||||
const publishedApps = mockApps.filter(a => a.status === 'published');
|
||||
const [appTypeFilter, setAppTypeFilter] = useState<'' | 'skill' | 'agent' | 'mcp'>('');
|
||||
const [toastMsg, setToastMsg] = useState('');
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
const filteredApps = appTypeFilter
|
||||
? publishedApps.filter(a => a.type === appTypeFilter)
|
||||
: publishedApps;
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => setScrolled(window.scrollY > 60);
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const showToast = (msg: string) => {
|
||||
setToastMsg(msg);
|
||||
setTimeout(() => setToastMsg(''), 2000);
|
||||
};
|
||||
|
||||
const handleAppClick = (appName: string) => {
|
||||
showToast(`"${appName}" 需登录后使用，即将跳转登录页`);
|
||||
setTimeout(() => navigate('/login'), 800);
|
||||
};
|
||||
|
||||
const nextSlide = useCallback(() => {
|
||||
if (banners.length === 0) return;
|
||||
setCurrentSlide(prev => (prev + 1) % banners.length);
|
||||
}, [banners.length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (banners.length <= 1 || isPaused) return;
|
||||
const timer = setInterval(nextSlide, 4000);
|
||||
return () => clearInterval(timer);
|
||||
}, [banners.length, isPaused, nextSlide]);
|
||||
|
||||
const goToSlide = (idx: number) => setCurrentSlide(idx);
|
||||
|
||||
const getGradient = (app: MarketApp): string => {
|
||||
const gradients: Record<string, string> = {
|
||||
a1: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
a2: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
||||
a3: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
||||
a4: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
|
||||
a5: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
|
||||
a6: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)',
|
||||
a8: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
|
||||
};
|
||||
return gradients[app.id] || 'linear-gradient(135deg, #5B5FED 0%, #A78BFA 100%)';
|
||||
};
|
||||
|
||||
// Platform Architecture - layers from bottom to top
|
||||
const archLayers = [
|
||||
{
|
||||
label: '应用层',
|
||||
color: '#6C63FF',
|
||||
items: ['AI 对话工作台', '知识库问答', '自动化流程', 'IM Bot 接入', 'API 集成'],
|
||||
},
|
||||
{
|
||||
label: '能力层',
|
||||
color: '#10B981',
|
||||
items: ['技能市场 (Skill)', '智能体 (Agent)', 'MCP 协议', 'RAG 检索增强', '工具链编排'],
|
||||
},
|
||||
{
|
||||
label: '模型层',
|
||||
color: '#F59E0B',
|
||||
items: ['DeepSeek', 'GPT-4o', 'Claude', 'Qwen', '多模态模型'],
|
||||
},
|
||||
{
|
||||
label: '基础设施',
|
||||
color: '#3B82F6',
|
||||
items: ['向量数据库', '对象存储', '任务调度', 'API 网关', '监控告警'],
|
||||
},
|
||||
];
|
||||
|
||||
// Capability groups
|
||||
const capabilities = [
|
||||
{
|
||||
icon: <SVGIcon size={28}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></SVGIcon>,
|
||||
title: 'AI 对话',
|
||||
desc: '接入 50+ 主流大模型，支持流式输出、多轮对话、Function Calling，你的专属 AI 助手',
|
||||
},
|
||||
{
|
||||
icon: <SVGIcon size={28}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></SVGIcon>,
|
||||
title: '知识库',
|
||||
desc: '上传文档、网页、代码构建个人知识库，RAG 增强检索让 AI 回答更精准可靠',
|
||||
},
|
||||
{
|
||||
icon: <SVGIcon size={28}><rect x="3" y="3" width="7" height="7" rx="1.2"/><rect x="14" y="3" width="7" height="7" rx="1.2"/><rect x="3" y="14" width="7" height="7" rx="1.2"/><rect x="14" y="14" width="7" height="7" rx="1.2"/></SVGIcon>,
|
||||
title: '技能市场',
|
||||
desc: '100+ 预制 AI 技能，一键安装即用。支持 Skill、Agent、MCP 三种形态，持续扩展',
|
||||
},
|
||||
{
|
||||
icon: <SVGIcon size={28}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></SVGIcon>,
|
||||
title: 'IM Bot',
|
||||
desc: '将 AI 能力接入飞书、微信、钉钉，在聊天中调用 AI，无缝融入日常工作流',
|
||||
},
|
||||
{
|
||||
icon: <SVGIcon size={28}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></SVGIcon>,
|
||||
title: 'AI 自进化',
|
||||
desc: '从每次对话中持续学习，自动沉淀知识图谱，你的 AI 越用越懂你',
|
||||
},
|
||||
{
|
||||
icon: <SVGIcon size={28}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></SVGIcon>,
|
||||
title: 'Token 驾驶舱',
|
||||
desc: '实时监控调用量、Token 消耗与成本，精细化管理你的 AI 使用预算',
|
||||
},
|
||||
];
|
||||
|
||||
// Scenarios - individual practitioner focused
|
||||
const scenarios = [
|
||||
{ icon: '📚', title: '学习助手', desc: '构建课程知识库，AI 辅助理解复杂概念、整理笔记、解答疑问' },
|
||||
{ icon: '💼', title: '工作效率', desc: '自动化重复任务、智能撰写文档邮件、快速检索信息，效率翻倍' },
|
||||
{ icon: '🤖', title: 'AI Agent 开发', desc: '用 Skill + Agent + MCP 搭建专属 AI 助手，从原型到生产一站完成' },
|
||||
{ icon: '📊', title: '数据分析', desc: '自然语言查询数据库，自动生成可视化报告，让数据说话更简单' },
|
||||
{ icon: '✍️', title: '内容创作', desc: 'AI 辅助写文章、做翻译、润色文案，让创作更有灵感' },
|
||||
{ icon: '🔬', title: '技术探索', desc: '接入最新模型做实验，对比不同 LLM 效果，探索 AI 的前沿能力' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="landing-page-v2">
|
||||
{/* Toast */}
|
||||
{toastMsg && <div className="landing-toast-v2">{toastMsg}</div>}
|
||||
|
||||
{/* Header */}
|
||||
<header className={`landing-header-v2 ${scrolled ? 'scrolled' : ''}`}>
|
||||
<div className="landing-header-inner-v2">
|
||||
<div className="landing-brand-v2">
|
||||
<svg width="36" height="36" viewBox="0 0 32 32" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#5B5FED"/>
|
||||
<stop offset="100%" stopColor="#A78BFA"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="32" height="32" rx="8" fill="url(#logoGrad)"/>
|
||||
<path d="M8 20V12l4 4 4-4v8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
|
||||
<path d="M6 22h20" stroke="white" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
|
||||
</svg>
|
||||
<span className="landing-brand-text">七虎AI</span>
|
||||
</div>
|
||||
<nav className="landing-nav-v2" style={{ cursor: 'pointer' }}>
|
||||
<a onClick={() => document.getElementById('what-is')?.scrollIntoView({ behavior: 'smooth' })}>平台介绍</a>
|
||||
<a onClick={() => document.getElementById('architecture')?.scrollIntoView({ behavior: 'smooth' })}>平台架构</a>
|
||||
<a onClick={() => document.getElementById('capabilities')?.scrollIntoView({ behavior: 'smooth' })}>能力体系</a>
|
||||
<a onClick={() => document.getElementById('scenarios')?.scrollIntoView({ behavior: 'smooth' })}>应用场景</a>
|
||||
<a onClick={() => document.getElementById('market')?.scrollIntoView({ behavior: 'smooth' })}>技能生态</a>
|
||||
</nav>
|
||||
<div className="landing-actions-v2">
|
||||
<button className="btn-ghost-v2" onClick={() => navigate('/login')}>登录</button>
|
||||
<button className="btn-primary-v2" onClick={() => navigate('/login')}>免费注册</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section — What is 七虎AI */}
|
||||
<section className="hero-section-v2">
|
||||
<div className="hero-bg-orb orb-1" />
|
||||
<div className="hero-bg-orb orb-2" />
|
||||
<div className="hero-bg-orb orb-3" />
|
||||
<div className="hero-content-v2">
|
||||
<div className="hero-badge-v2">
|
||||
<span className="hero-badge-dot" />
|
||||
AI 个人工作台 · 为创造者而生
|
||||
</div>
|
||||
<h1 className="hero-title-v2">
|
||||
每一个 AI 创造者
|
||||
<span className="hero-gradient-text"> 的超级工作台</span>
|
||||
</h1>
|
||||
<p className="hero-subtitle-v2">
|
||||
七虎AI 是一站式 AI 能力集成平台，让你在一个地方完成对话、知识库、技能编排、模型切换、自动化搭建<br/>
|
||||
无需拼接多个工具，从想法到落地，一个平台就够了
|
||||
</p>
|
||||
<div className="hero-cta-v2">
|
||||
<button className="btn-hero-primary" onClick={() => navigate('/login')}>
|
||||
免费开始使用
|
||||
<SVGIcon size={18}><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></SVGIcon>
|
||||
</button>
|
||||
<button className="btn-hero-secondary" onClick={() => document.getElementById('what-is')?.scrollIntoView({ behavior: 'smooth' })}>
|
||||
了解平台
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
{/* Stats */}
|
||||
<div className="hero-stats-v2">
|
||||
<div className="hero-stat-item">
|
||||
<span className="hero-stat-num">100+</span>
|
||||
<span className="hero-stat-label">AI 技能</span>
|
||||
</div>
|
||||
<div className="hero-stat-divider" />
|
||||
<div className="hero-stat-item">
|
||||
<span className="hero-stat-num">50+</span>
|
||||
<span className="hero-stat-label">大模型接入</span>
|
||||
</div>
|
||||
<div className="hero-stat-divider" />
|
||||
<div className="hero-stat-item">
|
||||
<span className="hero-stat-num">6</span>
|
||||
<span className="hero-stat-label">IM 平台</span>
|
||||
</div>
|
||||
<div className="hero-stat-divider" />
|
||||
<div className="hero-stat-item">
|
||||
<span className="hero-stat-num">99.9%</span>
|
||||
<span className="hero-stat-label">可用性</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What is 七虎AI — Platform Introduction */}
|
||||
<section id="what-is" className="whatis-section-v2">
|
||||
<div className="section-header-v2">
|
||||
<span className="section-badge-v2">平台介绍</span>
|
||||
<h2>七虎AI 是什么？</h2>
|
||||
<p>一个面向 AI 爱好者和从业者的个人 AI 能力集成平台</p>
|
||||
</div>
|
||||
<div className="whatis-cards-v2">
|
||||
<div className="whatis-card">
|
||||
<div className="whatis-card-icon">🎯</div>
|
||||
<h3>能力聚合</h3>
|
||||
<p>将大模型对话、知识库、技能编排、自动化、IM Bot 等能力整合在一个平台，告别工具碎片化</p>
|
||||
</div>
|
||||
<div className="whatis-card">
|
||||
<div className="whatis-card-icon">⚡</div>
|
||||
<h3>开箱即用</h3>
|
||||
<p>预设 100+ AI 技能模板，50+ 大模型即配即用，无需从零搭建，注册即可上手</p>
|
||||
</div>
|
||||
<div className="whatis-card">
|
||||
<div className="whatis-card-icon">🔌</div>
|
||||
<h3>开放扩展</h3>
|
||||
<p>支持 MCP 协议、Skill 插件、Agent 编排、API 开放，你可以自由扩展和定制</p>
|
||||
</div>
|
||||
<div className="whatis-card">
|
||||
<div className="whatis-card-icon">🚀</div>
|
||||
<h3>持续进化</h3>
|
||||
<p>AI 自进化引擎从使用中持续学习，知识库自动更新，模型热切换，你的工作台越来越强</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Platform Architecture */}
|
||||
<section id="architecture" className="architecture-section-v2">
|
||||
<div className="section-header-v2">
|
||||
<span className="section-badge-v2">平台架构</span>
|
||||
<h2>四层架构 · 层层赋能</h2>
|
||||
<p>从基础设施到上层应用，理解 七虎AI 的技术全貌</p>
|
||||
</div>
|
||||
<div className="arch-layers-v2">
|
||||
{archLayers.map((layer, idx) => (
|
||||
<div key={idx} className="arch-layer" style={{ '--layer-color': layer.color } as React.CSSProperties}>
|
||||
<div className="arch-layer-header">
|
||||
<div className="arch-layer-dot" style={{ background: layer.color }} />
|
||||
<span className="arch-layer-label">{layer.label}</span>
|
||||
<div className="arch-layer-line" />
|
||||
</div>
|
||||
<div className="arch-layer-items">
|
||||
{layer.items.map((item, i) => (
|
||||
<span key={i} className="arch-layer-chip">{item}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{/* Downward arrows between layers */}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Banner Carousel */}
|
||||
{banners.length > 0 && (
|
||||
<section className="banner-section-v2">
|
||||
<div
|
||||
className="banner-carousel-v2"
|
||||
onMouseEnter={() => setIsPaused(true)}
|
||||
onMouseLeave={() => setIsPaused(false)}
|
||||
>
|
||||
<div className="banner-track-v2" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
|
||||
{banners.map((banner, idx) => (
|
||||
<div key={idx} className="banner-slide-v2">
|
||||
<div className="banner-content-v2">
|
||||
<span className="banner-tag">AI 精选</span>
|
||||
<h2>{banner.title}</h2>
|
||||
<p>{banner.title}</p>
|
||||
</div>
|
||||
<div className="banner-visual-v2">
|
||||
<div className="banner-shape" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="banner-dots-v2">
|
||||
{banners.map((_, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
className={`banner-dot ${idx === currentSlide ? 'active' : ''}`}
|
||||
onClick={() => goToSlide(idx)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Capabilities Section */}
|
||||
<section id="capabilities" className="capabilities-section-v2">
|
||||
<div className="section-header-v2">
|
||||
<span className="section-badge-v2">能力体系</span>
|
||||
<h2>六大核心能力</h2>
|
||||
<p>从对话到自动化，覆盖 AI 从业者的全部工作流</p>
|
||||
</div>
|
||||
<div className="capabilities-grid-v2">
|
||||
{capabilities.map((c, idx) => (
|
||||
<div key={idx} className="capability-card-v2">
|
||||
<div className="capability-icon-v2">{c.icon}</div>
|
||||
<h3>{c.title}</h3>
|
||||
<p>{c.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Scenarios Section */}
|
||||
<section id="scenarios" className="scenarios-section-v2">
|
||||
<div className="section-header-v2">
|
||||
<span className="section-badge-v2">应用场景</span>
|
||||
<h2>每个 AI 创作者都用得上</h2>
|
||||
<p>无论你是学习者、开发者、还是内容创作者，都能找到属于你的打开方式</p>
|
||||
</div>
|
||||
<div className="scenarios-grid-v2">
|
||||
{scenarios.map((s, idx) => (
|
||||
<div key={idx} className="scenario-card-v2">
|
||||
<div className="scenario-emoji">{s.icon}</div>
|
||||
<h3>{s.title}</h3>
|
||||
<p>{s.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Market Preview */}
|
||||
<section id="market" className="market-section-v2">
|
||||
<div className="section-header-v2">
|
||||
<span className="section-badge-v2">技能生态</span>
|
||||
<h2>丰富的 AI 技能生态</h2>
|
||||
<p>Skills、Agent、MCP 工具一键安装，持续扩展你的 AI 能力边界</p>
|
||||
<div className="market-filter-v2">
|
||||
{(['', 'skill', 'agent', 'mcp'] as const).map(t => (
|
||||
<button
|
||||
key={t || 'all'}
|
||||
className={`filter-chip ${appTypeFilter === t ? 'active' : ''}`}
|
||||
onClick={() => setAppTypeFilter(t)}
|
||||
>
|
||||
{t === '' ? '全部' : typeLabels[t]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="market-grid-v2">
|
||||
{filteredApps.slice(0, 6).map(app => (
|
||||
<div key={app.id} className="market-card-v2" onClick={() => handleAppClick(app.name)}>
|
||||
<div className="market-card-icon-v2" style={{ background: getGradient(app) }}>
|
||||
{app.name.charAt(0)}
|
||||
</div>
|
||||
<div className="market-card-body-v2">
|
||||
<div className="market-card-header-v2">
|
||||
<h4>{app.name}</h4>
|
||||
<span className="type-badge" style={{ background: typeColors[app.type], color: '#fff' }}>
|
||||
{typeLabels[app.type]}
|
||||
</span>
|
||||
</div>
|
||||
<p className="market-card-desc-v2">{app.description}</p>
|
||||
<div className="market-card-meta-v2">
|
||||
<span>⭐ 4.8</span>
|
||||
<span>📥 1.2k</span>
|
||||
<span>{app.price === 0 ? '免费' : `¥${app.price}`}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="cta-section-v2">
|
||||
<div className="cta-bg-glow" />
|
||||
<h2>准备好开始你的 AI 之旅了吗？</h2>
|
||||
<p>免费注册，即刻拥有属于你自己的 AI 超级工作台</p>
|
||||
<button className="btn-hero-primary" onClick={() => navigate('/login')}>
|
||||
免费注册
|
||||
<SVGIcon size={18}><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></SVGIcon>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="landing-footer-v2">
|
||||
<div className="footer-inner-v2">
|
||||
<div className="footer-brand-v2">
|
||||
<svg width="28" height="28" viewBox="0 0 32 32" fill="none">
|
||||
<rect width="32" height="32" rx="8" fill="#5B5FED"/>
|
||||
<path d="M8 20V12l4 4 4-4v8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
|
||||
<path d="M6 22h20" stroke="white" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
|
||||
</svg>
|
||||
<span>七虎AI</span>
|
||||
</div>
|
||||
<div className="footer-links-v2">
|
||||
<div className="footer-col-v2">
|
||||
<h4>平台</h4>
|
||||
<a onClick={() => document.getElementById('what-is')?.scrollIntoView({ behavior: 'smooth' })}>平台介绍</a>
|
||||
<a onClick={() => document.getElementById('architecture')?.scrollIntoView({ behavior: 'smooth' })}>平台架构</a>
|
||||
<a onClick={() => document.getElementById('capabilities')?.scrollIntoView({ behavior: 'smooth' })}>能力体系</a>
|
||||
</div>
|
||||
<div className="footer-col-v2">
|
||||
<h4>资源</h4>
|
||||
<a href="#">API 文档</a>
|
||||
<a href="#">开发者指南</a>
|
||||
<a href="#">更新日志</a>
|
||||
</div>
|
||||
<div className="footer-col-v2">
|
||||
<h4>支持</h4>
|
||||
<a href="#">帮助中心</a>
|
||||
<a href="#">联系我们</a>
|
||||
<a href="#">社区论坛</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom-v2">
|
||||
<p>© 2026 七虎AI. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LandingPage;
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { mockAdBanners, mockApps } from '@/mock/data';
|
||||
import type { AdBanner, MarketApp } from '@/types';
|
||||
import './LandingPage.css';
|
||||
|
||||
const SVGIcon: React.FC<{ children: React.ReactNode; size?: number }> = ({ children, size = 16 }) => (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
{children}
|
||||
</svg>
|
||||
);
|
||||
|
||||
const typeLabels: Record<string, string> = { skill: 'Skill', agent: 'Agent', mcp: 'MCP' };
|
||||
const typeColors: Record<string, string> = { skill: '#10B981', agent: '#5B5FED', mcp: '#F59E0B' };
|
||||
|
||||
const LandingPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [isPaused, setIsPaused] = useState(false);
|
||||
const banners = mockAdBanners.filter(b => b.status === 'active');
|
||||
const publishedApps = mockApps.filter(a => a.status === 'published');
|
||||
const [appTypeFilter, setAppTypeFilter] = useState<'' | 'skill' | 'agent' | 'mcp'>('');
|
||||
const [skillData, setSkillData] = useState<{skills: any[], agents: any[], mcps: any[]}>({skills: [], agents: [], mcps: []});
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const apiModule = await import('@/api');
|
||||
const res = await apiModule.adminAPI.getAdminSkills({page: 1, page_size: 50, status: 'published'});
|
||||
const allApps: any[] = (res as any)?.data?.items || (res as any)?.data || [];
|
||||
const sortFn = (a: any, b: any) => (b.usage_count || b.install_count || 0) - (a.usage_count || a.install_count || 0);
|
||||
const skills = allApps.filter(a => a.type === 'skill').sort(sortFn).slice(0, 5);
|
||||
const agents = allApps.filter(a => a.type === 'agent').sort(sortFn).slice(0, 5);
|
||||
const mcps = allApps.filter(a => a.type === 'mcp').sort(sortFn).slice(0, 5);
|
||||
if (skills.length + agents.length + mcps.length === 0) {
|
||||
setSkillData({skills: publishedApps.filter(a => a.type === 'skill').slice(0, 5), agents: publishedApps.filter(a => a.type === 'agent').slice(0, 5), mcps: publishedApps.filter(a => a.type === 'mcp').slice(0, 5)});
|
||||
} else { setSkillData({skills, agents, mcps}); }
|
||||
} catch (e) {
|
||||
setSkillData({skills: publishedApps.filter(a => a.type === 'skill').slice(0, 5), agents: publishedApps.filter(a => a.type === 'agent').slice(0, 5), mcps: publishedApps.filter(a => a.type === 'mcp').slice(0, 5)});
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
const [toastMsg, setToastMsg] = useState('');
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
const filteredApps = appTypeFilter
|
||||
? publishedApps.filter(a => a.type === appTypeFilter)
|
||||
: publishedApps;
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => setScrolled(window.scrollY > 60);
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
const showToast = (msg: string) => {
|
||||
setToastMsg(msg);
|
||||
setTimeout(() => setToastMsg(''), 2000);
|
||||
};
|
||||
|
||||
const handleAppClick = (appName: string) => {
|
||||
showToast(`"${appName}" 需登录后使用，即将跳转登录页`);
|
||||
setTimeout(() => navigate('/login'), 800);
|
||||
};
|
||||
|
||||
const nextSlide = useCallback(() => {
|
||||
if (banners.length === 0) return;
|
||||
setCurrentSlide(prev => (prev + 1) % banners.length);
|
||||
}, [banners.length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (banners.length <= 1 || isPaused) return;
|
||||
const timer = setInterval(nextSlide, 4000);
|
||||
return () => clearInterval(timer);
|
||||
}, [banners.length, isPaused, nextSlide]);
|
||||
|
||||
const goToSlide = (idx: number) => setCurrentSlide(idx);
|
||||
|
||||
const getGradient = (app: MarketApp): string => {
|
||||
const gradients: Record<string, string> = {
|
||||
a1: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
a2: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
||||
a3: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
||||
a4: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
|
||||
a5: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
|
||||
a6: 'linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)',
|
||||
a8: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
|
||||
};
|
||||
return gradients[app.id] || 'linear-gradient(135deg, #5B5FED 0%, #A78BFA 100%)';
|
||||
};
|
||||
|
||||
// Platform Architecture - layers from bottom to top
|
||||
const archLayers = [
|
||||
{
|
||||
label: '应用层',
|
||||
color: '#6C63FF',
|
||||
items: ['AI 对话工作台', '知识库问答', '自动化流程', 'IM Bot 接入', 'API 集成'],
|
||||
},
|
||||
{
|
||||
label: '能力层',
|
||||
color: '#10B981',
|
||||
items: ['技能市场 (Skill)', '智能体 (Agent)', 'MCP 协议', 'RAG 检索增强', '工具链编排'],
|
||||
},
|
||||
{
|
||||
label: '模型层',
|
||||
color: '#F59E0B',
|
||||
items: ['DeepSeek', 'GPT-4o', 'Claude', 'Qwen', '多模态模型'],
|
||||
},
|
||||
{
|
||||
label: '基础设施',
|
||||
color: '#3B82F6',
|
||||
items: ['向量数据库', '对象存储', '任务调度', 'API 网关', '监控告警'],
|
||||
},
|
||||
];
|
||||
|
||||
// Capability groups
|
||||
const capabilities = [
|
||||
{
|
||||
icon: <SVGIcon size={28}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></SVGIcon>,
|
||||
title: 'AI 对话',
|
||||
desc: '接入 50+ 主流大模型，支持流式输出、多轮对话、Function Calling，你的专属 AI 助手',
|
||||
},
|
||||
{
|
||||
icon: <SVGIcon size={28}><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></SVGIcon>,
|
||||
title: '知识库',
|
||||
desc: '上传文档、网页、代码构建个人知识库，RAG 增强检索让 AI 回答更精准可靠',
|
||||
},
|
||||
{
|
||||
icon: <SVGIcon size={28}><rect x="3" y="3" width="7" height="7" rx="1.2"/><rect x="14" y="3" width="7" height="7" rx="1.2"/><rect x="3" y="14" width="7" height="7" rx="1.2"/><rect x="14" y="14" width="7" height="7" rx="1.2"/></SVGIcon>,
|
||||
title: '技能市场',
|
||||
desc: '100+ 预制 AI 技能，一键安装即用。支持 Skill、Agent、MCP 三种形态，持续扩展',
|
||||
},
|
||||
{
|
||||
icon: <SVGIcon size={28}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></SVGIcon>,
|
||||
title: 'IM Bot',
|
||||
desc: '将 AI 能力接入飞书、微信、钉钉，在聊天中调用 AI，无缝融入日常工作流',
|
||||
},
|
||||
{
|
||||
icon: <SVGIcon size={28}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></SVGIcon>,
|
||||
title: 'AI 自进化',
|
||||
desc: '从每次对话中持续学习，自动沉淀知识图谱，你的 AI 越用越懂你',
|
||||
},
|
||||
{
|
||||
icon: <SVGIcon size={28}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></SVGIcon>,
|
||||
title: 'Token 驾驶舱',
|
||||
desc: '实时监控调用量、Token 消耗与成本，精细化管理你的 AI 使用预算',
|
||||
},
|
||||
];
|
||||
|
||||
// Scenarios - individual practitioner focused
|
||||
const scenarios = [
|
||||
{ icon: '📚', title: '学习助手', desc: '构建课程知识库，AI 辅助理解复杂概念、整理笔记、解答疑问' },
|
||||
{ icon: '💼', title: '工作效率', desc: '自动化重复任务、智能撰写文档邮件、快速检索信息，效率翻倍' },
|
||||
{ icon: '🤖', title: 'AI Agent 开发', desc: '用 Skill + Agent + MCP 搭建专属 AI 助手，从原型到生产一站完成' },
|
||||
{ icon: '📊', title: '数据分析', desc: '自然语言查询数据库，自动生成可视化报告，让数据说话更简单' },
|
||||
{ icon: '✍️', title: '内容创作', desc: 'AI 辅助写文章、做翻译、润色文案，让创作更有灵感' },
|
||||
{ icon: '🔬', title: '技术探索', desc: '接入最新模型做实验，对比不同 LLM 效果，探索 AI 的前沿能力' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="landing-page-v2">
|
||||
{/* Toast */}
|
||||
{toastMsg && <div className="landing-toast-v2">{toastMsg}</div>}
|
||||
|
||||
{/* Header */}
|
||||
<header className={`landing-header-v2 ${scrolled ? 'scrolled' : ''}`}>
|
||||
<div className="landing-header-inner-v2">
|
||||
<div className="landing-brand-v2">
|
||||
<svg width="36" height="36" viewBox="0 0 32 32" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#5B5FED"/>
|
||||
<stop offset="100%" stopColor="#A78BFA"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="32" height="32" rx="8" fill="url(#logoGrad)"/>
|
||||
<path d="M8 20V12l4 4 4-4v8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
|
||||
<path d="M6 22h20" stroke="white" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
|
||||
</svg>
|
||||
<span className="landing-brand-text">七虎AI</span>
|
||||
</div>
|
||||
<nav className="landing-nav-v2" style={{ cursor: 'pointer' }}>
|
||||
<a onClick={() => document.getElementById('what-is')?.scrollIntoView({ behavior: 'smooth' })}>平台介绍</a>
|
||||
<a onClick={() => document.getElementById('architecture')?.scrollIntoView({ behavior: 'smooth' })}>平台架构</a>
|
||||
<a onClick={() => document.getElementById('capabilities')?.scrollIntoView({ behavior: 'smooth' })}>能力体系</a>
|
||||
<a onClick={() => document.getElementById('scenarios')?.scrollIntoView({ behavior: 'smooth' })}>应用场景</a>
|
||||
<a onClick={() => document.getElementById('market')?.scrollIntoView({ behavior: 'smooth' })}>技能生态</a>
|
||||
</nav>
|
||||
<div className="landing-actions-v2">
|
||||
<button className="btn-ghost-v2" onClick={() => navigate('/login')}>登录</button>
|
||||
<button className="btn-primary-v2" onClick={() => navigate('/login')}>免费注册</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section — What is 七虎AI */}
|
||||
<section className="hero-section-v2">
|
||||
<div className="hero-bg-orb orb-1" />
|
||||
<div className="hero-bg-orb orb-2" />
|
||||
<div className="hero-bg-orb orb-3" />
|
||||
<div className="hero-content-v2">
|
||||
<div className="hero-badge-v2">
|
||||
<span className="hero-badge-dot" />
|
||||
AI 个人工作台 · 为创造者而生
|
||||
</div>
|
||||
<h1 className="hero-title-v2">
|
||||
每一个 AI 创造者
|
||||
<span className="hero-gradient-text"> 的超级工作台</span>
|
||||
</h1>
|
||||
<p className="hero-subtitle-v2">
|
||||
七虎AI 是一站式 AI 能力集成平台，让你在一个地方完成对话、知识库、技能编排、模型切换、自动化搭建<br/>
|
||||
无需拼接多个工具，从想法到落地，一个平台就够了
|
||||
</p>
|
||||
<div className="hero-cta-v2">
|
||||
<button className="btn-hero-primary" onClick={() => navigate('/login')}>
|
||||
免费开始使用
|
||||
<SVGIcon size={18}><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></SVGIcon>
|
||||
</button>
|
||||
<button className="btn-hero-secondary" onClick={() => document.getElementById('what-is')?.scrollIntoView({ behavior: 'smooth' })}>
|
||||
了解平台
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
{/* Stats */}
|
||||
<div className="hero-stats-v2">
|
||||
<div className="hero-stat-item">
|
||||
<span className="hero-stat-num">100+</span>
|
||||
<span className="hero-stat-label">AI 技能</span>
|
||||
</div>
|
||||
<div className="hero-stat-divider" />
|
||||
<div className="hero-stat-item">
|
||||
<span className="hero-stat-num">50+</span>
|
||||
<span className="hero-stat-label">大模型接入</span>
|
||||
</div>
|
||||
<div className="hero-stat-divider" />
|
||||
<div className="hero-stat-item">
|
||||
<span className="hero-stat-num">6</span>
|
||||
<span className="hero-stat-label">IM 平台</span>
|
||||
</div>
|
||||
<div className="hero-stat-divider" />
|
||||
<div className="hero-stat-item">
|
||||
<span className="hero-stat-num">99.9%</span>
|
||||
<span className="hero-stat-label">可用性</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* What is 七虎AI — Platform Introduction */}
|
||||
<section id="what-is" className="whatis-section-v2">
|
||||
<div className="section-header-v2">
|
||||
<span className="section-badge-v2">平台介绍</span>
|
||||
<h2>七虎AI 是什么？</h2>
|
||||
<p>一个面向 AI 爱好者和从业者的个人 AI 能力集成平台</p>
|
||||
</div>
|
||||
<div className="whatis-cards-v2">
|
||||
<div className="whatis-card">
|
||||
<div className="whatis-card-icon">🎯</div>
|
||||
<h3>能力聚合</h3>
|
||||
<p>将大模型对话、知识库、技能编排、自动化、IM Bot 等能力整合在一个平台，告别工具碎片化</p>
|
||||
</div>
|
||||
<div className="whatis-card">
|
||||
<div className="whatis-card-icon">⚡</div>
|
||||
<h3>开箱即用</h3>
|
||||
<p>预设 100+ AI 技能模板，50+ 大模型即配即用，无需从零搭建，注册即可上手</p>
|
||||
</div>
|
||||
<div className="whatis-card">
|
||||
<div className="whatis-card-icon">🔌</div>
|
||||
<h3>开放扩展</h3>
|
||||
<p>支持 MCP 协议、Skill 插件、Agent 编排、API 开放，你可以自由扩展和定制</p>
|
||||
</div>
|
||||
<div className="whatis-card">
|
||||
<div className="whatis-card-icon">🚀</div>
|
||||
<h3>持续进化</h3>
|
||||
<p>AI 自进化引擎从使用中持续学习，知识库自动更新，模型热切换，你的工作台越来越强</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Platform Architecture */}
|
||||
<section id="architecture" className="architecture-section-v2">
|
||||
<div className="section-header-v2">
|
||||
<span className="section-badge-v2">平台架构</span>
|
||||
<h2>四层架构 · 层层赋能</h2>
|
||||
<p>从基础设施到上层应用，理解 七虎AI 的技术全貌</p>
|
||||
</div>
|
||||
<div className="arch-layers-v2">
|
||||
{archLayers.map((layer, idx) => (
|
||||
<div key={idx} className="arch-layer" style={{ '--layer-color': layer.color } as React.CSSProperties}>
|
||||
<div className="arch-layer-header">
|
||||
<div className="arch-layer-dot" style={{ background: layer.color }} />
|
||||
<span className="arch-layer-label">{layer.label}</span>
|
||||
<div className="arch-layer-line" />
|
||||
</div>
|
||||
<div className="arch-layer-items">
|
||||
{layer.items.map((item, i) => (
|
||||
<span key={i} className="arch-layer-chip">{item}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{/* Downward arrows between layers */}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Banner Carousel */}
|
||||
{banners.length > 0 && (
|
||||
<section className="banner-section-v2">
|
||||
<div
|
||||
className="banner-carousel-v2"
|
||||
onMouseEnter={() => setIsPaused(true)}
|
||||
onMouseLeave={() => setIsPaused(false)}
|
||||
>
|
||||
<div className="banner-track-v2" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
|
||||
{banners.map((banner, idx) => (
|
||||
<div key={idx} className="banner-slide-v2">
|
||||
<div className="banner-content-v2">
|
||||
<span className="banner-tag">AI 精选</span>
|
||||
<h2>{banner.title}</h2>
|
||||
<p>{banner.title}</p>
|
||||
</div>
|
||||
<div className="banner-visual-v2">
|
||||
<div className="banner-shape" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="banner-dots-v2">
|
||||
{banners.map((_, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
className={`banner-dot ${idx === currentSlide ? 'active' : ''}`}
|
||||
onClick={() => goToSlide(idx)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Capabilities Section */}
|
||||
<section id="capabilities" className="capabilities-section-v2">
|
||||
<div className="section-header-v2">
|
||||
<span className="section-badge-v2">能力体系</span>
|
||||
<h2>六大核心能力</h2>
|
||||
<p>从对话到自动化，覆盖 AI 从业者的全部工作流</p>
|
||||
</div>
|
||||
<div className="capabilities-grid-v2">
|
||||
{capabilities.map((c, idx) => (
|
||||
<div key={idx} className="capability-card-v2">
|
||||
<div className="capability-icon-v2">{c.icon}</div>
|
||||
<h3>{c.title}</h3>
|
||||
<p>{c.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Scenarios Section */}
|
||||
<section id="scenarios" className="scenarios-section-v2">
|
||||
<div className="section-header-v2">
|
||||
<span className="section-badge-v2">应用场景</span>
|
||||
<h2>每个 AI 创作者都用得上</h2>
|
||||
<p>无论你是学习者、开发者、还是内容创作者，都能找到属于你的打开方式</p>
|
||||
</div>
|
||||
<div className="scenarios-grid-v2">
|
||||
{scenarios.map((s, idx) => (
|
||||
<div key={idx} className="scenario-card-v2">
|
||||
<div className="scenario-emoji">{s.icon}</div>
|
||||
<h3>{s.title}</h3>
|
||||
<p>{s.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Market Preview */}
|
||||
<section id="market" className="market-section-v2">
|
||||
<div className="section-header-v2">
|
||||
<span className="section-badge-v2">技能生态</span>
|
||||
<h2>丰富的 AI 技能生态</h2>
|
||||
<p>Skills、Agent、MCP 工具一键安装，持续扩展你的 AI 能力边界</p>
|
||||
<div className="market-filter-v2">
|
||||
{(['', 'skill', 'agent', 'mcp'] as const).map(t => (
|
||||
<button
|
||||
key={t || 'all'}
|
||||
className={`filter-chip ${appTypeFilter === t ? 'active' : ''}`}
|
||||
onClick={() => setAppTypeFilter(t)}
|
||||
>
|
||||
{t === '' ? '全部' : typeLabels[t]}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="market-grid-v2">
|
||||
{(() => {
|
||||
const hasRealData = skillData.skills.length + skillData.agents.length + skillData.mcps.length > 0;
|
||||
let displayApps: any[];
|
||||
if (appTypeFilter) {
|
||||
const key = appTypeFilter === 'skill' ? 'skills' : appTypeFilter === 'agent' ? 'agents' : 'mcps';
|
||||
displayApps = hasRealData ? skillData[key] : filteredApps.slice(0, 5);
|
||||
} else {
|
||||
displayApps = hasRealData ? [...skillData.skills, ...skillData.agents, ...skillData.mcps] : filteredApps.slice(0, 6);
|
||||
}
|
||||
return displayApps.map((app: any) => {
|
||||
const appType = app.type || 'skill';
|
||||
const appColor = typeColors[appType] || '#6C63FF';
|
||||
const appLabel = typeLabels[appType] || 'Skill';
|
||||
const appName = app.name || app.title || '未命名';
|
||||
const appDesc = app.description || app.desc || '';
|
||||
const appUsage = app.usage_count || app.install_count || 0;
|
||||
const appPrice = app.price || 0;
|
||||
return (
|
||||
<div key={app.id || appName} className="market-card-v2" onClick={() => handleAppClick(appName)}>
|
||||
<div className="market-card-icon-v2" style={{ background: hasRealData ? `linear-gradient(135deg, ${appColor}44, ${appColor}11)` : getGradient(app) }}>
|
||||
<span style={{ color: appColor, fontWeight: 700, fontSize: 16 }}>{appName.charAt(0)}</span>
|
||||
</div>
|
||||
<div className="market-card-body-v2">
|
||||
<div className="market-card-header-v2">
|
||||
<h4>{appName}</h4>
|
||||
<span className="type-badge" style={{ background: appColor, color: '#fff' }}>{appLabel}</span>
|
||||
</div>
|
||||
<p className="market-card-desc-v2">{appDesc}</p>
|
||||
<div className="market-card-meta-v2">
|
||||
{appUsage > 0 && <span>📥 {appUsage >= 1000 ? `${(appUsage/1000).toFixed(1)}k` : appUsage}次</span>}
|
||||
<span>{appPrice === 0 ? '免费' : `¥${appPrice}`}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="cta-section-v2">
|
||||
<div className="cta-bg-glow" />
|
||||
<h2>准备好开始你的 AI 之旅了吗？</h2>
|
||||
<p>免费注册，即刻拥有属于你自己的 AI 超级工作台</p>
|
||||
<button className="btn-hero-primary" onClick={() => navigate('/login')}>
|
||||
免费注册
|
||||
<SVGIcon size={18}><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></SVGIcon>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="landing-footer-v2">
|
||||
<div className="footer-inner-v2">
|
||||
<div className="footer-brand-v2">
|
||||
<svg width="28" height="28" viewBox="0 0 32 32" fill="none">
|
||||
<rect width="32" height="32" rx="8" fill="#5B5FED"/>
|
||||
<path d="M8 20V12l4 4 4-4v8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
|
||||
<path d="M6 22h20" stroke="white" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
|
||||
</svg>
|
||||
<span>七虎AI</span>
|
||||
</div>
|
||||
<div className="footer-links-v2">
|
||||
<div className="footer-col-v2">
|
||||
<h4>平台</h4>
|
||||
<a onClick={() => document.getElementById('what-is')?.scrollIntoView({ behavior: 'smooth' })}>平台介绍</a>
|
||||
<a onClick={() => document.getElementById('architecture')?.scrollIntoView({ behavior: 'smooth' })}>平台架构</a>
|
||||
<a onClick={() => document.getElementById('capabilities')?.scrollIntoView({ behavior: 'smooth' })}>能力体系</a>
|
||||
</div>
|
||||
<div className="footer-col-v2">
|
||||
<h4>资源</h4>
|
||||
<a href="#">API 文档</a>
|
||||
<a href="#">开发者指南</a>
|
||||
<a href="#">更新日志</a>
|
||||
</div>
|
||||
<div className="footer-col-v2">
|
||||
<h4>支持</h4>
|
||||
<a href="#">帮助中心</a>
|
||||
<a href="#">联系我们</a>
|
||||
<a href="#">社区论坛</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-bottom-v2">
|
||||
<p>© 2026 七虎AI. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LandingPage;
|
||||
Reference in new issue
Block a user