NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia "CorteLuz" (salón de peluquería y barbería) usando un único archivo HTML con Tailwind CSS CDN y JavaScript vanilla. El diseño debe replicar la estructura y estilo del template analizado:
- Paleta de colores: #1a1a1a (fondo oscuro), #ffffff (texto), #e63946 (acento rojo), #f1faee (gris claro), #457b9d (azul suave).
- Tipografía: 'Inter' para cuerpo y 'Playfair Display' para encabezados.
- Header fijo con logo a la izquierda, menú de cinco enlaces (Sobre nosotros, Servicios, Equipo, Blog, Contacto) y a la derecha botón "Reserva" y icono de carrito con contador.
- Hero sección ocupando full‑width, fondo foto de salón (placeholder), título grande, subtítulo y botón principal "Reserva tu cita".
- Bloque de Servicios: grid 3‑col con tarjetas
3.516 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.516 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 barra de navegación, logo, menú, botón de reserva y carrito
- 1.2 Hero con título, subtítulo y botón principal
- 1.3 Bloque de servicios en grid de tres columnas con íconos y descripción
- 1.4 Sección de equipo con tarjetas de especialistas
- 1.5 Área de testimonios con carrusel sencillo
- 1.6 Últimos artículos del blog en tarjetas
- 1.7 Formulario de contacto rápido
- 1.8 Footer con enlaces de navegación, datos de contacto y redes sociales
ABOUT US
- 1.1 Header (reutilizado)
- 1.2 Hero interno con imagen y título "Sobre nosotros"
- 1.3 Texto descriptivo y misión
- 1.4 Galería de fotos del salón
- 1.5 Footer
SERVICES
- 1.1 Header
- 1.2 Hero interno "Servicios"
- 1.3 Lista de servicios en tarjetas con precio ficticio
- 1.4 Botón de reserva en cada tarjeta
- 1.5 Footer
TEAM
- 1.1 Header
- 1.2 Hero interno "Nuestro equipo"
- 1.3 Grid de perfiles con foto, nombre, especialidad y enlace a redes
- 1.4 Footer
BLOGS
- 1.1 Header
- 1.2 Lista de entradas del blog en cards con imagen, título y extracto
- 1.3 Paginación simple
- 1.4 Footer
CONTACT US
- 1.1 Header
- 1.2 Hero interno "Contacto"
- 1.3 Formulario de contacto (nombre, email, mensaje, botón enviar)
- 1.4 Mapa estático incrustado
- 1.5 Footer
PROMPTS RELACIONADOS · EDUCACIÓN
