Replace hero banner with search bar on home page

frontend/src/app/page.tsx

@@ -3,12 +3,18 @@
 import { useEffect, useState } from "react";
 import { api } from "@/lib/api";
 import Link from "next/link";
-import { BookOpen } from "lucide-react";
+import { BookOpen, Search } from "lucide-react";
 
 export default function Home() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [courses, setCourses] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredCourses = courses.filter(course => 
+    course.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
+    course.description?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
 
   useEffect(() => {
     const fetchCourses = async () => {
@@ -28,22 +34,27 @@ export default function Home() {
   }, []);
 
   return (
-    <div className="space-y-12">
-      {/* Hero Section */}
-      <section className="bg-gradient-to-r from-blue-600 to-blue-800 rounded-2xl p-12 text-white shadow-xl">
-        <div className="max-w-2xl">
-          <h1 className="text-4xl font-bold mb-4">获取优质课程，提升你的技能</h1>
-          <p className="text-blue-100 text-lg mb-8">访问由行业专家精心打造的高质量课程资料。一次购买，终身受益。</p>
-          <button className="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition-colors">
-            浏览课程
-          </button>
+    <div className="space-y-8">
+      {/* Search Section */}
+      <section className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
+        <div className="relative">
+          <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
+          <input 
+            type="text" 
+            placeholder="搜索课程..." 
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-12 pr-4 py-3 rounded-xl border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition-all text-gray-900 placeholder:text-gray-400"
+          />
         </div>
       </section>
 
       {/* Course List */}
       <section>
         <div className="flex items-center justify-between mb-6">
-          <h2 className="text-2xl font-bold text-gray-900">精选课程</h2>
+          <h2 className="text-2xl font-bold text-gray-900">
+            {searchQuery ? '搜索结果' : '精选课程'}
+          </h2>
         </div>
 
         {loading ? (
@@ -52,9 +63,9 @@ export default function Home() {
               <div key={i} className="bg-white rounded-xl h-80 animate-pulse"></div>
             ))}
           </div>
-        ) : courses.length > 0 ? (
+        ) : filteredCourses.length > 0 ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {courses.map((course) => (
+            {filteredCourses.map((course) => (
               <Link href={`/course/${course.id}`} key={course.id}>
                 <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow group">
                   <div className="aspect-video w-full bg-gray-200 relative overflow-hidden">
@@ -81,7 +92,9 @@ export default function Home() {
         ) : (
           <div className="text-center py-12 bg-white rounded-xl border border-gray-100">
             <BookOpen className="w-12 h-12 text-gray-300 mx-auto mb-3" />
-            <p className="text-gray-500">暂无可用课程。</p>
+            <p className="text-gray-500">
+              {searchQuery ? '未找到匹配的课程' : '暂无可用课程'}
+            </p>
           </div>
         )}
       </section>