🎮 Add landing page with hero selection (Story 1.5)

Landing page with animated tagline, dual CTA (adventure/express), and
HeroSelector component (3 heroes: Recruiter, Client, Developer) with full
keyboard accessibility (radiogroup, arrow nav, Enter confirm). Staggered
CSS animations respecting prefers-reduced-motion. Bilingual FR/EN.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/app/pages/index.vue

@@ -1,31 +1,60 @@
 <template>
-  <div class="min-h-screen flex flex-col items-center justify-center gap-6 px-4">
-    <h1 class="text-4xl md:text-5xl font-narrative text-sky-text text-center">{{ $t('landing.title') }}</h1>
-    <p class="text-xl font-ui text-sky-text/70">{{ $t('landing.subtitle') }}</p>
-    <div class="flex gap-4 mt-4">
-      <NuxtLink
-        :to="localePath('/projets')"
-        class="px-6 py-3 bg-sky-accent text-sky-dark font-ui font-semibold rounded-lg hover:opacity-90 transition-opacity"
-      >
-        {{ $t('landing.cta_adventure') }}
-      </NuxtLink>
-      <NuxtLink
-        :to="localePath('/resume')"
-        class="px-6 py-3 border border-sky-text/30 text-sky-text font-ui rounded-lg hover:border-sky-accent hover:text-sky-accent transition-colors"
-      >
-        {{ $t('landing.cta_express') }}
-      </NuxtLink>
-    </div>
+  <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>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { HeroType } from '~/components/feature/HeroSelector.vue'
+
 const { setPageMeta } = useSeo()
 const { t } = useI18n()
 const localePath = useLocalePath()
 
+const showHeroSelector = ref(false)
+const selectedHero = ref<HeroType | null>(null)
+
 setPageMeta({
   title: t('meta.title'),
   description: t('meta.description'),
 })
+
+function onHeroConfirm() {
+  // Story 1.6 ajoutera : store.setHero(selectedHero.value)
+  // Pour l'instant, naviguer vers la page projets
+  navigateTo(localePath('/projets'))
+}
 </script>