NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático que reproduzca el diseño visual y la arquitectura de información de un hotel boutique de lujo llamado LuxeMarin. Utiliza exclusivamente HTML, Tailwind CSS (CDN) y JavaScript vanilla en un único archivo. Incluir:
- Paleta de colores: #0A0A0A (negro profundo), #FFFFFF (blanco), #C7A17A (dorado arena), #3A3A3A (gris oscuro), #EAEAEA (gris claro).
- Tipografía: "Playfair Display" para encabezados y "Inter" para cuerpo, cargadas desde Google Fonts.
- Header: barra de navegación fija con logo SVG, megamenú de tres columnas (Enlaces principales, Enlaces secundarios, Enlaces de políticas), botón primario "Reserve now" con efecto hover, icono de carrito que abre modal.
- Footer: fondo gris oscuro, columnas con enlaces de navegación, redes sociales (iconos SVG), formulario
3.931 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.931 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 Navbar fijo con logo, megamenú y botón "Reserve now"
- 1.2 Icono de carrito modal
- 1.3 Hero de imagen de fondo con título y botón principal
- 1.4 Bloque de presentación con texto introductorio y botón
- 1.5 Galería de habitaciones en grid con tarjetas hover
- 1.6 Sección de restaurante con slider de imágenes y descripción
- 1.7 Área de blog con cards de artículos
- 1.8 Testimonios en carrusel
- 1.9 Llamada a la acción de reserva rápida
- 1.10 Footer con enlaces, redes y suscripción
ABOUT US
- 2.1 Imagen hero de página con título "Sobre nosotros"
- 2.2 Texto de historia del hotel y valores
- 2.3 Equipo en cards con foto y cargo
- 2.4 Mapa interactivo de ubicación
- 2.5 Footer (reutilizado)
EXPLORE ROOMS
- 3.1 Hero con filtro de búsqueda de habitaciones
- 3.2 Lista de habitaciones en grid, cada una con foto, nombre, breve descripción y botón "Ver detalle"
- 3.3 Paginación al final
- 3.4 Footer
ROOM DETAILS
- 4.1 Galería de imágenes tipo carrusel
- 4.2 Información completa de la habitación (tamaño, servicios, precios)
- 4.3 Formulario de reserva rápida
- 4.4 Sección de amenities en lista con iconos
- 4.5 Footer
RESTAURANT
- 5.1 Hero con foto del restaurante
- 5.2 Menú destacado en tabs (Entrantes, Principales, Postres)
- 5.3 Reserva de mesa con formulario corto
- 5.4 Footer
BLOG
- 6.1 Lista de artículos en cards con imagen, título, extracto y fecha
- 6.2 Sidebar con categorías y últimos posts
- 6.3 Footer
BLOG DETAILS
- 7.1 Hero con imagen del artículo
- 7.2 Contenido del artículo en tipografía legible
- 7.3 Comentarios integrados
- 7.4 Footer
PRODUCTS
- 8.1 Grid de productos boutique (spa, experiencias)
- 8.2 Cada tarjeta con foto, nombre, precio y botón "Añadir al carrito"
- 8.3 Footer
PRODUCT DETAILS
- 9.1 Galería de producto
- 9.2 Descripción detallada, atributos y formulario de cantidad
- 9.3 Botón "Comprar ahora"
- 9.4 Footer
CONTACT US
- 10.1 Hero con mapa y formulario de contacto (nombre, email, mensaje)
- 10.2 Información de contacto (teléfono, email, dirección)
- 10.3 Footer
PRIVACY POLICY
- 11.1 Texto legal estructurado en secciones
- 11.2 Footer
TERMS & CONDITIONS
- 12.1 Texto de términos con numeración
- 12.2 Footer
PROMPTS RELACIONADOS · RESTAURANTE Y COMIDA
