HOTEL Y ALOJAMIENTO · Claude Design · HTML

Bahía Serena Resort — Prompt de diseño web para Claude AI

★★★★★4,6 2.338 descargas

Resort y hotel boutique frente al mar con experiencias gastronómicas, spa y actividades náuticas Descansar también es un arte.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Genera en un único archivo HTML autocontenido la web completa de Bahía Serena Resort, un hotel boutique frente al mar de estética cálida, elegante y serena. Usa HTML5 + Tailwind CSS por CDN + JavaScript vanilla. No uses frameworks ni dependencias externas salvo Tailwind CDN y fuentes de Google Fonts.

MARCA FICTICIA
- Nombre: Bahía Serena Resort
- Sector: resort y hotel boutique frente al mar con gastronomía, spa y experiencias
- Dominio: bahiaserenaresort.com
- Email: hola@bahiaserenaresort.com
- Teléfono ficticio: +34 971 45 67 89
- Dirección ficticia: Cala Llevant 12, 07590 Cala Ratjada, Mallorca
- Claim: Descansar también es un arte
- Año: 2025

ALCANCE
Genera la HOME completa con todas las secciones listadas y enlaces de navegación funcionales por anclas a Habitaciones, Experiencias, Gastronomía, Spa, Diario, Contacto y Reservar (pueden ser secciones dentro de la misma página, simulando la estructura multipágina). Todo el copy en español de España, original, en verbos activos, sin jerga marketinera y sin precios concretos.

PALETA DE COLOR
- Fondo principal arena claro: #F4ECE2
- Fondo crema alterno: #EFE4D2
- Terracota acento: #C7693E
- Verde oliva profundo: #4A5A3A
- Marrón texto: #3A2E22
- Beige medio: #D9C6AC
- Footer oscuro: #1F1A14
- Blanco hueso: #FBF7F0

TIPOGRAFÍA
- Serif elegante para titulares: 'Cormorant Garamond' o 'Playfair Display' (Google Fonts), peso 400-500, tracking ligeramente negativo, tamaños generosos (hero h1 entre 80 y 140px en desktop)
- Sans-serif limpia para cuerpo: 'Inter' o 'DM Sans', peso 300-400
- Etiquetas/eyebrow: sans-serif en mayúsculas, tracking amplio, tamaño 11-12px

HEADER
- Transparente sobre el hero, con fondo arena #F4ECE2 al hacer scroll
- Estructura centrada: a la izquierda botón hamburguesa con la palabra "Menú" y tres líneas animadas, al centro el logotipo "Bahía Serena" en serif, a la derecha teléfono con icono y botón "Reservar" con icono de libreta y efecto hover de letras animadas (cada letra sube ligeramente con delay)
- El menú hamburguesa abre un panel lateral fullscreen con enlaces grandes en serif: Inicio, Habitaciones, Experiencias, Gastronomía, Spa, Diario, Contacto, Reservar. Incluye dirección, teléfono y redes sociales en la parte inferior del panel
- Header sticky con animación suave

FOOTER
- Fondo #1F1A14, texto crema
- Cuatro columnas: 1) logotipo grande + claim + dirección, 2) Explorar (enlaces), 3) Estancia (enlaces a habitaciones, ofertas, regalo, grupos), 4) Newsletter con campo email y botón "Suscribirme" + iconos sociales (Instagram, Facebook, Pinterest, TikTok)
- Línea divisoria fina
- Fila inferior con copyright "© 2025 Bahía Serena Resort", enlaces legales (Aviso legal, Privacidad, Cookies) y selector de idioma ES/EN

HOME, sección a sección

1.2 HERO
- Pantalla completa (100vh) con imagen de fondo de playa al atardecer (usa una imagen de Unsplash con tonos cálidos, por ejemplo unsplash.com referente a playa mediterránea). Overlay sutil oscuro al 15%
- Eyebrow centrado arriba: "Mallorca · Mar Mediterráneo"
- Titular serif enorme en dos líneas: "Descansar también / es un arte"
- Subtítulo breve debajo en sans-serif
- Barra de reserva flotante en la parte inferior con cuatro campos (Llegada, Salida, Huéspedes, Habitación) y botón terracota "Comprobar disponibilidad"
- Indicador de scroll animado abajo

