feat: Initialize project with core Nuxt configuration, Quasar layouts, global Tailwind CSS, and essential components.

Frontend-Learner/components/layout/LandingHeader.vue

@@ -3,22 +3,35 @@
  * @file LandingHeader.vue
  * @description The main header for the public landing pages.
  * Features a transparent background that becomes solid/glass upon scrolling.
+ * Responsive: Collapses into a drawer on mobile (md breakpoint).
  */
 
 // Track scrolling state to adjust header styling
 const isScrolled = ref(false)
 const { isAuthenticated } = useAuth()
+// Mobile Drawer State
+const mobileMenuOpen = ref(false)
 
 const handleScroll = () => {
   isScrolled.value = window.scrollY > 20
 }
 
+// Lock body scroll when mobile menu is open
+watch(mobileMenuOpen, (isOpen) => {
+  if (isOpen) {
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+})
+
 onMounted(() => {
   window.addEventListener('scroll', handleScroll)
 })
 
 onUnmounted(() => {
   window.removeEventListener('scroll', handleScroll)
+  document.body.style.overflow = '' // Cleanup
 })
 </script>
 
@@ -28,139 +41,180 @@ onUnmounted(() => {
     - Transitions between transparent and glass effect based on scroll.
   -->
   <header 
-    class="landing-header transition-all duration-300"
+    class="fixed top-0 left-0 right-0 z-[100] transition-all duration-300"
     :class="[isScrolled ? 'h-16 glass-nav shadow-lg' : 'h-24 bg-transparent']"
   >
-    <div class="container h-full flex items-center justify-between">
-      <!-- Left Section: Logo & Desktop Navigation -->
-      <div class="flex items-center gap-8">
-        <!-- Logo -->
-        <NuxtLink to="/" class="flex items-center gap-3 group">
-          <div class="logo-box bg-blue-600 text-white font-black rounded-xl w-10 h-10 flex items-center justify-center shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
-            E
-          </div>
-          <div class="flex flex-col">
-            <span 
-              class="font-black text-lg leading-none tracking-tight transition-colors"
-              :class="[isScrolled ? 'text-white' : 'text-slate-900 group-hover:text-blue-600']"
-            >
-              E-Learning
-            </span>
-            <span 
-              class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 transition-colors"
-              :class="[isScrolled ? 'text-slate-400' : 'text-slate-500']"
-            >
-              Platform
-            </span>
-          </div>
+    <div class="container mx-auto px-6 md:px-12 h-full flex items-center justify-between">
+      <!-- Left Section: Logo -->
+      <NuxtLink to="/" class="flex items-center gap-3 group">
+        <div class="bg-blue-600 text-white font-black rounded-xl w-10 h-10 flex items-center justify-center shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
+          E
+        </div>
+        <div class="flex flex-col">
+          <span 
+            class="font-black text-lg leading-none tracking-tight transition-colors"
+            :class="[isScrolled ? 'text-white' : 'text-slate-900 group-hover:text-blue-600']"
+          >
+            E-Learning
+          </span>
+          <span 
+            class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 transition-colors"
+            :class="[isScrolled ? 'text-slate-400' : 'text-slate-500']"
+          >
+            Platform
+          </span>
+        </div>
+      </NuxtLink>
+
+      <!-- Desktop Navigation (Hidden on Mobile) -->
+      <nav class="hidden md:flex items-center gap-8 text-sm font-bold">
+        <NuxtLink 
+          to="/browse" 
+          class="transition-colors relative group py-2"
+          :class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
+        >
+          {{ $t('sidebar.onlineCourses') }}
+          <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
         </NuxtLink>
+        <NuxtLink 
+          to="/browse/recommended" 
+          class="transition-colors relative group py-2"
+          :class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
+        >
+          {{ $t('sidebar.recommendedCourses') }}
+          <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
+        </NuxtLink>
+      </nav>
 
-        <!-- Desktop Links -->
-        <nav class="flex items-center gap-6 text-sm font-bold">
-          <NuxtLink 
-            to="/browse" 
-            class="transition-colors relative group"
-            :class="[isScrolled ? 'text-slate-400 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
-          >
-            {{ $t('sidebar.onlineCourses') }}
-            <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
-          </NuxtLink>
-          <NuxtLink 
-            to="/browse/recommended" 
-            class="transition-colors relative group"
-            :class="[isScrolled ? 'text-slate-400 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
-          >
-            {{ $t('sidebar.recommendedCourses') }}
-            <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
-          </NuxtLink>
-
-        </nav>
-      </div>
-
-      <!-- Right Section: Action Buttons -->
-      <div class="flex items-center gap-4">
+      <!-- Desktop Action Buttons (Hidden on Mobile) -->
+      <div class="hidden md:flex items-center gap-4">
         <template v-if="!isAuthenticated">
+          <!-- Login Button -->
           <NuxtLink 
             to="/auth/login" 
-            class="btn-secondary-premium shadow-sm"
-            :class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'bg-blue-50 border-blue-100 text-blue-600 hover:bg-blue-100 hover:border-blue-200']"
+            class="px-6 py-2.5 rounded-xl font-bold text-sm border-2 transition-all hover:-translate-y-0.5"
+            :class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'border-blue-100 text-blue-600 bg-blue-50 hover:bg-blue-100 hover:border-blue-200']"
           >
             {{ $t('auth.login') }}
           </NuxtLink>
-          <NuxtLink to="/auth/register" class="btn-primary-premium shadow-lg shadow-blue-600/20">
+          
+          <!-- Register Button -->
+          <NuxtLink 
+            to="/auth/register" 
+            class="px-6 py-2.5 rounded-xl font-bold text-sm text-white bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-600/20 hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
+          >
             {{ $t('auth.getStarted') }}
           </NuxtLink>
         </template>
+        
         <template v-else>
-          <NuxtLink to="/dashboard" class="btn-primary-premium shadow-lg shadow-blue-600/20">
+          <NuxtLink 
+            to="/dashboard" 
+            class="px-6 py-2.5 rounded-xl font-bold text-sm text-white bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-600/20 hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
+          >
              {{ $t('landing.goToDashboard') }}
           </NuxtLink>
         </template>
       </div>
+
+      <!-- Mobile Menu Button (Visible on Mobile) -->
+      <button 
+        class="md:hidden relative z-50 w-10 h-10 flex items-center justify-center rounded-full transition-colors"
+        :class="[isScrolled || mobileMenuOpen ? 'text-white hover:bg-white/10' : 'text-slate-900 hover:bg-slate-100']"
+        @click="mobileMenuOpen = !mobileMenuOpen"
+      >
+        <q-icon :name="mobileMenuOpen ? 'close' : 'menu'" size="24px" />
+      </button>
+
+      <!-- Mobile Navigation Drawer -->
+      <div 
+        class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-40 transition-opacity duration-300 md:hidden"
+        :class="[mobileMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none']"
+        @click="mobileMenuOpen = false"
+      />
+      
+      <div 
+        class="fixed top-0 right-0 h-full w-4/5 max-w-sm bg-white shadow-2xl z-50 transform transition-transform duration-300 ease-out md:hidden flex flex-col"
+        :class="[mobileMenuOpen ? 'translate-x-0' : 'translate-x-full']"
+      >
+        <div class="p-6 pt-8 flex flex-col gap-6 h-full overflow-y-auto relative">
+          <!-- Close Button -->
+          <button 
+            class="absolute top-6 right-6 w-8 h-8 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 transition-colors"
+            @click="mobileMenuOpen = false"
+          >
+            <q-icon name="close" size="20px" />
+          </button>
+
+          <!-- Mobile Links -->
+          <nav class="flex flex-col gap-2 mt-8">
+            <NuxtLink 
+              to="/" 
+              class="flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 text-slate-700 font-bold transition-colors"
+              @click="mobileMenuOpen = false"
+            >
+              {{ $t('sidebar.overview') }}
+              <q-icon name="chevron_right" size="20px" class="text-slate-400" />
+            </NuxtLink>
+            <NuxtLink 
+              to="/browse" 
+              class="flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 text-slate-700 font-bold transition-colors"
+              @click="mobileMenuOpen = false"
+            >
+              {{ $t('sidebar.onlineCourses') }}
+              <q-icon name="chevron_right" size="20px" class="text-slate-400" />
+            </NuxtLink>
+            <NuxtLink 
+              to="/browse/recommended" 
+              class="flex items-center justify-between p-4 rounded-xl hover:bg-slate-50 text-slate-700 font-bold transition-colors"
+              @click="mobileMenuOpen = false"
+            >
+              {{ $t('sidebar.recommendedCourses') }}
+              <q-icon name="chevron_right" size="20px" class="text-slate-400" />
+            </NuxtLink>
+          </nav>
+
+          <div class="mt-auto pb-8 border-t border-slate-100 pt-8">
+             <template v-if="!isAuthenticated">
+                <div class="flex flex-col gap-4">
+                   <NuxtLink 
+                      to="/auth/login" 
+                      class="w-full py-3 rounded-xl font-bold text-center border-2 border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                      @click="mobileMenuOpen = false"
+                   >
+                     {{ $t('auth.login') }}
+                   </NuxtLink>
+                   <NuxtLink 
+                      to="/auth/register" 
+                      class="w-full py-3 rounded-xl font-bold text-center text-white bg-blue-600 shadow-lg hover:bg-blue-700 transition-colors"
+                      @click="mobileMenuOpen = false"
+                   >
+                     {{ $t('auth.getStarted') }}
+                   </NuxtLink>
+                </div>
+             </template>
+             <template v-else>
+                <NuxtLink 
+                   to="/dashboard" 
+                   class="flex items-center justify-center w-full py-3 rounded-xl font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 shadow-lg shadow-blue-500/30"
+                   @click="mobileMenuOpen = false"
+                >
+                   {{ $t('landing.goToDashboard') }} <q-icon name="arrow_forward" class="ml-2" />
+                </NuxtLink>
+             </template>
+          </div>
+        </div>
+      </div>
+
     </div>
   </header>
 </template>
 
 <style scoped>
-/* Header content */
-.landing-header {
-  width: 100%;
-  z-index: 100;
-  transition: all 0.3s ease;
-}
-
 /* Glassmorphism Effect for Scrolled Header */
 .glass-nav {
-  background: rgba(15, 23, 42, 0.8);
-  backdrop-filter: blur(12px);
+  background: rgba(15, 23, 42, 0.95); /* Darker background for legibility */
+  backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
-
-.container {
-  max-width: 1440px;
-  margin: 0 auto;
-  padding: 0 24px;
-}
-
-/* Premium Primary Button Styling */
-.btn-primary-premium {
-  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
-  color: white;
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 800;
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn-primary-premium:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.5);
-}
-
-/* Secondary Premium Button Styling */
-.btn-secondary-premium {
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 800;
-  border: 1.5px solid;
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn-secondary-premium:hover {
-  transform: translateY(-2px);
-}
-
-@media (max-width: 768px) {
-  .container {
-    padding: 0 16px;
-  }
-}
 </style>