UI Lab, version statique

Composants du laboratoire Next.js adaptés pour la sortie statique. Chaque carte indique la technologie retenue : Astro (HTML généré au build), CSS natif, JavaScript vanilla ou îlot React hydraté.

Boutons CSS natif

Micro-interaction au survol et à l'appui, sans JavaScript.

Carte CSS natif

Pilotage ROAS

Élévation au survol en transition CSS. Référence : cartes shadcn du laboratoire.

Apparition de titre Astro + CSS, 0 JS

Mots découpés au build, décalage porté par une variable CSS. Référence : TextEffect (Motion Primitives).

Compteur JS vanilla

1 284

conversions suivies (démo)

Valeur finale présente dans le HTML : lisible sans JavaScript et avec prefers-reduced-motion.

Accordéon FAQ HTML natif

Que contient un audit de compte ?
Analyse de la structure, des conversions, des audiences et du tracking, avec un plan d'action priorisé.
Sous quel délai voit-on des résultats ?
Les premiers signaux arrivent en général sous 2 à 4 semaines, selon le volume de données du compte.

Éléments details/summary natifs : clavier et lecteur d'écran sans aucun script.

Onglets JS vanilla

Structuration des campagnes et ciblage des audiences à forte intention.
Optimisation des pages de destination et des parcours de conversion.
Tracking fiable, attribution et tableaux de bord de pilotage.

Rôles ARIA + flèches clavier. Sans JavaScript, les trois panneaux restent lisibles.

Bordure brillante CSS pur

Accompagnement premium

Gradient conique animé, en pause avec prefers-reduced-motion. Référence : ShineBorder (Magic UI).

Graphique Îlot React (Recharts, client:visible)Données fictives de démonstration

Données du graphique (tableau accessible)
Dépense publicitaire et conversions par mois ; données fictives.
MoisDépense (€)Conversions
Jan4 20096
Fév4 600112
Mar5 100131
Avr4 900128
Mai5 400149
Juin5 800168

Seul composant hydraté de la page : React et Recharts ne sont chargés que sur cette route, au moment où le graphique devient visible. Les chiffres restent disponibles en HTML dans le tableau ci-dessus.