NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia "Saber Orion" (saberorion.com), una barbería premium. Usa HTML5 + Tailwind CSS CDN + JavaScript vanilla en un único archivo. Emplea la siguiente paleta de colores: #0D0D0D (fondo oscuro), #FFFFFF (texto), #C79A6B (dorado cálido), #E5E5E5 (gris claro). Tipografía: headings con 'Playfair Display', cuerpo con 'Inter', ambos importados de Google Fonts.
Estructura y requisitos:
- Header fijo con logo a la izquierda (placeholder), menú principal centrado (Home, Sobre Nosotros, Servicios, Galería, Contacto) y botón hamburguesa para móvil.
- Hero slider a pantalla completa con imagen de fondo difuminada, subtítulo "Tu estilo, nuestra maestría", título grande "Experiencia de Grooming de Precisión", párrafo descriptivo y botón CTA "Reservar cita"
3.998 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.998 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, menú principal y botón hamburguesa
- 1.2 Hero slider con imagen, subtítulo, título, párrafo y botón de reserva
- 1.3 Bloque de partners en carrusel de logos
- 1.4 Sección "Sobre nosotros" con imagen lateral, título, texto y botón
- 1.5 Contador animado de métricas
- 1.6 Galería de trabajos en grid
- 1.7 Testimonios en slider
- 1.8 Formulario de contacto rápido
- 1.9 Footer con información de contacto, redes y suscripción
ABOUT
- 1.1 Header con logo y menú
- 1.2 Imagen de cabecera con texto introductorio
- 1.3 Historia y valores de la barbería
- 1.4 Equipo en tarjetas
- 1.5 CTA a reserva
- 1.6 Footer
SERVICES
- 1.1 Header
- 1.2 Lista de servicios en tarjetas con icono y descripción
- 1.3 Precios simplificados
- 1.4 Botón de reserva
- 1.5 Footer
GALLERY
- 1.1 Header
- 1.2 Grid de imágenes de cortes y peinados
- 1.3 Lightbox al hacer clic
- 1.4 Footer
CONTACT
- 1.1 Header
- 1.2 Formulario completo (nombre, email, mensaje)
- 1.3 Mapa incrustado
- 1.4 Información de contacto rápida
- 1.5 Footer
PROMPTS RELACIONADOS · EDUCATION
