AGENCIA DIGITAL · Tailwind CSS · HTML · JavaScript vanilla

Lúmen Creativa – Agencia digital de diseño web y front‑end

★★★★★4,7 2.456 descargas

Tema web estático para la agencia Lúmen Creativa, con layout responsivo, hero a pantalla completa y animaciones suaves. Incluye bloques de servicios, portafolio en carrusel y contador de métricas usando Tailwind CSS y JavaScript sin dependencias.

↓ 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 para la marca ficticia "Lúmen Creativa" (agencia digital) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. Usa la siguiente paleta de colores: #0D0D0D (fondo principal), #1F2937 (gris oscuro para bloques), #0EA5E9 (cian destacado), #FFFFFF (texto claro). Tipografía principal: Inter (cargada vía Google Fonts) para títulos y párrafos; Roboto para botones y formularios.

Estructura y requisitos:
- **Header**: barra fija de altura 80px, fondo #0D0D0D, logo SVG a la izquierda (simple forma geométrica), menú horizontal con enlaces Home, Servicios, Portafolio, Blog, Contacto; a la derecha icono de carrito minimalista con contador circular (#0EA5E9 fondo, número blanco). Menú colapsable en móvil (>768px). 
- **Hero**: sección full‑width, altura 100vh, fondo con degradado sutil de #0D0D0D a #1F2937, texto centrado: h1 grande (inter, 4rem, color #FFFFFF), subtítulo (inter, 1.25rem, #CCCCCC), dos botones CTA (primary #0EA5E9 con hover #0284C7, secondary blanco con borde #0EA5E9). 
- **Servicios**: contenedor max‑w‑7xl, grid 3 columnas (sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3), cada tarjeta con icono SVG, título (inter, 1.5rem, #FFFFFF), descripción breve (roboto, 1rem, #CCCCCC), fondo #1F2937, border-radius 8px, sombra ligera. 
- **Portafolio**: carrusel horizontal con scroll snap, imágenes placeholder 400×300, overlay al pasar el ratón con título del proyecto y botón "Ver detalle" (estilo transparente con borde #0EA5E9). Añadir botones de navegación simples (flechas SVG) que usan JS para desplazarse. 
- **Testimonios**: slider automático de tarjetas, cada una con avatar circular, nombre, cargo y cita. Fondo #0D0D0D, texto en #FFFFFF. 
- **Contador**: sección con 3 métricas (Proyectos, Clientes, Años), números animados desde 0 a valor final usando IntersectionObserver y requestAnimationFrame. Texto grande #0EA5E9. 
- **Contacto**: formulario de 3 campos (Nombre, Email, Mensaje) con validación básica, botón submit primario #0EA5E9. A la derecha un mapa estático (iframe de Google Maps con ubicación ficticia). 
- **Footer**: fondo #1F2937, columnas: Navegación rápida, Servicios, Suscripción newsletter (campo email + botón), y redes sociales (iconos SVG en #0EA5E9). Texto pequeño #CCCCCC.

Interactividad:
- Menú hamburguesa abre/ciñe navegación móvil con transición suave.
- Carrito muestra mini‑panel lateral al hacer click (solo mock‑up, sin funcionalidad backend).
- Animaciones fade‑in al hacer scroll (utilizar IntersectionObserver y clases Tailwind opacity‑0 → opacity‑100 con transition).
- Botón "Volver arriba" visible tras scroll > 300px.

Accesibilidad: usar atributos ARIA apropiados, roles y foco visible.

Entrega todo el código en un único archivo index.html con los enlaces a Tailwind CDN y Google Fonts, sin dependencias externas.

---

## 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>
```

3.174 caracteres · 38 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera fija con logo, navegación y carrito
2.1 Hero principal con título, subtítulo y botones CTA
3.1 Bloque de servicios en tres columnas con iconos
4.1 Portafolio con carrusel de imágenes
5.1 Testimonios en tarjetas deslizables
6.1 Contador de métricas (proyectos, clientes, años)
7.1 Formulario de contacto simple
8.1 Pie de página con enlaces, newsletter y redes sociales

SERVICIOS

1.1 Listado de servicios en sección individual con descripción y botón "Más info"

PORTFOLIO

1.1 Galería de proyectos con filtro por categoría y vista modal

TESTIMONIOS

1.1 Página dedicada a reseñas de clientes con avatar y rating

CONTACTO

1.1 Formulario de contacto completo (nombre, email, mensaje) y mapa incrustado

BLOG

1.1 Lista de artículos con tarjetas, imagen, título y extracto

POLÍTICA DE PRIVACIDAD

1.1 Texto legal estático

PROMPTS RELACIONADOS · AGENCIA DIGITAL

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lúmen Creativa
Sector: Agencia digital especializada en diseño web y desarrollo front‑end
Claim: Diseñamos experiencias interactivas que impulsan tu marca

Bloques de la home

1.1 Cabecera fija con logo, navegación y carrito; 2.1 Hero principal con título, subtítulo y botones CTA; 3.1 Bloque de servicios en tres columnas con iconos; 4.1 Portafolio con carrusel de imágenes; 5.1 Testimonios en tarjetas deslizables; 6.1 Contador de métricas (proyectos, clientes, años); 7.1 Formulario de contacto simple; 8.1 Pie de página con enlaces, newsletter y redes sociales

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