Overview
Touravel adalah proyek landing page bertema travel yang dibangun dengan cara men-slicing desain dari Figma ke dalam HTML, CSS, dan JavaScript vanilla. Halaman ini menampilkan pengalaman visual yang menarik dengan hero section yang memuat form pencarian destinasi, section layanan, daftar destinasi populer berbasis slider, statistik, testimoni pelanggan, hingga footer. Fokus utama proyek ini adalah ketepatan implementasi desain (pixel-perfect), responsivitas di berbagai ukuran layar, serta pengalaman pengguna yang halus melalui animasi dan transisi.
Key Features
- Hero section dengan headline, subheading, dan form pencarian (lokasi + tanggal)
- Navbar responsif dengan mobile menu toggle
- Section Top Values yang menampilkan 4 layanan utama (Lot of Choices, Tour Guide, Easy Booking, Luxury Hotel)
- Slider destinasi populer menggunakan Swiper.js dengan kontrol prev/next
- Section statistik untuk membangun kepercayaan pengguna
- Section testimoni pelanggan
- Animasi scroll berbasis AOS pada tiap section
- Layout fully responsive untuk mobile, tablet, dan desktop
Challenges
- Menjaga ketepatan desain (pixel-perfect) — Menerjemahkan detail desain Figma seperti spacing, tipografi, dan warna secara akurat ke CSS tanpa framework UI seperti Bootstrap atau Tailwind.
- Responsivitas kompleks — Beberapa section seperti hero dan card produk memiliki layout yang berbeda signifikan antara mobile dan desktop, membutuhkan media query yang cermat.
- Integrasi Swiper.js — Menyesuaikan konfigurasi Swiper agar sesuai dengan desain (jumlah slide per view, spacing, tombol navigasi custom) tanpa merusak layout keseluruhan.
- Performa animasi — Memastikan animasi AOS berjalan mulus tanpa menyebabkan layout shift atau jank pada perangkat yang lebih lambat.
Solutions
- Menggunakan CSS Custom Properties untuk warna dan ukuran yang konsisten, serta membandingkan langsung hasil browser dengan mockup Figma secara iteratif.
- Menerapkan pendekatan mobile-first dengan media query bertahap, menggunakan Flexbox dan Grid sesuai kebutuhan tiap section.
- Mengkonfigurasi Swiper dengan parameter slidesPerView, spaceBetween, dan breakpoint responsif, lalu menghubungkan tombol navigasi custom ke API Swiper.
- Mengatur data-aos hanya pada elemen yang benar-benar membutuhkan animasi dan memanfaatkan properti duration dan once agar animasi tidak diulang dan tetap ringan.
Lessons Learned
- Slicing dari Figma melatih ketelitian dalam membaca desain — mulai dari padding, line-height, hingga shadow yang sering diabaikan.
- Memahami kapan menggunakan Flexbox vs Grid sangat memengaruhi kemudahan maintainability layout.
- Library pihak ketiga seperti Swiper dan AOS sangat powerful, tapi tetap perlu dipahami dokumentasinya agar bisa dikustomisasi sesuai kebutuhan desain.
- Proyek static site murni tanpa framework justru memperkuat pemahaman dasar HTML, CSS, dan DOM manipulation JavaScript.