homepage

app/static/images/hero/placeholder.svg

@@ -0,0 +1,11 @@
+<svg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#FFE0B2"/>
+      <stop offset="50%" style="stop-color:#FFCCBC"/>
+      <stop offset="100%" style="stop-color:#FFAB91"/>
+    </linearGradient>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#bg)"/>
+  <text x="50%" y="50%" text-anchor="middle" dy=".3em" font-family="Arial, sans-serif" font-size="72" fill="#FF5722">童趣学习背景</text>
+</svg>

app/static/js/main.js

@@ -1,177 +1,361 @@
-// 全局JavaScript功能
+// 主页增强功能 - 无彩蛋版本
 document.addEventListener('DOMContentLoaded', function() {
-    // 自动隐藏提示消息
-    const alerts = document.querySelectorAll('.alert');
-    alerts.forEach(function(alert) {
-        setTimeout(function() {
-            alert.style.opacity = '0';
-            setTimeout(function() {
-                alert.style.display = 'none';
-            }, 300);
-        }, 5000); // 5秒后自动隐藏
-    });
-    // 平滑滚动
-    const links = document.querySelectorAll('a[href^="#"]');
-    links.forEach(function(link) {
-        link.addEventListener('click', function(e) {
-            e.preventDefault();
-            const target = document.querySelector(this.getAttribute('href'));
-            if (target) {
-                target.scrollIntoView({
-                    behavior: 'smooth',
-                    block: 'start'
-                });
-            }
-        });
-    });
-    // 表单验证增强
-    const forms = document.querySelectorAll('form');
-    forms.forEach(function(form) {
-        form.addEventListener('submit', function(e) {
-            const submitBtn = form.querySelector('button[type="submit"]');
-            if (submitBtn && !submitBtn.disabled) {
-                // 防止重复提交
-                setTimeout(function() {
-                    submitBtn.disabled = true;
+    
+    // 页面加载动画
+    document.body.classList.add('page-loading');
+    setTimeout(() => {
+        document.body.classList.remove('page-loading');
     }, 100);
+    
+    // 数字统计动画
+    animateCounters();
+    
+    // 场景分类筛选
+    initScenarioFilter();
+    
+    // 滚动动画
+    initScrollAnimations();
+    
+    // 轮播图增强
+    enhanceCarousel();
+    
+    // 功能卡片交互
+    enhanceFeatureCards();
+    
+    console.log('🎨 主页功能已加载完成！');
+});
+
+// 数字统计动画
+function animateCounters() {
+    const counters = document.querySelectorAll('.stat-number');
+    
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                const counter = entry.target;
+                const target = parseInt(counter.getAttribute('data-count'));
+                animateCounter(counter, target);
+                observer.unobserve(counter);
             }
         });
     });
-    // 输入框焦点效果
-    const inputs = document.querySelectorAll('.form-control');
-    inputs.forEach(function(input) {
-        input.addEventListener('focus', function() {
-            this.parentNode.classList.add('focused');
-        });
     
-        input.addEventListener('blur', function() {
-            this.parentNode.classList.remove('focused');
-        });
-    });
-    // 工具提示初始化
-    if (typeof bootstrap !== 'undefined') {
-        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
-        tooltipTriggerList.map(function(tooltipTriggerEl) {
-            return new bootstrap.Tooltip(tooltipTriggerEl);
-        });
-        // 弹出框初始化
-        const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
-        popoverTriggerList.map(function(popoverTriggerEl) {
-            return new bootstrap.Popover(popoverTriggerEl);
-        });
-    }
-    // 邮箱验证码倒计时功能
-    window.startVerificationCountdown = function(buttonId, duration = 60) {
-        const button = document.getElementById(buttonId);
-        if (!button) return;
+    counters.forEach(counter => observer.observe(counter));
+}
 
-        let count = duration;
-        const originalText = button.textContent;
+function animateCounter(element, target) {
+    let count = 0;
+    const duration = 2000; // 2秒
+    const step = target / (duration / 16); // 60fps
     
-        button.disabled = true;
-        
-        const timer = setInterval(function() {
-            button.textContent = `${count}秒后重试`;
-            count--;
-            
-            if (count < 0) {
+    const timer = setInterval(() => {
+        count += step;
+        if (count >= target) {
+            count = target;
             clearInterval(timer);
-                button.disabled = false;
-                button.textContent = originalText === '发送验证码' ? '重新发送' : originalText;
         }
-        }, 1000);
+        element.textContent = Math.floor(count);
+    }, 16);
+}
 
-        return timer;
-    };
-    // AJAX请求封装
-    window.sendAjaxRequest = function(url, data, successCallback, errorCallback) {
-        fetch(url, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'X-Requested-With': 'XMLHttpRequest'
-            },
-            body: JSON.stringify(data)
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                if (successCallback) successCallback(data);
+// 场景分类筛选
+function initScenarioFilter() {
+    const navButtons = document.querySelectorAll('.scenario-nav-btn');
+    const scenarioCards = document.querySelectorAll('.scenario-card-new');
+    
+    navButtons.forEach(btn => {
+        btn.addEventListener('click', function() {
+            // 更新激活状态
+            navButtons.forEach(b => b.classList.remove('active'));
+            this.classList.add('active');
+            
+            // 筛选场景
+            const category = this.getAttribute('data-category');
+            
+            scenarioCards.forEach(card => {
+                if (category === 'all' || card.getAttribute('data-category') === category) {
+                    card.style.display = 'block';
+                    card.style.animation = 'fadeInUp 0.5s ease forwards';
                 } else {
-                if (errorCallback) errorCallback(data.message || '请求失败');
+                    card.style.display = 'none';
                 }
-        })
-        .catch(error => {
-            console.error('请求错误:', error);
-            if (errorCallback) errorCallback('网络错误，请检查连接');
             });
-    };
-    // 显示加载状态
-    window.showLoading = function(button, loadingText = '处理中...') {
-        if (!button) return;
+        });
+    });
+}
 
-        button.disabled = true;
-        const originalHTML = button.innerHTML;
-        button.innerHTML = `<i class="fas fa-spinner fa-spin me-2"></i>${loadingText}`;
+// 滚动动画
+function initScrollAnimations() {
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
     
-        return function() {
-            button.disabled = false;
-            button.innerHTML = originalHTML;
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-in');
+                
+                // 为子元素添加延迟动画
+                const children = entry.target.querySelectorAll('.stat-card, .feature-card-advanced, .step-item');
+                children.forEach((child, index) => {
+                    setTimeout(() => {
+                        child.classList.add('fade-in');
+                    }, index * 100);
+                });
+            }
+        });
+    }, observerOptions);
+    
+    // 观察需要动画的元素
+    document.querySelectorAll('.stats-showcase, .learning-steps, .scenarios-grid').forEach(el => {
+        observer.observe(el);
+    });
+}
+
+// 轮播图增强
+function enhanceCarousel() {
+    const carousel = document.querySelector('#heroCarousel');
+    if (!carousel) return;
+    
+    // 增强指示器点击效果
+    document.querySelectorAll('.carousel-indicators button').forEach(indicator => {
+        indicator.addEventListener('click', function() {
+            this.style.transform = 'scale(1.5)';
+            setTimeout(() => {
+                this.style.transform = '';
+            }, 200);
+        });
+    });
+    
+    // 控制器悬停效果
+    document.querySelectorAll('.kid-control').forEach(control => {
+        control.addEventListener('mouseenter', function() {
+            this.style.transform = 'scale(1.1)';
+        });
+        
+        control.addEventListener('mouseleave', function() {
+            this.style.transform = 'scale(1)';
+        });
+    });
+}
+
+// 功能卡片交互增强
+function enhanceFeatureCards() {
+    // 语音波浪动画控制
+    const waveDemo = document.querySelector('.voice-wave-demo');
+    if (waveDemo) {
+        const waveCard = waveDemo.closest('.feature-card-advanced');
+        
+        waveCard.addEventListener('mouseenter', function() {
+            const bars = waveDemo.querySelectorAll('.wave-bar');
+            bars.forEach((bar, index) => {
+                bar.style.animationDuration = '0.8s';
+                bar.style.animationDelay = (index * 0.1) + 's';
+            });
+        });
+        
+        waveCard.addEventListener('mouseleave', function() {
+            const bars = waveDemo.querySelectorAll('.wave-bar');
+            bars.forEach((bar, index) => {
+                bar.style.animationDuration = '1.5s';
+                bar.style.animationDelay = (index * 0.2) + 's';
+            });
+        });
+    }
+    
+    // 聊天演示动画
+    const chatDemo = document.querySelector('.chat-demo');
+    if (chatDemo) {
+        const aiCard = chatDemo.closest('.feature-card-advanced');
+        
+        aiCard.addEventListener('mouseenter', function() {
+            const typingIndicator = chatDemo.querySelector('.typing-indicator');
+            if (typingIndicator) {
+                typingIndicator.style.animationDuration = '1s';
+            }
+        });
+    }
+}
+
+// 场景预览功能
+window.showPreview = function(scenarioType) {
+    const modal = document.getElementById('scenarioPreview');
+    const title = document.getElementById('previewTitle');
+    const chat = document.getElementById('previewChat');
+    
+    // 预设对话内容
+    const dialogues = {
+        friend: [
+            { type: 'ai', text: '你好呀，我叫小明！你叫什么名字？' },
+            { type: 'user', text: '你好小明，我叫小红！' },
+            { type: 'ai', text: '很高兴认识你小红！我们可以做朋友吗？' },
+            { type: 'user', text: '当然可以！我也想和你做朋友！' }
+        ],
+        party: [
+            { type: 'ai', text: '小红，下周是我的生日，你愿意来参加我的生日派对吗？' },
+            { type: 'user', text: '哇，真的吗？我很想去！' },
+            { type: 'ai', text: '太好了！派对在下周六下午3点，记得带上好心情哦！' }
+        ],
+        restaurant: [
+            { type: 'ai', text: '欢迎光临！小朋友想吃点什么呢？' },
+            { type: 'user', text: '我想要一份儿童套餐，谢谢！' },
+            { type: 'ai', text: '好的，儿童套餐有汉堡、薯条和果汁，这样可以吗？' }
+        ],
+        shopping: [
+            { type: 'ai', text: '小朋友，你在找什么东西吗？' },
+            { type: 'user', text: '我想买一些水果给妈妈！' },
+            { type: 'ai', text: '真懂事！我们这里有苹果、香蕉和橙子，你想要哪种？' }
+        ],
+        actor: [
+            { type: 'ai', text: '现在你是一只小猫咪，你会怎么介绍自己呢？' },
+            { type: 'user', text: '喵～我是一只可爱的小猫，我喜欢吃鱼和玩毛线球！' },
+            { type: 'ai', text: '表演得太棒了！你还能学其他小动物吗？' }
+        ],
+        story: [
+            { type: 'ai', text: '让我们一起编一个故事吧！从前有一只勇敢的小兔子...' },
+            { type: 'user', text: '这只小兔子住在一个神奇的森林里！' },
+            { type: 'ai', text: '哇！那这个森林里还有什么特别的地方吗？' }
+        ]
     };
+    
+    const dialogue = dialogues[scenarioType] || dialogues.friend;
+    
+    // 设置标题
+    const titles = {
+        friend: '👫 和小明交朋友',
+        party: '🎂 生日派对邀请',
+        restaurant: '🏪 餐厅点餐小达人',
+        shopping: '🛍️ 超市购物助手',
+        actor: '🎭 小小演员训练营',
+        story: '🌈 创意故事大王'
     };
-    // 显示消息提示
-    window.showMessage = function(message, type = 'info') {
-        const alertContainer = document.querySelector('.container');
-        if (!alertContainer) return;
-        const alertDiv = document.createElement('div');
-        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
-        alertDiv.innerHTML = `
-            <i class="fas fa-${type === 'error' ? 'exclamation-triangle' : type === 'success' ? 'check-circle' : 'info-circle'} me-2"></i>
-            ${message}
-            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+    
+    title.textContent = titles[scenarioType] || '对话预览';
+    
+    // 清空并重新填充对话
+    chat.innerHTML = '';
+    
+    dialogue.forEach((msg, index) => {
+        setTimeout(() => {
+            const msgDiv = document.createElement('div');
+            msgDiv.className = `chat-bubble ${msg.type}-bubble`;
+            msgDiv.innerHTML = `
+                <span class="avatar">${msg.type === 'ai' ? '🤖' : '😊'}</span>
+                <span class="text">${msg.text}</span>
+            `;
+            chat.appendChild(msgDiv);
+            
+            // 滚动到底部
+            chat.scrollTop = chat.scrollHeight;
+        }, index * 1000);
+    });
+    
+    // 显示弹窗
+    modal.style.display = 'flex';
+    
+    // 添加点击外部关闭功能
+    modal.addEventListener('click', function(e) {
+        if (e.target === modal) {
+            closePreview();
+        }
+    });
+};
+
+window.closePreview = function() {
+    const modal = document.getElementById('scenarioPreview');
+    modal.style.display = 'none';
+};
+
+// 按钮点击效果增强
+document.addEventListener('click', function(e) {
+    // 为所有按钮添加点击波纹效果
+    if (e.target.matches('button, .btn, .btn-start, .btn-preview')) {
+        createRipple(e);
+    }
+});
+
+function createRipple(event) {
+    const button = event.target;
+    const rect = button.getBoundingClientRect();
+    const size = Math.max(rect.width, rect.height);
+    const x = event.clientX - rect.left - size / 2;
+    const y = event.clientY - rect.top - size / 2;
+    
+    const ripple = document.createElement('span');
+    ripple.style.cssText = `
+        position: absolute;
+        width: ${size}px;
+        height: ${size}px;
+        left: ${x}px;
+        top: ${y}px;
+        background: rgba(255, 255, 255, 0.6);
+        border-radius: 50%;
+        transform: scale(0);
+        animation: ripple 0.6s linear;
+        pointer-events: none;
+        z-index: 1000;
     `;
     
-        alertContainer.insertBefore(alertDiv, alertContainer.firstChild);
+    // 确保按钮有相对定位
+    if (getComputedStyle(button).position === 'static') {
+        button.style.position = 'relative';
+    }
     
-        // 自动隐藏
-        setTimeout(function() {
-            alertDiv.style.opacity = '0';
-            setTimeout(function() {
-                if (alertDiv.parentNode) {
-                    alertDiv.parentNode.removeChild(alertDiv);
+    button.appendChild(ripple);
+    
+    setTimeout(() => {
+        ripple.remove();
+    }, 600);
+}
+
+// 添加CSS动画
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes ripple {
+        to {
+            transform: scale(4);
+            opacity: 0;
         }
-            }, 300);
-        }, 5000);
-    };
-    // 验证邮箱格式
-    window.validateEmail = function(email) {
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        return emailRegex.test(email);
-    };
-    // 验证密码强度
-    window.validatePassword = function(password) {
-        if (password.length < 6) {
-            return { valid: false, message: '密码长度至少6位' };
     }
-        return { valid: true, message: '密码强度可以' };
+    
+    @keyframes fadeInUp {
+        from {
+            opacity: 0;
+            transform: translateY(30px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+    
+    .fade-in {
+        animation: fadeInUp 0.6s ease forwards;
+    }
+    
+    .animate-in {
+        animation: fadeInUp 0.8s ease forwards;
+    }
+`;
+document.head.appendChild(style);
+
+// 性能优化：节流函数
+function throttle(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
         };
-    // 数字输入限制
-    window.restrictToNumbers = function(inputElement) {
-        inputElement.addEventListener('input', function(e) {
-            e.target.value = e.target.value.replace(/[^0-9]/g, '');
-        });
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
     };
-    // 初始化数字验证码输入框
-    const codeInputs = document.querySelectorAll('input[name="verification_code"]');
-    codeInputs.forEach(function(input) {
-        window.restrictToNumbers(input);
-    });
-});
-// 全局错误处理
-window.addEventListener('error', function(e) {
-    console.error('全局错误:', e.error);
-});
-// 全局未处理的Promise拒绝
-window.addEventListener('unhandledrejection', function(e) {
-    console.error('未处理的Promise拒绝:', e.reason);
-});
+}
+
+// 滚动性能优化
+const handleScroll = throttle(() => {
+    // 滚动相关的性能敏感操作
+}, 100);
+
+window.addEventListener('scroll', handleScroll);

