NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia "AuraSerena Spa" usando únicamente HTML estático, Tailwind CSS vía CDN y JavaScript vanilla (un solo archivo). La web debe reproducir el diseño analizado:
- Paleta de colores: #F5F5F5 (fondo claro), #2C3E50 (texto principal y encabezados), #27AE60 (botones primarios), #7F8C8D (texto secundario), #ECF0F1 (cards y secciones).
- Tipografía: "Playfair Display" para títulos (serif, peso 700) y "Inter" para cuerpo y navegación (sans, peso 400).
- Header: barra superior fija con logo (texto "AuraSerena"), menú principal horizontal (Home, About, Services, Blog, Contact), dropdown "Pages" con enlaces internos, botón "Login" visible solo en móvil, botón primario "Get in touch" y carrito modal que muestra número de ítems.
- Hero: sección a panta
3.401 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.401 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ú, dropdown, login, CTA y carrito
- 1.2 Hero con título, subtítulo y botón
- 1.3 Servicios destacados en grid 3 columnas
- 1.4 Testimonios en carrusel
- 1.5 Galería de imágenes responsive
- 1.6 CTA de reserva con formulario corto
- 1.7 Footer con navegación, contacto y suscripción
ABOUT
- 1.1 Header
- 1.2 Hero con imagen y texto institucional
- 1.3 Historia del centro en dos columnas
- 1.4 Equipo con tarjetas de miembros
- 1.5 Valores y certificaciones en grid
- 1.6 CTA contacto
- 1.7 Footer
SERVICES
- 1.1 Header
- 1.2 Lista de servicios en tarjetas con íconos y precios ficticios
- 1.3 Detalle de cada servicio (imagen, descripción, beneficios)
- 1.4 Preguntas frecuentes en accordion
- 1.5 CTA reserva
- 1.6 Footer
BLOG
- 1.1 Header
- 1.2 Lista de artículos en tarjetas con imagen y extracto
- 1.3 Paginación
- 1.4 Sidebar con categorías y últimos posts
- 1.5 Footer
CONTACT
- 1.1 Header
- 1.2 Formulario de contacto avanzado (nombre, email, mensaje, checkbox)
- 1.3 Mapa incrustado
- 1.4 Información de contacto en columnas
- 1.5 Footer
PROMPTS RELACIONADOS · BELLEZA / SPA
