NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Ágora Visual, agencia de producción audiovisual, usando un único archivo HTML que incluya Tailwind CSS vía CDN y JavaScript vanilla. El diseño debe replicar los patrones UI del template analizado:
- **Header**: barra fija con fondo negro semi‑transparente, logo a la izquierda (SVG simple), menú central con enlaces (Home, About, Portfolio, Blog, Pricing) estilo texto uppercase, estado activo resaltado, y botón de carrito a la derecha que abre un modal.
- **Hero**: sección full‑width con fondo oscuro (#111111) y overlay de degradado, título grande (font "Inter" 4xl, color #FFFFFF), subtítulo gris claro #CCCCCC, botón principal con fondo #FF5A5F y hover #E04E52, padding vertical 12rem.
- **Servicios**: grid 3 columnas en pantalla md+, cada
4.146 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.146 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
ESTRUCTURA DEL SITIO
Tabla de secciones
HOME
- 1.1 Header con logo, menú y carrito modal
- 1.2 Hero con título, subtítulo y botón CTA
- 1.3 Servicios (3 columnas) con icono, título y texto
- 1.4 Portfolio de casos (tarjetas) con imagen y enlace
- 1.5 Testimonios en carrusel
- 1.6 CTA secundaria sobre fondo contrastante
- 1.7 Footer con enlaces, datos de contacto y redes
ABOUT
- 1.1 Header idéntico al home
- 1.2 Hero interno con imagen y texto introductivo
- 1.3 Historia de la agencia en bloque de texto + imagen
- 1.4 Equipo en tarjetas con foto, nombre y rol
- 1.5 Valores en iconos y breves descripciones
- 1.6 CTA para contactar
- 1.7 Footer idéntico al home
PORTFOLIO
- 1.1 Header
- 1.2 Filtro de categorías
- 1.3 Grid de proyectos (tarjetas) con hover y enlace a detalle
- 1.4 Paginación
- 1.5 Footer
BLOG
- 1.1 Header
- 1.2 Listado de artículos en tarjetas con imagen, título y extracto
- 1.3 Barra lateral con categorías y búsqueda
- 1.4 Footer
SERVICES (Pricing)
- 1.1 Header
- 1.2 Tabla de planes/servicios con columnas y botón de compra
- 1.3 Preguntas frecuentes en acordeón
- 1.4 Footer
CART (modal)
- 1.1 Lista de productos añadidos con imagen, nombre, precio y cantidad editable
- 1.2 Subtotal y botones de continuar compra o cerrar
- 1.3 Estado vacío con mensaje y enlace a Servicios
CHECKOUT
- 1.1 Header
- 1.2 Formulario de datos de facturación y método de pago
- 1.3 Resumen del pedido
- 1.4 Botón finalizar compra
- 1.5 Footer
PROMPTS RELACIONADOS · AGENCIA DIGITAL
