Landing page — Plan your trip

Status: approved · Last session: 26 Oct 2026

Design: approved 26 Oct 2026, revision e70be61 — founder phone and tablet check done. Revision 3 (founder, 26 Oct): the top bar is sticky, hides while scrolling down and comes back on any scroll up; the logo goes to the very top with the top bar showing. "See a real day" has a faint trail that draws itself slowly between the day card and the phone. Buttons navigate to app pages instead of opening a planner popup; Plan your trip goes to /pailas, not /trips/create (see Links and actions). Revision 2 was approved 25 Oct (676cb7d). Design: docs/v1/designs/landing.html (attached copy: docs/team/assets/8dcdf9c5…47.html). No separate reviewer view: review notes live in this card (Prototype vs build, Links and actions). Not yet done: Niwesh's task review with neutral prompts (landing-qa).

Who and the job

Two visitors, one page:

Group leaders (church and faith groups first, US): see that NepWalk plans the whole group trip day by day, and start one.
Travellers (solo, couples, families): the same three clicks for their own trip.

The one job: understand NepWalk in a few seconds and press Plan your trip.

Value

Today's landing page reads like a generic tourism site: Everest Base Camp and Mardi Himal treks we do not plan, app-store buttons for an app that does not exist, a testimonials area with no real testimonials. A visitor cannot tell that NepWalk plans the trip day by day and sorts the hotels, vehicles and guides. Without a clear page, every group leader needs a call before they try it.

Placement

Phone (first): hero with the trip question and the button above the fold; sections stack; a slim "Plan your trip" bar sticks to the bottom once the hero button has scrolled away.
Tablet and web: same order; Pailas and the two audience cards sit side by side; the day-plan preview shows a phone frame next to its explanation.
One primary action on the page: Plan your trip. Everything else is secondary.

Approved prototype

docs/v1/designs/landing.html — the Warm Travel Journey direction (D9, 24 Oct 2026), revision 3 approved 26 Oct 2026 after the founder's phone and tablet check (D8). It replaced the older revision 2 (landing-v2.html became landing.html on 26 Oct; the earlier file is in git history only). Clickable: the trip question, the three steps, the Paila cards, the day tabs, the FAQ and the sticky bar.

Signature ideas (D9, Be creative):

