# Story 2.3: Page d'Accueil avec Accroche

## Status

Ready for Dev

## Story

**As a** visiteur,
**I want** voir une page d'accueil avec une accroche claire et engageante,
**so that** je comprends immédiatement qui est le développeur et ce qu'il propose.

## Acceptance Criteria

1. La page d'accueil affiche une section "hero" avec : nom/prénom, titre (développeur web), et une phrase d'accroche
2. Un bouton secondaire CTA invite à découvrir les projets
3. Le design est aéré et la typographie met en valeur l'accroche
4. La page inclut la navbar et le footer
5. Le contenu est centré et responsive
6. Les animations sont subtiles (fade-in au chargement)

## Tasks / Subtasks

- [] **Task 1 : Créer la page home.php** (AC: 4)
  - [] Créer `pages/home.php` (implémenté dans index.php, migration avec routeur)
  - [] Inclure header, navbar et footer
  - [ ] Configurer le routeur pour servir cette page sur `/` (story 3.2)

- [] **Task 2 : Créer la section Hero** (AC: 1, 3)
  - [] Ajouter le nom/prénom du développeur
  - [] Ajouter le titre "Développeur Web Full-Stack"
  - [] Ajouter une phrase d'accroche percutante
  - [] Centrer verticalement et horizontalement
  - [] Appliquer la typographie (text-display)

- [] **Task 3 : Ajouter les CTA** (AC: 2)
  - [] Bouton principal "Découvrir mes projets" (btn-primary)
  - [] Bouton secondaire "En savoir plus" (btn-secondary) optionnel
  - [] Liens vers /projets et /a-propos

- [] **Task 4 : Rendre responsive** (AC: 5)
  - [] Mobile : texte plus petit, padding réduit
  - [] Desktop : taille maximale, centré

- [] **Task 5 : Ajouter les animations** (AC: 6)
  - [] Fade-in sur le titre (animate-fade-in)
  - [] Fade-in décalé sur le sous-titre (animation-delay-100)
  - [] Fade-in décalé sur les boutons (animation-delay-200)

## Dev Notes

### Structure pages/home.php

```php
<?php
/**
 * Page d'accueil
 */

$pageTitle = 'Accueil';
$pageDescription = 'Portfolio de développeur web full-stack. Découvrez mes projets, compétences et parcours.';
$currentPage = 'home';

include_template('header', compact('pageTitle', 'pageDescription'));
include_template('navbar', compact('currentPage'));
?>

<main>
    <!-- Hero Section -->
    <section class="min-h-[calc(100vh-5rem)] flex items-center justify-center">
        <div class="container-content text-center py-20">
            <!-- Nom -->
            <p class="text-primary font-medium mb-4 animate-fade-in">
                Bonjour, je suis
            </p>

            <!-- Titre principal -->
            <h1 class="text-display text-text-primary mb-6 animate-fade-in animation-delay-100">
                Prénom <span class="text-primary">NOM</span>
            </h1>

            <!-- Sous-titre -->
            <p class="text-heading text-text-secondary mb-6 animate-fade-in animation-delay-200">
                Développeur Web Full-Stack
            </p>

            <!-- Accroche -->
            <p class="text-xl text-text-secondary max-w-2xl mx-auto mb-10 animate-fade-in animation-delay-300">
                Je crée des expériences web modernes, performantes et accessibles.
                <br>Chaque projet est une opportunité de montrer plutôt que de dire.
            </p>

            <!-- CTA -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in animation-delay-300">
                <a href="/projets" class="btn-primary">
                    Découvrir mes projets
                </a>
                <a href="/a-propos" class="btn-secondary">
                    En savoir plus
                </a>
            </div>
        </div>
    </section>
</main>

<?php include_template('footer'); ?>
```

### Mise à jour du Router (index.php)

```php
$router
    ->add('/', 'pages/home.php')
    // ... autres routes
```

### Responsive

| Breakpoint | Adaptations |
|------------|-------------|
| Mobile | text-3xl pour H1, padding réduit |
| Desktop | text-display (2.5rem), max-w-2xl pour l'accroche |

### Animations

Les classes sont déjà définies dans input.css :
- `.animate-fade-in` : opacity 0 → 1
- `.animate-fade-in-up` : opacity + translateY
- `.animation-delay-100/200/300` : délais

## Testing

- [ ] Le nom et titre sont visibles et centrés
- [ ] L'accroche est lisible et bien espacée
- [ ] Les boutons CTA sont cliquables
- [ ] Les animations se jouent au chargement
- [ ] La page est responsive (mobile/desktop)
- [ ] La navbar et le footer sont présents

## Change Log

| Date | Version | Description | Author |
|------|---------|-------------|--------|
| 2026-01-22 | 0.1 | Création initiale | Sarah (PO) |

## Dev Agent Record

### Agent Model Used

Claude Opus 4.5 (claude-opus-4-5-20251101)

### Debug Log References

_Aucun_

### Completion Notes List

- Hero section créée dans index.php (migration vers pages/home.php avec routeur story 3.2)
- Typographie responsive : text-4xl → text-5xl → text-display
- Animations fade-in avec délais progressifs (100, 200, 300ms)
- CTA : btn-primary (projets) + btn-secondary (à propos)
- Centrage vertical avec min-h-[calc(100vh-5rem)] et flex
- Header, navbar, footer inclus via compact()

### File List

| Fichier | Action |
|---------|--------|
| `index.php` | Modifié (Hero section) |
| `assets/css/output.css` | Regénéré |

## QA Results

_À compléter par le QA agent_