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:
@@ -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>
|
||||
|
||||
83
src/pages/contact.astro
Normal file
83
src/pages/contact.astro
Normal 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>
|
||||
Reference in New Issue
Block a user