Concept build · Malappuram
Marhala Travels Umrah and travel agency website design for Malappuram, a concept build
Marhala Travels, an Umrah and family holiday agency in Malappuram, is invented, and so are its group leaders, departures and fares. We built its homepage for families arranging Umrah for their parents: departures filter by month and airport, a shortlist sets three side by side with a family total in rupees, the fare chart follows the room sharing you pick and each trip opens into a day-by-day plan.
A concept build: Marhala Travels is a fictional brand we created to show how we design and build a travel agency website for Malappuram. It is not a client and not a real company; our client work is on the work page.
The complete homepage, live
Both frames run the real site. Scroll inside them, try the departure filters by month and by each of the three airports, with cards that slide into their new order and a plain line when nothing matches, or open it in a new tab.
How we designed a travel agency website for Malappuram
The plan before the price
Families in Malappuram usually compare three or four agencies over weeks of phone calls, asking the same questions each time. So every departure is drawn as a boarding pass with its airport, date, nights in Makkah and Madinah and hotel band beside the fare, and a day-by-day timeline lays out the whole trip before anyone pays.
Distance bands, not promises
How far the hotel is from the Haram decides most Umrah bookings, yet the hotel is often confirmed late. The page shows each stay as a walking-distance band (up to 400 m, 400 to 900 m, or 900 m to 1.5 km), keeps a slot for the measured route, and states in writing what happens if the confirmed hotel falls outside the band.
Parents read, children book
Many parents going for Umrah read Malayalam more easily, while the children who book for them from the Gulf or Bengaluru often read English. So headings, the inclusions list and short guidance lines carry Malayalam beside the English, and Arabic appears only in the brand name and a closing blessing. There are no photographs of the Kaaba or the Haram: the Umrah photographs are an airport, a Madinah street, a hotel corridor and a coach, and the holiday tours show families in Dubai and Kashmir.
Vaccines, permits and refunds in writing
Families worry about vaccines, permits and refunds as much as about price. Each health and permit rule names the Saudi Ministry of Health or Ministry of Hajj and Umrah document and the date it was checked, the agency's own rules are labelled as its own, and the three payments and the cancellation charges are written out in full.
What the homepage includes
- Hero and sample boarding pass
- Umrah departures and family holidays
- Room sharing and fare chart
- Day by day
- Hotel distance bands
- Included and not included
- Group leaders
- Documents and health rules
- Elders and women
- Payments and cancellation
- Enquiry and office map
- FAQ and closing blessing
Features and interactions
- Departure filters by month and by each of the three airports, with cards that slide into their new order and a plain line when nothing matches
- Room sharing switch (quad, triple or double) and steppers for adults and children, kept in step across the departures, the shortlist and the fare chart
- Side-by-side shortlist of up to three departures, showing the nights split, hotel distance bands, inclusions, the price per person and a family total in rupees, each with its own day-by-day plan to open
- Day-by-day timeline that switches between a 15-day and a 12-day sample plan, with a rail that fills as you scroll
- Umrah and family holiday tabs with arrow-key navigation, opened directly from the footer links
- Enquiry form for trip, month, airport (Calicut, Kochi or Kannur), travellers (including those over 65) and room sharing, beside WhatsApp and call buttons (the form sends nothing)
- Quiet motion: a boarding-pass stub that tears on load, walking-route bars that draw in and payment stages that light up in turn, each shown in its finished state when a device asks for less motion
The whole page, top to bottom
Palette and type
- Ivory #F8F4EC
- Deep emerald #0F4A3C
- Date brown #6B4A2F
- Sky mist #CFE0E3
- Charcoal #1F2224
Type: Lora, Noto Sans, Noto Sans Malayalam, Scheherazade New.
Languages: English, Malayalam (headings, inclusions and short guidance lines).
How it is built
- Hand-built HTML, CSS and JavaScript, no framework
- GSAP 3.15.0 with ScrollTrigger, SplitText and Flip (the departure filters, the shortlist and the plan switch)
- Lenis 1.3.26 smooth scrolling
- Photographs generated with Higgsfield (Nano Banana Pro), served as WebP, with AVIF for the hero
- Lora, Noto Sans and Noto Sans Malayalam from Google Fonts, with Scheherazade New loaded only for the few Arabic letters used
- Homepage weight about 670 KB on desktop and about 430 KB on a phone, measured on our machine on 28 Oct 2026
Need a travel agency website like this?
We design and build sites like this one for real businesses, with your brand, your photographs, your prices and the forms wired to your team. See what goes into travel agency websites, our web development service, our website prices and how we work with businesses in Calicut and Kerala, or browse every concept build.
Questions
What should an Umrah travel agency website in Kerala include?
Show each departure with its airport, date, nights in Makkah and Madinah, hotel distance and fare per person by room sharing, with a plain list of what is included and what is not. Families also look for who travels with the group, the health and permit rules with their official source, and how payments, cancellations and visa refunds work. A direct way to ask on WhatsApp or by phone matters more than a long form.
Should an Umrah agency website show its fares?
Families expect to see them. Give a fare per person for quad, triple and double rooms on each departure, with a note that fares are confirmed in writing at booking. Families compare several agencies on price per person and hotel distance, so a page that shows both, with a total for the whole family, answers the first phone call before it is made.
How should an Umrah agency website describe hotel distance from the Haram?
As a walking-distance band rather than a vague word like near, because the exact hotel is often confirmed late. Give the band for each stay in Makkah and Madinah, show the measured walking route once the hotel is fixed, and say in writing what the agency will do if the confirmed hotel falls outside the band. Elders and families with small children weigh this more than almost anything else.
More concept builds
Websites
Want yours built like this?
Tell us about your business. We'll plan the pages, the bookings or enquiries, and the launch.
Every rupee you spend with us has to earn its keep.
