Les composants de section sont les éléments de base de chaque page de thème. Chaque page de thème est composée de 12+ sections, chacune ayant une variante dédiée par thème.
Sections disponibles
Hero (Héros)
Sections d'atterrissage plein écran avec des animations spécifiques au thème.
À propos (About)
Sections de présentation de l'entreprise ou du produit.
Fonctionnalités (Features)
Présentations des fonctionnalités du produit avec des grilles, des listes et des cartes.
Portefeuille (Portfolio)
Galeries de projets et présentations.
Tarification (Pricing)
Tableaux de prix avec forfaits et comparaisons.
Témoignages (Testimonials)
Preuve sociale et avis des clients.
FAQ
Foire aux questions avec interface accordéon.
Appel à l'action (CTA)
Sections d'appel à l'action pour stimuler les conversions.
Contact
Formulaires de contact avec validation Valibot.
Barre de navigation (Navbar)
En-tête et barres de navigation spécifiques au thème.
Pied de page (Footer)
Pieds de page du site avec liens, réseaux sociaux et image de marque.
Comment ça fonctionne
Chaque section comporte 6 variantes de thème — une pour chaque thème (Liquid, Glass, Neo, Luxury, Minimal, Aurora). La page dynamique située sous src/pages/[theme].astro utilise une carte de composants pour afficher la bonne variante :
---// Simplifié de [theme].astroconst componentMap = { liquid: { Hero: HeroLiquid, About: AboutLiquid, ... }, glass: { Hero: HeroGlass, About: AboutGlass, ... }, // neo, luxury, minimal, aurora...};
const components = componentMap[themeId];---
<components.Hero /><components.About /><components.Features />Les composants de section n’acceptent aucune prop. Tout le contenu textuel est chargé en interne via useTranslations() depuis src/locales/{lang}/{section}.json. Pour modifier le contenu de n’importe quelle section, modifiez le fichier JSON de la langue correspondante.
Structure des fichiers
Chaque section suit un modèle de répertoire cohérent :
src/components/sections/{section}/├── {Section}Liquid.astro├── {Section}Glass.astro├── {Section}Neo.astro├── {Section}Luxury.astro├── {Section}Minimal.astro└── {Section}Aurora.astroLe CSS pour chaque section se trouve dans src/styles/components/{section}/.