121 lines
3.2 KiB
Markdown
121 lines
3.2 KiB
Markdown
# Story 2.2: Bouton CTA "Me Contacter" dans la Navbar
|
|
|
|
## Status
|
|
|
|
Ready for Dev
|
|
|
|
## Story
|
|
|
|
**As a** visiteur,
|
|
**I want** voir un bouton "Me contacter" visible en permanence,
|
|
**so that** je puisse initier un contact à tout moment sans chercher.
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. Le bouton "Me contacter" est stylé différemment des autres liens (bouton rempli, couleur d'accent)
|
|
2. Le bouton est visible sur desktop ET sur mobile (même dans le menu hamburger)
|
|
3. Le bouton redirige vers la page contact.php
|
|
4. Le bouton a un état hover/focus visible
|
|
5. Le bouton respecte l'accessibilité (focusable, contraste suffisant)
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [] **Task 1 : Styler le bouton CTA dans la navbar** (AC: 1)
|
|
- [] Appliquer la classe `btn-primary` au lien Contact
|
|
- [] Ajouter un espacement distinct (margin-left)
|
|
- [] Vérifier le contraste des couleurs
|
|
|
|
- [] **Task 2 : Assurer la visibilité mobile** (AC: 2)
|
|
- [] Vérifier que le CTA est présent dans le menu mobile
|
|
- [] Styler le CTA différemment dans le menu mobile (full-width ou mis en avant)
|
|
|
|
- [] **Task 3 : Configurer le lien** (AC: 3)
|
|
- [] Le href pointe vers `/contact`
|
|
- [] Tester la navigation
|
|
|
|
- [] **Task 4 : Implémenter les états interactifs** (AC: 4, 5)
|
|
- [] État hover (couleur plus claire)
|
|
- [] État focus visible (ring)
|
|
- [] État active (couleur plus foncée)
|
|
|
|
## Dev Notes
|
|
|
|
### Modification navbar.php
|
|
|
|
Le bouton CTA est déjà prévu dans la Story 2.1. Vérifier que :
|
|
|
|
```php
|
|
<?php if (!empty($link['isCta'])): ?>
|
|
<li class="ml-4">
|
|
<a href="<?= $link['url'] ?>" class="btn-primary text-sm">
|
|
<?= $link['label'] ?>
|
|
</a>
|
|
</li>
|
|
<?php endif; ?>
|
|
```
|
|
|
|
### Style du CTA dans le menu mobile
|
|
|
|
```php
|
|
<!-- Dans le menu mobile -->
|
|
<?php if (!empty($link['isCta'])): ?>
|
|
<li class="pt-2 border-t border-border mt-2">
|
|
<a href="<?= $link['url'] ?>" class="btn-primary w-full justify-center">
|
|
<?= $link['label'] ?>
|
|
</a>
|
|
</li>
|
|
<?php else: ?>
|
|
<!-- ... liens normaux ... -->
|
|
<?php endif; ?>
|
|
```
|
|
|
|
### Vérification Contraste
|
|
|
|
| Élément | Couleurs | Ratio | Conformité |
|
|
|---------|----------|-------|------------|
|
|
| Texte bouton | `#17171F` sur `#FA784F` | 5.2:1 | AA |
|
|
|
|
## Testing
|
|
|
|
- [ ] Le bouton est orange (#FA784F) et se distingue des autres liens
|
|
- [ ] Le texte est lisible (fond sombre sur orange)
|
|
- [ ] Le hover change la couleur vers #FB9570
|
|
- [ ] Le focus affiche un ring visible
|
|
- [ ] Le bouton est présent et stylé dans le menu mobile
|
|
- [ ] La navigation vers /contact fonctionne
|
|
|
|
## 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
|
|
|
|
- CTA desktop déjà implémenté en story 2.1 (btn-primary text-sm, ml-4)
|
|
- Menu mobile amélioré : CTA full-width avec séparateur visuel
|
|
- États interactifs via classe btn-primary (hover, focus, active)
|
|
- Lien pointe vers /contact
|
|
- Contraste vérifié (5.2:1 AA)
|
|
|
|
### File List
|
|
|
|
| Fichier | Action |
|
|
|---------|--------|
|
|
| `templates/navbar.php` | Modifié (CTA mobile) |
|
|
| `assets/css/output.css` | Regénéré |
|
|
|
|
## QA Results
|
|
|
|
_À compléter par le QA agent_
|