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

40
frontend/app/error.vue Normal file
View File

@@ -0,0 +1,40 @@
<template>
<div class="min-h-screen bg-sky-dark text-sky-text flex flex-col items-center justify-center p-8">
<h1 class="text-6xl font-bold text-sky-accent mb-4">
{{ error?.statusCode || 500 }}
</h1>
<p class="text-xl font-narrative mb-8 text-center max-w-md">
{{ errorMessage }}
</p>
<button
class="px-6 py-3 bg-sky-accent text-sky-dark font-ui font-semibold rounded-lg hover:opacity-90 transition-opacity"
@click="handleError"
>
{{ $t('common.back_home') }}
</button>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
error: {
statusCode: number
message: string
}
}>()
const { t } = useI18n()
const errorMessage = computed(() => {
if (props.error?.statusCode === 404) {
return t('error.404')
}
return t('error.generic')
})
function handleError() {
clearError({ redirect: '/' })
}
</script>