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

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

CCB74DBDB8FF-D11F734A31E94D98BACA34E76D60F54E

src/app/hello/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Sparkles, ArrowLeft } from "lucide-react";
+import Link from "next/link";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export default function HelloPage() {
+  return (
+    <div className="mx-auto flex max-w-3xl flex-col items-center justify-center px-4 py-24 sm:px-6 lg:px-8">
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.4 }}
+        className="text-center"
+      >
+        <motion.div
+          initial={{ rotate: -10, scale: 0 }}
+          animate={{ rotate: 0, scale: 1 }}
+          transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
+        >
+          <Sparkles className="mx-auto h-16 w-16 text-primary" />
+        </motion.div>
+
+        <motion.h1
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.4, duration: 0.5 }}
+          className="mt-6 text-4xl font-bold tracking-tight sm:text-5xl"
+        >
+          Hello, Idea Guru!
+        </motion.h1>
+
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.6, duration: 0.5 }}
+          className="mt-4 text-lg text-muted-foreground"
+        >
+          You&apos;ve successfully navigated to the hello page. This is where your
+          journey begins.
+        </motion.p>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.8, duration: 0.5 }}
+          className="mt-8"
+        >
+          <Link
+            href="/"
+            className={cn(
+              buttonVariants({ variant: "outline", size: "lg" })
+            )}
+          >
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to Home
+          </Link>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useRouter } from "next/navigation";
 import { motion } from "framer-motion";
 import {
   Layers,
@@ -7,7 +8,8 @@ import {
   Database,
   FileCode,
   Zap,
-  ArrowRight
+  ArrowRight,
+  BookOpen
 } from 'lucide-react';
 import { Button } from "@/components/ui/button";
 import {
@@ -50,6 +52,14 @@ const features = [
   },
 ];
 
+// 学习页面入口
+const studyEntry = {
+  icon: BookOpen,
+  title: '学习中心',
+  description: '查看课程进度，继续学习建造工程师课程',
+  href: '/study'
+};
+
 const containerVariants = {
   hidden : { opacity: 0 },
   visible: {
@@ -66,6 +76,8 @@ const itemVariants = {
 };
 
 export default function Home() {
+  const router = useRouter();
+
   return (
     <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
       {/* Hero */}
@@ -82,7 +94,7 @@ export default function Home() {
           A Next.js starter template with a curated tech stack
         </p>
         <div className="mt-8 flex items-center justify-center gap-4">
-          <Button size="lg">
+          <Button size="lg" onClick={() => router.push("/hello")}>
             Get Started
             <ArrowRight className="ml-2 h-4 w-4" />
           </Button>
@@ -92,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>
+  );
+}

src/components/layout/header.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { Sparkles } from "lucide-react";
 import { buttonVariants } from "@/components/ui/button";
@@ -7,6 +8,8 @@ import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 export function Header() {
+    const router = useRouter();
+
     return (
         <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
             <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
@@ -21,7 +24,9 @@ export function Header() {
                     >
                         Home
                     </Link>
-                    <Button size='sm'>Get Started</Button>
+                    <Button size="sm" onClick={() => router.push("/hello")}>
+                        Get Started
+                    </Button>
                 </nav>
             </div>
         </header>