BIENES RAÍCES · Claude Design · HTML

Mirador Cállao — Prompt de diseño web para Claude AI

★★★★★4,6 1.642 descargas

Promoción inmobiliaria residencial de lujo en costa atlántica Vivir frente al mar, sin renunciar a la ciudad.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una landing one-page completa en un único archivo HTML usando Tailwind CSS por CDN y JavaScript vanilla, sin frameworks ni dependencias externas más allá de Tailwind y, opcionalmente, una librería de iconos por CDN (lucide o font-awesome). Todo debe quedar en un solo archivo autocontenido y responsive.

MARCA FICTICIA
- Nombre: Mirador Cállao
- Sector: promoción inmobiliaria residencial de lujo en primera línea de mar
- Dominio: miradorcallao.com
- Email de contacto: hola@miradorcallao.com
- Claim: "Vivir frente al mar, sin renunciar a la ciudad"
- Año: 2025
- Idioma: español de España, tono sobrio, elegante, descriptivo, sin frases marketineras vacías ni precios concretos.

ALCANCE
Una sola página (home) con navegación interna por anclas. Inventa todos los textos, nombres de personas, direcciones y datos. No uses lorem ipsum.

PALETA
- Fondo principal claro: #F7F4EF (crema arena)
- Fondo oscuro / footer / banda contadores: #1B2A2F (verde petróleo profundo)
- Acento dorado: #B8915A
- Texto principal: #1B2A2F
- Texto secundario: #6B6B6B
- Líneas y bordes sutiles: #E4DED3

TIPOGRAFÍA (vía Google Fonts)
- Titulares: 'Playfair Display' serif, pesos 400 y 700, con detalle de small caps en algunos H2
- Cuerpo y UI: 'Inter' sans-serif, pesos 300, 400 y 500
- Aplicar tracking ligeramente amplio en eyebrows y etiquetas en mayúsculas

HEADER (1.1)
- Fijo en top, transparente sobre el hero y con fondo #1B2A2F al hacer scroll (cambio con JS al pasar 80px)
- Logo a la izquierda en blanco: texto "Mirador Cállao" en Playfair
- Menú horizontal a la derecha con enlaces a anclas: Inicio, Sobre la promoción, Entorno, Equipamientos, Mapa, Galería, Tour 3D, Vídeo, Planos, Equipo, Solicita info
- A la derecha del menú, icono circular de usuario y otro de corazón con badge de favoritos en 0
- En móvil, hamburguesa que abre un panel lateral izquierdo deslizante con el mismo menú en vertical

HERO (1.2)
- Altura 100vh, imagen de fondo (usa una de Unsplash de arquitectura residencial al atardecer junto al mar) con overlay oscuro 35%
- Eyebrow dorado en mayúsculas con tracking: "OBRA NUEVA · ENTREGA OTOÑO 2026"
- Titular grande en Playfair blanco: "Mirador Cállao"
- Subtítulo blanco: "Residencias frente al Atlántico en el paseo de Santa Eulalia, A Coruña"
- Dos botones: primario dorado relleno "Reservar visita" y secundario outline blanco "Descargar dossier"
- Indicador de scroll animado abajo centrado

SOBRE LA PROMOCIÓN (1.3) #about
- Sección con padding generoso, fondo crema
- Columna izquierda con eyebrow "LA PROMOCIÓN", H2 Playfair "Un edificio pensado para detenerse" y línea dorada decorativa bajo el título
- Columna derecha con párrafo descriptivo de 4-5 líneas sobre la arquitectura, materiales y filosofía
- Bajo las columnas, fila con tres datos clave separados por línea vertical: "42 viviendas", "8 plantas", "Entrega Q4 2026"

CONTADORES (1.4)
- Banda full-width con fondo #1B2A2F y texto blanco
- 4 contadores animados con JS al entrar en viewport (IntersectionObserver):
  · 28 años proyectando
  · 1.240 viviendas entregadas
  · 14 premios de arquitectura
  · 96% clientes satisfechos
- Cada uno con cifra Playfair muy grande dorada y etiqueta debajo en sans gris claro

