--- URL de la captura de referencia: https://www.designprompting.com/themes/lumina-creador/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/lumina-creador/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 de una landing page para la marca ficticia "Lúmina Creador" (luminacreador.com). Usa solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Paleta de colores: #1F2937 (gris oscuro), #3B82F6 (azul primario), #F3F4F6 (gris claro), #FFFFFF (blanco). Tipografía: "Inter" para encabezados y "Source Sans Pro" para cuerpo. Estructura: - **Header** fijo, fondo blanco, sombra ligera, logo a la izquierda (placeholder), navegación centrada con enlaces Home, Services, Blogs, Pages (mega‑dropdown con secciones PAGES, UTILITY, CMS, E‑commerce), y a la derecha botón "Let’s Connect" con estilo primary. - **Hero** ocupa pantalla completa verticalmente, fondo gris claro, título grande (h1) en azul primario, párrafo centrado en gris oscuro, botón principal "Purchase Template" con transición de fondo a negro y flecha circular a la derecha. - **Galería** de cuatro imágenes en fila responsiva (grid 2‑cols en móvil, 4‑cols en escritorio), cada imagen con efecto fade‑in al scroll (usar IntersectionObserver). Imágenes placeholders con atributos alt descriptivos (Servicio, Blog, Home, Proyectos). - **Footer** fondo gris oscuro, texto claro, enlaces a política, términos y redes sociales como íconos SVG simples. Requisitos técnicos: - Incluir `` y configuración de colores en `tailwind.config` mediante `tailwind.config = { theme: { extend: { colors: { primary: '#3B82F6', dark: '#1F2937', light: '#F3F4F6' } } } }`. - Cargar fuentes Google Fonts con ``. - Implementar mega‑dropdown usando CSS y JavaScript para apertura en hover y cierre al mover el mouse fuera. - Animaciones de aparición: añadir clase `opacity-0 translate-y-4` y al intersectar aplicar `opacity-100 translate-y-0 transition-all duration-700`. - Asegurar accesibilidad: atributos `alt` en imágenes, `aria-label` en botones y `role="navigation"` en el menú. - Responsive: mobile‑first, ajustes de tipografía y espaciado con breakpoints Tailwind. Entrega el código completo 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 ```