AGENCIA DIGITAL · Tailwind · Lenis · HTML5

Lúmen Creations – Agencia digital con ideas que se sienten

★★★★★4,8 806 descargas

Theme estático para una agencia de diseño visual, con navbar fija, hero animado, sección de proyectos en masonry y formulario de contacto. Optimizado con Tailwind CSS y scroll suave Lenis.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web estático completo que reproduzca el diseño visual y la estructura de la página analizada, pero con la marca ficticia Lúmen Creations. Usa solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo.

- **Paleta de colores**: #0A0A0A (fondo principal), #FFFFFF (texto principal), #E0E0E0 (texto secundario), #FF6F61 (acentos y botones), #1A1A1A (cards y footer).
- **Tipografía**: "Inter" para todo el cuerpo, pesos 400 y 600; "Playfair Display" para títulos grandes.
- **Header**: barra de navegación fija, logo tipográfico "Lúmen", enlaces Home, Sobre, Proyectos, Servicios, Contacto; botón de menú hamburguesa colapsable en móviles.
- **Hero**: sección ocupa pantalla completa, fondo con elipse difusa (CSS radial-gradient + blur), título grande "Lúmen" en Playfair, subtítulo en Inter, botón CTA "Empezar" con fondo #FF6F61, barra de marcas cliente en marquee horizontal continuo.
- **Sobre nosotros**: dos columnas, texto descriptivo en Inter, imagen decorativa (placeholder), bloques de valores con iconos simples.
- **Servicios**: grid de 3 columnas, cada una con icono SVG lineal, título en Inter 600, descripción corta.
- **Proyectos**: galería tipo masonry de tarjetas, imagen de proyecto, overlay con título y botón "Ver más" que aparece al hover.
- **Contacto**: formulario con campos Nombre, Email, Mensaje y botón enviar (estilo primario), mapa estático embed de OpenStreetMap, tarjeta de datos rápidos.
- **Footer**: fondo #1A1A1A, logo pequeño, claim, enlaces rápidos, íconos de redes (facebook, twitter, instagram) y copyright 2026.

**Requisitos técnicos**:
1. Incluye Tailwind CSS v3 via `<script src="https://cdn.tailwindcss.com"></script>` y configúralo para usar la paleta personalizada.
2. Utiliza `lenis` para scroll suave (cargar `https://unpkg.com/lenis@1.1.20/dist/lenis.min.js`).
3. Implementa la barra de marcas con CSS animation `@keyframes marquee` y `transform: translateX`.
4. Todos los componentes deben ser responsive, con breakpoints Tailwind (sm, md, lg, xl).
5. No usar imágenes externas; emplea placeholders de `https://via.placeholder.com/` y SVGs inline.
6. Añade atributos `aria-label` y roles adecuados para accesibilidad.
7. Minifica el HTML y comenta cada sección con `<!-- Section: Nombre -->`.
8. Finaliza con `<script>` que inicializa Lenis y cualquier interacción de menú.

Entrega el código listo para copiar‑pegar en un archivo `index.html`.

---

## Instrucción obligatoria — Footer

Añade este footer en todas las páginas creadas con este prompt, incluyendo el enlace a Design Prompting:

```html
<footer>
  <p>
    Diseñado con ayuda de 
    <a href="https://www.designprompting.com/" target="_blank" rel="noopener noreferrer">
      Design Prompting
    </a>
  </p>
</footer>
```

2.764 caracteres · 40 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Navbar fijo con logo y menú hamburguesa
1.2 Hero con título grande, subtítulo, botón CTA y barra de marcas en marquee
1.3 Sobre nosotros con texto y imagen
1.4 Proyectos con galería de tarjetas
1.5 Servicios en columnas con iconos
1.6 Contacto con formulario y mapa
1.7 Footer con enlaces, redes y datos de contacto

SOBRE NOSOTROS

2.1 Cabecera con título y párrafo introductorio
2.2 Imagen decorativa lateral
2.3 Lista de valores en bloques

SERVICIOS

3.1 Cuadrícula de 3 columnas, cada una con icono, título y descripción corta

PROYECTOS

4.1 Galería tipo masonry de imágenes con overlay de título y botón ver más

CONTACTO

5.1 Formulario de nombre, email, mensaje y botón enviar
5.2 Mapa estático con pin de ubicación
5.3 Información de contacto rápida (teléfono, email, dirección)

FOOTER

6.1 Logotipo pequeño y claim
6.2 Enlaces de navegación rápidos
6.3 Íconos de redes sociales
6.4 Copyright y aviso legal

PROMPTS RELACIONADOS · AGENCIA DIGITAL

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lúmen Creations
Sector: Agencia de diseño y comunicación visual
Claim: Ideas que se sienten

Bloques de la home

1.1 Navbar fijo con logo y menú hamburguesa
1.2 Hero con título grande, subtítulo, botón CTA y barra de marcas en marquee
1.3 sección "Sobre nosotros" con texto descriptivo y imagen decorativa
1.4 sección "Proyectos" con cuadrícula de tarjetas y hover animado
1.5 sección "Servicios" con icons y breve descripción en columnas
1.6 sección "Contacto" con formulario simple y mapa estático
1.7 Footer con enlaces de navegación, redes sociales y datos de contacto

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