EVENTOS · Tailwind · Vanilla JS · Claude Design

Lúmina Creaciones – Tienda online de artesanía y cultura

★★★★★4,9 2.480 descargas

Tema web responsive para Lúmina Creaciones, combina venta de productos artesanales y agenda de eventos culturales. Incluye carrito visual, hero impactante y sección de testimonios.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web completa para la marca ficticia Lúmina Creaciones (lumina-creaciones.com) usando únicamente HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. La web debe reproducir el diseño visual y la arquitectura de la plantilla analizada, pero con contenido original en español (España) y sin copiar texto del original. 

**Alcance**: Home, About, Books, Events, Contact y carrito de compras funcional (solo simulación visual). 
**Stack**: 
- `<link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4/dist/tailwind.min.css" rel="stylesheet">`
- Script al final del body con lógica mínima para abrir/cerrar el carrito y cambiar slides del carrusel.

**Paleta de colores** (extraída y renombrada):
- Primary: #1F2937 (gris oscuro)
- Secondary: #F97316 (naranja vibrante)
- Accent: #F59E0B (amarillo dorado)
- Light: #F3F4F6 (gris muy claro)
- White: #FFFFFF

**Tipografía**: 
- Heading: "Inter", sans-serif (cargada con `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">`)
- Body: "Inter", sans-serif.

**Header**: barra de navegación fija, fondo primary, logo a la izquierda (texto LÚMINA con estilo bold, color white), menú centrado con enlaces (Home, Sobre nosotros, Libros, Eventos, Contacto) con efecto hover de subrayado animado, botón de carrito a la derecha con icono SVG y badge de contador.

**Footer**: fondo primary, cuatro columnas con enlaces (Sobre, Navegación, Redes, Contacto), texto blanco, iconos de redes (Instagram, Facebook, Twitter) en color accent.

**Home**:
1.1 Hero: sección a pantalla completa, fondo image overlay dark, título grande (h1) en blanco, subtítulo en light, botón CTA "Explorar productos" con fondo secondary y hover accent.
1.2 Grid de productos destacados: 4 columnas en desktop, 2 en tablet, 1 en móvil, tarjetas con sombra ligera, imagen, nombre, precio secondary, botón "Añadir al carrito".
1.3 Sección de eventos: tarjetas horizontales con imagen a la izquierda, día destacado en círculo accent, título y breve descripción, botón "Registrarse".
1.4 Carrusel de testimonios: contenedor con overflow‑hidden, botones prev/next, cada slide muestra foto circular, nombre y comentario en texto gris claro.
1.5 Newsletter: fondo light, input email con borde primary, botón secondary.

**About**: banner interior con fondo secondary y título, sección con texto descriptivo y foto del equipo en dos columnas, bloques de valores con iconos.

**Books**: grid de libros (3 columnas), filtro por categoría y barra de búsqueda, cada tarjeta con portada, título, botón "Ver detalle".

**Events**: lista de eventos con tarjetas; cada tarjeta muestra fecha, título, descripción y botón "Registrarse"; incluye filtro por mes.

**Contact**: formulario con campos nombre, email, mensaje, botón submit secondary; mapa estático de Google Maps embed (placeholder), datos de contacto en columna lateral.

**Carrito**: barra lateral derecha que se abre al hacer clic en el ícono, muestra lista de productos simulada, subtotal y botón "Proceder al pago".

**Interactividad**:
- Toggle del carrito (clase `translate-x-full` / `translate-x-0`).
- Slider de testimonios con `setInterval` y botones.
- Filtros y búsqueda con simple `filter` de arrays de objetos en JS (datos mock dentro del script).

**Requisitos técnicos**:
- Todas las clases deben seguir la convención de Tailwind.
- Usar componentes reutilizables (ej. `<section>` con clases comunes).
- Mantener accesibilidad: `aria-label` en botones, contraste suficiente.
- No incluir enlaces externos reales; usar `#` como href.
- Optimizar tamaño: imágenes como placeholders de base64 o URLs libres de derechos.
- El archivo final debe ser autocontenido y listo para abrirse en el navegador.

---

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

4.092 caracteres · 68 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME