Skip to content

Commit 35a91aa

Browse files
AparenciaAparencia
committed
feat(website): add reusable feature page template sections
1 parent 82e3c07 commit 35a91aa

6 files changed

Lines changed: 263 additions & 0 deletions

File tree

‎website/components/feature/FeatureHero.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// @ai-context
2+
// 功能页 Hero 区：眉题、主标题、副题、演示插槽与主 CTA。
3+
// Feature hero: eyebrow, title, subtitle, demo slot and primary CTA.
4+
"use client";
5+
6+
import Link from "next/link";
7+
import type { ReactNode } from "react";
8+
import { GlowOrb } from "@/components/GlowOrb";
9+
import { SectionReveal } from "@/components/SectionReveal";
10+
11+
interface FeatureHeroProps {
12+
eyebrow: string;
13+
title: string;
14+
subtitle: string;
15+
ctaText: string;
16+
ctaHref?: string;
17+
/** 可玩演示插槽（如 ChronosDemo） */
18+
demo?: ReactNode;
19+
}
20+
21+
export function FeatureHero({ eyebrow, title, subtitle, ctaText, ctaHref = "/download", demo }: FeatureHeroProps) {
22+
return (
23+
<header className="relative text-center px-6 mb-24">
24+
<GlowOrb count={10} className="opacity-40" />
25+
<SectionReveal>
26+
<p className="text-sm tracking-[0.35em] text-kb-text3 uppercase mb-5">{eyebrow}</p>
27+
<h1 className="font-serif text-4xl sm:text-5xl font-bold text-kb-text mb-6">{title}</h1>
28+
<p className="text-kb-text2 max-w-lg mx-auto leading-relaxed mb-10">{subtitle}</p>
29+
</SectionReveal>
30+
{demo && <SectionReveal delay={0.1}>{demo}</SectionReveal>}
31+
<SectionReveal delay={0.15}>
32+
<Link
33+
href={ctaHref}
34+
className="inline-block px-10 py-4 rounded-2xl text-white font-medium text-lg transition-all duration-500 hover:scale-[1.05] active:scale-[0.97]"
35+
style={{
36+
background: "linear-gradient(135deg, var(--kb-amber), var(--kb-accent-400))",
37+
boxShadow: "var(--kb-shadow-accent)",
38+
}}
39+
>
40+
{ctaText}
41+
</Link>
42+
</SectionReveal>
43+
</header>
44+
);
45+
}

‎website/components/feature/FeatureMechanics.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// @ai-context
2+
// 功能页机制讲解区：卡片网格，onSelect 回调联动中央演示。
3+
// Feature mechanics grid with select callback.
4+
"use client";
5+
6+
import type { FeatureMechanicsItem } from "@/lib/features/types";
7+
import { SectionReveal } from "@/components/SectionReveal";
8+
9+
interface FeatureMechanicsProps {
10+
title: string;
11+
hint?: string;
12+
items: FeatureMechanicsItem[];
13+
onSelect?: (index: number) => void;
14+
}
15+
16+
export function FeatureMechanics({ title, hint, items, onSelect }: FeatureMechanicsProps) {
17+
return (
18+
<section className="max-w-4xl mx-auto px-6 mb-24">
19+
<SectionReveal className="text-center mb-12">
20+
<h2 className="font-serif text-2xl sm:text-3xl font-bold text-kb-text mb-3">{title}</h2>
21+
{hint && <p className="text-kb-text2 text-sm">{hint}</p>}
22+
</SectionReveal>
23+
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
24+
{items.map((item, i) => (
25+
<SectionReveal key={item.key ?? item.name} delay={i * 0.06}>
26+
<button
27+
type="button"
28+
onClick={() => onSelect?.(i)}
29+
className="w-full h-full text-left rounded-3xl p-6 transition-all duration-500 hover:-translate-y-1 cursor-pointer"
30+
style={{
31+
background: "var(--kb-bg-elevated)",
32+
border: "1px solid var(--kb-glass-border)",
33+
boxShadow: "var(--kb-shadow-card)",
34+
}}
35+
>
36+
<span className="text-2xl">{item.icon}</span>
37+
<h3 className="font-serif text-lg font-semibold text-kb-text mt-3 mb-2">{item.name}</h3>
38+
<p className="text-sm text-kb-text2 leading-relaxed">{item.desc}</p>
39+
</button>
40+
</SectionReveal>
41+
))}
42+
</div>
43+
</section>
44+
);
45+
}

