SALUD Y MEDICINA · Claude Design · Tailwind · HTML5

Lumavid Salud – Tecnología clínica al alcance de tu equipo

★★★★★4,9 2.798 descargas

Tema web completo para Lumavid Salud, plataforma e‑commerce de startups del sector salud. Incluye hero, bloques de servicios, catálogo, planes y blog, todo responsive con Tailwind CSS y JS vanilla.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Genera una web completa en un único archivo HTML autocontenido usando HTML5, Tailwind CSS vía CDN y JavaScript vanilla (sin frameworks, sin build). Todo el código debe ir en un solo .html funcional al abrirlo en el navegador.

MARCA FICTICIA
- Nombre: Lumavid Salud
- Sector: plataforma e-commerce y servicios para startups del sector salud y bienestar
- Dominio: lumavidsalud.com
- Claim: Tecnología clínica al alcance de tu equipo
- Email de contacto: hola@lumavidsalud.com
- Año: 2025
- Idioma: español de España, tono profesional, claro y humano, en verbos activos, sin jerga marketinera. No incluyas precios concretos: usa expresiones como 'desde tarifa básica', 'plan estándar', 'plan avanzado'.

ALCANCE
Genera la home completa con todos los bloques descritos, y un footer global. El resto de páginas (Servicios, Sobre, Planes, Noticias, Carrito) puedes esbozarlas como secciones ancladas o como vistas alternativas mostradas con JS al pulsar en el menú, manteniendo el mismo header y footer.

STACK Y REQUISITOS TÉCNICOS
- HTML5 semántico con landmarks (header, main, section, footer, nav).
- Tailwind CSS por CDN (script de play.cdn).
- JS vanilla para: menú móvil tipo hamburguesa, slider de testimonios (auto + flechas + drag), contadores animados al hacer scroll (IntersectionObserver), acordeón de FAQ, tabs/toggle de planes mensual-anual, añadir al carrito con badge contador en el header y panel lateral deslizante.
- Totalmente responsive (móvil 360, tablet 768, desktop 1280+).
- Accesible: contraste AA, foco visible, aria-labels en iconos, navegación por teclado.
- Imágenes: usa placeholders de https://images.unsplash.com con queries coherentes (clínica, laboratorio, equipamiento médico, profesionales de bata) y SVG inline para iconos.
- Animaciones suaves (fade-up al hacer scroll con IntersectionObserver, transiciones de 200-400ms).

PALETA DE COLOR
- Fondo base crema: #F4EFE6
- Texto principal carbón: #1C1C1C
- Color de marca primario verde sanitario profundo: #2E4F3A
- Acento verde claro: #B8D4B0
- Acento contraste arena: #E2D5BC
- Blanco puro para tarjetas: #FFFFFF
- Gris suave para bordes: #E5E0D6

TIPOGRAFÍA
- Titulares: 'Instrument Serif' o 'Fraunces' (serif elegante), pesos 400-500, tracking ajustado, tamaños grandes (clamp 2.5rem a 5rem en hero).
- Cuerpo: 'Inter' o 'DM Sans' sans serif, peso 400 para texto, 500 para etiquetas.
- Importa las fuentes desde Google Fonts.

HEADER (global)
- Sticky superior con fondo crema translúcido y borde inferior fino.
- Izquierda: logo textual 'Lumavid' en serif + bolita verde como punto.
- Centro: enlaces Inicio, Servicios, Sobre, Planes, Noticias.
- Derecha: icono carrito con contador (badge verde), botón primario 'Probar Lumavid' con fondo verde oscuro y texto crema, esquinas redondeadas (rounded-full).
- Móvil: menú hamburguesa que despliega panel a pantalla completa.

HOME, sección a sección
1.2 HERO: dos columnas en desktop. Izquierda con etiqueta pequeña 'Salud digital · 2025', titular en serif a dos líneas tipo 'Cuidar mejor empieza por la herramienta correcta', subtítulo de 2 líneas explicando la propuesta, doble CTA (primario verde 'Empezar ahora' y secundario outline 'Ver servicios'). Derecha con imagen de equipamiento clínico moderno en marco redondeado xl con una tarjeta flotante (rating, número de clínicas).
1.3 LOGOS: barra horizontal con 6 nombres ficticios de clínicas y partners en gris medio, encabezado pequeño 'Confían en nosotros equipos médicos de toda Europa'.
1.4 SERVICIOS DESTACADOS: grid 3 columnas con tarjetas blancas redondeadas, icono SVG verde dentro de círculo crema, título, párrafo de 2 líneas y enlace 'Saber más'. Servicios: Gestión de historial, Telemedicina segura, Logística sanitaria.
1.5 BLOQUE IMAGEN-TEXTO: imagen a la izquierda, a la derecha etiqueta, titular serif, 4 bullets con check verde y CTA outline.
1.6 CONTADORES: fondo verde oscuro #2E4F3A, texto crema, 4 contadores grandes (12.400 pacientes atendidos, 240 clínicas activas, 18 países, 96% satisfacción). Animar con IntersectionObserver.
1.7 CATÁLOGO: grid 4 productos con imagen cuadrada, etiqueta categoría arriba, nombre del producto, línea fina con 'añadir al carrito' en botón pequeño que incrementa el badge del header. Productos ficticios: Kit Diagnóstico Básico, Monitor Vital Pro, Pack Telemedicina, Maletín Clínico Compacto.
1.8 PLANES: 3 columnas, plan central destacado con borde verde y badge 'Recomendado'. Cada plan con nombre, descripción corta, lista de 5 ventajas con check, CTA. Toggle Mensual/Anual arriba que cambie etiquetas (no precios concretos).
1.9 TESTIMONIOS: slider horizontal con flechas y puntos. Cada slide con foto circular, cita en serif tamaño medio, nombre y cargo (Dra. ficticia, Director de clínica, etc.). 4 testimonios.
1.10 NOTICIAS: 3 tarjetas con imagen 16:9, etiqueta categoría, fecha, titular y enlace 'Leer más'.
1.11 CTA FINAL: bloque ancho con fondo arena #E2D5BC, titular serif gigante centrado, subtítulo y botón verde grande.
1.12 FOOTER: fondo verde oscuro, texto crema, 4 columnas (marca + claim + redes sociales, Producto, Recursos, Newsletter con input email). Barra inferior con copyright '© 2025 Lumavid Salud' y enlaces a Aviso legal, Privacidad y Cookies.

