wangdl/web-projects
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 全面优化 UI 样式、动画系统与交互体验

Browse Source 
- 新增加载进度条（BaseLayout）

- 重构动画系统：修复 fadeInUp、新增 revealUp/pageEnter/blurIn 入场动画

- 添加 IntersectionObserver 滚动揭示机制

- 产品页：修复弹幕滚动效果、统一 Hero 区域样式与首页一致

- 产品理念页：重新设计对比叙事区、学习闭环图、产品原则卡片

- 支持页：完全重构表单布局、设备 pills 选中态、FAQ 双列网格

- 隐私政策页：重构侧边栏导航

- 首页：统一 Portal 三卡片边框、重构 Learning Loop 流程图

- Footer 去除冗余 margin-top、全局 CSS 新增 ethereal-glow 公共样式
This commit is contained in:
WangDL 2026-05-07 23:15:35 +08:00
parent 3c4e0808fc
commit 7590daebc0
13 changed files with 785 additions and 437 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -3038,7 +3038,6 @@
"resolved": "https://registry.npmmirror.com/jiti/-/jiti-2.6.1.tgz", "resolved": "https://registry.npmmirror.com/jiti/-/jiti-2.6.1.tgz",
"integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==", "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
"license": "MIT", "license": "MIT",
"peer": true,
"bin": { "bin": {
"jiti": "lib/jiti-cli.mjs" "jiti": "lib/jiti-cli.mjs"
} }
@ -3069,7 +3068,6 @@
"resolved": "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.32.0.tgz", "resolved": "https://registry.npmmirror.com/lightningcss/-/lightningcss-1.32.0.tgz",
"integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==", "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
"license": "MPL-2.0", "license": "MPL-2.0",
"peer": true,
"dependencies": { "dependencies": {
"detect-libc": "^2.0.3" "detect-libc": "^2.0.3"
}, },

2
src/components/Footer.astro
View File

@ -7,7 +7,7 @@ const footerLinks = [
]; ];
--- ---
<footer style="width: 100%; margin-top: 128px; background-color: #f8fafc; border-top: 1px solid #e2e8f0;"> <footer style="width: 100%; margin-top: 0; background-color: #f8fafc; border-top: 1px solid #e2e8f0;">
<div style="max-width: 80rem; margin: 0 auto; padding: 80px 32px;"> <div style="max-width: 80rem; margin: 0 auto; padding: 80px 32px;">
<div style="display: flex; flex-direction: column; align-items: center; gap: 32px; margin-bottom: 32px;" class="footer-links"> <div style="display: flex; flex-direction: column; align-items: center; gap: 32px; margin-bottom: 32px;" class="footer-links">
<div style="display: flex; align-items: center; gap: 8px; color: #4F7CFF;"> <div style="display: flex; align-items: center; gap: 8px; color: #4F7CFF;">

23
src/layouts/BaseLayout.astro
View File

@ -41,6 +41,29 @@ const ogImageUrl = ogImage || `${siteUrl}/og-default.png`;
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head> </head>
<body class="antialiased overflow-x-hidden selection:bg-blue-100"> <body class="antialiased overflow-x-hidden selection:bg-blue-100">
<div id="global-progress" class="fixed top-0 left-0 h-[3px] bg-gradient-to-r from-primary via-tech-blue to-secondary z-[9999] transition-[width]" style="width: 0%; border-radius: 0 3px 3px 0; box-shadow: 0 0 8px rgba(21, 80, 211, 0.3);"></div>
<slot /> <slot />
</body> </body>
<script>
const bar = document.getElementById('global-progress');
function updateProgress() {
const scrollTop = window.scrollY;
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
const progress = docHeight > 0 ? Math.min((scrollTop / docHeight) * 100, 100) : 0;
bar.style.width = progress + '%';
}
window.addEventListener('scroll', updateProgress, { passive: true });
window.addEventListener('resize', updateProgress, { passive: true });
updateProgress();
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('revealed');
}
});
}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.animate-reveal-up').forEach(el => revealObserver.observe(el));
</script>
</html> </html>

2
src/pages/changelog.astro
View File

