NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Diseña un sitio web completo para la marca ficticia **Educa Boreal** (consultoría estratégica y transformación digital) usando exclusivamente HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Emplea la siguiente paleta de colores: primary #0D3B66, accent #FAF0CA, secondary #F4D35E, background #F0F4F8, text #212529. Tipografía: headings con *Inter* (font-weight 600) y body con *Open Sans* (font-weight 400), ambas cargadas desde Google Fonts.
**Estructura global**
- `<header>` fijo con logo (texto "Educa Boreal" en Inter bold), menú de navegación horizontal con enlaces: Overview, Services, About, Pricing, Blog, Contact. Cada enlace abre un dropdown multicolumna con enlaces internos (ejemplo: Services > Version 1, Version 2, Version 3). A la derecha del menú, dos botones:
4.634 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.634 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 Header con logo, menú principal, dropdowns multicategoría y botones de acción
- 1.2 Hero central con badge, título, subtítulo y botones CTA
- 1.3 Hero grid de dos carruseles paralelos (imágenes de plantilla)
- 1.4 Sección de presentación de servicios (cuadrícula de iconos y textos)
- 1.5 Sección de casos de estudio (cards con imagen y breve descripción)
- 1.6 Llamado a la acción final con botón de compra
- 1.7 Footer con información de empresa, enlaces rápidos y redes sociales
SERVICES
- 2.1 Header reutilizado
- 2.2 Título de página y descripción introductoria
- 2.3 Grid de servicios con iconos, título y breve texto
- 2.4 Testimonios en carrusel
- 2.5 CTA de contacto
- 2.6 Footer reutilizado
ABOUT
- 3.1 Header reutilizado
- 3.2 Hero interno con foto del equipo y mensaje institucional
- 3.3 Timeline de historia de la empresa
- 3.4 Valores en tarjetas
- 3.5 CTA para descargar brochure
- 3.6 Footer reutilizado
CONTACT
- 4.1 Header reutilizado
- 4.2 Formulario de contacto simple (nombre, email, mensaje)
- 4.3 Mapa incrustado
- 4.4 Información de contacto y redes
- 4.5 Footer reutilizado
PRICING
- 5.1 Header reutilizado
- 5.2 Tabla comparativa de planes (tres columnas)
- 5.3 Lista de beneficios por plan
- 5.4 Botones de selección de plan
- 5.5 FAQ acordeón
- 5.6 Footer reutilizado
BLOG
- 6.1 Header reutilizado
- 6.2 Lista de artículos en tarjetas (imagen, título, snippet, fecha)
- 6.3 Sidebar con categorías y últimos posts
- 6.4 Paginación
- 6.5 Footer reutilizado
PROMPTS RELACIONADOS · EDUCACIÓN
