NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea un sitio web estático usando HTML, TailwindCSS CDN y JavaScript vanilla en un solo archivo que reproduzca el diseño visual y la estructura de una agencia digital ficticia llamada Lúmen Creativa. Utiliza la siguiente paleta de colores: #0A0A0A (negro profundo), #FFFFFF (blanco), #F5A623 (ámbar), #00BFA6 (turquesa). Tipografía: encabezados con 'Inter' (sans-serif) peso 700, cuerpo con 'Inter' peso 400.
HEADER: barra full‑width con fondo negro, logo a la izquierda (texto Lúmen Creativa), botón de menú overlay a la derecha con ícono de hamburguesa y texto "Menu", y un botón primario "Get started" con efecto de filtro SVG similar al original.
MENU OVERLAY: pantalla completa, fondo #0A0A0A con opacidad 0.95, columnas: "Menu" (Home, About, Services, Projects, Contact), "Details" (enlaces i
4.096 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.096 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 y menú overlay
- 1.2 Hero left: iconos sociales y ubicación
- 1.3 Hero center: texto rotado 3D y imágenes giratorias
- 1.4 Hero right: marquee de etiquetas y flecha de scroll
- 1.5 Servicios title y descripción
- 1.6 Servicios contenido: imagen, texto y contador animado
- 1.7 Footer con enlaces, redes y copyright
ABOUT
- 2.1 Header (reutilizado)
- 2.2 Hero interior con título y párrafo descriptivo
- 2.3 Equipo: grid de perfiles con foto y bio breve
- 2.4 Valores: lista de iconos y textos
- 2.5 CTA botón de contacto
SERVICES
- 3.1 Header
- 3.2 Hero servicios con título grande
- 3.3 Lista de servicios: cards con icono, título y descripción
- 3.4 Proceso: pasos numerados con iconografía
- 3.5 Testimonios carousel
- 3.6 CTA al formulario
PROJECTS
- 4.1 Header
- 4.2 Galería filtrable de proyectos en grid masonry
- 4.3 Detalle proyecto: imagen hero, descripción, retos, resultados
- 4.4 CTA a contacto
CONTACT
- 5.1 Header
- 5.2 Formulario de contacto con campos nombre, email, mensaje
- 5.3 Mapa estático y datos de oficina
- 5.4 Footer (reutilizado)
PROMPTS RELACIONADOS · AGENCIA DIGITAL
