522 lines
28 KiB
HTML
522 lines
28 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@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"/>
|
||
|
|
<script id="tailwind-config">
|
||
|
|
tailwind.config = {
|
||
|
|
darkMode: "class",
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
"colors": {
|
||
|
|
"tech-blue": "#4F7CFF",
|
||
|
|
"navy": "#121A2B",
|
||
|
|
"outline-variant": "#c3c5d7",
|
||
|
|
"surface-container-low": "#f1f3ff",
|
||
|
|
"on-tertiary-fixed": "#181c1f",
|
||
|
|
"inverse-primary": "#b5c4ff",
|
||
|
|
"on-tertiary-fixed-variant": "#44474a",
|
||
|
|
"surface-bright": "#faf9ff",
|
||
|
|
"on-tertiary": "#ffffff",
|
||
|
|
"on-secondary-fixed": "#190064",
|
||
|
|
"on-surface": "#121A2B",
|
||
|
|
"on-primary": "#ffffff",
|
||
|
|
"tertiary-container": "#727578",
|
||
|
|
"background": "#ffffff",
|
||
|
|
"tertiary-fixed-dim": "#c4c7ca",
|
||
|
|
"primary-fixed-dim": "#b5c4ff",
|
||
|
|
"inverse-surface": "#283042",
|
||
|
|
"inverse-on-surface": "#edf0ff",
|
||
|
|
"error": "#ba1a1a",
|
||
|
|
"surface-variant": "#dbe2fa",
|
||
|
|
"error-container": "#ffdad6",
|
||
|
|
"secondary-fixed-dim": "#c8bfff",
|
||
|
|
"secondary-fixed": "#e5deff",
|
||
|
|
"on-surface-variant": "#434654",
|
||
|
|
"primary-fixed": "#dce1ff",
|
||
|
|
"primary-container": "#e6ecff",
|
||
|
|
"surface-container-high": "#e1e8ff",
|
||
|
|
"on-error": "#ffffff",
|
||
|
|
"outline": "#737686",
|
||
|
|
"surface-dim": "#d2daf1",
|
||
|
|
"on-primary-fixed": "#00164d",
|
||
|
|
"tertiary": "#595c60",
|
||
|
|
"on-secondary": "#ffffff",
|
||
|
|
"surface-tint": "#4F7CFF",
|
||
|
|
"on-background": "#121A2B",
|
||
|
|
"tertiary-fixed": "#e0e3e6",
|
||
|
|
"on-tertiary-container": "#fcfcff",
|
||
|
|
"secondary": "#583dde",
|
||
|
|
"surface-container-lowest": "#ffffff",
|
||
|
|
"surface": "#ffffff",
|
||
|
|
"primary": "#4F7CFF",
|
||
|
|
"surface-container": "#e9edff",
|
||
|
|
"on-primary-container": "#4F7CFF",
|
||
|
|
"secondary-container": "#715af8",
|
||
|
|
"surface-container-highest": "#dbe2fa",
|
||
|
|
"on-primary-fixed-variant": "#003cad",
|
||
|
|
"on-secondary-fixed-variant": "#421dc9",
|
||
|
|
"on-secondary-container": "#fffbff",
|
||
|
|
"on-error-container": "#93000a"
|
||
|
|
},
|
||
|
|
"borderRadius": {
|
||
|
|
"DEFAULT": "0.25rem",
|
||
|
|
"lg": "0.5rem",
|
||
|
|
"xl": "0.75rem",
|
||
|
|
"full": "9999px",
|
||
|
|
"2xl": "1rem",
|
||
|
|
"3xl": "1.5rem",
|
||
|
|
"4xl": "2rem"
|
||
|
|
},
|
||
|
|
"spacing": {
|
||
|
|
"container-max": "1200px",
|
||
|
|
"section-padding": "160px",
|
||
|
|
"unit": "8px",
|
||
|
|
"card-padding": "40px",
|
||
|
|
"gutter": "32px"
|
||
|
|
},
|
||
|
|
"fontFamily": {
|
||
|
|
"headline-md": ["Manrope", "sans-serif"],
|
||
|
|
"headline-lg": ["Manrope", "sans-serif"],
|
||
|
|
"display-xl": ["Manrope", "sans-serif"],
|
||
|
|
"display-2xl": ["Manrope", "sans-serif"],
|
||
|
|
"body-lg": ["Manrope", "sans-serif"],
|
||
|
|
"body-base": ["Manrope", "sans-serif"],
|
||
|
|
"label-sm": ["Inter", "sans-serif"]
|
||
|
|
},
|
||
|
|
"fontSize": {
|
||
|
|
"headline-md": ["28px", { "lineHeight": "1.3", "fontWeight": "600" }],
|
||
|
|
"headline-lg": ["48px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
|
||
|
|
"display-xl": ["64px", { "lineHeight": "1.1", "letterSpacing": "-0.03em", "fontWeight": "800" }],
|
||
|
|
"display-2xl": ["80px", { "lineHeight": "1", "letterSpacing": "-0.04em", "fontWeight": "800" }],
|
||
|
|
"body-lg": ["20px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
||
|
|
"body-base": ["16px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
||
|
|
"label-sm": ["14px", { "lineHeight": "1", "letterSpacing": "0.02em", "fontWeight": "600" }]
|
||
|
|
},
|
||
|
|
"animation": {
|
||
|
|
'float-slow': 'float 8s ease-in-out infinite',
|
||
|
|
'float-medium': 'float 6s ease-in-out infinite',
|
||
|
|
'float-fast': 'float 4s ease-in-out infinite',
|
||
|
|
'breathe': 'breathe 4s ease-in-out infinite',
|
||
|
|
'fade-in-up': 'fadeInUp 1s ease-out forwards',
|
||
|
|
},
|
||
|
|
"keyframes": {
|
||
|
|
float: {
|
||
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
||
|
|
'50%': { transform: 'translateY(-20px)' },
|
||
|
|
},
|
||
|
|
breathe: {
|
||
|
|
'0%, 100%': { transform: 'scale(1)', opacity: '0.8' },
|
||
|
|
'50%': { transform: 'scale(1.05)', opacity: '1' },
|
||
|
|
},
|
||
|
|
fadeInUp: {
|
||
|
|
'0%': { opacity: '0', transform: 'translateY(40px)' },
|
||
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background-color: #ffffff;
|
||
|
|
color: #121A2B;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Subtle large-scale grid */
|
||
|
|
.bg-grid {
|
||
|
|
background-size: 60px 60px;
|
||
|
|
background-image: radial-gradient(circle, rgba(79, 124, 255, 0.08) 1px, transparent 1px);
|
||
|
|
mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
|
||
|
|
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.glass-card-premium {
|
||
|
|
background: rgba(255, 255, 255, 0.6);
|
||
|
|
backdrop-filter: blur(24px);
|
||
|
|
-webkit-backdrop-filter: blur(24px);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
||
|
|
box-shadow: 0 30px 60px rgba(18, 26, 43, 0.05), 0 0 0 1px rgba(79, 124, 255, 0.05) inset;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hover-lift {
|
||
|
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||
|
|
}
|
||
|
|
.hover-lift:hover {
|
||
|
|
transform: translateY(-8px) scale(1.02);
|
||
|
|
box-shadow: 0 40px 80px rgba(79, 124, 255, 0.12);
|
||
|
|
}
|
||
|
|
|
||
|
|
.ethereal-glow {
|
||
|
|
position: absolute;
|
||
|
|
border-radius: 50%;
|
||
|
|
filter: blur(120px);
|
||
|
|
z-index: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-on-scroll {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(40px);
|
||
|
|
transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
|
||
|
|
}
|
||
|
|
.animate-on-scroll.visible {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Primary Gradient Button */
|
||
|
|
.btn-primary-gradient {
|
||
|
|
background: linear-gradient(135deg, #4F7CFF 0%, #7861FF 100%);
|
||
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
||
|
|
}
|
||
|
|
.btn-primary-gradient:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 12px 24px rgba(79, 124, 255, 0.3);
|
||
|
|
filter: brightness(1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Blur layers for depth */
|
||
|
|
.depth-1 { filter: blur(0px); z-index: 20; }
|
||
|
|
.depth-2 { filter: blur(2px); z-index: 15; transform: scale(0.95); opacity: 0.9;}
|
||
|
|
.depth-3 { filter: blur(6px); z-index: 10; transform: scale(0.9); opacity: 0.7;}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="antialiased overflow-x-hidden selection:bg-primary-container selection:text-primary relative">
|
||
|
|
<!-- Global Grid Background -->
|
||
|
|
<div class="fixed inset-0 bg-grid pointer-events-none z-0"></div>
|
||
|
|
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
|
||
|
|
<div class="absolute top-[-10%] left-[-10%] w-[60%] h-[60%] rounded-full bg-[#4F7CFF]/5 blur-[120px] animate-float-slow"></div>
|
||
|
|
<div class="absolute bottom-[10%] right-[-5%] w-[50%] h-[50%] rounded-full bg-[#7861FF]/5 blur-[120px] animate-float-medium"></div>
|
||
|
|
<div class="absolute top-[40%] right-[15%] w-[30%] h-[30%] rounded-full bg-[#4F7CFF]/3 blur-[100px] animate-float-fast"></div>
|
||
|
|
</div>
|
||
|
|
<!-- TopAppBar -->
|
||
|
|
<nav class="fixed top-0 w-full z-50 bg-white/70 backdrop-blur-xl border-b border-black/5 shadow-[0_8px_32px_0_rgba(18,26,43,0.03)]">
|
||
|
|
<div class="flex justify-between items-center h-16 px-6 md:px-12 max-w-7xl mx-auto">
|
||
|
|
<div class="flex items-center gap-2 text-tech-blue">
|
||
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">psychology</span>
|
||
|
|
<span class="text-xl font-extrabold text-navy tracking-tighter">知习 AI</span>
|
||
|
|
</div>
|
||
|
|
<div class="hidden md:flex items-center gap-8 font-manrope tracking-tight text-sm font-medium">
|
||
|
|
<a class="text-tech-blue border-b-2 border-tech-blue pb-1 ease-out hover:opacity-80 transition-all duration-300" href="#">首页</a>
|
||
|
|
<a class="text-slate-500 hover:text-tech-blue ease-out hover:opacity-80 transition-all duration-300" href="#">产品</a>
|
||
|
|
<a class="text-slate-500 hover:text-tech-blue ease-out hover:opacity-80 transition-all duration-300" href="#">理念</a>
|
||
|
|
<a class="text-slate-500 hover:text-tech-blue ease-out hover:opacity-80 transition-all duration-300" href="#">等待名单</a>
|
||
|
|
</div>
|
||
|
|
<button class="text-white font-label-sm px-6 py-2 rounded-full hover:bg-blue-600 hover:shadow-lg transition-all ease-out hover:-translate-y-0.5 btn-primary-gradient">立即加入</button>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
<main class="pt-20 relative z-10">
|
||
|
|
<!-- Cinematic Hero -->
|
||
|
|
<section class="min-h-[100vh] flex flex-col items-center justify-start relative px-6 md:px-12 pt-32 pb-24 max-w-container-max mx-auto text-center overflow-visible">
|
||
|
|
<!-- Ethereal Glows -->
|
||
|
|
<div class="ethereal-glow bg-blue-400/20 w-[600px] h-[600px] top-[-100px] left-1/2 -translate-x-1/2 animate-breathe"></div>
|
||
|
|
<h1 class="font-display-2xl text-display-2xl text-navy mb-6 max-w-5xl relative z-10 tracking-tight animate-fade-in-up" style="animation-delay: 0.1s;">
|
||
|
|
更懂你，更会学
|
||
|
|
</h1>
|
||
|
|
<p class="font-body-lg text-body-lg text-slate-600 max-w-2xl mb-12 relative z-10 animate-fade-in-up" style="animation-delay: 0.2s;">
|
||
|
|
一个围绕你成长的 AI 学习空间。把知识库、主动回忆、AI 分析和复习计划连接起来，让每一次学习都留下痕迹。
|
||
|
|
</p>
|
||
|
|
<div class="flex flex-col sm:flex-row gap-6 mb-24 relative z-10 animate-fade-in-up" style="animation-delay: 0.3s;">
|
||
|
|
<button class="text-white font-label-sm px-10 py-5 rounded-full shadow-2xl shadow-blue-500/30 hover:shadow-blue-500/50 transition-all hover:-translate-y-1 text-base btn-primary-gradient">
|
||
|
|
进入产品
|
||
|
|
</button>
|
||
|
|
<button class="bg-white/80 backdrop-blur-sm text-navy font-label-sm px-10 py-5 rounded-full hover:bg-white transition-all border border-slate-200 shadow-[0_4px_12px_rgba(0,0,0,0.03)] hover:shadow-[0_8px_24px_rgba(0,0,0,0.06)] hover:-translate-y-1 text-base">
|
||
|
|
加入等待名单
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<!-- Cinematic Mockup Area -->
|
||
|
|
<div class="relative w-full max-w-6xl mt-12 z-0 flex items-center justify-center animate-fade-in-up" style="animation-delay: 0.5s;"><!-- MacBook Pro High-Fidelity Mockup -->
|
||
|
|
<div class="relative z-20 w-[700px] h-[450px] transition-transform duration-700 hover:scale-[1.02]">
|
||
|
|
<!-- MacBook Screen/Lid -->
|
||
|
|
<div class="relative w-full h-[430px] bg-slate-900 rounded-2xl p-3 shadow-2xl overflow-hidden border border-slate-700/50">
|
||
|
|
<div class="absolute top-0 inset-x-0 h-6 flex justify-center items-center">
|
||
|
|
<div class="w-1.5 h-1.5 rounded-full bg-slate-700"></div>
|
||
|
|
</div>
|
||
|
|
<div class="w-full h-full bg-white rounded-lg overflow-hidden flex flex-col">
|
||
|
|
<div class="h-10 border-b border-slate-100 flex items-center px-4 gap-2 bg-slate-50/50">
|
||
|
|
<div class="flex gap-1.5">
|
||
|
|
<div class="w-2.5 h-2.5 rounded-full bg-red-400"></div>
|
||
|
|
<div class="w-2.5 h-2.5 rounded-full bg-amber-400"></div>
|
||
|
|
<div class="w-2.5 h-2.5 rounded-full bg-emerald-400"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 p-6 flex flex-col gap-6">
|
||
|
|
<div class="flex items-center gap-4">
|
||
|
|
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-tech-blue">
|
||
|
|
<span class="material-symbols-outlined">account_circle</span>
|
||
|
|
</div>
|
||
|
|
<div class="h-2 w-32 bg-slate-100 rounded"></div>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-3 gap-6 flex-1">
|
||
|
|
<div class="col-span-2 space-y-4">
|
||
|
|
<div class="h-40 bg-slate-50 rounded-xl border border-dashed border-slate-200"></div>
|
||
|
|
<div class="h-20 bg-slate-50 rounded-xl"></div>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-4">
|
||
|
|
<div class="h-full bg-blue-50/30 rounded-xl border border-blue-100/20"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- MacBook Base/Keyboard -->
|
||
|
|
<div class="absolute bottom-[-20px] left-[-40px] right-[-40px] h-[40px] bg-slate-800 rounded-b-3xl transform perspective-1000 rotateX-30 shadow-2xl flex justify-center">
|
||
|
|
<div class="w-1/3 h-1 bg-slate-700 rounded-full mt-2"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- iPad Pro (Left Layer) -->
|
||
|
|
<div class="absolute left-[-5%] bottom-[-10%] z-30 w-[340px] h-[240px] glass-card-premium rounded-3xl border-[8px] border-slate-800 shadow-2xl overflow-hidden transform -rotate-12 hover:rotate-0 transition-transform duration-700 hidden md:block">
|
||
|
|
<div class="w-full h-full bg-white p-4">
|
||
|
|
<div class="w-full h-full bg-slate-50 rounded-xl p-4">
|
||
|
|
<div class="h-4 w-24 bg-slate-200 rounded mb-4"></div>
|
||
|
|
<div class="space-y-3">
|
||
|
|
<div class="h-2 bg-slate-200 rounded w-full"></div>
|
||
|
|
<div class="h-2 bg-slate-200 rounded w-5/6"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- iPhone (Right Layer) -->
|
||
|
|
<div class="absolute right-[-5%] top-[5%] z-40 w-[180px] h-[360px] glass-card-premium rounded-[3rem] border-[8px] border-slate-900 shadow-2xl overflow-hidden transform rotate-12 hover:rotate-0 transition-transform duration-700 hidden lg:block">
|
||
|
|
<div class="w-full h-full bg-white p-4 flex flex-col gap-4">
|
||
|
|
<div class="w-12 h-1 bg-slate-100 rounded-full mx-auto mb-4"></div>
|
||
|
|
<div class="h-full bg-blue-50/20 rounded-2xl border border-blue-100/30"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Floating Learning Cards -->
|
||
|
|
<!-- Card 1: Today's Tasks -->
|
||
|
|
<div class="absolute left-[15%] top-[-20px] z-50 glass-card-premium p-4 rounded-2xl shadow-2xl animate-float-slow flex items-center gap-3 border-white/40">
|
||
|
|
<div class="w-8 h-8 rounded-lg bg-amber-50 flex items-center justify-center text-amber-500">
|
||
|
|
<span class="material-symbols-outlined text-xl">event_note</span>
|
||
|
|
</div>
|
||
|
|
<div class="text-left">
|
||
|
|
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">今日任务</div>
|
||
|
|
<div class="text-sm font-bold text-navy">复习 12 个知识点</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Card 2: Active Recall -->
|
||
|
|
<div class="absolute right-[15%] bottom-[20%] z-50 glass-card-premium p-4 rounded-2xl shadow-2xl animate-float-medium flex items-center gap-3 border-white/40 delay-700">
|
||
|
|
<div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center text-emerald-500">
|
||
|
|
<span class="material-symbols-outlined text-xl">psychology</span>
|
||
|
|
</div>
|
||
|
|
<div class="text-left">
|
||
|
|
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">主动回忆</div>
|
||
|
|
<div class="text-sm font-bold text-navy">准确率提升 15%</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Card 3: AI Analysis -->
|
||
|
|
<div class="absolute left-[5%] bottom-[15%] z-50 glass-card-premium p-4 rounded-2xl shadow-2xl animate-float-fast flex items-center gap-3 border-white/40 delay-300">
|
||
|
|
<div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center text-tech-blue">
|
||
|
|
<span class="material-symbols-outlined text-xl">auto_awesome</span>
|
||
|
|
</div>
|
||
|
|
<div class="text-left">
|
||
|
|
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">AI 分析</div>
|
||
|
|
<div class="text-sm font-bold text-navy">发现 2 个薄弱环节</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Card 4: Review Plan -->
|
||
|
|
<div class="absolute right-[10%] top-[40px] z-50 glass-card-premium p-4 rounded-2xl shadow-2xl animate-float-slow flex items-center gap-3 border-white/40 delay-1000">
|
||
|
|
<div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-500">
|
||
|
|
<span class="material-symbols-outlined text-xl">rebase_edit</span>
|
||
|
|
</div>
|
||
|
|
<div class="text-left">
|
||
|
|
<div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">复习计划</div>
|
||
|
|
<div class="text-sm font-bold text-navy">动态调整已生效</div>
|
||
|
|
</div>
|
||
|
|
</div></div>
|
||
|
|
</section>
|
||
|
|
<!-- 'How do you want to start?' Portal Area -->
|
||
|
|
<section class="py-section-padding px-6 md:px-12 max-w-container-max mx-auto relative z-10 animate-on-scroll" id="portal-section">
|
||
|
|
<div class="text-center mb-16">
|
||
|
|
<h2 class="font-headline-lg text-headline-lg text-navy mb-4">今天想从哪里开始？</h2>
|
||
|
|
<p class="font-body-base text-slate-500">选择一个入口，进入你的专属学习流</p>
|
||
|
|
</div>
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
|
|
<a class="glass-card-premium p-card-padding 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">
|
||
|
|
<span class="material-symbols-outlined text-3xl">upload_file</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 class="font-headline-md text-xl text-navy mb-2">导入知识库</h3>
|
||
|
|
<p class="font-body-base text-sm text-slate-500">上传文档、笔记，让 AI 为你梳理结构。</p>
|
||
|
|
</div>
|
||
|
|
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 font-label-sm opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0">
|
||
|
|
开始导入 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<a class="glass-card-premium p-card-padding rounded-3xl flex flex-col items-center text-center gap-6 hover-lift group cursor-pointer border-tech-blue/20" href="#">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 class="font-headline-md text-xl text-navy mb-2">开启主动回忆</h3>
|
||
|
|
<p class="font-body-base text-sm text-slate-500">基于艾宾浩斯曲线，检验你的真实掌握度。</p>
|
||
|
|
</div>
|
||
|
|
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 font-label-sm opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0">
|
||
|
|
开始测试 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<a class="glass-card-premium p-card-padding 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">
|
||
|
|
<span class="material-symbols-outlined text-3xl">fact_check</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 class="font-headline-md text-xl text-navy mb-2">查看今日复习</h3>
|
||
|
|
<p class="font-body-base text-sm text-slate-500">AI 为你安排的最优复习路径，高效不遗漏。</p>
|
||
|
|
</div>
|
||
|
|
<div class="mt-auto pt-4 text-tech-blue flex items-center gap-1 font-label-sm opacity-0 group-hover:opacity-100 transition-opacity transform translate-y-2 group-hover:translate-y-0">
|
||
|
|
查看计划 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<!-- 'Sustainable Learning Loop' Interactive Zone -->
|
||
|
|
<section class="py-section-padding px-6 md:px-12 max-w-container-max mx-auto relative z-10 animate-on-scroll">
|
||
|
|
<div class="text-center mb-24">
|
||
|
|
<h2 class="font-headline-lg text-headline-lg text-navy mb-4">不是帮你多看一点，而是帮你真正学会</h2>
|
||
|
|
<p class="font-body-base text-slate-500">构建可持续的闭环学习流</p>
|
||
|
|
</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">
|
||
|
|
<!-- Connecting Line Desktop -->
|
||
|
|
<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>
|
||
|
|
<!-- Connecting Line Mobile -->
|
||
|
|
<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>
|
||
|
|
<!-- Loop Item 1 -->
|
||
|
|
<div class="relative z-10 flex flex-col items-center text-center gap-4 group">
|
||
|
|
<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">
|
||
|
|
<span class="material-symbols-outlined text-3xl">input</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 class="font-bold text-navy mb-1">1. 摄入</h4>
|
||
|
|
<p class="text-xs text-slate-500">知识结构化</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Loop Item 2 -->
|
||
|
|
<div class="relative z-10 flex flex-col items-center text-center gap-4 group">
|
||
|
|
<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">
|
||
|
|
<span class="material-symbols-outlined text-3xl">memory</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 class="font-bold text-navy mb-1">2. 回忆</h4>
|
||
|
|
<p class="text-xs text-slate-500">主动提取</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Loop Item 3 -->
|
||
|
|
<div class="relative z-10 flex flex-col items-center text-center gap-4 group mt-8 md:mt-0 md:-translate-y-8"> <!-- Staggered visually -->
|
||
|
|
<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">
|
||
|
|
<span class="material-symbols-outlined text-4xl">auto_awesome</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 class="font-bold text-tech-blue mb-1 text-lg">3. AI 分析</h4>
|
||
|
|
<p class="text-xs text-slate-600 font-medium">精准定位薄弱点</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Loop Item 4 -->
|
||
|
|
<div class="relative z-10 flex flex-col items-center text-center gap-4 group">
|
||
|
|
<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">
|
||
|
|
<span class="material-symbols-outlined text-3xl">update</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 class="font-bold text-navy mb-1">4. 巩固</h4>
|
||
|
|
<p class="text-xs text-slate-500">动态复习计划</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<!-- 'Feedback in Every Step' Dynamic Preview -->
|
||
|
|
<section class="py-section-padding px-6 md:px-12 max-w-container-max mx-auto relative z-10 animate-on-scroll">
|
||
|
|
<div class="bg-slate-50 rounded-[3rem] p-8 md:p-16 border border-slate-100 overflow-hidden relative">
|
||
|
|
<!-- Inner ethereal glow -->
|
||
|
|
<div class="absolute top-0 right-0 w-96 h-96 bg-blue-300/10 rounded-full blur-[80px]"></div>
|
||
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||
|
|
<div class="relative z-10">
|
||
|
|
<h2 class="font-headline-lg text-4xl text-navy mb-6">看得见的进步轨迹</h2>
|
||
|
|
<p class="font-body-base text-slate-600 mb-8 leading-relaxed">
|
||
|
|
告别盲目刷题。知习 AI 在你每次主动回忆后，实时生成多维度的掌握度分析，动态调整你的下一步学习路径。
|
||
|
|
</p>
|
||
|
|
<ul class="space-y-4 mb-8">
|
||
|
|
<li class="flex items-center gap-3 text-sm text-slate-700">
|
||
|
|
<span class="material-symbols-outlined text-tech-blue text-lg">check_circle</span> 知识点图谱实时更新
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center gap-3 text-sm text-slate-700">
|
||
|
|
<span class="material-symbols-outlined text-tech-blue text-lg">check_circle</span> 遗忘曲线精准预测
|
||
|
|
</li>
|
||
|
|
<li class="flex items-center gap-3 text-sm text-slate-700">
|
||
|
|
<span class="material-symbols-outlined text-tech-blue text-lg">check_circle</span> 个性化干预建议
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- Multi-layered dynamic preview -->
|
||
|
|
<div class="relative h-[400px] w-full flex items-center justify-center">
|
||
|
|
<!-- Background blurry UI -->
|
||
|
|
<div class="absolute inset-0 bg-white/40 backdrop-blur-sm rounded-2xl border border-white/60 shadow-lg transform scale-95 opacity-50 z-0"></div>
|
||
|
|
<div class="absolute inset-4 bg-white/60 backdrop-blur-md rounded-2xl border border-white/80 shadow-xl transform scale-100 opacity-80 z-10 flex flex-col p-6 gap-4">
|
||
|
|
<div class="h-6 w-1/3 bg-slate-200 rounded"></div>
|
||
|
|
<div class="h-32 w-full bg-slate-100 rounded-xl"></div>
|
||
|
|
<div class="h-24 w-full bg-slate-100 rounded-xl"></div>
|
||
|
|
</div>
|
||
|
|
<!-- Foreground floating Analysis Card -->
|
||
|
|
<div class="absolute z-20 right-[-20px] top-[10%] w-[320px] glass-card-premium rounded-2xl p-6 shadow-2xl animate-float-slow">
|
||
|
|
<div class="flex items-center gap-3 mb-4">
|
||
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-tech-blue">
|
||
|
|
<span class="material-symbols-outlined text-sm">auto_awesome</span>
|
||
|
|
</div>
|
||
|
|
<span class="text-sm font-bold text-navy">AI 深度分析</span>
|
||
|
|
</div>
|
||
|
|
<p class="text-xs text-slate-600 mb-4 leading-relaxed">
|
||
|
|
你在「宏观经济学」章节的「通货膨胀」概念上表现出轻微遗忘，已自动加入明日优先复习队列。
|
||
|
|
</p>
|
||
|
|
<div class="w-full bg-slate-100 rounded-full h-1.5 mb-2">
|
||
|
|
<div class="bg-tech-blue h-1.5 rounded-full w-[75%]"></div>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between text-[10px] text-slate-400">
|
||
|
|
<span>整体掌握度</span>
|
||
|
|
<span>75%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
<!-- Footer -->
|
||
|
|
<footer class="w-full mt-32 bg-slate-50 border-t border-slate-200 fade-in transition-opacity relative z-10">
|
||
|
|
<div class="max-w-7xl mx-auto py-20 px-8 flex flex-col md:flex-row justify-between items-center gap-8">
|
||
|
|
<div class="text-lg font-bold text-navy flex items-center gap-2">
|
||
|
|
<span class="material-symbols-outlined text-tech-blue" style="font-variation-settings: 'FILL' 1;">psychology</span>
|
||
|
|
知习 AI
|
||
|
|
</div>
|
||
|
|
<p class="font-manrope text-xs text-slate-500">
|
||
|
|
© 2024 知习 AI (ZhiXi AI). Structured learning for the digital age.
|
||
|
|
</p>
|
||
|
|
<div class="flex gap-6 font-manrope text-xs text-slate-500">
|
||
|
|
<a class="hover:text-tech-blue underline-offset-4 hover:underline transition-colors" href="#">隐私政策</a>
|
||
|
|
<a class="hover:text-tech-blue underline-offset-4 hover:underline transition-colors" href="#">服务条款</a>
|
||
|
|
<a class="hover:text-tech-blue underline-offset-4 hover:underline transition-colors" href="#">关于我们</a>
|
||
|
|
<a class="hover:text-tech-blue underline-offset-4 hover:underline transition-colors" href="#">联系支持</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
<script>
|
||
|
|
// Simple intersection observer for scroll animations
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
const observer = new IntersectionObserver((entries) => {
|
||
|
|
entries.forEach(entry => {
|
||
|
|
if (entry.isIntersecting) {
|
||
|
|
entry.target.classList.add('visible');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}, { threshold: 0.1 });
|
||
|
|
|
||
|
|
document.querySelectorAll('.animate-on-scroll').forEach(el => {
|
||
|
|
observer.observe(el);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body></html>
|