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>
This commit is contained in:
2026-02-05 18:35:31 +01:00
parent 262242c7df
commit ca828d86b4
22 changed files with 682 additions and 88 deletions

View File

@@ -0,0 +1,11 @@
<template>
<div class="min-h-screen bg-sky-dark text-sky-text flex flex-col">
<LayoutAppHeader />
<main class="flex-1">
<slot />
</main>
<LayoutAppFooter />
</div>
</template>

View File

@@ -0,0 +1,27 @@
<template>
<div class="min-h-screen bg-sky-dark text-sky-text flex flex-col">
<header class="p-4 flex justify-between items-center">
<NuxtLink :to="localePath('/')" class="text-sky-accent font-narrative font-bold">
Skycel
</NuxtLink>
<div class="flex items-center gap-4">
<NuxtLink :to="localePath('/')" class="text-sky-text/70 hover:text-sky-accent text-sm font-ui transition-colors">
{{ $t('common.back_to_adventure') }}
</NuxtLink>
<UiLanguageSwitcher />
</div>
</header>
<main class="flex-1">
<slot />
</main>
<footer class="p-4 text-center text-sky-text/50 text-sm font-ui">
{{ $t('footer.copyright', { year: new Date().getFullYear() }) }}
</footer>
</div>
</template>
<script setup lang="ts">
const localePath = useLocalePath()
</script>