feat: optimize for-students and for-teachers page

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": ["next/core-web-vitals", "next/typescript", "prettier"]
 }

.gitignore

@@ -50,4 +50,5 @@ venv/
 node_modules
 
 # local files
-/local_files
+/local_files
+/prompts

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc

@@ -0,0 +1 @@
+{}

app/(audiences)/components/chat-bot-card.tsx

@@ -0,0 +1,58 @@
+import { Card, CardContent } from "@/components/ui/card";
+import Image from "next/image";
+import { MessageSquareShare } from "lucide-react";
+import { ChatBot } from "@/app/(audiences)/for-students/data/chatbots";
+
+interface ChatBotCardProps {
+  chatbot: ChatBot;
+}
+
+export default function ChatBotCard({ chatbot }: ChatBotCardProps) {
+  const baseIconName = chatbot.icon.split(".")[0];
+
+  return (
+    <Card className="group relative overflow-hidden bg-background-primary/50 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 backdrop-blur-sm border-2 border-border/40 hover:border-primary/20 duration-300 aspect-square">
+      <CardContent className="p-8 h-full flex flex-col">
+        {/* Avatar with WebP and PNG fallback */}
+        <div className="flex-shrink-0 mb-6">
+          <picture>
+            <source
+              srcSet={`/chatbots/${baseIconName}.webp`}
+              type="image/webp"
+            />
+            <Image
+              src={`/chatbots/${baseIconName}.png`}
+              alt={chatbot.title}
+              width={64}
+              height={64}
+              className="relative rounded-lg transform group-hover:scale-105 transition duration-300"
+            />
+          </picture>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 flex flex-col">
+          <h3 className="text-xl font-bold text-text-primary truncate bg-gradient-to-r from-[#FF6B6B] via-[#4ECDC4] to-[#45B7D1] bg-clip-text text-transparent group-hover:tracking-wide transition-all duration-300 mb-3">
+            {chatbot.title}
+          </h3>
+
+          <p className="text-base text-text-secondary line-clamp-3 mb-6 flex-1 leading-relaxed">
+            {chatbot.description}
+          </p>
+
+          <button
+            className="flex-shrink-0 inline-flex items-center justify-center rounded-full bg-primary w-12 h-12 text-white transition-all duration-300 hover:scale-110 active:scale-95 hover:bg-primary/90 ml-auto"
+            aria-label="開始對話"
+          >
+            <MessageSquareShare className="w-6 h-6 group-hover:animate-pulse" />
+          </button>
+        </div>
+      </CardContent>
+
+      {/* Decorative corner accent */}
+      <div className="absolute top-0 right-0 w-20 h-20 overflow-hidden">
+        <div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-bl from-primary/10 via-primary/5 to-transparent transform rotate-45 translate-x-10 -translate-y-10 group-hover:translate-x-8 group-hover:-translate-y-8 transition-transform duration-300" />
+      </div>
+    </Card>
+  );
+}

components/custom/ChatBotGridSkeleton.tsx → app/(audiences)/components/chat-bot-grid-skeleton.tsx

@@ -21,5 +21,5 @@ export default function ChatBotGridSkeleton() {
         </div>
       ))}
     </div>
-  )
-}
+  );
+}

