🏨 Hotel Megalux Landing Page

Selamat datang di repositori landing page Hotel Megalux! Proyek ini merupakan sebuah website satu halaman (single-page application) yang menampilkan informasi tentang Hotel Megalux, sebuah hotel mewah yang berlokasi di jantung kota Jakarta, Indonesia.

📝 Deskripsi

Hotel Megalux adalah destinasi penginapan mewah yang menawarkan pengalaman menginap tak terlupakan dengan fasilitas lengkap dan layanan terbaik. Landing page ini dirancang untuk memberikan gambaran komprehensif tentang hotel kepada calon tamu.

✨ Fitur

• 📱 Desain responsif yang menyesuaikan dengan berbagai ukuran layar
• 🌓 Mode gelap (dark mode) yang dapat diaktifkan sesuai preferensi pengguna
• 🎭 Animasi scroll dan transisi halus untuk meningkatkan pengalaman pengguna
• 🛏️ Informasi lengkap tentang kamar, fasilitas, dan layanan hotel
• 🖼️ Galeri foto yang menampilkan keindahan hotel
• 📝 Formulir kontak untuk reservasi atau pertanyaan
• 🌟 Promo kilat yang muncul secara dinamis
• 🔝 Tombol "Kembali ke Atas" yang responsif
• 🗺️ Peta lokasi hotel terintegrasi
• 💬 Bagian FAQ yang interaktif

🛠️ Teknologi yang Digunakan

• 🌐 HTML5
• 🎨 CSS3 (dengan Tailwind CSS untuk styling)
• 📜 JavaScript (dengan Alpine.js untuk interaktivitas)
• 🗺️ Google Maps API untuk peta lokasi

🚀 Cara Penggunaan

Untuk menggunakan dan mengembangkan proyek ini di mesin lokal Anda, ikuti langkah-langkah berikut:

1. Clone repositori ini:

   git clone https://github.com/BahasKoding/LP-Hotels.git
   cd LP-Hotels
   

2. Instal dependensi yang diperlukan:

   npm install
   

3. Jalankan Tailwind CSS dalam mode watch untuk mengompilasi file CSS:

   npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
   

4. Buka file index.html di browser web Anda untuk melihat hasilnya.

5. Mulai edit file HTML, CSS, atau JavaScript sesuai kebutuhan Anda. Tailwind CSS akan secara otomatis mengompilasi ulang file CSS setiap kali Anda menyimpan perubahan.

📁 Struktur Proyek

• index.html: File HTML utama
• src/input.css: File input Tailwind CSS
• src/output.css: File output Tailwind CSS (dihasilkan otomatis, jangan edit secara manual)
• src/img/: Direktori untuk menyimpan gambar
• src/script.js: File JavaScript untuk fungsionalitas tambahan
• tailwind.config.js: File konfigurasi Tailwind CSS

🔧 Fitur Interaktif

• Mode Gelap: Pengguna dapat beralih antara mode terang dan gelap.
• FAQ Accordion: Bagian FAQ menggunakan accordion untuk menampilkan/menyembunyikan jawaban.
• Modal Galeri: Gambar dapat diperbesar dalam modal untuk tampilan yang lebih detail.
• Promo Kilat: Notifikasi promo muncul setelah beberapa waktu untuk menarik perhatian pengguna.
• Tombol Kembali ke Atas: Muncul saat pengguna menggulir ke bawah untuk navigasi cepat ke atas halaman.

🤝 Kontribusi

Kami sangat menghargai kontribusi untuk meningkatkan landing page ini. Jika Anda memiliki saran atau menemukan bug, silakan buat issue atau pull request.

📄 Lisensi

Proyek ini dilisensikan di bawah MIT License.

📞 Kontak

Untuk informasi lebih lanjut, silakan hubungi tim pengembang di developer@hotelmegalux.com.