Travel journal: in "See a real day" a tilted journal card ("02 · A day in Kathmandu", a real photo of the day's place, the stop and a scribbled arrow; the drawing is the fallback) sits beside the phone and follows the selected day (founder kept it, 24 Oct 2026). The phone's stops show real place photos; meals, drives and hotels keep their icons.
Kite and thread: the hero's trip card is a kite; a thin thread runs from it to a small figure flying it on the "How it works" title, with a dotted ticket route between the steps.

Neither covers any stop, control or status.

Page order

Top bar: NepWalk logo · How it works · Pailas · For groups · Sign in · small "Plan your trip" button (web only).
Hero: headline "Every day planned. Every booking handled."; one line under it ("Tell us where and how long. NepWalk plans every day, then books your hotels, vehicle, guide and flights inside Nepal with verified local partners."); the trip question (placeholder "5 days in Kathmandu and Pokhara") with the Plan your trip button; under it: "Free to plan · Kathmandu, Pokhara and Chitwan".
How it works: three steps, each one line — 1 Say where and how long · 2 Pick a popular Paila · 3 Tune days, people and what you want included.
Popular Pailas — "Start from a proven route": the three launch Pailas as cards (title, days, one-line description, towns) with "Plan this trip". Same titles and descriptions as the seed (paila-kathmandu-3-days, paila-kathmandu-pokhara-7-days, paila-kathmandu-pokhara-chitwan-10-days).
See a real day: a phone frame showing one day of the day plan (day tabs, stop cards with time and duration, the travel between stops, tonight's stay), with three short points: where to be and when · the story of each place · the way from one stop to the next.
For groups / For travellers: two cards.
Groups: one plan for everyone · share one link with the group · see which bookings are still being confirmed · copy the day as a message for the group chat.
Travellers: the same three clicks for one person · change any stop · keep it on your phone like an app.
Why NepWalk — "Planned and booked by locals in Nepal": verified local vendors (hotels, vehicles, guides) · our team confirms each booking with them · Nepal's culture in every day.
Questions (FAQ): What does NepWalk arrange? · Does it work for a group? · What is a Paila, and can I change it? · Is it free to plan? Do I need an account? · Where can I travel?
Final call: "Ready for Nepal?" — "Tell us where and how long. We plan the days and handle the bookings." — with Plan your trip.
Footer: logo, short line ("Your Nepal trip, planned and booked."), links (How it works, Pailas, FAQ, Sign in), contact, © NepWalk.

States

Empty question: "Plan your trip" still works and opens the planner with all Pailas (today's HeroSearch behaviour).
Long question: limited to 120 characters (today's limit); the field never grows wider than the screen.
Not signed in: the planner asks to sign in when the trip is saved; the typed request is kept (saveTripRequest, existing).
Slow server (cold start ~50 s): the landing page itself is static and loads without the API. The planner shows its own loading state.
Images: decorative only; the page reads fully without them. Text over any photo keeps 4.5:1 contrast.
Motion (founder wants it): the hero text rises in, sections and cards fade up as they scroll into view, the day-plan stops slide in one by one, cards lift on hover. Short (200–600 ms), never blocking a tap. With "reduce motion" set on the device, everything shows at once with no movement.

Rules and edge cases

Only places NepWalk plans: Kathmandu, Pokhara, Chitwan. No treks, no Everest Base Camp (outside the MVP areas).
No prices, ratings, review counts or booking buttons (P19, Visit A City "do not take" list). No invented numbers or testimonials.
No app-store buttons: NepWalk installs from the browser (M6, PWA).
Group leaders, vendors and agencies are contacted on WhatsApp only until the MVP ships (A6); the contact line follows that.
Design tokens only (nepwalk-fe/design-system.md): warm canvas, forest green action, 16 px cards, 44 px targets, visible focus.

Decided

Audience: both group leaders and travellers (founder, 23 Oct 2026).
Main action: Plan your trip, opening the existing 3-click planner (founder, 23 Oct 2026).
Remove the treks, app-store, memories and testimonials sections.
Footer contact: WhatsApp and email, both (founder, 23 Oct 2026). WhatsApp +977 986 141 8130 (https://wa.me/9779861418130); email techeverest4@gmail.com until a nepwalk.com address exists (founder, 25 Oct 2026).
"Is it free to plan?": yes, free to plan (founder, 23 Oct 2026).
Hero image: two photos taking turns (founder, 25 Oct 2026): Bhaktapur Durbar Square (Owlf, CC BY-SA 4.0) and Phewa Lake with the Annapurnas (Jmhullot, CC BY 3.0), as in landing.html. Tried before: the old trekking photo (low resolution) and sunrise behind Machhapuchhre (kept for the final call). Rules for any photo: cultural or historical, not religious; inside Kathmandu, Pokhara or Chitwan; licensed with credit and licence link (P31); only the slow zoom (6% over 14 s, none with "reduce motion"; founder, 25 Oct 2026), no crop zoom that hides the place; text placed where it hides no landmark; full screen height on every device.
Logo: always the real NepWalk wordmark (nepwalk-fe/public/logo/Logo.png), white on photos and dark green, green on light backgrounds. Never a made-up icon.
Motion: yes, as described under States (founder, 23 Oct 2026).
Words (founder, 25 Oct 2026): the promise is the day-by-day plan and the logistics, because logistics are a group leader's biggest worry. Hero headline "Every day planned. Every booking handled."; the line under it speaks to everyone, not only groups, so a solo traveller does not feel left out. "Verified" local partners everywhere, never "checked" (it must stay true: licences and green plates checked). "Locals" over "people" ("Planned and booked by locals in Nepal"). "Start from a proven route" replaces "a trip people love" (no travellers to claim yet). "Flights inside Nepal": international flights are not booked.
FAQ keeps only questions answered truthfully today; cost and payment, who NepWalk is, and help during the trip wait (Backlog).

Links and actions (build)

Every button and link on the page goes to a real place in the app. The prototype only fakes these with a reviewer note naming the destination; the app must wire them as below. No popup on the landing page: every button navigates (founder, 26 Oct).

On the page	Goes to	Notes
Top bar: How it works · Pailas · For groups · FAQ	`#how` · `#pailas` · `#groups` · `#faq` on the landing page	Smooth scroll; the sticky top bar must not cover the section title
Top bar and footer: NepWalk logo	The very top of the landing page, top bar showing	The top bar is sticky: hidden while scrolling down, back on any scroll up and near the top; never hidden while it has keyboard focus
Top bar and footer: Sign in	`/login` (email) — Google sign-in as on today's login page	A signed-in visitor sees "My trips" (`/trips`) instead
Hero: question + Plan your trip	`/pailas?q=<typed text>` (keep `saveTripRequest` from `src/lib/trip-request.ts` so the request survives sign-in)	Empty text opens `/pailas` with all Pailas. New: `/pailas` reads `?q=` and applies it; `/trips/create` redirects to `/pailas` (keeping the query). The Pailas page is redesigned later (feature 2)
Hero trip card ("Kathmandu and Pokhara in 7 days")	Same as "Plan this trip" for `paila-kathmandu-pokhara-7-days`	Decorative card made clickable; keyboard reachable
Paila cards: Plan this trip	The planner with that Paila already picked: `/pailas?paila=<slug>` (slugs `paila-kathmandu-3-days`, `paila-kathmandu-pokhara-7-days`, `paila-kathmandu-pokhara-chitwan-10-days`)	New: `TripPlanner` (`src/components/pailas/TripPlanner.tsx`) reads `?q=` today, not `?paila=`; add it so the tune step opens for that Paila
See all Pailas	`/pailas`	—
"See a real day" day tabs	Stay on the page (demo of the day plan)	Optionally a "See the full plan" link to the Paila in the planner
Top bar, final call and phone sticky bar: Plan your trip	`/pailas`, with `?q=` when the hero question has text	—
Travellers card "Your Nepal trip" (home-screen tile)	The install prompt (M6, PWA) when the browser offers it, otherwise `/help` with how to add to the home screen	—
FAQ questions	Open and close in place	—
Footer Photo credits	A separate page, `/credits` in the app (prototype: `docs/v1/designs/photo-credits.html`), listing every photo as place · photographer · licence with licence links (P31)	No credit text on the landing page itself, except a small hero credit on desktop
Footer WhatsApp / Email	`https://wa.me/9779861418130` and `mailto:techeverest4@gmail.com`	Email moves to the `nepwalk.com` address when it exists; `encodeURIComponent` on any prefilled text (S15)

Signed-out visitors: browsing the planner and Pailas should work without an account; saving the trip asks to sign in and returns to the same step with the request kept (afterSignInPath, existing). Check /pailas signed out before release.

Prototype vs build

The prototype shows look, order and behaviour. These parts are simplified in it and must be built properly:

In the prototype	In the app
Hero photo embedded as a JPEG (2560 px)	`next/image` with responsive sizes (WebP/AVIF), priority loading, the credit line
Logo from a 131 × 35 PNG (soft on sharp screens)	An SVG or 2× PNG of the wordmark; needs the source file from the designer
Paila cards show real photos (Swayambhunath, Phewa Lake boats, greater one-horned rhinoceros close-up) over the hand-drawn SVG, credits in the footer	The photo of each Paila's cover place (`coverPlaceId`) from the place library (Wikimedia Commons, free licences, credit shown, P31), cropped to the card; the SVG illustration stays as the fallback when a photo is missing or fails to load
Stops in the phone show 14 small embedded place photos (credits in the footer)	The stop's place photo from the place library (thumbnail), or the type icon when there is none
"See a real day" is a 5-day Kathmandu and Pokhara demo (all day tabs fit on a phone), hard-coded from days of the 7-day Paila	Render from real Paila data via the API (a short trip so the tabs fit, or scrollable tabs); travel times computed from coordinates, not typed
Stop notes ("Row to the island temple") and travel times are written for the demo	The place's own one-line description and computed travel times
Buttons show a reviewer note with the page they open	Real navigation; see Links and actions above
"See a real day" trail: SMIL animation (34 s loop), stopped and fully drawn with reduced motion	Same look; CSS or SVG animation, paused when the section is off screen and with reduced motion
Group-chat preview text and "2 bookings still being confirmed" are samples	Static illustration on the landing page (not live data)
WhatsApp number and email are filled in	The same links; swap the email for the `nepwalk.com` address when it exists
Font falls back to system fonts	Satoshi as already loaded in the app
Motion is plain CSS and a few lines of JavaScript	Same approach in React; no new animation library without asking

TBD

The NepWalk email address once nepwalk.com is live (info@nepwalk.com or support@nepwalk.com); replace the footer email then.

Backlog (after launch)

FAQ, the questions that decide trust (founder, 25 Oct 2026: add once the answers exist): How much does it cost, and how do I pay (and when do I see the full price)? · Who is NepWalk, and why should I trust you? · What if a flight is delayed or plans change during the trip (winter fog on Pokhara flights, buffer days, road fallback, who to reach)? Answers must be true before they go on the page.
Real group stories once the church trip has run (with permission).
Tourist.com-style traveller perks from our vendors (plan open item 16, to decide).
Languages other than English.

Acceptance checks

On a 360 px phone, the headline, trip question and Plan your trip are visible without scrolling.
Typing "5 days in Kathmandu and Pokhara" and pressing Plan your trip opens the /pailas with that request applied.
Pressing Plan your trip with an empty field opens /pailas with all Pailas.
"Plan this trip" on each Paila card opens /pailas with that Paila picked.
The page mentions only Kathmandu, Pokhara and Chitwan; no treks, prices, ratings, testimonials or app-store buttons remain.
The sticky "Plan your trip" bar appears on phones only after the hero button scrolls out of view, and never covers the footer links.
Keyboard: every link and button is reachable, focus is visible, the FAQ opens with Enter or Space.
No horizontal scrolling at 360 px, 768 px and 1280 px.
Lighthouse on the deployed preview: accessibility 95 or more; the page loads without the backend running.
Scrolling down hides the top bar; any scroll up shows it; the logo returns to the very top with the top bar visible.
Founder checks the page on his phone (D8) and Niwesh tests it on a phone and a desktop before acceptance.

Tasks (proposed, founder assigns)

Task	Owner	Reviewer	Size
`landing-hero-pailas`: top bar, hero with the trip question, how it works, Paila cards	engineer	engineer	20 XP
`landing-sections`: day preview, groups/travellers, why NepWalk, FAQ, final call, footer; remove old sections	engineer	engineer	20 XP
`landing-qa`: test plan from these checks on phone and desktop, Lighthouse	Niwesh	founder	10 XP

Each implementation task gets a spec in docs/v1/tasks/ (team-spec) before it is assigned.