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>
81 lines
2.4 KiB
Vue
81 lines
2.4 KiB
Vue
<template>
|
|
<div class="min-h-screen">
|
|
<!-- Hero section -->
|
|
<section class="relative overflow-hidden bg-gradient-to-b from-sky-dark to-sky-darker py-16">
|
|
<div class="container mx-auto px-4">
|
|
<h1 class="text-center text-4xl font-narrative font-bold text-white md:text-5xl">
|
|
{{ $t('journey.title') }}
|
|
</h1>
|
|
<p class="mx-auto mt-4 max-w-2xl text-center text-lg text-gray-400">
|
|
{{ $t('journey.page_description') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Decorative elements -->
|
|
<div class="absolute -left-20 top-20 h-40 w-40 rounded-full bg-sky-500/5 blur-3xl" />
|
|
<div class="absolute -right-20 bottom-10 h-60 w-60 rounded-full bg-emerald-500/5 blur-3xl" />
|
|
</section>
|
|
|
|
<!-- Timeline section -->
|
|
<section class="container mx-auto px-4 py-16">
|
|
<div class="relative">
|
|
<!-- Ligne centrale verticale -->
|
|
<div class="absolute bottom-0 left-2 top-0 w-0.5 bg-gradient-to-b from-sky-500/50 via-sky-dark to-sky-500/50 md:left-1/2 md:-translate-x-1/2" />
|
|
|
|
<!-- Étapes -->
|
|
<div class="space-y-12">
|
|
<TimelineItem
|
|
v-for="(milestone, index) in milestones"
|
|
:key="index"
|
|
:milestone="milestone"
|
|
:index="index"
|
|
:is-left="index % 2 === 0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Message de fin -->
|
|
<section class="container mx-auto px-4 pb-16">
|
|
<div class="mx-auto max-w-2xl rounded-xl bg-gradient-to-r from-sky-500/10 to-emerald-500/10 p-8 text-center">
|
|
<p class="font-narrative text-xl italic text-gray-300">
|
|
{{ $t('journey.end_message') }}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Choice for next zone -->
|
|
<FeatureZoneEndChoice />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Milestone } from '~/components/feature/TimelineItem.vue'
|
|
|
|
definePageMeta({
|
|
layout: 'adventure',
|
|
})
|
|
|
|
const { setPageMeta } = useSeo()
|
|
const { t, tm } = useI18n()
|
|
const progressStore = useProgressionStore()
|
|
|
|
setPageMeta({
|
|
title: t('journey.page_title'),
|
|
description: t('journey.page_description'),
|
|
})
|
|
|
|
onMounted(() => {
|
|
progressStore.visitSection('journey')
|
|
})
|
|
|
|
// Charger les milestones depuis i18n
|
|
const milestones = computed<Milestone[]>(() => {
|
|
const data = tm('journey.milestones')
|
|
if (Array.isArray(data)) {
|
|
return data as Milestone[]
|
|
}
|
|
return []
|
|
})
|
|
</script>
|