完成了！我在首页添加了一个醒目的学习入口卡片，位于 Hero 区域下方。卡片特点：

- **蓝色渐变背景** - 使用 sky 色调的渐变，突出显示
- **BookOpen 图标** - 白色圆形...

CCB74DBDB8FF-D11F734A31E94D98BACA34E76D60F54E

src/app/page.tsx

@@ -8,9 +8,10 @@ import {
   Database,
   FileCode,
   Zap,
-  ArrowRight
+  ArrowRight,
+  BookOpen
 } from 'lucide-react';
-import  {Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
 import {
   Card,
   CardHeader,
@@ -51,6 +52,14 @@ const features = [
   },
 ];
 
+// 学习页面入口
+const studyEntry = {
+  icon: BookOpen,
+  title: '学习中心',
+  description: '查看课程进度，继续学习建造工程师课程',
+  href: '/study'
+};
+
 const containerVariants = {
   hidden : { opacity: 0 },
   visible: {
@@ -95,6 +104,30 @@ export default function Home() {
         </div>
       </motion.section>
 
+      {/* 学习入口 */}
+      <motion.section
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, delay: 0.2 }}
+        className="mb-12"
+      >
+        <Card
+          className="cursor-pointer border-sky-200 bg-gradient-to-r from-sky-50 to-blue-50 transition-all hover:shadow-md hover:scale-[1.01]"
+          onClick={() => router.push(studyEntry.href)}
+        >
+          <CardHeader className="flex flex-row items-center gap-4">
+            <div className="flex size-12 shrink-0 items-center justify-center rounded-full bg-sky-500 text-white">
+              <studyEntry.icon className="h-6 w-6" />
+            </div>
+            <div className="flex-1">
+              <CardTitle className="text-lg text-sky-900">{studyEntry.title}</CardTitle>
+              <CardDescription className="text-sky-700">{studyEntry.description}</CardDescription>
+            </div>
+            <ArrowRight className="h-5 w-5 text-sky-500" />
+          </CardHeader>
+        </Card>
+      </motion.section>
+
       {/* Features */}
       <motion.section
         variants={containerVariants}