--- URL de la captura de referencia: https://www.designprompting.com/themes/estilo-aurora/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/estilo-aurora/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 **Estilo Aurora** (plataforma de donaciones y tienda solidaria) usando **HTML5** y **Tailwind CSS vía CDN** en un solo archivo con **JavaScript vanilla** para interactividad. Mantén la estructura y estilo del sitio analizado: barra de navegación transparente con logo a la izquierda, menú principal con dropdowns y un megamenú que muestra enlaces a Home, Causas, Proyectos, Eventos, Tienda y Blog; botón destacado "Donar ahora" con efecto hover. Implementa un carrito modal que se abre al hacer clic en el ícono de carrito, mostrando productos añadidos, cantidad editable y total, con botones de eliminar y cerrar. ## Paleta de colores - #1A202C (gris oscuro, fondo principal) - #2D3748 (gris medio, cabecera y footer) - #38A169 (verde, botones primarios) - #F6E05E (amarillo, acentos y hover) - #FFFFFF (blanco, texto y fondos claros) ## Tipografía - **Font family:** 'Inter', sans-serif (cargar desde Google Fonts). - **Títulos:** peso 700, tamaño variable según sección. - **Cuerpo:** peso 400, 16px base. ## Header - `nav` fijo, fondo transparente que cambia a #2D3748 al hacer scroll. - Logo SVG a la izquierda. - Menú con enlaces y dropdowns (usa `relative` + `group` de Tailwind). - Botón primario verde con icono de círculo y texto "Donar ahora" que despliega efecto de desplazamiento de texto. - Ícono de carrito a la derecha con badge de cantidad. ## Hero - Sección `section` con altura 100vh, fondo de imagen de impacto (placeholder) cubriendo todo. - Título grande blanco, subtítulo gris claro, botón verde "Donar ahora" centrado. ## Secciones Home 1. **Causas destacadas**: grid de 3 columnas (responsive a 1 en móvil), tarjetas con imagen, título, breve descripción y botón "Conocer más". 2. **Proyectos recientes**: carrusel horizontal (implementar con scroll snapping y botones de navegación). Cada slide muestra imagen, título y botón. 3. **Testimonios**: slider de 3 columnas, cards con foto circular, nombre, comentario. 4. **Eventos próximos**: grid de 2 columnas, tarjetas con fecha, título y botón "Registrarse". 5. **Newsletter**: fondo gris claro, formulario inline con campo email y botón verde. ## Footer - Fondo #2D3748, texto gris claro. - Cuatro columnas: Navegación principal, Información de la organización, Enlaces legales, Redes sociales (iconos SVG). Incluye correo de contacto y © 2026 Estilo Aurora. ## Páginas internas (esqueleto reutilizable) - Cabecera interna con breadcrumb y título de página. - Contenido según la tabla (Causas, Proyectos, Eventos, Tienda, Blog, About Us). - Footer idéntico al de Home. ## Interactividad requerida - Menú dropdown y megamenú al pasar el ratón (usar `mouseenter` / `mouseleave`). - Botón "Donar ahora" scroll smooth a sección del formulario o abrir modal (placeholder). - Carrito modal: abrir/cerrar, añadir producto (simulado con botón "Añadir al carrito" en tarjetas de la tienda), actualizar cantidad y recalcular total. - Carrusel y sliders con controles de flecha y swipe en móvil (usar `pointerdown`/`pointerup`). - Formulario newsletter con validación básica de email. ## Requisitos técnicos - Archivo único `index.html` que incluya Tailwind CDN (`https://cdn.tailwindcss.com`) y Google Font Inter. - Scripts al final del body, sin dependencias externas. - Utilizar clases de Tailwind para todo el estilo; evitar CSS personalizado salvo lo imprescindible para scroll snapping. - Asegurarse de que la página es 100% responsiva (mobile‑first). - No copiar texto del sitio original; generar todo el copy en español neutro y original. **Entrega**: Solo el código HTML con Tailwind y JS incrustado, listo para abrir en el navegador. --- ## 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 ```