app/templates/index.html

@@ -3,8 +3,8 @@
 {% block title %}首页 - 儿童语言学习系统{% endblock %}
 
 {% block content %}
-<!-- 1. 修复后的轮播图英雄区域 -->
-<div id="heroCarousel" class="carousel slide hero-carousel-fixed" data-bs-ride="carousel">
+<!-- 1. 童趣轮播图英雄区域 -->
+<div id="heroCarousel" class="carousel slide hero-carousel-kid" data-bs-ride="carousel">
     <!-- 指示器 -->
     <div class="carousel-indicators">
         <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
@@ -16,31 +16,46 @@
     <div class="carousel-inner">
         <!-- 第一个轮播项：语音克隆 -->
         <div class="carousel-item active">
-            <img src="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" class="d-block w-100" alt="孩子在学习">
-            <div class="carousel-overlay"></div>
-            <div class="floating-decorations">
-                <div class="float-emoji">🎤</div>
-                <div class="float-emoji">🗣️</div>
-                <div class="float-emoji">✨</div>
-                <div class="float-emoji">🎵</div>
+            <img src="https://images.unsplash.com/photo-1596464716127-f2a82984de30?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" class="d-block w-100" alt="快乐学习的小朋友">
+            <div class="carousel-overlay-kid"></div>
+            
+            <!-- 童趣装饰元素 -->
+            <div class="kid-decorations">
+                <div class="kid-star kid-star-1">⭐</div>
+                <div class="kid-star kid-star-2">🌟</div>
+                <div class="kid-star kid-star-3">✨</div>
+                <div class="kid-cloud kid-cloud-1">☁️</div>
+                <div class="kid-cloud kid-cloud-2">☁️</div>
+                <div class="kid-balloon kid-balloon-1">🎈</div>
+                <div class="kid-balloon kid-balloon-2">🎈</div>
+                <div class="kid-balloon kid-balloon-3">🎈</div>
             </div>