@ -19,7 +19,7 @@ const changelog = [
description="龙德AI学习的最新更新和开发进度。" description="龙德AI学习的最新更新和开发进度。"
> >
<Header /> <Header />
<main> <main class="animate-page-enter">
<Hero <Hero
title="更新日志" title="更新日志"
subtitle="产品开发进度与更新记录" subtitle="产品开发进度与更新记录"

2
src/pages/download.astro
View File

@ -11,7 +11,7 @@ import CTA from '../components/CTA.astro';
description="龙德AI学习 Mac 版下载，敬请期待。" description="龙德AI学习 Mac 版下载，敬请期待。"
> >
<Header /> <Header />
<main> <main class="animate-page-enter">
<Hero <Hero
title="Mac 应用" title="Mac 应用"
subtitle="龙德AI学习 Mac 版正在开发中" subtitle="龙德AI学习 Mac 版正在开发中"

140
src/pages/index.astro
View File

@ -136,7 +136,7 @@ import Footer from '../components/Footer.astro';
</section> </section>
<!-- Portal Section --> <!-- Portal Section -->
<section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10"> <section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10 animate-reveal-up">
<div class="text-center mb-16"> <div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold text-navy mb-4" style="font-family: var(--font-manrope); letter-spacing: -0.02em;">今天想从哪里开始？</h2> <h2 class="text-4xl md:text-5xl font-bold text-navy mb-4" style="font-family: var(--font-manrope); letter-spacing: -0.02em;">今天想从哪里开始？</h2>
<p class="text-base text-slate-500">选择一个入口，进入你的专属学习流</p> <p class="text-base text-slate-500">选择一个入口，进入你的专属学习流</p>
@ -144,19 +144,19 @@ import Footer from '../components/Footer.astro';
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<a class="glass-card-premium p-10 rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer" href="#"> <a class="glass-card-premium p-10 rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer" href="#">
<div class="w-16 h-16 rounded-2xl bg-slate-50 flex items-center justify-center text-tech-blue border border-slate-100 group-hover:bg-blue-50 transition-colors"> <div class="w-16 h-16 rounded-2xl bg-slate-50 flex items-center justify-center text-tech-blue border border-slate-100 group-hover:bg-blue-50 group-hover:border-blue-100 transition-colors">
<span class="material-symbols-outlined text-3xl">upload_file</span> <span class="material-symbols-outlined text-3xl">upload_file</span>
</div> </div>
<div> <div>
<h3 class="text-xl font-semibold text-navy mb-2">导入知识库</h3> <h3 class="text-xl font-semibold text-navy mb-2">导入知识库</h3>
<p class="text-sm text-slate-500">上传文档、笔记，让 AI 为你梳理结构。</p> <p class="text-sm text-slate-500">上传文档、笔记，让 AI 为你梳理结构。</p>
</div> </div>
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0"> <div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0">
开始导入 <span class="material-symbols-outlined text-sm">arrow_forward</span> 开始导入 <span class="material-symbols-outlined text-sm">arrow_forward</span>
</div> </div>
</a> </a>
<a class="glass-card-premium p-10 rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer border-tech-blue/20" href="#"> <a class="glass-card-premium p-10 rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer" href="#" style="background: rgba(235, 240, 255, 0.65);">
<div class="w-16 h-16 rounded-2xl bg-blue-50 flex items-center justify-center text-tech-blue border border-blue-100 group-hover:scale-110 transition-transform"> <div class="w-16 h-16 rounded-2xl bg-blue-50 flex items-center justify-center text-tech-blue border border-blue-100 group-hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-3xl">psychology</span> <span class="material-symbols-outlined text-3xl">psychology</span>
</div> </div>
@ -164,20 +164,20 @@ import Footer from '../components/Footer.astro';
<h3 class="text-xl font-semibold text-navy mb-2">开启主动回忆</h3> <h3 class="text-xl font-semibold text-navy mb-2">开启主动回忆</h3>
<p class="text-sm text-slate-500">基于艾宾浩斯曲线，检验你的真实掌握度。</p> <p class="text-sm text-slate-500">基于艾宾浩斯曲线，检验你的真实掌握度。</p>
</div> </div>
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0"> <div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0">
开始测试 <span class="material-symbols-outlined text-sm">arrow_forward</span> 开始测试 <span class="material-symbols-outlined text-sm">arrow_forward</span>
</div> </div>
</a> </a>
<a class="glass-card-premium p-10 rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer" href="#"> <a class="glass-card-premium p-10 rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer" href="#">
<div class="w-16 h-16 rounded-2xl bg-slate-50 flex items-center justify-center text-tech-blue border border-slate-100 group-hover:bg-blue-50 transition-colors"> <div class="w-16 h-16 rounded-2xl bg-slate-50 flex items-center justify-center text-tech-blue border border-slate-100 group-hover:bg-blue-50 group-hover:border-blue-100 transition-colors">
<span class="material-symbols-outlined text-3xl">fact_check</span> <span class="material-symbols-outlined text-3xl">fact_check</span>
</div> </div>
<div> <div>
<h3 class="text-xl font-semibold text-navy mb-2">查看今日复习</h3> <h3 class="text-xl font-semibold text-navy mb-2">查看今日复习</h3>
<p class="text-sm text-slate-500">AI 为你安排的最优复习路径，高效不遗漏。</p> <p class="text-sm text-slate-500">AI 为你安排的最优复习路径，高效不遗漏。</p>
</div> </div>
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0"> <div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 text-sm font-medium opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0">
查看计划 <span class="material-symbols-outlined text-sm">arrow_forward</span> 查看计划 <span class="material-symbols-outlined text-sm">arrow_forward</span>
</div> </div>
</a> </a>
@ -185,60 +185,134 @@ import Footer from '../components/Footer.astro';
</section> </section>
<!-- Learning Loop Section --> <!-- Learning Loop Section -->
<section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10"> <section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10 animate-reveal-up">
<div class="text-center mb-24"> <div class="text-center mb-20">
<h2 class="text-4xl md:text-5xl font-bold text-navy mb-4" style="font-family: var(--font-manrope); letter-spacing: -0.02em;">不是帮你多看一点，而是帮你真正学会</h2> <h2 class="text-4xl md:text-5xl font-bold text-navy mb-4" style="font-family: var(--font-manrope); letter-spacing: -0.02em;">不是帮你多看一点，而是帮你真正学会</h2>
<p class="text-base text-slate-500">构建可持续的闭环学习流</p> <p class="text-base text-slate-500">构建可持续的闭环学习流</p>
</div> </div>
<div class="relative w-full max-w-4xl mx-auto flex flex-col md:flex-row items-center justify-between gap-12 md:gap-4"> <!-- Desktop Flow -->
<div class="hidden md:block absolute top-1/2 left-[10%] right-[10%] h-0.5 bg-gradient-to-r from-slate-200 via-tech-blue/30 to-slate-200 -translate-y-1/2 z-0"></div> <div class="hidden md:flex items-center justify-center gap-0 max-w-4xl mx-auto relative">
<div class="md:hidden absolute left-1/2 top-[10%] bottom-[10%] w-0.5 bg-gradient-to-b from-slate-200 via-tech-blue/30 to-slate-200 -translate-x-1/2 z-0"></div> <!-- Connecting track -->
<div class="absolute top-1/2 left-[8%] right-[8%] h-[6px] bg-slate-100 rounded-full -translate-y-1/2 z-0"></div>
<div class="absolute top-1/2 left-[8%] right-[8%] h-[6px] rounded-full -translate-y-1/2 z-0" style="background: linear-gradient(90deg, #e2e8f0 0%, #b5c4ff 50%, #e2e8f0 100%);"></div>
<div class="relative z-10 flex flex-col items-center text-center gap-4 group cursor-pointer"> <!-- Step 1 -->
<div class="w-20 h-20 rounded-full bg-white shadow-xl shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-700 group-hover:text-tech-blue group-hover:scale-110 transition-all duration-300 animate-breathe"> <div class="relative z-10 flex flex-col items-center text-center gap-3 group flex-1">
<span class="material-symbols-outlined text-3xl">input</span> <div class="w-[88px] h-[88px] rounded-2xl bg-white shadow-lg shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 group-hover:text-tech-blue group-hover:border-tech-blue/30 group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
<span class="material-symbols-outlined text-[32px]">input</span>
</div> </div>
<div> <div>
<h4 class="font-bold text-navy mb-1">1. 摄入</h4> <h4 class="font-bold text-navy text-sm mb-1">摄入</h4>
<p class="text-xs text-slate-500">知识结构化</p> <p class="text-[11px] text-slate-400">知识结构化</p>
</div> </div>
</div> </div>
<div class="relative z-10 flex flex-col items-center text-center gap-4 group cursor-pointer"> <!-- Arrow -->
<div class="w-20 h-20 rounded-full bg-white shadow-xl shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-700 group-hover:text-tech-blue group-hover:scale-110 transition-all duration-300 animate-breathe"> <div class="relative z-10 flex items-center justify-center w-10 shrink-0">
<span class="material-symbols-outlined text-3xl">memory</span> <span class="material-symbols-outlined text-slate-300 text-xl">arrow_forward</span>
</div>
<!-- Step 2 -->
<div class="relative z-10 flex flex-col items-center text-center gap-3 group flex-1">
<div class="w-[88px] h-[88px] rounded-2xl bg-white shadow-lg shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 group-hover:text-tech-blue group-hover:border-tech-blue/30 group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
<span class="material-symbols-outlined text-[32px]">memory</span>
</div> </div>
<div> <div>
<h4 class="font-bold text-navy mb-1">2. 回忆</h4> <h4 class="font-bold text-navy text-sm mb-1">回忆</h4>
<p class="text-xs text-slate-500">主动提取</p> <p class="text-[11px] text-slate-400">主动提取</p>
</div> </div>
</div> </div>
<div class="relative z-10 flex flex-col items-center text-center gap-4 group cursor-pointer mt-8 md:mt-0 md:-translate-y-8"> <!-- Arrow -->
<div class="w-24 h-24 rounded-full bg-tech-blue shadow-2xl shadow-blue-500/40 border-4 border-white flex items-center justify-center text-white animate-breathe"> <div class="relative z-10 flex items-center justify-center w-10 shrink-0">
<span class="material-symbols-outlined text-4xl">auto_awesome</span> <span class="material-symbols-outlined text-slate-300 text-xl">arrow_forward</span>
</div>
<!-- Step 3 - Elevated center -->
<div class="relative z-20 flex flex-col items-center text-center gap-3 group flex-1 -mt-8">
<div class="w-[104px] h-[104px] rounded-2xl bg-tech-blue shadow-2xl shadow-blue-500/30 flex items-center justify-center text-white group-hover:scale-105 transition-all duration-300">
<span class="material-symbols-outlined text-[40px]">auto_awesome</span>
</div> </div>
<div> <div>
<h4 class="font-bold text-tech-blue mb-1 text-lg">3. AI 分析</h4> <h4 class="font-bold text-tech-blue text-base mb-1">AI 分析</h4>
<p class="text-xs text-slate-600 font-medium">精准定位薄弱点</p> <p class="text-[11px] text-slate-500 font-medium">精准定位薄弱点</p>
</div> </div>
</div> </div>
<div class="relative z-10 flex flex-col items-center text-center gap-4 group cursor-pointer"> <!-- Arrow -->
<div class="w-20 h-20 rounded-full bg-white shadow-xl shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-700 group-hover:text-tech-blue group-hover:scale-110 transition-all duration-300 animate-breathe"> <div class="relative z-10 flex items-center justify-center w-10 shrink-0">
<span class="material-symbols-outlined text-3xl">update</span> <span class="material-symbols-outlined text-slate-300 text-xl">arrow_forward</span>
</div>
<!-- Step 4 -->
<div class="relative z-10 flex flex-col items-center text-center gap-3 group flex-1">
<div class="w-[88px] h-[88px] rounded-2xl bg-white shadow-lg shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 group-hover:text-tech-blue group-hover:border-tech-blue/30 group-hover:shadow-xl group-hover:-translate-y-1 transition-all duration-300">
<span class="material-symbols-outlined text-[32px]">update</span>
</div> </div>
<div> <div>
<h4 class="font-bold text-navy mb-1">4. 巩固</h4> <h4 class="font-bold text-navy text-sm mb-1">巩固</h4>
<p class="text-xs text-slate-500">动态复习计划</p> <p class="text-[11px] text-slate-400">动态复习计划</p>
</div>
</div>
<!-- Loop back arrow -->
<div class="absolute -bottom-4 left-[6%] right-[6%] flex items-center justify-center z-0">
<div class="flex items-center gap-1 text-[10px] text-slate-300 font-medium tracking-widest uppercase">
<span class="material-symbols-outlined text-xs">replay</span>
循环迭代
</div>
</div>
</div>
<!-- Mobile Flow -->
<div class="flex md:hidden flex-col items-center gap-0 max-w-sm mx-auto relative">
<div class="absolute left-1/2 top-[60px] bottom-[60px] w-[4px] rounded-full -translate-x-1/2 z-0" style="background: linear-gradient(180deg, #e2e8f0 0%, #b5c4ff 50%, #e2e8f0 100%);"></div>
<div class="relative z-10 flex items-center gap-5 w-full py-5 group">
<div class="w-14 h-14 rounded-xl bg-white shadow-md shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 shrink-0 group-hover:text-tech-blue transition-colors">
<span class="material-symbols-outlined text-2xl">input</span>
</div>
<div>
<h4 class="font-bold text-navy text-sm">摄入</h4>
<p class="text-xs text-slate-400">知识结构化</p>
</div>
</div>
<div class="relative z-10 flex items-center gap-5 w-full py-5 group">
<div class="w-14 h-14 rounded-xl bg-white shadow-md shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 shrink-0 group-hover:text-tech-blue transition-colors">
<span class="material-symbols-outlined text-2xl">memory</span>
</div>
<div>
<h4 class="font-bold text-navy text-sm">回忆</h4>
<p class="text-xs text-slate-400">主动提取</p>
</div>
</div>
<div class="relative z-20 flex items-center gap-5 w-full py-5 group">
<div class="w-16 h-16 rounded-xl bg-tech-blue shadow-lg shadow-blue-500/30 flex items-center justify-center text-white shrink-0">
<span class="material-symbols-outlined text-[28px]">auto_awesome</span>
</div>
<div>
<h4 class="font-bold text-tech-blue text-sm">AI 分析</h4>
<p class="text-xs text-slate-500 font-medium">精准定位薄弱点</p>
</div>
</div>
<div class="relative z-10 flex items-center gap-5 w-full py-5 group">
<div class="w-14 h-14 rounded-xl bg-white shadow-md shadow-slate-200/50 border border-slate-100 flex items-center justify-center text-slate-500 shrink-0 group-hover:text-tech-blue transition-colors">
<span class="material-symbols-outlined text-2xl">update</span>
</div>
<div>
<h4 class="font-bold text-navy text-sm">巩固</h4>
<p class="text-xs text-slate-400">动态复习计划</p>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Preview Section --> <!-- Preview Section -->
<section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10"> <section class="py-40 px-6 md:px-12 max-w-7xl mx-auto relative z-10 animate-reveal-up">
<div class="bg-gradient-to-br from-slate-50 to-blue-50 rounded-[3rem] p-8 md:p-16 border border-blue-100/50 overflow-hidden relative shadow-xl shadow-blue-500/5"> <div class="bg-gradient-to-br from-slate-50 to-blue-50 rounded-[3rem] p-8 md:p-16 border border-blue-100/50 overflow-hidden relative shadow-xl shadow-blue-500/5">
<div class="absolute top-0 right-0 w-96 h-96 bg-blue-300/10 rounded-full blur-[80px]"></div> <div class="absolute top-0 right-0 w-96 h-96 bg-blue-300/10 rounded-full blur-[80px]"></div>

298
src/pages/philosophy.astro
View File

@ -37,116 +37,204 @@ import Footer from '../components/Footer.astro';
</header> </header>
<!-- 2. Contrast Narrative Section --> <!-- 2. Contrast Narrative Section -->
<section class="py-[120px] z-10 relative px-6 max-w-[1200px] mx-auto"> <section class="py-[120px] z-10 relative px-6 max-w-[1200px] mx-auto animate-reveal-up">
<div class="text-center mb-24"> <div class="text-center mb-20">
<h2 class="font-headline-lg text-on-surface">学习最大的敌人，往往不是没有资料。</h2> <h2 class="font-headline-lg text-on-surface">学习最大的敌人，往往不是没有资料。</h2>
<p class="font-body-base text-on-surface-variant mt-4">是无序的收集，制造了"我已经懂了"的幻觉。</p> <p class="font-body-base text-on-surface-variant mt-4">是无序的收集，制造了"我已经懂了"的幻觉。</p>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-12 gap-16 items-center"> <div class="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
<!-- Left Side: Fragmented Chaos --> <!-- Left Side: Fragmented Chaos - 散落的伪学习卡片 -->
<div class="col-span-1 md:col-span-5 h-[400px] relative"> <div class="col-span-1 md:col-span-5 relative h-[480px]">
<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 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> </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> 收藏 <!-- 卡片 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> </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> 划线 <!-- 卡片 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>
<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> </div>
<!-- Center Divider --> <!-- Center Divider -->
<div class="col-span-1 md:col-span-2 flex justify-center items-center h-full"> <div class="col-span-1 md:col-span-2 flex justify-center items-center">
<div class="w-px h-32 md:h-full bg-gradient-to-b from-transparent via-outline-variant to-transparent hidden md:block"></div> <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> <span class="material-symbols-outlined text-outline-variant text-4xl block md:hidden rotate-90">arrow_forward</span>
</div> </div>
<!-- Right Side: Structured Path --> <!-- Right Side: Structured Learning Path -->
<div class="col-span-1 md:col-span-5 flex flex-col gap-6 relative"> <div class="col-span-1 md:col-span-5 flex flex-col gap-5 relative">
<div class="absolute left-[27px] top-4 bottom-4 w-px bg-primary-fixed-dim z-0"></div> <!-- 纵向连线 -->
<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-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"> <div class="flex items-center gap-5 relative z-10 group">
<span class="material-symbols-outlined">record_voice_over</span> <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>
<span class="font-headline-md text-on-surface">复述</span>
</div> </div>
<div class="flex items-center gap-6 relative z-10"> <div class="flex items-center gap-5 relative z-10 group">
<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"> <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">output</span> <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>
<span class="font-headline-md text-on-surface">输出</span>
</div> </div>
<div class="flex items-center gap-6 relative z-10"> <div class="flex items-center gap-5 relative z-10 group">
<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"> <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">sync_alt</span> <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>
<span class="font-headline-md text-on-surface">反馈</span>
</div> </div>
<div class="flex items-center gap-6 relative z-10"> <div class="flex items-center gap-5 relative z-10 group">
<div class="w-14 h-14 rounded-full bg-primary shadow-lg shadow-primary/20 flex items-center justify-center text-on-primary"> <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">model_training</span> <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>
<span class="font-headline-md text-on-surface font-bold text-primary">复习</span>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- 3. Core Learning Loop Section --> <!-- 3. Core Learning Loop Section -->
<section class="py-[120px] z-10 relative bg-surface-container-low/50"> <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"> <div class="max-w-[1200px] mx-auto px-6 text-center">
<h2 class="font-headline-lg text-on-surface mb-24">真正的学习，是一个闭环。</h2> <h2 class="font-headline-lg text-on-surface mb-20">真正的学习，是一个闭环。</h2>
<div class="relative w-full max-w-[600px] h-[600px] mx-auto flex items-center justify-center"> <div class="relative w-full max-w-[540px] h-[540px] 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="absolute inset-0 bg-primary-fixed opacity-15 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> <!-- 轨道环 -->
<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> <span class="font-label-sm">你</span>
</div> </div>
<!-- Orbital Ring --> <!-- 轨道节点 - 顶部: 输入 -->
<div class="absolute inset-8 rounded-full border border-primary-fixed-dim border-dashed animate-spin opacity-50 z-0" style="animation-duration: 60s;"></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">
<!-- Nodes positioned pseudo-circularly --> <span class="material-symbols-outlined text-sm">input</span>
<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"> </div>
<span class="material-symbols-outlined text-outline">input</span> <div class="text-left">
<span class="font-label-sm text-on-surface">输入</span> <span class="font-label-sm text-on-surface">输入</span>
<p class="text-[11px] text-on-surface-variant leading-tight">阅读 · 收集</p>
</div>
</div> </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> <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">
<span class="font-label-sm text-on-surface">输出</span> <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>
<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> <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">
<span class="font-label-sm text-on-surface">反馈</span> <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>
<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> <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">
<span class="font-label-sm text-on-surface">调整</span> <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>
<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> <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">
<span class="font-label-sm text-on-surface">复习</span> <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> </div>
</div> </div>
</section> </section>
<!-- 4. AI Feedback System Section (Immersive UI Mockup) --> <!-- 4. AI Feedback System Section (Immersive UI Mockup) -->
<section class="py-[120px] z-10 relative px-6"> <section class="py-[120px] z-10 relative px-6 animate-reveal-up">
<div class="max-w-4xl mx-auto text-center mb-16"> <div class="max-w-4xl mx-auto text-center mb-16">
<h2 class="font-headline-lg text-on-surface">AI 不应该只是总结工具，<br/>而应该成为学习过程里的反馈系统。</h2> <h2 class="font-headline-lg text-on-surface">AI 不应该只是总结工具，<br/>而应该成为学习过程里的反馈系统。</h2>
</div> </div>
@ -223,55 +311,73 @@ import Footer from '../components/Footer.astro';
</section> </section>
<!-- 5. Principles Manifesto Section --> <!-- 5. Principles Manifesto Section -->
<section class="py-[120px] z-10 relative px-6 max-w-4xl mx-auto"> <section class="py-[120px] z-10 relative px-6 max-w-[1200px] mx-auto animate-reveal-up">
<h2 class="font-display-xl text-on-surface mb-16">知习 AI 的产品原则</h2> <div class="text-center mb-16">
<h2 class="font-display-xl text-on-surface mb-4">知习 AI 的产品原则</h2>
<div class="flex flex-col"> <p class="font-body-base text-on-surface-variant">五条核心信念，定义了我们的产品设计哲学</p>
<!-- Principle 01 --> </div>
<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="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"> <div class="flex-1">
<h3 class="font-headline-md text-on-surface mb-3">少一点信息噪音，多一点学习反馈</h3> <h3 class="font-headline-md text-on-surface mb-2">少一点信息噪音，多一点学习反馈</h3>
<p class="font-body-base text-on-surface-variant">信息爆炸的时代，缺的不是内容，而是对内容的深度加工。我们抑制推流，放大反馈，让每一次交互都指向认知升级。</p> <p class="font-body-base text-on-surface-variant leading-relaxed">信息爆炸的时代，缺的不是内容，而是对内容的深度加工。我们抑制推流，放大反馈，让每一次交互都指向认知升级。</p>
</div> </div>
</div> </div>
<!-- Principle 02 --> <!-- Principle 02 + 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="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="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 items-center gap-4 mb-4">
<div class="flex-1"> <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>
<h3 class="font-headline-md text-on-surface mb-3">知识需要沉淀，而不是被无限折叠</h3> <div class="w-12 h-12 rounded-xl bg-secondary-fixed/40 text-secondary flex items-center justify-center ml-auto">
<p class="font-body-base text-on-surface-variant">拒绝复杂的层级树和无底洞般的标签库。知识的结构应该如大脑的神经网络般扁平而互联，易于提取，利于生长。</p> <span class="material-symbols-outlined text-xl">psychology</span>
</div>
</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>
<!-- Principle 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="border-t border-outline-variant py-10 flex flex-col md:flex-row gap-6 md:gap-12 items-start group"> <div class="flex items-center gap-4 mb-4">
<div class="text-[80px] font-light leading-[0.8] text-tertiary-fixed-dim/40 group-hover:text-primary transition-colors duration-500">03</div> <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="flex-1"> <div class="w-12 h-12 rounded-xl bg-primary-fixed/40 text-primary-container flex items-center justify-center ml-auto">
<h3 class="font-headline-md text-on-surface mb-3">真正的理解来自于高质量的输出</h3> <span class="material-symbols-outlined text-xl">record_voice_over</span>
<p class="font-body-base text-on-surface-variant">费曼技巧的数字化实践。只有当你能向 AI 清晰地复述一个概念，并经受住追问时，这个知识才真正属于你。</p> </div>
</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> </div>
<!-- Principle 04 --> <!-- Principle 04 + 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="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="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 items-center gap-4 mb-4">
<div class="flex-1"> <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>
<h3 class="font-headline-md text-on-surface mb-3">反馈必须即时、精准且具有可操作性</h3> <div class="w-12 h-12 rounded-xl bg-primary-container/20 text-primary flex items-center justify-center ml-auto">
<p class="font-body-base text-on-surface-variant">模糊的赞美毫无意义。系统应指出逻辑断层，补充缺失的背景知识，并提供明确的下一步复习建议。</p> <span class="material-symbols-outlined text-xl">analytics</span>
</div>
</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>
<!-- Principle 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="border-t border-outline-variant py-10 flex flex-col md:flex-row gap-6 md:gap-12 items-start group"> <div class="flex items-center gap-4 mb-4">
<div class="text-[80px] font-light leading-[0.8] text-tertiary-fixed-dim/40 group-hover:text-primary transition-colors duration-500">05</div> <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="flex-1"> <div class="w-12 h-12 rounded-xl bg-tertiary-container/20 text-tertiary flex items-center justify-center ml-auto">
<h3 class="font-headline-md text-on-surface mb-3">少一点万能承诺，多一点可验证进步</h3> <span class="material-symbols-outlined text-xl">insights</span>
<p class="font-body-base text-on-surface-variant">不承诺能帮你记住一切，但保证让你清楚自己真正掌握了什么。用数据可视化展现认知能力的客观提升。</p> </div>
</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>
<div class="border-t border-outline-variant"></div>
</div> </div>
</section> </section>

157
src/pages/privacy.astro
View File

@ -28,23 +28,23 @@ const lastUpdated = '2026 年 5 月';
</header> </header>
<!-- Main Content --> <!-- Main Content -->
<main style="max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; padding-bottom: 120px;"> <main class="animate-page-enter" style="max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; padding-bottom: 120px;">
<div style="display: flex; flex-direction: column; gap: 64px; position: relative;"> <div style="display: flex; flex-direction: column; gap: 64px; position: relative;">
<!-- Mobile TOC (shown on mobile) --> <!-- Mobile TOC (shown on mobile) -->
<div style="display: none;" class="mobile-toc"> <div style="display: none;" class="mobile-toc">
<details style="background: #f1f3ff; border-radius: 12px; padding: 16px;"> <details style="background: #f1f3ff; border-radius: 12px; padding: 16px;">
<summary style="font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #1550d3; cursor: pointer;">目录导航</summary> <summary style="font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: #1550d3; cursor: pointer;">目录导航</summary>
<nav style="display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-left: 16px; border-left: 2px solid #c3c5d7;"> <nav style="display: flex; flex-direction: column; gap: 8px; margin-top: 16px;">
<a href="#section-1" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">我们收集的信息</a> <button data-target="section-1" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">我们收集的信息</button>
<a href="#section-2" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">我们如何使用这些信息</a> <button data-target="section-2" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">我们如何使用这些信息</button>
<a href="#section-3" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">AI 服务相关说明</a> <button data-target="section-3" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">AI 服务相关说明</button>
<a href="#section-4" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">我们如何保护数据</a> <button data-target="section-4" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">我们如何保护数据</button>
<a href="#section-5" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">第三方服务</a> <button data-target="section-5" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">第三方服务</button>
<a href="#section-6" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">用户权利</a> <button data-target="section-6" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">用户权利</button>
<a href="#section-7" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">儿童隐私</a> <button data-target="section-7" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">儿童隐私</button>
<a href="#section-8" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">政策更新</a> <button data-target="section-8" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">政策更新</button>
<a href="#section-9" style="font-family: 'Inter', sans-serif; font-size: 13px; color: #434654; text-decoration: none;">联系我们</a> <button data-target="section-9" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-align: left; width: 100%;">联系我们</button>
</nav> </nav>
</details> </details>
</div> </div>
@ -53,16 +53,17 @@ const lastUpdated = '2026 年 5 月';
<!-- Sticky Sidebar (Table of Contents) - Desktop Only --> <!-- Sticky Sidebar (Table of Contents) - Desktop Only -->
<aside style="width: 25%; display: none;" class="sidebar"> <aside style="width: 25%; display: none;" class="sidebar">
<div style="position: sticky; top: 128px;"> <div style="position: sticky; top: 128px;">
<nav style="display: flex; flex-direction: column; gap: 16px; padding-left: 24px; border-left: 2px solid #c3c5d7;"> <div style="font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.08em; font-weight: 600; color: #737686; text-transform: uppercase; margin-bottom: 20px;">目录</div>
<a href="#section-1" class="toc-active active" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #1550d3; text-decoration: none; transition: color 0.2s;">我们收集的信息</a> <nav style="display: flex; flex-direction: column; gap: 1px;">
<a href="#section-2" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">我们如何使用这些信息</a> <button data-target="section-1" class="toc-btn toc-active" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #1550d3; font-weight: 600;">我们收集的信息</button>
<a href="#section-3" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">AI 服务相关说明</a> <button data-target="section-2" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">我们如何使用这些信息</button>
<a href="#section-4" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">我们如何保护数据</a> <button data-target="section-3" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">AI 服务相关说明</button>
<a href="#section-5" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">第三方服务</a> <button data-target="section-4" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">我们如何保护数据</button>
<a href="#section-6" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">用户权利</a> <button data-target="section-5" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">第三方服务</button>
<a href="#section-7" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">儿童隐私</a> <button data-target="section-6" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">用户权利</button>
<a href="#section-8" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">政策更新</a> <button data-target="section-7" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">儿童隐私</button>
<a href="#section-9" style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-decoration: none; transition: color 0.2s;">联系我们</a> <button data-target="section-8" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">政策更新</button>
<button data-target="section-9" class="toc-btn" style="font-family: 'Inter', sans-serif; font-size: 13px; border: none; background: none; cursor: pointer; padding: 10px 14px; border-radius: 8px; text-align: left; width: 100%; color: #737686; font-weight: 400;">联系我们</button>
</nav> </nav>
</div> </div>
</aside> </aside>
@ -183,7 +184,7 @@ const lastUpdated = '2026 年 5 月';
<Footer /> <Footer />
<style> <style is:global>
@media (min-width: 768px) { @media (min-width: 768px) {
.sidebar { .sidebar {
display: block !important; display: block !important;
@ -212,90 +213,66 @@ const lastUpdated = '2026 年 5 月';
cursor: pointer; cursor: pointer;
} }
.toc-active { .toc-btn {
color: #1550d3 !important; transition: background 0.2s;
} }
.sidebar nav a.active { .toc-btn:hover {
color: #1550d3 !important; background: #f1f3ff;
} }
.sidebar nav a:not(.active):hover { .toc-btn.toc-active {
color: #1550d3; background: #f1f3ff;
}
.mobile-toc nav a.active {
color: #1550d3 !important;
} }
</style> </style>
<script is:inline> <script is:inline>
document.addEventListener('DOMContentLoaded', function() { (function() {
const sections = document.querySelectorAll('section[id^="section-"]'); var sections = document.querySelectorAll('section[id^="section-"]');
const navLinks = document.querySelectorAll('a[href^="#section-"]'); var allBtns = document.querySelectorAll('.toc-btn');
let isClickScrolling = false; var clickLock = false;
let clickTimeout = null;
function setActive(id) {
function setActiveLink(targetId) { allBtns.forEach(function(b) {
navLinks.forEach(link => { b.style.color = '#737686';
link.classList.remove('active'); b.style.fontWeight = '400';
b.classList.remove('toc-active');
}); });
if (!id) return;
if (targetId) { var btn = document.querySelector('[data-target="' + id + '"]');
const activeLink = document.querySelector(`a[href="#${targetId}"]`); if (btn) {
if (activeLink) { btn.style.color = '#1550d3';
activeLink.classList.add('active'); btn.style.fontWeight = '600';
} btn.classList.add('toc-active');
} }
} }
function updateActiveNav() {
if (isClickScrolling) {
return;
}
const scrollPos = window.scrollY + 150;
let currentSection = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.offsetHeight;
if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
currentSection = section.getAttribute('id');
}
});
setActiveLink(currentSection);
}
navLinks.forEach(link => { allBtns.forEach(function(btn) {
link.addEventListener('click', function(e) { btn.addEventListener('click', function() {
const href = this.getAttribute('href'); var target = this.getAttribute('data-target');
if (href && href.startsWith('#')) { setActive(target);
const targetId = href.substring(1); var section = document.getElementById(target);
if (section) {
setActiveLink(targetId); clickLock = true;
section.scrollIntoView({ behavior: 'smooth', block: 'start' });
isClickScrolling = true; setTimeout(function() { clickLock = false; }, 800);
if (clickTimeout) {
clearTimeout(clickTimeout);
}
clickTimeout = setTimeout(function() {
isClickScrolling = false;
updateActiveNav();
}, 600);
} }
}); });
}); });
window.addEventListener('scroll', updateActiveNav); var observer = new IntersectionObserver(function(entries) {
setTimeout(function() { if (clickLock) return;
setActiveLink('section-1'); var intersecting = entries.filter(function(e) { return e.isIntersecting; });
}, 100); if (intersecting.length > 0) {
}); var best = intersecting.reduce(function(a, b) {
return a.boundingClientRect.top < b.boundingClientRect.top ? a : b;
});
setActive(best.target.id);
}
}, { threshold: 0.2, rootMargin: '0px' });
sections.forEach(function(s) { observer.observe(s); });
})();
</script> </script>
</body> </body>
</html> </html>

