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 */