feat: refonte UI éditoriale — style Messager + animations boutons
Navbar : - Style éditorial : liens uppercase tracking-wide, underline slide au hover - Bouton "Devis gratuit" avec animation slide-fill - Active state par pathname Page d'accueil : - Hero split : texte gauche (clamp typography) + panneau diagonal brique droit - Services : fond navy-light, cards avec bordure top orange, emoji + arrow animée - Bande CTA : bg-orange full-width, btn-fill-white + btn-outline-light - Réalisations : grid avec overlay slide-from-bottom au hover (rouge brique) - Témoignages : dark navy, cards avec border-top - Zone intervention : split 2 cols, pills uppercase - Partenaires : grid 8 cols, grayscale → couleur au hover - FAQ : split 2 cols, accordion avec icône + rotation - Contact : split dark/light — infos gauche + formulaire droit Globals.css : - Classes .btn, .btn-fill, .btn-outline-dark/light, .btn-fill-white, .btn-arrow - Animation slide-from-left via ::before pseudo-element - .realisation-overlay (slide-up), .hero-diagonal-panel (clip-path) - .nav-link (underline grow), .service-card-dark, .faq-icon ContactForm + Footer : style éditorial squares, uppercase labels https://claude.ai/code/session_01Uec4iHjcPwB1pU41idWEdF
This commit is contained in:
Claude
@@ -57,165 +57,95 @@ export default function ContactForm() {
|
||||
|
||||
if (status === "success") {
|
||||
return (
|
||||
<div className="bg-bg-white border border-success rounded-2xl p-8 text-center">
|
||||
<div className="text-4xl mb-4">✅</div>
|
||||
<h3 className="text-navy font-bold text-xl mb-2">Demande envoyée !</h3>
|
||||
<div className="border-t-4 border-success bg-bg-white p-8 text-center">
|
||||
<div className="w-12 h-12 bg-success/10 flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-6 h-6 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-navy font-black text-lg uppercase tracking-wide mb-2">Demande envoyée !</h3>
|
||||
<p className="text-text-light text-sm">
|
||||
Benoît vous rappellera dans les 24h. En cas d'urgence, appelez directement le{" "}
|
||||
<a href="tel:0674453089" className="text-orange font-bold">
|
||||
Benoît vous rappelle sous 24h. En cas d'urgence :{" "}
|
||||
<a href="tel:0674453089" className="text-orange font-bold hover:underline">
|
||||
06 74 45 30 89
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ic = "w-full border border-border bg-bg-white px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors";
|
||||
const lc = "block text-xs font-bold uppercase tracking-widest text-navy mb-2";
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-bg-white border border-border rounded-2xl p-6 md:p-8 space-y-4"
|
||||
>
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="nom" className="block text-sm font-semibold text-navy mb-1">
|
||||
Nom <span className="text-orange">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="nom"
|
||||
name="nom"
|
||||
type="text"
|
||||
value={form.nom}
|
||||
onChange={handleChange}
|
||||
placeholder="Votre nom"
|
||||
className="w-full border border-border rounded-xl px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors bg-bg"
|
||||
required
|
||||
/>
|
||||
<label htmlFor="nom" className={lc}>Nom <span className="text-orange">*</span></label>
|
||||
<input id="nom" name="nom" type="text" value={form.nom} onChange={handleChange}
|
||||
placeholder="Votre nom" className={ic} required />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="telephone" className="block text-sm font-semibold text-navy mb-1">
|
||||
Téléphone <span className="text-orange">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="telephone"
|
||||
name="telephone"
|
||||
type="tel"
|
||||
value={form.telephone}
|
||||
onChange={handleChange}
|
||||
placeholder="06 XX XX XX XX"
|
||||
className="w-full border border-border rounded-xl px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors bg-bg"
|
||||
required
|
||||
/>
|
||||
<label htmlFor="telephone" className={lc}>Téléphone <span className="text-orange">*</span></label>
|
||||
<input id="telephone" name="telephone" type="tel" value={form.telephone} onChange={handleChange}
|
||||
placeholder="06 XX XX XX XX" className={ic} required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-semibold text-navy mb-1">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={form.email}
|
||||
onChange={handleChange}
|
||||
placeholder="votre@email.fr"
|
||||
className="w-full border border-border rounded-xl px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors bg-bg"
|
||||
/>
|
||||
<label htmlFor="email" className={lc}>Email</label>
|
||||
<input id="email" name="email" type="email" value={form.email} onChange={handleChange}
|
||||
placeholder="votre@email.fr" className={ic} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="typeProjet" className="block text-sm font-semibold text-navy mb-1">
|
||||
Type de projet <span className="text-orange">*</span>
|
||||
</label>
|
||||
<select
|
||||
id="typeProjet"
|
||||
name="typeProjet"
|
||||
value={form.typeProjet}
|
||||
onChange={handleChange}
|
||||
className="w-full border border-border rounded-xl px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors bg-bg"
|
||||
required
|
||||
>
|
||||
<label htmlFor="typeProjet" className={lc}>Type de projet <span className="text-orange">*</span></label>
|
||||
<select id="typeProjet" name="typeProjet" value={form.typeProjet} onChange={handleChange}
|
||||
className={ic} required>
|
||||
<option value="">Choisissez un type de projet</option>
|
||||
{typesProjets.map((t) => (
|
||||
<option key={t} value={t}>
|
||||
{t}
|
||||
</option>
|
||||
))}
|
||||
{typesProjets.map((t) => <option key={t} value={t}>{t}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="description" className="block text-sm font-semibold text-navy mb-1">
|
||||
Description du projet
|
||||
</label>
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
value={form.description}
|
||||
onChange={handleChange}
|
||||
rows={4}
|
||||
placeholder="Décrivez votre projet : surface, localisation, contraintes particulières..."
|
||||
className="w-full border border-border rounded-xl px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors bg-bg resize-none"
|
||||
/>
|
||||
<label htmlFor="description" className={lc}>Description du projet</label>
|
||||
<textarea id="description" name="description" value={form.description} onChange={handleChange}
|
||||
rows={4} placeholder="Surface, localisation, contraintes particulières..."
|
||||
className={`${ic} resize-none`} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="budget" className="block text-sm font-semibold text-navy mb-1">
|
||||
Budget approximatif
|
||||
</label>
|
||||
<input
|
||||
id="budget"
|
||||
name="budget"
|
||||
type="text"
|
||||
value={form.budget}
|
||||
onChange={handleChange}
|
||||
placeholder="ex : 80 000 €"
|
||||
className="w-full border border-border rounded-xl px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors bg-bg"
|
||||
/>
|
||||
<label htmlFor="budget" className={lc}>Budget approximatif</label>
|
||||
<input id="budget" name="budget" type="text" value={form.budget} onChange={handleChange}
|
||||
placeholder="ex : 80 000 €" className={ic} />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="zone" className="block text-sm font-semibold text-navy mb-1">
|
||||
Commune / Zone
|
||||
</label>
|
||||
<input
|
||||
id="zone"
|
||||
name="zone"
|
||||
type="text"
|
||||
value={form.zone}
|
||||
onChange={handleChange}
|
||||
placeholder="ex : Orchies, Douai..."
|
||||
className="w-full border border-border rounded-xl px-4 py-3 text-sm text-text focus:outline-none focus:border-orange transition-colors bg-bg"
|
||||
/>
|
||||
<label htmlFor="zone" className={lc}>Commune / Zone</label>
|
||||
<input id="zone" name="zone" type="text" value={form.zone} onChange={handleChange}
|
||||
placeholder="ex : Orchies, Douai..." className={ic} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-error text-sm bg-stone-bg border border-error/30 rounded-xl px-4 py-3">
|
||||
<p className="text-error text-xs bg-stone-bg border border-error/30 px-4 py-3 uppercase tracking-wide">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={status === "sending"}
|
||||
className="w-full bg-orange hover:bg-orange-hover text-white font-bold py-4 rounded-xl transition-colors disabled:opacity-60 disabled:cursor-not-allowed text-base"
|
||||
>
|
||||
{status === "sending" ? "Envoi en cours..." : "Envoyer ma demande de devis"}
|
||||
<button type="submit" disabled={status === "sending"}
|
||||
className="btn btn-fill w-full py-4 text-xs uppercase tracking-[0.2em] disabled:opacity-60 disabled:cursor-not-allowed">
|
||||
<span>{status === "sending" ? "Envoi en cours..." : "Envoyer ma demande"}</span>
|
||||
</button>
|
||||
|
||||
{status === "error" && (
|
||||
<p className="text-error text-sm text-center">
|
||||
Une erreur est survenue. Appelez directement le{" "}
|
||||
<a href="tel:0674453089" className="font-bold underline">
|
||||
06 74 45 30 89
|
||||
</a>
|
||||
.
|
||||
<p className="text-error text-xs text-center">
|
||||
Erreur. Appelez le{" "}
|
||||
<a href="tel:0674453089" className="font-bold underline">06 74 45 30 89</a>.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p className="text-text-muted text-xs text-center">
|
||||
<p className="text-text-muted text-xs text-center uppercase tracking-widest">
|
||||
Devis gratuit & sans engagement — Réponse sous 24h
|
||||
</p>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user