Cosa ottieni
- Un’unica sezione HTML offline con layout a griglia e in movimento, pausa e tema scuro
- Un componente React con campi tipizzati per la fonte e il permesso
- Un controllo che fallisce su testi di esempio, consenso mancante, icone emoji e risorse remote
- Un’email di richiesta e una guida alla tenuta dei registri per raccogliere le citazioni
- Pulizia facoltativa dei ritratti con PopNow, dopo un preventivo
Ideale per
- Landing page di SaaS, app e corsi
- Siti di agenzie e freelance con clienti soddisfatti
- Pagine di lancio che hanno già feedback dai primi utenti
Non adatta a
- Pagine che non hanno ancora citazioni reali
- Widget di valutazione a stelle che richiedono una fonte di recensioni verificata
- Testimonianze video
Come usarla
In Claude o ChatGPT
Usa la skill PopNow “Sezione muro delle testimonianze” (testimonial-wall-section) per questo: Aggiungi un muro di testimonianze alla nostra landing page Astro con le sei citazioni approvate in content/quotes.json. Per chi non ha una foto usa le iniziali.
In un agente di programmazione
/popnow-testimonial-wall-section Aggiungi un muro di testimonianze alla nostra landing page Astro con le sei citazioni approvate in content/quotes.json. Per chi non ha una foto usa le iniziali.
Poi prova
Preventiva il ritaglio delle tre foto dei volti inviate dai clienti e allinea la loro luce.
Scrivi l’email di richiesta del permesso per le due citazioni trovate nei ticket di supporto.
Cosa tenere pronto
- Citazioni reali dei clienti con nome e ruolo, come vogliono che siano mostrati
- Il consenso di ciascuna persona a essere citata e le foto che hanno inviato
- I colori della tua pagina, se sono diversi dalla carta calda e dal verde acqua
- Facoltativo: una chiave API PopNow per la pulizia dei ritratti
Skill simili
Vedi tutte →- Web
Creatore di avatar 3D
+25Crea nel browser un personaggio 3D tenero come un peluche e salvalo come PNG trasparente o pagina 3D.
- Web
Calendario heatmap
+25Un anno di attività quotidiana come griglia di calendario sfumata, con serie, totali e accesso da tastiera.
- Web
Landing page SaaS per l’AI
+25Carta sabbia calda, binari sottili e tratteggi attorno a una kanban dal vivo dove un assistente pianifica.
- Web
Sezione hero animata
+25Una hero per landing page con una parola del titolo che ruota con delicatezza, due pulsanti e un riquadro immagine largo.
- Web
Modello di sito per marchio di bevande
+25Sito solare per marchi di bibite e snack con negozio, configuratore di confezioni, mappa dei rivenditori e checkout demo in un file.
- Web
Sito per agenzia creativa con hero shader
+25Hero shader WebGL dal vivo dietro un’affermazione in basso, navigazione a pillola e griglia di casi di studio.
- Web
Landing page SaaS scura
+25Un sito di marketing scuro e ricco di animazioni per un prodotto software, consegnato come un unico file HTML autonomo.
- Web
Sito portfolio per designer
+25Sei card inclinate attorno a un titolo sfumato su grigio calmo, una card ritratto rossa e casi di studio.
- Web
Sito portfolio per sviluppatori
+25Un sito personale scuro per ingegneri, con case study, articoli, talk, curriculum e modulo di contatto.
- Web
Sito SaaS editoriale
+25Hero diviso blu notte, titolo serif accanto a una foto documentaria, fasce inclinate e un accento cobalto.
- Web
Sito per designer freelance
+25Un sito audace per un designer solista che vende pacchetti a prezzo fisso: pagine dei piani, casi di studio e modulo di brief.
- Web
Template sito glassmorphism
+25Pillole di vetro su fondo quasi nero, titolo serif enorme con una parola in corsivo e iscrizione via email.
- Web
Sito di prodotti hardware
+25Nomi dei modelli enormi e sottili su scatti da studio argentati, card di specifiche e una gamma in scala.
- Web
Diagramma di architettura interattivo
+25Un diagramma di sistema cliccabile e offline, costruito da un modello JSON verificato, con le evidenze dietro ogni riquadro.
- Web
Hero con griglia interattiva
+25Una griglia scura di fili sottili che si piega verso il cursore e fa partire un anello luminoso a ogni clic.
- Web
Esploratore di knowledge graph
+25Trasforma gli appunti di progetto in un grafo offline e ricercabile, dove ogni affermazione rimanda alla sua riga di origine.
- Web
Template dashboard KPI
+25Quattro KPI con variazioni, un grafico a linee, una tabella di dettaglio e barre obiettivo.
- Web
Landing page da mockup AI
+25Vedi prima tre progetti a pagina intera, scegline uno: il tuo agente lo costruisce come codice pulito.
- Web
Template sito web per rivista
+25Un sito di rivista con qualità da stampa, articoli, temi, un piccolo shop e abbonamenti, in un unico file HTML.
- Web
Hero con animazione di particelle
+25Testo su carta calda accanto a una sfera di punti inchiostro e verde acqua che cambia forma per ogni idea.
- Web
Sito personal brand
+25Un ritratto sfumato su carta calda sotto una sottile parentesi, con affermazioni leggere e grassetto ai lati.
- Web
Modello di sito per negozio di animali
+25Negozio funzionante di prodotti per animali: catalogo, varianti, carrello, pianificatore delle ricariche e checkout demo in un file HTML.
- Web
Modello di sito per podcast
+25Un sito per podcast con un hero riproducibile, archivio degli episodi, pagine degli ospiti e un lettore che continua a suonare.
WebSezione prezzi disegnata a mano
+25Una tabella prezzi in stile quaderno, con card inclinate a inchiostro, interruttore annuale e tema scuro, in un unico file offline.
- Web
Pagina di lancio cinematografica di prodotto
+25Pagina quasi nera in stile film: titolo serif su luci in movimento, scena notturna, modulo di prenotazione.
- Web
Sito per articolo di ricerca
+25Una pagina di progetto per il tuo articolo con Figura 1 interattiva, risultati, limiti e citazione con un clic.
- Web
Template dashboard di amministrazione
+25Una console di back office funzionante con grafici, tabelle, kanban e calendario, in un unico file HTML offline.
- Web
Template landing page SaaS
+25Un sito di marketing chiaro e sobrio per un prodotto software, con console di prodotto funzionante, prezzi e iscrizione.
- Web
Sito portfolio in stile scrapbook
+25Un CV online su più pagine fatto di oggetti di carta, con case study e un curriculum stampabile.
- Web
Template sito e-commerce di sneaker
+25Un negozio completo di scarpe o abbigliamento con catalogo, pagine prodotto, carrello e checkout demo in un unico file HTML.
- Web
Modello di sito per società sportiva
+25Sito per club, palestra o studio con orario, pagine degli allenatori, abbonamenti, planimetria dei campi e prenotazione in un unico file.
- Web
Modello di sito per agenzia di viaggi
+25Un sito centrato sulle foto per tour, guide o rifugi, con ricerca dei viaggi, richieste di prenotazione e un quiz per trovare il viaggio.
- Web
Landing page per automazione di workflow
+25Pagina in grafite con titolo piccolo a sinistra e sotto un grafo di nodi dal vivo che esegue e riprova.
Domande
Perché viene fornito con card segnaposto invece di recensioni di esempio?
Le recensioni inventate accanto a nomi e volti ingannano i lettori e possono violare le regole pubblicitarie. Il modello usa card etichettate come Esempio, così il layout è visibile, e il controllo non fa passare la pagina finché ogni card non ha una fonte reale e un permesso registrato.
Può generare foto dei clienti?
No. Gli avatar sono iniziali o foto fornite dal cliente. PopNow viene usato solo per sistemare le foto fornite: ritaglia sfondi affollati, ingrandisce immagini piccole e uniforma la luce nell’insieme.
Il layout in movimento è accessibile?
Si ferma al passaggio del mouse e al focus da tastiera, ha un pulsante Pausa visibile, nasconde le card duplicate del loop agli screen reader e passa alla griglia statica quando è attiva la riduzione del movimento.
La versione React richiede una libreria di animazione?
No. Il movimento è un keyframe CSS e il componente dipende solo da React, quindi funziona in Next.js, Vite, Remix o nelle isole di Astro.
Il muro può diventare una pagina di testimonianze completa?
Sì. Lo stesso componente riempie un’intera pagina web di testimonianze con filtri per prodotto o ruolo, oppure sta nella home come breve sezione di testimonianze. Il design della sezione e l’interfaccia delle testimonianze sono disponibili in chiaro e scuro, e rende l’idea di un muro di apprezzamenti senza inventare una sola citazione.