-            <div class="carousel-caption d-md-block">
-                <div class="hero-badge">🎉 AI语音黑科技</div>
-                <h1 class="hero-title">
-                    <span class="highlight">听自己的声音</span><br>
-                    快乐学说话！
+            
+            <!-- 音乐符号动画 -->
+            <div class="music-notes">
+                <div class="music-note music-note-1">🎵</div>
+                <div class="music-note music-note-2">🎶</div>
+                <div class="music-note music-note-3">🎵</div>
+                <div class="music-note music-note-4">🎶</div>
+            </div>
+            
+            <div class="carousel-caption d-md-block kid-caption">
+                <div class="hero-badge-kid">🎤 神奇的声音魔法</div>
+                <h1 class="hero-title-kid">
+                    <span class="rainbow-text">听自己的声音</span><br>
+                    <span class="bounce-text">快乐学说话！</span>
                 </h1>
-                <p class="hero-subtitle">
-                    哇！我们有个超酷的魔法，能让电脑学会说话像你一样好听！
-                    再也不怕开口说话啦～
+                <p class="hero-subtitle-kid">
+                    🌈 哇！我们有个超级厉害的魔法，能让电脑学会说话像你一样好听！<br>
+                    🚀 再也不怕开口说话啦，来和AI老师一起玩吧～
                 </p>
                 {% if not current_user.is_authenticated %}
