423 lines
24 KiB
TypeScript
423 lines
24 KiB
TypeScript
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';
|
||
|
||
/* ---------- 内联 Lucide 风格图标（满足"用 Lucide 图标、禁 emoji"铁律） ---------- */
|
||
const Icon: React.FC<{ d: React.ReactNode; size?: number }> = ({ d, size = 20 }) => (
|
||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{d}</svg>
|
||
);
|
||
|
||
/* ---------- 品牌同系渐变（仅靛蓝→青蓝，无第三色相） ---------- */
|
||
const appGradients: Record<string, string> = {
|
||
a1: 'linear-gradient(135deg,#5B5FED 0%,#4F8DF9 100%)',
|
||
a2: 'linear-gradient(135deg,#6366F1 0%,#60A5FA 100%)',
|
||
a3: 'linear-gradient(135deg,#5B5FED 0%,#818CF8 100%)',
|
||
a4: 'linear-gradient(135deg,#4F8DF9 0%,#38BDF8 100%)',
|
||
a5: 'linear-gradient(135deg,#6366F1 0%,#7DD3FC 100%)',
|
||
a6: 'linear-gradient(135deg,#5B5FED 0%,#8185F5 100%)',
|
||
a7: 'linear-gradient(135deg,#4F8DF9 0%,#818CF8 100%)',
|
||
a8: 'linear-gradient(135deg,#6366F1 0%,#4F8DF9 100%)',
|
||
};
|
||
const gradFor = (id: string) => appGradients[id] || 'linear-gradient(135deg,#5B5FED 0%,#4F8DF9 100%)';
|
||
|
||
const typeLabels: Record<string, string> = { skill: 'Skill', agent: 'Agent', mcp: 'MCP' };
|
||
const typeBadge: Record<string, string> = {
|
||
skill: 'badge-skill', agent: 'badge-agent', mcp: 'badge-mcp',
|
||
};
|
||
|
||
/* ---------- 文案数据（来自用户原始需求提炼） ---------- */
|
||
const painPoints = [
|
||
{ d: <><path d="M12 1v22" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></>,
|
||
title: '大模型 API 贵且复杂', desc: '多家模型计费规则不一、调用门槛高，个人与小企业难以低成本接入。' },
|
||
{ d: <><path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" /></>,
|
||
title: 'Prompt 难调试', desc: '缺乏可视化编排与复用，效果全靠手感，团队无法沉淀最佳实践。' },
|
||
{ d: <><ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M3 5v14c0 1.7 4 3 9 3s9-1.3 9-3V5" /><path d="M3 12c0 1.7 4 3 9 3s9-1.3 9-3" /></>,
|
||
title: '数据孤岛', desc: '知识散落在文档、表格、聊天记录里，AI 答非所问，价值无法被激活。' },
|
||
{ d: <><path d="M3 3v18h18" /><path d="m19 9-5 5-4-4-3 3" /></>,
|
||
title: '个人开发者无变现渠道', desc: '做出好用的 AI 能力却找不到分发与交易场景，难以转化为收入。' },
|
||
];
|
||
|
||
const valueProps = [
|
||
{ d: <><path d="M12 1v22" /><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" /></>,
|
||
title: '低价订阅 · 无限 Token', kw: '无限Token',
|
||
desc: '一个低价会员即可放开使用，告别按次计费与额度焦虑，放心把 AI 用进日常。' },
|
||
{ d: <><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" /></>,
|
||
title: '垂直可用办公模板', kw: '办公提效',
|
||
desc: '写 PPT、出投标书、做运营、排版公众号——开箱即用的模板，把重复劳动交给 AI。' },
|
||
{ d: <><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" /><path d="M3 6h18" /><path d="M16 10a4 4 0 0 1-8 0" /></>,
|
||
title: '可交易的技能市场', kw: 'AI变现',
|
||
desc: '把自己打磨的技能上架交易，按订阅 / 下载获得收益，能力即资产。' },
|
||
{ d: <><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" /></>,
|
||
title: 'AI 创作应用基地', kw: '',
|
||
desc: '写小说、做漫剧、谱音乐——在 AI 试炼场低成本试错，让创作想法快速跑通。' },
|
||
{ d: <><path d="M3 12a9 9 0 1 0 9-9" /><path d="M3 3v6h6" /><path d="M12 7v5l3 3" /></>,
|
||
title: '低成本养模型', kw: '',
|
||
desc: '低成本微调 / 托管你的专属模型——养马、养龙虾、养螃蟹，把"养模型"变成可负担的日常。' },
|
||
];
|
||
|
||
const features = [
|
||
{ d: <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></>,
|
||
title: '多模型 AI 对话', desc: 'DeepSeek / Qwen / 国际模型自由切换，按需选用最优模型。' },
|
||
{ d: <><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" /></>,
|
||
title: '私有知识库', desc: '上传文档构建专属知识库，AI 回答基于你的内容，更精准可靠。' },
|
||
{ d: <><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" /></>,
|
||
title: '技能 / 应用中心', desc: '丰富的 Skills、Agent、MCP 应用，即装即用，一键接入工作流。' },
|
||
{ d: <><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></>,
|
||
title: 'Token 驾驶舱', desc: '实时监控 Token 消耗，费用透明可控，每一笔都有据可查。' },
|
||
{ d: <><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" /></>,
|
||
title: 'AI 微信Bot', desc: '个人微信 AI 助手直接对接，消息自动回复，AI 融入你的日常沟通。' },
|
||
{ d: <><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" /></>,
|
||
title: '自动化任务编排', desc: '关键词触发、定时执行等自动化任务，让 AI 按你的节奏工作。' },
|
||
];
|
||
|
||
const LandingPage: React.FC = () => {
|
||
const navigate = useNavigate();
|
||
const [currentSlide, setCurrentSlide] = useState(0);
|
||
const [isPaused, setIsPaused] = useState(false);
|
||
const [mobileMenu, setMobileMenu] = useState(false);
|
||
|
||
const [banners, setBanners] = useState<AdBanner[]>(
|
||
mockAdBanners.filter(b => b.status === 'active')
|
||
);
|
||
const publishedApps = mockApps.filter(a => a.status === 'published');
|
||
const topSkills = [...publishedApps].sort((a, b) => b.installCount - a.installCount).slice(0, 5);
|
||
|
||
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, 4500);
|
||
return () => clearInterval(timer);
|
||
}, [banners.length, isPaused, nextSlide]);
|
||
|
||
// 精选推荐：对接平台「广告位」能力——拉取后台已上架(active)的真实广告轮播；
|
||
// 无数据或接口异常时回退到内置示例，保证首屏不空。
|
||
useEffect(() => {
|
||
let alive = true;
|
||
fetch('/app/api/market/ads')
|
||
.then(r => (r.ok ? r.json() : Promise.reject(r.status)))
|
||
.then((rows: any[]) => {
|
||
if (!alive || !Array.isArray(rows) || rows.length === 0) return;
|
||
const mapped: AdBanner[] = rows.map(a => ({
|
||
id: a.id,
|
||
title: a.title,
|
||
imageUrl: a.image_url || '',
|
||
linkAppId: a.link_app_id || undefined,
|
||
linkAppName: a.link_app_name || undefined,
|
||
sortOrder: a.sort_order ?? 0,
|
||
clickCount: a.click_count ?? 0,
|
||
status: (a.status as 'active' | 'inactive') || 'active',
|
||
createdAt: a.created_at || '',
|
||
}));
|
||
setBanners(mapped);
|
||
setCurrentSlide(0);
|
||
})
|
||
.catch(() => { /* 静默失败，保留 mock 回退 */ });
|
||
return () => { alive = false; };
|
||
}, []);
|
||
|
||
// SEO / GEO：动态写入标题与描述
|
||
useEffect(() => {
|
||
document.title = '七虎AI · 个人体验 AI、办公提效与 AI 创收的一站式平台';
|
||
let meta = document.querySelector('meta[name="description"]');
|
||
if (!meta) { meta = document.createElement('meta'); meta.setAttribute('name', 'description'); document.head.appendChild(meta); }
|
||
meta.setAttribute('content', '七虎AI 是面向个人与职场用户的 AI 平台：低价订阅无限 Token、垂直办公模板、可交易技能市场、AI 创作试炼场与低成本养模型，让每个人用 AI 把事做成。');
|
||
}, []);
|
||
|
||
const goLogin = () => navigate('/login');
|
||
|
||
// 点击 logo 回到首页顶部（.lp 是滚动容器，用 scrollTo 而非 window）
|
||
const goTop = () => {
|
||
const el = document.querySelector('.lp') as HTMLElement | null;
|
||
if (el) el.scrollTo({ top: 0, behavior: 'smooth' });
|
||
else window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
};
|
||
|
||
// 页内锚点导航：原生 <a href="#id"> 会触发路由跳转而非滚动，
|
||
// 故改为编程式 scrollIntoView + preventDefault，仅在 LandingPage 内部滚动容器内跳转。
|
||
const anchorClick = (id: string, after?: () => void) => (e: React.MouseEvent) => {
|
||
e.preventDefault();
|
||
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
after?.();
|
||
};
|
||
|
||
const jsonLd = {
|
||
'@context': 'https://schema.org',
|
||
'@type': 'SoftwareApplication',
|
||
name: '七虎AI',
|
||
applicationCategory: 'BusinessApplication',
|
||
operatingSystem: 'Web',
|
||
offers: { '@type': 'Offer', price: '0', priceCurrency: 'CNY' },
|
||
aggregateRating: { '@type': 'AggregateRating', ratingValue: '4.8', reviewCount: '1000' },
|
||
};
|
||
|
||
return (
|
||
<div className="lp">
|
||
{/* JSON-LD 富媒体摘要（SEO / GEO） */}
|
||
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
||
|
||
{/* 浮层玻璃顶栏 */}
|
||
<header className="lp-header glass">
|
||
<div className="lp-header-inner">
|
||
<div className="lp-brand" onClick={goTop} role="button" tabIndex={0}
|
||
onKeyDown={e => e.key === 'Enter' && goTop()} aria-label="回到顶部">
|
||
<svg width="30" height="30" viewBox="0 0 32 32" fill="none" aria-hidden>
|
||
<rect width="32" height="32" rx="8" fill="#5B5FED" />
|
||
<path d="M8 20V12l4 4 4-4v8" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
|
||
<path d="M6 22h20" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" opacity="0.5" />
|
||
</svg>
|
||
<span className="brand-name">七虎AI</span>
|
||
</div>
|
||
|
||
<nav className="lp-nav" aria-label="主导航">
|
||
<a href="#positioning" onClick={anchorClick('positioning')}>平台定位</a>
|
||
<a href="#value" onClick={anchorClick('value')}>平台价值</a>
|
||
<a href="#top" onClick={anchorClick('top')}>热门技能</a>
|
||
<a href="#market" onClick={anchorClick('market')}>应用中心</a>
|
||
<a href="#features" onClick={anchorClick('features')}>平台能力</a>
|
||
</nav>
|
||
|
||
<div className="lp-header-actions">
|
||
<button className="lp-btn lp-btn-ghost" onClick={goLogin}>登录</button>
|
||
<button className="lp-btn lp-btn-primary" onClick={goLogin}>免费注册</button>
|
||
</div>
|
||
|
||
<button className="lp-menu-toggle" aria-label="菜单" onClick={() => setMobileMenu(v => !v)}>
|
||
<Icon d={mobileMenu ? <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></> : <><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></>} size={22} />
|
||
</button>
|
||
</div>
|
||
|
||
{mobileMenu && (
|
||
<div className="lp-mobile-menu">
|
||
<a href="#positioning" onClick={anchorClick('positioning', () => setMobileMenu(false))}>平台定位</a>
|
||
<a href="#value" onClick={anchorClick('value', () => setMobileMenu(false))}>平台价值</a>
|
||
<a href="#top" onClick={anchorClick('top', () => setMobileMenu(false))}>热门技能</a>
|
||
<a href="#market" onClick={anchorClick('market', () => setMobileMenu(false))}>应用中心</a>
|
||
<a href="#features" onClick={anchorClick('features', () => setMobileMenu(false))}>平台能力</a>
|
||
<div className="lp-mobile-actions">
|
||
<button className="lp-btn lp-btn-ghost" onClick={() => { setMobileMenu(false); goLogin(); }}>登录</button>
|
||
<button className="lp-btn lp-btn-primary" onClick={() => { setMobileMenu(false); goLogin(); }}>免费注册</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</header>
|
||
|
||
<main>
|
||
{/* Hero：左=标题文案(1/3)，右=精选推荐广告位(2/3) */}
|
||
<section className="lp-hero">
|
||
<div className="lp-hero-grid">
|
||
<div className="lp-hero-text">
|
||
<h1 className="lp-title">让每个人都能<br /><span className="lp-accent">用 AI 把事做成</span></h1>
|
||
<p className="lp-desc">
|
||
七虎AI 是个人体验 AI、办公提效、AI 创收与自我提升的一站式交互平台。
|
||
提供垂直可用的办公模板、可交易的市场与低成本养模型能力，帮你把 AI 用进日常。
|
||
</p>
|
||
<div className="lp-actions">
|
||
<button className="lp-btn lp-btn-primary lp-btn-lg" onClick={goLogin}>免费开始使用</button>
|
||
<button className="lp-btn lp-btn-outline lp-btn-lg" onClick={anchorClick('market')}>浏览应用中心</button>
|
||
</div>
|
||
<div className="lp-stats">
|
||
<div><span className="lp-stat-num">3,500+</span><span className="lp-stat-label">活跃用户</span></div>
|
||
<div><span className="lp-stat-num">120+</span><span className="lp-stat-label">应用 / Skills</span></div>
|
||
<div><span className="lp-stat-num">99.8%</span><span className="lp-stat-label">服务可用率</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Hero 右侧：精选推荐广告位（占 2/3） */}
|
||
<div className="lp-hero-ad">
|
||
{banners.length > 0 && (
|
||
<div className="lp-ad-head">
|
||
<span className="lp-ad-title">精选推荐</span>
|
||
</div>
|
||
)}
|
||
<div className="lp-carousel" onMouseEnter={() => setIsPaused(true)} onMouseLeave={() => setIsPaused(false)}>
|
||
<div className="lp-track" style={{ transform: `translateX(-${currentSlide * 100}%)` }}>
|
||
{banners.map(b => (
|
||
<div key={b.id} className="lp-slide">
|
||
<div className="lp-carousel-card" style={{ background: gradFor(b.linkAppId || 'a1') }}>
|
||
{b.imageUrl && (<><img className="lp-cc-cover" src={b.imageUrl} alt={b.title} loading="lazy" /><span className="lp-cc-scrim" /></>)}
|
||
<div className="lp-cc-content">
|
||
<div className="lp-cc-badge">推荐</div>
|
||
<h3 className="lp-cc-title">{b.title}</h3>
|
||
{b.linkAppName && <p className="lp-cc-sub">立即体验 {b.linkAppName}</p>}
|
||
<button className="lp-cc-cta" onClick={goLogin}>查看详情 <Icon d={<polyline points="9 18 15 12 9 6" />} size={14} /></button>
|
||
</div>
|
||
{!b.imageUrl && <div className="lp-cc-visual"><span className="c1" /><span className="c2" /><span className="c3" /></div>}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
{banners.length > 1 && (
|
||
<>
|
||
<button className="lp-arrow lp-arrow-l" onClick={() => setCurrentSlide(p => (p - 1 + banners.length) % banners.length)} aria-label="上一张"><Icon d={<polyline points="15 18 9 12 15 6" />} size={20} /></button>
|
||
<button className="lp-arrow lp-arrow-r" onClick={nextSlide} aria-label="下一张"><Icon d={<polyline points="9 18 15 12 9 6" />} size={20} /></button>
|
||
<div className="lp-dots">{banners.map((_, i) => (<button key={i} className={`lp-dot ${i === currentSlide ? 'on' : ''}`} onClick={() => setCurrentSlide(i)} aria-label={`第${i + 1}张`} />))}</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 平台定位（痛点） */}
|
||
<section className="lp-section" id="positioning">
|
||
<div className="lp-inner">
|
||
<div className="lp-section-head">
|
||
<h2 className="lp-h2">我们解决什么</h2>
|
||
<p className="lp-sub">七虎AI 帮你绕过个人与职场使用 AI 时最高频的痛点</p>
|
||
</div>
|
||
<div className="lp-grid lp-grid-4">
|
||
{painPoints.map((p, i) => (
|
||
<article key={i} className="lp-pain">
|
||
<div className="lp-pain-icon"><Icon d={p.d} size={24} /></div>
|
||
<h3 className="lp-pain-title">{p.title}</h3>
|
||
<p className="lp-pain-desc">{p.desc}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 平台价值 */}
|
||
<section className="lp-section lp-section-alt" id="value">
|
||
<div className="lp-inner">
|
||
<div className="lp-section-head">
|
||
<h2 className="lp-h2">在七虎AI 你能获得</h2>
|
||
<p className="lp-sub">降低订阅成本、提供无限 Token、垂直模板与可交易市场</p>
|
||
</div>
|
||
<div className="lp-grid lp-grid-5">
|
||
{valueProps.map((v, i) => (
|
||
<article key={i} className="lp-value">
|
||
<div className="lp-value-icon"><Icon d={v.d} size={24} /></div>
|
||
<h3 className="lp-value-title">{v.kw ? <>{v.title.replace(v.kw, '')}<span className="kw"> {v.kw}</span></> : v.title}</h3>
|
||
<p className="lp-value-desc">{v.desc}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 热门技能榜 Top5 */}
|
||
<section className="lp-section" id="top">
|
||
<div className="lp-inner">
|
||
<div className="lp-section-head">
|
||
<h2 className="lp-h2">热门技能榜 · Top 5</h2>
|
||
<p className="lp-sub">涵盖 Skills、Agent、MCP Client，按下载 / 安装量排行，看看大家都在用哪些能力</p>
|
||
</div>
|
||
<ol className="lp-rank">
|
||
{topSkills.map((app, i) => (
|
||
<li key={app.id} className="lp-rank-item" onClick={goLogin} role="button" tabIndex={0}
|
||
onKeyDown={e => e.key === 'Enter' && goLogin()}>
|
||
<span className={`lp-rank-no ${i === 0 ? 'top' : ''}`}>{i + 1}</span>
|
||
<span className="lp-rank-cover" style={{ background: gradFor(app.id) }}>
|
||
<span className={`lp-rank-badge ${typeBadge[app.type]}`}>{typeLabels[app.type]}</span>
|
||
</span>
|
||
<span className="lp-rank-main">
|
||
<span className="lp-rank-name">{app.name}</span>
|
||
<span className="lp-rank-desc">{app.description}</span>
|
||
</span>
|
||
<span className="lp-rank-meta">
|
||
<span className="lp-rank-installs"><Icon d={<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" />} size={13} /> {app.installCount.toLocaleString()}</span>
|
||
<span className="lp-rank-rating">{(app.ratingAvg > 0 ? app.ratingAvg : '—')}</span>
|
||
</span>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 应用中心预览 */}
|
||
<section className="lp-section lp-section-alt" id="market">
|
||
<div className="lp-inner">
|
||
<div className="lp-section-head">
|
||
<h2 className="lp-h2">应用中心</h2>
|
||
<p className="lp-sub">平台为订阅会员提供的免费 AI 应用，帮你快速进入创作与工作场景</p>
|
||
</div>
|
||
<div className="lp-app-grid">
|
||
{publishedApps.map(app => (
|
||
<article key={app.id} className="lp-app-card" onClick={goLogin} role="button" tabIndex={0}
|
||
onKeyDown={e => e.key === 'Enter' && goLogin()}>
|
||
<div className="lp-app-cover" style={{ background: gradFor(app.id) }}>
|
||
<span className={`lp-app-badge ${typeBadge[app.type]}`}>{typeLabels[app.type]}</span>
|
||
<span className="lp-app-price">会员免费</span>
|
||
</div>
|
||
<div className="lp-app-body">
|
||
<h4 className="lp-app-name">{app.name}</h4>
|
||
<p className="lp-app-desc">{app.description}</p>
|
||
<div className="lp-app-meta">
|
||
<span><Icon d={<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" />} size={12} /> {app.ratingAvg > 0 ? app.ratingAvg : '-'}</span>
|
||
<span>{app.installCount.toLocaleString()} 次安装</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
<div className="lp-more">
|
||
<button className="lp-btn lp-btn-outline" onClick={goLogin}>登录查看更多应用 <Icon d={<polyline points="9 18 15 12 9 6" />} size={14} /></button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 平台能力 */}
|
||
<section className="lp-section" id="features">
|
||
<div className="lp-inner">
|
||
<div className="lp-section-head">
|
||
<h2 className="lp-h2">平台核心能力</h2>
|
||
<p className="lp-sub">从对话到自动化，七虎AI 提供完整的 AI 工作流解决方案</p>
|
||
</div>
|
||
<div className="lp-grid lp-grid-3">
|
||
{features.map((f, i) => (
|
||
<article key={i} className="lp-feature">
|
||
<div className="lp-feature-icon"><Icon d={f.d} size={26} /></div>
|
||
<h3 className="lp-feature-title">{f.title}</h3>
|
||
<p className="lp-feature-desc">{f.desc}</p>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA */}
|
||
<section className="lp-cta">
|
||
<div className="lp-inner">
|
||
<h2 className="lp-cta-title">准备好开始了吗？</h2>
|
||
<p className="lp-cta-desc">免费注册即可体验全部功能，无需任何技术背景</p>
|
||
<button className="lp-btn lp-btn-primary lp-btn-lg" onClick={goLogin}>免费注册，立即体验</button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
{/* Footer（SEO 链接 + 富媒体） */}
|
||
<footer className="lp-footer">
|
||
<div className="lp-inner">
|
||
<div className="lp-footer-grid">
|
||
<div className="lp-footer-brand">
|
||
<div className="lp-brand" onClick={goTop} role="button" tabIndex={0}
|
||
onKeyDown={e => e.key === 'Enter' && goTop()} aria-label="回到顶部">
|
||
<svg width="26" height="26" viewBox="0 0 32 32" fill="none" aria-hidden>
|
||
<rect width="32" height="32" rx="8" fill="#5B5FED" />
|
||
<path d="M8 20V12l4 4 4-4v8" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
|
||
</svg>
|
||
<span className="brand-name">七虎AI</span>
|
||
</div>
|
||
<p>个人体验 AI、办公提效与 AI 创收的一站式平台。</p>
|
||
</div>
|
||
<div className="lp-footer-col"><h4>产品</h4><a href="#features" onClick={anchorClick('features')}>AI 聊天</a><a href="#market" onClick={anchorClick('market')}>应用中心</a><a href="#value" onClick={anchorClick('value')}>技能交易</a></div>
|
||
<div className="lp-footer-col"><h4>资源</h4><a href="#top" onClick={anchorClick('top')}>热门技能</a><a href="#positioning" onClick={anchorClick('positioning')}>平台定位</a><a onClick={goLogin} role="button">帮助中心</a></div>
|
||
<div className="lp-footer-col"><h4>公司</h4><a onClick={goLogin} role="button">关于我们</a><a onClick={goLogin} role="button">联系我们</a><a onClick={goLogin} role="button">加入我们</a></div>
|
||
</div>
|
||
<div className="lp-footer-bottom">© 2026 七虎AI · 让每个人都能用 AI 把事做成</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default LandingPage;
|