🎉 Init monorepo Nuxt 4 + Laravel 12 (Story 1.1)

Setup complet de l'infrastructure projet : - Frontend Nuxt 4 (SSR, TypeScript, i18n, Pinia, TailwindCSS) - Backend Laravel 12 API-only avec middleware X-API-Key et CORS - Design tokens (sky-dark, sky-accent, sky-text) et polices (Merriweather, Inter) - Documentation planning et implementation artifacts Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-05 02:08:56 +01:00
commit ec1ae92799
116 changed files with 55669 additions and 0 deletions
--- a/docs/implementation-artifacts/1-5-landing-page-choix-heros.md
+++ b/docs/implementation-artifacts/1-5-landing-page-choix-heros.md
@@ -0,0 +1,359 @@
+# Story 1.5: Landing page et choix du héros
+
+Status: ready-for-dev
+
+## Story
+
+As a visiteur,
+I want choisir entre l'aventure et le mode express, puis sélectionner mon héros,
+so that mon expérience est adaptée à mon profil et mon temps disponible.
+
+## Acceptance Criteria
+
+1. **Given** le visiteur arrive sur la landing page (`/`) **When** la page se charge **Then** deux CTA distincts sont visibles : "Partir à l'aventure" et "Mode express"
+2. **And** un texte d'accroche intrigant bilingue est affiché
+3. **And** une animation d'entrée subtile est présente (respectant `prefers-reduced-motion`)
+4. **And** le design est responsive (mobile + desktop)
+5. **And** au clic sur "Partir à l'aventure", le composant `HeroSelector` s'affiche avec 3 cards illustrées (Recruteur, Client, Développeur) avec nom et description courte
+6. **And** le héros sélectionné est stocké dans le store Pinia `useProgressionStore` (champ `hero`)
+7. **And** au clic sur "Mode express", le visiteur est redirigé vers la page résumé
+8. **And** le `HeroSelector` est accessible au clavier (`role="radiogroup"`, flèches pour naviguer, Enter pour sélectionner)
+
+## Tasks / Subtasks
+
+- [ ] **Task 1: Structure de la landing page** (AC: #1, #2, #4)
+  - [ ] Implémenter `frontend/app/pages/index.vue`
+  - [ ] Section hero avec texte d'accroche bilingue (`$t('landing.title')`, `$t('landing.subtitle')`)
+  - [ ] Deux boutons CTA côte à côte (desktop) ou empilés (mobile)
+  - [ ] Utiliser les couleurs du design system (sky-accent pour CTA principal)
+  - [ ] Layout responsive : centré verticalement, max-width pour le contenu
+
+- [ ] **Task 2: Animations d'entrée** (AC: #3)
+  - [ ] Animation fade-in + slide-up pour le texte d'accroche
+  - [ ] Animation staggered pour les CTA (apparition décalée)
+  - [ ] Utiliser CSS animations ou GSAP (lazy-loaded)
+  - [ ] Media query `prefers-reduced-motion` : animations désactivées
+  - [ ] Durée totale : ~1s max
+
+- [ ] **Task 3: Composant HeroSelector** (AC: #5, #8)
+  - [ ] Créer `frontend/app/components/feature/HeroSelector.vue`
+  - [ ] Props : `modelValue` (héros sélectionné), emit `update:modelValue`
+  - [ ] Afficher 3 cards : Recruteur, Client, Développeur
+  - [ ] Chaque card : illustration/icône, nom traduit, description courte traduite
+  - [ ] État visuel : card sélectionnée avec bordure accent
+  - [ ] Accessibilité : `role="radiogroup"`, `role="radio"` sur chaque card
+  - [ ] Navigation clavier : flèches gauche/droite, Enter pour confirmer
+  - [ ] Focus visible sur la card active
+
+- [ ] **Task 4: Données des héros** (AC: #5)
+  - [ ] Définir les 3 héros dans un fichier de config ou composable
+  - [ ] Structure : `{ id: 'recruteur' | 'client' | 'dev', nameKey, descriptionKey, icon }`
+  - [ ] Traductions dans `i18n/fr.json` et `i18n/en.json` :
+    - `hero.recruteur.name`: "Recruteur"
+    - `hero.recruteur.description`: "Je cherche un talent pour mon équipe"
+    - `hero.client.name`: "Client"
+    - `hero.client.description`: "J'ai un projet à réaliser"
+    - `hero.dev.name`: "Développeur"
+    - `hero.dev.description`: "Je suis curieux de voir ton travail"
+
+- [ ] **Task 5: Intégration avec le store Pinia** (AC: #6)
+  - [ ] Importer `useProgressionStore` (créé en Story 1.6, mais interface définie ici)
+  - [ ] Au choix du héros : `store.setHero(heroId)`
+  - [ ] Après sélection : naviguer vers la première zone ou afficher l'intro narrative
+  - [ ] Si store non disponible (Story 1.6 pas encore faite) : utiliser un state local temporaire
+
+- [ ] **Task 6: Flow de sélection** (AC: #5, #6)
+  - [ ] État initial : CTA visibles, HeroSelector masqué
+  - [ ] Clic "Partir à l'aventure" : transition vers HeroSelector (fade/slide)
+  - [ ] Clic sur un héros : sélection visuelle
+  - [ ] Bouton "Confirmer" ou double-clic : valider et naviguer
+  - [ ] Bouton "Retour" pour revenir aux CTA
+  - [ ] Animation de transition fluide entre les états
+
+- [ ] **Task 7: Redirection Mode Express** (AC: #7)
+  - [ ] Clic "Mode express" : `navigateTo(localePath('/resume'))`
+  - [ ] Pas de sélection de héros requise pour le mode express
+  - [ ] Le store peut rester sans héros défini (mode anonyme)
+
+- [ ] **Task 8: SEO et meta tags** (AC: #1)
+  - [ ] Utiliser `useSeo()` pour définir les meta tags de la landing
+  - [ ] Title : "Skycel - Portfolio interactif de Célian"
+  - [ ] Description : "Découvrez mon portfolio gamifié..."
+  - [ ] Open Graph image : image de preview attractive
+
+- [ ] **Task 9: Validation finale** (AC: tous)
+  - [ ] Page accessible en FR (`/`) et EN (`/en`)
+  - [ ] Textes traduits correctement
+  - [ ] CTA fonctionnels
+  - [ ] HeroSelector s'affiche et fonctionne
+  - [ ] Navigation clavier complète
+  - [ ] Animations fluides (et désactivées si reduced-motion)
+  - [ ] Responsive : mobile et desktop
+  - [ ] Redirection vers `/resume` fonctionne
+
+## Dev Notes
+
+### Structure de la landing page
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                         LANDING PAGE                            │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│                    [Logo ou titre animé]                        │
+│                                                                 │
+│              "Bienvenue dans mon univers"                       │
+│                   Développeur Full-Stack                        │
+│                                                                 │
+│     ┌─────────────────┐    ┌─────────────────┐                 │
+│     │  Partir à       │    │   Mode express  │                 │
+│     │  l'aventure     │    │   (30 secondes) │                 │
+│     └─────────────────┘    └─────────────────┘                 │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+
+                              ↓ Clic "Aventure"
+
+┌─────────────────────────────────────────────────────────────────┐
+│                       HERO SELECTOR                             │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                 │
+│                  "Qui êtes-vous, voyageur ?"                    │
+│                                                                 │
+│   ┌─────────┐    ┌─────────┐    ┌─────────┐                    │
+│   │  👔     │    │  💼     │    │  💻     │                    │
+│   │Recruteur│    │ Client  │    │   Dev   │                    │
+│   │ "Je..." │    │ "J'ai..." │   │"Je suis.."│                  │
+│   └─────────┘    └─────────┘    └─────────┘                    │
+│                                                                 │
+│              [Retour]              [Confirmer]                  │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### Composant HeroSelector
+
+```vue
+<!-- frontend/app/components/feature/HeroSelector.vue -->
+<template>
+  <div class="hero-selector">
+    <h2 class="text-2xl font-narrative 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"
+      @keydown="handleKeydown"
+    >
+      <button
+        v-for="(hero, index) in heroes"
+        :key="hero.id"
+        role="radio"
+        :aria-checked="modelValue === hero.id"
+        :tabindex="modelValue === hero.id || (!modelValue && index === 0) ? 0 : -1"
+        :class="[
+          'hero-card p-6 rounded-xl border-2 transition-all duration-200',
+          '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-dark-50'
+            : 'border-sky-text/20 hover:border-sky-text/40'
+        ]"
+        @click="selectHero(hero.id)"
+        @keydown.enter="confirmSelection"
+      >
+        <div class="text-4xl mb-4">{{ hero.icon }}</div>
+        <h3 class="text-xl font-ui font-semibold 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 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:bg-sky-accent-hover'
+            : 'bg-sky-text/20 text-sky-text/50 cursor-not-allowed'
+        ]"
+        @click="confirmSelection"
+      >
+        {{ $t('common.continue') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 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') {
+    newIndex = (currentIndex + 1) % heroes.length
+  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+    newIndex = (currentIndex - 1 + heroes.length) % heroes.length
+  }
+
+  if (newIndex !== currentIndex) {
+    emit('update:modelValue', heroes[newIndex].id)
+  }
+}
+</script>
+```
+
+### Traductions à ajouter
+
+```json
+// frontend/i18n/fr.json
+{
+  "landing": {
+    "title": "Bienvenue dans mon univers",
+    "subtitle": "Développeur Full-Stack passionné",
+    "cta_adventure": "Partir à l'aventure",
+    "cta_express": "Mode express (30s)"
+  },
+  "hero": {
+    "question": "Qui êtes-vous, voyageur ?",
+    "select_label": "Sélectionnez votre profil",
+    "recruteur": {
+      "name": "Recruteur",
+      "description": "Je cherche un talent pour rejoindre mon équipe"
+    },
+    "client": {
+      "name": "Client",
+      "description": "J'ai un projet à réaliser et je cherche le bon développeur"
+    },
+    "dev": {
+      "name": "Développeur",
+      "description": "Je suis curieux de découvrir ton travail et tes compétences"
+    }
+  }
+}
+```
+
+### Animations CSS
+
+```css
+/* Animations d'entrée pour la landing */
+@keyframes fadeSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-slide-up {
+  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; }
+
+/* Respect prefers-reduced-motion */
+@media (prefers-reduced-motion: reduce) {
+  .animate-fade-slide-up {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}
+```
+
+### Dépendances
+
+**Cette story DÉPEND de :**
+- Story 1.3 : Système i18n pour les traductions
+- Story 1.4 : Layout default, transitions de page, useSeo()
+
+**Cette story PRÉPARE pour :**
+- Story 1.6 : Le store Pinia stockera le héros sélectionné
+- Story 4.2 : L'intro narrative suivra la sélection du héros
+
+**Note :** Si Story 1.6 n'est pas encore implémentée, utiliser un state local (`ref`) comme placeholder.
+
+### References
+
+- [Source: docs/planning-artifacts/epics.md#Story-1.5]
+- [Source: docs/planning-artifacts/ux-design-specification.md#Hero-System]
+- [Source: docs/planning-artifacts/architecture.md#Store-Pinia]
+- [Source: docs/prd-gamification.md#FR1]
+
+### Technical Requirements
+
+| Requirement | Value | Source |
+|-------------|-------|--------|
+| Héros disponibles | Recruteur, Client, Dev | UX Design |
+| Accessibilité | WCAG AA, keyboard nav | NFR6 |
+| Animations | Respecter reduced-motion | NFR6 |
+| Responsive | Mobile + Desktop | NFR3 |
+
+## Dev Agent Record
+
+### Agent Model Used
+
+{{agent_model_name_version}}
+
+### Debug Log References
+
+### Completion Notes List
+
+### Change Log
+| Date | Change | Author |
+|------|--------|--------|
+| 2026-02-03 | Story créée avec contexte complet | SM Agent |
+
+### File List
+