SALUD Y MEDICINA · Claude Design · Tailwind · HTML

Lumara Studio – Mentoría de negocio para emprendedoras

★★★★★4,7 2.582 descargas

Tema web para Lumara Studio, consultora de mentoría para mujeres emprendedoras. Incluye hero con video‑fondo, carrusel de logos, servicios numerados, proceso en pasos, testimonios y blog, todo con Tailwind CSS y sin dependencias externas.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una web corporativa completa en un único archivo HTML usando Tailwind CSS por CDN y JavaScript vanilla, sin frameworks ni dependencias externas más allá de Tailwind y Google Fonts. La web es para una marca ficticia llamada 'Lumara Studio', una consultora de mentoría y estrategia de negocio para mujeres emprendedoras. Claim: 'Acompañamiento para emprendedoras que quieren crecer con cabeza y propósito'. Dominio lumarastudio.com, email hola@lumarastudio.com, año 2025. Todo el texto en español de España, original, en tono cálido, cercano y editorial, sin jerga marketinera, sin precios.

ESTÉTICA: minimalismo editorial femenino. Paleta: fondo principal crema cálido #F5F1EA, texto principal gris carbón #2B2B2B, acento verde lima #D4FFA4 para botones y palabras destacadas, secundario malva apagado #C9B8D6 para detalles, blanco roto #FFFDF9 para tarjetas. Tipografía: títulos en serif elegante 'Fraunces' (Google Fonts) con pesos 400 y 600, palabras destacadas en cursiva italic; cuerpo en sans 'Inter' 400/500. Títulos hero muy grandes (clamp 4rem a 8rem), interletraje ajustado, line-height 1. Bordes redondeados grandes (rounded-3xl) en imágenes y tarjetas. Mucho aire blanco. Animaciones suaves de fade-up al hacer scroll usando IntersectionObserver.

HEADER: barra superior fija sobre fondo crema, logo 'Lumara' a la izquierda en serif, navegación centrada/derecha con enlaces en minúsculas (inicio, páginas con dropdown, servicios, casos, blog, contacto). El dropdown 'páginas' abre un panel ancho con dos columnas tituladas 'Contenido' (casos, blog, podcast) y 'Empresa' (sobre nosotras, servicios, contacto) más una pequeña imagen decorativa. En móvil, menú hamburguesa que despliega panel a pantalla completa.

HOME sección a sección:
1.1 HERO: a pantalla casi completa. Vídeo de fondo simulado con un degradado animado suave en tonos crema y malva (usa un div con animación CSS de gradientes en movimiento, no vídeo real). Encima, titular gigante en serif: 'Acompañamos a emprendedoras que quieren <em>florecer</em> en su negocio'. Debajo, párrafo breve y botón pill verde lima #D4FFA4 con texto negro 'Empezar ahora' y flecha diagonal. Animación de entrada con opacidad y translateY.
1.2 CARRUSEL DE LOGOS: franja con marquee infinito horizontal de 8 logos de clientes ficticios en SVG simples monocromos (texto estilizado tipo 'NORDA', 'Caliope', 'Brío&Co', 'Mentaverde', 'Ámbar', 'Saudade', 'Lirio', 'Verba'). Duplicar el set para loop continuo con CSS animation.
1.3 SERVICIOS NUMERADOS: título de sección con etiqueta pequeña 'Servicios' y H2 'Lo que ofrecemos para impulsar tu <em>camino</em>'. Debajo, 4 filas, cada una con: número grande 01-04 a la izquierda en serif, nombre del servicio (Alineación de tiempo y energía, Estrategia de ventas y lanzamientos, Plano de escalado del negocio, Marketing y visibilidad), una miniatura cuadrada rounded-3xl a la derecha y una flecha diagonal. Al hacer hover, la miniatura crece ligeramente y la flecha se desplaza. Separadas por línea fina.
1.4 SOBRE NOSOTRAS: dos columnas. Izquierda imagen vertical rounded-3xl (placeholder con degradado malva). Derecha: etiqueta 'Quiénes somos', H2 serif 'Un espacio para crecer sin perderte por el camino', párrafo de 3-4 líneas y tres cifras destacadas en fila (+200 mentorías, 8 años acompañando, 96% de clientas recurrentes).
1.5 PROCESO: 4 pasos en grid horizontal en desktop, cada uno con número en serif, título corto y descripción (Escuchamos, Diseñamos, Implementamos, Revisamos). Fondo ligeramente más oscuro que el crema.
1.6 TESTIMONIOS: slider con flechas izquierda/derecha en JS vanilla. Cada slide: cita grande en serif italic, debajo foto circular (placeholder con inicial) y nombre + cargo. Tres testimonios ficticios.
1.7 CASOS DE ESTUDIO: grid de 2 columnas con 4 tarjetas. Cada tarjeta: imagen rounded-3xl, etiqueta de categoría pequeña, título serif y enlace 'Ver caso' con flecha.
1.8 BLOG: 3 últimas entradas en grid, cada una con imagen, fecha, categoría, título y autora.
1.9 CTA FINAL: banner ancho fondo verde lima suave o malva, titular serif gigante '¿Lista para dar el siguiente paso?', botón pill negro y pequeño texto debajo.
1.10 FOOTER: 4 columnas (logo + claim + redes; navegación; recursos; newsletter con input y botón). Línea fina y créditos '© 2025 Lumara Studio'.

