feat: add the layout of `for students`

app/components/TopNav.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import Link from 'next/link'
+import { useTheme } from './ThemeProvider'
+
+export function TopNav() {
+  const { theme, toggleTheme } = useTheme()
+
+  return (
+      <header className="fixed w-full bg-background-secondary/80 backdrop-blur-sm border-b border-border z-50">
+        <div className="container mx-auto px-4 py-4 flex items-center">
+          <Link href="/" className="text-3xl font-bold">
+            <span className="text-[#FF6B6B]">P</span>
+            <span className="text-[#4ECDC4]">l</span>
+            <span className="text-[#45B7D1]">a</span>
+            <span className="text-[#FDCB6E]">y</span>
+            <span className="text-[#FF6B6B]">G</span>
+            <span className="text-[#4ECDC4]">o</span>
+            <span className="ml-2 text-[#45B7D1]">A</span>
+            <span className="text-[#FDCB6E]">I</span>
+          </Link>
+          <nav className="flex items-center justify-center flex-1 space-x-8">
+            <Link href="/for-teachers" className="text-text-secondary hover:text-primary">
+              我是老師
+            </Link>
+            <Link href="/for-students" className="text-text-secondary hover:text-primary">
+              我是學生
+            </Link>
+          </nav>
+          <button
+            onClick={toggleTheme}
+            className="px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90"
+          >
+            {theme === 'light' ? '🌙' : '☀️'}
+          </button>
+        </div>
+      </header>
+  )
+} 

app/for-students/components/ChatBotCard.tsx

@@ -0,0 +1,36 @@
+interface ChatBotCardProps {
+  chatbot: {
+    id: string
+    title: string
+    description: string
+    subject: string
+    icon: string
+    author?: string
+  }
+}
+
+export default function ChatBotCard({ chatbot }: ChatBotCardProps) {
+  return (
+    <div className="group relative overflow-hidden rounded-2xl border border-border/50 bg-background-primary/50 p-6 shadow-sm transition-all hover:shadow-md backdrop-blur-sm">
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <span className="text-3xl">{chatbot.icon}</span>
+          <h3 className="text-xl font-semibold text-text-primary">{chatbot.title}</h3>
+        </div>
+        <span className="rounded-full bg-background-secondary/50 px-3 py-1 text-sm text-text-secondary">
+          {chatbot.subject}
+        </span>
+      </div>
+
+      <p className="mb-4 text-text-secondary">{chatbot.description}</p>
+      
+      {chatbot.author && (
+        <p className="text-sm text-text-secondary">作者：{chatbot.author}</p>
+      )}
+
+      <button className="mt-4 w-full rounded-xl bg-primary px-4 py-2 text-white transition-colors hover:bg-primary/90">
+        開始對話
+      </button>
+    </div>
+  )
+}

app/for-students/components/ChatBotGrid.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { useState } from 'react'
+import ChatBotCard from './ChatBotCard'
+
+interface ChatBot {
+  id: string
+  title: string
+  description: string
+  subject: string
+  icon: string
+  author?: string
+}
+
+const SAMPLE_CHATBOTS: ChatBot[] = [
+  {
+    id: '1',
+    title: 'Code Tutor',
+    description: "Let's code together! I'm Khanmigo Lite, by Khan Academy.",
+    subject: '程式設計',
+    icon: '👨‍💻',
+    author: 'khanacademy.org'
+  },
+  {
+    id: '2',
+    title: 'Whimsical Diagrams',
+    description: 'Explains and visualizes concepts with flowcharts, mindmaps and sequence diagrams.',
+    subject: '視覺化',
+    icon: '📊',
+    author: 'whimsical.com'
+  },
+  {
+    id: '3',
+    title: 'Resume',
+    description: 'By combining the expertise of top resume writers with advanced AI, we assist in diagnosing and improving resumes.',
+    subject: '求職',
+    icon: '📝',
+    author: 'jobright.ai'
+  },
+  {
+    id: '4',
+    title: 'Universal Primer',
+    description: 'The fastest way to learn anything hard.',
+    subject: '學習',
+    icon: '📚',
+    author: 'Siqi Chen'
+  }
+]
+
+export default function ChatBotGrid() {
+  const [chatbots] = useState<ChatBot[]>(SAMPLE_CHATBOTS)
+
+  return (
+    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-2">
+      {chatbots.map((chatbot) => (
+        <ChatBotCard key={chatbot.id} chatbot={chatbot} />
+      ))}
+    </div>
+  )
+} 

app/for-students/components/ChatBotGridSkeleton.tsx

@@ -0,0 +1,25 @@
+export default function ChatBotGridSkeleton() {
+  return (
+    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      {[...Array(6)].map((_, index) => (
+        <div
+          key={index}
+          className="animate-pulse rounded-lg border border-gray-200 bg-white p-6 shadow-sm"
+        >
+          <div className="mb-4 flex items-center justify-between">
+            <div className="h-8 w-8 rounded-full bg-gray-200" />
+            <div className="h-6 w-24 rounded-full bg-gray-200" />
+          </div>
+
+          <div className="mb-2 h-6 w-3/4 rounded bg-gray-200" />
+          <div className="mb-4 space-y-2">
+            <div className="h-4 w-full rounded bg-gray-200" />
+            <div className="h-4 w-5/6 rounded bg-gray-200" />
+          </div>
+
+          <div className="h-10 w-full rounded-lg bg-gray-200" />
+        </div>
+      ))}
+    </div>
+  )
+}

