From e19c60c19b4ae0184807a405cbe0a705d02d1f5d Mon Sep 17 00:00:00 2001
From: skycel <celian@araneite.com>
Date: Thu, 22 Jan 2026 23:11:01 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=A0=20Feature:=20Page=20d'accueil=20He?=
 =?UTF-8?q?ro=20+=20CTA=20mobile=20am=C3=A9lior=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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            | 81 +++++++++++++++++++++-----------------------
 templates/navbar.php | 20 +++++++----
 2 files changed, 53 insertions(+), 48 deletions(-)

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>