‎website/components/feature/FeatureOutcome.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// @ai-context
2+
// 功能页结果可视化区：标题 + 描述 + Mockup 插槽。
3+
// Feature outcome section with mockup slot.
4+
"use client";
5+
6+
import type { ReactNode } from "react";
7+
import { SectionReveal } from "@/components/SectionReveal";
8+
9+
export function FeatureOutcome({
10+
title,
11+
desc,
12+
children,
13+
}: {
14+
title: string;
15+
desc: string;
16+
children: ReactNode;
17+
}) {
18+
return (
19+
<section className="max-w-4xl mx-auto px-6 mb-24">
20+
<SectionReveal className="text-center mb-12">
21+
<h2 className="font-serif text-2xl sm:text-3xl font-bold text-kb-text mb-3">{title}</h2>
22+
<p className="text-kb-text2 text-sm max-w-md mx-auto leading-relaxed">{desc}</p>
23+
</SectionReveal>
24+
<SectionReveal delay={0.1}>{children}</SectionReveal>
25+
</section>
26+
);
27+
}

‎website/components/feature/FeatureScenes.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// @ai-context
2+
// 功能页场景共鸣区：三列场景卡（节律 + 叙事）。
3+
// Feature scenes: rhythm cards with scenario storytelling.
4+
"use client";
5+
6+
import type { FeatureSceneItem } from "@/lib/features/types";
7+
import { SectionReveal } from "@/components/SectionReveal";
8+
9+
export function FeatureScenes({ title, items }: { title: string; items: FeatureSceneItem[] }) {
10+
return (
11+
<section className="max-w-4xl mx-auto px-6 mb-24">
12+
<SectionReveal className="text-center mb-12">
13+
<h2 className="font-serif text-2xl sm:text-3xl font-bold text-kb-text mb-3">{title}</h2>
14+
</SectionReveal>
15+
<div className="grid sm:grid-cols-3 gap-5">
16+
{items.map((item, i) => (
17+
<SectionReveal key={item.name} delay={i * 0.08}>
18+
<div
19+
className="rounded-3xl p-7 h-full text-center"
20+
style={{
21+
background: "var(--kb-bg-elevated)",
22+
border: "1px solid var(--kb-glass-border)",
23+
boxShadow: "var(--kb-shadow-card)",
24+
}}
25+
>
26+
<span className="font-mono text-sm font-bold" style={{ color: "var(--kb-brand-400)" }}>
27+
{item.rhythm}
28+
</span>
29+
<h3 className="font-serif text-lg font-semibold text-kb-text my-3">{item.name}</h3>
30+
<p className="text-sm text-kb-text2 leading-relaxed">{item.story}</p>
31+
</div>
32+
</SectionReveal>
33+
))}
34+
</div>
35+
</section>
36+
);
37+
}

