qyyfw/qihuaiflow
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase C1-R: Landing Page repositioned for individual AI practitioners

Browse Source
This commit is contained in:
qyyfw committed 2026-07-05 19:15:02 +08:00
1 parent 6d12ee9ff9
commit 35a8d727e0
2 files changed
+1157 -813
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/pages/front/LandingPage.css
+821 -558
View File
File diff suppressed because it is too large. Load diff
frontend/src/pages/front/LandingPage.tsx
+336 -255
View File
@@ -21,11 +21,18 @@ const LandingPage: React.FC = () => {
const publishedApps = mockApps.filter(a => a.status === 'published'); const publishedApps = mockApps.filter(a => a.status === 'published');
const [appTypeFilter, setAppTypeFilter] = useState<'' | 'skill' | 'agent' | 'mcp'>(''); const [appTypeFilter, setAppTypeFilter] = useState<'' | 'skill' | 'agent' | 'mcp'>('');
const [toastMsg, setToastMsg] = useState(''); const [toastMsg, setToastMsg] = useState('');
const [scrolled, setScrolled] = useState(false);
const filteredApps = appTypeFilter const filteredApps = appTypeFilter
? publishedApps.filter(a => a.type === appTypeFilter) ? publishedApps.filter(a => a.type === appTypeFilter)
: publishedApps; : publishedApps;
useEffect(() => {
const handleScroll = () => setScrolled(window.scrollY > 60);
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const showToast = (msg: string) => { const showToast = (msg: string) => {
setToastMsg(msg); setToastMsg(msg);
setTimeout(() => setToastMsg(''), 2000); setTimeout(() => setToastMsg(''), 2000);
@@ -36,7 +43,6 @@ const LandingPage: React.FC = () => {
setTimeout(() => navigate('/login'), 800); setTimeout(() => navigate('/login'), 800);
}; };
// Auto rotate carousel
const nextSlide = useCallback(() => { const nextSlide = useCallback(() => {
if (banners.length === 0) return; if (banners.length === 0) return;
setCurrentSlide(prev => (prev + 1) % banners.length); setCurrentSlide(prev => (prev + 1) % banners.length);
@@ -63,304 +69,379 @@ const LandingPage: React.FC = () => {
return gradients[app.id] || 'linear-gradient(135deg, #5B5FED 0%, #A78BFA 100%)'; return gradients[app.id] || 'linear-gradient(135deg, #5B5FED 0%, #A78BFA 100%)';
}; };
return ( // Platform Architecture - layers from bottom to top
<div className="landing-page"> const archLayers = [
{/* Toast notification */} {
{toastMsg && ( label: '应用层',
<div className="landing-toast">{toastMsg}</div> 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 网关', '监控告警'],
},
];
{/* Hero / Nav bar */} // Capability groups
<header className="landing-header"> const capabilities = [
<div className="landing-header-inner"> {
<div className="landing-brand"> 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>,
<svg width="32" height="32" viewBox="0 0 32 32" fill="none"> title: 'AI 对话',
<rect width="32" height="32" rx="8" fill="#5B5FED"/> 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="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"/> <path d="M6 22h20" stroke="white" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
</svg> </svg>
<span className="brand-name">Qihu-AIFlow</span> <span className="landing-brand-text">Qihu-AIFlow</span>
</div> </div>
<nav className="landing-nav-links"> <nav className="landing-nav-v2">
<a href="#market">应用市场</a> <a href="#what-is">平台介绍</a>
<a href="#features">平台能力</a> <a href="#architecture">平台架构</a>
<a href="#capabilities">能力体系</a>
<a href="#scenarios">应用场景</a>
<a href="#market">技能生态</a>
</nav> </nav>
<div className="landing-header-actions"> <div className="landing-actions-v2">
<button className="landing-btn landing-btn-outline" onClick={() => navigate('/login')}>登录</button> <button className="btn-ghost-v2" onClick={() => navigate('/login')}>登录</button>
<button className="landing-btn landing-btn-primary" onClick={() => navigate('/login')}>免费注册</button> <button className="btn-primary-v2" onClick={() => navigate('/login')}>免费注册</button>
</div> </div>
</div> </div>
</header> </header>
{/* Hero Section */} {/* Hero Section — What is Qihu-AIFlow */}
<section className="landing-hero"> <section className="hero-section-v2">
<div className="landing-hero-content"> <div className="hero-bg-orb orb-1" />
<h1 className="hero-title"> <div className="hero-bg-orb orb-2" />
用 <span className="hero-accent">AI</span> 构建你的<br/>智能自动化工作流 <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> </h1>
<p className="hero-desc"> <p className="hero-subtitle-v2">
Qihu-AIFlow 是一站式AI智能自动化PaaS平台，集成多模态大模型、知识库管理、应用市场， Qihu-AIFlow 是一站式 AI 能力集成平台，让你在一个地方完成对话、知识库、技能编排、模型切换、自动化搭建<br/>
让每个人都能轻松搭建属于自己的AI自动化SOP。 无需拼接多个工具，从想法到落地，一个平台就够了
</p> </p>
<div className="hero-actions"> <div className="hero-cta-v2">
<button className="landing-btn landing-btn-primary landing-btn-lg" onClick={() => navigate('/login')}> <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>
<button className="landing-btn landing-btn-outline landing-btn-lg" onClick={() => { document.getElementById('market')?.scrollIntoView({ behavior: 'smooth' }); }}> <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> </button>
</div> </div>
<div className="hero-stats"> {/* Stats */}
<div className="hero-stat"> <div className="hero-stats-v2">
<span className="stat-number">3,500+</span> <div className="hero-stat-item">
<span className="stat-label">活跃用户</span> <span className="hero-stat-num">100+</span>
<span className="hero-stat-label">AI 技能</span>
</div> </div>
<div className="hero-stat"> <div className="hero-stat-divider" />
<span className="stat-number">120+</span> <div className="hero-stat-item">
<span className="stat-label">应用/Skills</span> <span className="hero-stat-num">50+</span>
<span className="hero-stat-label">大模型接入</span>
</div> </div>
<div className="hero-stat"> <div className="hero-stat-divider" />
<span className="stat-number">99.8%</span> <div className="hero-stat-item">
<span className="stat-label">服务可用率</span> <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> </div>
</div> </div>
</section> </section>
{/* Carousel Section */} {/* What is Qihu-AIFlow — Platform Introduction */}
{banners.length > 0 && ( <section id="what-is" className="whatis-section-v2">
<section className="landing-banners"> <div className="section-header-v2">
<div className="landing-section-inner"> <span className="section-badge-v2">平台介绍</span>
<h2 className="section-title">推荐应用</h2> <h2>Qihu-AIFlow 是什么？</h2>
<div <p>一个面向 AI 爱好者和从业者的个人 AI 能力集成平台</p>
className="carousel-container" </div>
onMouseEnter={() => setIsPaused(true)} <div className="whatis-cards-v2">
onMouseLeave={() => setIsPaused(false)} <div className="whatis-card">
> <div className="whatis-card-icon">🎯</div>
<div className="carousel-track" style={{ transform: `translateX(-${currentSlide * 100}%)` }}> <h3>能力聚合</h3>
{banners.map(banner => ( <p>将大模型对话、知识库、技能编排、自动化、IM Bot 等能力整合在一个平台，告别工具碎片化</p>
<div key={banner.id} className="carousel-slide"> </div>
<div className="carousel-card" style={{ background: banner.linkAppId ? getGradient({ id: banner.linkAppId } as MarketApp) : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}> <div className="whatis-card">
<div className="carousel-card-content"> <div className="whatis-card-icon">⚡</div>
<div className="carousel-badge">推荐</div> <h3>开箱即用</h3>
<h3 className="carousel-title">{banner.title}</h3> <p>预设 100+ AI 技能模板，50+ 大模型即配即用，无需从零搭建，注册即可上手</p>
{banner.linkAppName && ( </div>
<p className="carousel-subtitle">立即体验 {banner.linkAppName}</p> <div className="whatis-card">
)} <div className="whatis-card-icon">🔌</div>
<button <h3>开放扩展</h3>
className="carousel-cta" <p>支持 MCP 协议、Skill 插件、Agent 编排、API 开放，你可以自由扩展和定制</p>
onClick={() => navigate('/login')} </div>
> <div className="whatis-card">
查看详情 <div className="whatis-card-icon">🚀</div>
<SVGIcon size={14}><polyline points="9 18 15 12 9 6"/></SVGIcon> <h3>持续进化</h3>
</button> <p>AI 自进化引擎从使用中持续学习，知识库自动更新，模型热切换，你的工作台越来越强</p>
</div> </div>
<div className="carousel-card-visual"> </div>
<div className="visual-circle c1"/> </section>
<div className="visual-circle c2"/>
<div className="visual-circle c3"/> {/* Platform Architecture */}
</div> <section id="architecture" className="architecture-section-v2">
</div> <div className="section-header-v2">
</div> <span className="section-badge-v2">平台架构</span>
<h2>四层架构 · 层层赋能</h2>
<p>从基础设施到上层应用，理解 Qihu-AIFlow 的技术全貌</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>
{/* Dots */} </div>
{banners.length > 1 && ( ))}
<div className="carousel-dots"> {/* Downward arrows between layers */}
{banners.map((_, idx) => ( </div>
<button </section>
key={idx}
className={`carousel-dot ${idx === currentSlide ? 'active' : ''}`} {/* Banner Carousel */}
onClick={() => goToSlide(idx)} {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>
)} ))}
{/* Arrows */} </div>
{banners.length > 1 && ( <div className="banner-dots-v2">
<> {banners.map((_, idx) => (
<button <button
className="carousel-arrow carousel-arrow-left" key={idx}
onClick={() => setCurrentSlide(prev => (prev - 1 + banners.length) % banners.length)} className={`banner-dot ${idx === currentSlide ? 'active' : ''}`}
> onClick={() => goToSlide(idx)}
<SVGIcon size={20}><polyline points="15 18 9 12 15 6"/></SVGIcon> />
</button> ))}
<button
className="carousel-arrow carousel-arrow-right"
onClick={() => nextSlide()}
>
<SVGIcon size={20}><polyline points="9 18 15 12 9 6"/></SVGIcon>
</button>
</>
)}
</div> </div>
</div> </div>
</section> </section>
)} )}
{/* Market Preview Section */} {/* Capabilities Section */}
<section className="landing-market" id="market"> <section id="capabilities" className="capabilities-section-v2">
<div className="landing-section-inner"> <div className="section-header-v2">
<div className="section-header"> <span className="section-badge-v2">能力体系</span>
<h2 className="section-title">应用市场</h2> <h2>六大核心能力</h2>
<p className="section-desc">丰富的 Skills、Agent、MCP 应用，一键接入你的工作流</p> <p>从对话到自动化，覆盖 AI 从业者的全部工作流</p>
</div> </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>
{/* Type Filter */} {/* Scenarios Section */}
<div className="market-filter-tabs"> <section id="scenarios" className="scenarios-section-v2">
<button <div className="section-header-v2">
className={`filter-tab ${appTypeFilter === '' ? 'active' : ''}`} <span className="section-badge-v2">应用场景</span>
onClick={() => setAppTypeFilter('')} <h2>每个 AI 创作者都用得上</h2>
>全部</button> <p>无论你是学习者、开发者、还是内容创作者，都能找到属于你的打开方式</p>
<button </div>
className={`filter-tab ${appTypeFilter === 'skill' ? 'active' : ''}`} <div className="scenarios-grid-v2">
onClick={() => setAppTypeFilter('skill')} {scenarios.map((s, idx) => (
>Skills</button> <div key={idx} className="scenario-card-v2">
<button <div className="scenario-emoji">{s.icon}</div>
className={`filter-tab ${appTypeFilter === 'agent' ? 'active' : ''}`} <h3>{s.title}</h3>
onClick={() => setAppTypeFilter('agent')} <p>{s.desc}</p>
>Agent</button> </div>
<button ))}
className={`filter-tab ${appTypeFilter === 'mcp' ? 'active' : ''}`} </div>
onClick={() => setAppTypeFilter('mcp')} </section>
>MCP</button>
</div>
{/* App Grid */} {/* Market Preview */}
<div className="market-app-grid"> <section id="market" className="market-section-v2">
{filteredApps.map(app => ( <div className="section-header-v2">
<div key={app.id} className="market-app-card" onClick={() => handleAppClick(app.name)}> <span className="section-badge-v2">技能生态</span>
<div className="app-card-cover" style={{ background: getGradient(app) }}> <h2>丰富的 AI 技能生态</h2>
<span className="app-card-type-badge" style={{ background: typeColors[app.type] }}> <p>Skills、Agent、MCP 工具一键安装，持续扩展你的 AI 能力边界</p>
{typeLabels[app.type]} <div className="market-filter-v2">
</span> {(['', 'skill', 'agent', 'mcp'] as const).map(t => (
{app.price > 0 && ( <button
<span className="app-card-price">{app.price} 元</span> key={t || 'all'}
)} className={`filter-chip ${appTypeFilter === t ? 'active' : ''}`}
</div> onClick={() => setAppTypeFilter(t)}
<div className="app-card-body"> >
<h4 className="app-card-name">{app.name}</h4> {t === '' ? '全部' : typeLabels[t]}
<p className="app-card-desc">{app.description}</p> </button>
<div className="app-card-meta">
<span className="app-card-rating">
<SVGIcon size={12}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></SVGIcon>
{app.ratingAvg > 0 ? app.ratingAvg : '-'}
</span>
<span className="app-card-installs">{app.installCount.toLocaleString()} 次安装</span>
</div>
</div>
</div>
))} ))}
</div> </div>
</div>
<div className="market-more"> <div className="market-grid-v2">
<button className="landing-btn landing-btn-outline" onClick={() => navigate('/login')}> {filteredApps.slice(0, 6).map(app => (
登录查看更多应用 <div key={app.id} className="market-card-v2" onClick={() => handleAppClick(app.name)}>
<SVGIcon size={14}><polyline points="9 18 15 12 9 6"/></SVGIcon> <div className="market-card-icon-v2" style={{ background: getGradient(app) }}>
</button> {app.name.charAt(0)}
</div> </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> </div>
</section> </section>
{/* Features Section */} {/* CTA */}
<section className="landing-features" id="features"> <section className="cta-section-v2">
<div className="landing-section-inner"> <div className="cta-bg-glow" />
<div className="section-header"> <h2>准备好开始你的 AI 之旅了吗？</h2>
<h2 className="section-title">平台核心能力</h2> <p>免费注册，即刻拥有属于你自己的 AI 超级工作台</p>
<p className="section-desc">从对话到自动化，Qihu-AIFlow 为你提供完整的 AI 工作流解决方案</p> <button className="btn-hero-primary" onClick={() => navigate('/login')}>
</div> 免费注册
<div className="features-grid"> <SVGIcon size={18}><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></SVGIcon>
<div className="feature-card"> </button>
<div className="feature-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>
</div>
<h3 className="feature-title">多模型AI对话</h3>
<p className="feature-desc">支持GPT-4o、DeepSeek-R1、Qwen-Max等多种大模型自由切换，按需使用最优模型</p>
</div>
<div className="feature-card">
<div className="feature-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>
</div>
<h3 className="feature-title">私有知识库</h3>
<p className="feature-desc">上传文档构建专属知识库，AI回答基于你的内容，更精准可靠</p>
</div>
<div className="feature-card">
<div className="feature-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>
</div>
<h3 className="feature-title">应用市场</h3>
<p className="feature-desc">丰富的Skills、Agent、MCP应用，一站式接入工作流，即装即用</p>
</div>
<div className="feature-card">
<div className="feature-icon">
<SVGIcon size={28}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></SVGIcon>
</div>
<h3 className="feature-title">Token驾驶舱</h3>
<p className="feature-desc">实时监控Token消耗，费用透明可控，每一笔都有据可查</p>
</div>
<div className="feature-card">
<div className="feature-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>
</div>
<h3 className="feature-title">IM频道绑定</h3>
<p className="feature-desc">支持飞书、钉钉、微信等多平台绑定，AI助手融入日常工作流</p>
</div>
<div className="feature-card">
<div className="feature-icon">
<SVGIcon size={28}><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></SVGIcon>
</div>
<h3 className="feature-title">自动化任务编排</h3>
<p className="feature-desc">创建关键词触发、定时执行等自动化任务，让AI按你的节奏工作</p>
</div>
</div>
</div>
</section>
{/* CTA Section */}
<section className="landing-cta">
<div className="landing-section-inner">
<h2 className="cta-title">准备好开始了吗？</h2>
<p className="cta-desc">免费注册即可体验全部功能，无需任何技术背景</p>
<button className="landing-btn landing-btn-primary landing-btn-lg" onClick={() => navigate('/login')}>
免费注册，立即体验
</button>
</div>
</section> </section>
{/* Footer */} {/* Footer */}
<footer className="landing-footer"> <footer className="landing-footer-v2">
<div className="landing-section-inner"> <div className="footer-inner-v2">
<div className="footer-content"> <div className="footer-brand-v2">
<div className="footer-brand"> <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
<div className="landing-brand"> <rect width="32" height="32" rx="8" fill="#5B5FED"/>
<svg width="28" height="28" viewBox="0 0 32 32" fill="none"> <path d="M8 20V12l4 4 4-4v8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
<rect width="32" height="32" rx="8" fill="#5B5FED"/> <path d="M6 22h20" stroke="white" strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
<path d="M8 20V12l4 4 4-4v8" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/> </svg>
</svg> <span>Qihu-AIFlow</span>
<span className="brand-name" style={{ color: 'var(--color-text-primary)' }}>Qihu-AIFlow</span> </div>
</div> <div className="footer-links-v2">
<p style={{ color: 'var(--color-text-tertiary)', fontSize: 'var(--text-sm)', marginTop: 'var(--space-md)' }}> <div className="footer-col-v2">
AI智能自动化PaaS平台 <h4>平台</h4>
</p> <a href="#what-is">平台介绍</a>
<a href="#architecture">平台架构</a>
<a href="#capabilities">能力体系</a>
</div> </div>
<div className="footer-links"> <div className="footer-col-v2">
<div className="footer-col"> <h4>资源</h4>
<h4>产品</h4> <a href="#">API 文档</a>
<a>AI聊天</a> <a href="#">开发者指南</a>
<a>知识库</a> <a href="#">更新日志</a>
<a>应用市场</a> </div>
</div> <div className="footer-col-v2">
<div className="footer-col"> <h4>支持</h4>
<h4>支持</h4> <a href="#">帮助中心</a>
<a>帮助文档</a> <a href="#">联系我们</a>
<a>API参考</a> <a href="#">社区论坛</a>
<a>联系我们</a>
</div>
</div> </div>
</div> </div>
<div className="footer-bottom"> </div>
<span>Qihu-AIFlow 2026. All rights reserved.</span> <div className="footer-bottom-v2">
</div> <p>&copy; 2026 Qihu-AIFlow. All rights reserved.</p>
</div> </div>
</footer> </footer>
</div> </div>