
NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia **BarbaNoble** (tienda online de productos de afeitado) usando **HTML estático**, **Tailwind CSS vía CDN** y **JavaScript vanilla** en un único archivo. Reproduce los patrones visuales del sitio original:
- **Header**: barra fija, fondo negro (#111111), logo SVG alineado a la izquierda, menú horizontal con dropdowns (usar data‑attributes para abrir/cerrar), enlace "Reserva una visita" como botón primario (bg‑amber‑600, hover:bg‑amber‑700, texto blanco). Icono de carrito a la derecha con badge de cantidad.
- **Hero**: sección de 100vh, fondo foto de barba difuminada, overlay negro con 0.5 opacity, texto centrado grande (font‑family "Inter", weight 800, size 4xl, color blanco), subtítulo gris claro y botón primario.
- **Productos destacado
4.187 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.187 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 desplegables y botón de carrito
- 2.1 Hero con imagen de fondo, título grande y llamada a la acción "Reserva una visita"
- 3.1 Sección de productos destacados en cuadrícula de tres columnas
- 4.1 Área de testimonios con citas rotativas
- 5.1 Llamada a la acción secundaria con fondo contrastante
- 6.1 Footer con secciones de navegación, contacto y redes sociales
ABOUT US
- 1.1 Encabezado interno con breadcrumb
- 2.1 Imagen y texto descriptivo de la marca
- 3.1 Equipo con tarjetas de perfil
- 4.1 Valores de la empresa en íconos
- 5.1 Footer
SERVICES
- 1.1 Encabezado interno
- 2.1 Lista de servicios en tarjetas con iconos
- 3.1 CTA para reservar cita
- 4.1 Footer
SHOP
- 1.1 Encabezado interno
- 2.1 Grid de productos con imágenes, nombre, precio y botón "Añadir al carrito"
- 3.1 Paginación
- 4.1 Footer
CONTACT US
- 1.1 Encabezado interno
- 2.1 Formulario de contacto con campos nombre, email, mensaje
- 3.1 Mapa incrustado
- 4.1 Footer
PROMPTS RELACIONADOS · COMERCIO ELECTRÓNICO