我先获取设计系统推荐和相关素材。现在让我构思一个独特的数学教学页面。我会选择一种"俏皮/玩具感"与"现代极简"融合的美学方向，使用大胆的几何图形、鲜艳的色彩和有趣的动效来让数学变得有趣。现在我来设计这个数学教学页面。我会采用"俏皮/玩具感"与"现代几何"融合的风格，使用大胆的配色、有趣的几何图形和流畅的动画。
```json
{
"summary": "设计了一个面向儿童的数学教学页面，采用俏皮几何风格，以深蓝/紫色为基底搭配亮黄、粉色和青色点缀。包含英雄区（动态数学符号动画）、课程卡片区（加减乘除四则运算）、互动练习区和底部CTA。使用Google Fonts的Fredoka（圆润可爱）和Nunito字体，配合浮动几何图形、数字动画和悬停效果，营造有趣的学习氛围。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>趣味数学 - 让数学变得好玩</title>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&f…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <style>\n :root {\n --primary: #1a1a2e;\n --secondary: #16213e;\n --accent-yellow: #ffd166;\n --accent-pink: #ef476f;\n --accent-cyan: #06d6a0;\n --accent-purple: #7b2cbf;\n --accent-orange: #fb8500;\n --bg-light: #f8f9fa;\n --text-dark: #0d0d1a;\n --text-light: #f0f0f5;\n --card-bg: rgba(255, 255, 255, 0.06);\n --glass-border: rgba(255, 255, 255, 0.12);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Nunito', sans-serif;\n background: var(--primary);\n color: var(--text-light);\n overflow-x: hidden;\n min-height: 100vh;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-family: 'Fredoka', sans-serif;\n font-weight: 600;\n letter-spacing: -0.02em;\n }\n\n /* 背景几何网格 */\n .bg-grid {\n background-image: \n linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);\n background-size: 60px 60px;\n }\n\n /* 浮动几何形状 */\n .floating-shape {\n position: absolute;\n border-radius: 50%;\n opacity: 0.15;\n pointer-events: none;\n animation: floatShape 20s ease-in-out infinite;\n }\n\n .floating-shape:nth-child(1) {\n width: 300px;\n height: 300px;\n background: radial-gradient(circle, var(--accent-yellow), transparent);\n top: -80px;\n left: -80px;\n animation-delay: 0s;\n animation-duration: 25s;\n }\n\n .floating-shape:nth-child(2) {\n width: 200px;\n height: 200px;\n background: radial-gradient(circle, var(--accent-pink), transparent);\n bottom: 10%;\n right: -60px;\n animation-delay: -5s;\n animation-duration: 20s;\n }\n\n .floating-shape:nth-child(3) {\n width: 150px;\n height: 150px;\n background: radial-gradient(circle, var(--accent-cyan), transparent);\n top: 40%;\n left: 10%;\n animation-delay: -10s;\n animation-duration: 18s;\n }\n\n .floating-shape:nth-child(4) {\n width: 250px;\n height: 250px;\n background: radial-gradient(circle, var(--accent-purple), transparent);\n bottom: -100px;\n left: 30%;\n animation-delay: -7s;\n animation-duration: 22s;\n }\n\n @keyframes floatShape {\n 0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }\n 25% { transform: translate(30px, -40px) scale(1.05) rotate(5deg); }\n 50% { transform: translate(-20px, 20px) scale(0.95) rotate(-3deg); }\n 75% { transform: translate(40px, 30px) scale(1.02) rotate(4deg); }\n }\n\n /* 数字动画 */\n .math-symbol {\n display: inline-block;\n animation: mathBounce 3s ease-in-out infinite;\n }\n\n .math-symbol:nth-child(2) { animation-delay: 0.3s; }\n .math-symbol:nth-child(3) { animation-delay: 0.6s; }\n .math-symbol:nth-child(4) { animation-delay: 0.9s; }\n .math-symbol:nth-child(5) { animation-delay: 1.2s; }\n .math-symbol:nth-child(6) { animation-delay: 1.5s; }\n .math-symbol:nth-child(7) { animation-delay: 1.8s; }\n .math-symbol:nth-child(8) { animation-delay: 2.1s; }\n\n @keyframes mathBounce {\n 0%, 100% { transform: translateY(0) scale(1); }\n 50% { transform: translateY(-12px) scale(1.1); }\n }\n\n /* 玻璃卡片 */\n .glass-card {\n background: var(--card-bg);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border: 1px solid var(--glass-border);\n border-radius: 24px;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n\n .glass-card:hover {\n transform: translateY(-8px) scale(1.02);\n border-color: rgba(255, 255, 255, 0.25);\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 209, 102, 0.08);\n }\n\n /* 课程卡片图标容器 */\n .icon-circle {\n width: 64px;\n height: 64px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 28px;\n transition: all 0.4s ease;\n }\n\n .glass-card:hover .icon-circle {\n transform: scale(1.15) rotate(8deg);\n }\n\n /* 进度条动画 */\n .progress-bar {\n height: 6px;\n border-radius: 3px;\n background: rgba(255, 255, 255, 0.1);\n overflow: hidden;\n position: relative;\n }\n\n .progress-fill {\n height: 100%;\n border-radius: 3px;\n background: linear-gradient(90deg, var(--accent-yellow), var(--accent-orange));\n animation: progressFill 2s ease-out forwards;\n transform-origin: left;\n }\n\n @keyframes progressFill {\n from { width: 0%; }\n to { width: var(--progress); }\n }\n\n /* 按钮样式 */\n .btn-primary {\n background: linear-gradient(135deg, var(--accent-yellow), var(--accent-orange));\n color: var(--text-dark);\n font-family: 'Fredoka', sans-serif;\n font-weight: 600;\n border: none;\n border-radius: 50px;\n padding: 16px 40px;\n font-size: 1.1rem;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n position: relative;\n overflow: hidden;\n }\n\n .btn-primary::after {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n transition: left 0.6s ease;\n }\n\n .btn-primary:hover::after {\n left: 100%;\n }\n\n .btn-primary:hover {\n transform: translateY(-3px) scale(1.03);\n box-shadow: 0 12px 40px rgba(255, 209, 102, 0.35);\n }\n\n .btn-primary:active {\n transform: translateY(0) scale(0.98);\n }\n\n /* 数字粒子背景 */\n .number-particle {\n position: absolute;\n font-family: 'Fredoka', sans-serif;\n font-weight: 700;\n color: rgba(255, 255, 255, 0.04);\n pointer-events: none;\n animation: particleFloat 15s linear infinite;\n font-size: var(--size);\n }\n\n @keyframes particleFloat {\n 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }\n 10% { opacity: 1; }\n 90% { opacity: 1; }\n 100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }\n }\n\n /* 练习区数字输入 */\n .math-input {\n background: rgba(255, 255, 255, 0.08);\n border: 2px solid rgba(255, 255, 255, 0.15);\n border-radius: 16px;\n padding: 12px 20px;\n font-family: 'Fredoka', sans-serif;\n font-size: 1.5rem;\n color: white;\n width: 100px;\n text-align: center;\n transition: all 0.3s ease;\n outline: none;\n }\n\n .math-input:focus {\n border-color: var(--accent-yellow);\n box-shadow: 0 0 20px rgba(255, 209, 102, 0.2);\n background: rgba(255, 255, 255, 0.12);\n }\n\n .math-input::placeholder {\n color: rgba(255, 255, 255, 0.3);\n }\n\n /* 滚动显现动画 */\n .reveal {\n opacity: 0;\n transform: translateY(40px);\n transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.1);\n }\n\n .reveal.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .reveal-delay-1 { transition-delay: 0.1s; }\n .reveal-delay-2 { transition-delay: 0.2s; }\n .reveal-delay-3 { transition-delay: 0.3s; }\n .reveal-delay-4 { transition-delay: 0.4s; }\n\n /* 自定义滚动条 */\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: var(--primary);\n }\n ::-webkit-scrollbar-thumb {\n background: rgba(255, 209, 102, 0.3);\n border-radius: 4px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 209, 102, 0.5);\n }\n\n /* 统计数字动画 */\n .stat-number {\n font-family: 'Fredoka', sans-serif;\n font-size: 3rem;\n font-weight: 700;\n background: linear-gradient(135deg, var(--accent-yellow), var(--accent-orange));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n /* 响应式调整 */\n @media (max-width: 768px) {\n .stat-number {\n font-size: 2.2rem;\n }\n .btn-primary {\n padding: 14px 32px;\n font-size: 1rem;\n }\n }\n\n @media (max-width: 480px) {\n .stat-number {\n font-size: 1.8rem;\n }\n }\n\n /* 标签云 */\n .tag-pill {\n display: inline-block;\n padding: 6px 18px;\n border-radius: 50px;\n font-size: 0.85rem;\n font-weight: 600;\n font-family: 'Fredoka', sans-serif;\n background: rgba(255, 255, 255, 0.08);\n border: 1px solid rgba(255, 255, 255, 0.12);\n transition: all 0.3s ease;\n cursor: default;\n }\n\n .tag-pill:hover {\n background: rgba(255, 209, 102, 0.15);\n border-color: var(--accent-yellow);\n transform: translateY(-2px);\n }\n\n /* 装饰性斜线 */\n .diagonal-line {\n position: absolute;\n width: 200%;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(255,209,102,0.15), transparent);\n transform: rotate(-3deg);\n pointer-events: none;\n }\n </style>\n</head>\n<body>\n <!-- 浮动背景形状 -->\n <div class=\"fixed inset-0 overflow-hidden pointer-events-none z-0\">\n <div class=\"floating-shape\"></div>\n <div class=\"floating-shape\"></div>\n <div class=\"floating-shape\"></div>\n <div class=\"floating-shape\"></div>\n \n <!-- 数字粒子 -->\n <div class=\"number-particle\" style=\"--size: 3rem; left: 5%; animation-duration: 18s; animation-delay: 0s;\">+</div>\n <div class=\"number-particle\" style=\"--size: 2.5rem; left: 15%; animation-duration: 22s; animation-delay: -3s;\">÷</div>\n <div class=\"number-particle\" style=\"--size: 4rem; left: 30%; animation-duration: 20s; animation-delay: -7s;\">π</div>\n <div class=\"number-particle\" style=\"--size: 2rem; left: 45%; animation-duration: 25s; animation-delay: -2s;\">∑</div>\n <div class=\"number-particle\" style=\"--size: 3.5rem; left: 60%; animation-duration: 19s; animation-delay: -5s;\">√</div>\n <div class=\"number-particle\" style=\"--size: 2.8rem; left: 75%; animation-duration: 23s; animation-delay: -9s;\">∞</div>\n <div class=\"number-particle\" style=\"--size: 3.2rem; left: 88%; animation-duration: 21s; animation-delay: -4s;\">=</div>\n <div class=\"number-particle\" style=\"--size: 2.2rem; left: 50%; animation-duration: 26s; animation-delay: -11s;\">%</div>\n <div class=\"number-particle\" style=\"--size: 2.6rem; left: 22%; animation-duration: 17s; animation-delay: -6s;\">×</div>\n <div class=\"number-particle\" style=\"--size: 3rem; left: 70%; animation-duration: 24s; animation-delay: -8s;\">−</div>\n </div>\n\n <!-- 导航栏 -->\n <nav class=\"relative z-20 px-6 lg:px-12 py-5\">\n <div class=\"max-w-7xl mx-auto flex items-center justify-between\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-10 h-10 rounded-xl bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center text-lg font-bold text-gray-900 font-['Fredoka'] shadow-lg\">\n <i class=\"fa-solid fa-calculator\"></i>\n </div>\n <span class=\"text-xl font-['Fredoka'] font-semibold text-white\">趣学数学</span>\n </div>\n <div class=\"hidden md:flex items-center gap-8\">\n <a href=\"#courses\" class=\"text-gray-300 hover:text-yellow-400 transition-colors duration-300 font-medium\">课程</a>\n <a href=\"#practice\" class=\"text-gray-300 hover:text-yellow-400 transition-colors duration-300 font-medium\">练习</a>\n <a href=\"#stats\" class=\"text-gray-300 hover:text-yellow-400 transition-colors duration-300 font-medium\">成就</a>\n <a href=\"#about\" class=\"text-gray-300 hover:text-yellow-400 transition-colors duration-300 font-medium\">关于</a>\n </div>\n <div class=\"flex items-center gap-4\">\n <button class=\"hidden sm:block text-gray-300 hover:text-white transition-colors duration-300 font-medium\">登录</button>\n <button class=\"btn-primary !py-2.5 !px-6 !text-sm\">\n <i class=\"fa-solid fa-rocket mr-2\"></i>开始学习\n </button>\n </div>\n </div>\n </nav>\n\n <!-- Hero 区域 -->\n <section class=\"relative z-10 px-6 lg:px-12 pt-10 pb-20 lg:pb-32\">\n <div class=\"max-w-7xl mx-auto\">\n <div class=\"grid lg:grid-cols-2 gap-12 items-center\">\n <div class=\"space-y-8\">\n <!-- 标签 -->\n <div class=\"flex flex-wrap gap-3\">\n <span class=\"tag-pill text-yellow-300 border-yellow-500/30\"><i class=\"fa-solid fa-star mr-1.5 text-yellow-400\"></i>全新上线</span>\n <span class=\"tag-pill text-cyan-300 border-cyan-500/30\"><i class=\"fa-solid fa-users mr-1.5 text-cyan-400\"></i>10万+学员</span>\n </div>\n\n <h1 class=\"text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold leading-tight\">\n <span class=\"text-white\">让数学</span>\n <br>\n <span class=\"bg-gradient-to-r from-yellow-400 via-orange-400 to-pink-500 bg-clip-text text-transparent\">变得好玩</span>\n <br>\n <span class=\"text-white/80\">起来</span>\n </h1>\n\n <p class=\"text-lg sm:text-xl text-gray-400 leading-relaxed max-w-lg\">\n 告别枯燥的公式背诵，通过互动游戏和可视化教学，\n 让孩子在快乐中掌握数学思维，爱上数学。\n </p>\n\n <div class=\"flex flex-wrap gap-4\">\n <button class=\"btn-primary text-lg\">\n <i class=\"fa-solid fa-play mr-2\"></i>免费试学\n </button>\n <button class=\"px-8 py-4 rounded-full border border-white/20 text-white font-['Fredoka'] font-semibold hover:bg-white/5 transition-all duration-300 flex items-center gap-2\">\n <i class=\"fa-solid fa-circle-play text-yellow-400\"></i>\n 观看介绍\n </button>\n </div>\n\n <!-- 统计 -->\n <div class=\"flex flex-wrap gap-8 pt-4\">\n <div>\n <div class=\"stat-number text-3xl sm:text-4xl\">500+</div>\n <div class=\"text-gray-500 text-sm mt-1\">互动课程</div>\n </div>\n <div>\n <div class=\"stat-number text-3xl sm:text-4xl\">98%</div>\n <div class=\"text-gray-500 text-sm mt-1\">学员好评率</div>\n </div>\n <div>\n <div class=\"stat-number text-3xl sm:text-4xl\">50+</div>\n <div class=\"text-gray-500 text-sm mt-1\">趣味游戏</div>\n </div>\n </div>\n </div>\n\n <!-- 右侧动画区域 -->\n <div class=\"relative flex items-center justify-center\">\n <div class=\"relative w-full max-w-md aspect-square\">\n <!-- 装饰圆环 -->\n <div class=\"absolute inset-0 rounded-full border border-yellow-500/10 animate-pulse\" style=\"animation-duration: 4s;\"></div>\n <div class=\"absolute inset-4 rounded-full border border-cyan-500/10 animate-pulse\" style=\"animation-duration: 5s; animation-delay: 0.5s;\"></div>\n <div class=\"absolute inset-8 rounded-full border border-pink-500/10 animate-pulse\" style=\"animation-duration: 6s; animation-delay: 1s;\"></div>\n \n <!-- 中心数学符号 -->\n <div class=\"absolute inset-0 flex items-center justify-center\">\n <div class=\"text-center\">\n <div class=\"flex items-center justify-center gap-4 sm:gap-6 mb-4\">\n <span class=\"math-symbol text-5xl sm:text-6xl lg:text-7xl font-['Fredoka'] font-bold text-yellow-400\">3</span>\n <span class=\"math-symbol text-4xl sm:text-5xl lg:text-6xl font-['Fredoka'] font-bold text-pink-400\">+</span>\n <span class=\"math-symbol text-5xl sm:text-6xl lg:text-7xl font-['Fredoka'] font-bold text-cyan-400\">5</span>\n <span class=\"math-symbol text-4xl sm:text-5xl lg:text-6xl font-['Fredoka'] font-bold text-white/60\">=</span>\n <span class=\"math-symbol text-5xl sm:text-6xl lg:text-7xl font-['Fredoka'] font-bold text-yellow-400\">8</span>\n </div>\n <div class=\"flex items-center justify-center gap-4 sm:gap-6\">\n <span class=\"math-symbol text-4xl sm:text-5xl lg:text-6xl font-['Fredoka'] font-bold text-purple-400\">12</span>\n <span class=\"math-symbol text-3xl sm:text-4xl lg:text-5xl font-['Fredoka'] font-bold text-pink-400\">÷</span>\n <span class=\"math-symbol text-4xl sm:text-5xl lg:text-6xl font-['Fredoka'] font-bold text-cyan-400\">4</span>\n <span class=\"math-symbol text-3xl sm:text-4xl lg:text-5xl font-['Fredoka'] font-bold text-white/60\">=</span>\n <span class=\"math-symbol text-4xl sm:text-5xl lg:text-6xl font-['Fredoka'] font-bold text-purple-400\">3</span>\n </div>\n </div>\n </div>\n\n <!-- 装饰小元素 -->\n <div class=\"absolute top-8 right-8 w-12 h-12 rounded-2xl bg-yellow-400/20 border border-yellow-400/30 flex items-center justify-center animate-bounce\" style=\"animation-duration: 3s;\">\n <i class=\"fa-solid fa-plus text-yellow-400 text-xl\"></i>\n </div>\n <div class=\"absolute bottom-12 left-6 w-10 h-10 rounded-xl bg-pink-400/20 border border-pink-400/30 flex items-center justify-center animate-bounce\" style=\"animation-duration: 3.5s; animation-delay: 0.5s;\">\n <i class=\"fa-solid fa-divide text-pink-400 text-lg\"></i>\n </div>\n <div class=\"absolute top-1/3 -right-4 w-14 h-14 rounded-full bg-cyan-400/20 border border-cyan-400/30 flex items-center justify-center animate-bounce\" style=\"animation-duration: 4s; animation-delay: 1s;\">\n <i class=\"fa-solid fa-infinity text-cyan-400 text-xl\"></i>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- 课程区域 -->\n <section id=\"courses\" class=\"relative z-10 px-6 lg:px-12 py-20 lg:py-28\">\n <div class=\"max-w-7xl mx-auto\">\n <div class=\"text-center mb-16 reveal\">\n <span class=\"tag-pill text-yellow-300 border-yellow-500/30 mb-4 inline-block\"><i class=\"fa-solid fa-book-open mr-1.5\"></i>精选课程</span>\n <h2 class=\"text-3xl sm:text-4xl lg:text-5xl font-bold mt-4\">\n 探索<span class=\"bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent\">数学</span>的奇妙世界\n </h2>\n <p class=\"text-gray-400 text-lg mt-4 max-w-2xl mx-auto\">\n 从基础运算到高阶思维，每个课程都经过精心设计，让学习像游戏一样有趣\n </p>\n </div>\n\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n <!-- 加法 -->\n <div class=\"glass-card p-6 sm:p-8 reveal reveal-delay-1 cursor-pointer group\">\n <div class=\"icon-circle bg-yellow-400/15 text-yellow-400 mb-5\">\n <i class=\"fa-solid fa-plus\"></i>\n </div>\n <h3 class=\"text-xl font-['Fredoka'] font-semibold mb-2\">加法乐园</h3>\n <p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\n 通过水果、积木等趣味道具，轻松掌握加法运算\n </p>\n <div class=\"flex items-center justify-between\">\n <span class=\"text-yellow-400 text-sm font-semibold\">12节课</span>\n <div class=\"progress-bar flex-1 mx-4\">\n <div class=\"progress-fill\" style=\"--progress: 75%;\"></div>\n </div>\n <span class=\"text-gray-500 text-xs\">75%</span>\n </div>\n <div class=\"mt-4 pt-4 border-t border-white/5 flex items-center justify-between\">\n <span class=\"text-gray-500 text-xs\"><i class=\"fa-solid fa-user-graduate mr-1\"></i>2,340人学习</span>\n <span class=\"text-yellow-400 text-sm group-hover:translate-x-1 transition-transform duration-300\">\n 开始学习 <i class=\"fa-solid fa-arrow-right ml-1\"></i>\n </span>\n </div>\n </div>\n\n <!-- 减法 -->\n <div class=\"glass-card p-6 sm:p-8 reveal reveal-delay-2 cursor-pointer group\">\n <div class=\"icon-circle bg-pink-400/15 text-pink-400 mb-5\">\n <i class=\"fa-solid fa-minus\"></i>\n </div>\n <h3 class=\"text-xl font-['Fredoka'] font-semibold mb-2\">减法冒险</h3>\n <p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\n 在故事冒险中理解减法的意义，培养逆向思维\n </p>\n <div class=\"flex items-center justify-between\">\n <span class=\"text-pink-400 text-sm font-semibold\">10节课</span>\n <div class=\"progress-bar flex-1 mx-4\">\n <div class=\"progress-fill\" style=\"--progress: 60%; background: linear-gradient(90deg, #ef476f, #fb8500);\"></div>\n </div>\n <span class=\"text-gray-500 text-xs\">60%</span>\n </div>\n <div class=\"mt-4 pt-4 border-t border-white/5 flex items-center justify-between\">\n <span class=\"text-gray-500 text-xs\"><i class=\"fa-solid fa-user-graduate mr-1\"></i>1,890人学习</span>\n <span class=\"text-pink-400 text-sm group-hover:translate-x-1 transition-transform duration-300\">\n 开始学习 <i class=\"fa-solid fa-arrow-right ml-1\"></i>\n </span>\n </div>\n </div>\n\n <!-- 乘法 -->\n <div class=\"glass-card p-6 sm:p-8 reveal reveal-delay-3 cursor-pointer group\">\n <div class=\"icon-circle bg-cyan-400/15 text-cyan-400 mb-5\">\n <i class=\"fa-solid fa-xmark\"></i>\n </div>\n <h3 class=\"text-xl font-['Fredoka'] font-semibold mb-2\">乘法王国</h3>\n <p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\n 用阵列图和跳数法，让乘法口诀变得简单有趣\n </p>\n <div class=\"flex items-center justify-between\">\n <span class=\"text-cyan-400 text-sm font-semibold\">15节课</span>\n <div class=\"progress-bar flex-1 mx-4\">\n <div class=\"progress-fill\" style=\"--progress: 40%; background: linear-gradient(90deg, #06d6a0, #118ab2);\"></div>\n </div>\n <span class=\"text-gray-500 text-xs\">40%</span>\n </div>\n <div class=\"mt-4 pt-4 border-t border-white/5 flex items-center justify-between\">\n <span class=\"text-gray-500 text-xs\"><i class=\"fa-solid fa-user-graduate mr-1\"></i>3,120人学习</span>\n <span class=\"text-cyan-400 text-sm group-hover:translate-x-1 transition-transform duration-300\">\n 开始学习 <i class=\"fa-solid fa-arrow-right ml-1\"></i>\n </span>\n </div>\n </div>\n\n <!-- 除法 -->\n <div class=\"glass-card p-6 sm:p-8 reveal reveal-delay-4 cursor-pointer group\">\n <div class=\"icon-circle bg-purple-400/15 text-purple-400 mb-5\">\n <i class=\"fa-solid fa-divide\"></i>\n </div>\n <h3 class=\"text-xl font-['Fredoka'] font-semibold mb-2\">除法探秘</h3>\n <p class=\"text-gray-400 text-sm leading-relaxed mb-4\">\n 通过分糖果、分组游戏，轻松理解除法概念\n </p>\n <div class=\"flex items-center justify-between\">\n <span class=\"text-purple-400 text-sm font-semibold\">12节课</span>\n <div class=\"progress-bar flex-