Diyah Gift
Website Marketing & Katalog Kado Wisuda
Diyah Gift merupakan website pemasaran digital yang dirancang untuk membantu promosi dan penjualan berbagai produk hadiah wisuda seperti selempang, buket bunga, dan aksesoris pendukung momen spesial. Proyek ini dibangun untuk memberikan pengalaman pengguna yang cepat, responsif, dan memudahkan pelanggan menemukan produk serta menghubungi penjual secara langsung.
Website dikembangkan menggunakan React dan Vite dengan pendekatan antarmuka modern berbasis TailwindCSS agar menghasilkan performa tinggi dan pengalaman penggunaan yang nyaman pada berbagai perangkat.
Latar Belakang
Momen wisuda sering kali identik dengan pemberian hadiah seperti buket bunga, selempang, maupun cinderamata lainnya. Namun proses promosi produk sering masih mengandalkan media sosial dan komunikasi manual yang membuat pelanggan kesulitan melihat katalog secara terstruktur.
Diyah Gift hadir sebagai solusi berupa website katalog dan pemasaran digital yang memungkinkan pelanggan menjelajahi produk berdasarkan kategori serta menghubungi penjual dengan lebih cepat.
Tujuan Proyek
* Menyediakan katalog produk wisuda yang terstruktur.
* Mempermudah pelanggan mencari produk sesuai kebutuhan.
* Menyediakan jalur komunikasi yang cepat melalui WhatsApp dan Email.
* Meningkatkan pengalaman pengguna melalui desain modern dan responsif.
* Membantu proses promosi bisnis menjadi lebih profesional.
Fitur Utama
Dark Mode
Menyediakan mode gelap dan terang untuk meningkatkan kenyamanan pengguna. Preferensi pengguna disimpan menggunakan local storage sehingga pengaturan tetap tersimpan.
Responsive Design
Tampilan dioptimalkan untuk berbagai ukuran layar mulai dari smartphone, tablet, hingga desktop.
Katalog Produk Interaktif
Produk ditampilkan dalam bentuk grid dengan sistem kategori sehingga pengguna dapat dengan mudah menemukan produk yang dicari.
Filter Kategori Produk
Pengguna dapat memfilter produk berdasarkan kategori:
* Selempang Wisuda
* Buket Bunga
* Produk Lainnya
Sistem Favorit Produk
Pengguna dapat menandai produk favorit untuk meningkatkan interaksi pengguna.
Integrasi Kontak
Website menyediakan dua metode komunikasi:
Optimasi Performa
Menggunakan Vite sebagai build tool modern untuk menghasilkan waktu loading yang cepat.
Teknologi yang Digunakan
Frontend
* React.js
* Vite
* TailwindCSS
* React Router
UI & Utility
* Iconify
* ESLint
Deployment
* Docker
Arsitektur Sistem
Website menggunakan pendekatan Single Page Application (SPA) dengan React Router sebagai sistem navigasi.
Alur sistem:
Pengguna → Halaman Website → Katalog Produk → Filter Produk → Form Kontak → WhatsApp/Email
Data produk dikelola melalui file JSON sehingga proses penambahan dan pengelolaan produk menjadi lebih mudah tanpa perlu mengubah struktur kode utama.
Halaman Website
Beranda
Halaman utama berisi:
* Hero section
* Informasi singkat tentang Diyah Gift
* Produk unggulan
* Informasi layanan
Galeri Produk
Berisi:
* Daftar produk
* Filter kategori
* Sistem favorit produk
* Tampilan grid responsif
Kontak
Berisi:
* Form WhatsApp
* Form Email
* Toggle antar metode kontak
Kategori Produk
Selempang Wisuda
Produk selempang tersedia dengan berbagai variasi desain seperti:
* Satin
* Rumbai
* Pita
* Satu sisi
* Dua sisi
Jumlah produk: 11 item
Buket Bunga
Buket bunga khusus untuk hadiah wisuda dengan berbagai desain dan variasi.
Jumlah produk: 26 item
Produk Lainnya
Produk pendukung seperti:
* Foto polaroid
* Aksesoris wisuda
* Produk tambahan lainnya
Jumlah produk: 9 item
Tantangan Pengembangan
Beberapa tantangan selama proses pengembangan:
* Menjaga performa website tetap cepat meskipun terdapat banyak gambar produk.
* Membuat tampilan responsif yang konsisten di berbagai perangkat.
* Membangun struktur komponen yang reusable agar mudah dikembangkan.
* Mengelola data produk secara dinamis.
Solusi yang Diterapkan
* Menggunakan Vite untuk mempercepat proses build dan rendering.
* Menerapkan reusable component pada React.
* Menyimpan data produk dalam file JSON agar mudah diperbarui.
* Memanfaatkan TailwindCSS untuk mempercepat proses styling.
* Mengimplementasikan loading skeleton untuk meningkatkan pengalaman pengguna.
Hasil Proyek
Diyah Gift berhasil menyediakan platform pemasaran digital yang:
✔ Mempermudah pelanggan menjelajahi produk ✔ Meningkatkan aksesibilitas layanan pemesanan ✔ Memberikan pengalaman pengguna yang lebih modern ✔ Memiliki performa cepat dan responsif ✔ Mudah dikembangkan untuk fitur selanjutnya