YoTzh/codesprout-academy-tech-tree-programming
0
1<!DOCTYPE html>2<html lang="zh-CN">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>科技树少儿编程 | 一站式编程学习平台</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script>12 tailwind.config = {13 theme: {14 extend: {15 colors: {16 primary: '#4F46E5',17 secondary: '#10B981',18 accent: '#F59E0B'19 }20 }21 }22 }23 </script>24</head>25<body class="font-sans antialiased bg-gray-50">26 <custom-navbar></custom-navbar>27 28 <!-- Hero Section -->29 <section class="relative bg-gradient-to-r from-primary-600 to-primary-800 text-white py-20">30 <div class="container mx-auto px-6 text-center">31 <h1 class="text-4xl md:text-6xl font-bold mb-6">培养未来的创造者</h1>32 <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">科技树少儿编程 - 为3-18岁孩子提供专业编程教育</p>33 <div class="flex flex-col sm:flex-row justify-center gap-4">34 <a href="/courses" class="bg-white text-primary-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-semibold text-lg transition duration-300">查看课程</a>35 <a href="/trial" class="bg-secondary-500 hover:bg-secondary-600 px-8 py-3 rounded-lg font-semibold text-lg transition duration-300">免费试听</a>36 </div>37 </div>38 <div class="absolute bottom-0 left-0 right-0 h-16 bg-white transform skew-y-1 origin-bottom-left"></div>39 </section>40 41 <!-- Features Section -->42 <section class="py-16 bg-white">43 <div class="container mx-auto px-6">44 <h2 class="text-3xl font-bold text-center mb-12">为什么选择科技树？</h2>45 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">46 <div class="text-center p-6 rounded-lg hover:shadow-lg transition duration-300">47 <div class="bg-primary-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">48 <i data-feather="award" class="text-primary-600 w-10 h-10"></i>49 </div>50 <h3 class="text-xl font-semibold mb-2">6年教学经验</h3>51 <p class="text-gray-600">自2019年成立以来，我们已成功培养上千名编程小能手</p>52 </div>53 <div class="text-center p-6 rounded-lg hover:shadow-lg transition duration-300">54 <div class="bg-secondary-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">55 <i data-feather="layers" class="text-secondary-600 w-10 h-10"></i>56 </div>57 <h3 class="text-xl font-semibold mb-2">完整课程体系</h3>58 <p class="text-gray-600">从Scratch启蒙到C++竞赛，覆盖3-18岁全年龄段</p>59 </div>60 <div class="text-center p-6 rounded-lg hover:shadow-lg transition duration-300">61 <div class="bg-accent-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4">62 <i data-feather="users" class="text-accent-600 w-10 h-10"></i>63 </div>64 <h3 class="text-xl font-semibold mb-2">专业师资团队</h3>65 <p class="text-gray-600">全部教师通过严格考核，持证上岗，定期培训</p>66 </div>67 </div>68 </div>69 </section>70 71 <!-- Course Categories -->72 <section class="py-16 bg-gray-50">73 <div class="container mx-auto px-6">74 <h2 class="text-3xl font-bold text-center mb-12">我们的课程体系</h2>75 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">76 <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">77 <img src="http://static.photos/technology/640x360/1" alt="幼儿编程启蒙" class="w-full h-48 object-cover">78 <div class="p-6">79 <h3 class="text-xl font-semibold mb-2">幼儿编程启蒙</h3>80 <p class="text-gray-600 mb-4">适合3-6岁，通过游戏化学习培养计算思维</p>81 <a href="#" class="text-primary-600 font-medium hover:text-primary-800 flex items-center">82 了解更多 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>83 </a>84 </div>85 </div>86 <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">87 <img src="http://static.photos/education/640x360/2" alt="Scratch创意编程" class="w-full h-48 object-cover">88 <div class="p-6">89 <h3 class="text-xl font-semibold mb-2">Scratch创意编程</h3>90 <p class="text-gray-600 mb-4">适合6-12岁，通过可视化编程培养逻辑思维</p>91 <a href="#" class="text-primary-600 font-medium hover:text-primary-800 flex items-center">92 了解更多 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>93 </a>94 </div>95 </div>96 <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">97 <img src="http://static.photos/gaming/640x360/3" alt="Python人工智能" class="w-full h-48 object-cover">98 <div class="p-6">99 <h3 class="text-xl font-semibold mb-2">Python人工智能</h3>100 <p class="text-gray-600 mb-4">适合10-15岁，学习主流编程语言和AI基础</p>101 <a href="#" class="text-primary-600 font-medium hover:text-primary-800 flex items-center">102 了解更多 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>103 </a>104 </div>105 </div>106 <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300">107 <img src="http://static.photos/science/640x360/4" alt="C++算法竞赛" class="w-full h-48 object-cover">108 <div class="p-6">109 <h3 class="text-xl font-semibold mb-2">C++算法竞赛</h3>110 <p class="text-gray-600 mb-4">适合14-18岁，培养编程竞赛选手</p>111 <a href="#" class="text-primary-600 font-medium hover:text-primary-800 flex items-center">112 了解更多 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>113 </a>114 </div>115 </div>116 </div>117 <div class="text-center mt-10">118 <a href="/courses" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-primary-600 hover:bg-primary-700 md:py-4 md:text-lg md:px-10 transition duration-300">119 查看全部课程120 </a>121 </div>122 </div>123 </section>124 125 <!-- Testimonials -->126 <section class="py-16 bg-white">127 <div class="container mx-auto px-6">128 <h2 class="text-3xl font-bold text-center mb-12">学员和家长的反馈</h2>129 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">130 <div class="bg-gray-50 p-8 rounded-lg">131 <div class="flex items-center mb-4">132 <img src="http://static.photos/people/200x200/1" alt="张同学" class="w-12 h-12 rounded-full object-cover">133 <div class="ml-4">134 <h4 class="font-semibold">张同学</h4>135 <p class="text-gray-500 text-sm">Python学员</p>136 </div>137 </div>138 <p class="text-gray-600">"在科技树学习Python让我对编程产生了浓厚兴趣，现在已经能自己制作小游戏了！"</p>139 </div>140 <div class="bg-gray-50 p-8 rounded-lg">141 <div class="flex items-center mb-4">142 <img src="http://static.photos/people/200x200/2" alt="李妈妈" class="w-12 h-12 rounded-full object-cover">143 <div class="ml-4">144 <h4 class="font-semibold">李妈妈</h4>145 <p class="text-gray-500 text-sm">Scratch学员家长</p>146 </div>147 </div>148 <p class="text-gray-600">"孩子每周都盼着上编程课，看到他能够专注地解决问题，作为家长非常欣慰。"</p>149 </div>150 <div class="bg-gray-50 p-8 rounded-lg">151 <div class="flex items-center mb-4">152 <img src="http://static.photos/people/200x200/3" alt="王同学" class="w-12 h-12 rounded-full object-cover">153 <div class="ml-4">154 <h4 class="font-semibold">王同学</h4>155 <p class="text-gray-500 text-sm">C++竞赛班学员</p>156 </div>157 </div>158 <p class="text-gray-600">"感谢科技树的老师，让我在全省青少年编程大赛中获得了金奖！"</p>159 </div>160 </div>161 </div>162 </section>163 164 <!-- CTA Section -->165 <section class="py-16 bg-primary-600 text-white">166 <div class="container mx-auto px-6 text-center">167 <h2 class="text-3xl font-bold mb-6">让您的孩子领先一步</h2>168 <p class="text-xl mb-8 max-w-2xl mx-auto">现在预约免费试听课程，感受科技树的教学魅力</p>169 <a href="/trial" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-lg text-primary-600 bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10 transition duration-300">170 立即预约171 </a>172 </div>173 </section>174 175 <custom-footer></custom-footer>176 177 <script src="components/navbar.js"></script>178 <script src="components/footer.js"></script>179 <script src="script.js"></script>180 <script>feather.replace();</script>181<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>182</body>183</html>