skycel
9fd66def12
Implements useProgressionStore with conditional localStorage persistence (only after RGPD consent), immersive ConsentBanner with narrator style, WelcomeBack component for returning visitors, and connects progress bar in header to store. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
68 lines
2.2 KiB
Vue
68 lines
2.2 KiB
Vue
<template>
|
|
<div class="min-h-screen flex flex-col items-center justify-center px-4 py-16">
|
|
<Transition name="hero" mode="out-in">
|
|
<!-- État initial : CTA -->
|
|
<div v-if="!showHeroSelector" key="landing" class="text-center max-w-2xl">
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-narrative text-sky-text animate-fade-slide-up">
|
|
{{ $t('landing.title') }}
|
|
</h1>
|
|
<p class="mt-4 text-xl md:text-2xl font-ui text-sky-text/70 animate-fade-slide-up animate-delay-200">
|
|
{{ $t('landing.subtitle') }}
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 mt-8 justify-center animate-fade-slide-up animate-delay-400">
|
|
<button
|
|
class="px-8 py-4 bg-sky-accent text-sky-dark font-ui font-semibold text-lg rounded-lg hover:opacity-90 transition-opacity"
|
|
@click="showHeroSelector = true"
|
|
>
|
|
{{ $t('landing.cta_adventure') }}
|
|
</button>
|
|
<NuxtLink
|
|
:to="localePath('/resume')"
|
|
class="px-8 py-4 border border-sky-text/30 text-sky-text font-ui text-lg rounded-lg hover:border-sky-accent hover:text-sky-accent transition-colors text-center"
|
|
>
|
|
{{ $t('landing.cta_express') }}
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- État sélection héros -->
|
|
<div v-else key="hero-select" class="w-full max-w-4xl">
|
|
<FeatureHeroSelector
|
|
v-model="selectedHero"
|
|
@confirm="onHeroConfirm"
|
|
@back="showHeroSelector = false"
|
|
/>
|
|
</div>
|
|
</Transition>
|
|
|
|
<ClientOnly>
|
|
<LayoutWelcomeBack />
|
|
</ClientOnly>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { HeroType } from '~/components/feature/HeroSelector.vue'
|
|
import { useProgressionStore } from '~/stores/progression'
|
|
|
|
const { setPageMeta } = useSeo()
|
|
const { t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
const store = useProgressionStore()
|
|
|
|
const showHeroSelector = ref(false)
|
|
const selectedHero = ref<HeroType | null>(null)
|
|
|
|
setPageMeta({
|
|
title: t('meta.title'),
|
|
description: t('meta.description'),
|
|
})
|
|
|
|
function onHeroConfirm() {
|
|
if (selectedHero.value) {
|
|
store.setHero(selectedHero.value)
|
|
}
|
|
navigateTo(localePath('/projets'))
|
|
}
|
|
</script>
|