NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca "Educa Ámbar" utilizando solo HTML, Tailwind CSS vía CDN y JavaScript vanilla (todo en un único archivo). La web debe replicar el diseño visual y la estructura de la plantilla analizada, sin copiar texto ni imágenes originales. Usa una paleta de colores basada en #2a2a2a (negro profundo), #ffffff (blanco), #0ea5e9 (azul eléctrico) y tonos de gris #f3f4f6 y #d1d5db. Tipografía: Inter para cuerpo y encabezados, con una fuente serif ligera (por ejemplo, Merriweather) solo para la palabra resaltada en el título del hero.
Estructura:
- Header fijo con logo animado (video background placeholder), menú horizontal (Home, Sobre Nosotros, Casos, Servicios, Contacto) y botones de redes sociales (Instagram, X, LinkedIn, Facebook) usando SVG inline.
- Hero:
3.786 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.786 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 animado, menú horizontal y botones sociales
- 1.2 Hero con subtítulo, título destacado y botón CTA
- 1.3 Servicios en tarjetas con icono y descripción breve
- 1.4 Portfolio de casos con grid de imágenes y efecto hover
- 1.5 Testimonios rotatorios
- 1.6 Contador de métricas (proyectos, clientes, horas)
- 1.7 CTA de contacto con formulario breve
- 1.8 Footer con navegación secundaria, redes y datos de contacto
ABOUT
- 1.1 Cabecera interior con fondo sólido y título
- 1.2 Texto institucional con imagen a la izquierda
- 1.3 Valores en columnas con iconos
- 1.4 Equipo en tarjetas con foto, nombre y rol
- 1.5 CTA de unión al equipo
SERVICES
- 1.1 Cabecera interior con título y breve descripción
- 1.2 Lista de servicios en bloques expandibles
- 1.3 Caso de estudio destacado
- 1.4 CTA de solicitud de propuesta
CASE‑STUDIES
- 1.1 Cabecera interior con filtro por categoría
- 1.2 Grid de proyectos con miniatura y overlay
- 1.3 Detalle de proyecto al hacer clic (modal)
- 1.4 CTA de contacto
CONTACT
- 1.1 Cabecera interior con título
- 1.2 Formulario de contacto (nombre, email, mensaje)
- 1.3 Mapa incrustado y datos de oficina
- 1.4 Footer repetido
PROMPTS RELACIONADOS · EDUCACIÓN
