SALUD Y MEDICINA · Claude Design · Tailwind · HTML

Lumara Salud – Página web médica moderna con Tailwind CSS

★★★★★4,8 1.768 descargas

Tema web para Lumara Salud, centro médico multidisciplinar. Incluye una home completa con hero, secciones de especialidades, testimonios y formulario de cita, todo construído con Tailwind CSS y sin dependencias externas. Ideal para sitios de salud que buscan diseño limpio y experiencia de usuario clara.

↓ Descargar PROMPT.md

GRATIS 0€

NUEVO PROMPT

PROMPT

Cópialo y pégalo en Claude Design

↓ Descargar PROMPT.md

Crea una página web en un único archivo HTML autocontenido usando Tailwind CSS por CDN y JavaScript vanilla, sin frameworks ni dependencias externas más allá del CDN de Tailwind y Google Fonts. La web es para una marca ficticia llamada "Lumara Salud", un centro médico multidisciplinar privado con consultas de cardiología, dermatología, pediatría, odontología, traumatología y ginecología. Dominio ficticio lumarasalud.com, email de contacto hola@lumarasalud.com, teléfono ficticio +34 910 000 000, dirección ficticia Calle Olivar 24, Madrid. Año 2025. Claim: "Atención clínica cercana, equipos con experiencia y citas sin esperas largas". Todo el copy debe ser original en español de España, en tono cercano, claro y profesional, sin lenguaje marketinero ni promesas exageradas, sin precios concretos.

IDENTIDAD VISUAL
- Paleta: verde turquesa principal #14B8A6, verde oscuro #0F766E para acentos, azul medianoche #0B1B2B para textos y CTAs oscuros, gris muy claro #F5F7F8 de fondo de sección, blanco #FFFFFF, gris texto secundario #5B6B73, amarillo cálido #F5C16C para destacar estrellas y badges.
- Tipografía: títulos en "Plus Jakarta Sans" 700/800, cuerpo en "Inter" 400/500. Importar desde Google Fonts.
- Estilo: bordes redondeados generosos (rounded-2xl), tarjetas con sombra suave, iconos en círculos con fondo verde claro, imágenes con esquinas redondeadas, separadores finos. Inspirado en webs healthcare modernas pero limpio.
- Iconografía: usar SVG inline o emojis discretos para iconos médicos (estetoscopio, corazón, diente, niño, hueso, etc.).
- Imágenes: usar placeholders de https://images.unsplash.com con queries relacionadas (doctor, clinic, medical, nurse, hospital). Si no, usar https://placehold.co con tonos coherentes.

ESTRUCTURA DE LA HOME (una sola página index.html, todos los bloques visibles haciendo scroll)

1. Barra superior fina (oculta en móvil) con fondo blanco y borde inferior: a la izquierda teléfono +34 910 000 000, email hola@lumarasalud.com y dirección Calle Olivar 24, Madrid, separados por divisores verticales. A la derecha enlaces "Ayuda / Soporte / Contacto" y cuatro iconos sociales (Facebook, Instagram, X, LinkedIn) en SVG inline.

2. Header sticky con fondo blanco y sombra suave: logo a la izquierda (texto "Lumara" con punto verde turquesa + "Salud" en gris), menú centrado con los enlaces Inicio, Sobre nosotros, Especialidades (dropdown con las 6 especialidades), Blog, Contacto. A la derecha un botón outline redondeado con texto "Urgencias 24h" y un icono de flecha circular. En móvil, menú hamburguesa que despliega un panel lateral.

3. Hero a dos columnas con fondo gris muy claro y formas decorativas sutiles: columna izquierda con un pequeño badge "Centro médico acreditado", titular grande en dos líneas tipo "Cuidamos tu salud con criterio clínico y trato humano", párrafo descriptivo de 2-3 líneas, dos botones (uno sólido verde turquesa "Pedir cita" y otro outline oscuro "Ver especialidades") y debajo una fila con tres mini-datos (años de experiencia, especialistas, valoración media con estrellas). Columna derecha con foto de profesional sanitario sonriente sobre fondo redondeado, con una tarjeta flotante en la esquina inferior izquierda que muestra horario de atención (L-V 8:00-21:00, S 9:00-14:00) y otra tarjeta arriba a la derecha con un mini-contador animado de pacientes atendidos hoy.

4. Franja con 5 logos ficticios de acreditaciones/seguros médicos (texto plano estilizado en gris) y un titular pequeño centrado encima tipo "Trabajamos con las principales mutuas y entidades acreditadoras".

5. Bloque "Por qué elegir Lumara" con titular de sección y subtítulo cortos, y debajo tres tarjetas blancas con icono circular verde claro arriba, título y párrafo breve: equipo titulado, tecnología actualizada, atención personalizada. Hover: ligera elevación.

