NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia **Tienda Ónix** (tienda online de bienestar y equipamiento deportivo) usando **HTML estático**, **Tailwind CSS vía CDN** y **JavaScript vanilla** en un solo archivo. El objetivo es replicar el diseño visual analizado:
- **Paleta de colores**: #1A202C (gris oscuro), #F5F5F5 (gris claro), #0EA5E9 (azul vibrante), #10B981 (verde), #EF4444 (rojo para acentos).
- **Tipografía**: `Inter` para todo el texto, pesos 400 y 600, títulos en 48px (lg) y 32px (md), párrafos 16px.
- **Header** fijo, con logo SVG (placeholder), menú de navegación horizontal, dropdown "Pages" con dos columnas de enlaces, y botón de carrito que abre un modal con lista de productos, subtotal y botón "Continuar al pago".
- **Hero** centrado, fondo con degradado azul‑verde, tí
3.729 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.729 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 Cabecera con logo, menú principal y carrito modal
- 1.2 Banner hero con título, subtítulo y botón CTA
- 1.3 Bloque de ventajas (icono + texto) en 4 columnas
- 1.4 Grid de productos destacados (imagen, nombre, precio, botón "Añadir")
- 1.5 Carrusel de testimonios (foto, nombre, comentario)
- 1.6 Sección de suscripción al boletín (campo email + botón)
- 1.7 Footer con navegación secundaria, datos de contacto y redes sociales
ABOUT US
- 2.1 Cabecera reducida con breadcrumb
- 2.2 Imagen grande con texto descriptivo de la marca
- 2.3 Valores de la empresa en tarjetas
- 2.4 Equipo en cards con foto y rol
- 2.5 CTA para contactar
SERVICES
- 3.1 Lista de servicios en cards con icono, título y breve descripción
- 3.2 Sección de preguntas frecuentes en accordión
- 3.3 CTA de solicitud de presupuesto
PRODUCTS
- 4.1 Cabecera con filtro de categorías
- 4.2 Grid de productos (imagen, nombre, precio, botón) con paginación
- 4.3 Modal de vista rápida del producto
BLOG
- 5.1 Lista de artículos en tarjetas con imagen, título, extracto y fecha
- 5.2 Sidebar con categorías y últimos posts
- 5.3 CTA para suscripción al blog
CONTACT
- 6.1 Formulario de contacto con campos nombre, email, mensaje
- 6.2 Mapa incrustado
- 6.3 Información de contacto y horario
PRICING
- 7.1 Tabla comparativa de planes con características y botón de elección
- 7.2 FAQ relacionada con precios
CHECKOUT
- 8.1 Resumen del carrito con edición de cantidades
- 8.2 Formulario de datos de facturación y envío
- 8.3 Selección de método de pago y botón de confirmar compra
PROMPTS RELACIONADOS · E-COMMERCE
