NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio estático reproduciendo el diseño de un salón de grooming masculino bajo la marca ficticia "Compras Alba". Usa HTML único, TailwindCSS vía CDN y JavaScript vanilla en un solo archivo. Paleta de colores: #1a1a1a (fondo negro profundo), #f5f5f5 (texto claro), #c89b3c (oro delicado para acentos), #ffffff (blanco puro), #e0e0e0 (gris suave). Tipografía: "Montserrat" para títulos (peso 700) y "Roboto" para cuerpo (peso 400).
Estructura:
- Header fijo con logo SVG, bloque de horario (icono reloj + texto "09:00 – 21:00" y punto verde "Abierto ahora"), botón "Cita ahora" (icono calendario) visible solo en escritorio, y botón de carrito con contador.
- Hero full‑width con imagen de fondo difusa, título grande en Montserrat, subtítulo en Roboto y botón primario con fondo oro y hover s
3.952 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.952 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, horario, botón de cita y carrito
- 1.2 Hero con título, subtítulo y botón principal
- 1.3 Bloque de apertura (icono reloj y texto "Abierto ahora")
- 1.4 Servicios destacados en grid de 3 columnas
- 1.5 Productos destacados con botón "Añadir al carrito"
- 1.6 Testimonios en carrusel de 3 items
- 1.7 Footer con enlaces, datos de contacto y redes
ABOUT US
- 2.1 Header (reutilizado)
- 2.2 Hero interno con título "Sobre nosotros" y foto del equipo
- 2.3 Texto descriptivo del salón y su filosofía
- 2.4 Imagen de ambiente
- 2.5 Footer
SERVICES
- 3.1 Header
- 3.2 Lista de servicios en tarjetas con icono, nombre y descripción breve
- 3.3 Precio oculto (solo ejemplo visual)
- 3.4 Botón "Reservar"
- 3.5 Footer
OUR PRODUCT
- 4.1 Header
- 4.2 Grid de productos con imagen, nombre, breve descripción y botón "Añadir al carrito"
- 4.3 Modal de carrito (reutilizado)
- 4.4 Footer
TEAM MEMBER
- 5.1 Header
- 5.2 Galería de miembros del equipo con foto, nombre y cargo
- 5.3 Footer
PROMPTS RELACIONADOS · E-COMMERCE
