From b9fbad499f5cdc22b2e8bb8fd887bca91a4b589f Mon Sep 17 00:00:00 2001
From: Agent de manu <sys@avqn.ch>
Date: Mon, 8 Dec 2025 13:18:55 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20ajout=20page=20Contact=20avec=20formula?=
 =?UTF-8?q?ire=20de=20d=C3=A9mo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Nouvelle page /contact avec formulaire
- Formulaire avec champs nom, email, message
- Bouton de soumission (démo uniquement)
- Ajout du lien Contact dans la navbar
---
 src/components/Navbar.astro | 11 +++++
 src/pages/contact.astro     | 83 +++++++++++++++++++++++++++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 src/pages/contact.astro

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 0a7b273..689ddab 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -35,6 +35,17 @@ const currentPath = Astro.url.pathname;
                 >
                     About
                 </a>
+                <a
+                    href="/contact"
+                    class:list={[
+                        "text-sm font-medium transition-colors",
+                        currentPath === "/contact"
+                            ? "text-gray-900"
+                            : "text-gray-500 hover:text-gray-900",
+                    ]}
+                >
+                    Contact
+                </a>
             </div>
         </div>
     </div>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
new file mode 100644
index 0000000..ebdfef1
--- /dev/null
+++ b/src/pages/contact.astro
@@ -0,0 +1,83 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import Navbar from "../components/Navbar.astro";
+---
+
+<BaseLayout
+    title="Contact - Astro Starter Kit"
+    description="Contactez-nous via ce formulaire"
+>
+    <Navbar />
+
+    <main class="max-w-4xl mx-auto px-6 py-16">
+        <div class="mb-12">
+            <h1 class="text-5xl font-bold tracking-tight mb-4">Contact</h1>
+            <p class="text-xl text-gray-600 leading-relaxed">
+                Envoyez-nous un message, nous vous répondrons rapidement.
+            </p>
+        </div>
+
+        <!-- Formulaire -->
+        <form class="max-w-2xl space-y-6">
+            <div>
+                <label
+                    for="name"
+                    class="block text-sm font-medium text-gray-900 mb-2"
+                >
+                    Nom
+                </label>
+                <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all"
+                    placeholder="Votre nom"
+                />
+            </div>
+
+            <div>
+                <label
+                    for="email"
+                    class="block text-sm font-medium text-gray-900 mb-2"
+                >
+                    Email
+                </label>
+                <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all"
+                    placeholder="votre@email.com"
+                />
+            </div>
+
+            <div>
+                <label
+                    for="message"
+                    class="block text-sm font-medium text-gray-900 mb-2"
+                >
+                    Message
+                </label>
+                <textarea
+                    id="message"
+                    name="message"
+                    rows="6"
+                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition-all resize-none"
+                    placeholder="Votre message..."></textarea>
+            </div>
+
+            <button
+                type="button"
+                onclick="alert('Ceci est un formulaire de démonstration. Aucune donnée n\'est envoyée.')"
+                class="w-full px-6 py-3 bg-gray-900 text-white font-medium rounded-lg hover:bg-gray-800 transition-colors"
+            >
+                Envoyer le message
+            </button>
+
+            <p class="text-sm text-gray-500 text-center">
+                Note : Ce formulaire est une démonstration et n'envoie aucune
+                donnée.
+            </p>
+        </form>
+    </main>
+</BaseLayout>