diff --git a/index.php b/index.php
index 58f77e2..03506ca 100644
--- a/index.php
+++ b/index.php
@@ -1,57 +1,54 @@
 <?php
-// index.php - Page Canary
+/**
+ * Page d'accueil
+ */
 
 require_once __DIR__ . '/includes/functions.php';
 
-include_template('header', [
-    'pageTitle' => 'Portfolio en construction',
-    'pageDescription' => 'Mon portfolio de développeur web arrive bientôt. Restez connectés !'
-]);
+$pageTitle = 'Accueil';
+$pageDescription = 'Portfolio de développeur web full-stack. Découvrez mes projets, compétences et parcours.';
+$currentPage = 'home';
 
-include_template('navbar', [
-    'currentPage' => 'home'
-]);
+include_template('header', compact('pageTitle', 'pageDescription'));
+include_template('navbar', compact('currentPage'));
 ?>
 
-<main class="min-h-screen flex items-center justify-center">
-    <div class="container-content text-center py-20">
-        <!-- Titre principal -->
-        <h1 class="text-display text-text-primary mb-4 animate-fade-in">
-            Portfolio <span class="text-primary">en construction</span>
-        </h1>
+<main>
+    <!-- Hero Section -->
+    <section class="min-h-[calc(100vh-5rem)] flex items-center justify-center">
+        <div class="container-content text-center py-20">
+            <!-- Intro -->
+            <p class="text-primary font-medium mb-4 animate-fade-in">
+                Bonjour, je suis
+            </p>
 
-        <!-- Sous-titre -->
-        <p class="text-xl text-text-secondary mb-8 max-w-2xl mx-auto animate-fade-in animation-delay-100">
-            Je prépare quelque chose de génial pour vous.
-            <br>Revenez bientôt pour découvrir mes projets !
-        </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>
 
-        <!-- Badge de test -->
-        <div class="flex justify-center gap-4 mb-12 animate-fade-in animation-delay-200">
-            <span class="badge">PHP</span>
-            <span class="badge">Tailwind CSS</span>
-            <span class="badge badge-primary">En cours</span>
-        </div>
+            <!-- Titre -->
+            <p class="text-xl sm:text-2xl lg:text-heading text-text-secondary mb-6 animate-fade-in animation-delay-200">
+                Développeur Web Full-Stack
+            </p>
 
-        <!-- 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>
+            <!-- Accroche -->
+            <p class="text-lg 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 class="hidden sm:block">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>
-
-        <!-- Test responsive -->
-        <p class="text-text-muted text-sm mt-12">
-            Testé sur mobile, tablette et desktop.
-        </p>
-    </div>
+    </section>
 </main>
 
 <?php include_template('footer'); ?>
diff --git a/templates/navbar.php b/templates/navbar.php
index 69440b3..576c228 100644
--- a/templates/navbar.php
+++ b/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): ?>
-                    <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 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>