NEW PROMPT
PROMPT
Cópialo y pégalo en Claude Design
Genera un sitio web completo en HTML único autocontenido para la clínica ficticia 'ClíniVera Salud', un centro médico multidisciplinar para familias y clínicas privadas con el claim 'Atención médica cercana, cuando y donde la necesitas'. Dominio clinivera.com, email hola@clinivera.com, año 2025.
ALCANCE: Página principal completa con todas las secciones descritas más navegación funcional con anclas internas a cada bloque. Incluye también modales o vistas simuladas para 'Cita previa' y un artículo de blog de ejemplo.
STACK TÉCNICO:
- HTML5 semántico en un único archivo
- Tailwind CSS vía CDN (script de play.tailwindcss.com)
- JavaScript vanilla en un solo bloque al final del body
- Sin frameworks externos, sin librerías de animación; usa CSS transitions y IntersectionObserver para animaci
8.413 caracteres · solo descargable completo
↓ Descargar PROMPT.md completo
8.413 caracteres · licencia libre
Solo descarga completa disponible
CAPTURA COMPLETA · HOME
Para que Claude replique el diseño con máxima fidelidad, descarga la imagen y adjúntala en tu chat.
Descargar captura
ESTRUCTURA DEL SITIO
Tabla de secciones
HOME
- 1.1 Header sticky con menú y CTA cita
- 1.2 Hero con titular animado, imagen sanitario y curva lottie
- 1.3 Marquesina de logos partners
- 1.4 Sobre nosotros a dos columnas con tarjeta flotante
- 1.5 Grid de 6 servicios médicos
- 1.6 Por qué elegirnos con features e imagen
- 1.7 Contadores animados sobre franja turquesa
- 1.8 Equipo de doctores con tarjetas hover
- 1.9 Cómo trabajamos en 3 pasos
- 1.10 Testimonios en slider
- 1.11 Últimas 3 entradas de blog
- 1.12 CTA con formulario de cita
- 1.13 FAQ acordeón
- 1.14 Footer completo con newsletter
SOBRE NOSOTROS
- 2.1 Header
- 2.2 Hero interno con breadcrumb y titular
- 2.3 Historia de la clínica con timeline
- 2.4 Misión, visión y valores en 3 columnas
- 2.5 Galería de instalaciones
- 2.6 Equipo directivo (4 tarjetas)
- 2.7 Contadores
- 2.8 CTA cita
- 2.9 Footer
SERVICIOS
- 3.1 Header
- 3.2 Hero interno con breadcrumb
- 3.3 Grid completo de 9 especialidades médicas
- 3.4 Bloque destacado de servicio premium con imagen
- 3.5 Proceso de atención en pasos
- 3.6 Testimonios
- 3.7 CTA cita
- 3.8 Footer
DOCTORES
- 4.1 Header
- 4.2 Hero interno con breadcrumb
- 4.3 Filtros por especialidad
- 4.4 Grid de 8 doctores con tarjetas
- 4.5 Bloque 'Únete al equipo' con CTA
- 4.6 Footer
DETALLE DOCTOR
- 5.1 Header
- 5.2 Cabecera con foto grande, nombre, especialidad y botón cita
- 5.3 Biografía, formación y experiencia en tabs
- 5.4 Horarios disponibles en tabla
- 5.5 Otros doctores relacionados
- 5.6 Footer
CITA PREVIA
- 6.1 Header
- 6.2 Hero interno
- 6.3 Formulario amplio en pasos (datos, especialidad, fecha, motivo)
- 6.4 Información de contacto y mapa
- 6.5 Footer
BLOG
- 7.1 Header
- 7.2 Hero interno con buscador
- 7.3 Categorías destacadas
- 7.4 Grid de artículos con paginación
- 7.5 Newsletter
- 7.6 Footer
DETALLE BLOG
- 8.1 Header
- 8.2 Cabecera con categoría, título, autor y fecha
- 8.3 Imagen destacada
- 8.4 Contenido del artículo con índice lateral
- 8.5 Compartir en redes
- 8.6 Artículos relacionados
- 8.7 Footer
CONTACTO
- 9.1 Header
- 9.2 Hero interno
- 9.3 Datos de contacto en 3 tarjetas (dirección, teléfono, email)
- 9.4 Formulario + mapa
- 9.5 FAQ corto
- 9.6 Footer
PROMPTS RELACIONADOS · HEALTH AND MEDICINE
