Loading image 1...
MalioboroRun2022
Responsive Event Registration Page built with Next.js and Tailwind CSS
Malioboro Run 2022
Malioboro Run 2022
Responsive Event Registration Page built with Next.js and Tailwind CSS
Responsive Event Registration Page built with Next.js and Tailwind CSS
Developed a visually engaging, single-page website for the Malioboro Run 2022 event. The goal was to provide essential event information, showcase the unique running experience through Yogyakarta (Jogja), and drive participant registration. The site is fully responsive and optimized for speed and clarity.
The Problem
The primary challenge was designing a clean, user-friendly interface that could quickly convey the excitement of the event while incorporating event details (rules, routes, FAQ) and multiple external sponsor/partner logos without appearing cluttered.
Used Tailwind CSS for rapid, utility-first styling to achieve a modern, minimal aesthetic. Leveraged a Dark/Overlay Hero section for high visual impact and utilized a sticky navigation bar with clear CTAs (Daftar Sekarang) to maximize registration conversions. Core functionality was implemented using vanilla JavaScript.
Visual Journey
Project Showcase
Loading image 1...
Screenshot 1
Project visualization and interface design
TechStack
Next.js
Frontend Framework
CSS3
Styling
React
Interface
Tailwind CSS
Styling
Figma
Design/Prototyping
KeyFeatures
High-Impact Hero Section
Dominant hero image of the Malioboro street with a clear, localized value proposition: "Menikmati wisata kota khas Jogja dengan berlari" (Enjoy Jogja’s distinct city tourism by running).
Structured Navigation Links
Clear navigation bar for routes, terms, FAQ, and registration (Daftar Medali).
Sponsor & Partner Showcase
Dedicated section to display the main sponsor (BPD DIY) and other official partners (Isotonic, Mineral Water, Media Partner).
Visual Storytelling
Gallery thumbnails near the main description to visually summarize the atmosphere of the run.
Registration CTA
Prominent "DAFTAR SEKARANG" (Register Now) button in the header for immediate conversion.
Dynamic Event Countdown
A prominent, real-time countdown timer in the hero section displaying the days, hours, and minutes remaining until the Malioboro Run begins, fostering urgency and excitement.
OurProcess
A detailed look at how we brought this project from concept to reality through our proven methodology.
Design & Wireframing
Quickly sketched the single-page layout in Figma, prioritizing the hero section and CTA placement.
Styling & Development
Built the component structure in Next.js and applied Tailwind CSS utility classes for rapid styling of every part (nav, hero, gallery, footer).
Integration & Polish
Added light menu and scrolling interactions at the component level, then ensured full responsiveness across mobile views.
Deployment
Final testing and deployment to a static hosting service like Vercel.
04 Outcomes delivered
- 01Achieved high PageSpeed scores from a static Next.js output and minimal client-side JavaScript
- 02Created a clear content hierarchy despite the single-page format
- 03Successfully showcased the main sponsor (BANK BPD DIY) and official partners prominently
- 04Implemented a modern, responsive layout optimized for mobile event registration
The website was essential in generating buzz and sign-ups. The clean layout made it easy for participants to find all the necessary information quickly.