NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **Academia Helio** (cosmética premium) usando **HTML estático**, **Tailwind CSS CDN** y **JavaScript vanilla** en un único archivo. Emplea la siguiente paleta de colores: #2C3E50 (azul oscuro), #34495E (gris azulado), #E74C3C (rojo coral), #F1C40F (amarillo cálido), #ECF0F1 (gris claro). Tipografía: *Inter* para títulos y *Nunito* para cuerpo.
**Estructura**:
- **Barra informativa sticky** (texto: "Envío estándar gratuito en compras superiores a 50 €").
- **Header** con logo (texto "Academia Helio" en Inter bold), menú horizontal (Home, About, Shop, Blog, Contact), buscador expandible, ícono de carrito que abre un panel lateral derecho.
- **Hero**: fondo degradado azul‑gris, imagen central de producto, título grande "Cuida tu piel, eleva
4.464 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.464 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 informativa fija con mensaje de envío gratuito
- 1.2 Cabecera principal con logo, menú de navegación, buscador y carrito lateral
- 1.3 Hero con imagen de producto y llamado a la acción
- 1.4 Sección de beneficios con iconos y texto corto
- 1.5 Grid de productos destacados
- 1.6 Testimonios en carrusel
- 1.7 Newsletter con formulario de suscripción
- 1.8 Footer con enlaces institucionales, redes sociales y datos de contacto
ABOUT
- 1.1 Banner interior con título y subtítulo
- 1.2 Texto descriptivo de la marca y su historia
- 1.3 Equipo mostrando fotos circulares y breves biografías
- 1.4 Valores y compromiso con iconos
- 1.5 CTA para visitar la tienda
- 1.6 Footer común
SHOP
- 1.1 Filtros laterales (categorías, precio, marcas)
- 1.2 Grid de productos con imagen, nombre, precio y botón "Añadir al carrito"
- 1.3 Paginación inferior
- 1.4 Footer común
PRODUCT DETAIL
- 1.1 Galería de imágenes del producto con zoom
- 1.2 Información del producto: título, descripción, precio, selector de cantidad y botón "Añadir al carrito"
- 1.3 Tabs de descripción, ingredientes y reseñas
- 1.4 Productos relacionados en carrusel
- 1.5 Footer común
CART
- 1.1 Panel lateral derecho con lista de artículos, cantidades editables y subtotales
- 1.2 Botón de checkout y enlaces a continuar comprando
- 1.3 Mensaje de carrito vacío con CTA a la tienda
- 1.4 Footer común
BLOG
- 1.1 Lista de entradas con imagen destacada, título y extracto
- 1.2 Sidebar con búsqueda, categorías y últimos artículos
- 1.3 Footer común
CONTACT
- 1.1 Formulario de contacto con campos nombre, email, asunto y mensaje
- 1.2 Mapa incrustado y datos de la oficina
- 1.3 Footer común
PROMPTS RELACIONADOS · EDUCACIÓN