‎website/components/feature/FeatureScience.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// @ai-context
2+
// 功能页科学依据区：要点列表。
3+
// Feature science points list.
4+
"use client";
5+
6+
import { SectionReveal } from "@/components/SectionReveal";
7+
8+
export function FeatureScience({ title, points }: { title: string; points: string[] }) {
9+
return (
10+
<section className="max-w-2xl mx-auto px-6 mb-24">
11+
<SectionReveal className="text-center mb-12">
12+
<h2 className="font-serif text-2xl sm:text-3xl font-bold text-kb-text mb-3">{title}</h2>
13+
</SectionReveal>
14+
<div className="space-y-5">
15+
{points.map((point, i) => (
16+
<SectionReveal key={i} delay={i * 0.08}>
17+
<div
18+
className="flex gap-3.5 items-start rounded-2xl p-5"
19+
style={{ background: "var(--kb-bg-tertiary)" }}
20+
>
21+
<span
22+
className="mt-1 w-1.5 h-1.5 rounded-full shrink-0"
23+
style={{ background: "var(--kb-cyber-cyan)" }}
24+
/>
25+
<p className="text-sm text-kb-text2 leading-relaxed">{point}</p>
26+
</div>
27+
</SectionReveal>
28+
))}
29+
</div>
30+
</section>
31+
);
32+
}

‎website/components/feature/FeatureTrust.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
// @ai-context
2+
// 功能页信任收口（全站共享）：无锁承诺条、真实用户证据（无则如实说明）、开发者手记入口。
3+
// Shared trust section: no-lock promises, honest user evidence, dev journal entry.
4+
"use client";
5+
6+
import { SectionReveal } from "@/components/SectionReveal";
7+
8+
const PROMISES = [
9+
"免费 · 无隐藏付费墙",
10+
"开源 · 代码可审计",
11+
"数据只在你电脑上",
12+
"可随时导出带走",
13+
];
14+
15+
export function FeatureTrust() {
16+
return (
17+
<section className="max-w-3xl mx-auto px-6 mb-24">
18+
<SectionReveal className="text-center mb-12">
19+
<h2 className="font-serif text-2xl sm:text-3xl font-bold text-kb-text mb-3">你的世界，只属于你</h2>
20+
<p className="text-kb-text2 text-sm">记忆主权，是熵减的第一承诺</p>
21+
</SectionReveal>
22+
23+
{/* 无锁承诺条 */}
24+
<SectionReveal delay={0.05}>
25+
<div
26+
className="rounded-3xl p-8 mb-8"
27+
style={{
28+
background: "var(--kb-bg-elevated)",
29+
border: "1px solid var(--kb-glass-border)",
30+
boxShadow: "var(--kb-shadow-card)",
31+
}}
32+
>
33+
<ul className="grid sm:grid-cols-2 gap-4 text-sm text-kb-text2">
34+
{PROMISES.map((p) => (
35+
<li key={p} className="flex items-center gap-2.5">
36+
<span
37+
className="w-1.5 h-1.5 rounded-full shrink-0"
38+
style={{ background: "var(--kb-moss-green)" }}
39+
/>
40+
{p}
41+
</li>
42+
))}
43+
</ul>
44+
</div>
45+
</SectionReveal>
46+
47+
{/* 用户证据：只展示真实反馈，暂无则如实说明（红线：不虚构） */}
48+
<SectionReveal delay={0.1}>
49+
<div
50+
className="rounded-3xl p-8 text-center"
51+
style={{ background: "var(--kb-bg-tertiary)" }}
52+
>
53+
<p className="text-kb-text2 text-sm leading-relaxed">
54+
内测进行中，首批反馈正在沉淀。
55+
<br />
56+
我们只展示真实的声音——等你来写下第一条。
57+
</p>
58+
</div>
59+
</SectionReveal>
60+
61+
{/* 开发手记入口 */}
62+
<SectionReveal delay={0.15}>
63+
<div className="text-center mt-10">
64+
<p className="text-sm text-kb-text2 mb-4">一个人，认真地做了三年。</p>
65+
<a
66+
href="https://github.com/Aparencia/Entropydecrease"
67+
target="_blank"
68+
rel="noopener noreferrer"
69+
className="inline-flex items-center gap-2 text-kb-brand font-medium transition-all duration-400 hover:gap-3.5"
70+
>
71+
GitHub 仓库 · 开发全程公开 ↗
72+
</a>
73+
</div>
74+
</SectionReveal>
75+
</section>
76+
);
77+
}

0 commit comments

Comments
 (0)