SALUD Y MEDICINA · Claude Design · Tailwind · HTML

Lirio Sereno – Coaching personal para mujeres en transición

★★★★★4,7 755 descargas

Theme de una sola página para Lirio Sereno, coach que acompaña a mujeres en momentos de cambio vital. Diseño sereno, editorial y responsive con Tailwind y animaciones suaves.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web completa de una sola página HTML autocontenida para la marca ficticia LIRIO SERENO, una coach personal que acompaña a mujeres en momentos de transición vital. Tono honesto, sereno, sin promesas marketineras. Idioma: español de España. Año 2025.

MARCA
- Nombre: Lirio Sereno
- Dominio: liriosereno.com
- Email: hola@liriosereno.com
- Claim: 'Acompañamiento honesto para reencontrar tu rumbo'
- Sector: coaching personal y crecimiento

STACK Y FORMATO
- Un único archivo HTML.
- Tailwind CSS vía CDN (script de play.tailwindcss.com o cdn.tailwindcss.com).
- JavaScript vanilla embebido para menú móvil, carrusel de testimonios y animaciones suaves al hacer scroll (IntersectionObserver con fade-up).
- Google Fonts: 'Cormorant Garamond' (titulares, serif editorial) y 'Inter' (cuerpo, sans).
- Imágenes: usa placeholders de Unsplash (https://images.unsplash.com/...) con temáticas de naturaleza, retratos editoriales en luz natural, sombras de hojas, manos, flores secas. Siempre con alt descriptivo en español.

PALETA (estética calma, editorial, cálida)
- Fondo base crema: #F4EFE8
- Crema más claro: #FBF7F2
- Texto principal marrón oscuro: #2B2218
- Acento terracota suave: #B5704D
- Verde oliva apagado: #6E6A4E
- Línea / separadores: #D9CFC2

ESTILO VISUAL
- Layout amplio, mucho aire, márgenes generosos.
- Titulares en serif con peso medio, interlineado holgado y kerning suave.
- Microtipografía en mayúsculas con letter-spacing amplio para etiquetas tipo 'CAPÍTULO 01'.
- Botones tipo pill con borde fino, hover con animación de doble texto deslizante (truco mask + translate).
- Transiciones suaves 400ms ease.
- Detalles editoriales: números grandes (01, 02), líneas finas separadoras, imágenes verticales en formato retrato.

HEADER (sticky, fondo crema con leve blur al hacer scroll)
- Logotipo textual 'Lirio Sereno' en serif a la izquierda.
- Menú centrado: Inicio, Sobre mí, Servicios, Tarifas, Diario (blog), Contacto.
- Botón derecho pill 'Reservar consulta' con flecha SVG.
- En móvil, menú hamburguesa que despliega overlay full screen.

HOME (en este orden, todo dentro del mismo HTML como secciones ancladas)

1) HERO
- Dos columnas: izquierda con un párrafo corto introductorio ('Te acompaño a poner orden interior cuando todo alrededor se mueve.'), microbotón pill 'Reservar consulta' con icono flecha, y debajo un titular enorme en serif 'Crece sin perderte'.
- Columna derecha: imagen vertical retrato de una mujer en campo con luz dorada (placeholder Unsplash).
- Bajo el hero, una franja decorativa con una línea fina y un texto pequeño tipo 'Disponible para nuevas sesiones · Otoño 2025'.

2) SOBRE MÍ
- Fondo con textura sutil de sombras de hojas (imagen Unsplash en background con opacity baja).
- Izquierda: dos imágenes verticales solapadas (una de figura caminando, otra de retrato cerca de ventana).
- Derecha: título serif 'Ofrezco un acompañamiento humano en un mundo lleno de ruido.' + dos párrafos originales describiendo el método (escucha, no perfeccionismo, ritmo propio).
- Pequeña firma manuscrita simulada con fuente cursiva.

3) VISTO EN
- Encabezado pequeño en mayúsculas 'Mencionada en'.
- Fila de 5 logotipos ficticios en escala de grises (puedes generar con divs y texto estilizado: 'Pausa Magazine', 'Hábito', 'Voces', 'Raíz Studio', 'Ciclo'). Animación sutil opacity hover.

4) SERVICIOS
- Titular: 'Sesiones diseñadas para ganar claridad'.
- Grid de 4 tarjetas numeradas (01, 02, 03, 04) con número grande, imagen pequeña arriba, título, descripción breve y botón 'Reservar consulta'.
  · 01 Confianza y crecimiento personal
  · 02 Transiciones vitales
  · 03 Maternidad consciente
  · 04 Reorientación profesional
- Cada tarjeta con borde fino y hover que sube ligeramente.

5) MÉTODO (3 PASOS)
- Sección horizontal con 3 columnas: Escuchar · Ordenar · Avanzar. Cada una con número romano, título serif y párrafo corto.

6) TARIFAS
- Tres planes en cards verticales: 'Sesión suelta', 'Acompañamiento 3 meses', 'Programa anual'.
- Cada card: nombre, descripción breve, lista de 4-5 elementos incluidos con checks SVG en color terracota, botón 'Solicitar información'. SIN precios concretos, usar etiqueta 'Consultar tarifa'.
- Plan central destacado con borde más marcado y etiqueta 'Más elegido'.

