Problem
Regional hotels lose direct bookings because their own sites bury rates, room differences, and the actual booking action under marketing copy.
Jalo Hotel & Resort
A hotel site for a property in Shashemene, built so a guest can check availability, compare rooms, and reserve directly instead of through an aggregator.
- Full-stack developer
- Live
- Next.jsReactTypeScriptTailwind CSSVercel
Goals
- Put availability search in the first viewport.
- Make every room's rate, capacity, and inclusions comparable at a glance.
- Keep a long content page (rooms, dining, spa, events, location, FAQ) navigable.
Solution
A Next.js marketing and booking site. The hero carries check-in, check-out, guests, and room-type inputs; rooms share one card anatomy; the gallery and FAQ are grouped by category; a separate staff portal route exists for the property.
Key features
- Date and occupancy availability search in the hero
- Three comparable room tiers with rate, capacity, bed configuration, inclusions
- Categorised photo gallery and accordion FAQ
- Location and transfer guidance (Hawassa airport)
- Amharic / English language toggle
- Staff portal route
Architecture
App Router with banded page sections, a client-side search form that validates dates and occupancy, filterable gallery and FAQ components driven by category data, and a separate staff route.
Technical decisions
- Booking intent is the first interaction on the page, not a buried CTA.
- Room cards share one anatomy so comparison needs no scrolling back.
- Gallery and FAQ are grouped by category so a content-heavy page stays scannable without a search box.
- Each concern gets its own banded section with a distinct layout, so length reads as depth rather than clutter.
Tech stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- Vercel
Hardest part
The property has a lot to say — rooms, dining, spa, conference, shuttle, location, policies — and a single scrolling page risked becoming an undifferentiated wall.
What I learned
For a hospitality site, trust is built by answering questions before they are asked. The FAQ and location sections do as much conversion work as the hero.
Result
A deployed site where a guest can search dates, compare rooms, and reach a booking without leaving the page flow.