feat: Initialize core frontend application structure, including layouts, authentication pages, and common UI components.

Frontend-Learner/layouts/default.vue

@@ -2,22 +2,50 @@
 /**
  * @file default.vue
  * @description Layout หลักสำหรับหน้าเว็บของผู้ใช้ (Authenticated Users)
- * ประกอบด้วย Header (Navbar) และ Mobile Navigation
+ * Uses Quasar QLayout for responsive structure.
  */
+
+const leftDrawerOpen = ref(false)
+
+const toggleLeftDrawer = () => {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+}
 </script>
 
 <template>
-  <!-- App Shell: คอนเทนเนอร์หลักของแอปพลิเคชัน -->
-  <div class="app-shell min-h-screen transition-colors duration-200">
-    <!-- Header: แถบเมนูด้านบน -->
-    <AppHeader />
+  <q-layout view="hHh lpr lFf" class="bg-slate-50 font-inter">
+    <!-- Header -->
+    <q-header bordered class="bg-white text-slate-800">
+      <AppHeader @toggle-sidebar="toggleLeftDrawer" />
+    </q-header>
 
-    <!-- Main Content Area: ส่วนแสดงเนื้อหาหลัก -->
-    <main class="app-main">
-      <slot />
-    </main>
+    <!-- Sidebar (Drawer) -->
+    <q-drawer
+      v-model="leftDrawerOpen"
+      bordered
+      class="bg-white"
+      :width="260"
+    >
+      <AppSidebar />
+    </q-drawer>
 
-    <!-- Mobile Bottom Navigation: แถบเมนูด้านล่าง (แสดงเฉพาะมือถือ) -->
-    <MobileNav />
-  </div>
+    <!-- Main Content -->
+    <q-page-container>
+      <q-page class="relative">
+        <slot />
+      </q-page>
+    </q-page-container>
+
+    <!-- Mobile Bottom Nav -->
+    <q-footer v-if="$q.screen.lt.md" bordered class="bg-white text-primary">
+       <MobileNav />
+    </q-footer>
+  </q-layout>
 </template>
+
+<style>
+/* Ensure fonts are applied */
+.font-inter {
+  font-family: 'Inter', sans-serif;
+}
+</style>

Frontend-Learner/layouts/landing.vue

@@ -2,39 +2,32 @@
 /**
  * @file landing.vue
  * @description Layout for the landing page (public facing).
- * Applies a dark theme by default and includes the public header and footer.
+ * Uses Quasar QLayout with overlay header.
  */
 </script>
 
 <template>
-  <!-- Landing Layout Container: Forces Dark Theme -->
-  <div class="landing-layout dark">
-    <LandingHeader />
+  <q-layout view="lHh LpR lFf" class="bg-slate-900 text-slate-100 font-inter">
     
-    <!-- Main Content Area: Grows to fill available space -->
-    <main class="flex-grow">
-      <slot />
-    </main>
-    
-    <LandingFooter />
-  </div>
+    <!-- Header (Transparent & Overlay) -->
+    <q-header class="bg-transparent" style="height: auto;">
+      <LandingHeader />
+    </q-header>
+
+    <!-- Main Content -->
+    <!-- padding-top: 0 forces content to go under the header (Hero effect) -->
+    <q-page-container style="padding-top: 0 !important;">
+      <q-page>
+        <slot />
+      </q-page>
+    </q-page-container>
+
+
+  </q-layout>
 </template>
 
 <style>
-/* 
-  Layout Styling:
-  - Flexbox column layout to stick footer to bottom.
-  - Dark background base.
-*/
-.landing-layout {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background-color: #0f172a; /* Slate 900 */
-  color: #f1f5f9; /* Slate 100 */
-}
-
-.flex-grow {
-  flex-grow: 1;
+.font-inter {
+  font-family: 'Inter', sans-serif;
 }
 </style>