Clínica de Urgencias Bucaramanga
El sitio de una clínica con tres sedes en Bucaramanga, rehecho en Vue 3 y Tailwind a partir de componentes reutilizables: lo que un paciente viene a hacer ahora está en la primera pantalla.
- Año
- 2024
- Mi papel
- Rediseño y desarrollo frontend
- Con qué
- Vue 3 · Tailwind CSS · GSAP
- Sitio
- cub.com.co
Antes y ahora
Arrastra la línea para comparar la misma pantalla en 2022 y hoy.
Antes
AhoraEl punto de partida
En 2022 el sitio era una plantilla de Bootstrap sobre PHP que cargaba 12 scripts sueltos: jQuery, Bootstrap y los plugins del carrusel, los contadores y las animaciones.
La portada se reducía a un aviso del Portal CUB y un carrusel de noticias. Los servicios de la clínica no aparecían, y para pedir una cita había que pasar primero por el portal.
Lo que cambió
| Antes · 2022 | Ahora | |
|---|---|---|
| Portada | Un aviso del Portal CUB y un carrusel de noticias. | Un carrusel con los seis servicios: cirugía, hospitalización, laboratorio, UCI, urgencias e imagenología. |
| Trámites | Resultados en el menú; las citas, dentro del portal. | Pedir cita, consultar resultados y trabajar en la clínica: tres accesos en la primera pantalla. |
| La clínica | Solo las fotos de las noticias. | Fotos de las sedes y del equipo, y las cifras de la clínica: especialistas, camas, sedes y pacientes. |
| Contacto | Dirección, teléfono y correo de cada sede en el pie de página. | Además, el horario de cada sede, una línea por tipo de usuario (EPS, FOMAG, régimen especial) y un botón de WhatsApp siempre a la vista. |
| Código | Una plantilla de Bootstrap con 12 scripts sueltos. | Una aplicación de Vue 3 con Tailwind, hecha de componentes reutilizables. |
Cómo lo construí
Cada bloque de la interfaz es un componente de Vue: los accesos directos, las tarjetas de servicio, los carruseles, los contadores y las fichas de contacto se escriben una vez y se reutilizan en todas las páginas con otros datos.
Tailwind da un único sistema de espacios, colores y tipos para todo el sitio, y GSAP anima la entrada de cada sección. Cambiar el aspecto de una tarjeta es tocar un archivo, no diez.
El método, paso a paso: Componentes reutilizables en Vue