NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **Educa Helio** (e‑commerce de artículos de diseño) usando **HTML exclusivamente en un solo archivo**, **Tailwind CSS vía CDN** y **JavaScript vanilla** para la interactividad (menú desplegable, carrito modal, carrusel de testimonios).
### Paleta de colores
- Fondo principal: #F9FAFB (gris muy claro)
- Primario/acento: #0EA5E9 (azul celeste)
- Secundario: #14B8A6 (verde‑azulado)
- Texto oscuro: #1F2937
- Texto claro: #FFFFFF
### Tipografía
- Fuente principal: **Inter** (Google Fonts) – peso 400/500/700
- Fuente de encabezados: **Playfair Display** – peso 600/700
### Estructura requerida
1. **Header / Navbar** (clase `fixed w-full bg-white shadow`)
- Logo a la izquierda (texto "Educa Helio" con `font-playfair`).
- Enlaces: Home, Dem
4.454 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.454 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 Barra de navegación fija con logo, enlaces principales y carrito modal
- 1.2 Hero principal con título, subtítulo y botón CTA
- 1.3 Cuadrícula de productos destacados con imagen, nombre y precio
- 1.4 Área de testimonios con carrusel sencillo
- 1.5 Bloque de últimas entradas del blog en formato tarjetas
- 1.6 Footer con enlaces de ayuda, redes sociales y datos de la empresa
ABOUT US
- 2.1 Barra de navegación
- 2.2 Hero interior con imagen de fondo y texto descriptivo
- 2.3 Texto largo sobre la misión y valores
- 2.4 Equipo con tarjetas de perfil
- 2.5 Footer
SERVICES
- 3.1 Barra de navegación
- 3.2 Hero con lista de servicios en columnas
- 3.3 Detalle de cada servicio con ícono y descripción
- 3.4 CTA a la tienda
- 3.5 Footer
SHOP
- 4.1 Barra de navegación
- 4.2 Filtro lateral y barra de búsqueda
- 4.3 Cuadrícula de productos (imagen, nombre, precio, botón "Añadir")
- 4.4 Paginación
- 4.5 Footer
PRODUCT DETAIL
- 5.1 Barra de navegación
- 5.2 Galería de imágenes del producto
- 5.3 Información del producto (nombre, precio, descripción, variantes)
- 5.4 Botón "Añadir al carrito"
- 5.5 Productos relacionados en carrusel
- 5.6 Footer
BLOG
- 6.1 Barra de navegación
- 6.2 Lista de artículos con tarjetas (imagen, título, extracto, fecha)
- 6.3 Sidebar con categorías y últimos posts
- 6.4 Footer
CONTACT US
- 7.1 Barra de navegación
- 7.2 Formulario de contacto (nombre, email, mensaje)
- 7.3 Mapa embebido
- 7.4 Información de contacto y horario
- 7.5 Footer
CART (modal)
- 8.1 Lista de productos en el carrito con imagen, nombre, precio, cantidad y botón eliminar
- 8.2 Subtotal y botón de checkout
- 8.3 Enlace a continuar comprando y a ver el carrito completo
PROMPTS RELACIONADOS · EDUCACIÓN