-                    <a href="{{ url_for('auth.register') }}" class="btn btn-hero">
-                        <i class="fas fa-rocket me-2"></i>来试试这个魔法
+                    <a href="{{ url_for('auth.register') }}" class="btn btn-hero-kid btn-magic">
+                        <i class="fas fa-rocket me-2"></i>🎉 来试试这个魔法
                     </a>
                 {% else %}
-                    <a href="{{ url_for('main.dashboard') }}" class="btn btn-hero">
-                        <i class="fas fa-play me-2"></i>开始我的冒险
+                    <a href="{{ url_for('main.dashboard') }}" class="btn btn-hero-kid btn-adventure">
+                        <i class="fas fa-play me-2"></i>🏃‍♂️ 开始我的冒险
                     </a>
                 {% endif %}
             </div>
@@ -48,157 +63,613 @@
 
         <!-- 第二个轮播项：场景对话 -->
         <div class="carousel-item">
-            <img src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" class="d-block w-100" alt="儿童游戏场景">
-            <div class="carousel-overlay"></div>
-            <div class="floating-decorations">
-                <div class="float-emoji">🏪</div>
-                <div class="float-emoji">🍕</div>
-                <div class="float-emoji">👫</div>
-                <div class="float-emoji">🎭</div>
+            <img src="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" class="d-block w-100" alt="儿童游戏场景">
+            <div class="carousel-overlay-kid"></div>
+            
+            <!-- 游戏装饰元素 -->
+            <div class="kid-decorations">
+                <div class="kid-toy toy-1">🧸</div>
+                <div class="kid-toy toy-2">🎲</div>
+                <div class="kid-toy toy-3">🎭</div>
+                <div class="kid-game game-1">🏪</div>
+                <div class="kid-game game-2">🍕</div>
+                <div class="kid-game game-3">👫</div>
+                <div class="kid-spark spark-1">💫</div>
+                <div class="kid-spark spark-2">✨</div>
             </div>
-            <div class="carousel-caption d-md-block">
-                <div class="hero-badge">🎮 超多好玩场景</div>
-                <h1 class="hero-title">
-                    <span class="highlight">像玩游戏一样</span><br>
-                    练习说话！
+            
+            <div class="carousel-caption d-md-block kid-caption">
+                <div class="hero-badge-kid">🎮 超多好玩场景</div>
+                <h1 class="hero-title-kid">
+                    <span class="rainbow-text">像玩游戏一样</span><br>
+                    <span class="wiggle-text">练习说话！</span>
                 </h1>
-                <p class="hero-subtitle">
-                    去餐厅点好吃的、跟小朋友交朋友、当个小老板...
-                    在各种好玩的情景里，自然而然学会表达！
+                <p class="hero-subtitle-kid">
+                    🏪 去餐厅点好吃的、🤝 跟小朋友交朋友、👔 当个小老板...<br>
+                    🎭 在各种好玩的情景里，自然而然学会表达！
                 </p>
-                <a href="{{ url_for('main.dashboard') if current_user.is_authenticated else url_for('auth.login') }}" class="btn btn-hero">
-                    <i class="fas fa-gamepad me-2"></i>去玩场景游戏
+                <a href="{{ url_for('main.dashboard') if current_user.is_authenticated else url_for('auth.login') }}" class="btn btn-hero-kid btn-play">
+                    <i class="fas fa-gamepad me-2"></i>🎲 去玩场景游戏
                 </a>
             </div>
         </div>
 
         <!-- 第三个轮播项：智能评估 -->
         <div class="carousel-item">
-            <img src="https://images.unsplash.com/photo-1509909756405-be0199881695?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" class="d-block w-100" alt="孩子学习成长">
-            <div class="carousel-overlay"></div>
-            <div class="floating-decorations">
-                <div class="float-emoji">📊</div>
-                <div class="float-emoji">🌟</div>
-                <div class="float-emoji">🏆</div>
-                <div class="float-emoji">💡</div>
+            <img src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80" class="d-block w-100" alt="孩子学习成长">
+            <div class="carousel-overlay-kid"></div>
+            
+            <!-- 成长装饰元素 -->
+            <div class="kid-decorations">
+                <div class="kid-trophy trophy-1">🏆</div>
+                <div class="kid-trophy trophy-2">🥇</div>
+                <div class="kid-star star-big">🌟</div>
+                <div class="kid-rocket rocket-1">🚀</div>
+                <div class="kid-flower flower-1">🌸</div>
+                <div class="kid-flower flower-2">🌺</div>
+                <div class="kid-rainbow">🌈</div>
             </div>
-            <div class="carousel-caption d-md-block">
-                <div class="hero-badge">🎯 智能小助手</div>
-                <h1 class="hero-title">
-                    <span class="highlight">每次进步</span><br>
-                    我们都看得见！
+            
+            <div class="carousel-caption d-md-block kid-caption">
+                <div class="hero-badge-kid">🎯 智能小助手</div>
+                <h1 class="hero-title-kid">
+                    <span class="rainbow-text">每次进步</span><br>
+                    <span class="scale-text">我们都看得见！</span>
                 </h1>
