PODCAST · Claude Design · Tailwind · JavaScript

Lúcida Visión – Portfolio de producción audiovisual independiente

★★★★★4,6 2.761 descargas

Tema web completo para Lúcida Visión, creador de contenido audiovisual independiente. Incluye hero, galería de trabajos, tienda y blog, con diseño responsive y animaciones CSS.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Create a complete single‑file website for the fictitious brand "Lúcida Visión" (lucidavision.com), a portfolio for an independent filmmaker. Use HTML with Tailwind CSS via CDN and vanilla JavaScript only. Replicate the visual patterns of the source: a fixed header with logo, navigation links (Home, Services, Work, Store, Blog), a cart icon showing item count, and a hamburger menu for mobile. Include an optional top banner alert with a link to an external live site. Implement a page loader animation (SVG spinner) that disappears after content loads.

Palette:
- Primary: #0A0A0A (deep black)
- Secondary: #F5F5F5 (light gray)
- Accent: #E63946 (vivid red)
- Muted: #A8A8A8 (medium gray)
- Background: #FFFFFF

Typography (Google Fonts):
- Heading: "Montserrat", weight 700, tracking -0.02em
- Body: "Inter", weight 400, leading 1.6

Sections (Home, Services, Work, Store, Blog, Contact, Footer) each follow the numbered block list.

**Header**: sticky top‑0, bg‑white, flex with logo (svg placeholder), nav links with hover underline, cart button showing count badge, burger menu for small screens.

**Hero**: full‑width, large heading (text‑5xl lg:text-7xl, uppercase), a blurred, low‑opacity subtitle positioned behind (filter blur‑4 opacity‑10). Centered vertical layout with a primary CTA button.

**Banner alert**: thin strip under header, bg‑accent, white text, left‑aligned message and right‑aligned arrow icon.

**Loading animation**: centered SVG spinner (rotate‑infinite), hidden after DOMContentLoaded.

**Services**: three columns on lg, each card with icon (svg placeholder), title, short paragraph, hover shadow.

**Work gallery**: responsive grid (2‑col md, 3‑col lg). Each item shows an image; on hover, dark overlay with project title fades in.

**Store**: product cards in grid, image, name, price, "Añadir al carrito" button. Cart opens as right sidebar overlay, showing list of items, quantity input, remove button, subtotal, and checkout CTA (non‑functional).

**Blog list**: cards with featured image, title, date, author, excerpt, and "Leer más" link.

**Contact**: simple contact form (name, email, message) with validation, plus static address and embedded Google Map placeholder.

**Footer**: dark background (#0A0A0A), light text, three columns: quick links, social icons, newsletter subscription form.

**Interactions**: smooth scroll for internal links, fade‑in animations on scroll (use IntersectionObserver), cart count updates on button click (simulated), mobile menu toggles.

**Technical requirements**:
- All CSS via <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css" rel="stylesheet">.
- JavaScript placed in a <script> tag at end of body.
- No external assets except Tailwind CDN and Google Fonts.
- Use semantic HTML5 elements (header, nav, main, section, footer).
- Ensure responsiveness and accessibility (ARIA labels for cart, menu, form).
- Provide placeholder images via https://picsum.photos/.
- Comment code blocks for clarity.

Generate the full HTML file with the above specifications, ready to be saved as 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>
```

3.439 caracteres · 64 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero con título grande y subtítulo difuminado
1.2 Mensaje emergente de aviso con enlace externo
1.3 Navegación principal con logo, enlaces a secciones y botón de carrito
1.4 Loader de página con animación SVG
1.5 Bloque de introducción con texto destacado y llamado a acción
1.6 Área de servicios con tarjetas icono‑texto
1.7 Galería de trabajos con grid responsive y overlay hover
1.8 Sección de tienda con productos destacados y botón "Añadir al carrito"
1.9 Blog de noticias con listado de entradas
1.10 Footer con enlaces institucionales, redes sociales y newsletter

SERVICES

2.1 Título de página y descripción breve
2.2 Lista de servicios con iconos, título y párrafo explicativo
2.3 CTA para contactar

WORK

3.1 Título de proyecto y filtro de categorías
3.2 Grid de proyectos con imagen, overlay y enlace a detalle
3.3 Paginación simple

STORE

4.1 Título de tienda y filtro de productos
4.2 Grid de productos con foto, nombre, precio y botón "Añadir al carrito"
4.3 Carrito flotante lateral

BLOG

5.1 Lista de artículos con imagen, fecha, autor y extracto
5.2 Paginación

CONTACT

6.1 Formulario de contacto con campos nombre, email, mensaje
6.2 Información de contacto y mapa embed

FOOTER

7.1 Enlaces rápidos, redes sociales y suscripción al newsletter

PROMPTS RELACIONADOS · PODCAST

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lúcida Visión
Sector: Producción audiovisual independiente
Claim: Narramos historias que inspiran

Bloques de la home

1.1 Hero con título grande y subtítulo difuminado
1.2 Mensaje emergente de aviso con enlace externo
1.3 Navegación principal con logo, enlaces a secciones y botón de carrito
1.4 Loader de página con animación SVG
1.5 Bloque de introducción con texto destacado y llamado a acción
1.6 Área de servicios con tarjetas icono‑texto
1.7 Galería de trabajos con grid responsive y overlay hover
1.8 Sección de tienda con productos destacados y botón "Añadir al carrito"
1.9 Blog de noticias con listado de entradas
1.10 Footer con enlaces institucionales, redes sociales y newsletter

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