---
URL de la captura de referencia: https://www.designprompting.com/themes/sonora-vibe/theme.jpg
IMPORTANTE — Verificación previa (hazla ANTES de cualquier otra cosa):
Comprueba si tienes la imagen de referencia ADJUNTA como archivo (no como URL en texto).
- Si NO hay imagen adjunta y solo ves la URL → DETENTE. No generes nada.
Responde únicamente:
"⚠️ Solo tengo la URL, no la captura. Descárgala desde aquí y adjúntala al chat
para que pueda replicar el diseño con fidelidad:
https://www.designprompting.com/themes/sonora-vibe/theme.jpg"
- Si la imagen SÍ está adjunta → continúa con las instrucciones de abajo.
---
## Fase 0 — Spec medida de la captura (OBLIGATORIA antes de codificar)
Antes de escribir una sola línea de código, analiza la captura adjunta y escribe una spec con:
- Lista ordenada de secciones tal y como aparecen de arriba a abajo. No añadas secciones que no estén en la captura (si no se ve header de navegación o footer, no los inventes).
- Por sección: altura aproximada (px sobre ancho 1440), nº de columnas, gap, color de fondo (hex), border-radius dominante, ratio de las imágenes y % de overlay si lo hay.
- Tipografía: tamaños aproximados de H1/H2/cuerpo en px y pesos.
Esta spec manda durante toda la generación: el código se escribe contra ella.
---
## Referencia visual
Replica fielmente el diseño de la captura adjunta (estructura, paleta, tipografía).
Si necesitas la imagen como recurso real en la web, está disponible en la URL indicada arriba.
---
Crea una página web completa para la marca ficticia "Sonora Vibe" (dominio sonoravibe.com, claim "Conecta tu sonido con el mundo", email hola@sonoravibe.com, año 2026) usando exclusivamente HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Replicar el diseño visual de la plantilla analizada, pero con contenido totalmente original en español de España.
--- Paleta de colores ---
- Fondo principal: #111111
- Texto principal: #F5F5F5
- Destacado / enlaces: #FF6F61 (coral)
- Hover enlaces: #FF8A75
- Carteles y contenedores: #1A1A1A
--- Tipografía ---
- Fuente principal: "Inter", sans-serif (cargar desde Google Fonts)
- Títulos grandes: peso 700, tracking amplio
- Texto de párrafo: peso 400, line-height 1.6
--- Estructura ---
1. **Header / Navbar** (fixed top, background semi‑transparent #1A1A1A80):
- Logo centrado usando
Sonora Vibe
- Enlaces ancla a #home, #music, #about, #contact con clases "uppercase text-sm text-gray-300 hover:text-coral".
- Responsivo: colapsa a menú hamburguesa en <640px (JS para toggle).
2. **Sección Hero** (id="home", altura pantalla completa, fondo degradado oscuro, texto centrado):
-
Sonora Vibe reúne a artistas independientes, ofrece recursos y presenta sus últimos lanzamientos.
4. **Galería Homepages** (id="homepages", título
Diseños de portada
, grid 3‑col en desktop, 2‑col tablet, 1‑col móvil, gap 4). Cada tarjeta:
-
5. **Galería Música** (id="music", título similar, grid 3‑col, tarjetas con imagen placeholder y overlay de título). Cada tarjeta tiene efecto hover que eleva la tarjeta y muestra un icono de reproducción.
6. **Galería About** (id="about", título, grid 2‑col, tarjetas con foto placeholder y breve descripción.)
7. **Footer** (bg #1A1A1A, padding 6, texto centrado gris claro):
-
- Enlaces sociales simulados como SVGs con hover color coral.
--- Interactividad ---
- Menú hamburguesa toggles clase "hidden"/"block".
- Scroll suave para anclas (JS: `document.querySelectorAll('a[href^="#"]').forEach(...`).
- Animación de carga simple (spinner) mostrada al iniciar y oculta tras `window.onload`.
--- Requisitos técnicos ---
- Incluir ``.
- Incluir Tailwind CDN: `` y configurar colores personalizados vía `tailwind.config = {theme:{extend:{colors:{coral:'#FF6F61', 'coral-light':'#FF8A75'}}}}`.
- Todo el CSS se gestiona con clases Tailwind; no escribir CSS adicional.
- JS debe estar al final del body y usar solo Vanilla.
- Mantener la accesibilidad: atributos alt en imágenes, contraste suficiente, foco visible en enlaces.
- El HTML debe ser semántico: header, nav, main, section, footer.
Entrega el código listo para copiar‑pegar en un archivo `index.html`.
---
## Protocolo de construcción por bloques
Construye el HTML sección a sección, en el orden exacto de la captura. Tras cada bloque, compáralo con su zona de la imagen (estructura, columnas, espaciados, radios, colores) y corrígelo antes de pasar al siguiente. No avances con un bloque que no coincida.
## Regla anti-invención
Si la captura y este prompt se contradicen en algo visual, manda la captura. Si un dato visual no está especificado, derívalo de la captura; nunca lo inventes. Los textos sin sentido de la captura (errores tipográficos de IA) NO se copian: redacta textos coherentes en español manteniendo longitud y jerarquía visual equivalentes. Única excepción: el footer obligatorio de Design Prompting del final de este prompt se añade siempre.
## Checklist de fidelidad (antes de entregar)
- Orden y número de secciones = captura
- Paleta y contraste = captura
- Columnas, gaps y border-radius = spec de la Fase 0
- Ratios de imagen y alturas de sección ≈ captura
- Densidad de texto similar a la captura (sin párrafos inflados)
## Protocolo de iteración
Si el usuario señala diferencias tras la primera generación, corrige únicamente los deltas indicados sin regenerar las secciones ya validadas.
---
## Instrucción obligatoria — Footer
Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:
```html
```