-                <p class="hero-subtitle">
-                    AI老师会仔细听你说的每一句话，告诉你哪里说得棒棒的，
-                    哪里还能更棒！就像有个贴心的小伙伴在身边～
+                <p class="hero-subtitle-kid">
+                    🤖 AI老师会仔细听你说的每一句话，告诉你哪里说得棒棒的，<br>
+                    📈 哪里还能更棒！就像有个贴心的小伙伴在身边～
                 </p>
-                <a href="{{ url_for('main.dashboard') if current_user.is_authenticated else url_for('auth.login') }}" class="btn btn-hero">
-                    <i class="fas fa-chart-line me-2"></i>看看我的成长
+                <a href="{{ url_for('main.dashboard') if current_user.is_authenticated else url_for('auth.login') }}" class="btn btn-hero-kid btn-growth">
+                    <i class="fas fa-chart-line me-2"></i>📊 看看我的成长
                 </a>
             </div>
         </div>
     </div>
 
     <!-- 控制器 -->
-    <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
-        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <button class="carousel-control-prev kid-control" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
+        <span class="kid-arrow-prev">◀️</span>
         <span class="visually-hidden">Previous</span>
     </button>
-    <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
-        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <button class="carousel-control-next kid-control" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
+        <span class="kid-arrow-next">▶️</span>
         <span class="visually-hidden">Next</span>
     </button>
 </div>
 
-<!-- 波浪分隔符 -->
-<div class="wavy-divider"></div>
+<!-- 童趣波浪分隔符 -->
+<div class="kid-wavy-divider">
+    <svg viewBox="0 0 1440 120" xmlns="http://www.w3.org/2000/svg">
+        <path fill="#ffffff" d="M0,80L80,85.3C160,91,320,101,480,96C640,91,800,69,960,64C1120,59,1280,69,1360,74.7L1440,80L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z">
+            <animate attributeName="d" dur="10s" repeatCount="indefinite" 
+                values="M0,80L80,85.3C160,91,320,101,480,96C640,91,800,69,960,64C1120,59,1280,69,1360,74.7L1440,80L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z;
+                        M0,96L80,90.7C160,85,320,75,480,80C640,85,800,107,960,112C1120,117,1280,107,1360,101.3L1440,96L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z;
+                        M0,80L80,85.3C160,91,320,101,480,96C640,91,800,69,960,64C1120,59,1280,69,1360,74.7L1440,80L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z"/>
+        </path>
+    </svg>
+</div>
 
-<!-- 2. 特色功能 -->
-<section class="page-section bg-light-kid">
+<!-- 2. 核心功能展示 - 超丰富版 -->
+<section class="page-section bg-kid-wonderland">
     <div class="container">
-        <div class="section-title">
-            <h2>为什么选择我们？</h2>
-            <p>创新技术 × 教育理念 = 完美的学习体验</p>
+        <div class="section-title-kid">
+            <h2 class="title-with-stars">✨ 我们的神奇功能 ✨</h2>
+            <p class="subtitle-rainbow">🎯 专为3-6岁小朋友精心设计的语言学习体验</p>
+            <div class="title-decoration">
+                <span class="deco-star">⭐</span>
+                <span class="deco-heart">💖</span>
+                <span class="deco-star">⭐</span>
             </div>
+        </div>
+
+        <!-- 数据统计展示 -->
+        <div class="stats-showcase mb-5">
             <div class="row g-4">
-            <div class="col-md-6 col-lg-3">
-                <div class="kid-feature-card">
-                    <div class="icon-bubble" style="background-color: #e3f2fd;"><i class="fas fa-microphone-alt text-primary"></i></div>
-                    <h5>语音克隆技术</h5>
-                    <p>克隆孩子的声音，听到"自己"说话，激发学习兴趣。</p>
+                <div class="col-md-3 col-6">
+                    <div class="stat-card stat-users">
+                        <div class="stat-icon">👶</div>
+                        <div class="stat-number" data-count="1000">0</div>
+                        <div class="stat-label">快乐小用户</div>
                     </div>
                 </div>
-             <div class="col-md-6 col-lg-3">
-                <div class="kid-feature-card">
-                    <div class="icon-bubble" style="background-color: #e0f7fa;"><i class="fas fa-robot" style="color:#00BCD4;"></i></div>
-                    <h5>智能对话系统</h5>
-                    <p>AI老师提供个性化、有趣的对话学习体验。</p>
+                <div class="col-md-3 col-6">
+                    <div class="stat-card stat-conversations">
+                        <div class="stat-icon">💬</div>
+                        <div class="stat-number" data-count="5000">0</div>
+                        <div class="stat-label">有趣对话</div>
                     </div>
                 </div>
-            <div class="col-md-6 col-lg-3">
-                <div class="kid-feature-card">
-                    <div class="icon-bubble" style="background-color: #fffde7;"><i class="fas fa-chart-line" style="color:#FFC107;"></i></div>
-                    <h5>科学评估体系</h5>
-                    <p>基于官方指南的四维度评估，科学跟踪进展。</p>
+                <div class="col-md-3 col-6">
+                    <div class="stat-card stat-improvement">
+                        <div class="stat-icon">📈</div>
+                        <div class="stat-number" data-count="95">0</div>
+                        <div class="stat-label">%进步率</div>
                     </div>
                 </div>
