Case file — web2026

Udante — Nepal Tours & Travels

Full-viewport Nepal trekking site with interactive trek maps, altitude profiles and Quote/WhatsApp booking — built for conversion and SEO.

Visit live
Udante — Nepal Tours & Travels
Client
Udante — Nepal Tours & Travels
Location
Thapagaun, New Baneshwor, Kathmandu — M8RM+FF (udante.com.np)
Year
2026
Engagement
Designer + Full-Stack Developer — design, build, maps, booking flows, deploy
My role
Designer + Full-Stack Developer — design, build, maps, booking flows, deploy
Marketing websiteTrek maps + bookingNext.js 16Tailwind v4LeafletOpenStreetMapFramer MotionLenis

What this project is

Udante is a licensed Nepali tour operator website I designed and built from scratch at udante.com.np (Vercel). It showcases 6 flagship packages — Everest Base Camp, Annapurna Circuit, Chitwan Safari and more — with day-by-day itineraries, altitude charts and accurate GeoJSON trek routes, and drives inquiries via a Quote/WhatsApp flow.

Built mobile-first with Next.js 16 App Router, TypeScript, Tailwind v4, Leaflet + OpenTopoMap/Carto (no API key), Framer Motion and Lenis, and optimized for SEO, Core Web Vitals and conversion. Nepal-specific trust is baked in throughout: NTB Reg/TAAN/NMA/HRA badges, TIMS/ACAP/Sagarmatha permit handling, 1% community pledge and Mar–May / Sep–Nov season logic.

Key features

Homepage

100dvh Ken Burns slideshow (4 Himalayan images, AnimatePresence crossfade), fixed transparent navbar with mega-menu (Tours & Treks → 6 categories), baseline-aligned EBC card (5,364m • 14 days • Strenuous), CustomSelect filters with flip-above logic, cloud-shaped testimonials drifting left (18s, 7s gaps, true SVG cloud), masonry gallery with lightbox.

Tours

Filterable /packages (hero + sidebar Category/Difficulty/Budget + sort Price/Rating, 1920w hires cards) and /packages/[slug] with breadcrumbs, sticky quick-facts, day-by-day timeline (Acclimatize badges), gradient altitude chart (700×160, gain pill), and 420px interactive trek map.

Trek maps

Accurate 32-point EBC LineString (Lukla 27.686,86.728 → Kala Patthar 28.007,86.83, valley-following) and 9 day-labeled Point waypoints (D2 … ★ EBC) with hover highlight — OSM tiles, no API key, GeoJSON in src/lib/geojson.ts.

Flows

Custom Trip Builder 4-step wizard (progress bar, icon cards, radio budget, live preview, POST /api/inquiry), Contact with Google Maps M8RM+FF iframe + hero, About / Blog (featured + TIMS Rs 2,000 pills) / Gallery / FAQ / Legal / sitemap.xml + robots.txt.

Polish

Lenis 1.1s expo smooth scroll with scroll-to-top on route change, branded 10px scrollbar (#0e7490→#0a2a3a), dynamic header (transparent→white/95 auto-hide), Next/Image logo (h-12), NTB/TAAN trust bars throughout.

Challenges solved

Fixed valley-cutting GeoJSON straight-line bug, overflow-hidden clipping CustomSelect, Lenis + App Router scroll preservation, module not found: lenis on Windows mount (/tmp vs /mnt/d install), and Chitwan 404 Unsplash hires.

How it works

  1. 1Browse packages → filter by Category/Difficulty/Budget or custom Trip Builder wizard
  2. 2Open package → inspect altitude profile, day-by-day timeline and interactive trek map
  3. 3Request Quote → WhatsApp inquiry pre-filled with package + dates
  4. 4Contact via M8RM+FF map/office or Blog/FAQ for permits & prep
Outcome

Lighthouse-ready, 24 static routes (6 packages SSG), Vercel-deployed and CMS-ready (src/lib/data.ts + src/lib/geojson.ts shaped for future Sanity + Prisma admin) — turning Nepal trekking search into WhatsApp conversations.

More live work