NUEVO PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Crea una página web completa para la marca ficticia "CineViva Studio" usando solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. El sitio debe reproducir la arquitectura y estilo visual del ejemplo analizado, sin copiar texto ni imágenes exactas.
**Objetivo**: agencia digital de producción audiovisual y animación.
**Stack**:
```html
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css" rel="stylesheet">
<script src="https://unpkg.com/alpinejs@3" defer></script>
```
**Paleta de colores** (extraída del original):
- Primario: #BFF133 (verde lima)
- Fondo oscuro: #151515
- Texto principal: #FFFFFF
- Accentos: #0C0C0C
**Tipografía**: Inter (Google Fonts) para todos los textos, peso 400/600/700 según jerarquía.
**Header**: barra fija con logo (
4.721 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
4.721 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 Hero con video de fondo y título animado
- 2.1 Menú overlay con video de fondo, enlaces de navegación y redes sociales
- 3.1 Bloque "Sobre CineViva" con imagen lateral y descripción
- 4.1 Overview con contadores numéricos animados
- 5.1 Servicios en grid de tarjetas
- 6.1 Testimonios en carrusel
- 7.1 Footer con enlaces y datos de contacto
ABOUT
- 1.1 Header fijo con logo y burger
- 2.1 Imagen hero grande con texto introductorio
- 3.1 Timeline de historia con iconos
- 4.1 Equipo en tarjetas
- 5.1 Footer común
SERVICES
- 1.1 Header con breadcrumbs
- 2.1 Lista de servicios en tarjetas con íconos
- 3.1 Caso de estudio destacado
- 4.1 CTA a contacto
- 5.1 Footer común
PORTFOLIO
- 1.1 Header con filtros de categoría
- 2.1 Galería en masonry de proyectos
- 3.1 Lightbox al hacer clic
- 4.1 CTA a contacto
- 5.1 Footer común
CONTACT
- 1.1 Header con formulario de contacto
- 2.1 Mapa integrado
- 3.1 Información de contacto y redes
- 4.1 Footer común
PROMPTS RELACIONADOS · AGENCIA DIGITAL
