Portfolio-Codex/docs/stories/2.4.sections-navigation-rapide.md

# Story 2.4: Sections de Navigation Rapide sur l'Accueil

## Status

Ready for Dev

## Story

**As a** visiteur,
**I want** voir un aperçu des sections principales sur la page d'accueil,
**so that** je navigue rapidement vers ce qui m'intéresse.

## Acceptance Criteria

1. Sous le hero, des cartes/blocs présentent les sections : Projets, Compétences, Me Découvrir
2. Chaque bloc a un titre, une courte description, et un lien vers la page correspondante
3. Les blocs sont disposés en grille responsive (1 colonne mobile, 3 colonnes desktop)
4. Les blocs ont un effet hover subtil
5. L'ensemble reste cohérent avec le design global

## Tasks / Subtasks

- [] **Task 1 : Ajouter la section sous le hero** (AC: 1)
  - [] Créer une section avec titre "Explorez mon portfolio"
  - [] Ajouter les 3 cartes de navigation

- [] **Task 2 : Créer les cartes de navigation** (AC: 2)
  - [] Carte Projets : icône, titre, description, lien
  - [] Carte Compétences : icône, titre, description, lien
  - [] Carte Me Découvrir : icône, titre, description, lien

- [] **Task 3 : Implémenter la grille responsive** (AC: 3)
  - [] 1 colonne sur mobile (grid-cols-1)
  - [] 3 colonnes sur desktop (md:grid-cols-3)
  - [] Gap approprié entre les cartes (gap-6 lg:gap-8)

- [] **Task 4 : Ajouter les effets hover** (AC: 4)
  - [] Utiliser la classe card-interactive
  - [] Élévation + ombre au hover

- [] **Task 5 : Intégrer les icônes** (AC: 5)
  - [] Utiliser Heroicons (SVG inline)
  - [] Taille cohérente (w-8 h-8 dans conteneur w-16 h-16)
  - [] Couleur primary

## Dev Notes

### Code à ajouter dans pages/home.php

```php
<!-- Après la section Hero -->

<!-- Section Navigation Rapide -->
<section class="section bg-surface">
    <div class="container-content">
        <div class="section-header">
            <h2 class="section-title">Explorez mon portfolio</h2>
            <p class="section-subtitle">
                Découvrez mes réalisations, compétences et parcours
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
            <!-- Carte Projets -->
            <a href="/projets" class="card-interactive group">
                <div class="card-body text-center">
                    <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                        <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
                        </svg>
                    </div>
                    <h3 class="text-subheading mb-2 group-hover:text-primary transition-colors">Projets</h3>
                    <p class="text-text-secondary">
                        Découvrez mes réalisations web avec démonstrations et explications techniques.
                    </p>
                </div>
            </a>

            <!-- Carte Compétences -->
            <a href="/competences" class="card-interactive group">
                <div class="card-body text-center">
                    <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                        <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
                        </svg>
                    </div>
                    <h3 class="text-subheading mb-2 group-hover:text-primary transition-colors">Compétences</h3>
                    <p class="text-text-secondary">
                        Technologies maîtrisées et outils utilisés, avec preuves à l'appui.
                    </p>
                </div>
            </a>

            <!-- Carte Me Découvrir -->
            <a href="/a-propos" class="card-interactive group">
                <div class="card-body text-center">
                    <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
                        <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                    </div>
                    <h3 class="text-subheading mb-2 group-hover:text-primary transition-colors">Me Découvrir</h3>
                    <p class="text-text-secondary">
                        Mon parcours, mes motivations et ce qui me passionne au-delà du code.
                    </p>
                </div>
            </a>
        </div>
    </div>
</section>
```

### Icônes Heroicons Utilisées

| Carte | Icône | Description |
|-------|-------|-------------|
| Projets | squares-2x2 | Grille de carrés |
| Compétences | code-bracket | Chevrons de code |
| Me Découvrir | user | Silhouette utilisateur |

### Responsive

| Breakpoint | Colonnes |
|------------|----------|
| Mobile (< 768px) | 1 colonne |
| Tablet (≥ 768px) | 3 colonnes |
| Desktop | 3 colonnes avec gap plus large |

## Testing

- [ ] Les 3 cartes sont visibles sous le hero
- [ ] Chaque carte a une icône, titre et description
- [ ] Les liens redirigent vers les bonnes pages
- [ ] L'effet hover fonctionne (élévation + ombre)
- [ ] Mobile : cartes empilées verticalement
- [ ] Desktop : 3 cartes côte à côte

## 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

- Section navigation rapide ajoutée sous le hero dans index.php
- 3 cartes : Projets, Compétences, Me Découvrir
- Grille responsive : grid-cols-1 mobile, md:grid-cols-3 tablet+
- Icônes Heroicons SVG inline (squares-2x2, code-bracket, user)
- Effets hover via card-interactive + group-hover sur titres
- Conteneurs d'icônes avec bg-primary/10 → bg-primary/20 au hover

### File List

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

## QA Results

_À compléter par le QA agent_