295 lines
16 KiB
HTML
295 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html class="light" lang="zh-CN"><head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<title>知习 AI - 更懂你，更会学</title>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||
<script id="tailwind-config">
|
||
tailwind.config = {
|
||
darkMode: "class",
|
||
theme: {
|
||
extend: {
|
||
"colors": {
|
||
"error-container": "#ffdad6",
|
||
"tertiary": "#595c60",
|
||
"primary-fixed-dim": "#b5c4ff",
|
||
"background": "#faf9ff",
|
||
"surface-dim": "#d2daf1",
|
||
"on-tertiary-fixed": "#181c1f",
|
||
"primary-fixed": "#dce1ff",
|
||
"surface-container-low": "#f1f3ff",
|
||
"on-secondary-fixed-variant": "#421dc9",
|
||
"outline": "#737686",
|
||
"surface-bright": "#faf9ff",
|
||
"surface-container": "#e9edff",
|
||
"secondary-fixed": "#e5deff",
|
||
"surface-variant": "#dbe2fa",
|
||
"surface-container-high": "#e1e8ff",
|
||
"inverse-surface": "#283042",
|
||
"primary-container": "#3c6bed",
|
||
"surface-container-highest": "#dbe2fa",
|
||
"primary": "#1550d3",
|
||
"surface": "#faf9ff",
|
||
"secondary": "#583dde",
|
||
"on-primary-container": "#fffbff",
|
||
"inverse-primary": "#b5c4ff",
|
||
"on-secondary-container": "#fffbff",
|
||
"surface-tint": "#1a53d6",
|
||
"tertiary-container": "#727578",
|
||
"on-background": "#131b2c",
|
||
"on-secondary": "#ffffff",
|
||
"outline-variant": "#c3c5d7",
|
||
"on-tertiary": "#ffffff",
|
||
"surface-container-lowest": "#ffffff",
|
||
"tertiary-fixed-dim": "#c4c7ca",
|
||
"secondary-container": "#715af8",
|
||
"on-primary": "#ffffff",
|
||
"on-surface": "#131b2c",
|
||
"on-secondary-fixed": "#190064",
|
||
"inverse-on-surface": "#edf0ff",
|
||
"tertiary-fixed": "#e0e3e6",
|
||
"on-tertiary-fixed-variant": "#44474a",
|
||
"on-primary-fixed-variant": "#003cad",
|
||
"error": "#ba1a1a",
|
||
"on-error-container": "#93000a",
|
||
"secondary-fixed-dim": "#c8bfff",
|
||
"on-surface-variant": "#434654",
|
||
"on-primary-fixed": "#00164d",
|
||
"on-tertiary-container": "#fcfcff",
|
||
"on-error": "#ffffff"
|
||
},
|
||
"borderRadius": {
|
||
"DEFAULT": "0.25rem",
|
||
"lg": "0.5rem",
|
||
"xl": "0.75rem",
|
||
"full": "9999px"
|
||
},
|
||
"spacing": {
|
||
"gutter": "24px",
|
||
"container-max": "1200px",
|
||
"card-padding": "32px",
|
||
"section-padding": "120px",
|
||
"unit": "8px"
|
||
},
|
||
"fontFamily": {
|
||
"headline-lg": [
|
||
"Manrope"
|
||
],
|
||
"label-sm": [
|
||
"Inter"
|
||
],
|
||
"display-xl": [
|
||
"Manrope"
|
||
],
|
||
"body-base": [
|
||
"Manrope"
|
||
],
|
||
"body-lg": [
|
||
"Manrope"
|
||
],
|
||
"headline-md": [
|
||
"Manrope"
|
||
]
|
||
},
|
||
"fontSize": {
|
||
"headline-lg": [
|
||
"40px",
|
||
{
|
||
"lineHeight": "1.2",
|
||
"letterSpacing": "-0.01em",
|
||
"fontWeight": "700"
|
||
}
|
||
],
|
||
"label-sm": [
|
||
"13px",
|
||
{
|
||
"lineHeight": "1",
|
||
"letterSpacing": "0.05em",
|
||
"fontWeight": "600"
|
||
}
|
||
],
|
||
"display-xl": [
|
||
"64px",
|
||
{
|
||
"lineHeight": "1.1",
|
||
"letterSpacing": "-0.02em",
|
||
"fontWeight": "800"
|
||
}
|
||
],
|
||
"body-base": [
|
||
"16px",
|
||
{
|
||
"lineHeight": "1.6",
|
||
"fontWeight": "400"
|
||
}
|
||
],
|
||
"body-lg": [
|
||
"18px",
|
||
{
|
||
"lineHeight": "1.6",
|
||
"fontWeight": "400"
|
||
}
|
||
],
|
||
"headline-md": [
|
||
"28px",
|
||
{
|
||
"lineHeight": "1.3",
|
||
"fontWeight": "600"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style>
|
||
.glass-card {
|
||
background: rgba(255, 255, 255, 0.7);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||
box-shadow: 0px 20px 40px rgba(18, 26, 43, 0.04);
|
||
}
|
||
.dot-grid {
|
||
background-image: radial-gradient(rgba(18, 26, 43, 0.05) 1px, transparent 1px);
|
||
background-size: 24px 24px;
|
||
}
|
||
.text-gradient {
|
||
background: linear-gradient(135deg, #1550d3, #583dde);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.bg-gradient-primary {
|
||
background: linear-gradient(135deg, #1550d3, #583dde);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-[#F6F8FC] text-on-surface font-body-base antialiased relative min-h-screen selection:bg-primary-container selection:text-on-primary-container dot-grid">
|
||
<!-- TopNavBar -->
|
||
<nav class="fixed top-0 w-full z-50 border-b border-white/20 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl shadow-[0px_20px_40px_rgba(18,26,43,0.04)]">
|
||
<div class="flex justify-between items-center max-w-7xl mx-auto px-8 h-20">
|
||
<div class="text-xl font-bold tracking-tighter text-slate-900 dark:text-white flex items-center gap-2">
|
||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||
知习 AI
|
||
</div>
|
||
<div class="hidden md:flex items-center gap-8 font-['Manrope'] text-sm tracking-tight font-medium">
|
||
<a class="text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300 scale-95 active:scale-90 transition-transform" href="#">产品</a>
|
||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300 scale-95 active:scale-90 transition-transform" href="#">功能</a>
|
||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300 scale-95 active:scale-90 transition-transform" href="#">理念</a>
|
||
<a class="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300 scale-95 active:scale-90 transition-transform" href="#">等待名单</a>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<button class="bg-gradient-primary text-on-primary font-label-sm text-label-sm px-6 py-2.5 rounded-full hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5">
|
||
加入等待名单
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<!-- Hero Section -->
|
||
<header class="pt-40 pb-section-padding px-gutter relative overflow-hidden">
|
||
<div class="max-w-container-max mx-auto text-center relative z-10">
|
||
<h1 class="font-display-xl text-display-xl text-on-surface mb-6 max-w-4xl mx-auto leading-tight">
|
||
更懂你，<span class="text-gradient">更会学</span>
|
||
</h1>
|
||
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mx-auto mb-10 leading-relaxed">
|
||
AI 驱动的系统化学习助手，把知识库、主动回忆、AI 分析和复习计划结合起来，帮你从"看过"变成"真正学会"。
|
||
</p>
|
||
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-20">
|
||
<button class="w-full sm:w-auto bg-gradient-primary text-on-primary font-label-sm text-label-sm px-8 py-4 rounded-full hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
|
||
加入等待名单
|
||
</button>
|
||
<button class="w-full sm:w-auto bg-white/50 backdrop-blur-md text-on-surface font-label-sm text-label-sm px-8 py-4 rounded-full border border-outline-variant hover:bg-white/80 transition-all duration-300">
|
||
了解产品理念
|
||
</button>
|
||
</div>
|
||
<div class="relative max-w-5xl mx-auto">
|
||
<div class="absolute inset-0 bg-primary/10 blur-[100px] rounded-full"></div>
|
||
<div class="relative glass-card rounded-[2rem] p-4 mx-auto overflow-hidden border border-white/60 shadow-2xl">
|
||
<img alt="Product Interface Mockup" class="w-full h-auto rounded-xl shadow-sm object-cover max-h-[600px]" data-alt="A clean, highly realistic 3D mockup of a modern iOS application interface floating over a serene, light blue background. The app features layered glassmorphism cards showing learning tasks and AI feedback. The design is Apple-inspired, minimalist, with soft shadows and glowing accents in primary blue and purple. The overall mood is calm, focused, and intellectually rigorous." src="https://lh3.googleusercontent.com/aida-public/AB6AXuABIO0hqNMx47nzGMCqnM20f-oy378eGOwyO-sbkL1uPU_mUzuMkDEg6TdI_iMb_JQ57EF53skumy8ss29x8QXVx5TzCU-3_t2SIBN_5FyQQbA6H_7W26jP4NVZ5ro3VY4C-i4CfiaxEsjRgIoYsT7pAVwJB9FWNAEZV2nrtYiIlhNGobVsxQIxLK1cHC90tJ2M9O7fP5jaPHnY9gv9WRKGYtzXKZn-PAzxI34O5xZcrd9t4PB2qXfxJva3ouyeBpb_lmanIT6TNXu6"/>
|
||
<!-- Floating UI Elements -->
|
||
<div class="absolute top-10 -left-8 glass-card p-4 rounded-2xl shadow-xl hidden md:flex items-center gap-3 animate-[bounce_5s_infinite]">
|
||
<div class="w-10 h-10 rounded-full bg-primary-container text-on-primary-container flex items-center justify-center">
|
||
<span class="material-symbols-outlined">calendar_today</span>
|
||
</div>
|
||
<div class="text-left">
|
||
<div class="font-label-sm text-label-sm text-on-surface">今日学习任务</div>
|
||
<div class="text-xs text-on-surface-variant">3 个待复习</div>
|
||
</div>
|
||
</div>
|
||
<div class="absolute bottom-20 -right-8 glass-card p-4 rounded-2xl shadow-xl hidden md:flex items-center gap-3 animate-[bounce_6s_infinite_reverse]">
|
||
<div class="w-10 h-10 rounded-full bg-secondary-container text-on-secondary-container flex items-center justify-center">
|
||
<span class="material-symbols-outlined">analytics</span>
|
||
</div>
|
||
<div class="text-left">
|
||
<div class="font-label-sm text-label-sm text-on-surface">AI 分析反馈</div>
|
||
<div class="text-xs text-on-surface-variant">掌握度提升 15%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- Pain Points -->
|
||
<section class="py-section-padding px-gutter bg-surface-container-low">
|
||
<div class="max-w-container-max mx-auto">
|
||
<div class="text-center mb-16">
|
||
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-4">很多学习，其实只是<span class="text-gradient">"看过"</span></h2>
|
||
<p class="font-body-base text-body-base text-on-surface-variant">传统学习方式面临的挑战</p>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<div class="glass-card rounded-2xl p-card-padding hover:-translate-y-1 transition-transform duration-300">
|
||
<div class="w-12 h-12 rounded-xl bg-error-container text-on-error-container flex items-center justify-center mb-6">
|
||
<span class="material-symbols-outlined">library_books</span>
|
||
</div>
|
||
<h3 class="font-headline-md text-headline-md text-on-surface mb-3">资料很多，但不知道先学什么</h3>
|
||
<p class="font-body-base text-body-base text-on-surface-variant">信息过载导致无从下手，缺乏系统性的指引。</p>
|
||
</div>
|
||
<div class="glass-card rounded-2xl p-card-padding hover:-translate-y-1 transition-transform duration-300">
|
||
<div class="w-12 h-12 rounded-xl bg-surface-variant text-on-surface-variant flex items-center justify-center mb-6">
|
||
<span class="material-symbols-outlined">edit_note</span>
|
||
</div>
|
||
<h3 class="font-headline-md text-headline-md text-on-surface mb-3">笔记写了，却很少真正复习</h3>
|
||
<p class="font-body-base text-body-base text-on-surface-variant">收藏即学习的错觉，遗忘曲线无人对抗。</p>
|
||
</div>
|
||
<div class="glass-card rounded-2xl p-card-padding hover:-translate-y-1 transition-transform duration-300">
|
||
<div class="w-12 h-12 rounded-xl bg-primary-container text-on-primary-container flex items-center justify-center mb-6">
|
||
<span class="material-symbols-outlined">record_voice_over</span>
|
||
</div>
|
||
<h3 class="font-headline-md text-headline-md text-on-surface mb-3">看懂了内容，却说不出来</h3>
|
||
<p class="font-body-base text-body-base text-on-surface-variant">缺乏输出环节，知识停留在浅层认知。</p>
|
||
</div>
|
||
<div class="glass-card rounded-2xl p-card-padding hover:-translate-y-1 transition-transform duration-300">
|
||
<div class="w-12 h-12 rounded-xl bg-secondary-container text-on-secondary-container flex items-center justify-center mb-6">
|
||
<span class="material-symbols-outlined">feedback</span>
|
||
</div>
|
||
<h3 class="font-headline-md text-headline-md text-on-surface mb-3">没有及时反馈，不知道自己哪里薄弱</h3>
|
||
<p class="font-body-base text-body-base text-on-surface-variant">盲目学习，无法进行针对性的强化训练。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Footer -->
|
||
<footer class="w-full py-20 border-t border-slate-200 dark:border-slate-800 bg-[#F6F8FC] dark:bg-slate-950">
|
||
<div class="max-w-7xl mx-auto px-8 grid grid-cols-1 md:grid-cols-2 items-center gap-8">
|
||
<div>
|
||
<div class="text-lg font-bold text-slate-900 dark:text-white mb-2 flex items-center gap-2">
|
||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
|
||
知习 AI
|
||
</div>
|
||
<div class="font-['Manrope'] text-sm text-slate-500 dark:text-slate-400">
|
||
© 2024 Longde Technology. Intellectual Serenity for Lifelong Learners.
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap gap-6 md:justify-end font-['Manrope'] text-sm">
|
||
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 underline-offset-4 hover:underline transition-colors" href="#">隐私政策</a>
|
||
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 underline-offset-4 hover:underline transition-colors" href="#">服务条款</a>
|
||
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 underline-offset-4 hover:underline transition-colors" href="#">关于我们</a>
|
||
<a class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 underline-offset-4 hover:underline transition-colors" href="#">联系支持</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</body></html> |