REQUISITOS TÉCNICOS: HTML5 semántico, responsive perfecto (mobile-first, breakpoints sm/md/lg/xl), accesibilidad básica (alt, aria-label en botones de icono, focus visible), Tailwind por CDN con configuración inline para añadir las fuentes y colores personalizados, Google Fonts (Fraunces e Inter), JavaScript vanilla solo para: menú móvil, dropdown del header, slider de testimonios, marquee de logos (CSS) y animaciones de entrada con IntersectionObserver. Sin imágenes externas: usar SVG inline, degradados CSS y placeholders generados. Código limpio, comentado por secciones, todo en un único 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>
```

5.271 caracteres · 36 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Hero con vídeo de fondo, titular serif y botón verde lima
1.2 Carrusel de logos de clientes
1.3 Servicios numerados con imagen y flecha
1.4 Sobre nosotras editorial con cifras
1.5 Proceso de trabajo en pasos
1.6 Testimonios con foto y cita
1.7 Grid de casos de estudio
1.8 Últimas entradas del blog
1.9 CTA final
1.10 Footer completo

SOBRE NOSOTRAS

2.1 Cabecera con titular y bajada
2.2 Historia de la marca con imagen
2.3 Valores en grid de 4
2.4 Equipo con fotos y bios
2.5 CTA contacto

SERVICIOS

3.1 Cabecera de página
3.2 Listado completo de servicios numerados
3.3 Metodología paso a paso
3.4 FAQ
3.5 CTA final

CASOS DE ESTUDIO

4.1 Cabecera con filtros por categoría
4.2 Grid de casos
4.3 CTA

BLOG

5.1 Cabecera con entrada destacada
5.2 Grid de artículos
5.3 Suscripción a newsletter

PODCAST

6.1 Cabecera con episodio destacado y reproductor
6.2 Listado de episodios
6.3 Plataformas de escucha

CONTACTO

7.1 Cabecera
7.2 Formulario y datos de contacto
7.3 Bloque de horarios y ubicación

PROMPTS RELACIONADOS · SALUD Y MEDICINA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lumara Studio
Sector: Mentoría y consultoría de negocio para mujeres emprendedoras
Claim: Acompañamiento para emprendedoras que quieren crecer con cabeza y propósito

Bloques de la home

1.1 Hero a pantalla completa con vídeo de fondo, titular serif gigante con palabra destacada en cursiva, párrafo y botón verde lima 'Empezar ahora'
1.2 Carrusel infinito de logos de clientes en escala de grises
1.3 Sección de servicios numerados (01-04) con título grande, miniatura cuadrada y flecha diagonal por item, en lista vertical
1.4 Bloque sobre nosotras con imagen grande a la izquierda y texto editorial a la derecha con cifras destacadas
1.5 Proceso de trabajo en 3-4 pasos con numeración tipográfica y descripciones cortas
1.6 Testimonios en formato cita grande con foto circular y nombre, navegación con flechas
1.7 Casos de estudio en grid de 2 columnas con imagen, categoría y título
1.8 Sección de blog/insights con 3 últimas entradas
1.9 CTA final tipo banner con titular emocional y botón
1.10 Footer amplio con logo, columnas de enlaces, newsletter y créditos

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