Sections Astro et Tailwind pour cabinet de santé ou de bien-être (équipe, actes, horaires, prise de rendez-vous)

Ce kit s’adresse aux développeurs front-end et aux freelances qui livrent le site d’un cabinet de santé ou de bien-être : kinésithérapeute, ostéopathe, psychologue, diététicien, cabinet dentaire. Il réunit les sections d’un tel site, prêtes à recevoir les données de votre client : en-tête avec bandeau d’urgence, héros avec les prochains créneaux libres, présentation du cabinet, équipe filtrable par spécialité, actes et tarifs, horaires et accès, interface de prise de rendez-vous, questions fréquentes, contact et pied de page. Chaque section existe en composant Astro aux props typées et en HTML statique, avec la même feuille de style. Le kit ne contient aucune photo : chaque emplacement d’image affiche un visuel neutre dessiné en SVG, au bon ratio, que vous remplacez par les photos du cabinet. Les textes de démonstration sont en anglais (voir « Langue des sections » plus bas).

• 10 sections en composants Astro (astro/), sans contenu écrit en dur dans les composants :
  • Header : bandeau d’information sur les urgences, nom du cabinet, navigation, bouton de rendez-vous, lien d’évitement vers le contenu ;
  • Hero : titre, accroche, boutons de rendez-vous et d’appel, informations clés, emplacement photo, prochains créneaux libres ;
  • About : le cabinet, ses informations clés, sa façon de travailler, emplacement photo ;
  • Team : cartes des praticiens avec un filtre par spécialité, le prochain créneau de chacun et un bouton qui ouvre la prise de rendez-vous déjà remplie ;
  • Services : actes et tarifs par spécialité, avec la durée et une étiquette de prise en charge ;
  • HoursAccess : tableau des horaires avec le jour courant et la mention « ouvert » ou « fermé » calculés dans le navigateur, adresse, emplacement du plan, accès ;
  • Booking : prise de rendez-vous en étapes (consultation, créneau, coordonnées, confirmation), avec erreurs en ligne et récapitulatif des erreurs ;
  • Faq : questions en accordéon, construit sur la balise details, sans script ;
  • Contact : moyens de contact, avertissement pour les urgences, formulaire avec erreurs en ligne ;
  • Footer : adresse, horaires, numéros d’urgence, liens, mentions légales.
• 15 composants .astro en tout : les 10 sections, plus Brand (le nom du cabinet avec un logo simple, à remplacer par le vôtre), Icon (un pictogramme), IconSprite (le sprite, à placer une fois par page), Visual (l’emplacement d’image ou votre photo) et ClinicScript (le comportement des sections, à placer une fois par page).
• 23 variantes de composants : boutons, étiquettes, encadrés, pastilles d’icône, cartes de praticien (dont la carte « liste d’attente »), cases de jour et créneaux (sélectionnés, désactivés, déjà pris), ainsi que les états ouvert et fermé des horaires et du menu.
• 8 états des formulaires de rendez-vous et de contact (étapes, erreurs, confirmation). Un paramètre d’adresse ouvre directement les étapes et les écrans d’erreur ou de confirmation, pour vos aperçus et vos tests.
• Une page d’exemple : PageExample.astro assemble toutes les sections avec les données fictives de sample-data.ts (5 praticiens dans 4 spécialités : kinésithérapie, ostéopathie, psychologie, diététique) ; la forme des données est décrite dans types.ts.
• 10 sections en HTML statique (html/sections/), extraites du build de la page de démonstration, avec le sprite et le script en HTML et la page complète html/index.html.
• 26 pictogrammes SVG (icons/) : 17 pictogrammes d’interface et 9 pictogrammes santé, ces derniers repris à l’identique du pack d’icônes santé et bien-être.
• Un guide d’installation en anglais, astro/LISEZMOI-astro.txt.
• 62 fichiers au total.

Organisation des fichiers :

