elearning/Frontend-Learner/layouts/landing.vue
2026-01-13 10:48:02 +07:00

40 lines
816 B
Vue

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