6. Grid de 6 tarjetas de especialidades sobre fondo blanco con título de sección "Nuestras especialidades". Cada tarjeta tiene icono SVG circular, nombre de la especialidad, descripción de 2 líneas y enlace "Más información →". Especialidades: Cardiología, Dermatología, Pediatría, Odontología, Traumatología, Ginecología.

7. Sección "Sobre el centro" a dos columnas con fondo gris claro. Izquierda: collage de dos imágenes superpuestas (recepción y consulta) con un badge circular verde oscuro encima que ponga "+18 años cuidando pacientes". Derecha: pequeño badge "Sobre nosotros", titular, párrafo, lista con check verde de servicios (analíticas, diagnóstico por imagen, consulta presencial, telemedicina) y una fila final con 4 contadores animados con JS al hacer scroll: 42.000 pacientes atendidos, 35 especialistas, 12 consultas activas, 18 años abiertos.

8. Banda CTA oscura (fondo #0B1B2B) con titular en blanco "¿Necesitas una valoración rápida?", texto breve y un botón verde turquesa "Llámanos al +34 910 000 000" con icono de teléfono. Decoración con curva o patrón sutil.

9. Cuadro médico: título "Conoce a nuestro equipo" y 4 tarjetas de profesionales (nombres ficticios españoles tipo Dra. Elena Pacheco, Dr. Mario Esteban, Dra. Lucía Bertrán, Dr. Iván Solano) con foto, nombre, especialidad debajo en gris y tres iconos sociales pequeños. Hover: overlay verde semitransparente con icono +.

10. Proceso de visita en 4 pasos numerados horizontalmente con línea de conexión entre ellos: 01 Reserva tu cita, 02 Valoración inicial, 03 Tratamiento personalizado, 04 Seguimiento. Cada paso con icono circular grande, número en verde oscuro y texto breve.

11. Carrusel de testimonios sobre fondo gris claro: título de sección y un slider con 3 tarjetas visibles (1 en móvil) que muestran foto circular del paciente (nombre ficticio), 5 estrellas amarillas, comentario de 3-4 líneas y especialidad consultada. Flechas de navegación y dots. Implementar con JS vanilla.

12. Blog: título "Consejos de salud" y grid de 3 tarjetas de entradas recientes con imagen superior, badge de categoría, fecha y autor, titular en dos líneas y enlace "Leer más". Títulos originales tipo "Cómo cuidar la salud cardiovascular después de los 40", "Rutina de higiene bucodental que sí funciona", "Cuándo llevar a un niño al pediatra ante fiebre alta".

13. FAQ en acordeón a dos columnas (preguntas a la izquierda, imagen a la derecha): 6 preguntas frecuentes con apertura/cierre animado mediante JS. Ejemplos: "¿Cómo pido cita?", "¿Trabajáis con mi mutua?", "¿Hacéis consulta online?", "¿Qué documentación llevo el primer día?", "¿Disponéis de parking?", "¿Atendéis urgencias fuera de horario?".

14. Formulario de cita a dos columnas con fondo blanco: izquierda imagen de recepción del centro con badge de horario; derecha formulario con campos nombre, teléfono, email, select de especialidad, input date de fecha preferida, textarea de motivo, checkbox de consentimiento RGPD y botón sólido verde turquesa "Solicitar cita". El envío hace preventDefault y muestra un mensaje de confirmación visual.

15. Footer sobre fondo #0B1B2B con texto claro, en 4 columnas: (a) marca Lumara Salud, descripción breve y 4 iconos sociales; (b) Enlaces rápidos (Inicio, Sobre nosotros, Especialidades, Blog, Contacto); (c) Especialidades (las 6 nombradas); (d) Contacto con dirección, teléfono, email y horario. Debajo subfooter con borde superior fino: a la izquierda "© 2025 Lumara Salud. Todos los derechos reservados." y a la derecha enlaces Aviso legal, Privacidad y Cookies.

REQUISITOS TÉCNICOS
- Un solo archivo HTML válido y autocontenido.
- Tailwind por CDN (script de cdn.tailwindcss.com) con configuración inline para extender colores con la paleta indicada y fuentes Plus Jakarta Sans e Inter.
- HTML semántico (header, nav, main, section, article, footer).
- 100% responsive (móvil, tablet, escritorio). Menú hamburguesa en móvil con animación.
- Microinteracciones en hover de botones y tarjetas (transform y shadow).
- Animaciones on-scroll suaves para títulos, tarjetas y contadores usando IntersectionObserver en JS vanilla.
- Contadores numéricos animados que se disparan al entrar en viewport.
- Slider de testimonios funcional con autoplay (pausable al hover) y controles.
- Acordeón de FAQ accesible con aria-expanded.
- Formulario validado con HTML5 y feedback visual al enviar.
- Accesibilidad: contraste suficiente, alt en imágenes, focus visible, aria-labels en iconos.
- No usar librerías externas distintas a Tailwind CDN y Google Fonts.
- Todo el texto en español de España, sin lorem ipsum, totalmente original.

---

## 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>
```

8.805 caracteres · 72 líneas Licencia libre · uso comercial permitido

CAPTURA COMPLETA · HOME

ESTRUCTURA DEL SITIO

Tabla de secciones

HOME

1.1 Barra superior de contacto y redes
1.2 Header con menú y botón urgencias
1.3 Hero con foto de sanitario y tarjeta de horario
1.4 Franja de acreditaciones
1.5 Por qué elegirnos (3 tarjetas)
1.6 Grid de 6 especialidades
1.7 Sobre el centro con contadores
1.8 CTA intermedio en banda oscura
1.9 Cuadro médico (4 profesionales)
1.10 Proceso de visita en 4 pasos
1.11 Carrusel de testimonios
1.12 Blog reciente (3 entradas)
1.13 FAQ en acordeón
1.14 Formulario de cita
1.15 Footer + subfooter

SOBRE NOSOTROS

2.1 Barra superior y header
2.2 Cabecera de página con migas de pan
2.3 Historia del centro a dos columnas con imagen
2.4 Misión, visión y valores en tres tarjetas
2.5 Cronología de hitos del centro
2.6 Galería de instalaciones
2.7 Bloque de equipo directivo
2.8 CTA cita + footer

ESPECIALIDADES

3.1 Cabecera con título y migas
3.2 Filtro por área (general, infantil, adultos)
3.3 Grid completo de especialidades con icono y descripción
3.4 Bloque de pruebas diagnósticas disponibles
3.5 CTA de pedir cita + footer

DETALLE DE ESPECIALIDAD

4.1 Cabecera con nombre de la especialidad
4.2 Descripción extensa + imagen principal
4.3 Lista de tratamientos cubiertos
4.4 Equipo asignado a la especialidad
4.5 Preguntas frecuentes específicas
4.6 CTA cita + footer

BLOG

5.1 Cabecera con migas
5.2 Buscador y filtro por categoría
5.3 Grid de entradas paginado
5.4 Sidebar con categorías y entradas populares
5.5 Footer

DETALLE DE ENTRADA

6.1 Cabecera con título, autor y fecha
6.2 Imagen destacada
6.3 Cuerpo del artículo con citas y subtítulos
6.4 Etiquetas y compartir en redes
6.5 Entradas relacionadas
6.6 Footer

CONTACTO

7.1 Cabecera con migas
7.2 Tarjetas de teléfono, email y dirección
7.3 Formulario de contacto extenso
7.4 Mapa embebido del centro
7.5 Horarios de atención por día
7.6 Footer

PROMPTS RELACIONADOS · SALUD Y MEDICINA

Otros prompts de la misma categoría

Ficha de marca

Nombre: Lumara Salud
Sector: Centro médico multidisciplinar con consultas de cardiología, dermatología, pediatría y odontología
Claim: Atención clínica cercana, equipos con experiencia y citas sin esperas largas

Bloques de la home

1.1 Barra superior con teléfono, email, dirección, enlaces de ayuda/soporte/contacto y redes sociales
1.2 Header con logo, menú principal (Inicio, Sobre nosotros, Especialidades, Blog, Contacto) y botón de Urgencias 24h
1.3 Hero con titular grande a la izquierda, párrafo, dos CTAs (Pedir cita / Conocer servicios) y foto de profesional sanitario a la derecha con tarjeta flotante de horario
1.4 Franja de logos / acreditaciones sanitarias
1.5 Bloque "Por qué elegirnos" con 3 tarjetas (equipo titulado, tecnología actualizada, atención personalizada) e icono en círculo
1.6 Grid de especialidades (6 tarjetas: Cardiología, Dermatología, Pediatría, Odontología, Traumatología, Ginecología) con icono, título, descripción breve y enlace
1.7 Sección "Sobre el centro" a dos columnas: imágenes con badge de años de experiencia + texto con lista de servicios y contadores (pacientes atendidos, especialistas, consultas activas, años abiertos)
1.8 CTA intermedio en banda oscura con titular y botón de pedir cita telefónica
1.9 Cuadro médico destacado: 4 tarjetas de profesionales con foto, nombre, especialidad y redes
1.10 Proceso de visita en 4 pasos numerados (Reserva, Diagnóstico, Tratamiento, Seguimiento)
1.11 Testimonios de pacientes en carrusel con foto, nombre, valoración y comentario
1.12 Grid de 3 entradas recientes del blog con imagen, categoría, fecha y título
1.13 FAQ en formato acordeón con 5-6 preguntas frecuentes
1.14 Bloque de cita: formulario corto (nombre, teléfono, especialidad, fecha preferida) junto a imagen de recepción
1.15 Footer en cuatro columnas (marca + descripción + redes, enlaces rápidos, especialidades, contacto) y subfooter con copyright y enlaces 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