WangDL
4a7348c5d5
All checks were successful
Deploy Website / build-and-deploy (push) Successful in 13s
Phase 1 — Accessibility: - z-index system: BaseLayout z-[9999]→z-50, Header→z-30, floating cards→z-20 - prefers-reduced-motion: disable all animations/transitions when user prefers - Focus-visible: global ring indicator on all interactive elements - Text contrast: slate-500→600, slate-400→500, slate-300→400 across all pages Footer ICP备案, Header nav links, index/product/philosophy sections Phase 2 — Interaction: - Waitlist form: loading spinner state, API submission, error handling, debounce - Scroll progress: requestAnimationFrame throttle - Footer: inline onmouseover→CSS :hover - Removed unused WaitlistForm.astro (dead code, styles duplicated in waitlist.astro) Phase 3 — Visual polish: - Glass-card: opacity 0.6→0.8 for better text contrast - Animations: reduced 4 infinite float to 2, changed 2 to hover-only - Danmaku: hidden on mobile (hidden md:block) - product.astro: removed 2 extra </div> tags, fixed HTML structure - product.astro: added width/height to images - philosophy.astro: added width/height to images - CTA.astro: unified with btn-primary-gradient style system Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
399 lines
24 KiB
Plaintext
399 lines
24 KiB
Plaintext
---
|
||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||
import Header from '../components/Header.astro';
|
||
import Footer from '../components/Footer.astro';
|
||
---
|
||
|
||
<BaseLayout
|
||
title="知习 - 产品理念"
|
||
description="知习 关注的是学习过程本身：理解、输出、反馈、复习，以及一次次变得更清晰的自己。"
|
||
>
|
||
<Header />
|
||
|
||
<main class="relative min-h-screen">
|
||
<!-- Global Blueprint Background -->
|
||
<div class="fixed inset-0 bg-blueprint pointer-events-none z-0"></div>
|
||
|
||
<!-- 1. Hero Section: The Knowledge Path -->
|
||
<header class="relative pt-[200px] pb-[120px] z-10 flex flex-col items-center justify-center text-center px-6 overflow-hidden">
|
||
<div class="ambient-glow top-[10%] left-1/2 -translate-x-1/2"></div>
|
||
|
||
<div class="max-w-4xl mx-auto space-y-6">
|
||
<h1 class="font-display-xl text-on-surface">
|
||
我们不想让 AI 帮你看更多，<br/>而是帮你真正学会。
|
||
</h1>
|
||
<p class="font-body-lg text-on-surface-variant max-w-2xl mx-auto">
|
||
Intellectual Serenity for Lifelong Learners. Build your knowledge architecture, not just a digital hoarding space. A quiet environment for deep understanding.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Cinematic Abstract Visual -->
|
||
<div class="mt-24 w-full max-w-5xl mx-auto relative glass-panel rounded-2xl p-2">
|
||
<div class="relative w-full aspect-video rounded-xl overflow-hidden bg-surface-container-high border border-white/50">
|
||
<img alt="Knowledge Path" width="1200" height="675" class="w-full h-full object-cover mix-blend-multiply opacity-90" src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&h=675&fit=crop" />
|
||
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest/80 to-transparent"></div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 2. Contrast Narrative Section -->
|
||
<section class="py-[120px] z-10 relative px-6 max-w-[1200px] mx-auto animate-reveal-up">
|
||
<div class="text-center mb-20">
|
||
<h2 class="font-headline-lg text-on-surface">学习最大的敌人，往往不是没有资料。</h2>
|
||
<p class="font-body-base text-on-surface-variant mt-4">是无序的收集，制造了"我已经懂了"的幻觉。</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
|
||
<!-- Left Side: Fragmented Chaos - 散落的伪学习卡片 -->
|
||
<div class="col-span-1 md:col-span-5 relative h-[480px]">
|
||
<!-- 背景模糊光圈 -->
|
||
<div class="absolute inset-0 bg-surface-container-highest/40 blur-3xl rounded-full scale-75"></div>
|
||
|
||
<!-- 卡片 1: 看过 - 散落左上 -->
|
||
<div class="absolute top-0 left-0 w-44 glass-panel rounded-2xl p-4 shadow-lg rotate-[-5deg] hover:rotate-[-2deg] transition-transform duration-300 z-20">
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<div class="w-8 h-8 rounded-lg bg-error-container/60 text-error flex items-center justify-center">
|
||
<span class="material-symbols-outlined text-base">visibility</span>
|
||
</div>
|
||
<span class="font-label-sm text-on-surface">看过</span>
|
||
</div>
|
||
<p class="text-xs text-on-surface-variant leading-relaxed">快速翻页，扫过即走，<br/>不留印象。</p>
|
||
<div class="mt-3 h-1 w-full bg-surface-container-highest rounded-full overflow-hidden">
|
||
<div class="h-full bg-error/20 rounded-full w-[20%]"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片 2: 划线 - 散落中间偏右 -->
|
||
<div class="absolute top-[30%] right-0 w-40 glass-panel rounded-2xl p-4 shadow-lg rotate-[8deg] hover:rotate-[4deg] transition-transform duration-300 z-10">
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<div class="w-8 h-8 rounded-lg bg-primary-fixed/60 text-primary-container flex items-center justify-center">
|
||
<span class="material-symbols-outlined text-base">edit</span>
|
||
</div>
|
||
<span class="font-label-sm text-on-surface">划线</span>
|
||
</div>
|
||
<p class="text-xs text-on-surface-variant leading-relaxed">标记很多重点，<br/>事后从不回顾。</p>
|
||
<div class="mt-3 flex gap-1">
|
||
<div class="h-1 flex-1 bg-primary-fixed-dim/60 rounded-full"></div>
|
||
<div class="h-1 w-6 bg-primary-fixed-dim/30 rounded-full"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 卡片 3: 收藏 - 散落底部 -->
|
||
<div class="absolute bottom-8 left-8 w-48 glass-panel rounded-2xl p-4 shadow-lg rotate-[-8deg] hover:rotate-[-3deg] transition-transform duration-300 z-15">
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<div class="w-8 h-8 rounded-lg bg-secondary-fixed/60 text-secondary-container flex items-center justify-center">
|
||
<span class="material-symbols-outlined text-base">bookmark</span>
|
||
</div>
|
||
<span class="font-label-sm text-on-surface">收藏</span>
|
||
</div>
|
||
<p class="text-xs text-on-surface-variant leading-relaxed">先存为敬，再也不点开，<br/>直到遗忘。</p>
|
||
</div>
|
||
|
||
<!-- 装饰虚线圆圈 -->
|
||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full border border-dashed border-outline-variant/40 pointer-events-none"></div>
|
||
|
||
<!-- "?" 标记表示混乱 -->
|
||
<div class="absolute bottom-0 right-4 w-10 h-10 rounded-full bg-surface-container-highest/50 border border-outline-variant/30 flex items-center justify-center text-outline-variant text-lg font-light pointer-events-none z-0">
|
||
?
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Center Divider -->
|
||
<div class="col-span-1 md:col-span-2 flex justify-center items-center">
|
||
<div class="hidden md:flex flex-col items-center gap-3">
|
||
<div class="w-px h-16 bg-gradient-to-b from-transparent via-outline-variant to-outline-variant"></div>
|
||
<span class="material-symbols-outlined text-4xl text-primary rotate-90 animate-float-slow">arrow_forward</span>
|
||
<div class="w-px h-16 bg-gradient-to-b from-outline-variant via-outline-variant to-transparent"></div>
|
||
</div>
|
||
<span class="material-symbols-outlined text-outline-variant text-4xl block md:hidden rotate-90">arrow_forward</span>
|
||
</div>
|
||
|
||
<!-- Right Side: Structured Learning Path -->
|
||
<div class="col-span-1 md:col-span-5 flex flex-col gap-5 relative">
|
||
<!-- 纵向连线 -->
|
||
<div class="absolute left-[31px] top-8 bottom-8 w-0.5 bg-gradient-to-b from-primary-container via-primary-fixed-dim to-primary rounded-full z-0"></div>
|
||
|
||
<div class="flex items-center gap-5 relative z-10 group">
|
||
<div class="w-16 h-16 rounded-2xl bg-surface-container-lowest border-2 border-primary-fixed shadow-sm flex items-center justify-center text-primary group-hover:scale-105 transition-transform duration-300">
|
||
<span class="material-symbols-outlined text-2xl">record_voice_over</span>
|
||
</div>
|
||
<div>
|
||
<span class="font-headline-md text-on-surface">复述</span>
|
||
<p class="text-sm text-on-surface-variant mt-0.5">用自己的话重新表达，检验是否真懂</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-5 relative z-10 group">
|
||
<div class="w-16 h-16 rounded-2xl bg-surface-container-lowest border-2 border-primary-fixed shadow-sm flex items-center justify-center text-primary group-hover:scale-105 transition-transform duration-300">
|
||
<span class="material-symbols-outlined text-2xl">output</span>
|
||
</div>
|
||
<div>
|
||
<span class="font-headline-md text-on-surface">输出</span>
|
||
<p class="text-sm text-on-surface-variant mt-0.5">撰写笔记、绘制图谱，固化为知识资产</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-5 relative z-10 group">
|
||
<div class="w-16 h-16 rounded-2xl bg-surface-container-lowest border-2 border-primary-fixed shadow-sm flex items-center justify-center text-primary group-hover:scale-105 transition-transform duration-300">
|
||
<span class="material-symbols-outlined text-2xl">sync_alt</span>
|
||
</div>
|
||
<div>
|
||
<span class="font-headline-md text-on-surface">反馈</span>
|
||
<p class="text-sm text-on-surface-variant mt-0.5">AI 即时分析漏洞，精准定位薄弱环节</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-5 relative z-10 group">
|
||
<div class="w-16 h-16 rounded-2xl bg-primary shadow-lg shadow-primary/20 flex items-center justify-center text-on-primary group-hover:scale-105 transition-transform duration-300">
|
||
<span class="material-symbols-outlined text-2xl">model_training</span>
|
||
</div>
|
||
<div>
|
||
<span class="font-headline-md text-primary font-bold">复习</span>
|
||
<p class="text-sm text-on-surface-variant mt-0.5">间隔重复 + 主动回忆，对抗遗忘曲线</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. Core Learning Loop Section -->
|
||
<section class="py-[120px] z-10 relative bg-surface-container-low/50 animate-reveal-up">
|
||
<div class="max-w-[1200px] mx-auto px-6 text-center">
|
||
<h2 class="font-headline-lg text-on-surface mb-20">真正的学习，是一个闭环。</h2>
|
||
|
||
<div class="relative w-full max-w-[540px] h-[540px] mx-auto flex items-center justify-center">
|
||
<!-- 外圈光晕 -->
|
||
<div class="absolute inset-0 bg-primary-fixed opacity-15 blur-3xl rounded-full"></div>
|
||
|
||
<!-- 轨道环 -->
|
||
<div class="absolute inset-12 rounded-full border border-primary-fixed-dim/30 z-0"></div>
|
||
<div class="absolute inset-12 rounded-full border border-primary-fixed-dim border-dashed animate-spin opacity-30 z-0" style="animation-duration: 80s;"></div>
|
||
|
||
<!-- 中心节点 -->
|
||
<div class="w-28 h-28 rounded-full glass-panel flex flex-col items-center justify-center text-primary z-20 shadow-xl shadow-primary/10">
|
||
<span class="material-symbols-outlined text-3xl mb-1">person</span>
|
||
<span class="font-label-sm">你</span>
|
||
</div>
|
||
|
||
<!-- 轨道节点 - 顶部: 输入 -->
|
||
<div class="absolute top-4 left-1/2 -translate-x-1/2 glass-panel px-5 py-3 rounded-xl flex items-center gap-3 shadow-md z-10 hover:scale-105 transition-transform duration-300">
|
||
<div class="w-9 h-9 rounded-full bg-primary-fixed text-primary-container flex items-center justify-center">
|
||
<span class="material-symbols-outlined text-sm">input</span>
|
||
</div>
|
||
<div class="text-left">
|
||
<span class="font-label-sm text-on-surface">输入</span>
|
||
<p class="text-[11px] text-on-surface-variant leading-tight">阅读 · 收集</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 轨道节点 - 右上: 输出 -->
|
||
<div class="absolute top-[22%] right-0 glass-panel px-5 py-3 rounded-xl flex items-center gap-3 shadow-md z-10 hover:scale-105 transition-transform duration-300">
|
||
<div class="w-9 h-9 rounded-full bg-primary-fixed text-primary-container flex items-center justify-center">
|
||
<span class="material-symbols-outlined text-sm">output</span>
|
||
</div>
|
||
<div class="text-left">
|
||
<span class="font-label-sm text-on-surface">输出</span>
|
||
<p class="text-[11px] text-on-surface-variant leading-tight">复述 · 写作</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 轨道节点 - 右下: 反馈 -->
|
||
<div class="absolute bottom-[18%] right-3 glass-panel px-5 py-3 rounded-xl flex items-center gap-3 shadow-md z-10 hover:scale-105 transition-transform duration-300">
|
||
<div class="w-9 h-9 rounded-full bg-primary-fixed text-primary-container flex items-center justify-center">
|
||
<span class="material-symbols-outlined text-sm">feedback</span>
|
||
</div>
|
||
<div class="text-left">
|
||
<span class="font-label-sm text-on-surface">反馈</span>
|
||
<p class="text-[11px] text-on-surface-variant leading-tight">分析 · 诊断</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 轨道节点 - 左下: 调整 -->
|
||
<div class="absolute bottom-[18%] left-3 glass-panel px-5 py-3 rounded-xl flex items-center gap-3 shadow-md z-10 hover:scale-105 transition-transform duration-300">
|
||
<div class="w-9 h-9 rounded-full bg-primary-fixed text-primary-container flex items-center justify-center">
|
||
<span class="material-symbols-outlined text-sm">tune</span>
|
||
</div>
|
||
<div class="text-left">
|
||
<span class="font-label-sm text-on-surface">调整</span>
|
||
<p class="text-[11px] text-on-surface-variant leading-tight">纠偏 · 优化</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 轨道节点 - 左上: 复习 -->
|
||
<div class="absolute top-[22%] left-0 glass-panel px-5 py-3 rounded-xl flex items-center gap-3 shadow-md z-10 hover:scale-105 transition-transform duration-300">
|
||
<div class="w-9 h-9 rounded-full bg-primary-fixed text-primary-container flex items-center justify-center">
|
||
<span class="material-symbols-outlined text-sm">history</span>
|
||
</div>
|
||
<div class="text-left">
|
||
<span class="font-label-sm text-on-surface">复习</span>
|
||
<p class="text-[11px] text-on-surface-variant leading-tight">间隔 · 回忆</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. AI Feedback System Section (Immersive UI Mockup) -->
|
||
<section class="py-[120px] z-10 relative px-6 animate-reveal-up">
|
||
<div class="max-w-4xl mx-auto text-center mb-16">
|
||
<h2 class="font-headline-lg text-on-surface">AI 不应该只是总结工具，<br/>而应该成为学习过程里的反馈系统。</h2>
|
||
</div>
|
||
|
||
<!-- UI Mockup Canvas -->
|
||
<div class="max-w-[1000px] mx-auto bg-surface-container-lowest rounded-2xl shadow-[0_30px_60px_rgba(18,26,43,0.08)] border border-white/80 overflow-hidden flex flex-col md:flex-row relative">
|
||
<!-- Sidebar/Context -->
|
||
<div class="w-full md:w-64 bg-surface-container-low border-r border-outline-variant/30 p-6 flex flex-col gap-6">
|
||
<div class="font-label-sm text-on-surface-variant uppercase tracking-wider">Analysis Report</div>
|
||
<div class="space-y-4">
|
||
<div class="p-3 rounded-lg bg-surface-container-highest/50 cursor-pointer border border-outline-variant/20">
|
||
<div class="text-sm font-semibold text-on-surface">《查拉图斯特拉如是说》笔记</div>
|
||
<div class="text-xs text-on-surface-variant mt-1">2小时前分析</div>
|
||
</div>
|
||
<div class="p-3 rounded-lg hover:bg-surface-container-highest/30 cursor-pointer transition-colors text-on-surface-variant">
|
||
<div class="text-sm">系统思考基础模型</div>
|
||
<div class="text-xs mt-1">昨天</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Analysis Area -->
|
||
<div class="flex-1 p-10 bg-white relative">
|
||
<!-- Top Status -->
|
||
<div class="flex justify-between items-end border-b border-outline-variant/20 pb-6 mb-8">
|
||
<div>
|
||
<h3 class="font-headline-md text-on-surface">概念掌握度评估</h3>
|
||
<p class="text-sm text-on-surface-variant mt-1">基于您的复述与提问记录生成</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<div class="text-4xl font-light text-primary">84<span class="text-xl">%</span></div>
|
||
<div class="text-xs font-semibold text-on-surface-variant uppercase">综合理解率</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Metrics Grid -->
|
||
<div class="grid grid-cols-2 gap-8 mb-10">
|
||
<div>
|
||
<div class="flex justify-between text-sm mb-2">
|
||
<span class="text-on-surface font-medium">核心逻辑自洽性</span>
|
||
<span class="text-on-surface-variant">92%</span>
|
||
</div>
|
||
<div class="h-1.5 w-full bg-surface-container-highest rounded-full overflow-hidden">
|
||
<div class="h-full bg-primary rounded-full" style="width: 92%;"></div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="flex justify-between text-sm mb-2">
|
||
<span class="text-on-surface font-medium">边缘概念连结</span>
|
||
<span class="text-on-surface-variant">65%</span>
|
||
</div>
|
||
<div class="h-1.5 w-full bg-surface-container-highest rounded-full overflow-hidden">
|
||
<div class="h-full bg-secondary-container rounded-full" style="width: 65%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI Insight Card -->
|
||
<div class="bg-primary-fixed/30 border border-primary-fixed-dim/50 rounded-xl p-6 flex gap-4">
|
||
<span class="material-symbols-outlined text-primary mt-1">lightbulb</span>
|
||
<div>
|
||
<h4 class="font-semibold text-on-surface mb-2">反馈与建议</h4>
|
||
<p class="text-sm text-on-surface-variant leading-relaxed">
|
||
您对"超人"概念的阐述非常清晰，但在将其与"永恒轮回"理论结合时存在逻辑跳跃。建议复习第三章节，并尝试用自己的话写一段连接这两个概念的短文。
|
||
</p>
|
||
<div class="mt-4 flex gap-2">
|
||
<button class="px-4 py-1.5 bg-primary text-white rounded-full text-xs font-medium shadow-sm hover:opacity-90">生成复习卡片</button>
|
||
<button class="px-4 py-1.5 bg-white border border-outline-variant text-on-surface rounded-full text-xs font-medium hover:bg-surface-container-low">查看原文出处</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. Principles Manifesto Section -->
|
||
<section class="py-[120px] z-10 relative px-6 max-w-[1200px] mx-auto animate-reveal-up">
|
||
<div class="text-center mb-16">
|
||
<h2 class="font-display-xl text-on-surface mb-4">知习 的产品原则</h2>
|
||
<p class="font-body-base text-on-surface-variant">五条核心信念，定义了我们的产品设计哲学</p>
|
||
</div>
|
||
|
||
<!-- 原则卡片网格 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
|
||
<!-- Principle 01 - 全宽 -->
|
||
<div class="col-span-1 md:col-span-12 glass-panel rounded-2xl p-8 md:p-10 flex flex-col md:flex-row gap-8 items-start group hover:shadow-lg hover:-translate-y-1 transition-all duration-500">
|
||
<div class="shrink-0 flex items-center gap-5">
|
||
<span class="text-[64px] font-extrabold leading-none bg-gradient-to-br from-primary to-secondary bg-clip-text text-transparent opacity-60 group-hover:opacity-100 transition-opacity duration-500">01</span>
|
||
<div class="w-14 h-14 rounded-2xl bg-error-container/40 text-error flex items-center justify-center">
|
||
<span class="material-symbols-outlined text-2xl">tune</span>
|
||
</div>
|
||
</div>
|
||
<div class="flex-1">
|
||
<h3 class="font-headline-md text-on-surface mb-2">少一点信息噪音，多一点学习反馈</h3>
|
||
<p class="font-body-base text-on-surface-variant leading-relaxed">信息爆炸的时代，缺的不是内容，而是对内容的深度加工。我们抑制推流，放大反馈，让每一次交互都指向认知升级。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Principle 02 + 03 并排 -->
|
||
<div class="col-span-1 md:col-span-6 glass-panel rounded-2xl p-8 group hover:shadow-lg hover:-translate-y-1 transition-all duration-500">
|
||
<div class="flex items-center gap-4 mb-4">
|
||
<span class="text-[56px] font-extrabold leading-none bg-gradient-to-br from-secondary to-primary bg-clip-text text-transparent opacity-50 group-hover:opacity-100 transition-opacity duration-500">02</span>
|
||
<div class="w-12 h-12 rounded-xl bg-secondary-fixed/40 text-secondary flex items-center justify-center ml-auto">
|
||
<span class="material-symbols-outlined text-xl">psychology</span>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-headline-md text-on-surface mb-3">知识需要沉淀，而不是被无限折叠</h3>
|
||
<p class="font-body-base text-on-surface-variant leading-relaxed">拒绝复杂的层级树和无底洞般的标签库。知识的结构应该如大脑的神经网络般扁平而互联，易于提取，利于生长。</p>
|
||
</div>
|
||
|
||
<div class="col-span-1 md:col-span-6 glass-panel rounded-2xl p-8 group hover:shadow-lg hover:-translate-y-1 transition-all duration-500">
|
||
<div class="flex items-center gap-4 mb-4">
|
||
<span class="text-[56px] font-extrabold leading-none bg-gradient-to-br from-primary to-secondary bg-clip-text text-transparent opacity-50 group-hover:opacity-100 transition-opacity duration-500">03</span>
|
||
<div class="w-12 h-12 rounded-xl bg-primary-fixed/40 text-primary-container flex items-center justify-center ml-auto">
|
||
<span class="material-symbols-outlined text-xl">record_voice_over</span>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-headline-md text-on-surface mb-3">真正的理解来自于高质量的输出</h3>
|
||
<p class="font-body-base text-on-surface-variant leading-relaxed">费曼技巧的数字化实践。只有当你能向 AI 清晰地复述一个概念，并经受住追问时，这个知识才真正属于你。</p>
|
||
</div>
|
||
|
||
<!-- Principle 04 + 05 并排 -->
|
||
<div class="col-span-1 md:col-span-6 glass-panel rounded-2xl p-8 group hover:shadow-lg hover:-translate-y-1 transition-all duration-500">
|
||
<div class="flex items-center gap-4 mb-4">
|
||
<span class="text-[56px] font-extrabold leading-none bg-gradient-to-br from-tertiary to-primary bg-clip-text text-transparent opacity-50 group-hover:opacity-100 transition-opacity duration-500">04</span>
|
||
<div class="w-12 h-12 rounded-xl bg-primary-container/20 text-primary flex items-center justify-center ml-auto">
|
||
<span class="material-symbols-outlined text-xl">analytics</span>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-headline-md text-on-surface mb-3">反馈必须即时、精准且具有可操作性</h3>
|
||
<p class="font-body-base text-on-surface-variant leading-relaxed">模糊的赞美毫无意义。系统应指出逻辑断层，补充缺失的背景知识，并提供明确的下一步复习建议。</p>
|
||
</div>
|
||
|
||
<div class="col-span-1 md:col-span-6 glass-panel rounded-2xl p-8 group hover:shadow-lg hover:-translate-y-1 transition-all duration-500">
|
||
<div class="flex items-center gap-4 mb-4">
|
||
<span class="text-[56px] font-extrabold leading-none bg-gradient-to-br from-secondary to-primary bg-clip-text text-transparent opacity-50 group-hover:opacity-100 transition-opacity duration-500">05</span>
|
||
<div class="w-12 h-12 rounded-xl bg-tertiary-container/20 text-tertiary flex items-center justify-center ml-auto">
|
||
<span class="material-symbols-outlined text-xl">insights</span>
|
||
</div>
|
||
</div>
|
||
<h3 class="font-headline-md text-on-surface mb-3">少一点万能承诺，多一点可验证进步</h3>
|
||
<p class="font-body-base text-on-surface-variant leading-relaxed">不承诺能帮你记住一切，但保证让你清楚自己真正掌握了什么。用数据可视化展现认知能力的客观提升。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6. Footer CTA Section -->
|
||
<section class="py-[160px] z-10 relative px-6 text-center">
|
||
<h2 class="font-headline-lg text-on-surface max-w-2xl mx-auto mb-10">如果你也厌倦了"看过就算学过"，<br/>欢迎继续了解知习。</h2>
|
||
<div class="flex items-center justify-center gap-6">
|
||
<a href="/product" class="btn-primary-gradient text-white px-8 py-4 rounded-full font-semibold shadow-2xl shadow-blue-500/30 hover:shadow-blue-500/50 hover:-translate-y-1 transition-all text-sm">
|
||
查看产品
|
||
</a>
|
||
<a href="/waitlist" class="glass-panel text-on-surface px-8 py-4 rounded-full font-semibold hover:bg-white transition-colors duration-300">
|
||
关注更新
|
||
</a>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<Footer />
|
||
</BaseLayout> |