feat: ajout page Contact avec formulaire de démo

- Nouvelle page /contact avec formulaire
- Formulaire avec champs nom, email, message
- Bouton de soumission (démo uniquement)
- Ajout du lien Contact dans la navbar
This commit is contained in:
2025-12-08 13:18:55 +00:00
parent 5f7a9b3b45
commit b9fbad499f
2 changed files with 94 additions and 0 deletions

83
src/pages/contact.astro Normal file
View File

@@ -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>