☕ Node Coffee

Kafe Produktif & Coworking Space di Yogyakarta

Landing page interaktif bergaya Neo-Brutalism untuk Node Coffee. Proyek ini dibangun menggunakan arsitektur modern web (Next.js App Router) dan ditujukan sebagai showcase integrasi antara pengembangan antarmuka (UI/UX) dan pelacakan metrik bisnis digital.

✨ Fitur Utama

• Desain Neo-Brutalism: Tata letak berani, kontras tinggi, dan elemen bayangan tebal khas antarmuka web modern.
• Dark Mode & Light Mode: Peralihan mode tema warna secara dinamis (next-themes).
• Scroll & Animasi Interaktif: Memanfaatkan framer-motion dan Lenis untuk efek parallax dan reveal animation.
• Marquee Testimoni: Komponen carousel gulir otomatis (interaktif & draggable) menggunakan embla-carousel-react.
• Ultra-Responsive: Presisi layout dari layar mobile terkecil hingga monitor Ultra-Wide.

🚀 Optimasi Skalabilitas & Analitik Bisnis

Proyek ini tidak hanya mementingkan aspek visual, melainkan juga dibekali dengan strategi skala bisnis (Scale-Up):

1. Google Analytics (GA4) Integration 📊
   • Perekaman kunjungan (page views) dan metrik engagement menggunakan pustaka @next/third-parties/google.
2. Conversion Rate Optimization (CRO) 🎯
   • Implementasi sendGAEvent secara langsung (Custom Events) pada komponen aksi seperti tombol "Klaim Voucher" untuk melacak konversi (leads).
3. Advanced SEO Metadata 🔍
   • Penanaman struktur meta keywords dan Open Graph di layout.tsx untuk menunjang performa organik pada Search Engine dan saat link dibagikan di media sosial.

💻 Teknologi yang Digunakan

• Framework: Next.js (React)
• Styling: Tailwind CSS
• Animasi: Framer Motion
• Smooth Scroll: Lenis
• Ikonografi: Lucide React

🛠️ Menjalankan Proyek Secara Lokal

Pastikan Node.js versi terbaru telah terpasang.

1. Klon / Unduh repositori ini.
2. Instal dependensi:

   npm install

3. Jalankan server pengembangan:

   npm run dev

4. Buka http://localhost:3000 di browser Anda.

🌐 Deployment

Proyek ini telah dikonfigurasi (Zero-Config) untuk langsung di-deploy melalui Vercel. Seluruh pengoptimalan gambar, penyajian font, dan analitik sudah disesuaikan dengan pedoman Web Vitals (Best Practices).