-            <div class="col-md-6 col-lg-3">
-                <div class="kid-feature-card">
-                    <div class="icon-bubble" style="background-color: #fbe9e7;"><i class="fas fa-gamepad" style="color:#FF5722;"></i></div>
-                    <h5>场景化学习</h5>
-                    <p>丰富的生活场景，在真实对话中提升语言能力。</p>
+                <div class="col-md-3 col-6">
+                    <div class="stat-card stat-satisfaction">
+                        <div class="stat-icon">😊</div>
+                        <div class="stat-number" data-count="98">0</div>
+                        <div class="stat-label">%满意度</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 功能卡片 -->
+        <div class="row g-4 mb-5">
+            <div class="col-lg-6">
+                <div class="feature-card-advanced voice-clone-card">
+                    <div class="feature-header">
+                        <div class="feature-icon-big">🎤</div>
+                        <h4>🪄 神奇语音克隆</h4>
+                    </div>
+                    <div class="feature-body">
+                        <div class="feature-demo">
+                            <div class="voice-wave-demo">
+                                <div class="wave-bar"></div>
+                                <div class="wave-bar"></div>
+                                <div class="wave-bar"></div>
+                                <div class="wave-bar"></div>
+                                <div class="wave-bar"></div>
+                            </div>
+                            <p class="demo-text">只需3分钟录音，AI就能学会你的声音！</p>
+                        </div>
+                        <div class="feature-benefits">
+                            <div class="benefit-item">
+                                <span class="benefit-icon">🎯</span>
+                                <span>激发学习兴趣</span>
+                            </div>
+                            <div class="benefit-item">
+                                <span class="benefit-icon">🌟</span>
+                                <span>提升自信心</span>
+                            </div>
+                            <div class="benefit-item">
+                                <span class="benefit-icon">🎉</span>
+                                <span>个性化体验</span>
+                            </div>
+                        </div>
+                        <button class="btn btn-feature-try" onclick="location.href='{{ url_for('voice_clone.index') if current_user.is_authenticated else url_for('auth.login') }}'">
+                            <span class="btn-icon">🚀</span>
+                            立即体验
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-6">
+                <div class="feature-card-advanced ai-chat-card">
+                    <div class="feature-header">
+                        <div class="feature-icon-big">🤖</div>
+                        <h4>🧠 智能AI老师</h4>
+                    </div>
+                    <div class="feature-body">
+                        <div class="chat-demo">
+                            <div class="chat-bubble ai-bubble">
+                                <span class="typing-indicator">
+                                    <span></span>
+                                    <span></span>
+                                    <span></span>
+                                </span>
+                                你好小朋友！今天想聊什么呢？
+                            </div>
+                            <div class="chat-bubble user-bubble">
+                                我想和小兔子做朋友！
+                            </div>
+                        </div>
+                        <div class="ai-features">
+                            <div class="ai-feature">📚 个性化教学</div>
+                            <div class="ai-feature">🎯 实时评估</div>
+                            <div class="ai-feature">🌈 情感理解</div>
+                        </div>
+                        <button class="btn btn-feature-try" onclick="location.href='{{ url_for('main.dashboard') if current_user.is_authenticated else url_for('auth.login') }}'">
+                            <span class="btn-icon">💬</span>
+                            开始对话
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 学习步骤 -->
+        <div class="learning-steps">
+            <h3 class="steps-title">🌟 学习就这么简单！</h3>
+            <div class="steps-container">
+                <div class="step-item">
+                    <div class="step-number">1</div>
+                    <div class="step-icon">🎤</div>
+                    <div class="step-title">录制声音</div>
+                    <div class="step-desc">录制3分钟声音样本</div>
+                </div>
+                <div class="step-arrow">→</div>
+                <div class="step-item">
+                    <div class="step-number">2</div>
+                    <div class="step-icon">🎭</div>
+                    <div class="step-title">选择场景</div>
+                    <div class="step-desc">挑选喜欢的对话场景</div>
+                </div>
+                <div class="step-arrow">→</div>
+                <div class="step-item">
+                    <div class="step-number">3</div>
+                    <div class="step-icon">💬</div>
+                    <div class="step-title">快乐对话</div>
+                    <div class="step-desc">和AI老师愉快聊天</div>
+                </div>
+                <div class="step-arrow">→</div>
+                <div class="step-item">
+                    <div class="step-number">4</div>
+                    <div class="step-icon">📈</div>
+                    <div class="step-title">查看进步</div>
+                    <div class="step-desc">获得专业评估反馈</div>
                 </div>
             </div>
         </div>
     </div>
 </section>
 
-<!-- 3. 学习场景展示 -->
-<section class="page-section">
+<!-- 3. 学习场景世界 - 超丰富版 -->
+<section class="page-section bg-kid-playground">
     <div class="container">
-        <div class="section-title">
-            <h2>丰富的学习场景</h2>
-            <p>在游戏中学习，在对话中成长</p>
-        </div>
-        <div class="row g-4">
-            <div class="col-md-4">
-                <div class="scenario-card-new">
-                     <div class="scenario-icon"><i class="fas fa-handshake"></i></div>
-                     <h5>社交互动</h5>
-                     <p>学习如何交朋友、邀请游戏，培养社交语言技能。</p>
-                     <div class="tags"><span class="tag">交朋友</span><span class="tag">团队合作</span></div>
+        <div class="section-title-kid">
+            <h2 class="title-with-emojis">🌍 奇妙的学习世界 🌍</h2>
+            <p class="subtitle-fun">🎪 12+精彩场景，让每次对话都是一场冒险！</p>
+            <div class="title-decoration">
+                <span class="deco-balloon">🎈</span>
+                <span class="deco-gift">🎁</span>
+                <span class="deco-balloon">🎈</span>
             </div>
         </div>
-            <div class="col-md-4">
-                <div class="scenario-card-new">
-                    <div class="scenario-icon" style="background-color: #e8f5e9; color: #4CAF50;"><i class="fas fa-utensils"></i></div>
-                    <h5>日常生活</h5>
-                    <p>模拟餐厅点餐、超市购物等真实生活情景。</p>
-                    <div class="tags"><span class="tag">点餐</span><span class="tag">购物</span></div>
+
+        <!-- 场景分类导航 -->
+        <div class="scenario-nav">
+            <button class="scenario-nav-btn active" data-category="all">
+                <span class="nav-icon">🌟</span>全部场景
+            </button>
+            <button class="scenario-nav-btn" data-category="social">
+                <span class="nav-icon">👫</span>社交互动
+            </button>
+            <button class="scenario-nav-btn" data-category="daily">
+                <span class="nav-icon">🏠</span>日常生活
+            </button>
+            <button class="scenario-nav-btn" data-category="fun">
+                <span class="nav-icon">🎪</span>游戏娱乐
+            </button>
+        </div>
+
+        <!-- 场景卡片网格 -->
+        <div class="scenarios-grid">
+            <!-- 社交互动场景 -->
+            <div class="scenario-card-new" data-category="social">
+                <div class="scenario-thumbnail">
+                    <div class="scenario-bg social-bg"></div>
+                    <div class="scenario-emoji">🤝</div>
+                    <div class="scenario-difficulty">😊 简单</div>
+                </div>
+                <div class="scenario-content">
+                    <h5>👫 和小明交朋友</h5>
+                    <p>学习自我介绍，练习礼貌用语，培养社交技能</p>
+                    <div class="scenario-stats">
+                        <span class="stat">⏱️ 10-15分钟</span>
+                        <span class="stat">🎯 5-8个问题</span>
+                    </div>
+                    <div class="scenario-tags">
+                        <span class="tag">自我介绍</span>
+                        <span class="tag">礼貌用语</span>
+                    </div>
+                    <div class="scenario-preview">
+                        <button class="btn-preview" onclick="showPreview('friend')">
+                            <i class="fas fa-play"></i> 预览对话
+                        </button>
+                        <button class="btn-start">
+                            <i class="fas fa-rocket"></i> 开始体验
+                        </button>
                     </div>
                 </div>