7) TESTIMONIOS
- Carrusel editorial con una cita visible cada vez, comillas grandes en serif, texto del testimonio, nombre y rol abajo ('María L., 38 años' / 'Inés P., emprendedora'). Controles flecha izquierda/derecha y bullets. Autoplay 6s con pausa al hover. 4 testimonios originales.

8) DIARIO (BLOG PREVIEW)
- Título 'Desde el diario' + 3 artículos en grid: imagen, categoría pequeña en mayúsculas, título serif, fecha. Enlaces simulados.

9) CTA FINAL
- Banda ancha fondo crema oscuro, titular serif 'Empezamos cuando estés lista', párrafo breve y dos botones: primario 'Reservar consulta' y secundario 'Escríbeme'.

10) FOOTER
- Cuatro columnas: marca + claim breve; Navegación; Servicios; Contacto (email hola@liriosereno.com, horario, redes simuladas: Instagram, Substack).
- Línea fina divisoria y copyright '© 2025 Lirio Sereno · Diseñado con calma'.
- Enlaces legales: Aviso legal, Privacidad, Cookies.

REQUISITOS TÉCNICOS
- Responsive completo: mobile, tablet y desktop. Breakpoints Tailwind estándar.
- Accesibilidad: contraste correcto, aria-labels en botones de icono, foco visible.
- Animaciones: fade-up de 30px con stagger en secciones al entrar en viewport (IntersectionObserver).
- Botones con doble label deslizante en hover (usa overflow:hidden y dos spans con translate-y).
- Sin librerías externas salvo Tailwind CDN y Google Fonts.
- Código limpio, comentado por secciones, semántico (header, section, article, footer).
- Todo el copy en español de España, redactado de cero, sin frases promocionales agresivas.
- Sustituye totalmente cualquier referencia ajena: la marca es Lirio Sereno y nada más.

Entrega un único archivo HTML listo para abrir en 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>
```

6.296 caracteres · 114 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header con navegación y botón Contactar
1.2 Hero editorial a dos columnas con retrato
1.3 Sobre mí con imágenes dobles y textura de hojas
1.4 Banda 'Visto en' con logotipos
1.5 Servicios en tarjetas numeradas
1.6 Tarifas en planes verticales
1.7 Testimonios en carrusel
1.8 CTA final ancho
1.9 Footer completo

SOBRE MI

2.1 Header
2.2 Hero biográfico con retrato grande y bio extendida
2.3 Bloque de valores y método (3 pilares)
2.4 Timeline de trayectoria profesional
2.5 Galería editorial de imágenes
2.6 CTA invitación a reservar sesión
2.7 Footer

SERVICIOS

3.1 Header
3.2 Intro de página con título y párrafo
3.3 Listado completo de servicios en tarjetas numeradas con detalle ampliado
3.4 Sección de proceso paso a paso (4 etapas)
3.5 FAQ acordeón sobre los servicios
3.6 CTA final
3.7 Footer

TARIFAS

4.1 Header
4.2 Intro con titular y subtítulo
4.3 Tabla de planes comparativa
4.4 Bloque de garantías y forma de trabajo
4.5 FAQ de pagos y sesiones
4.6 CTA final
4.7 Footer

BLOG

5.1 Header
5.2 Hero con artículo destacado grande
5.3 Grid de artículos con imagen, categoría, título y fecha
5.4 Paginación discreta
5.5 Bloque suscripción a newsletter
5.6 Footer

CONTACTO

6.1 Header
6.2 Titular y párrafo introductorio
6.3 Formulario de contacto a dos columnas con datos de la consulta
6.4 Bloque lateral con email, horario y enlaces
6.5 Mapa o imagen ambiental decorativa
6.6 Footer

PROMPTS RELACIONADOS · SALUD Y MEDICINA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lirio Sereno
Sector: Coaching personal y acompañamiento para mujeres en transición vital
Claim: Acompañamiento honesto para reencontrar tu rumbo

Bloques de la home

1.1 Header con logotipo de marca, navegación (Inicio, Sobre mí, Servicios, Tarifas) y botón Contactar con icono
1.2 Hero a dos columnas: copy editorial con paragraph corto, microbotón 'Reservar sesión' y titular gigante en serif a la izquierda; imagen vertical retrato a la derecha; transición decorativa inferior
1.3 Bloque Sobre mí con dos imágenes verticales solapadas a la izquierda, título serif y dos párrafos a la derecha, sobre fondo con textura de sombras de hojas
1.4 Banda 'Visto en' con encabezado pequeño y fila de 5 logotipos en escala de grises
1.5 Sección Servicios con titular y grid de tarjetas numeradas (01, 02, 03, 04) con imagen, título, descripción breve y botón 'Reservar sesión'
1.6 Sección Tarifas con dos o tres planes en cards verticales: nombre del plan, descripción, listado de lo incluido y CTA
1.7 Sección Testimonios tipo carrusel editorial con cita destacada, nombre y rol
1.8 Bloque CTA final ancho con titular serif grande, párrafo breve y botón principal sobre fondo cálido
1.9 Footer con logo, breve frase de marca, columnas de enlaces (Navegación, Servicios, Legal), email de contacto y copyright

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