Skip to content

Commit b6ad23c

Browse files
AparenciaAparencia
committed
feat(website): add dive feature landing page with playable chronos demo
1 parent 1e6fe93 commit b6ad23c

2 files changed

Lines changed: 148 additions & 0 deletions

File tree

‎website/app/features/dive/page.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// @ai-context
2+
// 深潜功能页：SEO metadata 由 server 组件导出，页面主体为客户端组件 DivePage。
3+
// Dive feature page: SEO metadata + client page body.
4+
import type { Metadata } from "next";
5+
import { DivePage } from "@/components/dive/DivePage";
6+
7+
export const metadata: Metadata = {
8+
title: "深潜 · 会呼吸的番茄钟",
9+
description:
10+
"熵减「深潜」：把番茄钟养成一只时间生物。六态形态、场景化预设、超昼夜节律——专注本该如此。",
11+
keywords: ["番茄钟", "专注", "学习", "深潜", "时间生物", "熵减"],
12+
};
13+
14+
export default function Page() {
15+
return <DivePage />;
16+
}

‎website/components/dive/DivePage.tsx‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
// @ai-context
2+
// 深潜落地页主体：FeatureHero 承载可玩 ChronosDemo，六态卡片联动中央演示，
3+
// 复用 Feature* 模板区块渲染 dive 内容配置。
4+
// Dive landing page body.
5+
"use client";
6+
7+
import Link from "next/link";
8+
import { useState } from "react";
9+
import { DIVE_CONFIG } from "@/lib/features/dive";
10+
import { CHRONOS_STATES, type ChronosState } from "@/lib/features/chronos";
11+
import { ChronosDemo } from "./ChronosDemo";
12+
import { FeatureHero } from "@/components/feature/FeatureHero";
13+
import { FeatureMechanics } from "@/components/feature/FeatureMechanics";
14+
import { FeatureScenes } from "@/components/feature/FeatureScenes";
15+
import { FeatureOutcome } from "@/components/feature/FeatureOutcome";
16+
import { FeatureScience } from "@/components/feature/FeatureScience";
17+
import { FeatureTrust } from "@/components/feature/FeatureTrust";
18+
import { SectionReveal } from "@/components/SectionReveal";
19+
20+
/** 结果可视化 Mockup：专注统计卡片（纯 CSS 示意，防版本迭代过期） */
21+
function DiveOutcomeMockup() {
22+
return (
23+
<div
24+
className="rounded-3xl p-8 mx-auto max-w-2xl"
25+
style={{
26+
background: "var(--kb-bg-elevated)",
27+
border: "1px solid var(--kb-glass-border)",
28+
boxShadow: "var(--kb-shadow-card)",
29+
}}
30+
>
31+
<div className="flex items-center justify-between mb-6">
32+
<div>
33+
<p className="text-xs text-kb-text3 mb-1">本月深潜</p>
34+
<p className="font-serif text-3xl font-bold text-kb-text">42 次</p>
35+
</div>
36+
<div className="text-right">
37+
<p className="text-xs text-kb-text3 mb-1">连续专注</p>
38+
<p className="font-serif text-3xl font-bold" style={{ color: "var(--kb-moss-green)" }}>
39+
7 天
40+
</p>
41+
</div>
42+
</div>
43+
{/* 周柱状示意 */}
44+
<div className="flex items-end gap-3 h-24">
45+
{[35, 60, 45, 80, 55, 90, 70].map((h, i) => (
46+
<div
47+
key={i}
48+
className="flex-1 rounded-t-lg transition-all duration-500"
49+
style={{
50+
height: `${h}%`,
51+
background: i === 5 ? "var(--kb-brand-400)" : "var(--kb-bg-tertiary)",
52+
}}
53+
/>
54+
))}
55+
</div>
56+
<p className="text-xs text-kb-text3 mt-4 text-center">每一根柱子，都是一次下潜</p>
57+
</div>
58+
);
59+
}
60+
61+
export function DivePage() {
62+
// null = 自由交互；六态卡片点击时受控切换
63+
const [demoState, setDemoState] = useState<ChronosState | null>(null);
64+
65+
return (
66+
<div className="pt-36 pb-8">
67+
<FeatureHero
68+
eyebrow={DIVE_CONFIG.origin}
69+
title={DIVE_CONFIG.hero.title}
70+
subtitle={DIVE_CONFIG.hero.subtitle}
71+
ctaText={DIVE_CONFIG.cta.text}
72+
demo={
73+
<div>
74+
<ChronosDemo controlledState={demoState} onStateChange={setDemoState} />
75+
<p className="text-xs text-kb-text3 mt-4">点它两下，感受它苏醒</p>
76+
</div>
77+
}
78+
/>
79+
80+
<FeatureMechanics
81+
title={DIVE_CONFIG.mechanics.title}
82+
hint={DIVE_CONFIG.mechanics.hint}
83+
items={DIVE_CONFIG.mechanics.items}
84+
onSelect={(item) => {
85+
const matched = CHRONOS_STATES.find((s) => s.key === item.key);
86+
if (matched) setDemoState(matched.key);
87+
}}
88+
/>
89+
90+
<FeatureScenes title={DIVE_CONFIG.scenes.title} items={DIVE_CONFIG.scenes.items} />
91+
92+
<FeatureOutcome title={DIVE_CONFIG.outcome.title} desc={DIVE_CONFIG.outcome.desc}>
93+
<DiveOutcomeMockup />
94+
</FeatureOutcome>
95+
96+
<FeatureScience title={DIVE_CONFIG.science.title} points={DIVE_CONFIG.science.points} />
97+
98+
<FeatureTrust />
99+
100+
{/* 底部 CTA */}
101+
<section className="max-w-3xl mx-auto px-6 text-center">
102+
<SectionReveal>
103+
<div className="feather-divider max-w-xs mx-auto mb-14" />
104+
<h2 className="font-serif text-2xl sm:text-3xl font-bold text-kb-text mb-5">
105+
准备好养一只了吗？
106+
</h2>
107+
<p className="text-kb-text2 max-w-md mx-auto mb-10 leading-relaxed">
108+
免费、开源、本地优先。你的时间生物，只住在你的电脑上。
109+
</p>
110+
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
111+
<Link
112+
href="/download"
113+
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]"
114+
style={{
115+
background: "linear-gradient(135deg, var(--kb-amber), var(--kb-accent-400))",
116+
boxShadow: "var(--kb-shadow-accent)",
117+
}}
118+
>
119+
{DIVE_CONFIG.cta.text}
120+
</Link>
121+
<Link
122+
href="/features"
123+
className="px-7 py-3 rounded-2xl font-medium text-kb-text2 transition-all duration-500 hover:text-kb-text hover:scale-[1.02] glass-panel"
124+
>
125+
看看全部功能 →
126+
</Link>
127+
</div>
128+
</SectionReveal>
129+
</section>
130+
</div>
131+
);
132+
}

0 commit comments

Comments
 (0)