Commit b030eef7 authored by xuchentao's avatar xuchentao

refactor: optimize homepage hero platform flow

parent da00dc22
--- ---
const items = ["豆包", "通义千问", "DeepSeek", "百度AI", "文心一言", "Kimi", "腾讯元宝", "抖音搜索", "小红书搜索"]; const platforms = {
douyin: { name: "抖音搜索", color: "#161823", glow: "rgba(22,24,35,.12)" },
xiaohongshu: { name: "小红书搜索", color: "#FF2442", glow: "rgba(255,36,66,.14)" },
doubao: { name: "豆包", color: "#2F6BFF", glow: "rgba(47,107,255,.14)" },
qwen: { name: "通义千问", color: "#6F5BFF", glow: "rgba(111,91,255,.14)" },
deepseek: { name: "DeepSeek", color: "#4D6BFE", glow: "rgba(77,107,254,.14)" },
kimi: { name: "Kimi", color: "#111827", glow: "rgba(17,24,39,.11)" },
yuanbao: { name: "腾讯元宝", color: "#0052D9", glow: "rgba(0,82,217,.14)" },
baidu: { name: "百度AI", color: "#2932E1", glow: "rgba(41,50,225,.14)" },
wenxin: { name: "文心一言", color: "#2468F2", glow: "rgba(36,104,242,.14)" },
};
const rows = [
[platforms.douyin, platforms.xiaohongshu, platforms.doubao, platforms.qwen, platforms.deepseek],
[platforms.kimi, platforms.yuanbao, platforms.baidu, platforms.wenxin, platforms.xiaohongshu],
[platforms.deepseek, platforms.doubao, platforms.douyin, platforms.qwen, platforms.kimi],
[platforms.wenxin, platforms.yuanbao, platforms.xiaohongshu, platforms.baidu, platforms.deepseek],
];
--- ---
<div class="platform-strip" aria-label="覆盖平台"> <div class="platform-flow" role="img" aria-label="覆盖抖音搜索、小红书搜索、豆包、通义千问、DeepSeek等主流AI与社媒搜索平台">
<div class="platform-strip__track">{[...items, ...items].map((item) => <span><i></i>{item}</span>)}</div> {rows.map((row, rowIndex) => (
<div class:list={["platform-flow__row", { "platform-flow__row--reverse": rowIndex % 2 === 1 }]}>
<div class="platform-flow__track">
{[false, true].map(() => (
<div class="platform-flow__group" aria-hidden="true">
{row.map((item) => <span class="platform-flow__item" style={`--platform-color:${item.color};--platform-glow:${item.glow}`}>{item.name}</span>)}
</div>
))}
</div>
</div>
))}
</div> </div>
...@@ -15,7 +15,6 @@ export const site = { ...@@ -15,7 +15,6 @@ export const site = {
industry: "GEO · SMO · AI 全域搜索优化", industry: "GEO · SMO · AI 全域搜索优化",
}, },
home: { home: {
eyebrow: "GEO + SMO 双引擎",
headline: "让品牌被每一个搜索看见", headline: "让品牌被每一个搜索看见",
subhead: subhead:
"全栈自研技术的全域搜索优化与大数据分析服务商。以智引未来GEO与智引未来SMO为双引擎,帮助企业建立从品牌诊断、策略制定到持续增长的搜索获客闭环。", "全栈自研技术的全域搜索优化与大数据分析服务商。以智引未来GEO与智引未来SMO为双引擎,帮助企业建立从品牌诊断、策略制定到持续增长的搜索获客闭环。",
......
...@@ -32,10 +32,8 @@ const jsonLd = { ...@@ -32,10 +32,8 @@ const jsonLd = {
<Header /> <Header />
<main id="main-content"> <main id="main-content">
<section class="hero"> <section class="hero">
<div class="hero-grid-glow"></div>
<div class="container hero__grid"> <div class="container hero__grid">
<div class="hero__content" data-reveal> <div class="hero__content" data-reveal>
<div class="hero-pill"><span></span>{site.home.eyebrow}<i>全域搜索优化</i></div>
<h1>智引未来,让品牌<br /><em>被每一个搜索看见</em></h1> <h1>智引未来,让品牌<br /><em>被每一个搜索看见</em></h1>
<p>{site.home.subhead}</p> <p>{site.home.subhead}</p>
<div class="hero__actions"> <div class="hero__actions">
...@@ -44,23 +42,8 @@ const jsonLd = { ...@@ -44,23 +42,8 @@ const jsonLd = {
</div> </div>
<div class="hero__proof"><span>真实搜索数据</span><span>双引擎协同</span><span>白盒化效果</span></div> <div class="hero__proof"><span>真实搜索数据</span><span>双引擎协同</span><span>白盒化效果</span></div>
</div> </div>
<div class="hero-visual" data-reveal aria-label="全域搜索数据分析示意图"> <div class="hero-platform-flow" data-reveal><ProductCarousel /></div>
<div class="visual-orbit visual-orbit--one"></div><div class="visual-orbit visual-orbit--two"></div>
<div class="search-card">
<div class="search-card__top"><div class="search-brand"><span class="search-brand__mark">AI</span><div><strong>品牌全域可见度</strong><small>实时监测概览</small></div></div><span class="live-dot">LIVE</span></div>
<div class="score-ring"><div><strong>86</strong><span>综合指数</span></div></div>
<div class="metric-list">
<div><span>AI 提及覆盖</span><i><b style="width:82%"></b></i><strong>82%</strong></div>
<div><span>引用可信度</span><i><b style="width:74%"></b></i><strong>74%</strong></div>
<div class="metric-list__green"><span>社媒搜索力</span><i><b style="width:91%"></b></i><strong>91%</strong></div>
</div>
<div class="trend-card"><div><span>搜索增长趋势</span><strong>+24.8%</strong></div><svg viewBox="0 0 320 88" role="img" aria-label="增长趋势折线"><defs><linearGradient id="area" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#19C7C4" stop-opacity=".3"/><stop offset="1" stop-color="#19C7C4" stop-opacity="0"/></linearGradient></defs><path class="trend-area" d="M2,74 C40,68 44,55 76,58 S116,74 151,49 S206,47 235,27 S278,34 318,8 L318,88 L2,88Z"/><path class="trend-line" d="M2,74 C40,68 44,55 76,58 S116,74 151,49 S206,47 235,27 S278,34 318,8"/></svg></div>
</div>
<div class="float-card float-card--geo"><span>GEO</span><div><strong>AI引用新增</strong><small>品牌知识被持续理解</small></div><b>+18</b></div>
<div class="float-card float-card--smo"><span>SMO</span><div><strong>搜索排名上升</strong><small>高价值问题持续覆盖</small></div><b>↑ 12</b></div>
</div>
</div> </div>
<div class="container hero-platforms"><span>覆盖主流AI与社媒搜索场景</span><ProductCarousel /></div>
</section> </section>
<section class="stat-band stat-band--light"><div class="container stat-grid">{site.home.stats.map((stat) => <div data-reveal><strong>{stat.value}</strong><p>{stat.label}</p></div>)}</div></section> <section class="stat-band stat-band--light"><div class="container stat-grid">{site.home.stats.map((stat) => <div data-reveal><strong>{stat.value}</strong><p>{stat.label}</p></div>)}</div></section>
...@@ -71,10 +54,9 @@ const jsonLd = { ...@@ -71,10 +54,9 @@ const jsonLd = {
<div class="engine-grid"> <div class="engine-grid">
{site.services.slice(0, 2).map((service) => <article class:list={["engine-card", `engine-card--${service.type}`]} data-reveal> {site.services.slice(0, 2).map((service) => <article class:list={["engine-card", `engine-card--${service.type}`]} data-reveal>
<div class="engine-card__head"><span class="service-index">{service.index}</span><span class="service-badge">{service.type.toUpperCase()}</span></div> <div class="engine-card__head"><span class="service-index">{service.index}</span><span class="service-badge">{service.type.toUpperCase()}</span></div>
<div class="engine-icon" aria-hidden="true">{service.type === "geo" ? "◎" : "↗"}</div>
<p class="engine-card__kicker">{service.kicker}</p><h2>{service.name}</h2><p>{service.intro}</p> <p class="engine-card__kicker">{service.kicker}</p><h2>{service.name}</h2><p>{service.intro}</p>
<ul>{service.features.slice(0, 2).map((feature) => <li><span>✓</span>{feature}</li>)}</ul> <ul>{service.features.slice(0, 2).map((feature) => <li>{feature}</li>)}</ul>
<a href={`/services/${service.slug}/`}>了解{service.type.toUpperCase()}服务 <span>↗</span></a> <a href={`/services/${service.slug}/`}>了解{service.type.toUpperCase()}服务</a>
</article>)} </article>)}
</div> </div>
<div class="support-service-grid">{site.services.slice(2).map((service) => <a href={`/services/${service.slug}/`} data-reveal> <div class="support-service-grid">{site.services.slice(2).map((service) => <a href={`/services/${service.slug}/`} data-reveal>
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment