NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una web completa para la marca ficticia "Armonía Sonora" (escuela de música y taller creativo) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. La página debe reproducir el layout y los patrones UI del sitio original sin copiar texto ni imágenes.
**Paleta de colores** (hex):
- Primario: #1A73E8 (azul profundo)
- Secundario: #F5F7FA (gris muy claro)
- Texto principal: #212529 (gris casi negro)
- Texto secundario: #6C757D (gris medio)
- Acents: #FF6F61 (coral suave) para botones y enlaces.
**Tipografía**:
- Fuente principal: `Inter` (Google Fonts), peso 400 y 600.
- Fuente secundaria (títulos): `Playfair Display`, peso 700.
**Header**: barra fija con logo de texto "Armonía Sonora" (svg placeholder), menú horizontal con items: Inicio, Sobre nosotros, Clase
4.296 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.296 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 Barra de navegación fija con logo, mega‑menú y botón de carrito
- 2.1 Hero con fondo claro, título grande, subtítulo y CTA principal
- 3.1 Sección de enlaces destacados en columnas (Demos, Sobre la escuela, Clases, Programas, Todas las páginas)
- 4.1 Mini‑cart modal oculto, activado por el icono del carrito
- 5.1 Footer con enlaces de información, contacto y redes sociales
ABOUT US
- 1.1 Header igual que Home
- 2.1 Imagen de presentación y texto descriptivo
- 3.1 Valores y misión en tarjetas
- 4.1 Equipo docente en grid
- 5.1 Footer
CLASSES
- 1.1 Header
- 2.1 Lista de categorías de clases en cards
- 3.1 Detalle de clase seleccionada con foto, descripción y botón de reserva
- 4.1 Footer
PROGRAMS
- 1.1 Header
- 2.1 Grid de programas con imagen, título y breve descripción
- 3.1 CTA para inscribirse
- 4.1 Footer
SHOP
- 1.1 Header
- 2.1 Grid de productos con foto, nombre, precio y botón "Añadir al carrito"
- 3.1 Pagina de detalle de producto
- 4.1 Footer
BLOG
- 1.1 Header
- 2.1 Lista de artículos en tarjetas con imagen y extracto
- 3.1 Página detalle de artículo
- 4.1 Footer
CONTACT US
- 1.1 Header
- 2.1 Formulario de contacto con campos nombre, email, mensaje y botón enviar
- 3.1 Mapa incrustado y datos de contacto
- 4.1 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
