--- URL de la captura de referencia: https://www.designprompting.com/themes/proyecto-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/proyecto-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 **Proyecto Aurora**, una organización sin ánimo de lucro que conecta personas y recursos para generar cambio real. Usa **HTML**, **Tailwind CSS CDN**, y **JavaScript vanilla** en un único archivo. Reproduce fielmente la **estructura visual** y la **experiencia interactiva** del sitio origen, sin copiar texto ni imágenes. **Alcance** - Header fijo con logo (SVG placeholder), menú principal con dropdowns y megamenú, botón primario "Contactar". - Hero animado: título grande, subtítulo, y carrusel de tres screenshots (usar imágenes de placeholder). Animación de aparición desde abajo. - Sección "Confían en nosotros": fondo gris claro, encabezado blanco, párrafo descriptivo. - Bloques posteriores (testimonios, contadores, llamada a la acción) pueden ser representados con placeholders de texto e iconos de Heroicons. - Footer global con columnas: enlaces rápidos, contactos, redes sociales (SVG icons), y copyright. **Paleta de colores** (extraer del original): - Primario: #1F4E79 (azul profundo) - Secundario: #F5A623 (ámbar cálido) - Fondo claro: #F9FAFC - Texto oscuro: #2D2D2D - Texto claro: #FFFFFF **Tipografía**: usar `Inter` para títulos y `Roboto` para cuerpo (cargar desde Google Fonts). **Componentes interactivos**: - Menú hamburguesa colapsable en móvil. - Dropdowns con transiciones de opacidad y desplazamiento. - Carrusel de screenshots con botones prev/next (simple JS). - Botones con efecto hover (cambio de fondo a primary‑lighter). **Requisitos técnicos**: 1. Incluir en `` enlaces a Tailwind CDN y Google Fonts. 2. Todo el CSS debe usar clases Tailwind; evitar CSS personalizado salvo variables de color. 3. JavaScript debe manejar el toggle del menú mobile y el carrusel. 4. Utilizar estructura semántica: `
`, `