🏠 Feature: Page d'accueil Hero + CTA mobile amélioré

Stories 2.2 & 2.3:
- Hero section avec nom, titre, accroche et CTA
- Typographie responsive (text-4xl → text-display)
- Animations fade-in avec délais progressifs
- CTA mobile full-width avec séparateur visuel
- Boutons "Découvrir mes projets" et "En savoir plus"

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

index.php

@@ -1,57 +1,54 @@
 <?php
-// index.php - Page Canary
+/**
+ * Page d'accueil
+ */
 
 require_once __DIR__ . '/includes/functions.php';
 
-include_template('header', [
+$pageTitle = 'Accueil';
-    'pageTitle' => 'Portfolio en construction',
+$pageDescription = 'Portfolio de développeur web full-stack. Découvrez mes projets, compétences et parcours.';
-    'pageDescription' => 'Mon portfolio de développeur web arrive bientôt. Restez connectés !'
+$currentPage = 'home';
-]);
 
-include_template('navbar', [
+include_template('header', compact('pageTitle', 'pageDescription'));
-    'currentPage' => 'home'
+include_template('navbar', compact('currentPage'));
-]);
 ?>
 
-<main class="min-h-screen flex items-center justify-center">
+<main>
+    <!-- Hero Section -->
+    <section class="min-h-[calc(100vh-5rem)] flex items-center justify-center">
         <div class="container-content text-center py-20">
-        <!-- Titre principal -->
+            <!-- Intro -->
-        <h1 class="text-display text-text-primary mb-4 animate-fade-in">
+            <p class="text-primary font-medium mb-4 animate-fade-in">
-            Portfolio <span class="text-primary">en construction</span>
+                Bonjour, je suis
+            </p>
+
+            <!-- Nom -->
+            <h1 class="text-4xl sm:text-5xl lg:text-display font-bold text-text-primary mb-6 animate-fade-in animation-delay-100">
+                Prénom <span class="text-primary">NOM</span>
             </h1>
 
-        <!-- Sous-titre -->
+            <!-- Titre -->
-        <p class="text-xl text-text-secondary mb-8 max-w-2xl mx-auto animate-fade-in animation-delay-100">
+            <p class="text-xl sm:text-2xl lg:text-heading text-text-secondary mb-6 animate-fade-in animation-delay-200">
-            Je prépare quelque chose de génial pour vous.
+                Développeur Web Full-Stack
-            <br>Revenez bientôt pour découvrir mes projets !
             </p>
 
-        <!-- Badge de test -->
+            <!-- Accroche -->
-        <div class="flex justify-center gap-4 mb-12 animate-fade-in animation-delay-200">
+            <p class="text-lg text-text-secondary max-w-2xl mx-auto mb-10 animate-fade-in animation-delay-300">
-            <span class="badge">PHP</span>
+                Je crée des expériences web modernes, performantes et accessibles.
-            <span class="badge">Tailwind CSS</span>
+                <br class="hidden sm:block">Chaque projet est une opportunité de montrer plutôt que de dire.
-            <span class="badge badge-primary">En cours</span>
-        </div>
-
-        <!-- Card de test -->
-        <div class="card max-w-md mx-auto animate-fade-in animation-delay-300">
-            <div class="card-body">
-                <h3 class="text-subheading mb-2">Infrastructure validée</h3>
-                <p class="text-text-secondary mb-4">
-                    PHP, Tailwind CSS et le serveur fonctionnent correctement.
             </p>
-                <div class="flex gap-4 justify-center">
-                    <span class="btn-primary">Bouton Primary</span>
-                    <span class="btn-secondary">Bouton Secondary</span>
-                </div>
-            </div>
-        </div>
 
-        <!-- Test responsive -->
+            <!-- CTA -->
-        <p class="text-text-muted text-sm mt-12">
+            <div class="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in animation-delay-300">
-            Testé sur mobile, tablette et desktop.
+                <a href="/projets" class="btn-primary">
-        </p>
+                    Découvrir mes projets
+                </a>
+                <a href="/a-propos" class="btn-secondary">
+                    En savoir plus
+                </a>
             </div>
+        </div>
+    </section>
 </main>
 
 <?php include_template('footer'); ?>

templates/navbar.php

@@ -68,12 +68,20 @@ $navLinks = [
         <div id="mobile-menu" class="lg:hidden hidden" aria-hidden="true">
             <ul class="py-4 space-y-2 border-t border-border">
                 <?php foreach ($navLinks as $link): ?>
+                    <?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: ?>
                         <li>
                             <a href="<?= $link['url'] ?>"
                                class="block py-3 px-4 rounded-lg <?= $currentPage === $link['id'] ? 'bg-surface text-primary' : 'text-text-secondary hover:bg-surface hover:text-text-primary' ?> transition-colors">
                                 <?= $link['label'] ?>
                             </a>
                         </li>
+                    <?php endif; ?>
                 <?php endforeach; ?>
             </ul>
         </div>