Una web clínica pensada para informar, generar confianza y facilitar el contacto.

La web debía comunicar contenidos clínicos complejos a pacientes y familiares sin resultar fría, académica o difícil de recorrer. También necesitaba diferenciar los servicios y facilitar que cada visitante encontrara el siguiente paso adecuado.

La solución

• Organización clara de servicios.
• Textos orientados a situaciones cotidianas.
• Diseño adaptado al contexto sanitario.
• Navegación responsive.
• Formularios y llamadas a la acción.
• SEO técnico.
• Despliegue en producción.

Ingeniería y arquitectura

Sitio web para una consulta de neuropsicología clínica, construido con Astro y Tailwind CSS: páginas informativas por área clínica, un formulario de contacto y otro de derivación profesional, y una sección de recursos con contenido en Markdown. Diseño, desarrollo, SEO y publicación completos; es un encargo real, ya en producción.

Layout compartido para las páginas de servicio

Las páginas de servicio comparten un único layout con una estructura fija — síntomas, descripción, metodología, preguntas frecuentes, opiniones — en vez de componer cada página a mano. Añadir un servicio nuevo es rellenar props tipadas, no maquetar de cero.

Ajuste del header sticky

El header es fijo y de altura variable. Su altura real se mide en tiempo de ejecución y se escribe en una custom property CSS, que alimenta el scroll-padding-top del documento: los enlaces de ancla aterrizan siempre justo debajo del header, sin solaparse, incluso si su altura cambia.

Imágenes con resolución progresiva

Un componente de imagen busca el archivo real por su ruta y, si todavía no existe, renderiza un placeholder con etiqueta en vez de un <img> roto. Permite maquetar con las rutas finales de las fotos antes de tener el material fotográfico definitivo, sin bloquear el desarrollo del resto de la página.

SEO y formularios

Todas las páginas llevan datos estructurados (JSON-LD) y metadatos Open Graph propios. Los formularios se envían vía Web3Forms sin backend propio: cada uno con su propia clave de acceso, degradación elegante si la clave falta, y una casilla de verificación honeypot contra spam.