MÚSICA Y BANDAS · Claude Design · Tailwind · HTML5

LumenVista – Landing Page para estudios de producción audiovisual

★★★★★4,8 3.719 descargas

Descubre LumenVista, una plantilla web estática optimizada para agencias de producción audiovisual. Incluye hero a pantalla completa, demos interactivas y métricas de rendimiento animadas, todo con Tailwind CSS y JavaScript vanilla. Ideal para destacar proyectos de video con diseño oscuro y toques cian modernos.

↓ 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 siguiendo el stack: HTML5, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Marca ficticia: LumenVista, dominio lumenvista.com. Tema: landing page para una agencia de producción audiovisual. Paleta de colores: #0A0A0A (fondo negro), #0D6EFD (azul cian), #FFFFFF (blanco), #F1F1EF (gris claro). Tipografía: "Inter", sans‑serif, pesos 400 y 600, importada desde Google Fonts.

Estructura requerida:

HEADER (navbar) - posición sticky, fondo semitransparente negro, logo a la izquierda (texto LumenVista), menú central con enlaces desplegables (Demos, Sobre nosotros, Servicios, Portafolio, Blog, Todas las páginas) usando componentes dropdown de Tailwind, botón a la derecha "Hablemos" con estilo primary (fondo azul cian, texto blanco). Incluye botón de búsqueda que al hacer click muestra un overlay con input y botón cerrar.

SECCIÓN 1 – HERO: contenedor full‑width, altura 100vh, fondo de imagen responsive (placeholder) con overlay negro 60% y texto centrado verticalmente. Título grande (h1) en blanco, "Producción de Video Profesional", subtítulo (p) en gris claro, botón secundario "Descubrir demos" que enlaza a la sección de demos.

SECCIÓN 2 – DEMOS: título h2 "3 demostraciones pre‑construidas" y descripción corta. Grid de 3 columnas (responsive a 1‑column en móvil). Cada tarjeta contiene imagen de demo, overlay con icono de vista y título del demo (Home 1, Home 2, Home 3) en blanco sobre fondo semi‑transparente. En hover la imagen se vuelve gris y el overlay aparece.

SECCIÓN 3 – RENDIMIENTO: título h2 "Ultra Performance" y párrafo explicativo. Grid de 2 columnas (desktop) o 1 columna (mobile) con 4 items. Cada item muestra un subtítulo (p.ej. "Google PageSpeed") y barra de progreso estilo Tailwind: contenedor gris claro y barra interior azul cian cuyo ancho se controla con estilo inline (por ejemplo width: 95%). Debajo la cifra en %.

FOOTER: fondo negro, padding vertical 2rem, columnas responsive (logo + breve descripción, enlaces rápidos, contacto). Texto en gris claro, enlaces con hover azul cian.

INTERACCIÓN: menús dropdown y search overlay deben abrir/cerrar con JavaScript vanilla. Las barras de progreso deben animarse al cargar la sección (usar IntersectionObserver). Los botones deben tener efecto ripple mediante CSS.

REQUISITOS TÉCNICOS:
- Todo el CSS proviene de Tailwind CDN (https://cdn.jsdelivr.net/npm/tailwindcss@^3/dist/tailwind.min.css).
- Añadir <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> y aplicar font‑family en <html>.
- Incluir script al final del body que gestiona dropdowns, search overlay y animación de barras.
- Estructura HTML semántica: <header>, <nav>, <section>, <footer>.
- Optimizar imágenes con atributos loading="lazy" y usar formatos WebP.
- Comentarios claros en el código para identificar cada bloque.

Genera el archivo index.html completo con todo lo anterior.

---

## 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.277 caracteres · 42 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra de navegación fija con logo, enlaces desplegables y botón de contacto
2.1 Hero de página con título, subtítulo y imagen de fondo a pantalla completa
3.1 Sección de demos con tres tarjetas que enlazan a distintas home
4.1 Sección de rendimiento con barra de progreso para métricas clave
5.1 Footer con información de contacto y enlaces rápidos

ABOUT US

1.1 Header interno idéntico al de Home
2.1 Hero con imagen y texto descriptivo
3.1 Bloque de historia y valores
4.1 Equipo con tarjetas de perfil
5.1 Footer común

SERVICES

1.1 Header interno
2.1 Hero con llamada a la acción
3.1 Lista de servicios en rejilla
4.1 Testimonios rotativos
5.1 Footer común

BLOG

1.1 Header interno
2.1 Lista de artículos en formato tarjeta
3.1 Sidebar con categorías y últimos posts
4.1 Footer común

CONTACT US

1.1 Header interno
2.1 Formulario de contacto con campos nombre, email, mensaje
3.1 Mapa incrustado
4.1 Información de contacto
5.1 Footer común

PROMPTS RELACIONADOS · MÚSICA Y BANDAS

Otros prompts de la misma categoría

Ficha de marca

Nombre: LumenVista
Sector: Plantilla web para estudios de producción audiovisual
Claim: Herramientas visuales para proyectos de video

Bloques de la home

1.1 Barra de navegación fija con logo, enlaces desplegables y botón de contacto
2.1 Hero de página con título, subtítulo y imagen de fondo a pantalla completa
3.1 Sección de demos con tres tarjetas que enlazan a distintas home
4.1 Sección de rendimiento con barra de progreso para métricas clave
5.1 Footer con información de contacto y enlaces rápidos

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

LumenVista – Landing Page para estudios de producción audiovisual

Cópialo y pégalo en Claude Design

Tabla de secciones

HOME

ABOUT US

SERVICES

BLOG

CONTACT US

Otros prompts de la misma categoría

LiraNova

VozAura

VozViva Media

Lúmina Club