1.3 BIENVENIDA + CONTADORES
- Dos columnas: izquierda con eyebrow "Bienvenida" y titular serif "Un refugio entre pinos, sal y silencio"; derecha con dos párrafos de texto y un botón outline "Descubrir el resort"
- Debajo, fila de cuatro contadores animados al entrar en viewport: 32 años de historia, 64 habitaciones, 12 premios internacionales, 18.000 huéspedes al año. Cada uno con número grande en serif y label sans en mayúsculas

1.4 CARRUSEL DE HABITACIONES
- Eyebrow "Habitaciones" y titular "Cada estancia, un paisaje propio"
- Carrusel horizontal con desplazamiento por arrastre (implementa con JS vanilla: drag, snap a tarjeta, botones prev/next)
- Seis tarjetas con imagen vertical, nombre serif (Suite Levante, Bungalow Pinar, Villa Cala, Ático Mirador, Suite Jardín, Habitación Mar), capacidad, m² y enlace "Ver detalles →"

1.5 BANDA DE TEXTO DESLIZANTE
- Marquee continuo horizontal con palabras separadas por un símbolo decorativo (asterisco o rombo): "Mar · Spa · Mesa · Pinares · Silencio · Atardeceres · Sal · Brisa" en serif gigante
- Animación CSS infinita

1.6 GRID DE EXPERIENCIAS 2x2
- Eyebrow "Experiencias" y titular "Vivir el lugar desde dentro"
- Cuatro tarjetas grandes con imagen, título serif y descripción breve: Gastronomía mediterránea, Spa de inspiración termal, Náutica y travesías, Senderos del pinar
- En hover, la imagen hace zoom suave y aparece un botón "Conocer más"

1.7 SECCIÓN CON PESTAÑAS
- Eyebrow "Vida en el resort" y titular "Lo que sucede aquí"
- Cuatro pestañas: Restaurantes, Spa, Actividades, Eventos
- Al cambiar de pestaña, se actualiza con transición suave un bloque a dos columnas: imagen a la izquierda y a la derecha título, descripción, lista de tres puntos y botón

1.8 SERVICIOS DESTACADOS (FANCY BOX)
- Cuatro columnas con icono lineal, título serif y descripción: Acceso directo a playa, Desayuno de mercado, Bicicletas para huéspedes, Atención personalizada 24h
- Fondo crema #EFE4D2

1.9 GALERÍA MOSAICO
- Mosaico de 8 imágenes de tamaños desiguales (algunas verticales, otras horizontales) con efecto parallax suave al scroll usando transform translateY según scroll
- Título serif arriba: "Pequeños fragmentos"

1.10 TESTIMONIOS
- Eyebrow "Lo que cuentan" y titular "Voces de quienes ya volvieron"
- Carrusel con tres testimonios visibles a la vez en desktop, uno en móvil. Cada tarjeta: comillas decorativas, texto, nombre, ciudad, estrellas y miniatura redonda
- Inventa tres testimonios verosímiles (Marta L., Joan B., Carmen R.)

1.11 DIARIO
- Eyebrow "Diario" y titular "Lecturas para antes de venir"
- Tres tarjetas de artículos con imagen, categoría, fecha, título serif y extracto: 'El arte del desayuno lento', 'Cinco calas escondidas en la costa', 'Cómo elegimos los aceites del spa'
- Botón "Ver todo el diario →"

1.12 CTA FULL-WIDTH
- Imagen de fondo con overlay oscuro al 35%
- Centrado: eyebrow "Reserva directa", titular serif gigante "Tu próxima pausa empieza aquí", subtítulo y dos botones (terracota sólido "Reservar estancia" + outline blanco "Llamar al resort")

1.13 FOOTER
- Como se describe arriba

REQUISITOS TÉCNICOS
- HTML5 semántico (header, main, section, article, footer, nav)
- Tailwind CSS por CDN, configurando colores personalizados vía tailwind.config inline
- Fuentes Google: Cormorant Garamond y Inter
- JS vanilla para: menú lateral fullscreen, carruseles (habitaciones y testimonios) con drag y autoplay opcional, contadores animados con IntersectionObserver, pestañas, marquee infinito, parallax suave, header que cambia de fondo al scroll, smooth scroll en anclas
- Totalmente responsive: breakpoints móvil <768px, tablet 768-1050, desktop >1050
- Accesibilidad: aria-labels, focus visible, contraste correcto, navegación por teclado en menú
- Imágenes de placeholder de Unsplash con URLs reales (parámetros w=1600&q=80) en tonos cálidos coherentes con la paleta
- Animaciones discretas con CSS y IntersectionObserver para fade-up al entrar en viewport
- No incluyas comentarios largos en el código, mantenlo limpio
- El archivo debe abrirse y funcionar al hacer doble clic, sin build