• astro/ : les 15 composants, PageExample.astro, types.ts, sample-data.ts, format.ts et LISEZMOI-astro.txt.
• html/ : index.html et sections/*.html.
• html/css/ : tokens.css et kit.css.
• tailwind/ : theme.css.
• icons/ : les pictogrammes SVG.

Une interface de prise de rendez-vous, sans moteur de réservation

La prise de rendez-vous est une interface complète : choix de la consultation et du praticien, semaines et créneaux, coordonnées, récapitulatif et confirmation, avec un fichier d’agenda .ics créé dans le navigateur. Elle ne contient aucun moteur de réservation : elle ne stocke ni n’envoie rien, et ne connaît pas l’agenda réel du cabinet. Les créneaux déjà pris de la démonstration suivent un motif fixe, à remplacer par un appel à votre agenda. Le script porte des commentaires TODO à l’endroit où vous envoyez les données du rendez-vous et du message de contact vers l’outil de réservation ou le serveur de votre choix. Le jour courant, l’état « ouvert » ou « fermé » et les prochains créneaux sont calculés dans le navigateur à partir des horaires de vos données : le HTML statique ne devient jamais obsolète.

Sans JavaScript, la page reste lisible : les 10 sections et les 5 praticiens de l’exemple s’affichent, le filtre de l’équipe, l’état d’ouverture et les prochains créneaux sont masqués, et un message placé au-dessus du formulaire de réservation explique que la prise de rendez-vous demande JavaScript.

Les formulaires invitent les patients à ne pas écrire de détails médicaux ni à envoyer de documents. Gardez-les ainsi, sauf si votre serveur et votre base légale permettent de traiter des données de santé.

Images : des emplacements, pas de photos

Aucune photo n’est fournie. Le héros, la présentation du cabinet, le plan d’accès et le portrait de chaque praticien affichent un visuel neutre dessiné en SVG avec les tokens de couleur du kit, au ratio de l’emplacement et sans aucun texte. Vous passez votre photo par une prop (source, texte alternatif, largeur et hauteur) : le cadre garde son ratio et la page ne bouge pas pendant le chargement. Le plan reste un emplacement, à brancher sur le service de cartes de votre choix.

Fabrication et IA

Le code des sections (composants Astro, HTML, CSS, thème Tailwind), les pictogrammes SVG et les visuels neutres ont été produits avec un assistant d’IA, puis relus et contrôlés : aucune violation relevée par axe-core, contrastes de couleur compris, un score Lighthouse sur mobile de 100 en accessibilité et de 98 en performance, et tous les espacements mesurés sur la grille de 4 px.

Langue des sections

Les sections sont livrées en anglais neutre, sans rien de propre à un pays : données d’exemple, libellés et guide d’installation. Le bandeau, le contact et le pied de page indiquent le 112 et « votre numéro d’urgence local » : le guide liste les endroits où mettre les numéros du pays du cabinet. Les messages des formulaires se trouvent dans l’objet labels de sample-data.ts, les intitulés fixes (titres, aides, boutons) dans les fichiers .astro. La langue et l’ordre des dates se règlent par une prop du script. Dans la version HTML, les textes se modifient directement dans le balisage.

• Astro : composants .astro aux props typées en TypeScript. Le filtre de l’équipe, les horaires, la prise de rendez-vous et le formulaire de contact sont en JavaScript sans dépendance, dans un seul script intégré (ClinicScript). Les versions prises en charge sont indiquées dans le guide d’installation.
• HTML et CSS : tokens.css (mode clair et mode sombre) et kit.css, déjà compilée, sans CDN. Ces fichiers s’utilisent dans n’importe quel projet web, avec ou sans framework. kit.css est écrite dans une couche @layer components : vos propres styles passent toujours devant.
• Thème Tailwind v4 : tailwind/theme.css reprend les mêmes tokens sous forme de @theme, pour les utiliser en classes utilitaires. Il est facultatif : kit.css suffit si votre projet n’utilise pas Tailwind.
• SVG : les 26 pictogrammes, sur une grille de 24 px avec un trait de 1,5, dont le trait prend la couleur du texte. Ils s’ouvrent dans la plupart des outils de design et s’utilisent directement dans le code. Pour une spécialité qui n’a pas son pictogramme, le guide explique comment ajouter un symbole au sprite.

Tout passe par des tokens : espacements sur une grille de 4 px, tailles, rayons, bordures, échelle typographique et couleurs. Les sections sont plates, sans ombre. Le mode sombre suit le réglage du système ; l’attribut data-theme sur la balise html force l’un ou l’autre mode.

La police Lexend (licence SIL OFL 1.1) n’est pas incluse dans les fichiers : le guide l’installe par son paquet npm, pour l’héberger avec le site. La page de démonstration HTML la charge par un CDN public ; une ligne à supprimer si vous l’hébergez vous-même. Le kit ne contient pas de fichier de maquette pour un outil de design.

Contrôles faits avant la mise en vente, en mode clair et en mode sombre, à 320, 375, 768 et 1 440 px de large, sur la page et sur les états des formulaires : aucune violation relevée par axe-core et aucun défilement horizontal. Au clavier, chaque élément atteint affiche un anneau de focus visible.

Le kit est vendu sous licence commerciale : vous pouvez l’utiliser dans vos projets et livrer à vos clients les sites construits avec ses sections. Vous ne pouvez pas revendre ni redistribuer le kit ou ses fichiers, ni remettre le kit d’origine à un client pour qu’il le réutilise ailleurs. La police garde sa propre licence.

• Des pictogrammes dans le même style pour le reste du site ou l’appli du cabinet : le pack d’icônes santé et bien-être.
• Le même kit pour un autre secteur, avec carte, allergènes et réservation : les sections Astro et Tailwind pour site de restaurant.
• Pour les formulaires de rendez-vous et de contact : les erreurs d’accessibilité les plus courantes dans les formulaires.

1.0.0 (11 novembre 2026) : première version.