Sections Astro et Tailwind pour site de restaurant (carte, allergènes, réservation)

Ce kit s’adresse aux développeurs front-end et aux freelances qui livrent des sites de restaurant. Il réunit les sections d’un site de restaurant, prêtes à recevoir les données de votre client : en-tête, héros, carte par catégorie avec un filtre par allergène, fiche plat, clé des allergènes, horaires et accès, formulaire de réservation accessible, avis et pied de page, plus les données structurées Restaurant et Menu. Chaque section existe en composant Astro aux props typées et en HTML statique, avec la même feuille de style. L’affichage des allergènes suit l’obligation d’information du règlement INCO : chaque plat porte la liste de ses allergènes, et chaque nom d’allergène est écrit en toutes lettres à côté de son pictogramme. Les textes de démonstration et les libellés par défaut sont en anglais (voir « Langue des sections » plus bas).

• 9 sections en composants Astro (astro/), sans contenu écrit en dur dans les composants :
  • Header : nom du restaurant, navigation, bouton de réservation, lien d’évitement vers le contenu ;
  • Hero : titre, accroche, boutons d’action, informations clés, photo (un cadre de remplacement s’affiche si vous n’en fournissez pas) ;
  • Menu : carte par catégorie, allergènes et mentions sur chaque plat, filtre « masquer les plats qui contiennent » ;
  • DishDetail : fiche d’un plat, reliée depuis la carte par une ancre ;
  • AllergenKey : clé des 14 allergènes de l’annexe II du règlement INCO et des mentions de la carte ;
  • HoursAccess : tableau des horaires avec le jour courant signalé, adresse, plan, équipements ;
  • Booking : formulaire de réservation avec erreurs en ligne, récapitulatif des erreurs, récapitulatif de la demande et confirmation ;
  • Reviews : un avis mis en avant et les suivants, sans photo ;
  • Footer : adresse, liens, mentions légales.
• 12 composants .astro en tout : les 9 sections, plus Icon (un pictogramme), IconSprite (le sprite, à placer une fois par page) et RestaurantJsonLd (les données structurées).
• Une page d’exemple : PageExample.astro assemble toutes les sections avec les données fictives de sample-data.ts ; la forme des données est décrite dans types.ts.
• 9 sections en HTML statique (html/sections/), extraites du build de la page de démonstration, avec le sprite et le JSON-LD en HTML et la page complète html/index.html.
• 22 pictogrammes SVG (icons/), dont les 14 allergènes. Ce sont les fichiers du pack de pictogrammes restauration et 14 allergènes, repris à l’identique.
• 2 illustrations d’exemple en WebP (images/), la salle du héros et le plat de la fiche plat, chacune en 800 et 1 184 px de large. Elles ont été générées par IA (modèle krea-2 de Krea), puis retouchées.
• Un guide d’installation en anglais, astro/LISEZMOI-astro.txt.
• 58 fichiers au total.

Organisation des fichiers :

astro/       les 12 composants, PageExample.astro, types.ts, sample-data.ts, format.ts, LISEZMOI-astro.txt
html/        index.html, sections/*.html
html/css/    tokens.css, kit.css
tailwind/    theme.css
icons/       *.svg
images/      *.webp

La carte est du HTML complet, lisible sans JavaScript : le panneau de filtre n’apparaît que lorsque le script s’exécute. Cocher un allergène masque les plats qui le contiennent, une catégorie vide affiche un message, et une ligne d’état annonce le résultat aux lecteurs d’écran. Le formulaire de réservation ne stocke ni n’envoie rien par lui-même : sans attribut action, il valide la saisie et affiche la confirmation de démonstration ; avec action, il envoie la demande à l’adresse de votre choix.

Fabrication et IA

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

Les 2 illustrations de la démonstration, la salle dans le héros et le plat dans la fiche plat, ont été générées par IA avec le modèle krea-2 de Krea, puis retouchées (recadrage, étalonnage, export WebP). Elles sont incluses sous la même licence commerciale que le kit et servent à montrer la mise en page : remplacez-les par les photos de l’établissement. Le plan d’accès de la section HoursAccess reste un cadre de remplacement, à brancher sur le service de cartes de votre choix.

Langue des sections

Les sections sont livrées en anglais : données d’exemple, libellés par défaut et guide d’installation. Dans les composants Astro, les libellés (boutons, messages d’erreur, intitulés du filtre et des horaires) se remplacent par des props, sans toucher au code, et les noms des allergènes viennent de vos données. Dans la version HTML, les textes se modifient directement dans le balisage.

• Astro : composants .astro aux props typées en TypeScript. Le filtre de la carte, le formulaire et le marquage du jour courant sont en JavaScript sans dépendance, intégrés aux composants qui en ont besoin. 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 22 pictogrammes, dont le trait prend la couleur du texte (currentColor). Ils s’ouvrent dans la plupart des outils de design et s’utilisent directement dans le code.
• WebP : les 2 illustrations d’exemple, au format 4:3, avec une version plus légère pour les petits écrans ; les composants posent leurs dimensions et chargent l’image du héros en priorité.
• Données structurées : RestaurantJsonLd produit un Restaurant et un Menu schema.org en JSON-LD, avec les sections et les plats de la carte. Il n’ajoute volontairement ni note moyenne ni avis : à vous de les ajouter seulement s’ils viennent d’une source réelle.

Tout passe par des tokens : espacements sur une grille de 4 px, tailles, rayons, bordures, échelle typographique et couleurs. 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. Les mises en page changent à 768 et 1 024 px de large, par des media queries.

Les polices Newsreader et Public Sans (licence SIL OFL 1.1) sont référencées par un lien vers un service de polices en ligne, pas incluses dans les fichiers ; vous pouvez les héberger 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, à 375, 768 et 1 440 px de large : aucune violation relevée par axe-core, dans l’état par défaut comme avec les erreurs du formulaire affichées, et aucun défilement horizontal.

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. Les 2 illustrations d’exemple sont couvertes par la même licence commerciale. Les polices gardent leur propre licence.

• Les mêmes pictogrammes en SVG et en PNG, pour la carte imprimée ou l’appli : le pack de pictogrammes restauration et 14 allergènes.
• Pour le formulaire de réservation : les erreurs d’accessibilité les plus courantes dans les formulaires.

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