🎮 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/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>