feat: Implement a public course browsing page with search functionality and detailed course cards.

Frontend-Learner/pages/browse/index.vue

@@ -75,13 +75,13 @@ const filteredCourses = computed(() => {
     <section class="relative pt-32 pb-20 px-6 overflow-hidden">
       <div class="container mx-auto max-w-6xl text-center relative z-10">
         <!-- Tagline Badge -->
-        <div class="mb-6 slide-up">
+        <div class="mb-8 slide-up">
            <span class="px-5 py-2 rounded-full glass border border-blue-400/20 text-blue-400 text-[11px] font-black tracking-[0.25em] uppercase shadow-[0_0_20px_rgba(59,130,246,0.15)]">
              EXPLORE COURSES
            </span>
         </div>
         <!-- Main Title -->
-        <h1 class="text-4xl md:text-6xl font-black text-slate-900  mb-6 tracking-tight slide-up" style="animation-delay: 0.1s;">
+        <h1 class="text-4xl md:text-6xl font-black text-slate-900 mb-8 tracking-normal py-10 slide-up leading-[1.6]" style="animation-delay: 0.1s;">
           คอร์สเรียน<span class="text-gradient-cyan">ทั้งหมด</span>
         </h1>
         <!-- Subtitle -->
@@ -232,6 +232,10 @@ const filteredCourses = computed(() => {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  display: inline-block;
+  padding: 0.5em 0.2em;
+  margin: -0.5em -0.2em;
+  vertical-align: baseline;
 }
 
 /* Premium Glass Effect for Containers */

Frontend-Learner/pages/index.vue

@@ -36,16 +36,16 @@ useHead({
             
             <!-- Left Content -->
             <div class="hero-content">
-               <div class="mb-10 slide-up">
+                <div class="mb-12 slide-up">
-                <span class="px-5 py-2 rounded-full glass border border-blue-400/20 text-blue-400 text-[11px] font-black tracking-[0.25em] uppercase shadow-[0_0_20px_rgba(59,130,246,0.15)] bg-white ">
+                 <span class="px-5 py-2 rounded-full glass border border-blue-400/20 text-blue-400 text-[11px] font-black tracking-[0.25em] uppercase shadow-[0_0_20px_rgba(59,130,246,0.15)] bg-white ">
-                   เริ่มต้นเส้นทางความสำเร็จใหม่ที่นี่
+                    เริ่มต้นเส้นทางความสำเร็จใหม่ที่นี่
-                </span>
+                 </span>
-              </div>
+               </div>
-              
+               
-              <h1 class="hero-title leading-[1.05] mb-8 slide-up" style="animation-delay: 0.1s;">
+                <h1 class="hero-title leading-[1.6] mb-8 slide-up py-8" style="animation-delay: 0.1s;">
-                ยกระดับทักษะ <br>
+                 ยกระดับทักษะ <br>
-                <span class="text-slate-900 ">แห่งอนาคต</span> <span class="text-gradient-cyan">ไปพร้อมกับเรา</span>
+                 <span class="text-slate-900 ">แห่งอนาคต</span> <span class="text-gradient-cyan">ไปพร้อมกับเรา</span>
-              </h1>
+               </h1>
               <h2 class="hero-subtitle text-slate-600  font-medium mb-12 text-xl leading-relaxed slide-up max-w-[640px]" style="animation-delay: 0.2s;">
                 แหล่งรวมความรู้ออนไลน์ที่เข้าถึงง่ายที่สุด พัฒนาโดยผู้เชี่ยวชาญ <br class="hidden-mobile" >
                 เพื่อช่วยให้คุณก้าวสู่เป้าหมายที่ตั้งไว้ได้อย่างมั่นใจ
@@ -220,6 +220,10 @@ useHead({
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  display: inline-block;
+  padding: 0.4em 0.2em;
+  margin: -0.4em -0.2em;
+  vertical-align: baseline;
 }
 
 .glass-premium {