Public Website
The traveller side of ABc. Browse, search, view properties, read reviews, book. Built mobile-first because over 70 % of Indian travel-related sessions happen on phones, and rendered server-side so Google can index every property page.
Page map
| URL | Page | Rendering |
|---|---|---|
abc.com/ | Home — hero search + city carousels + curated lists | SSR (cache 60 s) |
abc.com/search?q=manali&in=…&out=… | Search results — list / map view | SSR |
abc.com/hotels/{slug} | Property page — photos, rooms, reviews, location | ISR (re-validate every 5 min) |
abc.com/checkout/{booking} | Checkout — guest details, payment | Auth or guest-OTP |
abc.com/account | Account — past bookings, saved, profile | Auth |
abc.com/account/bookings/{id} | Booking detail — view, cancel, download invoice | Auth |
abc.com/cities/{city} | City landing — SEO hub for "hotels in X" | SSG (rebuild nightly) |
abc.com/help, /terms, /privacy | Static | SSG |
Home page mockup
Search results
Two views, toggleable: list (with sticky map on desktop) and map (full-bleed on mobile).
Filters
Price range, rating, amenities (pool, pet-friendly, etc.), property type, free cancellation, distance from a landmark.
Sort
Recommended (mix of price + rating + distance), Price ascending, Price descending, Top-rated, Newest.
Map sync
Panning the map filters the list; clicking a card highlights the pin. Cluster pins when zoomed out.
Property page anatomy
About this property
A quiet, family-run hotel in Old Manali with three categories of rooms — all with private balconies overlooking the Beas valley. Restaurant on premises serves North Indian and Continental dishes; check-in 14:00, check-out 11:00.
Available rooms
SEO & performance
- Server-rendered with cached responses (Cloudflare in front of Next.js).
- Each property has a stable, slugged URL (
/hotels/park-view-hotel-manali). - Structured data (
schema.org/Hotel+schema.org/Offer) on every property page. - City landing pages (
/cities/manali) for long-tail SEO. - Hero image preloaded; non-critical images lazy-loaded.
- Core Web Vitals targets: LCP < 2.0 s, INP < 200 ms, CLS < 0.05.
Mobile experience
Over 70 % of Indian travel sessions are mobile — the property card, search, and booking flow are designed around a one-thumb interaction model. Every CTA is reachable inside the comfort zone, image-heavy cards lazy-load below the fold, and the price + book button sit permanently above the fold on the property card.
Below: the result-card surface as it appears on a 360-wide phone after the user has set dates & guests on the search bar. Tapping the card opens the property page in the same tab; tapping Book deep-links straight into the room-selector.
Map view
The map view is the second tab on the search results page. The list stays on the left as a synced rail — panning the map filters the visible list, hovering a card highlights its pin, and clicking a pin centres the map on it.
Filters drawer
On desktop the filters live in a left rail; on mobile they slide up as a bottom-sheet drawer. The same component drives both, with sticky Reset and Apply actions at the foot so the user is never more than one tap away from committing or clearing.
Accessibility
- Semantic HTML; landmarks (
nav,main,aside). - Keyboard navigable date pickers and modal flows.
- Colour contrast ≥ AA on all text.
- Alt text on every image; gallery has descriptive captions.
- Screen-reader-only labels on icon-only buttons.