skycel
7e87a341a2
Epic 4: Chemins Narratifs, Challenge & Contact Stories implementees: - 4.1: Composant ChoiceCards pour choix narratifs binaires - 4.2: Sequence d'intro narrative avec Le Bug - 4.3: Chemins narratifs differencies avec useNarrativePath - 4.4: Table easter_eggs et systeme de detection (API + composable) - 4.5: Easter eggs UI (popup, notification, collection) - 4.6: Page challenge avec puzzle de code - 4.7: Page revelation "Monde de Code" - 4.8: Page contact avec formulaire et stats Fichiers crees: - Frontend: ChoiceCards, IntroSequence, ZoneEndChoice, EasterEggPopup, CodePuzzle, ChallengeSuccess, CodeWorld, et pages intro/challenge/revelation - API: EasterEggController, Model, Migration, Seeder 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('/intro'))
|
|
}
|
|
</script>
|