✨ Add layouts, routing, transitions & pages (Story 1.4)

Default layout with sticky AppHeader (nav, LanguageSwitcher, mobile hamburger),
AppFooter with social links. Minimal layout for express mode. 7 placeholder pages
with localized EN routes. Page transitions (fade+slide), prefers-reduced-motion
support, custom scroll behavior, error.vue, useSeo composable, SVG favicon.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/app/pages/competences.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="min-h-screen p-8">
+    <h1 class="text-3xl font-narrative text-sky-text">{{ $t('pages.skills.title') }}</h1>
+    <p class="mt-4 text-sky-text/70">{{ $t('pages.skills.description') }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { setPageMeta } = useSeo()
+const { t } = useI18n()
+
+setPageMeta({
+  title: t('pages.skills.title'),
+  description: t('pages.skills.description'),
+})
+</script>

frontend/app/pages/contact.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="min-h-screen p-8">
+    <h1 class="text-3xl font-narrative text-sky-text">{{ $t('pages.contact.title') }}</h1>
+    <p class="mt-4 text-sky-text/70">{{ $t('pages.contact.description') }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { setPageMeta } = useSeo()
+const { t } = useI18n()
+
+setPageMeta({
+  title: t('pages.contact.title'),
+  description: t('pages.contact.description'),
+})
+</script>

frontend/app/pages/index.vue

@@ -1,14 +1,31 @@
 <template>
-  <div class="min-h-screen bg-sky-dark flex flex-col items-center justify-center gap-6">
-    <h1 class="text-4xl font-narrative text-sky-text">{{ $t('landing.title') }}</h1>
+  <div class="min-h-screen flex flex-col items-center justify-center gap-6 px-4">
+    <h1 class="text-4xl md:text-5xl font-narrative text-sky-text text-center">{{ $t('landing.title') }}</h1>
     <p class="text-xl font-ui text-sky-text/70">{{ $t('landing.subtitle') }}</p>
     <div class="flex gap-4 mt-4">
-      <button class="px-6 py-3 bg-sky-accent text-sky-dark font-ui font-semibold rounded-lg">
+      <NuxtLink
+        :to="localePath('/projets')"
+        class="px-6 py-3 bg-sky-accent text-sky-dark font-ui font-semibold rounded-lg hover:opacity-90 transition-opacity"
+      >
         {{ $t('landing.cta_adventure') }}
-      </button>
-      <button class="px-6 py-3 border border-sky-text/30 text-sky-text font-ui rounded-lg">
+      </NuxtLink>
+      <NuxtLink
+        :to="localePath('/resume')"
+        class="px-6 py-3 border border-sky-text/30 text-sky-text font-ui rounded-lg hover:border-sky-accent hover:text-sky-accent transition-colors"
+      >
         {{ $t('landing.cta_express') }}
-      </button>
+      </NuxtLink>
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+const { setPageMeta } = useSeo()
+const { t } = useI18n()
+const localePath = useLocalePath()
+
+setPageMeta({
+  title: t('meta.title'),
+  description: t('meta.description'),
+})
+</script>

frontend/app/pages/parcours.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="min-h-screen p-8">
+    <h1 class="text-3xl font-narrative text-sky-text">{{ $t('pages.journey.title') }}</h1>
+    <p class="mt-4 text-sky-text/70">{{ $t('pages.journey.description') }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { setPageMeta } = useSeo()
+const { t } = useI18n()
+
+setPageMeta({
+  title: t('pages.journey.title'),
+  description: t('pages.journey.description'),
+})
+</script>

frontend/app/pages/projets/[slug].vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="min-h-screen p-8">
+    <h1 class="text-3xl font-narrative text-sky-text">{{ slug }}</h1>
+    <p class="mt-4 text-sky-text/70">{{ $t('pages.projects.description') }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute()
+const slug = computed(() => route.params.slug as string)
+
+const { setPageMeta } = useSeo()
+const { t } = useI18n()
+
+setPageMeta({
+  title: slug.value,
+  description: t('pages.projects.description'),
+})
+</script>

frontend/app/pages/projets/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="min-h-screen p-8">
+    <h1 class="text-3xl font-narrative text-sky-text">{{ $t('pages.projects.title') }}</h1>
+    <p class="mt-4 text-sky-text/70">{{ $t('pages.projects.description') }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { setPageMeta } = useSeo()
+const { t } = useI18n()
+
+setPageMeta({
+  title: t('pages.projects.title'),
+  description: t('pages.projects.description'),
+})
+</script>

frontend/app/pages/resume.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="min-h-screen p-8">
+    <h1 class="text-3xl font-narrative text-sky-text">{{ $t('pages.resume.title') }}</h1>
+    <p class="mt-4 text-sky-text/70">{{ $t('pages.resume.description') }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'minimal',
+})
+
+const { setPageMeta } = useSeo()
+const { t } = useI18n()
+
+setPageMeta({
+  title: t('pages.resume.title'),
+  description: t('pages.resume.description'),
+})
+</script>

frontend/app/pages/temoignages.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="min-h-screen p-8">
+    <h1 class="text-3xl font-narrative text-sky-text">{{ $t('pages.testimonials.title') }}</h1>
+    <p class="mt-4 text-sky-text/70">{{ $t('pages.testimonials.description') }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { setPageMeta } = useSeo()
+const { t } = useI18n()
+
+setPageMeta({
+  title: t('pages.testimonials.title'),
+  description: t('pages.testimonials.description'),
+})
+</script>