Kembali ke Daftar

Active v2.0.0 Updated: 05 Apr 2026 30

NexFlow Gym & Fitness — Premium Landing Page v2.0 (Midnight Neon Edition)

Save Live Demo

Hubungi Admin di WhatsApp

Tip: dulu agar Admin bisa mengenali akun Anda.

Source Code Request

Overview

🏋️ NexFlow Gym & Fitness — Premium Landing Page v2.0 (Midnight Neon Edition)

🔥 Filosofi & Visi

NexFlow bukan sekadar template gym biasa — ini adalah pernyataan visual bagi bisnis fitness modern yang ingin tampil beda.

Dibangun dengan filosofi "Performance Meets Aesthetic", NexFlow menggabungkan performa teknis ultra-ringan dengan estetika Cyber Neon yang memukau. Setiap pixel dirancang untuk menyampaikan satu pesan: bisnis fitness Anda adalah yang terdepan.

Visi kami sederhana: memberikan pelaku bisnis gym & fitness sebuah senjata digital premium — landing page yang bukan hanya cantik, tapi juga mengkonversi pengunjung menjadi member.

💎 Kelebihan Utama (Unique Advantages)

1. Midnight Neon Aesthetic — Desain yang Menghipnotis
Skema warna gelap premium dengan aksen Neon Lime (#A3E635) yang ikonik. Dilengkapi efek glassmorphism, glitch animation, dan gradient halus yang membuat pengunjung terpukau sejak detik pertama. Ini bukan template generik — ini adalah karya seni digital.

2. Ultra-Light SPA Architecture — Kecepatan Absolut
Dibangun di atas Vite 6 + Tailwind CSS v4 tanpa library animasi berat (tanpa AOS, tanpa GSAP). Hasilnya? Skor Lighthouse yang nyaris sempurna. Halaman dimuat dalam hitungan milidetik, bahkan di koneksi 3G. Performa = SEO = Konversi.

3. Bilingual Engine (ID/EN) — Jangkau Pasar Global
Toggle bahasa Indonesia ↔ English yang mulus dengan persistensi di localStorage. Setiap teks, label, dan deskripsi sudah diterjemahkan secara profesional. Satu landing page, dua pasar sekaligus.

4. Dark/Light Mode — Adaptif & Elegan
Sistem tema yang mengubah SELURUH tampilan — bukan hanya warna teks, tapi background, card, shadow, dan aksen. Preferensi tersimpan otomatis. Pengguna mendapat pengalaman yang benar-benar personal.

5. 100% Asset Lokal — Zero External Dependency
Semua gambar (trainer, fasilitas, avatar, hero) disimpan lokal di project. Tidak ada ketergantungan pada Unsplash atau CDN eksternal yang bisa down. Gambar Anda selalu tampil, selalu cepat.

6. Deploy Anywhere — Vercel, Netlify, cPanel Ready
Sudah dikonfigurasi dengan vercel.json, .htaccess, dan base: './' untuk kompatibilitas hosting universal. Tinggal push ke GitHub, deploy selesai dalam 30 detik.

📋 Penjelasan Menu & Section Landing Page

🏠 Hero Section
Banner utama fullscreen dengan background image, badge animasi, judul besar bergaya glitch, dan dua tombol CTA (Join & Explore). Dilengkapi statistik angka (Members, Programs, Trainers, Awards) dengan efek counter yang eye-catching.

🏟️ Facilities (Our Arena)
Grid 6 kartu fasilitas premium — Modern Equipment, Strength Arena, Sauna & Spa, Healthy Hub, The Ring, Cyber Pool. Setiap kartu memiliki gambar lokal, nama bilingual, dan deskripsi singkat. Hover effect dengan border neon.

⚡ Elite Programs (Cyber Modules)
6 program latihan dengan filter kategori (All, Strength, Cardio, Wellness). Setiap program menampilkan gambar, level, durasi, jadwal, dan deskripsi. Sistem filter real-time menggunakan Alpine.js — tanpa reload halaman.

👥 Trainers (The Masters)
3 profil trainer elite dengan foto profesional, spesialisasi, pengalaman, sertifikasi, dan bio singkat. Layout card dengan efek hover gradient neon.

💰 Pricing (Choose Your Access)
3 tier membership (Basic, Pro, Elite) dengan toggle Bulanan/Tahunan. Paket Pro ditandai sebagai "OPTIMIZED" dengan badge khusus. Diskon 40% untuk paket tahunan ditampilkan dengan jelas.

⭐ Testimonials (Member Pulse)
3 testimoni member dengan avatar lokal, nama, status membership, rating bintang, dan komentar bilingual. Social proof yang kuat untuk meningkatkan kepercayaan.

❓ FAQ (System Query)
3 pertanyaan umum dengan accordion expand/collapse (Alpine.js + @alpinejs/collapse). Animasi transisi yang halus dan elegan.

🧮 BMI Calculator (Metric Analysis)
Kalkulator BMI interaktif — input berat & tinggi, hasil instan dengan kategori (Underweight/Normal/Overweight/Obese) dan kode warna. Fitur value-added yang meningkatkan engagement.

📜 Footer
Informasi brand ASGARDEV, quick links navigasi, jam operasional, dan link legal (Privacy Policy & Terms of Service) yang membuka modal popup.

🚀 Cara Penggunaan

Extract & Install: Unzip file → buka terminal → jalankan npm install
Development: Jalankan npm run dev → buka http://localhost:5173
Kustomisasi Konten: Edit file src/data.js — semua teks, gambar, dan data ada di satu file ini
Ganti Gambar: Taruh gambar baru di folder public/images/ dan update path di data.js
Build Production: Jalankan npm run build → folder dist/ siap di-deploy
Deploy ke Vercel: Push ke GitHub → hubungkan repo di Vercel → otomatis live!

Keunggulan Beli di ASGARDEV

Gratis Update Selamanya

Nikmati update fitur baru dan perbaikan bug (misal v1.0 ke v1.1) tanpa biaya tambahan. Anda cukup unduh ulang source code dari Koleksi Saya secara gratis.

Full Source Code Terbuka

Dapatkan 100% akses ke source code asli, tidak ada file yang dienkripsi. Anda bebas memodifikasi dan memodernisasi aplikasi ini sesuai kebutuhan bisnis.

Akses Instan & Permanen

File langsung tersedia untuk didownload detik itu juga setelah pembayaran terkonfirmasi otomatis. Link aplikasi Anda tidak akan mati/kedaluwarsa.

Dibangun dengan Skalabilitas

Infrastruktur koding disusun rapi dengan standar pattern industri masa kini, sehingga siap digunakan untuk skala aplikasi yang lebih besar.

Features

Desain Premium Midnight Neon Aesthetic dengan Glassmorphism & Glitch Animation

Dark Mode & Light Mode dengan Persistensi LocalStorage

Bilingual Engine Indonesia ↔ English dengan Toggle Instan

Hero Section Fullscreen dengan Statistik Counter Animasi

6 Kartu Fasilitas Premium dengan Gambar Lokal Berkualitas Tinggi

6 Program Latihan dengan Filter Kategori Real-Time (Strength/Cardio/Wellness)

3 Profil Trainer Elite dengan Foto, Sertifikasi & Bio Lengkap

3 Tier Pricing (Basic/Pro/Elite) dengan Toggle Bulanan vs Tahunan

Testimoni Member dengan Avatar, Rating Bintang & Social Proof

FAQ Accordion dengan Animasi Collapse Halus

BMI Calculator Interaktif dengan Hasil Instan & Kategori Warna

Footer Profesional dengan Quick Links & Jam Operasional

Modal Popup untuk Privacy Policy & Terms of Service

100% Asset Gambar Lokal (Zero External Dependency)

Ultra-Light SPA Architecture — Skor Lighthouse Tinggi

Responsive Design untuk Desktop, Tablet & Mobile

SEO-Friendly dengan Semantic HTML5 & Meta Tags

One-Click Deploy ke Vercel, Netlify atau cPanel

Single Source of Truth — Semua Konten di Satu File (data.js)

Konfigurasi Vite + Tailwind CSS v4 Siap Produksi

Screenshots

1 gambar

Testimoni & Rating Pembeli

Hanya pembeli yang dpt mengulas

0.0

0 Total Ulasan

Belum ada ulasan untuk project ini.

Ulasan hanya dapat diberikan setelah Anda membeli project dan mengakses menu Koleksi Saya.

Changelog

v1.0.0 -

Version 1.0.0 (Foundation Release)

Perilisan perdana NexFlow Gym & Fitness. Meletakkan fondasi landing page premium untuk bisnis gym & fitness yang fokus pada tampilan futuristik, konten lengkap, dan pengalaman pengguna yang profesional sejak kunjungan pertama.

[New] Peluncuran Platform Landing Page Gym & Fitness: Membangun identitas digital yang kuat dan berkarakter bagi brand fitness Anda, dengan struktur HTML5 semantik dan desain responsif yang siap bersaing di era digital.
[New] Hero Section Fullscreen dengan Call-to-Action: Tampilan pembuka yang langsung menangkap perhatian pengunjung melalui background gambar resolusi tinggi, headline impactful, dan tombol CTA strategis untuk mendorong konversi member.
[New] Showcase 6 Fasilitas Premium: Grid kartu fasilitas lengkap — Modern Equipment, Strength Arena, Sauna & Spa, Healthy Hub, The Ring, Cyber Pool — yang memperlihatkan keunggulan fisik gym Anda kepada calon member.
[New] Katalog 6 Program Latihan Elite: Daftar program terstruktur (Power Lift, Cyber Cardio, Zen Flow, Extreme HIIT, Iron Core, Body Reconstruct) yang membuktikan keseriusan dan variasi layanan gym Anda.
[New] Profil 3 Trainer Profesional: Halaman perkenalan pelatih lengkap dengan spesialisasi, pengalaman, dan sertifikasi — membangun kepercayaan calon member terhadap kualitas bimbingan yang akan didapatkan.
[New] Tabel Pricing 3 Tier Membership: Opsi paket keanggotaan (Basic, Pro, Elite) yang tersaji rapi dan transparan, memudahkan calon member memilih sesuai kebutuhan dan budget.
[New] Section Testimoni Member: Tiga ulasan nyata dari member aktif sebagai social proof yang memperkuat keyakinan pengunjung untuk segera bergabung.
[New] Section FAQ Informatif: Tiga pertanyaan yang paling sering diajukan, disajikan dengan jawaban ringkas untuk menghilangkan keraguan calon member sebelum mendaftar.
[New] Footer Profesional dengan Jam Operasional: Informasi brand, navigasi cepat, dan jadwal operasional harian yang memudahkan pengunjung merencanakan kunjungan pertama mereka.
[Legal] Halaman Privacy Policy & Terms of Service: Dokumen legal dasar yang menunjukkan profesionalisme dan kepatuhan brand Anda terhadap standar bisnis digital.

v1.1.0 -

Version 1.1.0 (Interactive Upgrade)

Peningkatan besar pada sisi interaktivitas dan pengalaman pengguna. Menambahkan fitur-fitur dinamis yang membuat landing page terasa hidup, responsif, dan mampu mempertahankan pengunjung lebih lama di halaman.

[Major] Integrasi Alpine.js v3 sebagai Reactive Engine: Menggantikan JavaScript manual dengan framework reaktif ringan yang membuat setiap interaksi UI terasa instan dan modern — tanpa mengorbankan performa loading.
[New] Dark Mode & Light Mode dengan Toggle Switch: Pengguna kini bebas memilih tema visual sesuai preferensi pribadi. Pilihan tersimpan otomatis di localStorage sehingga pengalaman personal tetap terjaga saat kunjungan berikutnya.
[New] BMI Calculator Interaktif: Fitur value-added yang meningkatkan engagement — pengunjung bisa langsung menghitung Body Mass Index dengan hasil instan, kategori kesehatan, dan kode warna visual (Underweight/Normal/Overweight/Obese).
[New] Statistik Counter di Hero Section: Angka pencapaian (Members, Programs, Trainers, Awards) yang ditampilkan secara prominent untuk memperkuat kredibilitas dan skala bisnis gym Anda di mata pengunjung.
[Improve] FAQ Accordion dengan Animasi Halus: Section FAQ ditingkatkan dari tampilan statis menjadi accordion interaktif menggunakan plugin @alpinejs/collapse — informasi tersaji lebih rapi dan elegan dengan transisi expand/collapse yang smooth.
[Improve] Navigasi Mobile Responsif: Hamburger menu dioptimasi dengan transisi yang lebih halus dan area sentuh yang lebih nyaman, memastikan pengalaman browsing yang sempurna di layar smartphone.

v1.2.0 -

Version 1.2.0 (Bilingual Engine)

Ekspansi jangkauan pasar melalui implementasi sistem multi-bahasa. Satu landing page kini mampu melayani dua segmen pasar sekaligus — lokal dan internasional — tanpa perlu membuat website terpisah.

[Major] Bilingual Engine Indonesia ↔ English: Sistem toggle bahasa instan tanpa reload halaman yang memungkinkan seluruh konten berubah secara real-time. Pilihan bahasa tersimpan di localStorage untuk personalisasi berkelanjutan.
[New] Arsitektur Single Source of Truth (data.js): Seluruh konten teks, label, deskripsi, dan data program dipusatkan di satu file modular. Pembeli cukup mengedit satu file untuk mengkustomisasi seluruh isi website — efisiensi maksimal.
[New] Toggle Billing Cycle pada Pricing: Fitur switch Bulanan/Tahunan dengan badge diskon "HEMAT 40%" yang jelas terlihat — strategi pricing psychology yang terbukti meningkatkan konversi paket premium.
[Improve] Dukungan Bilingual di Seluruh Section: Setiap section dari Hero hingga Footer, termasuk BMI Calculator dan modal legal, kini sepenuhnya mendukung dua bahasa — tidak ada satu pun elemen yang tertinggal.
[Improve] Legal Modal Bilingual: Konten Privacy Policy dan Terms of Service otomatis menyesuaikan bahasa yang dipilih pengguna, menjaga konsistensi pengalaman di seluruh halaman.

v1.5.0 -

Version 1.5.0 (Performance Overhaul)

Transformasi arsitektur menyeluruh dari struktur statis ke Single Page Application modern. Upgrade ini secara dramatis meningkatkan kecepatan, skalabilitas, dan profesionalisme teknis project.

[Major] Migrasi ke SPA Architecture dengan Vite 6: Perpindahan total ke build tool generasi terbaru yang menghadirkan Hot Module Replacement, tree-shaking otomatis, dan waktu build production dalam hitungan detik — performa loading halaman meningkat hingga 80%.
[Major] Implementasi Tailwind CSS v4 dengan @tailwindcss/vite: Sistem styling mutakhir yang menggantikan CSS manual, menghadirkan konsistensi desain yang sempurna, bundle size minimal, dan kemudahan kustomisasi yang luar biasa bagi developer.
[Improve] Zero External Animation Library: Penghapusan total dependensi AOS dan GSAP demi performa murni CSS3 native. Semua animasi (transition, keyframes, transform) berjalan tanpa overhead JavaScript tambahan — ringan, cepat, elegan.
[Improve] Refaktor Komponen Alpine.js dengan Alpine.data(): Arsitektur kode ditingkatkan menggunakan pola component encapsulation yang lebih bersih, mencegah konflik state dan mempermudah pengembangan fitur di masa depan.
[Improve] Optimasi Bundle Size Otomatis: Vite secara cerdas mengeliminasi kode yang tidak terpakai (tree-shaking), menghasilkan file production yang sangat kecil dan waktu First Contentful Paint yang kompetitif.
[New] Konfigurasi Hosting Universal: Penambahan base: './' pada vite.config.js memastikan website bisa di-deploy di root domain maupun subfolder tanpa masalah path — kompatibel dengan berbagai jenis hosting.

v2.0.0 -

Version 2.0.0 (Midnight Neon Edition) ✨

Upgrade terbesar dan paling ambisius. Redesain visual total ke estetika Midnight Neon yang futuristik, migrasi seluruh asset gambar ke lokal, dan penyempurnaan deployment pipeline untuk kesiapan produksi penuh di Vercel, Netlify, maupun cPanel.

[Major] Redesain Total ke Midnight Neon Aesthetic: Transformasi visual menyeluruh dengan skema warna gelap premium dan aksen ikonik Neon Lime (#A3E635). Efek glassmorphism, gradient halus, dan glitch animation menjadikan NexFlow tampil berbeda dari semua template gym di pasaran — ini bukan template, ini karya seni digital.
[Major] 100% Asset Gambar Lokal — Zero External Dependency: Seluruh gambar (hero, fasilitas, trainer, avatar) yang sebelumnya mengandalkan Unsplash kini disimpan lokal di public/images/. Hasilnya: kecepatan loading meningkat, gambar selalu tampil, dan tidak ada risiko broken image akibat CDN down.
[New] Efek Glassmorphism pada Komponen UI: Card dan panel menggunakan teknik backdrop-blur dengan transparansi yang memberikan kesan kedalaman dan modernitas premium — detail kecil yang membedakan desain amatir dari profesional.
[New] Glitch Animation pada Hero Section: Efek animasi cyber-futuristik pada headline utama yang langsung mencuri perhatian dalam 3 detik pertama — meningkatkan first impression dan menurunkan bounce rate.
[New] Koleksi Foto Trainer & Avatar Premium: 3 foto trainer dan 3 avatar testimoni berkualitas tinggi yang di-generate dan dikurasi secara profesional, menjamin konsistensi visual dan keandalan tampilan di semua kondisi.
[New] Hero Background Custom: Gambar latar hero yang dirancang khusus untuk melengkapi estetika Midnight Neon — bukan foto stok generik, tapi visual yang sengaja dibangun untuk brand NexFlow.
[New] Konfigurasi Vercel One-Click Deploy: Penambahan vercel.json dengan SPA routing rewrite rules memastikan deployment ke Vercel berjalan sempurna hanya dengan satu kali push ke GitHub — tanpa konfigurasi manual.
[New] Kompatibilitas Apache/cPanel via .htaccess: File .htaccess yang sudah dikonfigurasi memastikan SPA routing bekerja sempurna di shared hosting berbasis Apache — menjangkau pengguna yang hosting di cPanel.
[Improve] Sistem Dark/Light Mode Menyeluruh: Bukan sekadar mengubah warna teks — kini seluruh elemen visual berubah: background halaman, warna card, shadow, border, bahkan gradient. Pengalaman yang benar-benar imersif di kedua mode.
[Improve] Standardisasi Komponen UI Premium: Penerapan class utilitas konsisten (gym-card, btn-gym, section-label) di seluruh halaman memastikan tampilan kohesif dan polished — setiap elemen terasa seperti bagian dari satu ekosistem desain yang utuh.
[Improve] Optimasi Path Gambar untuk Production Build: Migrasi referensi gambar dari /src/assets/ ke /images/ (public directory) memastikan semua gambar tampil sempurna baik di mode development maupun setelah production build — tidak ada lagi gambar hilang saat deploy.
[Fixed] Perbaikan Bug Permission Denied (Error 126) di Vercel: Penambahan postinstall script yang otomatis mengatur executable permission pada binary Vite di environment Linux, mengatasi masalah deployment yang sebelumnya menghambat proses go-live.
[Fixed] Perbaikan Build Script untuk CI/CD: Upgrade command dari vite build ke npx --yes vite build memastikan resolusi binary berjalan lancar di semua Continuous Integration environment tanpa intervensi manual.
[Fixed] Perbaikan Foto Trainer Marcus 'Droid' Vane: Gambar trainer pertama yang sebelumnya tidak muncul karena kesalahan path kini telah diperbaiki dan diganti dengan asset lokal berkualitas tinggi.
[Fixed] Perbaikan Bug Kontras Warna di Light Mode: Teks yang sebelumnya tidak terbaca pada beberapa section di mode terang kini telah dikoreksi — memastikan accessibility dan keterbacaan sempurna di kedua tema.
[Legal] Pembaruan Dokumen Legal: Konten Privacy Policy dan Terms of Service diperbarui agar sesuai dengan standar bisnis fitness digital profesional dan regulasi perlindungan data terkini.