< cd ../

Twinarupa - Website Company Profile & E-Katalog Custom Akrilik Demak

DATE: 2026-09-17
./preview
Twinarupa - Website Company Profile & E-Katalog Custom Akrilik Demak
Twinarupa - Website Company Profile & E-Katalog Custom Akrilik Demak
Twinarupa - Website Company Profile & E-Katalog Custom Akrilik Demak
Twinarupa - Website Company Profile & E-Katalog Custom Akrilik Demak
Twinarupa - Website Company Profile & E-Katalog Custom Akrilik Demak
Twinarupa - Website Company Profile & E-Katalog Custom Akrilik Demak
Twinarupa - Website Company Profile & E-Katalog Custom Akrilik Demak
Twinarupa - Website Company Profile & E-Katalog Custom Akrilik Demak

Overview

Twinarupa adalah pusat pembuatan produk akrilik custom (laser cutting, plakat, neon box, merchandise, dan dekorasi) berbasis di Kabupaten Demak, Jawa Tengah. Project ini bertujuan untuk membangun branding digital yang profesional, menghadirkan company profile yang elegan, serta menyediakan katalog produk interaktif untuk mempermudah calon pelanggan melakukan pemesanan.


Fitur Utama

  • Hero & Branding Section: Tampilan banner modern beresolusi tinggi dengan call-to-action (CTA) yang responsif dan langsung mengarah ke pemesanan.
  • Katalog Produk Dinamis: Pengelompokan kategori produk (Souvenir, Pernikahan/Event, Advertising, dan Dekorasi) dengan detail spesifikasi yang jelas.
  • Interactive FAQ Accordion: Komponen pertanyaan umum yang ringan dan cepat menggunakan Alpine.js tanpa dependensi JavaScript berat.
  • WhatsApp Direct Order Integration: Fitur konversi dengan pre-filled text pesan WhatsApp yang otomatis menyesuaikan produk/kategori yang dipilih pelanggan.
  • Fully Responsive & Clean UI: Desain mobile-first yang dioptimalkan untuk kecepatan akses dan pengalaman pengguna (user experience) di berbagai perangkat.

Tech Stack & Arsitektur

  • Backend Framework: Laravel 12 (PHP 8.3+)
  • Templating Engine: Blade Components & Layouts
  • Frontend Styling: Tailwind CSS v3/v4 (Custom Theme Palette)
  • Client-Side Scripting: Alpine.js (Lightweight Interactivity)
  • Database: MySQL

Implementasi & Tantangan

  1. Clean Blade Component Architecture: Menstrukturkan layout, navbar, footer, dan kartu katalog menggunakan fitur Blade Component Laravel 12 agar kode rapi, reusable, dan mudah dirawat.
  2. Optimasi Performa & UX: Menghindari ketergantungan pada library JavaScript besar dengan menggunakan Alpine.js untuk toggle navbar dan accordion FAQ, sehingga skor PageSpeed tetap optimal.
  3. Peningkatan Konversi Penjualan: Menyusun tata letak copywriting persuasif dan meletakkan tombol CTA WhatsApp di titik-titik krusial navigasi pengguna.
~ $ e.hary_

© 2026 Eko Haryono > @code.santuy

GitHub TikTok Instagram