Manhattan Coffee — Taste The Moment

Manhattan Coffee adalah website landing page interaktif yang menghadirkan pengalaman kopi premium dengan suasana elegan, terinspirasi oleh karakter Manhattan Cafe dari serial Umamusume. Website ini menyajikan menu spesial, sajian autentik, dan atmosfer tak terlupakan dalam sebuah antarmuka yang modern, responsif, dan dinamis.

🌟 Fitur Utama

• Desain Elegan & Responsif: Menggunakan perpaduan tipografi klasik dari Cormorant Garamond dan kesan modern-bersih dari DM Sans.
• Mode Gelap & Terang (Theme): Dilengkapi dengan sistem tema menggunakan kustomisasi ThemeContext.
• Pemutar Musik (Music Player): Integrasi pemutar musik background untuk memperkuat suasana kafe saat berselancar.
• Efek Jejak Mouse (Mouse Trail): Interaksi visual yang estetis mengikuti pergerakan kursor pengguna.
• Bagian Konten yang Lengkap: Mencakup Hero Section, Menu Andalan, Tentang Kami, Atmosfer Kafe, dan Reservasi.

🚀 Teknologi yang Digunakan

• Framework: Next.js (App Router) v16
• UI Library: React v19
• Styling: Tailwind CSS v4
• Tipografi: Next/Font (Google Fonts)
• Package Manager: Bun

🛠️ Cara Memulai (Getting Started)

1. Pastikan Anda telah menginstal Bun di perangkat Anda.
2. Instal semua dependensi:

bun install

3. Jalankan server pengembangan (development server):

bun run dev

4. Buka http://localhost:3000 di browser Anda untuk melihat hasilnya.

📂 Struktur Direktori Utama

• app/: Berisi halaman utama, tata letak utama (layout.tsx), gaya CSS global, dan router.
• app/components/: Komponen UI yang digunakan kembali (Navbar, Footer, Hero, Menu, dll.).
• app/context/: Manajemen state seperti pengaturan tema terang/gelap.
• public/: Aset statis seperti gambar, ikon, atau berkas audio.

💡 Mengubah Ikon Website (Favicon)

Jika Anda ingin menyesuaikan ikon website, Anda dapat mengikuti langkah-langkah ini:

1. Pastikan gambar ikon Anda berformat .png, .jpg, atau .ico.
2. Ubah nama gambar tersebut menjadi icon.png, icon.jpg, atau favicon.ico.
3. Pindahkan file tersebut ke dalam folder app/ (misalnya: app/icon.png).
4. Hapus file favicon lama (jika ada) di dalam folder app/.
5. Mulai ulang server pengembangan (bun run dev) agar Next.js mengenali ikon baru Anda.

📄 Lisensi

Proyek ini dibangun untuk tujuan eksplorasi desain, pengembangan website modern, dan demonstrasi interaktivitas menggunakan ekosistem React dan Next.js terbaru.