🎮 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/assets/css/transitions.css

@@ -37,6 +37,44 @@
   transform: translateY(-8px);
 }
 
+/* Landing page animations */
+@keyframes fadeSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-slide-up {
+  opacity: 0;
+  animation: fadeSlideUp 0.6s ease-out forwards;
+}
+
+.animate-delay-100 { animation-delay: 0.1s; }
+.animate-delay-200 { animation-delay: 0.2s; }
+.animate-delay-300 { animation-delay: 0.3s; }
+.animate-delay-400 { animation-delay: 0.4s; }
+
+/* Hero selector transition */
+.hero-enter-active,
+.hero-leave-active {
+  transition: opacity 0.4s ease, transform 0.4s ease;
+}
+
+.hero-enter-from {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.hero-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
 /* Respect de prefers-reduced-motion */
 @media (prefers-reduced-motion: reduce) {
   .page-enter-active,
@@ -53,8 +91,21 @@
   .layout-enter-from,
   .layout-leave-to,
   .slide-down-enter-from,
-  .slide-down-leave-to {
+  .slide-down-leave-to,
+  .hero-enter-from,
+  .hero-leave-to {
     opacity: 1;
     transform: none;
   }
+
+  .animate-fade-slide-up {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+
+  .hero-enter-active,
+  .hero-leave-active {
+    transition: none;
+  }
 }

frontend/app/components/feature/HeroSelector.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="hero-selector">
+    <h2 class="text-2xl md:text-3xl font-narrative text-sky-text text-center mb-8">
+      {{ $t('hero.question') }}
+    </h2>
+
+    <div
+      role="radiogroup"
+      :aria-label="$t('hero.select_label')"
+      class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-3xl mx-auto"
+      @keydown="handleKeydown"
+    >
+      <button
+        v-for="(hero, index) in heroes"
+        :key="hero.id"
+        :ref="el => { if (el) cardRefs[index] = el as HTMLElement }"
+        role="radio"
+        :aria-checked="modelValue === hero.id"
+        :tabindex="modelValue === hero.id || (!modelValue && index === 0) ? 0 : -1"
+        :class="[
+          'p-6 rounded-xl border-2 transition-all duration-200 text-left',
+          'focus:outline-none focus:ring-2 focus:ring-sky-accent focus:ring-offset-2 focus:ring-offset-sky-dark',
+          modelValue === hero.id
+            ? 'border-sky-accent bg-sky-accent/5 scale-105'
+            : 'border-sky-text/20 hover:border-sky-text/40',
+        ]"
+        @click="selectHero(hero.id)"
+      >
+        <div class="text-4xl mb-4">{{ hero.icon }}</div>
+        <h3 class="text-xl font-ui font-semibold text-sky-text mb-2">
+          {{ $t(hero.nameKey) }}
+        </h3>
+        <p class="text-sky-text/70 font-narrative text-sm">
+          {{ $t(hero.descriptionKey) }}
+        </p>
+      </button>
+    </div>
+
+    <div class="flex justify-center gap-4 mt-8">
+      <button
+        class="px-6 py-2 text-sky-text/70 hover:text-sky-text font-ui transition-colors"
+        @click="$emit('back')"
+      >
+        {{ $t('common.back') }}
+      </button>
+      <button
+        :disabled="!modelValue"
+        :class="[
+          'px-8 py-3 rounded-lg font-ui font-semibold transition-all',
+          modelValue
+            ? 'bg-sky-accent text-sky-dark hover:opacity-90'
+            : 'bg-sky-text/20 text-sky-text/50 cursor-not-allowed',
+        ]"
+        @click="confirmSelection"
+      >
+        {{ $t('common.continue') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+export type HeroType = 'recruteur' | 'client' | 'dev'
+
+interface Hero {
+  id: HeroType
+  nameKey: string
+  descriptionKey: string
+  icon: string
+}
+
+const props = defineProps<{
+  modelValue: HeroType | null
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: HeroType]
+  'confirm': []
+  'back': []
+}>()
+
+const cardRefs = ref<HTMLElement[]>([])
+
+const heroes: Hero[] = [
+  { id: 'recruteur', nameKey: 'hero.recruteur.name', descriptionKey: 'hero.recruteur.description', icon: '👔' },
+  { id: 'client', nameKey: 'hero.client.name', descriptionKey: 'hero.client.description', icon: '💼' },
+  { id: 'dev', nameKey: 'hero.dev.name', descriptionKey: 'hero.dev.description', icon: '💻' },
+]
+
+const selectHero = (id: HeroType) => {
+  emit('update:modelValue', id)
+}
+
+const confirmSelection = () => {
+  if (props.modelValue) {
+    emit('confirm')
+  }
+}
+
+const handleKeydown = (e: KeyboardEvent) => {
+  const currentIndex = heroes.findIndex(h => h.id === props.modelValue)
+  let newIndex = currentIndex
+
+  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+    e.preventDefault()
+    newIndex = (currentIndex + 1) % heroes.length
+  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+    e.preventDefault()
+    newIndex = (currentIndex - 1 + heroes.length) % heroes.length
+  } else if (e.key === 'Enter') {
+    confirmSelection()
+    return
+  }
+
+  if (newIndex !== currentIndex) {
+    emit('update:modelValue', heroes[newIndex].id)
+    nextTick(() => cardRefs.value[newIndex]?.focus())
+  }
+}
+</script>

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>