ENTORNO (1.5) #neighborhood
- Eyebrow + H2 "Un barrio que ya conoces"
- Grid masonry de 5 imágenes (Unsplash de calles, cafeterías, paseo marítimo, parque, faro) con alturas variadas
- A la derecha o debajo, párrafo describiendo el barrio y lista de 4 ventajas con check dorado

EQUIPAMIENTOS (1.6) #amenities
- Fondo crema, título centrado "Servicios de la comunidad"
- Grid de 4x2 tarjetas (en móvil 2x4) con borde sutil #E4DED3, icono dorado arriba, título y descripción de 2 líneas
- Tarjetas: Piscina exterior, Gimnasio equipado, Coworking, Jardín mediterráneo, Parking robotizado, Conserjería 24h, Sala social, Spa y sauna
- Hover: elevación suave y borde dorado

MAPA (1.7) #map
- Layout 60/40: a la izquierda iframe de Google Maps embebido apuntando a A Coruña (o un placeholder estilizado con fondo gris y pin dorado si prefieres no usar iframe)
- A la derecha, tabs horizontales (Transporte, Educación, Ocio, Salud) que al hacer click filtran un listado debajo con 4-5 puntos cada uno (nombre + distancia caminando)

GALERÍA (1.8) #gallery
- Carrusel horizontal full-width con imagen grande central y flechas laterales
- Funcionalidad con JS vanilla: prev/next, autoplay opcional cada 6s, indicador de slide actual
- Debajo, fila de 6 miniaturas clicables que llevan a cada slide; la activa con borde dorado
- Usa imágenes de Unsplash de interiores de viviendas modernas

TOUR 3D (1.9) #tour
- Sección con fondo oscuro #1B2A2F
- Bloque centrado tipo "visor" con marco redondeado, imagen de fondo de un salón con overlay
- Botón circular grande dorado con icono de cubo o 360 en el centro "Iniciar tour inmersivo"
- Texto debajo: "Recorre cada estancia desde tu casa, en cualquier dispositivo."

VÍDEO (1.10) #video
- Thumbnail cinematográfico panorámico con play central blanco circular
- Al hacer click, abre un modal con overlay oscuro y un iframe de YouTube (puedes dejar un vídeo de drone genérico de arquitectura)
- Cerrar modal con X y con ESC

PLANOS (1.11) #plans
- Sistema de tabs con 4 pestañas: "1 dormitorio", "2 dormitorios", "3 dormitorios", "Ático dúplex"
- Al cambiar tab, se actualiza el contenido con JS sin recargar
- Cada panel muestra: a la izquierda imagen del plano (usa un placeholder SVG sencillo dibujado a mano con líneas representando estancias), a la derecha ficha técnica con filas: Superficie útil, Superficie construida, Terraza, Orientación, Plantas disponibles, Precio desde "consultar"
- Botón inferior "Solicitar plano detallado" que hace scroll al formulario

EQUIPO (1.12) #agents
- Título "Tu equipo comercial" centrado
- 3 tarjetas en fila con foto circular (Unsplash retratos), nombre Playfair, rol en dorado, teléfono y email
- Personas inventadas: Lucía Verdejo (Directora comercial), Mateo Granell (Asesor senior), Inés Bouzas (Atención cliente)
- Iconos sociales sutiles bajo cada tarjeta

SOLICITA INFO (1.13) #info
- Fondo crema, layout 60/40
- Izquierda: formulario con campos Nombre, Email, Teléfono, Tipología de interés (select con las 4 tipologías), Mensaje, checkbox de aceptación de política y botón dorado "Enviar solicitud". Validación básica con JS, mostrar mensaje de éxito en falso submit.
- Derecha: bloque de contacto con icono+texto para Dirección (Paseo de Santa Eulalia 14, 15001 A Coruña), Teléfono (+34 981 22 34 56), Email (hola@miradorcallao.com), Horario (L-V 10:00-19:00, S 11:00-14:00)

FOOTER (1.14)
- Fondo #1B2A2F, texto blanco/gris claro, padding amplio
- 4 columnas: logo + descripción breve + redes sociales / Promoción (enlaces a anclas) / Información (Política de privacidad, Aviso legal, Cookies) / Contacto (datos resumidos)
- Línea divisoria sutil y barra inferior con copyright "© 2025 Mirador Cállao. Todos los derechos reservados." alineado izquierda y "Diseño y construcción: estudio interno" a la derecha