-            <div class="col-md-4">
-                <div class="scenario-card-new">
-                     <div class="scenario-icon" style="background-color: #fff3e0; color: #FB8C00;"><i class="fas fa-puzzle-piece"></i></div>
-                    <h5>游戏娱乐</h5>
-                    <p>在角色扮演和趣味问答中，快乐地组织语言。</p>
-                    <div class="tags"><span class="tag">益智游戏</span><span class="tag">角色扮演</span></div>
+            </div>
+
+            <div class="scenario-card-new" data-category="social">
+                <div class="scenario-thumbnail">
+                    <div class="scenario-bg social-bg"></div>
+                    <div class="scenario-emoji">🎉</div>
+                    <div class="scenario-difficulty">😎 中等</div>
+                </div>
+                <div class="scenario-content">
+                    <h5>🎂 生日派对邀请</h5>
+                    <p>学习邀请朋友参加聚会，表达邀请和感谢</p>
+                    <div class="scenario-stats">
+                        <span class="stat">⏱️ 12-18分钟</span>
+                        <span class="stat">🎯 6-10个问题</span>
+                    </div>
+                    <div class="scenario-tags">
+                        <span class="tag">邀请表达</span>
+                        <span class="tag">聚会礼仪</span>
+                    </div>
+                    <div class="scenario-preview">
+                        <button class="btn-preview" onclick="showPreview('party')">
+                            <i class="fas fa-play"></i> 预览对话
+                        </button>
+                        <button class="btn-start">
+                            <i class="fas fa-rocket"></i> 开始体验
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 日常生活场景 -->
+            <div class="scenario-card-new" data-category="daily">
+                <div class="scenario-thumbnail">
+                    <div class="scenario-bg daily-bg"></div>
+                    <div class="scenario-emoji">🍕</div>
+                    <div class="scenario-difficulty">😊 简单</div>
+                </div>
+                <div class="scenario-content">
+                    <h5>🏪 餐厅点餐小达人</h5>
+                    <p>模拟真实点餐场景，学习食物名称和点餐礼仪</p>
+                    <div class="scenario-stats">
+                        <span class="stat">⏱️ 8-12分钟</span>
+                        <span class="stat">🎯 4-6个问题</span>
+                    </div>
+                    <div class="scenario-tags">
+                        <span class="tag">食物词汇</span>
+                        <span class="tag">服务礼仪</span>
+                    </div>
+                    <div class="scenario-preview">
+                        <button class="btn-preview" onclick="showPreview('restaurant')">
+                            <i class="fas fa-play"></i> 预览对话
+                        </button>
+                        <button class="btn-start">
+                            <i class="fas fa-rocket"></i> 开始体验
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="scenario-card-new" data-category="daily">
+                <div class="scenario-thumbnail">
+                    <div class="scenario-bg daily-bg"></div>
+                    <div class="scenario-emoji">🛒</div>
+                    <div class="scenario-difficulty">😎 中等</div>
+                </div>
+                <div class="scenario-content">
+                    <h5>🛍️ 超市购物助手</h5>
+                    <p>体验购物流程，学习商品分类和数量表达</p>
+                    <div class="scenario-stats">
+                        <span class="stat">⏱️ 15-20分钟</span>
+                        <span class="stat">🎯 8-12个问题</span>
+                    </div>
+                    <div class="scenario-tags">
+                        <span class="tag">商品名称</span>
+                        <span class="tag">数量计算</span>
+                    </div>
+                    <div class="scenario-preview">
+                        <button class="btn-preview" onclick="showPreview('shopping')">
+                            <i class="fas fa-play"></i> 预览对话
+                        </button>
+                        <button class="btn-start">
+                            <i class="fas fa-rocket"></i> 开始体验
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 游戏娱乐场景 -->
+            <div class="scenario-card-new" data-category="fun">
+                <div class="scenario-thumbnail">
+                    <div class="scenario-bg fun-bg"></div>
+                    <div class="scenario-emoji">🧩</div>
+                    <div class="scenario-difficulty">🤩 有趣</div>
+                </div>
+                <div class="scenario-content">
+                    <h5>🎭 小小演员训练营</h5>
+                    <p>角色扮演游戏，发挥想象力，练习情感表达</p>
+                    <div class="scenario-stats">
+                        <span class="stat">⏱️ 20-25分钟</span>
+                        <span class="stat">🎯 10-15个问题</span>
+                    </div>
+                    <div class="scenario-tags">
+                        <span class="tag">角色扮演</span>
+                        <span class="tag">创意表达</span>
+                    </div>
+                    <div class="scenario-preview">
+                        <button class="btn-preview" onclick="showPreview('actor')">
+                            <i class="fas fa-play"></i> 预览对话
+                        </button>
+                        <button class="btn-start">
+                            <i class="fas fa-rocket"></i> 开始体验
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="scenario-card-new" data-category="fun">
+                <div class="scenario-thumbnail">
+                    <div class="scenario-bg fun-bg"></div>
+                    <div class="scenario-emoji">🎨</div>
+                    <div class="scenario-difficulty">🤩 有趣</div>
+                </div>
+                <div class="scenario-content">
+                    <h5>🌈 创意故事大王</h5>
+                    <p>编织奇妙故事，锻炼逻辑思维和语言组织能力</p>
+                    <div class="scenario-stats">
+                        <span class="stat">⏱️ 25-30分钟</span>
+                        <span class="stat">🎯 12-18个问题</span>
+                    </div>
+                    <div class="scenario-tags">
+                        <span class="tag">故事创作</span>
+                        <span class="tag">逻辑思维</span>
+                    </div>
+                    <div class="scenario-preview">
+                        <button class="btn-preview" onclick="showPreview('story')">
+                            <i class="fas fa-play"></i> 预览对话
+                        </button>
+                        <button class="btn-start">
+                            <i class="fas fa-rocket"></i> 开始体验
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 场景预览弹窗 -->
+        <div id="scenarioPreview" class="scenario-preview-modal">
+            <div class="preview-content">
+                <div class="preview-header">
+                    <h4 id="previewTitle">对话预览</h4>
+                    <button class="preview-close" onclick="closePreview()">&times;</button>
+                </div>
+                <div class="preview-body">
+                    <div id="previewChat" class="preview-chat">
+                        <!-- 动态加载对话内容 -->
+                    </div>
+                </div>
+                <div class="preview-footer">
+                    <button class="btn btn-preview-close" onclick="closePreview()">关闭预览</button>
+                    <button class="btn btn-preview-start">立即开始体验</button>
                 </div>
             </div>
         </div>
     </div>
 </section>
 