Entrega únicamente el código HTML completo en un solo bloque.

7.495 caracteres · 113 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header transparente con logo centrado y menú lateral
1.2 Hero pantalla completa con buscador de reserva
1.3 Bienvenida con contadores animados
1.4 Carrusel de habitaciones
1.5 Banda de texto deslizante
1.6 Grid de experiencias 2x2
1.7 Sección con pestañas (restaurantes, spa, actividades, eventos)
1.8 Servicios destacados con iconos
1.9 Galería mosaico
1.10 Testimonios en carrusel
1.11 Diario del resort (3 entradas)
1.12 CTA full-width Reservar
1.13 Footer oscuro completo

HABITACIONES

2.1 Header transparente
2.2 Cabecera con título y breadcrumbs sobre imagen
2.3 Filtros (tipo, capacidad, vistas)
2.4 Listado de habitaciones en grid con foto, nombre, capacidad y CTA
2.5 Banda comparativa de servicios incluidos
2.6 CTA Reservar
2.7 Footer

EXPERIENCIAS

3.1 Header
3.2 Cabecera con título grande
3.3 Intro a dos columnas
3.4 Listado alternado izquierda/derecha con imagen y descripción de cada experiencia
3.5 Galería de momentos
3.6 CTA contacto
3.7 Footer

GASTRONOMÍA

4.1 Header
4.2 Hero con nombre del restaurante principal
4.3 Filosofía culinaria a dos columnas
4.4 Carrusel de los tres restaurantes del resort
4.5 Carta destacada en pestañas (almuerzo, cena, cócteles)
4.6 CTA Reservar mesa
4.7 Footer

SPA Y BIENESTAR

5.1 Header
5.2 Hero sereno con título
5.3 Tratamientos en grid
5.4 Rituales destacados en formato fancy box
5.5 Testimonios
5.6 CTA Reservar tratamiento
5.7 Footer

DIARIO

6.1 Header
6.2 Cabecera con título Diario
6.3 Grid de artículos del blog (9 entradas)
6.4 Paginación
6.5 Footer

CONTACTO

7.1 Header
7.2 Cabecera con título
7.3 Datos de contacto y mapa a dos columnas
7.4 Formulario de contacto
7.5 FAQs en acordeón
7.6 Footer

RESERVAR

8.1 Header
8.2 Formulario de reserva paso a paso (fechas, habitación, extras, datos)
8.3 Resumen lateral sticky
8.4 Footer reducido

PROMPTS RELACIONADOS · HOTEL Y ALOJAMIENTO

Otros prompts de la misma categoría

Ficha de marca

Nombre: Bahía Serena Resort
Sector: Resort y hotel boutique frente al mar con experiencias gastronómicas, spa y actividades náuticas
Claim: Descansar también es un arte

Bloques de la home

1.1 Header transparente con logo centrado entre menú lateral (botón Menú a la izquierda) y CTA Reservar + teléfono a la derecha
1.2 Hero pantalla completa con imagen de playa, claim principal en tipografía serif grande, subtítulo y barra de búsqueda de reserva (llegada, salida, huéspedes)
1.3 Sección bienvenida con texto introductorio a dos columnas, contadores animados (años, habitaciones, premios, huéspedes felices)
1.4 Slider horizontal tipo flickity con tarjetas de habitaciones (suite vista mar, bungalow privado, villa familiar, ático panorámico)
1.5 Banda de texto deslizante (scrolling text) con palabras clave del resort
1.6 Sección experiencias en grid 2x2 con imágenes grandes y overlay (gastronomía, spa, náutica, naturaleza)
1.7 Sección tabbed con pestañas (Restaurantes, Spa, Actividades, Eventos) y contenido cambiante
1.8 Fancy box con servicios destacados en cuatro columnas con iconos
1.9 Galería tipo mosaico con efecto parallax suave
1.10 Testimonios en carrusel con foto, nombre y estrellas
1.11 Sección blog/diario del resort con tres entradas recientes
1.12 CTA grande full-width con imagen de fondo y botón Reservar estancia
1.13 Footer oscuro con logo, columnas (Explorar, Estancia, Legal), newsletter, redes sociales y copyright

Crea tu propia Skill

Genera una Skill personalizada para Claude AI en minutos. Sin código.

Empezar ahora ↗

← Volver al catálogo ↗ Crea tu Skill personalizada