CARRITO LATERAL
Panel deslizante desde la derecha con overlay, listado de productos añadidos (imagen, nombre, cantidad +/-, eliminar), subtotal y botón 'Continuar al pago'. Estado vacío con mensaje amable.

Entrega el HTML completo, listo para guardar como index.html y abrir.

---

## 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.840 caracteres · 78 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Header de navegación con carrito y CTA
1.2 Hero con titular, subtítulo y mockup
1.3 Barra de logos de confianza
1.4 Grid de 3 servicios destacados
1.5 Bloque imagen-texto con beneficios
1.6 Contadores de impacto
1.7 Grid de 4 productos del catálogo
1.8 Tabla de planes de suscripción
1.9 Slider de testimonios
1.10 Últimas noticias del blog
1.11 CTA final ancho
1.12 Footer completo

SERVICIOS

2.1 Header de navegación
2.2 Cabecera de página con título y breadcrumb
2.3 Introducción a dos columnas (texto + imagen)
2.4 Grid de 6 servicios con icono, descripción y enlace
2.5 Proceso en 4 pasos numerados
2.6 Bloque FAQ acordeón
2.7 CTA final
2.8 Footer

SOBRE

3.1 Header de navegación
3.2 Cabecera con título y subtítulo
3.3 Historia de la marca a dos columnas
3.4 Misión, visión y valores en 3 tarjetas
3.5 Equipo en grid de 6 con foto, nombre y rol
3.6 Hitos en línea temporal vertical
3.7 CTA final
3.8 Footer

PLANES

4.1 Header de navegación
4.2 Cabecera de página con título y toggle mensual/anual
4.3 Tabla de 3 planes con destacado central
4.4 Tabla comparativa detallada de funciones
4.5 FAQ de facturación
4.6 CTA final
4.7 Footer

NOTICIAS

5.1 Header de navegación
5.2 Cabecera con título y filtros por categoría
5.3 Post destacado en formato hero ancho
5.4 Grid de 9 artículos con imagen, fecha y titular
5.5 Paginación
5.6 Suscripción a newsletter
5.7 Footer

CARRITO

6.1 Header de navegación
6.2 Listado de productos en tabla con cantidad y precio
6.3 Resumen con subtotal y botón continuar compra
6.4 Productos recomendados
6.5 Footer

PROMPTS RELACIONADOS · SALUD Y MEDICINA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lumavid Salud
Sector: Plataforma e-commerce para startups del sector salud y bienestar
Claim: Tecnología clínica al alcance de tu equipo

Bloques de la home

1.1 Header fijo con logo, navegación principal (Inicio, Servicios, Sobre, Planes, Noticias), icono de carrito con contador y CTA destacado a la derecha
1.2 Hero a pantalla completa con titular grande a dos líneas, subtítulo descriptivo, doble CTA (primario y secundario) y mockup/imagen de producto clínico a la derecha sobre fondo crema
1.3 Barra de logos/confianza con clínicas y partners ficticios en escala de grises
1.4 Sección de servicios destacados en grid de 3 tarjetas con icono, título, descripción breve y enlace
1.5 Bloque alterno imagen-texto sobre la propuesta de valor con bullets de beneficios
1.6 Contadores de impacto (pacientes, clínicas, países, satisfacción) sobre fondo verde oscuro
1.7 Catálogo de productos en grid de 4 tarjetas con imagen, nombre, categoría y botón añadir al carrito
1.8 Sección de planes de suscripción en 3 columnas con bullets y CTA, con plan central destacado
1.9 Testimonios en slider horizontal con foto, cita, nombre y cargo
1.10 Bloque de últimas noticias del blog en 3 tarjetas con imagen, fecha, categoría y titular
1.11 CTA final ancho con titular, subtítulo y botón sobre fondo de color de marca
1.12 Footer en 4 columnas (marca + claim, enlaces, recursos, newsletter) y barra inferior con copyright y legales

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