NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "Brújula Solidaria" (brujulasolidaria.com) siguiendo el estilo de la plantilla analizada. Utiliza HTML5 estático, Tailwind CSS vía CDN y JavaScript vanilla en un solo archivo. Paleta de colores: #044E54 (verde profundo), #0A9396 (verde medio), #94D2BD (verde claro), #E9F5DB (crema), #FFFFFF (blanco) y acentos #EE9B00 (amarillo). Tipografía: "Inter" para textos y "Domine" para encabezados, ambos importados de Google Fonts.
Estructura:
- **Header / Navbar**: barra fija, logo a la izquierda (SVG placeholder), enlaces: Home, Programas, Eventos, Sobre Nosotros (dropdown con Quiénes somos, Blog, Colaboradores), Involúcrate. Botón secundario "Contacto" y botón primario "Donar" con apertura de modal (simulado). Responsive con hamburguesa en móvile
4.703 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.703 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
ESTRUCTURA DEL SITIO
Tabla de secciones
HOME
- 1.1 Navbar con logo, enlaces principales, dropdown y botones secundarios
- 1.2 Hero interno centrado con subtítulo, título, tags y mockup visual
- 1.3 Grid de iconos/beneficios (8 ítems) con encabezado y descripción
- 1.4 Sección CTA con fondo oscuro, texto persuasivo y dos botones
- 1.5 Footer con columnas de enlaces, datos de contacto y redes sociales
PROGRAMAS
- 1.1 Navbar (reutilizado)
- 1.2 Cabecera de página con título y breve descripción
- 1.3 Lista de programas en tarjetas con imagen, título y extracto
- 1.4 CTA de suscripción o contacto
- 1.5 Footer (reutilizado)
EVENTOS
- 1.1 Navbar
- 1.2 Cabecera de eventos con filtro de fechas
- 1.3 Grid de eventos (tarjetas con fecha, imagen, título)
- 1.4 Botón para más eventos
- 1.5 Footer
ACERCA DE NOSOTROS
- 1.1 Navbar
- 1.2 Hero con foto de equipo y misión
- 1.3 Texto descriptivo y valores
- 1.4 Equipo en tarjetas con foto y rol
- 1.5 Footer
BLOG
- 1.1 Navbar
- 1.2 Hero de blog con buscador
- 1.3 Lista de artículos en tarjetas
- 1.4 Paginación
- 1.5 Footer
CONTACTO
- 1.1 Navbar
- 1.2 Formulario de contacto con campos nombre, email, mensaje
- 1.3 Información de oficina y mapa embed
- 1.4 Footer
PROMPTS RELACIONADOS · EDUCATION
