chore: add basic layout

app/app.config.ts

@@ -0,0 +1,4 @@
+export default defineAppConfig({
+  title: 'La Boîte aux lettres',
+  description: "Characters with character, by type designer Laurette Colmard."
+})

app/app.vue

@@ -2,4 +2,13 @@
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
-</template>
+</template>
+
+<style lang="css">
+@import '@unocss/reset/eric-meyer.css';
+
+:root {
+  --primary-color: #fff;
+  --secondary-color: #000;
+}
+</style>

app/components/AppFooter.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <footer>
+    <img src="~/assets/images/brand-mobile.svg" :alt="appConfig.title"></img>
+    <address>
+      Laurette Colmard
+      laurette.colmard@gmail.com
+      29 rue Colonel Bougault, 38100 Grenoble (FR)
+      06 01 93 75 87
+    </address>
+  </footer>
+</template>
+
+<style lang="css" scoped>
+footer {
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+}
+</style>

app/components/AppHeader.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <header>
+    <img src="~/assets/icons/brand-logo.svg" :alt="`${appConfig.title} - Logo`"></img>
+    <img src="~/assets/images/brand-mobile.svg" :alt="appConfig.title"></img>
+    <p>{{ appConfig.description }}</p>
+  </header>
+</template>
+
+<style lang="css" scoped>
+header {
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+  height: 68vh;
+  padding: 3rem 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+img:first-of-type {
+  align-self: flex-end;
+  margin-bottom: auto;
+  width: 36vw;
+}
+</style>

app/layouts/default.vue

@@ -0,0 +1,7 @@
+<template>
+  <main>
+    <AppHeader />
+    <slot />
+    <AppFooter />
+  </main>
+</template>

app/pages/index.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
+const appConfig = useAppConfig()
 const { data: home } = await useAsyncData(() => queryCollection('content').path('/').first())
 
 useSeoMeta({
-  title: home.value?.title,
-  description: home.value?.description
+  title: appConfig.title,
+  description: appConfig.description
 })
 </script>
 
 <template>
-  <ContentRenderer v-if="home" :value="home" />
+  <ContentRenderer class="nuxt-content" v-if="home" :value="home" />
   <div v-else>Home not found</div>
-</template>
+</template>
+
+<style lang="css" scoped>
+.nuxt-content {
+  background-color: var(--secondary-color);
+  color: var(--primary-color);
+}
+</style>