Un projet. Plusieurs chapitres.
Site webEn ligneCréé en

Clim & Vapeur Service.

Présenter des prestations de nettoyage, répondre aux premières questions et faciliter la demande de rendez-vous.

Mon rôle

Développement du site et du parcours de demande de rendez-vous.

AstroVueTypeScriptTailwind CSSToute la stack
Le projet, sur grand et petit écran.Cliquer sur les captures pour agrandir
Feuilletons ensemble

Une idée.
Tout un parcours.

Fais défiler pour découvrir
ce qui se passe à l’intérieur.

Accueil du site public

01 / 03Découvrir les services

Identifier la bonne prestation.

Le site présente le nettoyage de climatisation, le nettoyage vapeur et les interventions extérieures à Istres.

  • Accéder aux pages détaillées des prestations.
  • Consulter les informations sur les zones d’intervention.

Accueil du site public

02 / 03Prendre contact

Expliquer son besoin.

Le formulaire permet de choisir une prestation et de transmettre les informations utiles à la prise de contact.

  • Renseigner ses coordonnées, la prestation et un message.
  • Retrouver un retour d’envoi ou une indication d’erreur dans le formulaire.

Page de contact et demande de rendez-vous

03 / 03Retrouver l’essentiel

Les services à portée de main.

La navigation donne accès aux prestations, aux conseils et aux coordonnées depuis un téléphone.

  • Lire les conseils d’entretien avant de prendre contact.
  • Appeler directement ou accéder à la demande de rendez-vous.

Accueil mobile du site public

Le produit en action

Du besoin au contact.

Un aperçu de la navigation, des prestations au parcours de prise de contact.

Parcours filmé sur le site public · 17 s · sans son
Du produit au code

Sous la
couverture.

Des pages de services et de conseils, ainsi qu’un formulaire de contact interactif avec validation des données.

01

Pages

Astro et collections de contenu Markdown pour les services et les conseils

02

Formulaire

Un îlot Vue chargé sur la page de contact

03

API

Route Node avec validation Zod et vérification Turnstile

04

Emails

Transmission des demandes par Resend, selon la configuration du service

Une interaction concentrée sur le formulaire

Astro produit les pages de présentation. Le formulaire Vue est chargé lorsqu’il devient visible ; la route de rendez-vous reste dynamique pour traiter la demande côté serveur.

Contrôler la demande avant de la transmettre

La route API valide les données avec Zod, vérifie Turnstile et limite les envois. Elle renvoie une erreur explicite si le service d’email n’est pas configuré ou si l’envoi échoue.

La stack
  • Astro
  • Vue
  • TypeScript
  • Tailwind CSS
  • Zod
  • Resend
L’histoire continue

Un projet à
écrire ensemble ?

On en parle