The brief
Princess Sherifat Travels & Tours sells Umrah packages and heritage tours. Each tour has fixed dates, a price per person and an early-bird offer that runs out. The agency wanted a one-page site that puts those offers front and centre, pushes people to register before the sale ends, and can be updated without a developer.
What I built
A hero with the season's lead tour: dates, the sale price next to the full price, and a live countdown to the end of the sale.
A card for every other tour, alternating left and right down the page, each with its own countdown.
Enquire and Register buttons that open the agency's booking form, and a WhatsApp button for quick questions.
All tour details, prices, dates, the booking link and contact numbers edited in Contentful.
My role
I was the only developer. I built the site over two weeks in March 2023.
Offers that update themselves
Each tour in the CMS has a leaving date, a returning date, a full price, a sale price and the date and time the sale ends. The page formats the dates, strikes through the full price and runs a countdown in days, hours, minutes and seconds. One tour can be flagged as the lead offer, and it moves into the hero. When the offers change, the agency edits the entries and the page follows.
Tour cards. Text alignment alternates so the page reads in a zigzag.
Fast by default
The page is built with Next.js and fetches everything from Contentful at build time, so visitors get static HTML with no loading states. I also wrote an Instagram feed section with a load-more button, ready for when the agency wanted to show its posts.
Contact where people already are
The footer carries the phone number, links to every social channel and a WhatsApp button that opens a chat with the agency. All of them come from a single contact entry in the CMS.
The footer.
Mobile
On a phone the hero stacks into a single column and each card fills the screen width.
The hero, the tour cards and the footer on a phone.
The photos are the agency's own. Tour names, dates and prices are sample data.