Qué obtienes
- Una única sección HTML sin conexión con maquetaciones en cuadrícula y a la deriva, pausa y modo oscuro
- Un componente de React con campos tipados de origen y permiso
- Un verificador que falla con texto de ejemplo, consentimiento ausente, iconos de emoji y recursos remotos
- Un correo de solicitud y una guía para llevar el registro de las citas recogidas
- Limpieza opcional de retratos con PopNow, tras presupuestar
Ideal para
- Landings de SaaS, apps y cursos
- Webs de agencias y freelancers con clientes satisfechos
- Páginas de lanzamiento que ya tienen opiniones de primeros usuarios
No es para
- Páginas que todavía no tienen citas reales
- Widgets de valoración con estrellas que necesitan una fuente de reseñas verificada
- Testimonios en vídeo
Cómo usarlo
En Claude o ChatGPT
Usa el skill de PopNow «Sección de muro de testimonios» (testimonial-wall-section) para esto: Añade un muro de testimonios a nuestra landing de Astro con las seis citas aprobadas de content/quotes.json. Usa iniciales para quien no tenga foto.
En un agente de programación
/popnow-testimonial-wall-section Añade un muro de testimonios a nuestra landing de Astro con las seis citas aprobadas de content/quotes.json. Usa iniciales para quien no tenga foto.
Luego prueba
Presupuesta recortar los tres retratos que enviaron los clientes y ajustar su luz.
Redacta el correo de solicitud de permiso para las dos citas que encontramos en los tickets de soporte.
Qué tener a mano
- Citas reales de clientes con nombres y cargos tal como quieren que aparezcan
- El consentimiento de cada persona para ser citada, y las fotos que te hayan enviado
- Los colores de tu página si son distintos del papel cálido y el verde azulado
- Opcional: una clave de API de PopNow para la limpieza de retratos
Skills similares
Ver todos →- Web
Creador de avatares 3D
+25Crea un adorable personaje 3D de peluche en tu navegador y guárdalo como PNG transparente o como página 3D.
- Web
Mapa de calor de calendario
+25Un año de actividad diaria en una cuadrícula de calendario sombreada, con rachas, totales y acceso por teclado.
- Web
Landing page de SaaS con IA
+25Papel arena cálido y guías finas alrededor de un tablero kanban en vivo donde un asistente planifica tareas.
- Web
Sección hero animada
+25Un hero de landing page con una palabra del titular que rota suavemente, dos botones y un marco ancho para imagen.
- Web
Plantilla de web para marca de bebidas
+25Web soleada para marca de bebidas o snacks con tienda, configurador de packs, mapa de puntos de venta y pago de demostración.
- Web
Web de agencia creativa con héroe shader
+25Un héroe shader vivo en naranja tras un titular anclado abajo, navegación en píldora y casos en cuadrícula.
- Web
Landing page SaaS oscura
+25Una web de marketing oscura y llena de movimiento para un producto de software, entregada como un único archivo HTML autónomo.
- Web
Web de portafolio para diseñadores
+25Seis tarjetas inclinadas flotan alrededor de un titular que se desvanece, con una tarjeta de retrato roja.
- Web
Web de portfolio para desarrolladores
+25Una web personal oscura para ingenieros con casos de estudio, artículos, charlas, currículum y formulario de contacto.
- Web
Web SaaS de estilo editorial
+25Héroe dividido en azul marino, titular serif junto a una foto documental y un acento cobalto.
- Web
Web para diseñador freelance
+25Web atrevida de estudio de una persona que vende paquetes de precio fijo, con páginas de plan, casos de estudio y formulario de encargo.
- Web
Plantilla web de glassmorphism
+25Píldoras de cristal esmerilado sobre fondo casi negro, titular serif enorme y captura de correo.
- Web
Web de producto de hardware
+25Nombres de modelo enormes y finos sobre fotos de estudio plateadas y tarjetas de especificaciones.
- Web
Diagrama de arquitectura interactivo
+25Un diagrama de sistema offline y clicable, creado a partir de un modelo JSON validado, con la evidencia detrás de cada caja.
- Web
Héroe con cuadrícula interactiva
+25Una cuadrícula oscura de hilos finos que se inclina hacia el cursor y lanza un anillo luminoso con cada clic.
- Web
Explorador de grafos de conocimiento
+25Convierte notas de proyecto en un grafo offline y con búsqueda donde cada afirmación enlaza con su línea de origen.
- Web
Plantilla de panel de KPIs
+25Cuatro KPIs con indicadores de cambio, gráfico de líneas, desglose y barras de objetivo.
- Web
Landing page desde maquetas de IA
+25Ve tres diseños de página completa primero, elige uno y tu agente lo construye como código limpio y adaptable.
- Web
Plantilla web para revistas
+25Una web de revista con calidad de imprenta, con artículos, temas, una pequeña tienda y suscripciones, en un único archivo HTML.
- Web
Héroe con animación de partículas
+25Texto sobre papel cálido junto a una esfera de puntos que cambia con cada idea.
- Web
Web de marca personal
+25Retrato fundido con papel cálido bajo un corchete fino, con afirmaciones a cada lado.
- Web
Plantilla de web para tienda de mascotas
+25Tienda de mascotas funcional: catálogo, variantes, bolsa, planificador de recargas y pago de demo en un solo archivo HTML.
- Web
Plantilla de web para podcast
+25Web de podcast con un hero reproducible, archivo de episodios, páginas de invitados y un reproductor que sigue sonando.
WebSección de precios dibujada a mano
+25Tabla de precios al estilo cuaderno, con tarjetas de tinta inclinadas, conmutador anual y modo oscuro, en un solo archivo sin conexión.
- Web
Página de lanzamiento de producto cinematográfica
+25Página oscura con iluminación de cine: titular serif, escena nocturna y formulario de reserva.
- Web
Web para artículo de investigación
+25Página de proyecto para tu artículo con una Figura 1 interactiva, resultados, limitaciones y cita con un clic.
- Web
Plantilla de dashboard de administración
+25Una consola de back office funcional con gráficos, tablas, kanban y calendario, en un único archivo HTML offline.
- Web
Plantilla de landing page SaaS
+25Una web de marketing tranquila y luminosa para un producto de software, con consola de producto funcional, precios y registro.
- Web
Web de portfolio estilo scrapbook
+25Un CV online de varias páginas hecho con objetos de papel, con casos de estudio y un currículum imprimible.
- Web
Plantilla web de tienda de zapatillas
+25Una tienda completa de calzado o ropa con catálogo, páginas de producto, cesta y checkout de demostración en un único HTML.
- Web
Plantilla de web para club deportivo
+25Web de club, gimnasio o estudio con horario, páginas de entrenadores, membresías, plano de pistas y reservas en un solo archivo.
- Web
Plantilla de web para agencia de viajes
+25Web centrada en la foto para excursiones, guías o refugios, con búsqueda de viajes, solicitudes de reserva y cuestionario de viaje.
- Web
Landing page de automatización de flujos
+25Página grafito, titular pequeño y un grafo de nodos en vivo que ejecuta, reintenta y transmite registros.
Preguntas
¿Por qué viene con tarjetas de ejemplo en lugar de reseñas de muestra?
Las reseñas inventadas junto a nombres y caras engañan a los lectores y pueden infringir las normas publicitarias. La plantilla usa tarjetas marcadas como Muestra para que se vea la maquetación, y el verificador no deja pasar la página hasta que cada tarjeta tenga una fuente real y un permiso registrado.
¿Puede generar fotos de clientes?
No. Los avatares son iniciales o fotos que aportó el cliente. PopNow solo se usa para ordenar fotos aportadas: recortar fondos recargados, ampliar imágenes pequeñas e igualar la luz de todo el conjunto.
¿Es accesible la maquetación a la deriva?
Se pausa al pasar el ratón y al enfocar con el teclado, tiene un botón de Pausa visible, oculta a los lectores de pantalla las tarjetas duplicadas del bucle y cambia a la cuadrícula estática cuando está activada la reducción de movimiento.
¿Necesita la versión de React una biblioteca de animación?
No. La deriva es un fotograma clave de CSS y el componente solo depende de React, así que funciona en Next.js, Vite, Remix o islas de Astro.
¿Puede el muro convertirse en una página completa de testimonios?
Sí. El mismo componente llena una página web de testimonios completa con filtros por producto o cargo, o se coloca en tu página de inicio como una sección breve de testimonios. El diseño de la sección y la interfaz de testimonios se entregan en claro y oscuro, y funciona como un muro de amor sin inventar una sola cita.