AUTOMOCIÓN · Tailwind · Vanilla JS · HTML5

LavaLux Spa – Detalle premium para tu coche

★★★★★4,8 4.358 descargas

Theme responsive para LavaLux Spa, servicio de lavado y detalle de vehículos. Incluye hero oscuro, grid de servicios, precios, galería y carrito lateral, todo con Tailwind CSS y JavaScript puro. Optimizado para SEO y conversiones.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea un sitio web completo para la marca ficticia "LavaLux Spa" (dominio lavaluxspa.com) usando solo HTML, Tailwind CSS CDN y JavaScript vanilla en un único archivo. La web debe ser responsiva y reproducir fielmente la estructura y estilo del template analizado, sin copiar textos originales.

Paleta de colores:
- Fondo principal: #0D0D0D
- Texto principal: #FFFFFF
- Texto secundario: #CCCCCC
- Color de acento: #00BFFF (azul cielo)
- Botón primario: #0066FF
- Botón secundario: #333333

Tipografía:
- Fuente principal: "Inter", sans-serif (cargar desde Google Fonts)
- Encabezados en peso 700, cuerpo en 400.

Componentes:
1. Header (fixed, bg‑transparent on top, dark bg on scroll) con logo a la izquierda, menú principal con dropdowns y mega‑menu, íconos sociales y botón de carrito que abre una barra lateral derecha mostrando artículos, subtotal y botones de checkout.
2. Hero section: fondo gris oscuro con overlay azul, título grande (h1) centrado, subtítulo y botón CTA "Reserva ahora".
3. Servicios: grid de 3 columnas (mobile 1) con tarjetas con ícono SVG, título y breve descripción; hover cambia fondo a #0066FF y texto a blanco.
4. Precios: cards de 3 columnas, cada una con plan, precio mock (ej. "Desde 29€/mes"), lista de características y botón CTA.
5. Galería: rejilla de imágenes (4 columnas desktop, 2 tablet, 1 mobile) con filtro por categoría, al hacer click abre un lightbox simple.
6. Testimonios: carrusel horizontal automático (JS) con tarjetas de cliente, foto circular y cita.
7. CTA reserva rápida: banda ancha con fondo azul, texto centrado y botón.
8. Footer: fondo #111111, columnas con enlaces de navegación, datos de contacto, redes sociales y copyright.

Interactividad:
- Menú desplegable y mega‑menu con transición suave.
- Carrito lateral con toggle (open/close) y actualización de contador.
- Carrusel de testimonios con controles.
- Lightbox para galería.
- Smooth scroll para anchors.

Requisitos técnicos:
- Incluir Tailwind vía CDN (<script src="https://cdn.tailwindcss.com"></script>) y configurar colores personalizados.
- Usar data‑attributes para manejar estado del carrito y carrusel sin frameworks.
- Todo el HTML debe estar bien estructurado, semántico (header, nav, main, section, footer).
- No usar ninguna librería externa aparte de Tailwind y los íconos Font Awesome (cargar vía CDN).
- Añadir meta tags básicos y favicon ficticio.
- Comentarios claros en el código para identificar cada bloque.

Entrega el código listo para copiar‑pegar en un archivo 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>
```

2.862 caracteres · 57 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera fija con logo, menú desplegable y carrito lateral
1.2 Hero con fondo oscuro, título destacado y llamado a la acción
1.3 Bloque de servicios en cuadrícula de tres columnas con íconos
1.4 Sección de precios con tarjetas resaltadas
1.5 Galería de trabajos con rejilla responsiva
1.6 Testimonios en carrusel simple
1.7 Llamado a la acción de reserva rápida
1.8 Footer con enlaces, datos de contacto y redes sociales

SERVICES

2.1 Cabecera reutilizada
2.2 Lista de servicios detallada con imágenes y descripciones
2.3 Botón de reserva por servicio
2.4 Footer estándar

PRICING

3.1 Cabecera reutilizada
3.2 Tabla de planes con características y precios ficticios
3.3 Botón de contratar
3.4 Footer estándar

GALLERY

4.1 Cabecera reutilizada
4.2 Galería filtrable con tarjetas de imagen
4.3 Lightbox básico
4.4 Footer estándar

ABOUT

5.1 Cabecera reutilizada
5.2 Historia de la marca y valores
5.3 Equipo con fotos y breves bios
5.4 Footer estándar

CONTACT

6.1 Cabecera reutilizada
6.2 Formulario de contacto simple (nombre, email, mensaje)
6.3 Mapa incrustado
6.4 Footer estándar

PROMPTS RELACIONADOS · AUTOMOCIÓN

Otros prompts de la misma categoría

Ficha de marca

Nombre: LavaLux Spa
Sector: Servicios de lavado y detalle de vehículos
Claim: Cuidamos cada detalle de tu coche

Bloques de la home

1.1 Cabecera fija con logo, menú desplegable y carrito lateral
1.2 Hero con fondo oscuro, título destacado y llamado a la acción
1.3 Bloque de servicios en cuadrícula de tres columnas con íconos
1.4 Sección de precios con tarjetas resaltadas
1.5 Galería de trabajos con rejilla responsiva
1.6 Testimonios en carrusel simple
1.7 Llamado a la acción de reserva rápida
1.8 Footer con enlaces, datos de contacto 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