BELLEZA / SPA · Tailwind CSS · Vanilla JavaScript · Swiper.js

LumenSereno – Plataforma de desarrollo personal y bienestar interior

★★★★★4,6 3.490 descargas

Theme minimalista para LumenSereno, una web de desarrollo personal con secciones de libros, conferencias y proyectos. Construido con HTML, Tailwind CSS y JavaScript puro, incluye scroll suave y animaciones al entrar en viewport.

↓ 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 LumenSereno, una plataforma de desarrollo personal, usando solo HTML, Tailwind CSS vía CDN y JavaScript vanilla en un único archivo. Reproduce fielmente la estructura visual y de interacción del sitio de referencia, sin copiar textos ni imágenes. Utiliza la siguiente paleta de colores: #1A1A1A (fondo principal), #F5F5F5 (texto claro), #4A90E2 (acentos y botones), #E0E0E0 (bordes y fondos secundarios). Tipografía: Source Sans Pro (cargar desde Google Fonts, pesos 400 y 700). 

**Header**: contenedor centrado, logo SVG a la izquierda, menú horizontal centrado con ítems: Agenda, Mi historia, Libros, Conferencias, Proyectos, Blog; estilo minimalista, subrayado suave al pasar el ratón. En móviles, botón hamburguesa que despliega un overlay vertical con los mismos enlaces.

**Hero**: sección a pantalla completa, fondo de imagen "hero.webp" (usar placeholder), título grande en blanco sobre fondo oscuro con overlay negro 50%, subtítulo en fuente regular, botón principal con fondo #4A90E2 y texto blanco.

**Bloque 1 – Presentación**: grid de dos columnas (imagen a la izquierda, texto a la derecha). Título en fuente 700, párrafo con línea altura 1.6, botón secundario con borde #4A90E2.

**Bloque 2 – Libros**: sección con título centrado, grid de 3 columnas en desktop, 2 en tablet y 1 en móvil. Cada tarjeta muestra portada (placeholder), título, breve descripción y botón "Leer más" con fondo transparente y borde #4A90E2.

**Bloque 3 – Conferencias**: lista de eventos con mini‑tarjetas horizontales: imagen, fecha, título, botón "Registrarse" en #4A90E2.

**Bloque 4 – Proyectos**: carrusel horizontal (usar Swiper.js vía CDN) con slides que contengan imagen, nombre del proyecto y descripción corta. Flechas de navegación en color #4A90E2.

**Bloque 5 – Suscripción**: fondo #E0E0E0, formulario de una fila (email input y botón) centrado, placeholder del input gris, botón con fondo #4A90E2.

**Footer**: fondo #1A1A1A, columnas con enlaces de navegación, iconos de redes sociales (SVG), y texto de copyright "© 2026 LumenSereno" en #F5F5F5.

**Interacciones**: suavizado de scroll, animaciones fade‑in de secciones al entrar en viewport (usar IntersectionObserver), efectos hover en botones (oscurecer 10%), menú hamburguesa abre overlay con backdrop‑blur.

**Requisitos técnicos**: 
- Incluir Tailwind v3 CDN `<script src="https://cdn.tailwindcss.com"></script>` y configurarlo con los colores personalizados.
- Incluir Swiper.js CDN para el carrusel.
- Todo el CSS mediante clases Tailwind, sin archivos externos.
- JavaScript para menú móvil y carrusel, sin frameworks.
- Optimizar imágenes con atributos `loading="lazy"` y `decoding="async"`.
- Añadir meta tags básicos (charset, viewport, description, favicon).
- Mantener una estructura semántica (header, nav, main, section, footer).
- El archivo debe ser válido y listo para abrirse en cualquier 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>
```

3.271 caracteres · 46 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Cabecera con logo y menú principal centrado, botón hamburguesa para móviles
1.2 Hero con imagen de gran resolución, título destacado y breve descripción
1.3 Bloque de presentación personal con foto y texto introductorio
1.4 Galería de libros en rejilla de tarjetas
1.5 Sección de conferencias con lista de eventos próximos
1.6 Proyectos destacados en carrusel horizontal
1.7 Área de suscripción al newsletter con campo email y botón
1.8 Footer con enlaces a secciones, redes sociales y datos de contacto

HISTORIA

2.1 Título de la página y foto de portada
2.2 Texto narrativo dividido en párrafos con imagen acompañante
2.3 Llamada a la acción para contactar

LIBROS

3.1 Título de la página y filtro de categorías
3.2 Tarjetas de libros con portada, título, breve sinopsis y botón "Leer más"
3.3 Paginación al final

CONFERENCIAS

4.1 Título de la página y calendario de eventos
4.2 Lista de conferencias con foto, fecha, lugar y botón registro

PROYECTOS

5.1 Título de la página y carrusel de proyectos con imagen, nombre y descripción corta

BLOG

6.1 Listado de artículos con imagen destacada, título y extracto
6.2 Barra lateral con categorías y últimas entradas

CONTACTO

7.1 Formulario de contacto (nombre, email, mensaje) y mapa de ubicación

PROMPTS RELACIONADOS · BELLEZA / SPA

Otros prompts de la misma categoría

Ficha de marca

Nombre: LumenSereno
Sector: Plataforma de desarrollo personal y bienestar interior
Claim: Explora tu esencia más allá de las máscaras cotidianas

Bloques de la home

1.1 Cabecera con logo y menú principal centrado, botón hamburguesa para móviles
1.2 Hero con imagen de gran resolución, título destacado y breve descripción
1.3 Bloque de presentación personal con foto y texto introductorio
1.4 Galería de libros en rejilla de tarjetas
1.5 Sección de conferencias con lista de eventos próximos
1.6 Proyectos destacados en carrusel horizontal
1.7 Área de suscripción al newsletter con campo email y botón
1.8 Footer con enlaces a secciones, redes sociales y datos de contacto

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