In this episode, we start building out a list of employees that users will eventually be able to click on to see more details, like which services they can perform (which will lead to the checkout flow later on).
We kick things off by setting up a new container for our employee list and add a heading like "Choose a professional". Instead of immediately working on the services section, we focus all our attention on displaying employees in a nice grid layout. We use a responsive grid so it looks good on both small and large screens – two columns on mobile, and up to five on larger viewports.
After getting the basic grid in place, we start styling each employee card. These are set up as clickable anchors for now (even if they don't go anywhere yet), and we add essential styling: padding, borders, rounded corners, shadows, and a hover effect that subtly changes the background color but keeps things looking clean.
Inside each employee card, we add a placeholder for the avatar image and display the employee's name. We run through a basic flex and centering setup so everything sits nicely in the middle. For the avatar, we use a rounded full shape and a neutral background, then style the name with appropriate colors and spacing.
Finally, we hook up the actual employee data from the backend (or a simple array for now), loop through them, and display real names and avatar images by tweaking the code. By the end, we have a solid, good-looking employee list that's ready for the next step: clicking an employee to show what services they offer.