Mode: Tailwind HTMLLanguage: HTML
Sortie à retravailler
Consigne ajoutée
Générer une section mobile-first pour site vitrine, garder les textes français, utiliser des balises section et form, remplacer les photos par des placeholders et prévoir deux CTA : appeler et demander un devis.
Extrait possible
<section class="mx-auto max-w-5xl px-4 py-12">
<div class="grid gap-8 md:grid-cols-[1.1fr_0.9fr] md:items-center">
<div>
<p class="text-sm font-semibold uppercase tracking-wide text-emerald-700">Devis sous 24 h</p>
<h2 class="mt-3 text-3xl font-bold text-slate-950">Rénovation de salle de bain à Lyon</h2>
<p class="mt-4 text-slate-700">Décrivez votre projet, ajoutez vos contraintes et recevez un premier retour avant la visite technique.</p>
<div class="mt-6 flex flex-wrap gap-3">
<a class="rounded-md bg-slate-950 px-5 py-3 text-white" href="tel:+33400000000">Appeler</a>
<a class="rounded-md border px-5 py-3 text-slate-950" href="#devis">Demander un devis</a>
</div>
</div>
<form id="devis" class="rounded-lg border bg-white p-5 shadow-sm">
<!-- champs à connecter dans votre projet -->
</form>
</div>
</section>Ce que le code peut bien faire
Reprendre la hiérarchie visible, les CTA, la grille desktop, l’empilement mobile, les espacements principaux et une structure sémantique de départ.
Ce que vous devez contrôler
Remplacez les placeholders, branchez le formulaire, vérifiez les mentions légales, testez le contraste, corrigez les breakpoints et assurez-vous que le numéro, les liens et les textes correspondent au client.