✨ Story 1.4: page canary

index.php

@@ -1,19 +1,46 @@
 <?php
-// index.php - Point d'entrée
+// index.php - Page Canary
 
 require_once __DIR__ . '/includes/functions.php';
 
 include_template('header', [
-    'pageTitle' => 'Accueil',
-    'pageDescription' => 'Portfolio de développeur web. Découvrez mes projets et compétences.'
+    'pageTitle' => 'Portfolio en construction',
+    'pageDescription' => 'Mon portfolio de développeur web arrive bientôt. Restez connectés !'
 ]);
 ?>
 
-<main class="min-h-screen">
-    <div class="container-content py-20">
-        <h1 class="text-display text-center">Hello World</h1>
-        <p class="text-center text-text-secondary mt-4">
-            Le portfolio est en construction.
+<main class="min-h-screen flex items-center justify-center">
+    <div class="container-content text-center py-20">
+        <h1 class="text-display text-text-primary mb-4 animate-fade-in">
+            Portfolio <span class="text-primary">en construction</span>
+        </h1>
+
+        <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>
+
+        <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>
+
+        <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>
+
+        <p class="text-text-muted text-sm mt-12">
+            Testé sur mobile, tablette et desktop.
         </p>
     </div>
 </main>