Website Structure

Frontend-Learner/layouts/auth.vue

@@ -0,0 +1,6 @@
+<template>
+  <!-- Auth Shell: Wrapper for authentication pages (Login, Register, etc.) -->
+  <div class="auth-shell dark">
+    <slot />
+  </div>
+</template>

Frontend-Learner/layouts/default.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+/**
+ * @file default.vue
+ * @description Default application layout for authenticated users.
+ * Includes the AppHeader and MobileNav.
+ */
+</script>
+
+<template>
+  <!-- App Shell: Main container with global background and text color -->
+  <div class="app-shell min-h-screen transition-colors duration-200" style="background-color: var(--bg-body); color: var(--text-main);">
+    <!-- Header -->
+    <AppHeader />
+    
+    <!-- Main Content Area -->
+    <main class="app-main">
+      <slot />
+    </main>
+    
+    <!-- Mobile Bottom Navigation (Visible only on small screens) -->
+    <MobileNav />
+  </div>
+</template>

Frontend-Learner/layouts/landing.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+/**
+ * @file landing.vue
+ * @description Layout for the landing page (public facing).
+ * Applies a dark theme by default and includes the public header and footer.
+ */
+</script>
+
+<template>
+  <!-- Landing Layout Container: Forces Dark Theme -->
+  <div class="landing-layout dark">
+    <LandingHeader />
+    
+    <!-- Main Content Area: Grows to fill available space -->
+    <main class="flex-grow">
+      <slot />
+    </main>
+    
+    <LandingFooter />
+  </div>
+</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;
+}
+</style>