Owabong Waterpark Purbalingga
frontendDemo landing page modern dan interaktif untuk destinasi taman rekreasi air & petualangan keluarga 'Owabong Waterpark Purbalingga'. Menghadirkan visualisasi kesegaran 100% mata air alami Gunung Slamet yang dipadukan dengan modul kalkulator estimasi tiket instan (Weekday/Weekend), showcase 4 zona wisata terpadu (80+ wahana), panduan fasilitas, serta simulasi reservasi rombongan langsung via WhatsApp.
Landing page modern Owabong Waterpark dengan hero section dinamis, highlight mata air alami, dan kalkulator estimasi tiket instan terintegrasi WhatsApp.
[Tech Stack]
[Problem Statement]
Taman rekreasi air berskala besar dengan puluhan wahana sering kali menghadapi tantangan dalam menyajikan ragam atraksi, jam operasional, dan simulasi perhitungan tarif tiket bagi keluarga maupun rombongan secara cepat dan transparan di ranah digital.
[Solution Approach]
Membangun landing page modern multi-seksi berbasis Next.js App Router, Tailwind CSS, dan Shadcn UI. Mengintegrasikan Framer Motion untuk transisi visual air dan ombak yang dinamis, modul kalkulator estimasi tiket instan dengan kalkulasi otomatis jumlah pengunjung & kategori hari (Weekday/Weekend), serta generator pemesanan langsung direct-to-WhatsApp.
[Technical Implementation]
- â–¹Next.js App Router Architecture: Penerapan arsitektur Next.js modern dengan pemisahan Client/Server Component untuk loading cepat dan SEO optimal
- â–¹Component-Driven UI with Shadcn UI: Pembangunan komponen UI modular dan reusable (Cards, Buttons, Badges, Tabs) yang disesuaikan dengan tema rekreasi air cerah
- â–¹Interactive Ticket Calculator Logic: Pengembangan komponen kalkulator tiket real-time dengan kalkulasi otomatis harga per pax dan tipe hari kunjungan
- â–¹Framer Motion Animations: Implementasi efek transisi hero, animasi reveal saat scrolling, dan interaksi hover pada card zona wahana
- â–¹WhatsApp Direct Booking Integration: Pembuatan utilitas dinamis untuk merangkai link WhatsApp (wa.me) dengan pesan estimasi tiket otomatis
- â–¹Curated Water-Themed Palette & Typography: Pengaturan Tailwind tokens untuk palet warna sky blue, cyan, emerald green, dan aksen amber/orange
- â–¹Responsive & Mobile-First Optimization: Penyesuaian tata letak grid dan navigasi agar tetap optimal, responsif, dan nyaman diakses di berbagai perangkat
[Outcomes & Impact]
- ✓Berhasil menghasilkan landing page demo interaktif yang responsif dan live diakses publik via Vercel
- ✓Menyajikan visualisasi daya tarik 80+ wahana dan 4 zona rekreasi Owabong secara terstruktur dan atraktif
- ✓Mempermudah calon pengunjung menghitung estimasi biaya tiket secara instan dan transparan
- ✓Memangkas alur reservasi melalui simulasi pesan WhatsApp otomatis untuk pengunjung keluarga maupun rombongan
- ✓Menjadi aset portofolio frontend modern dengan fokus pada industri pariwisata rekreasi air dan petualangan keluarga