REQUISITOS TÉCNICOS
- Un único archivo HTML, sin build, sin dependencias npm
- Tailwind por CDN, configuración inline para extender colores y fuentes de la paleta
- Google Fonts cargadas en <head> con preconnect
- Smooth scroll nativo (scroll-behavior: smooth)
- Header con cambio de fondo en scroll (JS)
- Contadores animados con IntersectionObserver
- Carrusel galería con JS vanilla
- Tabs de mapa y planos con JS vanilla
- Modal vídeo accesible (cerrable con ESC y click fuera)
- Formulario con prevención de submit y mensaje de confirmación
- Totalmente responsive: breakpoints sm, md, lg; menú hamburguesa en <lg
- Accesibilidad básica: aria-labels en botones de icono, contraste suficiente, focus visible dorado
- No incluyas textos genéricos tipo lorem; redacta todos los contenidos en español de España con tono editorial sobrio

7.853 caracteres · 125 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header transparente fijo con menú de anclas
1.2 Hero a pantalla completa con título serif y CTAs
1.3 Sobre la promoción con datos clave
1.4 Banda de contadores animados
1.5 Entorno con masonry de imágenes
1.6 Equipamientos en grid de iconos
1.7 Mapa con puntos de interés
1.8 Galería con carrusel y miniaturas
1.9 Tour 3D con visor
1.10 Vídeo con modal
1.11 Planos con tabs por tipología
1.12 Equipo comercial
1.13 Formulario Solicita info
1.14 Footer oscuro completo

PROMPTS RELACIONADOS · BIENES RAÍCES

Otros prompts de la misma categoría

Ficha de marca

Nombre: Mirador Cállao
Sector: Promoción inmobiliaria residencial de lujo en costa atlántica
Claim: Vivir frente al mar, sin renunciar a la ciudad

Bloques de la home

1.1 Header transparente fijo con logo claro a la izquierda y menú horizontal de anclas a la derecha (Inicio, Sobre la promoción, Entorno, Equipamientos, Mapa, Galería, Tour 3D, Vídeo, Planos, Equipo, Solicita info) más icono de acceso/favoritos
1.2 Hero a pantalla completa con imagen de fachada al atardecer, título serif grande con el nombre de la residencia, subtítulo con ubicación y dos botones (Reservar visita / Descargar dossier)
1.3 Sección Sobre la promoción con título a la izquierda y bloque de texto descriptivo a la derecha más tres datos clave (nº de viviendas, plantas, entrega)
1.4 Banda de contadores animados (años de experiencia, viviendas entregadas, premios, satisfacción) sobre fondo oscuro
1.5 Sección Entorno con galería tipo masonry de 4-5 imágenes del barrio + texto descriptivo del enclave
1.6 Sección Equipamientos en grid de 8 tarjetas con icono + título + descripción breve (piscina, gimnasio, coworking, jardín, parking, conserjería, sala social, spa)
1.7 Sección Mapa con embed de mapa estilizado a la izquierda y listado de puntos de interés categorizados a la derecha (transporte, educación, ocio, salud)
1.8 Sección Galería con slider/carrusel horizontal de fotos de interiores y miniaturas debajo
1.9 Sección Tour 3D con marco grande tipo visor virtual y botón de lanzar tour inmersivo
1.10 Sección Vídeo con thumbnail cinematográfico y botón play central que abre modal
1.11 Sección Planos con sistema de tabs por tipología (1 dorm., 2 dorm., 3 dorm., ático) mostrando plano + ficha técnica (m², orientación, terraza)
1.12 Sección Equipo comercial con 3 tarjetas de agentes (foto, nombre, rol, teléfono, email)
1.13 Sección Solicita info con formulario a la izquierda (nombre, email, teléfono, tipología de interés, mensaje) y bloque de contacto a la derecha (dirección, teléfono, horario)
1.14 Footer oscuro con logo, breve descripción, columnas de enlaces, redes sociales y línea inferior de 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

Mirador Cállao — Prompt de diseño web para Claude AI

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

Otros prompts de la misma categoría

Aurora Inversión

Cumbre Capital

Lumara Salud

Aliviar Hogar