NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web completo para la marca ficticia Lúmina Marisma (luminamarisma.com) usando HTML, Tailwind CSS CDN y JavaScript vanilla en un solo archivo. Reproduce la estructura y estilo del sitio de referencia sin copiar texto ni imágenes originales. Utiliza la siguiente paleta de colores: #1F2937 (gris oscuro), #3B82F6 (azul primario), #F3F4F6 (gris claro), #10B981 (verde acento), #FFFFFF (blanco). Tipografía: Inter (sans-serif) para cuerpo y headings, peso 400‑700.
Header: barra de navegación fija con logo SVG simple, enlaces a Home, About, Services, Works, Contact y un botón destacado "Hablemos" con ícono de chat. Menú colapsable en móvil.
Home sections (en orden):
1. Hero: título grande "Lúmina Marisma", subtítulo descriptivo, dos botones ("Explorar" enlaza a #services, "Ver Port
3.567 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
3.567 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 Barra de navegación fija con logo y enlaces principales
- 1.2 Hero con título destacado, descripción breve y botones de acción
- 1.3 Área de animación con carrusel de imágenes rotativas
- 1.4 Sección de servicios en columnas con iconos y texto
- 1.5 Testimonios con tarjetas alineadas
- 1.6 Llamada a la acción final y formulario de suscripción
- 1.7 Footer con enlaces secundarios, redes y datos de contacto
ABOUT
- 2.1 Encabezado con foto del equipo
- 2.2 Texto descriptivo de la agencia y su filosofía
- 2.3 Valores en tarjetas con iconos
- 2.4 Equipo con fotos y breves bio
- 2.5 Footer
SERVICES
- 3.1 Lista de servicios en tarjetas con iconos
- 3.2 Detalle expandible por servicio
- 3.3 CTA para solicitar presupuesto
- 3.4 Footer
WORKS
- 4.1 Galería tipo grid de proyectos con filtro por categoría
- 4.2 Lightbox al hacer clic en cada proyecto
- 4.3 Botón para ver más casos
- 4.4 Footer
CONTACT
- 5.1 Formulario de contacto con campos nombre, email, asunto y mensaje
- 5.2 Mapa incrustado
- 5.3 Datos de contacto y redes sociales
- 5.4 Footer
PROMPTS RELACIONADOS · AGENCIA DIGITAL
