Moreps Official Website

Moreps Landing Page — Website Promosi Aplikasi Workout Tracker

Konteks & Tujuan

Moreps Landing Page adalah website promosi yang saya bangun untuk memperkenalkan aplikasi Moreps, sebuah aplikasi workout tracker berbasis Flutter dan Supabase. Landing page ini dirancang bukan hanya sebagai halaman informasi, tetapi juga sebagai media branding yang mampu menggambarkan pengalaman menggunakan aplikasi sebelum pengguna mengunduhnya.

Fokus utama pengembangan berada pada kombinasi antara desain modern, performa tinggi, dan interaksi yang terasa hidup. Mulai dari animasi yang halus, efek parallax 3D, hingga transisi antar elemen — semuanya dibuat untuk memberikan pengalaman yang lebih menarik tanpa mengorbankan kecepatan loading.

Website ini juga dioptimalkan untuk kebutuhan presentasi, portfolio, serta media promosi produk digital dengan dukungan SEO, Open Graph, sitemap, dan struktur kode yang mudah dikembangkan.

Fitur Unggulan

Hero Section Interaktif. Headline dengan efek shimmer sebagai fokus utama, CTA menuju Repository GitHub dan Video Demo, mockup aplikasi dengan efek 3D parallax mengikuti pergerakan cursor, serta floating UI cards yang menampilkan fitur utama aplikasi.

Showcase Fitur Aplikasi. Landing page menampilkan tiga fitur utama Moreps secara visual — Workout Builder (membuat program latihan, mencatat repetisi dan beban secara real-time, Smart Rest Timer, konversi KG ↔ LBS), Analytics & Progress (automatic PR detection, grafik perkembangan latihan, tracking berat badan, visualisasi progress interaktif), dan Workout History (kalender riwayat latihan, detail setiap sesi, rekap aktivitas, infinite scrolling history).

User Experience. Smooth scrolling menggunakan Lenis, animasi menggunakan Framer Motion, glassmorphism dan neon design system, custom cursor interaktif, serta responsive untuk desktop, tablet, dan mobile.

Branding & Marketing. CTA untuk mengunjungi repository, section yang memperkenalkan keunggulan aplikasi, footer dengan navigasi cepat, serta developer profile modal berisi informasi tim pengembang.

SEO & Optimasi. Metadata Open Graph, Twitter Card, sitemap otomatis, robots.txt, dan optimasi performa menggunakan App Router Next.js.

Tantangan Pengembangan

Salah satu tantangan terbesar pada proyek ini adalah menciptakan landing page yang terasa modern dan interaktif tanpa mengorbankan performa. Berbagai animasi seperti parallax, floating cards, glow effect, custom cursor, dan transisi halaman harus tetap berjalan mulus pada berbagai ukuran layar.

Selain itu, saya juga memastikan struktur komponen tetap modular sehingga setiap section dapat dikembangkan atau digunakan kembali pada proyek lain dengan lebih mudah.

Tech Stack

Hasil Akhir

Melalui proyek ini saya tidak hanya membangun sebuah landing page, tetapi juga sebuah media presentasi produk yang mampu menjelaskan value aplikasi Moreps secara visual dan mudah dipahami. Seluruh desain, struktur komponen, animasi, hingga optimasi SEO dirancang agar website mampu memberikan kesan profesional sekaligus meningkatkan daya tarik aplikasi bagi calon pengguna maupun recruiter yang melihat portfolio ini.

🔗 Live website: https://moreps.vercel.app