✨ 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:
40
frontend/app/error.vue
Normal file
40
frontend/app/error.vue
Normal 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>
|
||||
Reference in New Issue
Block a user