app/(audiences)/components/chat-bot-grid.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import ChatBotCard from "./chat-bot-card";
+import { ChatBot } from "@/app/(audiences)/for-students/data/chatbots";
+
+interface SectionProps {
+  title: string;
+  subtitle: string;
+  bots: ChatBot[];
+  columns?: number;
+}
+
+function Section({ title, subtitle, bots, columns = 4 }: SectionProps) {
+  if (bots.length === 0) return null;
+
+  return (
+    <div className="mb-16">
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold text-text-primary mb-2">{title}</h2>
+        <p className="text-text-secondary">{subtitle}</p>
+      </div>
+      <div className={`grid gap-4 sm:grid-cols-2 lg:grid-cols-${columns}`}>
+        {bots.map((chatbot) => (
+          <ChatBotCard key={chatbot.id} chatbot={chatbot} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface ChatBotGridProps {
+  selectedCategories: string[];
+  selectedSubjects: string[];
+  searchQuery: string;
+  getPopularBots: () => ChatBot[];
+  getTrendingBots: () => ChatBot[];
+  getAllBots: () => ChatBot[];
+}
+
+export default function ChatBotGrid({
+  selectedCategories,
+  selectedSubjects,
+  searchQuery,
+  getPopularBots,
+  getTrendingBots,
+  getAllBots,
+}: ChatBotGridProps) {
+  // Initialize state with the passed-in functions
+  const [filteredPopularBots, setFilteredPopularBots] = useState<ChatBot[]>(
+    () => getPopularBots(),
+  );
+  const [filteredTrendingBots, setFilteredTrendingBots] = useState<ChatBot[]>(
+    () => getTrendingBots(),
+  );
+  const [filteredAllBots, setFilteredAllBots] = useState<ChatBot[]>(() =>
+    getAllBots(),
+  );
+
+  useEffect(() => {
+    const filterBots = (bots: ChatBot[]) => {
+      let filtered = bots;
+
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        filtered = filtered.filter(
+          (bot) =>
+            bot.title.toLowerCase().includes(query) ||
+            bot.description.toLowerCase().includes(query) ||
+            bot.subject.toLowerCase().includes(query) ||
+            bot.category.toLowerCase().includes(query),
+        );
+      }
+
+      if (selectedCategories.length > 0) {
+        filtered = filtered.filter(
+          (bot) => bot.category && selectedCategories.includes(bot.category),
+        );
+      }
+
+      if (selectedSubjects.length > 0) {
+        filtered = filtered.filter((bot) =>
+          selectedSubjects.includes(bot.subject),
+        );
+      }
+
+      return filtered;
+    };
+
+    setFilteredPopularBots(filterBots(getPopularBots()));
+    setFilteredTrendingBots(filterBots(getTrendingBots()));
+    setFilteredAllBots(filterBots(getAllBots()));
+  }, [
+    selectedCategories,
+    selectedSubjects,
+    searchQuery,
+    getPopularBots,
+    getTrendingBots,
+    getAllBots,
+  ]);
+
+  const hasFiltersOrSearch =
+    selectedCategories.length > 0 || selectedSubjects.length > 0 || searchQuery;
+
+  if (hasFiltersOrSearch) {
+    return (
+      <Section
+        title="搜尋結果"
+        subtitle={`符合 ${searchQuery ? '"' + searchQuery + '" ' : ""}的工具`}
+        bots={filteredAllBots}
+        columns={4}
+      />
+    );
+  }
+
+  const tutorBots = filteredAllBots.filter((bot) => bot.category === "教育");
+  const teachingBots = filteredAllBots.filter((bot) => bot.subject === "教學");
+  const assessmentBots = filteredAllBots.filter(
+    (bot) => bot.subject === "評量",
+  );
+
+  return (
+    <div className="space-y-8">
+      <Section
+        title="精選"
+        subtitle="歷來最多人使用的工具"
+        bots={filteredPopularBots}
+        columns={4}
+      />
+      <Section
+        title="熱門"
+        subtitle="近期最多人使用的工具"
+        bots={filteredTrendingBots}
+        columns={4}
+      />
+      <Section
+        title="教學輔助"
+        subtitle="教學規劃與課程設計工具"
+        bots={teachingBots}
+        columns={4}
+      />
+      <Section
+        title="評量工具"
+        subtitle="作業與評量相關工具"
+        bots={assessmentBots}
+        columns={4}
+      />
+      <Section
+        title="教育資源"
+        subtitle="其他教育相關工具"
+        bots={tutorBots}
+        columns={4}
+      />
+    </div>
+  );
+}

components/custom/SearchBar.tsx → app/(audiences)/components/search-bar.tsx

@@ -1,13 +1,18 @@
-'use client'
+"use client";
 
-export default function SearchBar() {
+interface SearchBarProps {
+  onSearch: (query: string) => void;
+}
+
+export default function SearchBar({ onSearch }: SearchBarProps) {
   return (
     <div className="relative max-w-full mx-auto">
       <input
         type="text"
-        placeholder="搜尋 GPT..."
+        placeholder="搜尋 PlayGO AI..."
+        onChange={(e) => onSearch(e.target.value)}
         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 
+                 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
@@ -24,5 +29,5 @@ export default function SearchBar() {
         />
       </svg>
     </div>
-  )
-}
+  );
+}

app/(audiences)/components/subject-faceted-filter.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import * as React from "react";
+import { Check, PlusCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+
+interface DataTableFacetedFilterProps {
+  title: string;
+  options: {
+    label: string;
+    value: string;
+  }[];
+  selectedValues: string[];
+  onSelectionChange: (values: string[]) => void;
+}
+
+export function DataTableFacetedFilter({
+  title,
+  options,
+  selectedValues,
+  onSelectionChange,
+}: DataTableFacetedFilterProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="lg"
+          className="h-16 text-lg border-2 hover:bg-accent/50 min-w-[160px]"
+        >
+          <PlusCircle className="mr-3 h-6 w-6" />
+          {title}
+          {selectedValues?.length > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-4 h-8" />
+              <Badge
+                variant="secondary"
+                className="rounded-md px-3 py-1.5 text-base font-normal lg:hidden"
+              >
+                {selectedValues.length}
+              </Badge>
+              <div className="hidden space-x-2 lg:flex">
+                {selectedValues.length > 2 ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-md px-3 py-1.5 text-base font-normal"
+                  >
+                    已選擇 {selectedValues.length} 項
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.includes(option.value))
+                    .map((option) => (
+                      <Badge
+                        variant="secondary"
+                        key={option.value}
+                        className="rounded-md px-3 py-1.5 text-base font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[320px] p-0" align="start">
+        <Command>
+          <CommandInput
+            placeholder={`搜尋${title}...`}
+            className="h-14 text-lg"
+          />
+          <CommandList>
+            <CommandEmpty>找不到結果</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.includes(option.value);
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      if (isSelected) {
+                        onSelectionChange(
+                          selectedValues.filter(
+                            (value) => value !== option.value,
+                          ),
+                        );
+                      } else {
+                        onSelectionChange([...selectedValues, option.value]);
+                      }
+                    }}
+                    className="p-4 text-lg"
+                  >
+                    <div
+                      className={cn(
+                        "mr-4 flex h-6 w-6 items-center justify-center rounded-sm border-2 border-primary",
+                        isSelected
+                          ? "bg-primary text-primary-foreground"
+                          : "opacity-50 [&_svg]:invisible",
+                      )}
+                    >
+                      <Check className="h-5 w-5" />
+                    </div>
+                    <span>{option.label}</span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {selectedValues.length > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => onSelectionChange([])}
+                    className="justify-center p-4 text-lg"
+                  >
+                    清除篩選
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

app/(audiences)/components/subject-filter-view-options.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { Table } from "@tanstack/react-table";
+import { Settings2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+
+interface DataTableViewOptionsProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTableViewOptions<TData>({
+  table,
+}: DataTableViewOptionsProps<TData>) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="ml-auto hidden h-8 lg:flex"
+        >
+          <Settings2 />
+          View
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[150px]">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {table
+          .getAllColumns()
+          .filter(
+            (column) =>
+              typeof column.accessorFn !== "undefined" && column.getCanHide(),
+          )
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                className="capitalize"
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {column.id}
+              </DropdownMenuCheckboxItem>
+            );
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

app/(audiences)/components/subject-filter.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import * as React from "react";
+import { categories, subjects } from "@/app/(audiences)/for-students/data/data";
+import { DataTableFacetedFilter } from "@/app/(audiences)/components/subject-faceted-filter";
+import { Button } from "@/components/ui/button";
+import { X } from "lucide-react";
+
+interface SubjectFilterProps {
+  selectedCategories: string[];
+  setSelectedCategories: (categories: string[]) => void;
+  selectedSubjects: string[];
+  setSelectedSubjects: (subjects: string[]) => void;
+}
+
+export function SubjectFilter({
+  selectedCategories,
+  setSelectedCategories,
+  selectedSubjects,
+  setSelectedSubjects,
+}: SubjectFilterProps) {
+  const isFiltered =
+    selectedCategories.length > 0 || selectedSubjects.length > 0;
+
+  const handleReset = () => {
+    setSelectedCategories([]);
+    setSelectedSubjects([]);
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex flex-1 items-center space-x-6">
+        <DataTableFacetedFilter
+          title="科目"
+          options={subjects}
+          selectedValues={selectedSubjects}
+          onSelectionChange={setSelectedSubjects}
+        />
+        <DataTableFacetedFilter
+          title="類別"
+          options={categories}
+          selectedValues={selectedCategories}
+          onSelectionChange={setSelectedCategories}
+        />
+        {isFiltered && (
+          <Button
+            variant="ghost"
+            size="lg"
+            onClick={handleReset}
+            className="h-16 px-6 text-lg"
+          >
+            重設
+            <X className="ml-3 h-6 w-6" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

app/(audiences)/for-students/data/chatbots.ts

@@ -0,0 +1,142 @@
+export interface ChatBot {
+  id: string;
+  title: string;
+  description: string;
+  subject: string;
+  icon: string;
+  category: string;
+  popular?: boolean;
+  trending?: boolean;
+}
+
+export const CHATBOTS: ChatBot[] = [
+  // 精選 (最多人用)
+  {
+    id: "1",
+    title: "Code Tutor",
+    description: "Let's code together! I'm Khanmigo Lite, by Khan Academy.",
+    subject: "電腦科學",
+    category: "教育",
+    icon: "code-tutor.webp",
+    popular: true,
+  },
+  {
+    id: "2",
+    title: "Math Solver",
+    description: "數學解題助手，從基礎數學到高等微積分都能協助理解和解題。",
+    subject: "數學",
+    category: "教育",
+    icon: "code-tutor.webp",
+    popular: true,
+  },
+  {
+    id: "3",
+    title: "Essay Writer",
+    description: "協助改進寫作技巧，提供建議和修改意見，適用於各種文體。",
+    subject: "國語文",
+    category: "寫作",
+    icon: "code-tutor.webp",
+    popular: true,
+  },
+  {
+    id: "4",
+    title: "English Master",
+    description: "全方位英語學習助手，提供聽說讀寫全面訓練。",
+    subject: "英文",
+    category: "語言",
+    icon: "code-tutor.webp",
+    popular: true,
+  },
+
+  // 熱門 (近期熱門)
+  {
+    id: "5",
+    title: "Math Practice",
+    description: "針對各年級數學題目練習，提供詳細解答和步驟說明。",
+    subject: "數學",
+    category: "教育",
+    icon: "code-tutor.webp",
+    trending: true,
+  },
+  {
+    id: "6",
+    title: "English Conversation",
+    description: "實用英語對話練習，提升口語和聽力能力。",
+    subject: "英文",
+    category: "語言",
+    icon: "code-tutor.webp",
+    trending: true,
+  },
+  {
+    id: "7",
+    title: "Physics Tutor",
+    description: "物理概念解說和題目解析，讓物理學習更輕鬆。",
+    subject: "自然科學",
+    category: "教育",
+    icon: "code-tutor.webp",
+    trending: true,
+  },
+  {
+    id: "8",
+    title: "Chemistry Lab",
+    description: "虛擬化學實驗室，安全地探索化學反應和概念。",
+    subject: "自然科學",
+    category: "教育",
+    icon: "code-tutor.webp",
+    trending: true,
+  },
+
+  // 家教、數學、英文相關
+  {
+    id: "9",
+    title: "Personal Tutor",
+    description: "個人化學習規劃和指導，適應每個學生的學習步調。",
+    subject: "教學",
+    category: "教育",
+    icon: "code-tutor.webp",
+  },
+  {
+    id: "10",
+    title: "Math Concepts",
+    description: "深入淺出講解數學概念，建立紮實的數學基礎。",
+    subject: "數學",
+    category: "教育",
+    icon: "code-tutor.webp",
+  },
+  {
+    id: "11",
+    title: "English Grammar",
+    description: "系統性學習英語文法，從基礎到進階全面掌握。",
+    subject: "英文",
+    category: "語言",
+    icon: "code-tutor.webp",
+  },
+  {
+    id: "12",
+    title: "English Writing",
+    description: "英文寫作指導，從句子到文章的全方位訓練。",
+    subject: "英文",
+    category: "語言",
+    icon: "code-tutor.webp",
+  },
+  {
+    id: "13",
+    title: "Math Problems",
+    description: "豐富的數學題庫，配合詳細解說和練習。",
+    subject: "數學",
+    category: "教育",
+    icon: "code-tutor.webp",
+  },
+  {
+    id: "14",
+    title: "TOEIC Prep",
+    description: "針對多益考試的專業培訓和模擬測驗。",
+    subject: "英文",
+    category: "語言",
+    icon: "code-tutor.webp",
+  },
+];
+
+export const getPopularBots = () => CHATBOTS.filter((bot) => bot.popular);
+export const getTrendingBots = () => CHATBOTS.filter((bot) => bot.trending);
+export const getAllBots = () => CHATBOTS;

app/(audiences)/for-students/data/data.tsx

@@ -0,0 +1,49 @@
+export const categories = [
+  {
+    value: "熱門精選",
+    label: "熱門精選",
+  },
+  {
+    value: "寫作",
+    label: "寫作",
+  },
+  {
+    value: "生產力",
+    label: "生產力",
+  },
+  {
+    value: "研究與分析",
+    label: "研究與分析",
+  },
+  {
+    value: "教育",
+    label: "教育",
+  },
+];
+
+export const subjects = [
+  {
+    value: "國語文",
+    label: "國語文",
+  },
+  {
+    value: "英文",
+    label: "英文",
+  },
+  {
+    value: "數學",
+    label: "數學",
+  },
+  {
+    value: "自然科學",
+    label: "自然科學",
+  },
+  {
+    value: "社會科學",
+    label: "社會科學",
+  },
+  {
+    value: "電腦科學",
+    label: "電腦科學",
+  },
+];

app/{for-students → (audiences)/for-students}/page.tsx

@@ -1,36 +1,62 @@
-import { Suspense } from 'react'
-import ChatBotGrid from '@/components/custom/ChatBotGrid'
-import SubjectFilter from '@/components/custom/SubjectFilter'
-import SearchBar from '@/components/custom/SearchBar'
-import ChatBotGridSkeleton from '@/components/custom/ChatBotGridSkeleton'
+"use client";
+
+import * as React from "react";
+import { Suspense } from "react";
+import ChatBotGrid from "@/app/(audiences)/components/chat-bot-grid";
+import { SubjectFilter } from "@/app/(audiences)/components/subject-filter";
+import SearchBar from "@/app/(audiences)/components/search-bar";
+import ChatBotGridSkeleton from "@/app/(audiences)/components/chat-bot-grid-skeleton";
+import { getPopularBots, getTrendingBots, getAllBots } from "./data/chatbots";
 
 export default function ForStudentsPage() {
+  const [selectedCategories, setSelectedCategories] = React.useState<string[]>(
+    [],
+  );
+  const [selectedSubjects, setSelectedSubjects] = React.useState<string[]>([]);
+  const [searchQuery, setSearchQuery] = React.useState<string>("");
+
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+  };
+
   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
+          PlayGO for Students
         </h1>
         <p className="mx-auto max-w-2xl text-lg text-text-secondary">
-          探索並建立結合指令、額外知識庫和任何技能組合的 ChatGPT 自訂版本。
+          探索適合學習的 AI 聊天機器人，提升學習效率！
         </p>
       </section>
 
       {/* Search and Filter Section */}
       <div className="container mx-auto px-4">
         <div className="mb-8">
-          <SearchBar />
+          <SearchBar onSearch={handleSearch} />
         </div>
         <div className="mb-12">
-          <SubjectFilter />
+          <SubjectFilter
+            selectedCategories={selectedCategories}
+            setSelectedCategories={setSelectedCategories}
+            selectedSubjects={selectedSubjects}
+            setSelectedSubjects={setSelectedSubjects}
+          />
         </div>
 
         {/* Chatbots Grid */}
         <Suspense fallback={<ChatBotGridSkeleton />}>
-          <ChatBotGrid />
+          <ChatBotGrid
+            selectedCategories={selectedCategories}
+            selectedSubjects={selectedSubjects}
+            searchQuery={searchQuery}
+            getPopularBots={getPopularBots}
+            getTrendingBots={getTrendingBots}
+            getAllBots={getAllBots}
+          />
         </Suspense>
       </div>
     </main>
-  )
-}
+  );
+}

app/(audiences)/for-teachers/data/chatbots.ts

@@ -0,0 +1,66 @@
+import { ChatBot } from "@/app/(audiences)/for-students/data/chatbots";
+
+export const CHATBOTS: ChatBot[] = [
+  // 精選 (最多人用)
+  {
+    id: "1",
+    title: "Lesson Planner",
+    description: "智能課程規劃助手，協助教師設計有效的教學計劃。",
+    subject: "教學",
+    category: "教育",
+    icon: "lesson-planner.webp",
+    popular: true,
+  },
+  {
+    id: "2",
+    title: "Assignment Creator",
+    description: "自動生成作業和測驗，節省備課時間。",
+    subject: "教學",
+    category: "教育",
+    icon: "assignment-creator.webp",
+    popular: true,
+  },
+  {
+    id: "3",
+    title: "Grading Assistant",
+    description: "智能評分助手，提供客觀的評分建議和回饋。",
+    subject: "評量",
+    category: "教育",
+    icon: "grading-assistant.webp",
+    popular: true,
+  },
+  {
+    id: "4",
+    title: "Student Analytics",
+    description: "學生學習數據分析，掌握學習成效。",
+    subject: "分析",
+    category: "研究與分析",
+    icon: "student-analytics.webp",
+    popular: true,
+  },
+
+  // 熱門 (近期熱門)
+  {
+    id: "5",
+    title: "Content Creator",
+    description: "教材內容生成助手，快速製作教學素材。",
+    subject: "教學",
+    category: "生產力",
+    icon: "content-creator.webp",
+    trending: true,
+  },
+  {
+    id: "6",
+    title: "Classroom Manager",
+    description: "課堂管理助手，提升教學效率。",
+    subject: "管理",
+    category: "教育",
+    icon: "classroom-manager.webp",
+    trending: true,
+  },
+  // Add more teacher-specific chatbots...
+];
+
+export const getPopularBots = () => CHATBOTS.filter((bot) => bot.popular);
+export const getTrendingBots = () => CHATBOTS.filter((bot) => bot.trending);
+export const getAllBots = () => CHATBOTS;

app/(audiences)/for-teachers/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import * as React from "react";
+import { Suspense } from "react";
+import ChatBotGrid from "@/app/(audiences)/components/chat-bot-grid";
+import { SubjectFilter } from "@/app/(audiences)/components/subject-filter";
+import SearchBar from "@/app/(audiences)/components/search-bar";
+import ChatBotGridSkeleton from "@/app/(audiences)/components/chat-bot-grid-skeleton";
+import { getPopularBots, getTrendingBots, getAllBots } from "./data/chatbots";
+
+export default function ForTeachersPage() {
+  const [selectedCategories, setSelectedCategories] = React.useState<string[]>(
+    [],
+  );
+  const [selectedSubjects, setSelectedSubjects] = React.useState<string[]>([]);
+  const [searchQuery, setSearchQuery] = React.useState<string>("");
+
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+  };
+
+  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">
+          PlayGO for Teachers
+        </h1>
+        <p className="mx-auto max-w-2xl text-lg text-text-secondary">
+          探索適合教學的 AI 聊天機器人，提升教學效率！
+        </p>
+      </section>
+
+      {/* Search and Filter Section */}
+      <div className="container mx-auto px-4">
+        <div className="mb-8">
+          <SearchBar onSearch={handleSearch} />
+        </div>
+        <div className="mb-12">
+          <SubjectFilter
+            selectedCategories={selectedCategories}
+            setSelectedCategories={setSelectedCategories}
+            selectedSubjects={selectedSubjects}
+            setSelectedSubjects={setSelectedSubjects}
+          />
+        </div>
+
+        {/* Chatbots Grid */}
+        <Suspense fallback={<ChatBotGridSkeleton />}>
+          <ChatBotGrid
+            selectedCategories={selectedCategories}
+            selectedSubjects={selectedSubjects}
+            searchQuery={searchQuery}
+            getPopularBots={getPopularBots}
+            getTrendingBots={getTrendingBots}
+            getAllBots={getAllBots}
+          />
+        </Suspense>
+      </div>
+    </main>
+  );
+}

app/components/chatbot/chat-bot-card.tsx

@@ -0,0 +1,2 @@
+// Move the existing ChatBotCard component here with no changes needed
+// This is already well-structured as a reusable component

app/components/chatbot/chat-bot-grid.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import ChatBotCard from "@/app/(audiences)/components/chat-bot-card";
+import { ChatBot } from "@/types/chatbot";
+
+interface SectionProps {
+  title: string;
+  subtitle: string;
+  bots: ChatBot[];
+  columns?: number;
+}
+
+function Section({ title, subtitle, bots, columns = 4 }: SectionProps) {
+  if (bots.length === 0) return null;
+
+  return (
+    <div className="mb-16">
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold text-text-primary mb-2">{title}</h2>
+        <p className="text-text-secondary">{subtitle}</p>
+      </div>
+      <div className={`grid gap-4 sm:grid-cols-2 lg:grid-cols-${columns}`}>
+        {bots.map((chatbot) => (
+          <ChatBotCard key={chatbot.id} chatbot={chatbot} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface ChatBotGridProps {
+  selectedCategories: string[];
+  selectedSubjects: string[];
+  searchQuery: string;
+  getPopularBots: () => ChatBot[];
+  getTrendingBots: () => ChatBot[];
+  getAllBots: () => ChatBot[];
+}
+
+export default function ChatBotGrid({
+  selectedCategories,
+  selectedSubjects,
+  searchQuery,
+  getPopularBots,
+  getTrendingBots,
+  getAllBots,
+}: ChatBotGridProps) {
+  const [filteredPopularBots, setFilteredPopularBots] =
+    useState<ChatBot[]>(getPopularBots());
+  const [filteredTrendingBots, setFilteredTrendingBots] =
+    useState<ChatBot[]>(getTrendingBots());
+  const [filteredAllBots, setFilteredAllBots] =
+    useState<ChatBot[]>(getAllBots());
+
+  useEffect(() => {
+    const filterBots = (bots: ChatBot[]) => {
+      let filtered = bots;
+
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        filtered = filtered.filter(
+          (bot) =>
+            bot.title.toLowerCase().includes(query) ||
+            bot.description.toLowerCase().includes(query) ||
+            bot.subject.toLowerCase().includes(query) ||
+            bot.category.toLowerCase().includes(query),
+        );
+      }
+
+      if (selectedCategories.length > 0) {
+        filtered = filtered.filter(
+          (bot) => bot.category && selectedCategories.includes(bot.category),
+        );
+      }
+
+      if (selectedSubjects.length > 0) {
+        filtered = filtered.filter((bot) =>
+          selectedSubjects.includes(bot.subject),
+        );
+      }
+
+      return filtered;
+    };
+
+    setFilteredPopularBots(filterBots(getPopularBots()));
+    setFilteredTrendingBots(filterBots(getTrendingBots()));
+    setFilteredAllBots(filterBots(getAllBots()));
+  }, [
+    selectedCategories,
+    selectedSubjects,
+    searchQuery,
+    getPopularBots,
+    getTrendingBots,
+    getAllBots,
+  ]);
+
+  const hasFiltersOrSearch =
+    selectedCategories.length > 0 || selectedSubjects.length > 0 || searchQuery;
+
+  if (hasFiltersOrSearch) {
+    return (
+      <Section
+        title="搜尋結果"
+        subtitle={`符合 ${searchQuery ? '"' + searchQuery + '" ' : ""}的工具`}
+        bots={filteredAllBots}
+        columns={4}
+      />
+    );
+  }
+
+  const tutorBots = filteredAllBots.filter((bot) => bot.category === "教育");
+  const teachingBots = filteredAllBots.filter((bot) => bot.subject === "教學");
+  const assessmentBots = filteredAllBots.filter(
+    (bot) => bot.subject === "評量",
+  );
+
+  return (
+    <div className="space-y-8">
+      <Section
+        title="精選"
+        subtitle="歷來最多人使用的工具"
+        bots={filteredPopularBots}
+        columns={4}
+      />
+      <Section
+        title="熱門"
+        subtitle="近期最多人使用的工具"
+        bots={filteredTrendingBots}
+        columns={4}
+      />
+      <Section
+        title="教學輔助"
+        subtitle="教學規劃與課程設計工具"
+        bots={teachingBots}
+        columns={4}
+      />
+      <Section
+        title="評量工具"
+        subtitle="作業與評量相關工具"
+        bots={assessmentBots}
+        columns={4}
+      />
+      <Section
+        title="教育資源"
+        subtitle="其他教育相關工具"
+        bots={tutorBots}
+        columns={4}
+      />
+    </div>
+  );
+}

components/custom/LandingPageChatBot.tsx → app/components/landing-page-chat-bot.tsx

@@ -1,97 +1,111 @@
-'use client'
+"use client";
 
-import { useState, useRef, useEffect } from 'react'
-import { useChat } from 'ai/react'
+import { useState, useRef, useEffect } from "react";
+import { useChat } from "ai/react";
 import {
   AcademicCapIcon,
   ClockIcon,
   BookOpenIcon,
   LightBulbIcon,
   BriefcaseIcon,
-} from '@heroicons/react/24/outline'
+} from "@heroicons/react/24/outline";
 
 type MessageWithLoading = {
   content: string;
   role: string;
   isStreaming?: boolean;
-}
+};
 
 const EXAMPLE_PROMPTS = [
   {
     title: "教案規劃",
     prompt: "我想規劃一堂關於數學的課程",
-    icon: AcademicCapIcon
+    icon: AcademicCapIcon,
   },
   {
     title: "英語對話",
     prompt: "我想練習英語對話",
-    icon: ClockIcon
+    icon: ClockIcon,
   },
   {
     title: "作業批改",
     prompt: "我想批改學生的作文作業",
-    icon: BookOpenIcon
+    icon: BookOpenIcon,
   },
   {
     title: "數學解題",
     prompt: "我想解數學題目",
-    icon: LightBulbIcon
+    icon: LightBulbIcon,
   },
   {
     title: "我想學程式",
     prompt: "我想學習如何寫程式",
-    icon: BriefcaseIcon
-  }
-]
+    icon: BriefcaseIcon,
+  },
+];
 
 export default function LandingPageChatBot() {
-  const { messages: rawMessages, input, handleInputChange, handleSubmit, isLoading, append } = useChat({
-    api: '/api/landing_page_chat',
-    streamProtocol: 'data',
+  const {
+    messages: rawMessages,
+    input,
+    handleInputChange,
+    handleSubmit,
+    isLoading,
+    append,
+  } = useChat({
+    api: "/api/landing_page_chat",
+    streamProtocol: "data",
     onError: (error) => {
-      console.error('Chat error:', error);
+      console.error("Chat error:", error);
     },
     onFinish: (message) => {
-      console.log('Chat finished:', message);
-      setMessages(prev => prev.map(msg => ({...msg, isStreaming: false})))
+      console.log("Chat finished:", message);
+      setMessages((prev) =>
+        prev.map((msg) => ({ ...msg, isStreaming: false })),
+      );
     },
     keepLastMessageOnError: true,
-  })
+  });
 
-  const chatContainerRef = useRef<HTMLDivElement>(null)
-  const [hasInteracted, setHasInteracted] = useState(false)
-  const [messages, setMessages] = useState<MessageWithLoading[]>([])
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const [messages, setMessages] = useState<MessageWithLoading[]>([]);
 
   useEffect(() => {
-    setMessages(rawMessages.map((msg, index) => ({
-      ...msg,
-      isStreaming: isLoading && index === rawMessages.length - 1 && msg.role === 'assistant'
-    })))
-  }, [rawMessages, isLoading])
+    setMessages(
+      rawMessages.map((msg, index) => ({
+        ...msg,
+        isStreaming:
+          isLoading &&
+          index === rawMessages.length - 1 &&
+          msg.role === "assistant",
+      })),
+    );
+  }, [rawMessages, isLoading]);
 
   const scrollToBottom = () => {
     if (chatContainerRef.current) {
-      const { scrollHeight, clientHeight } = chatContainerRef.current
-      chatContainerRef.current.scrollTop = scrollHeight - clientHeight
+      const { scrollHeight, clientHeight } = chatContainerRef.current;
+      chatContainerRef.current.scrollTop = scrollHeight - clientHeight;
     }
-  }
+  };
 
   useEffect(() => {
-    scrollToBottom()
-  }, [messages])
+    scrollToBottom();
+  }, [messages]);
 
   const sendMessage = async (text: string) => {
-    setHasInteracted(true)
+    setHasInteracted(true);
     await append({
       content: text,
-      role: 'user',
-    })
-  }
+      role: "user",
+    });
+  };
 
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    setHasInteracted(true)
-    handleSubmit(e)
-  }
+    setHasInteracted(true);
+    handleSubmit(e);
+  };
 
   return (
     <section className="w-full h-[1000px] bg-gradient-to-b from-background-secondary to-background-primary flex items-center justify-center px-4">
@@ -132,12 +146,12 @@ export default function LandingPageChatBot() {
                     viewBox="0 0 24 24"
                     strokeWidth="1.5"
                     stroke="currentColor"
-                    className={`size-6 ${isLoading ? 'animate-pulse' : ''}`}
+                    className={`size-6 ${isLoading ? "animate-pulse" : ""}`}
                   >
                     <path
                       strokeLinecap="round"
                       strokeLinejoin="round"
-                      d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" 
+                      d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"
                     />
                   </svg>
                 </button>
@@ -168,7 +182,11 @@ export default function LandingPageChatBot() {
                         viewBox="0 0 24 24"
                         strokeWidth={2}
                       >
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M9 5l7 7-7 7"
+                        />
                       </svg>
                     </div>
                   </button>
@@ -179,7 +197,9 @@ export default function LandingPageChatBot() {
         ) : (
           <div className="bg-background-primary/50 backdrop-blur-sm rounded-2xl shadow-lg border border-border/50 overflow-hidden w-full h-[700px] flex flex-col">
             <div className="p-6 border-b border-border/50 bg-background-secondary/30">
-              <h2 className="text-xl font-semibold text-text-primary">PlayGO 導覽員</h2>
+              <h2 className="text-xl font-semibold text-text-primary">
+                PlayGO 導覽員
+              </h2>
             </div>
 
             <div
@@ -189,13 +209,13 @@ export default function LandingPageChatBot() {
               {messages.map((message, index) => (
                 <div
                   key={index}
-                  className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
+                  className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}
                 >
                   <div
                     className={`max-w-[80%] p-4 rounded-2xl shadow-sm ${
-                      message.role === 'user'
-                        ? 'bg-primary text-white rounded-br-none'
-                        : 'bg-background-secondary/50 text-text-primary rounded-bl-none'
+                      message.role === "user"
+                        ? "bg-primary text-white rounded-br-none"
+                        : "bg-background-secondary/50 text-text-primary rounded-bl-none"
                     }`}
                   >
                     {message.content}
@@ -214,7 +234,9 @@ export default function LandingPageChatBot() {
                     type="text"
                     value={input}
                     onChange={handleInputChange}
-                    placeholder={isLoading ? "AI is thinking..." : "Type your message..."}
+                    placeholder={
+                      isLoading ? "AI is thinking..." : "Type your message..."
+                    }
                     disabled={isLoading}
                     className="w-full p-4 pr-32 rounded-xl border border-border/50 bg-background-primary/50 
                              backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-primary/50
@@ -228,18 +250,18 @@ export default function LandingPageChatBot() {
                              shadow-md hover:shadow-lg active:scale-95 disabled:opacity-50
                              disabled:hover:bg-primary disabled:cursor-not-allowed"
                   >
-                    <svg 
-                      xmlns="http://www.w3.org/2000/svg" 
-                      fill="none" 
-                      viewBox="0 0 24 24" 
-                      strokeWidth="1.5" 
-                      stroke="currentColor" 
-                      className={`size-5 ${isLoading ? 'animate-pulse' : ''}`}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      strokeWidth="1.5"
+                      stroke="currentColor"
+                      className={`size-5 ${isLoading ? "animate-pulse" : ""}`}
                     >
-                      <path 
-                        strokeLinecap="round" 
-                        strokeLinejoin="round" 
-                        d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" 
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5"
                       />
                     </svg>
                   </button>
@@ -250,5 +272,5 @@ export default function LandingPageChatBot() {
         )}
       </div>
     </section>
-  )
-}
+  );
+}

app/components/theme-provider.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+/**
+ * Custom ThemeProvider component that wraps next-themes provider
+ * with hydration mismatch prevention.
+ *
+ * This component ensures theme switching functionality works correctly
+ * by only rendering after initial client-side mount to prevent
+ * hydration mismatches between server and client rendering.
+ *
+ * @param children - Child components to be wrapped by the theme provider
+ * @param props - Additional props passed to NextThemesProvider
+ */
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  // Track whether component has mounted on client-side
+  const [mounted, setMounted] = React.useState(false);
+
+  // Set mounted state to true after initial client-side render
+  // This ensures we only render content after hydration is complete
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Return null on server-side and initial client-side render
+  // to prevent hydration mismatch with theme preferences
+  if (!mounted) {
+    return null;
+  }
+
+  // Once mounted, render the theme provider with children
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

app/components/top-nav.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+/**
+ * TopNav - A responsive navigation header component with theme switching functionality
+ * Features:
+ * - Colorful brand logo/text
+ * - Navigation links for teachers and students
+ * - Theme switcher (light/dark/system) with animated icons
+ * - Client-side hydration handling
+ */
+export function TopNav() {
+  const { setTheme } = useTheme();
+  // Track component mounting to prevent hydration mismatch
+  const [mounted, setMounted] = React.useState(false);
+
+  // Enable theme switching only after client-side hydration
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Pre-hydration render - shows a simplified version without theme toggle
+  if (!mounted) {
+    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>
+          <div className="w-9 h-9" />{" "}
+          {/* Placeholder maintaining layout consistency during hydration */}
+        </div>
+      </header>
+    );
+  }
+
+  // Post-hydration render - includes full functionality with theme toggle
+  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">
+        {/* Brand logo with multi-colored letters */}
+        <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>
+
+        {/* Navigation links with language-specific text (Traditional Chinese) */}
+        <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>
+
+        {/* Theme switcher dropdown with animated sun/moon icons */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button>
+              {/* Animated sun/moon icons that rotate based on theme */}
+              <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+              <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+              <span className="sr-only">Toggle theme</span>
+            </Button>
+          </DropdownMenuTrigger>
+          {/* Theme selection menu */}
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => setTheme("light")}>
+              Light
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setTheme("dark")}>
+              Dark
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setTheme("system")}>
+              System
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}

app/globals.css

@@ -5,24 +5,24 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 20 14.3% 4.1%;
+    --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 20 14.3% 4.1%;
+    --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 20 14.3% 4.1%;
-    --primary: 24.6 95% 53.1%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 60 4.8% 95.9%;
-    --secondary-foreground: 24 9.8% 10%;
-    --muted: 60 4.8% 95.9%;
-    --muted-foreground: 25 5.3% 44.7%;
-    --accent: 60 4.8% 95.9%;
-    --accent-foreground: 24 9.8% 10%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 351.3 94.5% 71.4%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 20 5.9% 90%;
-    --input: 20 5.9% 90%;
-    --ring: 24.6 95% 53.1%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 351.3 94.5% 71.4%;
     --radius: 1rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
@@ -33,24 +33,24 @@
 
   .dark {
     --background: 20 14.3% 4.1%;
-    --foreground: 60 9.1% 97.8%;
-    --card: 20 14.3% 4.1%;
-    --card-foreground: 60 9.1% 97.8%;
-    --popover: 20 14.3% 4.1%;
-    --popover-foreground: 60 9.1% 97.8%;
-    --primary: 20.5 90.2% 48.2%;
-    --primary-foreground: 60 9.1% 97.8%;
-    --secondary: 12 6.5% 15.1%;
-    --secondary-foreground: 60 9.1% 97.8%;
-    --muted: 12 6.5% 15.1%;
-    --muted-foreground: 24 5.4% 63.9%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 351.3 94.5% 71.4%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
     --accent: 12 6.5% 15.1%;
-    --accent-foreground: 60 9.1% 97.8%;
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 60 9.1% 97.8%;
-    --border: 12 6.5% 15.1%;
-    --input: 12 6.5% 15.1%;
-    --ring: 20.5 90.2% 48.2%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 351.3 94.5% 71.4%;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;

app/layout.tsx

@@ -1,8 +1,8 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
-import { ThemeProvider } from '@/components/custom/theme-provider'
-import { TopNav } from '../components/custom/top-nav'
+import { ThemeProvider } from "@/app/components/theme-provider";
+import { TopNav } from "./components/top-nav";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -12,16 +12,21 @@ const geistSans = localFont({
 
 export const metadata: Metadata = {
   title: "PlayGo AI - AI-Powered Learning Platform",
-  description: "Transform education with AI-powered interactive learning experiences",
+  description:
+    "Transform education with AI-powered interactive learning experiences",
 };
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
-    <html lang="en" suppressHydrationWarning className={`${geistSans.variable}`}>
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${geistSans.variable}`}
+    >
       <body className="antialiased">
         <ThemeProvider
           attribute="class"
@@ -30,11 +35,9 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <TopNav />
-          <main className="pt-14">
-            {children}
-          </main>
+          <main className="pt-14">{children}</main>
         </ThemeProvider>
       </body>
     </html>
-  )
+  );
 }

app/page.tsx

@@ -1,68 +1,131 @@
-'use client'
+"use client";
 
-import Link from "next/link"
-import ChatBot from '@/components/custom/LandingPageChatBot'
+import Link from "next/link";
+import LandingPageChatBot from "@/app/components/landing-page-chat-bot";
 
+/**
+ * LandingPage Component
+ * Main landing page for PlayGo AI educational platform
+ * Features a chatbot, feature highlights, statistics, and footer
+ */
 export default function LandingPage() {
   return (
     <div className="min-h-screen bg-background-primary">
       <main className="pt-4">
-        {/* Hero Section */}
+        {/* Interactive ChatBot Section */}
         <div className="">
-          <ChatBot />
+          <LandingPageChatBot />
         </div>
 
-        {/* Features Grid */}
+        {/* Features Grid Section - Displays 4 key platform features with icons */}
         <section className="bg-background-secondary py-20">
           <div className="container mx-auto px-4">
-            <h2 className="text-3xl font-bold text-center mb-16">Build with our powerful learning tools</h2>
+            <h2 className="text-3xl font-bold text-center mb-16">
+              Build with our powerful learning tools
+            </h2>
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
               <div className="p-6 rounded-xl bg-background-primary">
                 <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
-                  <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                  <svg
+                    className="w-6 h-6 text-primary"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M13 10V3L4 14h7v7l9-11h-7z"
+                    />
                   </svg>
                 </div>
-                <h3 className="text-xl font-semibold mb-2">Interactive Learning</h3>
-                <p className="text-text-secondary">Engage with AI-powered quizzes, projects, and virtual labs</p>
+                <h3 className="text-xl font-semibold mb-2">
+                  Interactive Learning
+                </h3>
+                <p className="text-text-secondary">
+                  Engage with AI-powered quizzes, projects, and virtual labs
+                </p>
               </div>
 
               <div className="p-6 rounded-xl bg-background-primary">
                 <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
-                  <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                  <svg
+                    className="w-6 h-6 text-primary"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                    />
                   </svg>
                 </div>
                 <h3 className="text-xl font-semibold mb-2">Diverse Subjects</h3>
-                <p className="text-text-secondary">Explore topics from STEM to humanities with expert AI guidance</p>
+                <p className="text-text-secondary">
+                  Explore topics from STEM to humanities with expert AI guidance
+                </p>
               </div>
 
               <div className="p-6 rounded-xl bg-background-primary">
                 <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
-                  <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+                  <svg
+                    className="w-6 h-6 text-primary"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+                    />
                   </svg>
                 </div>
-                <h3 className="text-xl font-semibold mb-2">Personalized Path</h3>
-                <p className="text-text-secondary">Adaptive learning tailored to your unique pace and style</p>
+                <h3 className="text-xl font-semibold mb-2">
+                  Personalized Path
+                </h3>
+                <p className="text-text-secondary">
+                  Adaptive learning tailored to your unique pace and style
+                </p>
               </div>
 
               <div className="p-6 rounded-xl bg-background-primary">
                 <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
-                  <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                  <svg
+                    className="w-6 h-6 text-primary"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+                    />
                   </svg>
                 </div>
-                <h3 className="text-xl font-semibold mb-2">Progress Tracking</h3>
-                <p className="text-text-secondary">Monitor learning outcomes with detailed analytics</p>
+                <h3 className="text-xl font-semibold mb-2">
+                  Progress Tracking
+                </h3>
+                <p className="text-text-secondary">
+                  Monitor learning outcomes with detailed analytics
+                </p>
               </div>
             </div>
           </div>
         </section>
 
-        {/* Stats Section */}
+        {/* Statistics Section - Displays key metrics about platform usage */}
         <section className="container mx-auto px-4 py-20">
-          <h2 className="text-3xl font-bold text-center mb-16">Trusted by educators worldwide</h2>
+          <h2 className="text-3xl font-bold text-center mb-16">
+            Trusted by educators worldwide
+          </h2>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
             <div>
               <p className="text-4xl font-bold text-primary mb-2">500K+</p>
@@ -84,9 +147,16 @@ export default function LandingPage() {
         </section>
       </main>
 
-      {/* Updated Educational Footer */}
+      {/* Footer Section
+       * Contains:
+       * - Branded logo with playful multi-colored letters
+       * - Learning resource links
+       * - Social media links and contact information
+       * - Non-profit mission statement and copyright
+       */}
       <footer className="bg-background-secondary border-t border-border py-12">
         <div className="container mx-auto px-4">
+          {/* Logo and Tagline */}
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
             <div className="text-center md:text-left">
               <h3 className="text-2xl font-bold mb-4">
@@ -99,48 +169,110 @@ export default function LandingPage() {
                 <span className="ml-2 text-[#45B7D1]">A</span>
                 <span className="text-[#FDCB6E]">I</span>
               </h3>
-              <p className="text-text-secondary">Making learning fun and accessible for everyone</p>
+              <p className="text-text-secondary">
+                Making learning fun and accessible for everyone
+              </p>
             </div>
 
+            {/* Learning Resources Navigation */}
             <div className="text-center">
               <h3 className="font-semibold mb-4">Learning Resources</h3>
               <ul className="space-y-2">
-                <li><Link href="/library" className="text-text-secondary hover:text-primary">Learning Library</Link></li>
-                <li><Link href="/tutorials" className="text-text-secondary hover:text-primary">Tutorials</Link></li>
-                <li><Link href="/blog" className="text-text-secondary hover:text-primary">Educational Blog</Link></li>
+                <li>
+                  <Link
+                    href="/library"
+                    className="text-text-secondary hover:text-primary"
+                  >
+                    Learning Library
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/tutorials"
+                    className="text-text-secondary hover:text-primary"
+                  >
+                    Tutorials
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/blog"
+                    className="text-text-secondary hover:text-primary"
+                  >
+                    Educational Blog
+                  </Link>
+                </li>
               </ul>
             </div>
 
+            {/* Social Media and Contact Information */}
             <div className="text-center md:text-right">
               <h3 className="font-semibold mb-4">Connect With Us</h3>
               <div className="flex justify-center md:justify-end space-x-4">
-                <a href="#" className="text-text-secondary hover:text-primary" aria-label="Discord">
-                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"/>
+                <a
+                  href="#"
+                  className="text-text-secondary hover:text-primary"
+                  aria-label="Discord"
+                >
+                  <svg
+                    className="w-6 h-6"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z" />
                   </svg>
                 </a>
-                <a href="#" className="text-text-secondary hover:text-primary" aria-label="Twitter">
-                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                <a
+                  href="#"
+                  className="text-text-secondary hover:text-primary"
+                  aria-label="Twitter"
+                >
+                  <svg
+                    className="w-6 h-6"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                  >
                     <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                   </svg>
                 </a>
-                <a href="#" className="text-text-secondary hover:text-primary" aria-label="YouTube">
-                  <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
+                <a
+                  href="#"
+                  className="text-text-secondary hover:text-primary"
+                  aria-label="YouTube"
+                >
+                  <svg
+                    className="w-6 h-6"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                   </svg>
                 </a>
               </div>
               <p className="mt-4 text-text-secondary">
-                Contact us: <a href="mailto:hello@playgoai.org" className="hover:text-primary">hello@playgoai.org</a>
+                Contact us:{" "}
+                <a
+                  href="mailto:hello@playgoai.org"
+                  className="hover:text-primary"
+                >
+                  hello@playgoai.org
+                </a>
               </p>
             </div>
           </div>
+
+          {/* Non-profit Mission and Copyright */}
           <div className="mt-12 pt-8 border-t border-border/50 text-center text-text-secondary">
-            <p>PlayGo AI - A non-profit organization dedicated to making education accessible through AI</p>
-            <p className="mt-2">&copy; {new Date().getFullYear()} PlayGo AI. All rights reserved.</p>
+            <p>
+              PlayGo AI - A non-profit organization dedicated to making
+              education accessible through AI
+            </p>
+            <p className="mt-2">
+              &copy; {new Date().getFullYear()} PlayGo AI. All rights reserved.
+            </p>
           </div>
         </div>
       </footer>
     </div>
-  )
-}
+  );
+}

app/types/chatbot.ts

@@ -0,0 +1,10 @@
+export interface ChatBot {
+  id: string;
+  title: string;
+  description: string;
+  subject: string;
+  icon: string;
+  category: string;
+  popular?: boolean;
+  trending?: boolean;
+}

components.json

@@ -18,4 +18,4 @@
     "hooks": "@/hooks"
   },
   "iconLibrary": "lucide"
-}
+}

components/custom/ChatBotCard.tsx

@@ -1,43 +0,0 @@
-import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card"
-
-interface ChatBotCardProps {
-  chatbot: {
-    id: string
-    title: string
-    description: string
-    subject: string
-    icon: string
-    author?: string
-  }
-}
-
-export default function ChatBotCard({ chatbot }: ChatBotCardProps) {
-  return (
-    <Card className="group relative overflow-hidden bg-background-primary/50 shadow-sm transition-all hover:shadow-md backdrop-blur-sm">
-      <CardHeader className="space-y-0">
-        <div className="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>
-      </CardHeader>
-
-      <CardContent>
-        <p className="text-text-secondary">{chatbot.description}</p>
-        {chatbot.author && (
-          <p className="mt-2 text-sm text-text-secondary">作者：{chatbot.author}</p>
-        )}
-      </CardContent>
-
-      <CardFooter>
-        <button className="w-full rounded-xl bg-primary px-4 py-2 text-white transition-colors hover:bg-primary/90">
-          開始對話
-        </button>
-      </CardFooter>
-    </Card>
-  )
-}

components/custom/ChatBotGrid.tsx

@@ -1,60 +0,0 @@
-'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>
-  )
-} 

components/custom/SubjectFilter.tsx

@@ -1,19 +0,0 @@
-'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>
-  )
-} 

components/custom/theme-provider.tsx

@@ -1,22 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-
-export function ThemeProvider({
-  children,
-  ...props
-}: React.ComponentProps<typeof NextThemesProvider>) {
-  const [mounted, setMounted] = React.useState(false)
-
-  // Prevent hydration mismatch by only rendering after mount
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) {
-    return null
-  }
-
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}

components/custom/top-nav.tsx

@@ -1,96 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
-import Link from 'next/link'
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-export function TopNav() {
-  const { setTheme } = useTheme()
-  const [mounted, setMounted] = React.useState(false)
-
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  // Prevent theme toggle from showing before client-side hydration
-  if (!mounted) {
-    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>
-          <div className="w-9 h-9" /> {/* Placeholder for theme toggle */}
-        </div>
-      </header>
-    )
-  }
-
-  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>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button>
-                <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-                <span className="sr-only">Toggle theme</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => setTheme("light")}>
-                Light
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => setTheme("dark")}>
-                Dark
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => setTheme("system")}>
-                System
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      </header>
-  )
-}

components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

components/ui/button.tsx

@@ -1,11 +1,11 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -31,27 +31,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

components/ui/card.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -10,12 +10,12 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "rounded-xl border bg-card text-card-foreground shadow",
-      className
+      className,
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLDivElement,
@@ -38,8 +38,8 @@ const CardTitle = React.forwardRef<
     className={cn("font-semibold leading-none tracking-tight", className)}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLDivElement,
@@ -50,16 +50,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -70,7 +70,14 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

components/ui/command.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

components/ui/dialog.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

components/ui/dropdown-menu.tsx

@@ -1,27 +1,27 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -29,16 +29,16 @@ const DropdownMenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
     {children}
     <ChevronRight className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -48,13 +48,13 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -67,18 +67,18 @@ const DropdownMenuContent = React.forwardRef<
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
@@ -86,12 +86,12 @@ const DropdownMenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -101,7 +101,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -113,9 +113,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -125,7 +125,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -136,13 +136,13 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
@@ -150,12 +150,12 @@ const DropdownMenuLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -166,8 +166,8 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
   className,
@@ -178,9 +178,9 @@ const DropdownMenuShortcut = ({
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
@@ -198,4 +198,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-}
+};

components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

components/ui/popover.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

components/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

next.config.ts

@@ -1,14 +1,14 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  output: 'standalone',
+  output: "standalone",
   async rewrites() {
     return [
       {
-        source: '/api/:path*',
-        destination: 'http://localhost:8000/api/:path*' // FastAPI backend
-      }
-    ]
+        source: "/api/:path*",
+        destination: "http://localhost:8000/api/:path*", // FastAPI backend
+      },
+    ];
   },
 };
 

package.json

@@ -10,11 +10,17 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.5",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@tanstack/react-table": "^8.20.5",
     "ai": "^3.4.31",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
+    "eslint-config-prettier": "^9.1.0",
     "lucide-react": "^0.456.0",
     "next": "15.0.2",
     "next-themes": "^0.4.3",
@@ -32,6 +38,7 @@
     "eslint": "^8",
     "eslint-config-next": "15.0.2",
     "postcss": "^8",
+    "prettier": "3.3.3",
     "tailwindcss": "^3.4.14",
     "typescript": "^5"
   },

tailwind.config.ts

@@ -1,83 +1,83 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
-  darkMode: ['class', 'class'],
+  darkMode: ["class", "class"],
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-  	extend: {
-  		colors: {
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				dark: '#3DAA9D',
-  				light: '#7EDCD6',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				dark: '#E65555',
-  				light: '#FF8F8F',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			accent: {
-  				blue: '#45B7D1',
-  				yellow: '#FDCB6E',
-  				dark: {
-  					blue: '#3A9BB2',
-  					yellow: '#D4A85D'
-  				},
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			background: 'hsl(var(--background))',
-  			text: {
-  				primary: 'var(--text-primary)',
-  				secondary: 'var(--text-secondary)',
-  				tertiary: 'var(--text-tertiary)'
-  			},
-  			border: 'hsl(var(--border))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		},
-  		backdropBlur: {
-  			xs: '2px'
-  		},
-  		boxShadow: {
-  			dark: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.24)'
-  		},
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		}
-  	}
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          dark: "#3DAA9D",
+          light: "#7EDCD6",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          dark: "#E65555",
+          light: "#FF8F8F",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        accent: {
+          blue: "#45B7D1",
+          yellow: "#FDCB6E",
+          dark: {
+            blue: "#3A9BB2",
+            yellow: "#D4A85D",
+          },
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        background: "hsl(var(--background))",
+        text: {
+          primary: "var(--text-primary)",
+          secondary: "var(--text-secondary)",
+          tertiary: "var(--text-tertiary)",
+        },
+        border: "hsl(var(--border))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          "1": "hsl(var(--chart-1))",
+          "2": "hsl(var(--chart-2))",
+          "3": "hsl(var(--chart-3))",
+          "4": "hsl(var(--chart-4))",
+          "5": "hsl(var(--chart-5))",
+        },
+      },
+      backdropBlur: {
+        xs: "2px",
+      },
+      boxShadow: {
+        dark: "0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.24)",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
   },
   plugins: [require("tailwindcss-animate")],
 };