A website for a Pondicherry travel agency that sells by feel, not by price grid: a hero of postcards you can drag and throw aside, destinations laid out as a departure board, a trip shaper that tells you how much effort a plan asks of you, a couples section, a journal, and a travel desk for bookings and quote requests.
- 0
- technologies
- 0
- shipped features
- 0
- screens
- 0
- decisions logged
5 sections below
Through Vacations plans holidays across India and abroad from Pondicherry, and until now it lived on Instagram. The brief was to turn that feed into a site people can actually plan from, without inventing anything the agency had not said: no made-up testimonials, ratings or service promises. Every rule came from a written study of their Instagram before any page was designed.
There are seventeen trips, from Kashmir, Ladakh and the Andamans to Thailand, Bali, Dubai and the Maldives. Each has a day-by-day itinerary with a pace filter, the gateway airport, flight time and paperwork, a couples version of the plan, and a reserve form that asks for dates and travellers. Booking never takes payment: it sends a request, and a planner confirms availability and sends a quote, which is how the agency already works on WhatsApp.
The interactive parts carry the brand. The home hero is a fanned stack of postcards with pointer capture, so a card can be dragged, thrown past a threshold or tapped to open its trip. Destinations are a departure-board table with airport codes and best months. The trip shaper takes a place, a month and a number of days, and scores how hard the plan is (travel time, hotel changes, season) without quoting a single price. The couples page has a honeymoon quiz, and every trip can be saved to a wishlist.
How it works: Next.js 16 on the App Router with Cache Components, React 19, Tailwind CSS 4 and shadcn on Base UI, with React Hook Form and Zod on every form. All content goes through one data layer (lib/data), which today reads typed mock data and keeps bookings and enquiries in the browser, so the switch to Supabase replaces that layer and nothing else. Photos come from Unsplash and Wikimedia Commons through a script that resizes them to WebP and records each attribution for the credits page.
Status: the site is a working preview. The admin travel desk runs in demo mode, itineraries and stories are written as indicative until the agency confirms them, and Supabase with sign-in for the admin is the next step.
Research
A written study of the agency's Instagram sets the voice, the trips and the rules: no invented reviews, ratings or promises.
INSTAGRAM-RESEARCH.md
Content
Trips, itineraries, travel facts and journal stories are typed data behind one data layer that every page reads from.
lib/data · lib/mock
Photos
A script fetches Unsplash and Wikimedia Commons photos, converts them to WebP and records each attribution for /credits.
Python · WebP
Plan
Visitors browse the board, shape a trip and send a reserve request or a WhatsApp message. Nothing asks for payment.
Next.js 16 · RHF + Zod
Answer
The travel desk lists bookings by stage and quote requests. Supabase and admin sign-in replace the demo store next.
Admin · Supabase (next)
- Draggable postcard-stack hero: drag, throw past a threshold or tap to open a trip
- 17 trips with day-by-day itineraries, pace filter, gateway, flight time and paperwork
- Destinations as a departure board with airport codes, best months and trip counts
- Trip shaper that scores effort, season and hotel changes, with no prices
- Couples section with a honeymoon quiz; wishlist hearts on every trip
- Reserve-request booking and WhatsApp hand-off: no payment, a planner sends the quote
- Travel desk admin: overview, bookings by stage, quote requests, packages and settings
- One data layer over typed mock data, ready to swap for Supabase; photo credits generated by script
The section above says what this does. This one says why it is built the way it is — including the parts that did not come free.
- A reserve request with dates and travellers, then a custom quote from a planneroverCart and online paymentA price table per tripBecause
It matches how the agency already sells on WhatsApp, and the site never promises a price it cannot honour. The trip shaper answers “is this too much for five days?” instead of “how much?”.
What it costNo instant booking, and every request needs a person to answer it.
- A written content study first, with rules: no invented reviews, ratings or promisesoverWrite marketing copy freelyWait for the agency to send everythingBecause
Itineraries and stories are built from what the feed shows plus general destination knowledge, and each one is flagged as indicative, so nothing on the site claims more than the agency does.
What it costDetails stay provisional until the agency confirms them, and the About page still has empty slots.
- One typed data layer (lib/data) over mock data, with bookings kept in the browseroverHard-code data inside componentsWait for the backendBecause
Every page and the admin already read through the layer that Supabase will replace, so the backend swap touches one folder.
What it costUntil then, admin changes live in one browser only, and the admin is not yet behind a sign-in.
01 / 08Home — a stack of postcards you can throw aside
open full size ↗Seen enough?
There are more where this came from — or skip the browsing and just say hello.