--- URL de la captura de referencia: https://www.designprompting.com/themes/stack-marea/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/stack-marea/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 un sitio web estático para la marca ficticia Stack Marea (stackmarea.com), una plataforma SaaS de gestión de talento y nóminas. Usa HTML simple con Tailwind CSS CDN y JavaScript vanilla en un solo archivo. **Paleta de colores**: #1E3A8A (azul marino), #3B82F6 (azul brillante), #E5E7EB (gris claro), #F9FAFB (blanco casi puro), #10B981 (verde teal) para acentos. **Tipografía**: Inter para cuerpo y encabezados, pesos 400 y 600, tamaños responsivos. **Header**: barra de navegación fija, logo a la izquierda, menú principal con enlaces Home, Features, Company, Resources, Pricing y botón secundario "Sign In" y primario "Sign Up" a la derecha. Incluye dropdown bajo "Pages" con columnas "Pages" y "Inner Pages" y enlaces de ejemplo. Añade icono de carrito que abre modal sencillo con lista de productos y subtotales. **Home sections**: 1.1 Hero: contenedor centrado, título grande, subtítulo, dos botones (CTA principal azul, CTA secundario verde), imagen ilustrativa a la derecha. 1.2 Características: grid de 3 tarjetas, cada una con icono SVG, título y breve descripción. 1.3 Integraciones: fila horizontal de logos de partners (gris claro) con hover azul. 1.4 Testimonios: carrusel horizontal de 3 tarjetas con foto redonda, nombre, cargo y comentario. 1.5 CTA secundario: bloque con fondo gris claro, texto centrado y botón destacado. 1.6 Footer: fondo azul marino, columnas de enlaces (Producto, Empresa, Recursos, Legal), formulario de suscripción simple (email + botón) y iconos de redes sociales. **Otras páginas** (Features, Company, Blog, Pricing) deben reutilizar el mismo header/footer y presentar contenido según la tabla de bloques. Cada página incluye título hero, contenido principal estructurado en secciones enumeradas en la tabla. **Requisitos técnicos**: - Utiliza Tailwind CDN (`https://cdn.tailwindcss.com`). - JavaScript para dropdowns, carrito modal y carrusel (vanilla, sin dependencias). - Asegura accesibilidad: `role`, `aria-label`, foco visible. - Responsivo: mobile‑first, colapsa menú en icono hamburguesa en pantallas <768px. - Código bien indentado y comentado. Genera el código completo listo para copiar‑pegar. --- ## 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 ```