52
src/pages/product.astro
View File

@ -43,23 +43,25 @@ const painPoints = [
<main> <main>
<!-- Hero Section --> <!-- Hero Section -->
<section class="pt-40 pb-32 px-6 md:px-12 relative overflow-hidden"> <section class="min-h-screen flex flex-col items-center justify-start relative px-6 md:px-12 pt-32 pb-24 max-w-7xl mx-auto text-center overflow-visible">
<div class="max-w-5xl mx-auto text-center relative z-10"> <div class="ethereal-glow bg-blue-400/20 w-[600px] h-[600px] top-[-100px] left-1/2 -translate-x-1/2 animate-breathe absolute"></div>
<h1 class="text-5xl md:text-7xl font-extrabold text-navy mb-6 max-w-4xl mx-auto leading-tight" style="font-family: var(--font-manrope); letter-spacing: -0.02em;">
更懂你，<span class="text-tech-blue">更会学</span> <h1 class="font-bold text-6xl md:text-8xl text-navy mb-6 max-w-5xl relative z-10 tracking-tight animate-fade-in-up" style="font-family: var(--font-manrope); letter-spacing: -0.04em;">
</h1> 更懂你，<span class="text-tech-blue">更会学</span>
<p class="text-lg md:text-xl text-slate-600 max-w-2xl mx-auto mb-10 leading-relaxed"> </h1>
AI 驱动的系统化学习助手，把知识库、主动回忆、AI 分析和复习计划结合起来，帮你从"看过"变成"真正学会"。
</p> <p class="text-lg md:text-xl text-slate-600 max-w-2xl mb-12 relative z-10 animate-fade-in-up" style="animation-delay: 0.2s;">
AI 驱动的系统化学习助手，把知识库、主动回忆、AI 分析和复习计划结合起来，帮你从"看过"变成"真正学会"。
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-20"> </p>
<a href="/waitlist" class="w-full sm:w-auto text-white font-medium px-8 py-4 rounded-full hover:shadow-xl transition-all duration-300 hover:-translate-y-1 btn-primary-gradient">
加入等待名单 <div class="flex flex-col sm:flex-row gap-6 mb-24 relative z-10 animate-fade-in-up" style="animation-delay: 0.3s;">
</a> <a href="/waitlist" class="text-white font-medium px-10 py-5 rounded-full shadow-2xl shadow-blue-500/30 hover:shadow-blue-500/50 transition-all hover:-translate-y-1 text-sm btn-primary-gradient">
<a href="/philosophy" class="w-full sm:w-auto bg-white/50 backdrop-blur-md text-navy font-medium px-8 py-4 rounded-full border border-slate-200 hover:bg-white/80 transition-all duration-300"> 加入等待名单
了解产品理念 </a>
</a> <a href="/philosophy" class="bg-white/80 backdrop-blur-sm text-navy font-medium px-10 py-5 rounded-full hover:bg-white transition-all border border-slate-200 shadow-lg hover:shadow-xl hover:-translate-y-1 text-sm">
</div> 了解产品理念
</a>
</div>
<div class="relative max-w-5xl mx-auto"> <div class="relative max-w-5xl mx-auto">
<div class="absolute inset-0 bg-tech-blue/10 blur-[100px] rounded-full"></div> <div class="absolute inset-0 bg-tech-blue/10 blur-[100px] rounded-full"></div>
@ -72,8 +74,8 @@ const painPoints = [
<!-- 弹幕滚动效果 --> <!-- 弹幕滚动效果 -->
<div class="absolute inset-0 overflow-hidden pointer-events-none"> <div class="absolute inset-0 overflow-hidden pointer-events-none">
<!-- 第一层弹幕 - 从右向左 --> <!-- 从右向左 -->
<div class="absolute glass-card-premium rounded-xl shadow-xl animate-scroll-right flex items-center gap-3" style="top: 12%; right: 0; padding: 12px 16px; animation-duration: 12s;"> <div class="absolute glass-card-premium rounded-xl shadow-xl animate-danmaku-rtl flex items-center gap-3" style="top: 12%; left: 0; padding: 12px 16px; animation-delay: 0s;">
<div class="w-9 h-9 rounded-full bg-blue-100 text-tech-blue flex items-center justify-center shrink-0"> <div class="w-9 h-9 rounded-full bg-blue-100 text-tech-blue flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-sm">calendar_today</span> <span class="material-symbols-outlined text-sm">calendar_today</span>
</div> </div>
@ -83,7 +85,7 @@ const painPoints = [
</div> </div>
</div> </div>
<div class="absolute glass-card-premium rounded-xl shadow-xl animate-scroll-right flex items-center gap-3" style="top: 35%; right: 0; padding: 12px 16px; animation-duration: 14s;"> <div class="absolute glass-card-premium rounded-xl shadow-xl animate-danmaku-rtl flex items-center gap-3" style="top: 35%; left: 0; padding: 12px 16px; animation-delay: 5s;">
<div class="w-9 h-9 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center shrink-0"> <div class="w-9 h-9 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-sm">analytics</span> <span class="material-symbols-outlined text-sm">analytics</span>
</div> </div>
@ -93,7 +95,7 @@ const painPoints = [
</div> </div>
</div> </div>
<div class="absolute glass-card-premium rounded-lg shadow-xl animate-scroll-right flex items-center gap-2" style="top: 58%; right: 0; padding: 10px 14px; animation-duration: 11s;"> <div class="absolute glass-card-premium rounded-lg shadow-xl animate-danmaku-rtl flex items-center gap-2" style="top: 58%; left: 0; padding: 10px 14px; animation-delay: 10s;">
<div class="w-7 h-7 rounded-full bg-green-100 text-green-600 flex items-center justify-center shrink-0"> <div class="w-7 h-7 rounded-full bg-green-100 text-green-600 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-xs">check_circle</span> <span class="material-symbols-outlined text-xs">check_circle</span>
</div> </div>
@ -102,8 +104,8 @@ const painPoints = [
</div> </div>
</div> </div>
<!-- 第二层弹幕 - 从左向右 --> <!-- 从左向右 -->
<div class="absolute glass-card-premium rounded-xl shadow-xl animate-scroll-left flex items-center gap-3" style="top: 22%; left: 0; padding: 12px 16px; animation-duration: 13s;"> <div class="absolute glass-card-premium rounded-xl shadow-xl animate-danmaku-ltr flex items-center gap-3" style="top: 22%; left: 0; padding: 12px 16px; animation-delay: 2s;">
<div class="w-9 h-9 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center shrink-0"> <div class="w-9 h-9 rounded-full bg-pink-100 text-pink-600 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-sm">trending_up</span> <span class="material-symbols-outlined text-sm">trending_up</span>
</div> </div>
@ -113,7 +115,7 @@ const painPoints = [
</div> </div>
</div> </div>
<div class="absolute glass-card-premium rounded-lg shadow-xl animate-scroll-left flex items-center gap-2" style="top: 48%; left: 0; padding: 10px 14px; animation-duration: 10s;"> <div class="absolute glass-card-premium rounded-lg shadow-xl animate-danmaku-ltr flex items-center gap-2" style="top: 48%; left: 0; padding: 10px 14px; animation-delay: 7s;">
<div class="w-7 h-7 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center shrink-0"> <div class="w-7 h-7 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-xs">school</span> <span class="material-symbols-outlined text-xs">school</span>
</div> </div>
@ -128,7 +130,7 @@ const painPoints = [
</section> </section>
<!-- Pain Points Section --> <!-- Pain Points Section -->
<section class="py-32 px-6 md:px-12 bg-gradient-to-br from-slate-50 to-blue-50"> <section class="pt-32 pb-24 px-6 md:px-12 bg-gradient-to-br from-slate-50 to-blue-50 animate-reveal-up">
<div class="max-w-5xl mx-auto"> <div class="max-w-5xl mx-auto">
<div class="text-center mb-16"> <div class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-bold text-navy mb-4" style="font-family: var(--font-manrope); letter-spacing: -0.01em;"> <h2 class="text-4xl md:text-5xl font-bold text-navy mb-4" style="font-family: var(--font-manrope); letter-spacing: -0.01em;">

473
src/pages/support.astro
View File

@ -18,60 +18,56 @@ import Footer from '../components/Footer.astro';
<Header /> <Header />
<!-- Blueprint Pattern Overlay --> <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at center, #d2daf1 1px, transparent 1px); background-size: 24px 24px; opacity: 0.25; pointer-events: none; z-index: -1;"></div>
<div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at center, #cbd5e1 1px, transparent 1px); background-size: 24px 24px; opacity: 0.3; pointer-events: none; z-index: -1;"></div>
<!-- Main Content Canvas --> <main class="animate-page-enter" style="flex: 1; padding-top: 140px; padding-bottom: 0; padding-left: 24px; padding-right: 24px;">
<main style="flex: 1; padding-top: 140px; padding-bottom: 120px; padding-left: 24px; padding-right: 24px;">
<!-- Hero Section --> <!-- Hero Section -->
<section style="max-width: 1200px; margin: 0 auto 120px; text-align: center; position: relative;"> <section style="max-width: 1200px; margin: 0 auto 80px; text-align: center;">
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, #f1f3ff, transparent); opacity: 0.5; border-radius: 3rem; z-index: -1; transform: translateY(-48px);"></div> <h1 style="font-family: 'Manrope', sans-serif; font-size: 56px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; color: #131b2c; margin-bottom: 20px;">反馈与支持</h1>
<h1 style="font-family: 'Manrope', sans-serif; font-size: 64px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; color: #131b2c; margin-bottom: 24px;">反馈与支持</h1> <p style="font-family: 'Manrope', sans-serif; font-size: 18px; line-height: 1.7; font-weight: 400; color: #434654; max-width: 36rem; margin: 0 auto;">
<p style="font-family: 'Manrope', sans-serif; font-size: 18px; line-height: 1.6; font-weight: 400; color: #434654; max-width: 42rem; margin: 0 auto 64px;">
如果你在使用知习 AI 的过程中遇到问题，或者对产品有任何想法，欢迎告诉我们。每一条真实反馈，都会帮助产品变得更好。 如果你在使用知习 AI 的过程中遇到问题，或者对产品有任何想法，欢迎告诉我们。每一条真实反馈，都会帮助产品变得更好。
</p> </p>
<div style="position: relative; width: 100%; max-width: 32rem; margin: 0 auto; aspect-ratio: 1; margin-bottom: 48px;">
<img alt="A soft, ethereal 3D rendering of a translucent message bubble floating in a bright, minimalist studio environment."
style="width: 100%; height: 100%; object-fit: cover; border-radius: 2rem; box-shadow: 0 20px 60px rgba(18, 26, 43, 0.08);"
src="https://lh3.googleusercontent.com/aida/ADBb0uiz5ALBcopzHW6YiPJIDzON9d-GOLgDERcajQ5kK6yovNdiJMCmpuZuNlk2C-YswHpOGuS9QyUcXlhEDMo3ciIB-XsCDSeZR93nLEqTGzbBvsjg2oWn5KcH_pkkNe3q_XmhPLokaIzjt-5jnueWgsaYphhUsTmsce36ow9bTQwh3MksP4gKzioKsM5ZrIXXTjFpkDBH1JyvdKZ7hXd7gLYcZEHfCA2wy1QkKFIHnUJzZswW2oTYXSoRlSz65APtSrlIErBY7T9Kqg"/>
</div>
</section> </section>
<!-- Form & Contact Layout --> <!-- Form & Contact Sidebar -->
<section style="max-width: 1000px; margin: 0 auto 120px; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start;" class="contact-grid"> <section style="max-width: 1000px; margin: 0 auto 120px; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start;" class="contact-grid">
<!-- Feedback Form --> <!-- Feedback Form -->
<div style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 1.5rem; padding: 32px; box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04);" class="glass-card"> <div style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 1.5rem; padding: 40px; box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04);" class="glass-card">
<form style="display: flex; flex-direction: column; gap: 32px;">
<!-- Section: Basic Info -->
<!-- Name & Email Row --> <div style="margin-bottom: 36px;">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px;" class="form-row"> <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
<!-- Name --> <div style="width: 32px; height: 32px; border-radius: 10px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center;">
<div> <span class="material-symbols-outlined" style="font-size: 18px;">person</span>
<label style="display: block; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; margin-bottom: 8px;" for="name">
你的称呼 <span style="color: #595c60; font-weight: 400;">(可选)</span>
</label>
<input style="width: 100%; background-color: #ffffff; border: 1px solid #c3c5d7; border-radius: 8px; padding: 12px 16px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #131b2c; transition: all 0.2s; outline: none;"
id="name" placeholder="例如: 张三" type="text"/>
</div> </div>
<!-- Email --> <span style="font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; color: #131b2c;">基本信息</span>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;" class="form-row">
<div> <div>
<label style="display: block; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; margin-bottom: 8px;" for="email"> <label class="form-label" for="name">你的称呼 <span style="color: #737686; font-weight: 400;">(可选)</span></label>
电子邮箱 <span style="color: #ba1a1a;">*</span> <input class="form-input" id="name" placeholder="例如: 张三" type="text"/>
</label> </div>
<input style="width: 100%; background-color: #ffffff; border: 1px solid #c3c5d7; border-radius: 8px; padding: 12px 16px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #131b2c; transition: all 0.2s; outline: none;" <div>
id="email" placeholder="your@email.com" required type="email"/> <label class="form-label" for="email">电子邮箱 <span style="color: #ba1a1a;">*</span></label>
<input class="form-input" id="email" placeholder="your@email.com" required type="email"/>
</div> </div>
</div> </div>
</div>
<!-- Type --> <!-- Section: Feedback Content -->
<div> <div style="margin-bottom: 36px;">
<label style="display: block; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; margin-bottom: 8px;" for="type"> <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
反馈类型 <span style="color: #ba1a1a;">*</span> <div style="width: 32px; height: 32px; border-radius: 10px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center;">
</label> <span class="material-symbols-outlined" style="font-size: 18px;">edit</span>
<select style="width: 100%; background-color: #ffffff; border: 1px solid #c3c5d7; border-radius: 8px; padding: 12px 16px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #131b2c; transition: all 0.2s; outline: none; appearance: none;" </div>
id="type" required> <span style="font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; color: #131b2c;">反馈内容</span>
</div>
<div style="margin-bottom: 20px;">
<label class="form-label" for="type">反馈类型 <span style="color: #ba1a1a;">*</span></label>
<select class="form-input" id="type" required>
<option disabled selected value="">请选择反馈类型</option> <option disabled selected value="">请选择反馈类型</option>
<option value="功能建议">功能建议</option> <option value="功能建议">功能建议</option>
<option value="问题反馈">问题反馈</option> <option value="问题反馈">问题反馈</option>
@ -81,131 +77,136 @@ import Footer from '../components/Footer.astro';
</select> </select>
</div> </div>
<!-- Message -->
<div> <div>
<label style="display: block; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; margin-bottom: 8px;" for="message"> <label class="form-label" for="message">详细描述 <span style="color: #ba1a1a;">*</span></label>
反馈内容 <span style="color: #ba1a1a;">*</span> <textarea class="form-input" id="message" placeholder="详细描述你遇到的问题或建议..." required rows="6" style="resize: vertical; min-height: 140px;"></textarea>
</label>
<textarea style="width: 100%; background-color: #ffffff; border: 1px solid #c3c5d7; border-radius: 8px; padding: 12px 16px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #131b2c; transition: all 0.2s; outline: none; resize: vertical;"
id="message" placeholder="详细描述你遇到的问题或建议..." required rows="5"></textarea>
</div> </div>
</div>
<!-- Device --> <!-- Section: Device -->
<div> <div style="margin-bottom: 36px;">
<label style="display: block; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; margin-bottom: 12px;"> <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
使用设备 <div style="width: 32px; height: 32px; border-radius: 10px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center;">
</label> <span class="material-symbols-outlined" style="font-size: 18px;">devices</span>
<div style="display: flex; flex-wrap: wrap; gap: 12px;">
<label style="cursor: pointer;">
<input class="peer sr-only" name="device" type="radio" value="iPhone"/>
<div style="padding: 10px 20px; border-radius: 9999px; border: 1px solid #c3c5d7; color: #434654; font-family: 'Manrope', sans-serif; font-size: 14px; transition: all 0.2s;">iPhone</div>
</label>
<label style="cursor: pointer;">
<input class="peer sr-only" name="device" type="radio" value="iPad"/>
<div style="padding: 10px 20px; border-radius: 9999px; border: 1px solid #c3c5d7; color: #434654; font-family: 'Manrope', sans-serif; font-size: 14px; transition: all 0.2s;">iPad</div>
</label>
<label style="cursor: pointer;">
<input class="peer sr-only" name="device" type="radio" value="Mac"/>
<div style="padding: 10px 20px; border-radius: 9999px; border: 1px solid #c3c5d7; color: #434654; font-family: 'Manrope', sans-serif; font-size: 14px; transition: all 0.2s;">Mac</div>
</label>
<label style="cursor: pointer;">
<input class="peer sr-only" name="device" type="radio" value="Web"/>
<div style="padding: 10px 20px; border-radius: 9999px; border: 1px solid #c3c5d7; color: #434654; font-family: 'Manrope', sans-serif; font-size: 14px; transition: all 0.2s;">Web</div>
</label>
<label style="cursor: pointer;">
<input class="peer sr-only" name="device" type="radio" value="其他"/>
<div style="padding: 10px 20px; border-radius: 9999px; border: 1px solid #c3c5d7; color: #434654; font-family: 'Manrope', sans-serif; font-size: 14px; transition: all 0.2s;">其他</div>
</label>
</div> </div>
<span style="font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; color: #131b2c;">使用设备</span>
</div> </div>
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
<label class="device-pill">
<input type="radio" name="device" value="iPhone" class="sr-only"/>
<span>iPhone</span>
</label>
<label class="device-pill">
<input type="radio" name="device" value="iPad" class="sr-only"/>
<span>iPad</span>
</label>
<label class="device-pill">
<input type="radio" name="device" value="Mac" class="sr-only"/>
<span>Mac</span>
</label>
<label class="device-pill">
<input type="radio" name="device" value="Web" class="sr-only"/>
<span>Web</span>
</label>
<label class="device-pill">
<input type="radio" name="device" value="其他" class="sr-only"/>
<span>其他</span>
</label>
</div>
</div>
<!-- Submit --> <!-- Submit -->
<div style="padding-top: 16px;"> <button class="submit-btn" type="submit">
<button style="width: 100%; background: linear-gradient(to right, #1550d3, #583dde); color: #ffffff; font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; padding: 16px; border-radius: 12px; transition: all 0.3s; box-shadow: 0 10px 20px rgba(21, 80, 211, 0.2); cursor: pointer; border: none;" type="submit"> <span>提交反馈</span>
提交反馈 <span class="material-symbols-outlined" style="font-size: 18px;">send</span>
</button> </button>
</div>
</form>
</div> </div>
<!-- Contact Info --> <!-- Contact Info Sidebar -->
<div style="display: flex; flex-direction: column; gap: 24px;"> <div style="display: flex; flex-direction: column; gap: 20px;">
<div style="background-color: #ffffff; border-radius: 1.5rem; padding: 32px; box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04); border: 1px solid rgba(195, 197, 215, 0.3);"> <div style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 1.5rem; padding: 32px; box-shadow: 0 20px 40px rgba(18, 26, 43, 0.04);">
<h3 style="font-family: 'Manrope', sans-serif; font-size: 28px; line-height: 1.3; font-weight: 600; color: #131b2c; margin-bottom: 24px;">其他联系方式</h3> <h3 style="font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 700; color: #131b2c; margin-bottom: 28px;">其他联系方式</h3>
<ul style="display: flex; flex-direction: column; gap: 24px; list-style: none; padding: 0; margin: 0;"> <div style="display: flex; flex-direction: column; gap: 24px;">
<li style="display: flex; align-items: flex-start; gap: 16px;"> <a href="mailto:support@zhixiai.com" class="contact-item" style="display: flex; align-items: flex-start; gap: 14px; text-decoration: none; padding: 12px; border-radius: 12px; transition: background 0.2s;">
<span style="font-family: 'Material Symbols Outlined'; color: #1550d3; margin-top: 4px;">mail</span> <div style="width: 40px; height: 40px; border-radius: 12px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<div> <span class="material-symbols-outlined" style="font-size: 20px;">mail</span>
<p style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-transform: uppercase; margin-bottom: 4px;">邮箱</p>
<a style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #131b2c; text-decoration: none; transition: color 0.2s;" href="mailto:support@zhixiai.com">support@zhixiai.com</a>
</div> </div>
</li>
<li style="display: flex; align-items: flex-start; gap: 16px;">
<span style="font-family: 'Material Symbols Outlined'; color: #1550d3; margin-top: 4px;">language</span>
<div> <div>
<p style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-transform: uppercase; margin-bottom: 4px;">官网</p> <p style="font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #737686; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;">邮箱</p>
<a style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #131b2c; text-decoration: none; transition: color 0.2s;" href="https://zhixiai.com" target="_blank">zhixiai.com</a> <p style="font-family: 'Manrope', sans-serif; font-size: 15px; color: #131b2c; font-weight: 500;">support@zhixiai.com</p>
</div>
</a>
<a href="https://zhixiai.com" target="_blank" class="contact-item" style="display: flex; align-items: flex-start; gap: 14px; text-decoration: none; padding: 12px; border-radius: 12px; transition: background 0.2s;">
<div style="width: 40px; height: 40px; border-radius: 12px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<span class="material-symbols-outlined" style="font-size: 20px;">language</span>
</div> </div>
</li>
<li style="display: flex; align-items: flex-start; gap: 16px;">
<span style="font-family: 'Material Symbols Outlined'; color: #1550d3; margin-top: 4px;">update</span>
<div> <div>
<p style="font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1; letter-spacing: 0.05em; font-weight: 600; color: #434654; text-transform: uppercase; margin-bottom: 4px;">更新记录</p> <p style="font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #737686; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;">官网</p>
<a style="font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #131b2c; text-decoration: none; transition: color 0.2s;" href="/changelog">查看日志 →</a> <p style="font-family: 'Manrope', sans-serif; font-size: 15px; color: #131b2c; font-weight: 500;">zhixiai.com</p>
</div> </div>
</li> </a>
</ul> <a href="/changelog" class="contact-item" style="display: flex; align-items: flex-start; gap: 14px; text-decoration: none; padding: 12px; border-radius: 12px; transition: background 0.2s;">
<div style="width: 40px; height: 40px; border-radius: 12px; background: #f1f3ff; color: #1550d3; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
<span class="material-symbols-outlined" style="font-size: 20px;">update</span>
</div>
<div>
<p style="font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #737686; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;">更新记录</p>
<p style="font-family: 'Manrope', sans-serif; font-size: 15px; color: #131b2c; font-weight: 500;">查看日志 →</p>
</div>
</a>
</div>
</div>
<!-- Quick Note -->
<div style="background: linear-gradient(135deg, #f1f3ff, #e9edff); border-radius: 1rem; padding: 20px 24px;">
<div style="display: flex; gap: 10px; align-items: flex-start;">
<span class="material-symbols-outlined" style="color: #1550d3; font-size: 20px; margin-top: 2px;">schedule</span>
<p style="font-family: 'Manrope', sans-serif; font-size: 13px; line-height: 1.6; color: #434654;">
我们通常会在 <strong style="color: #131b2c;">24 小时内</strong>回复你的反馈。请确保邮箱填写正确。
</p>
</div>
</div> </div>
</div> </div>
</section> </section>
<!-- FAQ Section --> <!-- FAQ Section -->
<section style="max-width: 48rem; margin: 0 auto;"> <section style="max-width: 1000px; margin: 0 auto 120px;">
<h2 style="font-family: 'Manrope', sans-serif; font-size: 40px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; color: #131b2c; text-align: center; margin-bottom: 48px;">常见问题</h2> <div style="text-align: center; margin-bottom: 48px;">
<div style="display: flex; flex-direction: column; gap: 16px;"> <h2 style="font-family: 'Manrope', sans-serif; font-size: 36px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; color: #131b2c; margin-bottom: 12px;">常见问题</h2>
<p style="font-family: 'Manrope', sans-serif; font-size: 16px; color: #737686;">也许你想要的答案就在这里</p>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;" class="faq-grid">
<!-- FAQ Item 1 --> <details class="faq-item">
<details style="background-color: #ffffff; border-radius: 12px; border: 1px solid rgba(195, 197, 215, 0.5); overflow: hidden; cursor: pointer; box-shadow: 0 2px 8px rgba(18, 26, 43, 0.04); transition: box-shadow 0.2s;"> <summary>
<summary style="display: flex; align-items: center; justify-content: space-between; padding: 24px; font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 600; color: #131b2c; list-style: none;">
知习 AI 现在可以使用了吗? 知习 AI 现在可以使用了吗?
<span style="font-family: 'Material Symbols Outlined'; color: #434654; transition: transform 0.3s;">expand_more</span> <span class="material-symbols-outlined faq-arrow">expand_more</span>
</summary> </summary>
<div style="padding: 0 24px 24px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #434654;"> <div class="faq-answer">产品还在早期版本开发中，官网会持续更新进展。</div>
产品还在早期版本开发中，官网会持续更新进展。
</div>
</details> </details>
<!-- FAQ Item 2 --> <details class="faq-item">
<details style="background-color: #ffffff; border-radius: 12px; border: 1px solid rgba(195, 197, 215, 0.5); overflow: hidden; cursor: pointer; box-shadow: 0 2px 8px rgba(18, 26, 43, 0.04); transition: box-shadow 0.2s;"> <summary>
<summary style="display: flex; align-items: center; justify-content: space-between; padding: 24px; font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 600; color: #131b2c; list-style: none;">
知习 AI 支持哪些平台? 知习 AI 支持哪些平台?
<span style="font-family: 'Material Symbols Outlined'; color: #434654; transition: transform 0.3s;">expand_more</span> <span class="material-symbols-outlined faq-arrow">expand_more</span>
</summary> </summary>
<div style="padding: 0 24px 24px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #434654;"> <div class="faq-answer">第一阶段优先支持 iPhone，后续再考虑 iPad、Mac 和其他平台。</div>
第一阶段优先支持 iPhone，后续再考虑 iPad、Mac 和其他平台。
</div>
</details> </details>
<!-- FAQ Item 3 --> <details class="faq-item">
<details style="background-color: #ffffff; border-radius: 12px; border: 1px solid rgba(195, 197, 215, 0.5); overflow: hidden; cursor: pointer; box-shadow: 0 2px 8px rgba(18, 26, 43, 0.04); transition: box-shadow 0.2s;"> <summary>
<summary style="display: flex; align-items: center; justify-content: space-between; padding: 24px; font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 600; color: #131b2c; list-style: none;">
知习 AI 会保存我的学习内容吗? 知习 AI 会保存我的学习内容吗?
<span style="font-family: 'Material Symbols Outlined'; color: #434654; transition: transform 0.3s;">expand_more</span> <span class="material-symbols-outlined faq-arrow">expand_more</span>
</summary> </summary>
<div style="padding: 0 24px 24px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #434654;"> <div class="faq-answer">为了提供学习记录和 AI 分析，产品可能会保存必要的学习数据，具体请查看隐私政策。</div>
为了提供学习记录和 AI 分析，产品可能会保存必要的学习数据，具体请查看隐私政策。
</div>
</details> </details>
<!-- FAQ Item 4 --> <details class="faq-item">
<details style="background-color: #ffffff; border-radius: 12px; border: 1px solid rgba(195, 197, 215, 0.5); overflow: hidden; cursor: pointer; box-shadow: 0 2px 8px rgba(18, 26, 43, 0.04); transition: box-shadow 0.2s;"> <summary>
<summary style="display: flex; align-items: center; justify-content: space-between; padding: 24px; font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 600; color: #131b2c; list-style: none;">
如何删除我的数据? 如何删除我的数据?
<span style="font-family: 'Material Symbols Outlined'; color: #434654; transition: transform 0.3s;">expand_more</span> <span class="material-symbols-outlined faq-arrow">expand_more</span>
</summary> </summary>
<div style="padding: 0 24px 24px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 1.6; color: #434654;"> <div class="faq-answer">你可以通过本页面联系我们，我们会根据请求处理相关数据。</div>
你可以通过本页面联系我们，我们会根据请求处理相关数据。
</div>
</details> </details>
</div> </div>
@ -214,21 +215,169 @@ import Footer from '../components/Footer.astro';
<Footer /> <Footer />
<style> <style is:global>
.material-symbols-outlined { .form-label {
font-family: 'Material Symbols Outlined', sans-serif; display: block;
font-weight: normal; font-family: 'Inter', sans-serif;
font-style: normal; font-size: 13px;
font-size: 24px;
line-height: 1; line-height: 1;
letter-spacing: normal; letter-spacing: 0.05em;
text-transform: none; font-weight: 600;
display: inline-block; color: #434654;
white-space: nowrap; margin-bottom: 8px;
word-wrap: normal; }
direction: ltr;
-webkit-font-feature-settings: 'liga'; .form-input {
-webkit-font-smoothing: antialiased; width: 100%;
background-color: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
padding: 13px 16px;
font-family: 'Manrope', sans-serif;
font-size: 15px;
line-height: 1.6;
color: #131b2c;
transition: all 0.2s;
outline: none;
box-sizing: border-box;
}
.form-input::placeholder {
color: #b0b8c4;
}
.form-input:hover {
border-color: #c3c5d7;
}
.form-input:focus {
border-color: #1550d3;
box-shadow: 0 0 0 3px rgba(21, 80, 211, 0.1);
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.device-pill {
cursor: pointer;
}
.device-pill span {
display: block;
padding: 10px 22px;
border-radius: 9999px;
border: 1.5px solid #e2e8f0;
color: #434654;
font-family: 'Manrope', sans-serif;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
background: #ffffff;
}
.device-pill:hover span {
border-color: #b5c4ff;
background: #f8f9ff;
}
.device-pill input:checked + span {
background: #1550d3;
border-color: #1550d3;
color: #ffffff;
}
.submit-btn {
width: 100%;
background: linear-gradient(135deg, #1550d3, #583dde);
color: #ffffff;
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.03em;
font-weight: 600;
padding: 16px;
border-radius: 12px;
border: none;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 8px 24px rgba(21, 80, 211, 0.2);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.submit-btn:hover {
transform: translateY(-1px);
box-shadow: 0 12px 32px rgba(21, 80, 211, 0.3);
}
.contact-item:hover {
background: #f8f9ff;
}
.faq-item {
background-color: #ffffff;
border-radius: 14px;
border: 1px solid rgba(195, 197, 215, 0.5);
overflow: hidden;
cursor: pointer;
transition: box-shadow 0.2s, border-color 0.2s;
}
.faq-item:hover {
box-shadow: 0 6px 20px rgba(18, 26, 43, 0.06);
border-color: #b5c4ff;
}
.faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
font-family: 'Manrope', sans-serif;
font-size: 16px;
font-weight: 600;
color: #131b2c;
list-style: none;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-arrow {
color: #737686;
font-size: 20px;
transition: transform 0.3s;
}
.faq-item[open] .faq-arrow {
transform: rotate(180deg);
}
.faq-item[open] {
border-color: #b5c4ff;
box-shadow: 0 6px 20px rgba(18, 26, 43, 0.06);
}
.faq-item[open] summary {
color: #1550d3;
}
.faq-answer {
padding: 0 24px 20px;
font-family: 'Manrope', sans-serif;
font-size: 15px;
line-height: 1.7;
color: #434654;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
@ -241,35 +390,15 @@ import Footer from '../components/Footer.astro';
.form-row { .form-row {
grid-template-columns: 1fr !important; grid-template-columns: 1fr !important;
} }
.faq-grid {
.footer-inner { grid-template-columns: 1fr !important;
text-align: center;
} }
} }
details[open] summary span { @media (min-width: 769px) {
transform: rotate(180deg); .faq-grid {
} grid-template-columns: 1fr 1fr;
}
details:hover {
box-shadow: 0 8px 16px rgba(18, 26, 43, 0.08);
}
details summary::-webkit-details-marker {
display: none;
}
footer a:hover {
color: #4F7CFF !important;
}
input:focus, select:focus, textarea:focus {
border-color: #1550d3;
box-shadow: 0 0 0 2px rgba(21, 80, 211, 0.2);
}
input:hover, select:hover, textarea:hover {
border-color: #737686;
} }
</style> </style>
</body> </body>

2
src/pages/terms.astro
View File

@ -12,7 +12,7 @@ const lastUpdated = '2024年5月4日';
description="龙德AI学习的用户协议，明确用户与服务商之间的权利与义务。" description="龙德AI学习的用户协议，明确用户与服务商之间的权利与义务。"
> >
<Header /> <Header />
<main> <main class="animate-page-enter">
<Hero <Hero
title="用户协议" title="用户协议"
subtitle={`最后更新：${lastUpdated}`} subtitle={`最后更新：${lastUpdated}`}

2
src/pages/waitlist.astro
View File

@ -11,7 +11,7 @@ import WaitlistForm from '../components/WaitlistForm.astro';
description="加入龙德AI学习等待名单抢先体验，获取最新产品资讯和内测资格。" description="加入龙德AI学习等待名单抢先体验，获取最新产品资讯和内测资格。"
> >
<Header /> <Header />
<main> <main class="animate-page-enter">
<Hero <Hero
title="加入等待名单" title="加入等待名单"
subtitle="留下你的信息，我们会第一时间通知你" subtitle="留下你的信息，我们会第一时间通知你"

67
src/styles/global.css
View File

@ -81,18 +81,18 @@
50% { transform: translate(10px, -10px) scale(1.05); } 50% { transform: translate(10px, -10px) scale(1.05); }
} }
@keyframes scroll-right-to-left { @keyframes danmaku-rtl {
0% { transform: translateX(200%); opacity: 0; } 0% { transform: translateX(110vw); opacity: 0; }
3% { opacity: 1; } 3% { opacity: 1; }
97% { opacity: 1; } 90% { opacity: 1; }
100% { transform: translateX(-200%); opacity: 0; } 100% { transform: translateX(-100%); opacity: 0; }
} }
@keyframes scroll-left-to-right { @keyframes danmaku-ltr {
0% { transform: translateX(-200%); opacity: 0; } 0% { transform: translateX(-100%); opacity: 0; }
3% { opacity: 1; } 3% { opacity: 1; }
97% { opacity: 1; } 90% { opacity: 1; }
100% { transform: translateX(200%); opacity: 0; } 100% { transform: translateX(110vw); opacity: 0; }
} }
@keyframes breathe { @keyframes breathe {
@ -101,10 +101,25 @@
} }
@keyframes fadeInUp { @keyframes fadeInUp {
0% { opacity: 0; transform: translateY(40px); } 0% { opacity: 0; transform: translateY(24px); }
100% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: translateY(0); }
} }
@keyframes revealUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes pageEnter {
0% { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes blurIn {
0% { opacity: 0; filter: blur(8px); transform: scale(0.98); }
100% { opacity: 1; filter: blur(0); transform: scale(1); }
}
@layer components { @layer components {
.glass-card-premium { .glass-card-premium {
background: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.6);
@ -146,12 +161,12 @@
animation: float-fast 4s ease-in-out infinite; animation: float-fast 4s ease-in-out infinite;
} }
.animate-scroll-right { .animate-danmaku-rtl {
animation: scroll-right-to-left 15s linear infinite; animation: danmaku-rtl 15s linear infinite backwards;
} }
.animate-scroll-left { .animate-danmaku-ltr {
animation: scroll-left-to-right 12s linear infinite; animation: danmaku-ltr 15s linear infinite backwards;
} }
.animate-breathe { .animate-breathe {
@ -159,7 +174,23 @@
} }
.animate-fade-in-up { .animate-fade-in-up {
animation: fadeInUp 1s ease-out forwards; animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-reveal-up {
opacity: 0;
}
.animate-reveal-up.revealed {
animation: revealUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-page-enter {
animation: pageEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-blur-in {
animation: blurIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
} }
} }
@ -203,6 +234,14 @@ body {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
} }
.ethereal-glow {
position: absolute;
border-radius: 50%;
filter: blur(120px);
z-index: 0;
pointer-events: none;
}
.font-display-xl { .font-display-xl {
font-family: var(--font-family-headline); font-family: var(--font-family-headline);
font-size: 64px; font-size: 64px;