Ce que vous obtenez
- Une section HTML hors ligne unique, avec disposition en grille et en dérive, pause et mode sombre
- Un composant React avec champs typés pour la source et l’autorisation
- Un contrôleur qui échoue sur les textes d’exemple, l’absence de consentement, les icônes en émoji et les ressources distantes
- Un e-mail de demande et un guide de conservation des preuves pour recueillir les citations
- En option : retouche des portraits par PopNow après devis
Idéal pour
- Pages d’accueil de SaaS, d’applications et de formations
- Sites d’agences et de freelances avec des clients satisfaits
- Pages de lancement qui ont déjà des retours de premiers utilisateurs
Pas fait pour
- Pages qui n’ont pas encore de vraies citations
- Widgets d’étoiles qui exigent une source d’avis vérifiée
- Témoignages en vidéo
Comment l’utiliser
Dans Claude ou ChatGPT
Utilisez le skill PopNow « Section mur de témoignages » (testimonial-wall-section) pour ceci : Ajoutez un mur de témoignages à notre page d’accueil Astro à partir des six citations approuvées dans content/quotes.json. Utilisez les initiales pour ceux qui n’ont pas de photo.
Dans un agent de code
/popnow-testimonial-wall-section Ajoutez un mur de témoignages à notre page d’accueil Astro à partir des six citations approuvées dans content/quotes.json. Utilisez les initiales pour ceux qui n’ont pas de photo.
Puis essayez
Chiffrez le détourage des trois portraits envoyés par les clients et harmonisez leur lumière.
Rédigez l’e-mail de demande d’autorisation pour les deux citations trouvées dans les tickets de support.
À préparer
- De vraies citations de clients, avec noms et fonctions tels qu’ils veulent les voir affichés
- L’accord explicite de chaque personne à être citée, et les photos qu’elle a envoyées
- Vos couleurs de page si elles diffèrent du papier chaud et du turquoise
- Facultatif : une clé API PopNow pour la retouche des portraits
Skills similaires
Tout voir →- Web
Créateur d’avatar 3D
+25Créez dans votre navigateur un personnage 3D façon peluche et enregistrez-le en PNG transparent ou en page 3D.
- Web
Calendrier heatmap d’activité
+25Une année d’activité quotidienne en calendrier de cases colorées, avec séries, totaux et navigation au clavier.
- Web
Modèle de landing page SaaS IA
+25Papier sable et filets fins autour d’un tableau kanban où un assistant planifie les tâches.
- Web
Section hero animée
+25Un hero de landing page avec un mot de titre qui change en douceur, deux boutons et un large cadre d’image.
- Web
Modèle de site de marque de boissons
+25Site lumineux pour marque de boissons ou snacks : boutique, composeur de caisse, carte des revendeurs et paiement de démo, en un fichier.
- Web
Modèle de site d’agence créative à shader
+25Héros shader orange vivant, déclaration en bas, navigation en pilules et grille d’études de cas décalée.
- Web
Landing page SaaS sombre
+25Un site marketing sombre et très animé pour un logiciel, livré en un seul fichier HTML autonome.
- Web
Site portfolio de designer
+25Six cartes inclinées autour d’un titre qui s’estompe, une carte portrait rouge, des études de cas éditoriales.
- Web
Site portfolio de développeur
+25Un site personnel sombre pour développeurs, avec études de cas, articles, conférences, CV et formulaire de contact.
- Web
Site SaaS éditorial
+25Héros scindé bleu marine, titre serif sur cinq lignes, photo documentaire, bandeaux inclinés et accent cobalt.
- Web
Site de designer indépendant
+25Site audacieux d’un designer solo qui vend des forfaits à prix fixe : pages d’offres, études de cas et formulaire de brief.
- Web
Modèle de site glassmorphism
+25Verre dépoli sur fond noir, grand titre serif à un mot en italique, et inscription par e-mail.
- Web
Site web de produit matériel
+25Noms de modèles fins et géants sur studio argenté, cartes de fiches et gamme à l’échelle réelle.
- Web
Diagramme d’architecture interactif
+25Un schéma système cliquable et hors ligne, construit à partir d’un modèle JSON vérifié, avec les preuves derrière chaque bloc.
- Web
Héros à grille interactive
+25Grille sombre de fins filaments qui se courbe vers le curseur et envoie un anneau à chaque clic.
- Web
Explorateur de graphe de connaissances
+25Transformez vos notes de projet en graphe consultable hors ligne, où chaque affirmation renvoie à sa ligne source.
- Web
Modèle de tableau de bord KPI
+25Quatre indicateurs avec variations, courbe lumineuse, répartition et objectifs, sur papier chaud.
- Web
Landing page à partir de maquettes IA
+25Voyez trois maquettes de page complète, choisissez-en une, et votre agent la code proprement.
- Web
Modèle de site web magazine
+25Un site de magazine digne de l’imprimé, avec articles, rubriques, petite boutique et abonnements, en un seul fichier HTML.
- Web
Héros à animation de particules
+25Texte sur papier chaud, à côté d’une sphère de points qui change à chaque idée.
- Web
Site de marque personnelle
+25Portrait fondu dans du papier chaud sous un fin crochet, affirmations de chaque côté.
- Web
Modèle de site de boutique pour animaux
+25Boutique d’animaux qui fonctionne : catalogue, déclinaisons, panier, planificateur de recharges et paiement de démo, en un HTML.
- Web
Modèle de site de podcast
+25Un site de podcast avec héros lisible, archive d’épisodes, pages d’invités et un lecteur qui continue de jouer en naviguant.
WebSection de tarifs dessinée à la main
+25Tableau de tarifs façon carnet : cartes d’encre légèrement inclinées, bascule annuelle et mode sombre, dans un seul fichier hors ligne.
- Web
Page de lancement produit cinématique
+25Page presque noire façon cinéma : titre serif, scène de nuit encadrée, formulaire de réservation.
- Web
Site de présentation d’article de recherche
+25Une page projet pour votre article avec Figure 1 interactive, résultats, limites et citation en un clic.
- Web
Modèle de dashboard admin
+25Une console de back-office fonctionnelle avec graphiques, tableaux, kanban et calendrier, en un seul fichier HTML hors ligne.
- Web
Modèle de landing page SaaS
+25Un site marketing clair et apaisé pour un logiciel, avec console produit fonctionnelle, tarifs et inscription.
- Web
Site CV portfolio façon scrapbook
+25Un CV en ligne sur plusieurs pages fait d’objets en papier, avec études de cas et CV imprimable.
- Web
Modèle de site e-commerce de sneakers
+25Une boutique complète de chaussures ou de vêtements avec catalogue, fiches produit, panier et paiement de démo, en un fichier HTML.
- Web
Modèle de site de club sportif
+25Site de club, salle ou studio avec planning, pages d’entraîneurs, adhésions, plan des terrains et réservation dans un seul fichier.
- Web
Modèle de site d’agence de voyages
+25Site centré sur la photo pour circuits, guides ou refuges : recherche de voyages, demandes de réservation et quiz de choix de séjour.
- Web
Modèle de page d’automatisation de workflows
+25Page graphite au titre court, avec un graphe de nœuds vivant qui s’exécute et relance les étapes.
Questions
Pourquoi livrer des cartes factices plutôt que des avis d’exemple ?
Des avis inventés à côté de noms et de visages induisent les lecteurs en erreur et peuvent enfreindre les règles publicitaires. Le modèle utilise des cartes étiquetées « Exemple » pour que la mise en page soit visible, et le contrôleur refuse de valider la page tant que chaque carte n’a pas une vraie source et une autorisation consignée.
Peut-il générer des photos de clients ?
Non. Les avatars sont des initiales ou des photos fournies par le client. PopNow sert seulement à mettre en ordre les photos fournies : détourer les arrière-plans chargés, agrandir les petites images et harmoniser la lumière de l’ensemble.
La disposition en défilement est-elle accessible ?
Elle se met en pause au survol et au focus clavier, dispose d’un bouton Pause visible, masque aux lecteurs d’écran les cartes dupliquées de la boucle, et passe à la grille statique lorsque la réduction de mouvement est activée.
La version React a-t-elle besoin d’une bibliothèque d’animation ?
Non. Le défilement est une image-clé CSS et le composant ne dépend que de React, il fonctionne donc dans Next.js, Vite, Remix ou sous forme d’îlot Astro.
Le mur peut-il devenir une page complète de témoignages ?
Oui. Le même composant remplit une page entière de témoignages avec des filtres par produit ou par fonction, ou se place sur votre page d’accueil comme une courte section. Le design de section de témoignages et l’interface existent en clair et en sombre, et le rendu est celui d’un mur d’avis sans qu’aucune citation ne soit inventée.