Skip to content

← Back to work

Case Study · Showcase

Rancak Bana

Showcase landing for a fictional West Sumatra tour agency. Six narrative sections, three real tour packages, eight curated kuliner spots, WhatsApp-first booking — built solo end-to-end.

2026 Showcase · Live demo Indonesian copy Solo project
Rancak Bana hero — full-viewport opening with the headline 'Tanah rancak, dengan layanan yang setara keindahannya' over looping Sumbar nature footage

Honesty note

Rancak Bana is a portfolio showcase — fictional brand, real Sumbar context. The site is deployed and viewable end to end, but there is no actual booking flow, no payments, no real services behind it. The work to judge is the funnel composition, the Indonesian hospitality voice, the design-system adoption, and the animation craft.

  • 6 Sections
  • 17 Content entries
  • 3 Tour packages
  • 6 Destinations
  • 8 Kuliner spots
  • 1 Live demo

The brief.

West Sumatra has a product-market quality gap. The natural product is world-class — Mentawai surf, Lembah Harau cliffs, Danau Maninjau, Bukittinggi heritage, Pagaruyung palace, rendang as the cuisine of record. The hospitality side has been publicly documented as weaker than the product deserves.

Rancak Bana is a fictional tour-agency brand built to show what a credible Sumbar hospitality landing could look like. The positioning is not 'we'll fix the broken industry' — it's 'we exist to raise the bar.' Trust is built through transparency: published driver certification, transparent pricing, anti-mark-up promise, money-back guarantee on day one.

The page reads as a conversion story across six sections, with WhatsApp-first booking as the action path. Three real tour packages with full itineraries, eight curated kuliner spots with GMaps links, six destination cards. Indonesian hospitality MVPs don't need a Stripe integration to ship — they need WhatsApp.

The stack.

Frontend

  • Astro 5 (static)
  • TypeScript
  • Tailwind v4
  • Fraunces + Inter variable

Animation

  • GSAP + ScrollTrigger
  • Lenis smooth scroll
  • Scroll-coupled pin & scrub

Content

  • @astrojs/content (Content Layer)
  • Zod schemas (4 collections)
  • 17 real entries (3 packages · 6 destinations · 8 kuliner)

Conversion

  • WhatsApp deeplinks (wa.me)
  • Per-package prefilled message templates
  • Schema.org TouristTrip + Restaurant JSON-LD

Deploy

  • Netlify
  • Auto-deploy from main
  • Free-tier hosting

What's on the page.

  • Hero — Tanah rancak, dengan layanan yang setara keindahannya

    Full-viewport opening with looping Sumbar nature video and the brand's forward-hospitality headline. Word-stagger reveal on first paint, CTAs into Packages and the commitments below.

  • ProblemReveal — anonymized visual reconstruction

    Public criticism of Sumbar hospitality acknowledged via a custom TweetCard component with anonymized handles and synthetic supporting comments. Title pivot frames the acknowledgment as reason-we-exist, not self-deprecation: 'Suara ini yang membuat kami berdiri — bukan untuk membantah, tapi untuk memajukan.'

  • Packages — photo-first tour cards

    Three real tour packages with full itineraries — Highlands Heritage 3D2N, Pesisir Mentawai 4D3N, Solo Hopper 5D4N — rendered as 4:5 photo cards with floating chrome badges, transparent pricing, and a 'Paling Populer' label on the strongest seller. WhatsApp CTA per card with a prefilled booking message.

  • CustomRoute — moss-dark sewa mobil break

    The only dark section on the page, used as cinematic punctuation. Three vehicle tiers (Avanza, Innova, Hiace) at transparent daily rates, plus three popular route presets (Coastline, Highland Loop, Heritage Trail) with hand-drawn SVG mini-maps and path-draw animation on reveal.

  • DestinationsKuliner — scroll-driven aspirational reel

    Six destinations (Mentawai, Harau, Maninjau, Bukittinggi, Sawahlunto, Pagaruyung) and eight curated kuliner spots reveal sequentially under a pinned-scrub scroll timeline. Each kuliner card links to its actual GMaps location with a published price range. Closes with an explicit anti-mark-up promise.

  • CtaFooter — sober closing band

    Moss-dark closing hero with three pastel commitment cards (peach, mint, cream), a coral-accented headline, and a WhatsApp + email row. Footer below carries the dual disclaimer that the brand is fictional and the site is a showcase template, with a backlink to rimba.dev.

In motion.

The other two sections you'll meet after the hero — same captures from the live build at rancakbana.netlify.app. Numbered to match their position in the page narrative.

  • Rancak Bana Packages section — three photo-first tour cards (Highlands Heritage, Pesisir Mentawai, Solo Hopper) at 4:5 ratio with floating chrome badges, transparent pricing, 'Paling Populer' label, and a WhatsApp CTA per card

    02 Packages — three real tours, transparent pricing, WhatsApp CTA per card

  • Rancak Bana Destinations + Kuliner section — six destination cards (Mentawai, Harau, Maninjau, Bukittinggi, Sawahlunto, Pagaruyung) and eight curated kuliner spots revealing under a pinned-scrub scroll timeline, each card linking to GMaps

    03 Destinations + Kuliner — scroll-coupled reveal, eight GMaps-linked spots

Design decisions.

  • Section flow as conversion narrative

    The page reads as a six-section story — open with the natural product, acknowledge the public criticism honestly, commit to a higher standard, surface concrete buyable packages, show aspirational destinations and curated kuliner, close with a WhatsApp CTA. Every section earns its position by what it asks the visitor to think next.

  • Forward positioning, never self-deprecation

    The brand doesn't say 'we'll fix the broken industry.' It says 'we exist to raise the bar — Sumbar layak dikenal.' Public criticism of the wider industry is framed as the reason this brand exists, not as a confession of weakness. Every CTA, every commitment card, every package description reinforces the same voice.

  • Anonymized acknowledgment

    The Problem section paraphrases real public commentary instead of republishing it verbatim. Anonymized handles, generic avatars, synthetic supporting comments composed from common complaint patterns. Original commenters don't get pulled into a marketing page they didn't sign up for.

  • WhatsApp-first booking

    Indonesian hospitality MVPs don't need a payment integration or a booking-form backend — they need WhatsApp. The site uses prefilled message templates per package, so a visitor's tap opens chat with the right tour, the right date, and the right party size already filled in. Dispatch, customization, and payment happen in chat.

  • Scroll-coupled cinematic break

    The Destinations + Kuliner section runs longer than one screen on purpose, so destinations and dishes reveal in sequence as the visitor scrolls. Mobile drops the pin and falls back to a stagger reveal that still respects the storytelling order.

  • Indonesian voice, consistent across sections

    Driver certification, transparent pricing, anti-mark-up commitment, and money-back guarantee are all published up front. Indonesian copy throughout — no English fallbacks, no localization-layer awkwardness, no surface where the brand suddenly speaks a different language.

Need a landing page that ships?

Rancak Bana is the pattern — narrative section flow, Indonesian voice, scroll-coupled storytelling, WhatsApp conversion. If you have a real brand that needs a landing that performs and ships, I take freelance and full-time engineering.