Serendib Journeys — Tour Operator Website Template

Overview

Serendib Journeys is the public-facing half of the Serendib project — a complete, production-shaped website for a Sri Lankan tour operator, built as a template rather than a one-off. Everything client-specific lives in a single site.config.ts: brand, theme colors, contact details, destinations, tour packages, testimonials, team bios, FAQs and blog posts. Change that one file and the entire site rebrands, with every listing and detail page regenerated automatically.

It's the same codebase that Serendib Studio edits — Studio is the no-code editor, this is the site it produces.

Features

• Animated hero and scroll reveals throughout, built with Framer Motion
• Destinations — listing plus a detail page per location, generated from config via generateStaticParams
• Tour packages with category filtering, per-tour itineraries, pricing and a side-by-side comparison view
• Gallery auto-derived from destination and tour imagery — no separate content to maintain
• Blog, About, Team and FAQ sections, all config-driven
• WhatsApp-first enquiry flow — the primary CTA opens a prefilled chat rather than a contact form nobody answers
• Multi-language navigation (English / Deutsch)
• SEO wired in by default — metadata, sitemap, robots.txt, JSON-LD, and generated OG images that read the brand name and colors from config
• Theme driven by CSS variables — the whole palette derives from a handful of HSL values

Tech Highlights

• Next.js 16 App Router with TypeScript and Turbopack; static generation for every destination, tour and post
• Tailwind CSS v4 with a CSS-variable theme layer, so color changes cascade without a rebuild of component styles
• Zero external image dependencies — every image is a generated gradient tile driven by a { hueA, hueB, label, alt } object, so the template runs instantly with no network calls and no placeholder-photo licensing
• Brand icon and OpenGraph image generated at build/request time from the same config

Note on the Screenshots

The imagery below is the template's generated gradient placeholders, not real photography — a deliberate choice so the template ships with zero image dependencies. A live client site swaps in real photos through the same config objects.