-<!-- 4. 行动号召 -->
-<section class="page-section cta-section-kid">
-    <div class="container text-center">
-        <h2>准备好开始奇妙的语言之旅了吗？</h2>
-        <p class="mb-4">立即加入我们，让孩子在快乐中成长，在对话中发现语言的魅力！</p>
+<!-- 4. 超级行动号召区 -->
+<section class="page-section cta-section-mega">
+    <div class="container">
+        <!-- 背景装饰 -->
+        <div class="cta-mega-decorations">
+            <div class="cta-floating floating-1">🚀</div>
+            <div class="cta-floating floating-2">⭐</div>
+            <div class="cta-floating floating-3">🌈</div>
+            <div class="cta-floating floating-4">🎈</div>
+            <div class="cta-floating floating-5">✨</div>
+            <div class="cta-floating floating-6">🎉</div>
+        </div>
+
+        <div class="row align-items-center">
+            <div class="col-lg-6">
+                <div class="cta-content">
+                    <h2 class="cta-mega-title">
+                        🌟 开启孩子的<br>
+                        <span class="highlight-text">语言天赋之旅</span>
+                    </h2>
+                    <p class="cta-mega-subtitle">
+                        🎯 专业教育团队 × AI黑科技 × 童趣设计<br>
+                        让每个孩子都能自信表达，快乐成长！
+                    </p>
+
+                    <!-- 优势列表 -->
+                    <div class="cta-benefits">
+                        <div class="benefit-row">
+                            <div class="benefit-icon">🆓</div>
+                            <div class="benefit-text">
+                                <strong>完全免费体验</strong>
+                                <small>无需付费，立即开始学习</small>
+                            </div>
+                        </div>
+                        <div class="benefit-row">
+                            <div class="benefit-icon">🎯</div>
+                            <div class="benefit-text">
+                                <strong>个性化AI老师</strong>
+                                <small>根据孩子特点调整教学方式</small>
+                            </div>
+                        </div>
+                        <div class="benefit-row">
+                            <div class="benefit-icon">📱</div>
+                            <div class="benefit-text">
+                                <strong>随时随地学习</strong>
+                                <small>手机、平板、电脑都能用</small>
+                            </div>
+                        </div>
+                        <div class="benefit-row">
+                            <div class="benefit-icon">🏆</div>
+                            <div class="benefit-text">
+                                <strong>专业教育认证</strong>
+                                <small>基于《3-6岁儿童发展指南》</small>
+                            </div>
+                        </div>
+                    </div>
+
                     {% if not current_user.is_authenticated %}
-            <a href="{{ url_for('auth.register') }}" class="btn btn-lg btn-kid-accent shadow-lg">
-                <i class="fas fa-rocket me-2"></i>立即开始免费体验
+                        <div class="cta-actions">
+                            <a href="{{ url_for('auth.register') }}" class="btn btn-cta-mega">
+                                <span class="btn-icon">🚀</span>
+                                <span class="btn-text">立即免费注册</span>
+                                <span class="btn-shine"></span>
                             </a>
+                            <div class="cta-promise">
+                                <small>💝 承诺：30秒注册，3分钟体验，无任何费用</small>
+                            </div>
+                        </div>
+                    {% else %}
+                        <div class="cta-actions">
+                            <a href="{{ url_for('main.dashboard') }}" class="btn btn-cta-mega">
+                                <span class="btn-icon">🏃‍♂️</span>
+                                <span class="btn-text">进入学习中心</span>
+                                <span class="btn-shine"></span>
+                            </a>
+                        </div>
                     {% endif %}
                 </div>
+            </div>
+            <div class="col-lg-6">
+                <div class="cta-visual">
+                    <!-- 3D风格的设备展示 -->
+                    <div class="device-showcase">
+                        <div class="device phone">
+                            <div class="device-screen">
+                                <div class="app-interface">
+                                    <div class="app-header">🎤 语音学习</div>
+                                    <div class="app-content">
+                                        <div class="chat-message ai">
+                                            <span class="avatar">🤖</span>
+                                            <span class="text">小朋友，我们来聊天吧！</span>
+                                        </div>
+                                        <div class="chat-message user">
+                                            <span class="text">好的！我想学说话</span>
+                                            <span class="avatar">😊</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="device tablet">
+                            <div class="device-screen">
+                                <div class="progress-interface">
+                                    <div class="progress-title">📈 学习进度</div>
+                                    <div class="progress-stats">
+                                        <div class="stat-circle">
+                                            <span class="number">85%</span>
+                                            <span class="label">完成度</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 用户评价气泡 -->
+                    <div class="testimonial-bubbles">
+                        <div class="testimonial-bubble bubble-1">
+                            <div class="bubble-content">
+                                <div class="user-info">
+                                    <span class="avatar">👶</span>
+                                    <span class="name">小明妈妈</span>
+                                </div>
+                                <p>"孩子现在特别爱说话，每天都要和AI老师聊天！"</p>
+                            </div>
+                        </div>
+                        <div class="testimonial-bubble bubble-2">
+                            <div class="bubble-content">
+                                <div class="user-info">
+                                    <span class="avatar">👧</span>
+                                    <span class="name">小红</span>
+                                </div>
+                                <p>"听到自己的声音给我讲故事，太神奇了！"</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </section>
 {% endblock %}