app/for-students/components/SearchBar.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+export default function SearchBar() {
+  return (
+    <div className="relative max-w-full mx-auto">
+      <input
+        type="text"
+        placeholder="搜尋 GPT..."
+        className="w-full rounded-2xl border border-border/50 bg-background-primary/50 px-4 py-6 pl-12 pr-36
+                 backdrop-blur-sm shadow-lg focus:outline-none focus:ring-2 focus:ring-primary/50 
+                 text-lg transition-all duration-200 placeholder:text-text-secondary/50"
+      />
+      <svg
+        className="absolute left-4 top-1/2 h-6 w-6 -translate-y-1/2 text-text-secondary/50"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        />
+      </svg>
+    </div>
+  )
+}

app/for-students/components/SubjectFilter.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+export default function SubjectFilter() {
+  const subjects = ['熱門精選', '寫作', '生產力', '研究與分析', '教育', '日常生活', '程式設計']
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {subjects.map((subject) => (
+        <button
+          key={subject}
+          className="rounded-full border border-border/50 px-6 py-2 text-base transition-colors 
+                   hover:bg-background-secondary/50 focus:outline-none focus:ring-2 focus:ring-primary/50"
+        >
+          {subject}
+        </button>
+      ))}
+    </div>
+  )
+} 

app/for-students/page.tsx

@@ -0,0 +1,36 @@
+import { Suspense } from 'react'
+import ChatBotGrid from './components/ChatBotGrid'
+import SubjectFilter from './components/SubjectFilter'
+import SearchBar from './components/SearchBar'
+import ChatBotGridSkeleton from './components/ChatBotGridSkeleton'
+
+export default function ForStudentsPage() {
+  return (
+    <main className="min-h-screen bg-background-primary">
+      {/* Hero Section */}
+      <section className="mb-12 pt-16 text-center">
+        <h1 className="mb-4 text-5xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+          GPT
+        </h1>
+        <p className="mx-auto max-w-2xl text-lg text-text-secondary">
+          探索並建立結合指令、額外知識庫和任何技能組合的 ChatGPT 自訂版本。
+        </p>
+      </section>
+
+      {/* Search and Filter Section */}
+      <div className="container mx-auto px-4">
+        <div className="mb-8">
+          <SearchBar />
+        </div>
+        <div className="mb-12">
+          <SubjectFilter />
+        </div>
+
+        {/* Chatbots Grid */}
+        <Suspense fallback={<ChatBotGridSkeleton />}>
+          <ChatBotGrid />
+        </Suspense>
+      </div>
+    </main>
+  )
+} 

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
 import { ThemeProvider } from './components/ThemeProvider'
+import { TopNav } from './components/TopNav'
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -23,7 +24,10 @@ export default function RootLayout({
     <html lang="en" className={`${geistSans.variable}`}>
       <body className="antialiased">
         <ThemeProvider>
-          {children}
+          <TopNav />
+          <main className="pt-14">
+            {children}
+          </main>
         </ThemeProvider>
       </body>
     </html>

app/page.tsx

@@ -1,44 +1,11 @@
 'use client'
 
 import Link from "next/link"
-import { useTheme } from './components/ThemeProvider'
 import ChatBot from './components/LandingPageChatBot'
 
 export default function LandingPage() {
-  const { theme, toggleTheme } = useTheme()
-
   return (
     <div className="min-h-screen bg-background-primary">
-      {/* Modern Header */}
-      <header className="fixed w-full bg-background-secondary/80 backdrop-blur-sm border-b border-border z-50">
-        <div className="container mx-auto px-4 py-4 flex items-center">
-          <Link href="/" className="text-3xl font-bold">
-            <span className="text-[#FF6B6B]">P</span>
-            <span className="text-[#4ECDC4]">l</span>
-            <span className="text-[#45B7D1]">a</span>
-            <span className="text-[#FDCB6E]">y</span>
-            <span className="text-[#FF6B6B]">G</span>
-            <span className="text-[#4ECDC4]">o</span>
-            <span className="ml-2 text-[#45B7D1]">A</span>
-            <span className="text-[#FDCB6E]">I</span>
-          </Link>
-          <nav className="flex items-center justify-center flex-1 space-x-8">
-            <Link href="/for-teachers" className="text-text-secondary hover:text-primary">
-              我是老師
-            </Link>
-            <Link href="/for-students" className="text-text-secondary hover:text-primary">
-              我是學生
-            </Link>
-          </nav>
-          <button
-            onClick={toggleTheme}
-            className="px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90"
-          >
-            {theme === 'light' ? '🌙' : '☀️'}
-          </button>
-        </div>
-      </header>
-
       <main className="pt-4">
         {/* Hero Section */}
         <div className="">