完成了！我在首页添加了一个醒目的学习入口卡片，位于 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}

src/app/study/page.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { X, ChevronDown, Home, Grid3X3, Gift, BookOpen, User } from "lucide-react";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+
+// 课程数据
+const courses = [
+  {
+    id: 1,
+    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
+    progress: 17,
+  },
+  {
+    id: 2,
+    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
+    progress: 17,
+  },
+  {
+    id: 3,
+    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
+    progress: 17,
+  },
+  {
+    id: 4,
+    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
+    progress: 45,
+  },
+  {
+    id: 5,
+    title: "2021年二级建造师《建筑工程管理与实务》精讲课",
+    progress: 82,
+  },
+];
+
+// 底部导航项
+const navItems = [
+  { icon: Home, label: "首页", href: "/" },
+  { icon: Grid3X3, label: "分类", href: "/category" },
+  { icon: Gift, label: "活动", href: "/activity" },
+  { icon: BookOpen, label: "学习", href: "/study", active: true },
+  { icon: User, label: "我的", href: "/profile" },
+];
+
+export default function StudyPage() {
+  return (
+    <div className="flex min-h-screen flex-col bg-gray-100">
+      {/* 顶部导航 */}
+      <header className="sticky top-0 z-10 bg-white px-4 py-3">
+        <div className="flex items-center justify-between">
+          <Button variant="ghost" size="icon" className="size-8 -ml-2 text-gray-600">
+            <X className="size-5" />
+          </Button>
+          <h1 className="text-lg font-medium text-gray-900">学习</h1>
+          <div className="size-8" />
+        </div>
+      </header>
+
+      {/* 筛选区域 */}
+      <div className="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
+        <button className="flex items-center gap-1 text-sm text-gray-700">
+          <span>一级建造师</span>
+          <ChevronDown className="size-4" />
+        </button>
+        <Link
+          href="/study/track"
+          className="text-sm text-sky-500 hover:text-sky-600"
+        >
+          学习轨迹
+        </Link>
+      </div>
+
+      {/* 课程列表 */}
+      <main className="flex-1 space-y-3 overflow-auto p-3 pb-20">
+        {courses.map((course) => (
+          <Card
+            key={course.id}
+            className="border-0 shadow-sm"
+          >
+            <CardContent className="p-4 space-y-4">
+              {/* 课程标题 */}
+              <h3 className="text-base font-medium leading-relaxed text-gray-900">
+                {course.title}
+              </h3>
+
+              {/* 进度条 */}
+              <div className="space-y-2">
+                <div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-200">
+                  <div
+                    className="h-full rounded-full bg-sky-500 transition-all"
+                    style={{ width: `${course.progress}%` }}
+                  />
+                </div>
+                <div className="text-right text-xs text-sky-500">
+                  学习进度{course.progress}%
+                </div>
+              </div>
+
+              {/* 前往学习按钮 */}
+              <Link
+                href={`/study/course/${course.id}`}
+                className={cn(
+                  buttonVariants({ variant: "default" }),
+                  "w-full bg-sky-500 text-white hover:bg-sky-600 h-10 rounded-md"
+                )}
+              >
+                前往学习
+              </Link>
+            </CardContent>
+          </Card>
+        ))}
+      </main>
+
+      {/* 底部导航 */}
+      <nav className="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white px-2 pb-safe">
+        <div className="mx-auto flex max-w-md justify-around py-2">
+          {navItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                "flex flex-col items-center gap-1 px-3 py-1",
+                item.active ? "text-sky-500" : "text-gray-500"
+              )}
+            >
+              <item.icon className="size-5" />
+              <span className="text-xs">{item.label}</span>
+            </Link>
+          ))}
+        </div>
+      </nav>
+    </div>
+  );
+}