Skip to content

Commit 0b022eb

Browse files
jnMetaCodejnMetaCode
committed
feat(landing): convert hero/trilogy/CTA toward reader conversion
- Hero subtitle: replace manifesto with concrete differentiators (6 轮源码追踪 / 31 真实陷阱 / 10 工具实战) - Hero stats: switch from author metrics (Repos/Stars/Agents) to reader gain (10 Tools / 31 Pitfalls / 28 Chapters) - Trilogy: tabs → 3-column grid so all 3 volumes visible at glance - Open source: ★ FLAGSHIP badge + larger title on agency-agents-zh - Bottom CTA: 下一篇见 farewell → 读三卷书·把 AI 用对 with direct /book/ link - Fix stale 211 → 215 agent count in REPOS data - Add cache-buster ?v= on landing assets to avoid stale CSS/JSX during dev
1 parent f1f3212 commit 0b022eb

3 files changed

Lines changed: 102 additions & 104 deletions

File tree

‎landing/app.jsx‎

Lines changed: 41 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -209,9 +209,9 @@ function Hero(){
209209
<SplitTitle html={'AI <span class="accent">不止</span><br/><span class="stroke">于</span>语。'}/>
210210
<FadeUp delay={2}>
211211
<p className="hero-sub">
212-
AI 编程工具迭代极快，方法论永生。
213-
<strong>记录踩过的坑、能复用的工作流，</strong>
214-
把好东西整理成书、做成开源、写成清单。
212+
工具会过时，方法论不会。
213+
<strong>6 轮源码追踪、31 个真实陷阱、10 工具实战，</strong>
214+
全部写成三卷书 · 读源码核实 · 永久免费。
215215
给真心想用 AI 把活儿干好的人。
216216
</p>
217217
</FadeUp>
@@ -226,16 +226,16 @@ function Hero(){
226226
</div>
227227
<div className="hero-side">
228228
<FadeUp delay={2} className="stat-card">
229-
<div className="stat-num"><CountUp to={109}/><span className="plus">+</span></div>
230-
<div className="stat-label"><span className="k">Repos</span>开源仓库</div>
229+
<div className="stat-num"><CountUp to={10}/><span className="plus">+</span></div>
230+
<div className="stat-label"><span className="k">Tools</span>AI 编程工具实测</div>
231231
</FadeUp>
232232
<FadeUp delay={3} className="stat-card">
233-
<div className="stat-num"><CountUp to={10700}/><span className="plus">+</span></div>
234-
<div className="stat-label"><span className="k">Stars</span>社区累计星标</div>
233+
<div className="stat-num"><CountUp to={31}/><span className="plus">+</span></div>
234+
<div className="stat-label"><span className="k">Pitfalls</span>真实陷阱解析</div>
235235
</FadeUp>
236236
<FadeUp delay={4} className="stat-card">
237-
<div className="stat-num"><CountUp to={211}/><span className="plus">+</span></div>
238-
<div className="stat-label"><span className="k">Agents</span>专家角色矩阵</div>
237+
<div className="stat-num"><CountUp to={28}/><span className="plus">+</span></div>
238+
<div className="stat-label"><span className="k">Chapters</span>三卷书章数</div>
239239
</FadeUp>
240240
<FadeUp delay={4}>
241241
<Terminal/>
@@ -296,8 +296,6 @@ const TRILOGY = [
296296
];
297297

298298
function Trilogy(){
299-
const [i, setI] = useState(0);
300-
const t = TRILOGY[i];
301299
return (
302300
<section id="products">
303301
<div className="container">
@@ -315,31 +313,31 @@ function Trilogy(){
315313
</div>
316314
</div>
317315

318-
<FadeUp className="trilogy">
319-
<div className="tri-tabs">
320-
{TRILOGY.map((x, idx) => (
321-
<button key={x.num} className={`tri-tab ${i===idx?'active':''}`} onClick={()=>setI(idx)}>
322-
<span className="num">VOL · {x.num}</span>
323-
<span className="ttl">{x.tab}</span>
324-
</button>
325-
))}
326-
</div>
327-
<div className="tri-panel" key={i} style={{animation:'panelIn .5s ease'}}>
328-
<h3>{t.title}</h3>
329-
<p className="pitch">{t.pitch}</p>
330-
<ul className="toc">
331-
{t.toc.map((c, ix) => (
332-
<li key={c}><span className="ix">{String(ix+1).padStart(2,'0')}</span>{c}</li>
333-
))}
334-
</ul>
335-
<div className="meta">
336-
{t.meta.map(([k,v])=>(
337-
<span key={k}>{k} · <span className="v">{v}</span></span>
338-
))}
339-
</div>
340-
</div>
341-
</FadeUp>
342-
<style>{`@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}`}</style>
316+
<div className="trilogy-grid">
317+
{TRILOGY.map((t) => (
318+
<FadeUp key={t.num} className="tri-card">
319+
<div className="tri-card-head">
320+
<span className="num">VOL · {t.num}</span>
321+
<span className="tab">{t.tab}</span>
322+
</div>
323+
<h3>{t.title.replace('三卷书 · ', '')}</h3>
324+
<p className="pitch">{t.pitch}</p>
325+
<ul className="toc">
326+
{t.toc.slice(0, 5).map((c, ix) => (
327+
<li key={c}><span className="ix">{String(ix+1).padStart(2,'0')}</span>{c}</li>
328+
))}
329+
{t.toc.length > 5 && (
330+
<li className="more">{`··· + ${t.toc.length - 5} 章`}</li>
331+
)}
332+
</ul>
333+
<div className="meta">
334+
{t.meta.map(([k,v])=>(
335+
<span key={k}>{k} · <span className="v">{v}</span></span>
336+
))}
337+
</div>
338+
</FadeUp>
339+
))}
340+
</div>
343341
</div>
344342
</section>
345343
);
@@ -350,7 +348,7 @@ function Trilogy(){
350348
const REPOS = [
351349
{
352350
name: 'agency-agents-zh',
353-
title: '211 专家角色 · 中文版',
351+
title: '215 专家角色 · 中文版',
354352
desc: '即插即用的 AI 专家角色矩阵 — 覆盖工程/设计/营销/金融 18 个部门，含 46 个中国市场原创智能体（小红书/抖音/微信/飞书/钉钉）。',
355353
star: '9.8k', lang: 'Shell', langColor: 'oklch(0.7 0.12 130)',
356354
flagship: true,
@@ -366,7 +364,7 @@ const REPOS = [
366364
{
367365
name: 'agency-orchestrator',
368366
title: '一句话 → 多 AI 协作',
369-
desc: '一句话调度 211+ 专家角色，几分钟交付完整方案。9 家 LLM / 6 家免费，零代码 YAML。',
367+
desc: '一句话调度 215+ 专家角色，几分钟交付完整方案。9 家 LLM / 6 家免费，零代码 YAML。',
370368
star: '687', lang: 'TypeScript', langColor: 'oklch(0.65 0.14 240)',
371369
href: 'https://github.com/jnMetaCode/agency-orchestrator'
372370
},
@@ -413,6 +411,7 @@ function RepoCard({ r }){
413411
};
414412
return (
415413
<a className={`repo ${r.flagship?'flagship':''}`} data-tilt="1" href={r.href} target="_blank" rel="noreferrer" onMouseMove={handleMove} onMouseLeave={handleLeave}>
414+
{r.flagship && <span className="flag-badge">★ FLAGSHIP</span>}
416415
<div className="repo-head">
417416
<i className="pulse"/> jnMetaCode / <strong>{r.name}</strong>
418417
</div>
@@ -668,12 +667,12 @@ function CTA(){
668667
<div className="cta">
669668
<div className="cta-inner">
670669
<FadeUp>
671-
<h2>下一篇，<span className="em">见。</span></h2>
672-
<p className="sub">关注公众号「AI 不止语」 · 回复 <b>"群"</b> 加入读者群 · 或在 GitHub 给个 ★。</p>
670+
<h2>读三卷书 · <span className="em">把 AI 用对。</span></h2>
671+
<p className="sub">31 真实陷阱 · 10 工具实测 · 28 章方法论 · 永久免费 · 在线 + PDF。<br/>想留个号？关注公众号「AI 不止语」回复 <b>群</b> 进读者群。</p>
673672
</FadeUp>
674673
<FadeUp delay={1} className="cta-btns">
675-
<a className="btn btn-primary" href="#channels">关注公众号 <span className="arr">→</span></a>
676-
<a className="btn btn-ghost" href="https://github.com/jnMetaCode" target="_blank" rel="noreferrer">浏览 GitHub <span className="arr">↗</span></a>
674+
<a className="btn btn-primary" href="/book/">免费开始读三卷书 <span className="arr">→</span></a>
675+
<a className="btn btn-ghost" href="#channels">关注公众号 <span className="arr">→</span></a>
677676
</FadeUp>
678677
</div>
679678
</div>

‎landing/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<link rel="preconnect" href="https://fonts.googleapis.com"/>
3333
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
3434
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;900&family=Noto+Sans+SC:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=LXGW+WenKai+TC:wght@300;400;700&display=swap" rel="stylesheet"/>
35-
<link rel="stylesheet" href="styles.css"/>
35+
<link rel="stylesheet" href="styles.css?v=20260509c"/>
3636

3737
<!-- Google Analytics 4 -->
3838
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4QDL6QMBNS"></script>
@@ -49,7 +49,7 @@
4949
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5050
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
5151
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
52-
<script type="text/babel" src="tweaks-panel.jsx"></script>
53-
<script type="text/babel" src="app.jsx"></script>
52+
<script type="text/babel" src="tweaks-panel.jsx?v=20260509c"></script>
53+
<script type="text/babel" src="app.jsx?v=20260509c"></script>
5454
</body>
5555
</html>

‎landing/styles.css‎

Lines changed: 58 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -516,89 +516,75 @@ section{padding: clamp(70px, 9vw, 120px) 0; position: relative}
516516
letter-spacing: .08em;
517517
}
518518

519-
/* ===== 三件套 Tabs ===== */
520-
.trilogy{
519+
/* ===== Trilogy Grid (3-column) ===== */
520+
.trilogy-grid{
521521
display: grid;
522-
grid-template-columns: 320px 1fr;
523-
gap: 32px;
524-
border: 1px solid var(--line);
525-
border-radius: 18px;
526-
background: var(--bg-card);
527-
padding: 8px;
522+
grid-template-columns: repeat(3, 1fr);
523+
gap: 18px;
528524
}
529-
@media (max-width: 880px){
530-
.trilogy{grid-template-columns: 1fr}
525+
@media (max-width: 980px){
526+
.trilogy-grid{grid-template-columns: repeat(2, 1fr)}
531527
}
532-
.tri-tabs{
533-
display:flex; flex-direction: column; gap: 4px;
534-
padding: 14px;
528+
@media (max-width: 640px){
529+
.trilogy-grid{grid-template-columns: 1fr}
535530
}
536-
@media (max-width: 880px){
537-
.tri-tabs{flex-direction: row; overflow-x: auto; padding: 8px}
531+
.tri-card{
532+
border: 1px solid var(--line);
533+
border-radius: 18px;
534+
background: var(--bg-card);
535+
padding: 28px 26px;
536+
display: flex; flex-direction: column; gap: 18px;
538537
}
539-
.tri-tab{
540-
text-align: left;
541-
padding: 18px;
542-
border-radius: 12px;
543-
border: none; background: transparent;
544-
cursor: pointer;
545-
font-family: inherit; color: var(--ink-2);
546-
display:flex; flex-direction: column; gap: 6px;
547-
transition: background .25s, color .25s;
548-
position: relative;
549-
font-size: 14px;
538+
.tri-card-head{
539+
display: flex; align-items: baseline; gap: 14px;
540+
border-bottom: 1px dashed var(--line-2);
541+
padding-bottom: 14px;
550542
}
551-
.tri-tab .num{
543+
.tri-card-head .num{
552544
font-family: var(--mono); font-size: 11px;
553545
color: var(--ink-4); letter-spacing: .12em;
554546
}
555-
.tri-tab .ttl{
556-
font-family: var(--serif); font-weight: 600; font-size: 19px;
557-
color: var(--ink);
558-
}
559-
.tri-tab:hover{background: var(--bg-soft)}
560-
.tri-tab.active{
561-
background: var(--ink);
562-
color: var(--bg-card);
563-
}
564-
.tri-tab.active .ttl{color: var(--bg)}
565-
.tri-tab.active .num{color: var(--accent-soft)}
566-
.tri-panel{
567-
padding: 36px 40px 36px 16px;
568-
display:flex; flex-direction: column; gap: 22px;
547+
.tri-card-head .tab{
548+
font-family: var(--serif); font-weight: 600; font-size: 18px;
549+
color: var(--accent);
569550
}
570-
.tri-panel h3{
551+
.tri-card h3{
571552
font-family: var(--serif); font-weight: 700;
572-
font-size: 32px; margin: 0;
553+
font-size: 22px; margin: 0;
573554
letter-spacing: -.01em;
574555
}
575-
.tri-panel .pitch{
556+
.tri-card .pitch{
576557
color: var(--ink-2);
577-
font-size: 16px; margin: 0;
558+
font-size: 14px; line-height: 1.7; margin: 0;
578559
}
579-
.tri-panel .toc{
580-
display: grid;
581-
grid-template-columns: repeat(2, 1fr);
582-
gap: 8px 20px;
560+
.tri-card .toc{
561+
display: flex; flex-direction: column; gap: 7px;
583562
border-top: 1px dashed var(--line-2);
584-
padding-top: 18px;
563+
padding-top: 16px;
564+
margin: 0;
585565
}
586-
.tri-panel .toc li{
587-
list-style: none; font-size: 14px;
566+
.tri-card .toc li{
567+
list-style: none; font-size: 13px;
588568
color: var(--ink-2);
589-
display:flex; gap: 10px; align-items: baseline;
569+
display: flex; gap: 10px; align-items: baseline;
570+
}
571+
.tri-card .toc li.more{
572+
font-family: var(--mono); font-size: 11px;
573+
color: var(--ink-4); padding-left: 0;
574+
margin-top: 2px;
590575
}
591-
.tri-panel .toc li .ix{
576+
.tri-card .toc li .ix{
592577
font-family: var(--mono); color: var(--ink-4); font-size: 11px;
593578
}
594-
.tri-panel .meta{
595-
display:flex; gap: 24px; flex-wrap: wrap;
596-
font-family: var(--mono); font-size: 12px;
579+
.tri-card .meta{
580+
display: flex; gap: 16px; flex-wrap: wrap;
581+
font-family: var(--mono); font-size: 11px;
597582
color: var(--ink-3);
598583
border-top: 1px solid var(--line);
599-
padding-top: 18px;
584+
padding-top: 14px;
585+
margin-top: auto;
600586
}
601-
.tri-panel .meta .v{color: var(--ink); font-weight: 600}
587+
.tri-card .meta .v{color: var(--ink); font-weight: 600}
602588

603589
/* ===== 开源矩阵 ===== */
604590
.repo-grid{
@@ -689,6 +675,19 @@ section{padding: clamp(70px, 9vw, 120px) 0; position: relative}
689675
color: oklch(0.7 0.025 75);
690676
}
691677
.repo.flagship .repo-head .pulse{background: oklch(0.75 0.16 45)}
678+
.repo.flagship h3{font-size: 28px}
679+
.flag-badge{
680+
position: absolute;
681+
top: 18px; right: 18px;
682+
font-family: var(--mono);
683+
font-size: 10px; letter-spacing: .14em; font-weight: 600;
684+
color: oklch(0.95 0.04 75);
685+
border: 1px solid oklch(0.45 0.08 50);
686+
padding: 5px 11px;
687+
border-radius: 100px;
688+
background: oklch(0.35 0.06 50);
689+
z-index: 1;
690+
}
692691

693692
/* ===== 内容渠道矩阵 ===== */
694693
.channels{

0 commit comments

Comments
 (0)