Clínica de Urgencias Bucaramanga
The site of a clinic with three locations in Bucaramanga, rebuilt in Vue 3 and Tailwind from reusable components: what a patient comes to do is now on the first screen.
- Year
- 2024
- My role
- Redesign and frontend development
- Built with
- Vue 3 · Tailwind CSS · GSAP
- Site
- cub.com.co
Before and now
Drag the line to compare the same screen in 2022 and today.
Before
NowWhere it started
In 2022 the site was a Bootstrap template on PHP that loaded 12 separate scripts: jQuery, Bootstrap and the plugins for the carousel, the counters and the animations.
The home page came down to a notice about the CUB Portal and a news carousel. The clinic’s services did not appear, and booking an appointment meant going through the portal first.
What changed
| Before · 2022 | Now | |
|---|---|---|
| Home page | A notice about the CUB Portal and a news carousel. | A carousel with the six services: surgery, inpatient care, lab, ICU, emergency and imaging. |
| Tasks | Results in the menu; appointments inside the portal. | Book an appointment, check results and apply for a job: three shortcuts on the first screen. |
| The clinic | Only the photos attached to news items. | Photos of the buildings and the staff, and the clinic’s figures: specialists, beds, locations and patients. |
| Contact | Address, phone and email for each location in the footer. | Plus each location’s opening hours, a line for each kind of patient (insurers, FOMAG, special plans) and a WhatsApp button always in view. |
| Code | A Bootstrap template with 12 separate scripts. | A Vue 3 app with Tailwind, made of reusable components. |
How I built it
Every block of the interface is a Vue component: the shortcuts, the service cards, the carousels, the counters and the contact cards are written once and reused on every page with different data.
Tailwind gives the whole site one system of spacing, colour and type, and GSAP animates each section in. Changing how a card looks means editing one file, not ten.
The method, step by step: Reusable components in Vue