443 lines
25 KiB
HTML
443 lines
25 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<html lang="zh-CN"><head>
|
||
|
|
<meta charset="utf-8"/>
|
||
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
|
|
<title>知习 AI - 产品理念</title>
|
||
|
|
<!-- Google Fonts: Manrope & Inter -->
|
||
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||
|
|
<!-- Material Symbols -->
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
|
|
<!-- Tailwind CSS -->
|
||
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
|
|
<!-- Tailwind Config -->
|
||
|
|
<script id="tailwind-config">
|
||
|
|
tailwind.config = {
|
||
|
|
darkMode: "class",
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
"colors": {
|
||
|
|
"primary-fixed": "#dce1ff",
|
||
|
|
"surface-container-high": "#e1e8ff",
|
||
|
|
"on-error": "#ffffff",
|
||
|
|
"primary-container": "#3c6bed",
|
||
|
|
"inverse-on-surface": "#edf0ff",
|
||
|
|
"inverse-surface": "#283042",
|
||
|
|
"on-surface-variant": "#434654",
|
||
|
|
"secondary-fixed-dim": "#c8bfff",
|
||
|
|
"secondary-fixed": "#e5deff",
|
||
|
|
"surface-variant": "#dbe2fa",
|
||
|
|
"error-container": "#ffdad6",
|
||
|
|
"error": "#ba1a1a",
|
||
|
|
"on-primary": "#ffffff",
|
||
|
|
"on-surface": "#131b2c",
|
||
|
|
"primary-fixed-dim": "#b5c4ff",
|
||
|
|
"tertiary-fixed-dim": "#c4c7ca",
|
||
|
|
"tertiary-container": "#727578",
|
||
|
|
"background": "#faf9ff",
|
||
|
|
"on-tertiary-fixed-variant": "#44474a",
|
||
|
|
"surface-container-low": "#f1f3ff",
|
||
|
|
"on-tertiary-fixed": "#181c1f",
|
||
|
|
"inverse-primary": "#b5c4ff",
|
||
|
|
"outline-variant": "#c3c5d7",
|
||
|
|
"on-tertiary": "#ffffff",
|
||
|
|
"on-secondary-fixed": "#190064",
|
||
|
|
"surface-bright": "#faf9ff",
|
||
|
|
"surface-container": "#e9edff",
|
||
|
|
"on-primary-container": "#fffbff",
|
||
|
|
"on-secondary-fixed-variant": "#421dc9",
|
||
|
|
"on-secondary-container": "#fffbff",
|
||
|
|
"on-error-container": "#93000a",
|
||
|
|
"surface-container-highest": "#dbe2fa",
|
||
|
|
"on-primary-fixed-variant": "#003cad",
|
||
|
|
"secondary-container": "#715af8",
|
||
|
|
"secondary": "#583dde",
|
||
|
|
"surface": "#faf9ff",
|
||
|
|
"primary": "#1550d3",
|
||
|
|
"surface-container-lowest": "#ffffff",
|
||
|
|
"tertiary-fixed": "#e0e3e6",
|
||
|
|
"on-tertiary-container": "#fcfcff",
|
||
|
|
"on-background": "#131b2c",
|
||
|
|
"tertiary": "#595c60",
|
||
|
|
"on-primary-fixed": "#00164d",
|
||
|
|
"surface-dim": "#d2daf1",
|
||
|
|
"outline": "#737686",
|
||
|
|
"surface-tint": "#1a53d6",
|
||
|
|
"on-secondary": "#ffffff"
|
||
|
|
},
|
||
|
|
"borderRadius": {
|
||
|
|
"DEFAULT": "0.25rem",
|
||
|
|
"lg": "0.5rem",
|
||
|
|
"xl": "0.75rem",
|
||
|
|
"full": "9999px"
|
||
|
|
},
|
||
|
|
"spacing": {
|
||
|
|
"section-padding": "120px",
|
||
|
|
"container-max": "1200px",
|
||
|
|
"card-padding": "32px",
|
||
|
|
"gutter": "24px",
|
||
|
|
"unit": "8px"
|
||
|
|
},
|
||
|
|
"fontFamily": {
|
||
|
|
"headline-md": ["Manrope"],
|
||
|
|
"headline-lg": ["Manrope"],
|
||
|
|
"display-xl": ["Manrope"],
|
||
|
|
"body-lg": ["Manrope"],
|
||
|
|
"body-base": ["Manrope"],
|
||
|
|
"label-sm": ["Inter"]
|
||
|
|
},
|
||
|
|
"fontSize": {
|
||
|
|
"headline-md": ["28px", { "lineHeight": "1.3", "fontWeight": "600" }],
|
||
|
|
"headline-lg": ["40px", { "lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "700" }],
|
||
|
|
"display-xl": ["64px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "800" }],
|
||
|
|
"body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
||
|
|
"body-base": ["16px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
||
|
|
"label-sm": ["13px", { "lineHeight": "1", "letterSpacing": "0.05em", "fontWeight": "600" }]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
/* Ambient Blueprint Grid Pattern */
|
||
|
|
.bg-blueprint {
|
||
|
|
background-image: radial-gradient(var(--tw-colors-outline-variant) 1px, transparent 1px);
|
||
|
|
background-size: 32px 32px;
|
||
|
|
background-position: -1px -1px;
|
||
|
|
opacity: 0.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Glassmorphism Utilities */
|
||
|
|
.glass-panel {
|
||
|
|
background-color: rgba(255, 255, 255, 0.7);
|
||
|
|
backdrop-filter: blur(20px);
|
||
|
|
-webkit-backdrop-filter: blur(20px);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
||
|
|
box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Ambient Glow */
|
||
|
|
.ambient-glow {
|
||
|
|
position: absolute;
|
||
|
|
width: 600px;
|
||
|
|
height: 600px;
|
||
|
|
background: radial-gradient(circle, var(--tw-colors-primary-fixed) 0%, transparent 70%);
|
||
|
|
opacity: 0.5;
|
||
|
|
filter: blur(80px);
|
||
|
|
z-index: -1;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Material Icons setup */
|
||
|
|
.material-symbols-outlined {
|
||
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||
|
|
}
|
||
|
|
.icon-fill {
|
||
|
|
font-variation-settings: 'FILL' 1;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="bg-background text-on-background font-body-base antialiased relative min-h-screen">
|
||
|
|
<!-- Global Blueprint Background -->
|
||
|
|
<div class="fixed inset-0 bg-blueprint pointer-events-none z-0"></div>
|
||
|
|
<!-- 1. TopAppBar (Shared Component Implementation) -->
|
||
|
|
<!-- Applying explicit style_ keys from JSON alongside layout requirements -->
|
||
|
|
<nav class="bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl fixed top-0 w-full z-50 border-b border-white/20 dark:border-slate-800/50 shadow-[0_20px_40px_rgba(18,26,43,0.04)]">
|
||
|
|
<div class="max-w-7xl mx-auto px-8 h-20 flex items-center justify-between">
|
||
|
|
<!-- Brand Logo -->
|
||
|
|
<div class="text-xl font-bold tracking-tighter text-slate-900 dark:text-white flex items-center gap-2">
|
||
|
|
<span class="material-symbols-outlined icon-fill text-blue-600 dark:text-blue-400">psychology</span>
|
||
|
|
知习 AI
|
||
|
|
</div>
|
||
|
|
<!-- Navigation Links -->
|
||
|
|
<div class="hidden md:flex items-center gap-8 font-manrope tracking-tight text-sm font-medium">
|
||
|
|
<!-- Inactive Tab -->
|
||
|
|
<a class="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 transition-colors" href="#">
|
||
|
|
首页
|
||
|
|
</a>
|
||
|
|
<!-- Inactive Tab -->
|
||
|
|
<a class="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 transition-colors" href="#">
|
||
|
|
产品
|
||
|
|
</a>
|
||
|
|
<!-- Active Tab (Based on Philosophy Page Context) -->
|
||
|
|
<a class="text-blue-600 dark:text-blue-400 font-semibold border-b-2 border-blue-600 pb-1" href="#">
|
||
|
|
理念
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<!-- Trailing Action -->
|
||
|
|
<button class="bg-gradient-to-r from-blue-600 to-blue-500 text-white px-6 py-2.5 rounded-full font-label-sm hover:opacity-80 transition-all duration-300 scale-95 duration-200 ease-out shadow-md">
|
||
|
|
等待名单
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
<!-- 2. Hero Section: The Knowledge Path -->
|
||
|
|
<header class="relative pt-[200px] pb-section-padding z-10 flex flex-col items-center justify-center text-center px-gutter 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 text-balance">
|
||
|
|
我们不想让 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 (Image Integration) -->
|
||
|
|
<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="" class="w-full h-full object-cover mix-blend-multiply opacity-90" data-alt="A cinematic, abstract 3D rendering representing a 'Knowledge Path' within a pristine, light-mode environment. A glowing, soft-blue digital track winds smoothly forward, flanked by floating, translucent glass fragments and elegant geometric shapes that symbolize structured information. The background features a subtle, breathable dot-grid pattern and high-key, airy lighting. The overall color palette is dominated by pure whites, serene pale blues, and soft shadows, embodying an Apple-inspired minimalist aesthetic and a calm, intellectual atmosphere." src="https://lh3.googleusercontent.com/aida/ADBb0uiz5ALBcopzHW6YiPJIDzON9d-GOLgDERcajQ5kK6yovNdiJMCmpuZuNlk2C-YswHpOGuS9QyUcXlhEDMo3ciIB-XsCDSeZR93nLEqTGzbBvsjg2oWn5KcH_pkkNe3q_XmhPLokaIzjt-5jnueWgsaYphhUsTmsce36ow9bTQwh3MksP4gKzioKsM5ZrIXXTjFpkDBH1JyvdKZ7hXd7gLYcZEHfCA2wy1QkKFIHnUJzZswW2oTYXSoRlSz65APtSrlIErBY7T9Kqg"/>
|
||
|
|
<!-- Inner Light Overlay to enhance the ethereal feel -->
|
||
|
|
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest/80 to-transparent"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<!-- 3. Contrast Narrative Section -->
|
||
|
|
<section class="py-section-padding z-10 relative px-gutter max-w-container-max mx-auto">
|
||
|
|
<div class="text-center mb-24">
|
||
|
|
<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-16 items-center">
|
||
|
|
<!-- Left Side: Fragmented Chaos -->
|
||
|
|
<div class="col-span-1 md:col-span-5 h-[400px] relative">
|
||
|
|
<div class="absolute top-1/4 left-10 glass-panel px-6 py-3 rounded-full text-on-surface-variant font-label-sm rotate-[-6deg] opacity-70">
|
||
|
|
<span class="material-symbols-outlined align-middle mr-2 text-outline">visibility</span> 看过
|
||
|
|
</div>
|
||
|
|
<div class="absolute top-1/2 right-12 glass-panel px-6 py-3 rounded-full text-on-surface-variant font-label-sm rotate-[4deg] opacity-60">
|
||
|
|
<span class="material-symbols-outlined align-middle mr-2 text-outline">bookmark</span> 收藏
|
||
|
|
</div>
|
||
|
|
<div class="absolute bottom-1/4 left-20 glass-panel px-6 py-3 rounded-full text-on-surface-variant font-label-sm rotate-[-2deg] opacity-80">
|
||
|
|
<span class="material-symbols-outlined align-middle mr-2 text-outline">edit</span> 划线
|
||
|
|
</div>
|
||
|
|
<div class="absolute top-[10%] right-[20%] w-32 h-32 rounded-full border border-dashed border-outline-variant/50"></div>
|
||
|
|
<div class="absolute bottom-[20%] left-[10%] w-48 h-48 rounded-full bg-surface-container-highest/30 blur-2xl"></div>
|
||
|
|
</div>
|
||
|
|
<!-- Center Divider -->
|
||
|
|
<div class="col-span-1 md:col-span-2 flex justify-center items-center h-full">
|
||
|
|
<div class="w-px h-32 md:h-full bg-gradient-to-b from-transparent via-outline-variant to-transparent hidden md:block"></div>
|
||
|
|
<span class="material-symbols-outlined text-outline-variant text-4xl block md:hidden rotate-90">arrow_forward</span>
|
||
|
|
</div>
|
||
|
|
<!-- Right Side: Structured Path -->
|
||
|
|
<div class="col-span-1 md:col-span-5 flex flex-col gap-6 relative">
|
||
|
|
<div class="absolute left-[27px] top-4 bottom-4 w-px bg-primary-fixed-dim z-0"></div>
|
||
|
|
<div class="flex items-center gap-6 relative z-10">
|
||
|
|
<div class="w-14 h-14 rounded-full bg-surface-container-lowest border border-primary-fixed shadow-sm flex items-center justify-center text-primary">
|
||
|
|
<span class="material-symbols-outlined">record_voice_over</span>
|
||
|
|
</div>
|
||
|
|
<span class="font-headline-md text-on-surface">复述</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-6 relative z-10">
|
||
|
|
<div class="w-14 h-14 rounded-full bg-surface-container-lowest border border-primary-fixed shadow-sm flex items-center justify-center text-primary">
|
||
|
|
<span class="material-symbols-outlined">output</span>
|
||
|
|
</div>
|
||
|
|
<span class="font-headline-md text-on-surface">输出</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-6 relative z-10">
|
||
|
|
<div class="w-14 h-14 rounded-full bg-surface-container-lowest border border-primary-fixed shadow-sm flex items-center justify-center text-primary">
|
||
|
|
<span class="material-symbols-outlined">sync_alt</span>
|
||
|
|
</div>
|
||
|
|
<span class="font-headline-md text-on-surface">反馈</span>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-6 relative z-10">
|
||
|
|
<div class="w-14 h-14 rounded-full bg-primary shadow-lg shadow-primary/20 flex items-center justify-center text-on-primary">
|
||
|
|
<span class="material-symbols-outlined">model_training</span>
|
||
|
|
</div>
|
||
|
|
<span class="font-headline-md text-on-surface font-bold text-primary">复习</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<!-- 4. Core Learning Loop Section -->
|
||
|
|
<section class="py-section-padding z-10 relative bg-surface-container-low/50">
|
||
|
|
<div class="max-w-container-max mx-auto px-gutter text-center">
|
||
|
|
<h2 class="font-headline-lg text-on-surface mb-24">真正的学习，是一个闭环。</h2>
|
||
|
|
<div class="relative w-full max-w-[600px] h-[600px] mx-auto flex items-center justify-center">
|
||
|
|
<!-- Center Core -->
|
||
|
|
<div class="absolute inset-0 bg-primary-fixed opacity-20 blur-3xl rounded-full"></div>
|
||
|
|
<div class="w-32 h-32 rounded-full glass-panel flex flex-col items-center justify-center text-primary z-20 shadow-lg shadow-primary/10">
|
||
|
|
<span class="material-symbols-outlined text-4xl mb-1">person</span>
|
||
|
|
<span class="font-label-sm">你</span>
|
||
|
|
</div>
|
||
|
|
<!-- Orbital Ring -->
|
||
|
|
<div class="absolute inset-8 rounded-full border border-primary-fixed-dim border-dashed animate-[spin_60s_linear_infinite] opacity-50 z-0"></div>
|
||
|
|
<!-- Nodes positioned pseudo-circularly -->
|
||
|
|
<div class="absolute top-[5%] left-1/2 -translate-x-1/2 glass-panel px-6 py-3 rounded-full flex items-center gap-2 shadow-sm z-10">
|
||
|
|
<span class="material-symbols-outlined text-outline">input</span>
|
||
|
|
<span class="font-label-sm text-on-surface">输入</span>
|
||
|
|
</div>
|
||
|
|
<div class="absolute top-[30%] right-[5%] glass-panel px-6 py-3 rounded-full flex items-center gap-2 shadow-sm z-10">
|
||
|
|
<span class="material-symbols-outlined text-outline">output</span>
|
||
|
|
<span class="font-label-sm text-on-surface">输出</span>
|
||
|
|
</div>
|
||
|
|
<div class="absolute bottom-[20%] right-[15%] glass-panel px-6 py-3 rounded-full flex items-center gap-2 shadow-sm z-10">
|
||
|
|
<span class="material-symbols-outlined text-outline">feedback</span>
|
||
|
|
<span class="font-label-sm text-on-surface">反馈</span>
|
||
|
|
</div>
|
||
|
|
<div class="absolute bottom-[20%] left-[15%] glass-panel px-6 py-3 rounded-full flex items-center gap-2 shadow-sm z-10">
|
||
|
|
<span class="material-symbols-outlined text-outline">tune</span>
|
||
|
|
<span class="font-label-sm text-on-surface">调整</span>
|
||
|
|
</div>
|
||
|
|
<div class="absolute top-[30%] left-[5%] glass-panel px-6 py-3 rounded-full flex items-center gap-2 shadow-sm z-10">
|
||
|
|
<span class="material-symbols-outlined text-outline">history</span>
|
||
|
|
<span class="font-label-sm text-on-surface">复习</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<!-- 5. AI Feedback System Section (Immersive UI Mockup) -->
|
||
|
|
<section class="py-section-padding z-10 relative px-gutter">
|
||
|
|
<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 w-[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 w-[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>
|
||
|
|
<!-- 6. Principles Manifesto Section -->
|
||
|
|
<section class="py-section-padding z-10 relative px-gutter max-w-4xl mx-auto">
|
||
|
|
<h2 class="font-display-xl text-on-surface mb-16">知习 AI 的产品原则</h2>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<!-- Principle 01 -->
|
||
|
|
<div class="border-t border-outline-variant py-10 flex flex-col md:flex-row gap-6 md:gap-12 items-start group">
|
||
|
|
<div class="text-[80px] font-light leading-[0.8] text-tertiary-fixed-dim/40 group-hover:text-primary transition-colors duration-500">01</div>
|
||
|
|
<div class="flex-1">
|
||
|
|
<h3 class="font-headline-md text-on-surface mb-3">少一点信息噪音，多一点学习反馈</h3>
|
||
|
|
<p class="font-body-base text-on-surface-variant">信息爆炸的时代，缺的不是内容，而是对内容的深度加工。我们抑制推流，放大反馈，让每一次交互都指向认知升级。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Principle 02 -->
|
||
|
|
<div class="border-t border-outline-variant py-10 flex flex-col md:flex-row gap-6 md:gap-12 items-start group">
|
||
|
|
<div class="text-[80px] font-light leading-[0.8] text-tertiary-fixed-dim/40 group-hover:text-primary transition-colors duration-500">02</div>
|
||
|
|
<div class="flex-1">
|
||
|
|
<h3 class="font-headline-md text-on-surface mb-3">知识需要沉淀，而不是被无限折叠</h3>
|
||
|
|
<p class="font-body-base text-on-surface-variant">拒绝复杂的层级树和无底洞般的标签库。知识的结构应该如大脑的神经网络般扁平而互联，易于提取，利于生长。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Principle 03 -->
|
||
|
|
<div class="border-t border-outline-variant py-10 flex flex-col md:flex-row gap-6 md:gap-12 items-start group">
|
||
|
|
<div class="text-[80px] font-light leading-[0.8] text-tertiary-fixed-dim/40 group-hover:text-primary transition-colors duration-500">03</div>
|
||
|
|
<div class="flex-1">
|
||
|
|
<h3 class="font-headline-md text-on-surface mb-3">真正的理解来自于高质量的输出</h3>
|
||
|
|
<p class="font-body-base text-on-surface-variant">费曼技巧的数字化实践。只有当你能向 AI 清晰地复述一个概念，并经受住追问时，这个知识才真正属于你。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Principle 04 -->
|
||
|
|
<div class="border-t border-outline-variant py-10 flex flex-col md:flex-row gap-6 md:gap-12 items-start group">
|
||
|
|
<div class="text-[80px] font-light leading-[0.8] text-tertiary-fixed-dim/40 group-hover:text-primary transition-colors duration-500">04</div>
|
||
|
|
<div class="flex-1">
|
||
|
|
<h3 class="font-headline-md text-on-surface mb-3">反馈必须即时、精准且具有可操作性</h3>
|
||
|
|
<p class="font-body-base text-on-surface-variant">模糊的赞美毫无意义。系统应指出逻辑断层，补充缺失的背景知识，并提供明确的下一步复习建议。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Principle 05 -->
|
||
|
|
<div class="border-t border-outline-variant py-10 flex flex-col md:flex-row gap-6 md:gap-12 items-start group">
|
||
|
|
<div class="text-[80px] font-light leading-[0.8] text-tertiary-fixed-dim/40 group-hover:text-primary transition-colors duration-500">05</div>
|
||
|
|
<div class="flex-1">
|
||
|
|
<h3 class="font-headline-md text-on-surface mb-3">少一点万能承诺，多一点可验证进步</h3>
|
||
|
|
<p class="font-body-base text-on-surface-variant">不承诺能帮你记住一切，但保证让你清楚自己真正掌握了什么。用数据可视化展现认知能力的客观提升。</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="border-t border-outline-variant"></div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<!-- 7. Footer CTA Section -->
|
||
|
|
<section class="py-[160px] z-10 relative px-gutter text-center">
|
||
|
|
<h2 class="font-headline-lg text-on-surface max-w-2xl mx-auto mb-10">如果你也厌倦了“看过就算学过”，<br/>欢迎继续了解知习 AI。</h2>
|
||
|
|
<div class="flex items-center justify-center gap-6">
|
||
|
|
<button class="bg-primary text-white px-8 py-4 rounded-full font-semibold shadow-[0_10px_20px_rgba(21,80,211,0.2)] hover:-translate-y-1 transition-transform duration-300">
|
||
|
|
查看产品
|
||
|
|
</button>
|
||
|
|
<button class="glass-panel text-on-surface px-8 py-4 rounded-full font-semibold hover:bg-white transition-colors duration-300">
|
||
|
|
关注更新
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<!-- 8. Footer (Shared Component Implementation) -->
|
||
|
|
<!-- Applying exact JSON instructions -->
|
||
|
|
<footer class="bg-[#F6F8FC] dark:bg-slate-950 w-full py-20 border-t border-slate-200 dark:border-slate-800 fade-in transition-opacity">
|
||
|
|
<div class="max-w-7xl mx-auto px-12 grid grid-cols-1 md:grid-cols-2 items-center gap-8">
|
||
|
|
<!-- Left: Brand & Copyright -->
|
||
|
|
<div class="flex flex-col gap-2 text-center md:text-left">
|
||
|
|
<div class="text-lg font-black text-slate-900 dark:text-white flex items-center justify-center md:justify-start gap-2">
|
||
|
|
<span class="material-symbols-outlined icon-fill text-blue-600 dark:text-blue-400">psychology</span>
|
||
|
|
知习 AI
|
||
|
|
</div>
|
||
|
|
<p class="font-manrope text-xs tracking-wide uppercase font-semibold text-slate-400">
|
||
|
|
© 2024 知习 AI. Intellectual Serenity for Lifelong Learners.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- Right: Links -->
|
||
|
|
<div class="flex flex-wrap justify-center md:justify-end gap-6 font-manrope text-xs tracking-wide uppercase font-semibold text-slate-400">
|
||
|
|
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="#">隐私政策</a>
|
||
|
|
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="#">服务条款</a>
|
||
|
|
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="#">联系我们</a>
|
||
|
|
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" href="#">关于我们</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</body></html>
|