<!-- 第一部分：英雄区域 - 最重要的第一印象 -->
<section style="text-align: center; padding: 80px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
    <h1>从零开始，解锁你的编程超能力</h1>
    <p>这里是你系统学习编程的起点。我们提供清晰易懂的教程、实用的项目案例和活跃的社区交流，助你踏上代码之旅。</p>
    <div>
        <a href="/learning-path" style="background-color: #FF6B6B; color: white; padding: 12px 30px; text-decoration: none; border-radius: 5px; margin: 10px; display: inline-block;">开始学习之路</a>
        <a href="/blog" style="background-color: transparent; color: white; padding: 12px 30px; text-decoration: none; border: 2px solid white; border-radius: 5px; margin: 10px; display: inline-block;">浏览最新文章</a>
    </div>
</section>

<!-- 第二部分：学习路径/特色分类 -->
<section style="padding: 60px 20px; text-align: center;">
    <h2>选择你的学习路径</h2>
    <p>不知道从何学起？跟随我们精心设计的路径，一步步成为开发高手。</p>
    <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 40px;">
        <div style="flex: 1; min-width: 250px; max-width: 300px; border: 1px solid #eee; padding: 30px; border-radius: 8px;">
            <h3>前端开发</h3>
            <p>从HTML、CSS到JavaScript框架，学习构建美观交互的网页应用。</p>
            <a href="/category/front-end">探索路径 →</a>
        </div>
        <div style="flex: 1; min-width: 250px; max-width: 300px; border: 1px solid #eee; padding: 30px; border-radius: 8px;">
            <h3>Python与数据分析</h3>
            <p>掌握Python语言，并将其应用于数据分析、人工智能和自动化脚本。</p>
            <a href="/category/python">探索路径 →</a>
        </div>
        <div style="flex: 1; min-width: 250px; max-width: 300px; border: 1px solid #eee; padding: 30px; border-radius: 8px;">
            <h3>Java与后端开发</h3>
            <p>深入理解面向对象编程，构建稳定、高效的后端服务与系统。</p>
            <a href="/category/backend">探索路径 →</a>
        </div>
    </div>
</section>

<!-- 第三部分：最新文章展示 -->
<section style="padding: 60px 20px; background-color: #f8f9fa;">
    <div style="max-width: 1200px; margin: 0 auto;">
        <h2 style="text-align: center;">最新技术文章与教程</h2>
        <p style="text-align: center;">持续更新高质量的原创内容，紧跟技术潮流。</p>
        <!-- 这里将来可以用“最新文章”小工具或区块自动调用 -->
        <div style="text-align: center; margin-top: 20px;">
            <a href="/blog" style="color: #667eea;">查看全部文章 →</a>
        </div>
    </div>
</section>

<!-- 第四部分：行动号召 -->
<section style="padding: 80px 20px; text-align: center;">
    <h2>准备好开始你的编程之旅了吗？</h2>
    <p>立即免费注册，加入学习社区，获取最新教程并提交你的代码练习。</p>
    <a href="/register" style="background-color: #28a745; color: white; padding: 15px 40px; text-decoration: none; border-radius: 5px; font-size: 1.1em;">免费加入我们</a>
</section>