JEKATE — Jakarta Government Running Series Landing Page

The Problem

DKI Jakarta Provincial Government and PAM JAYA needed a high-impact landing page for their new running series — JEKATE (Jakarta Run for Water). The event had tight deadlines, needed to handle thousands of potential visitors during registration periods, and had to serve both Indonesian and English-speaking audiences. Traditional CMS pages were too slow to iterate on and couldn’t deliver the animated, scroll-driven experience the marketing team wanted.

The Solution

I built a single-page React app with animated sections that tell the event story as users scroll — from hero countdown and race categories to route maps, prize breakdowns, and registration CTAs. Multi-language toggle lets users switch between Indonesian and English instantly. Conversion tracking via Google Tag Manager, Meta Pixel, and TikTok Pixel gives the marketing team full visibility into registration funnel performance.

Architecture

jekate-app/
├── src/
│   ├── components/         # 24 section components
│   │   ├── HeroSection        # Countdown + CTA
│   │   ├── AboutSection       # Event quick facts
│   │   ├── PrizeSection       # Prize breakdown by category
│   │   ├── ScheduleSection    # Race day timeline
│   │   ├── RouteSection       # 10K course route
│   │   ├── FAQSection         # Expandable Q&A
│   │   ├── PartnersSection    # Sponsor logos
│   │   ├── RegisterButton     # Conversion CTA
│   │   └── LanguageToggle     # EN/ID switcher
│   ├── assets/            # Images, icons, SVGs
│   ├── utils/             # Animation configs
│   └── translations.js   # Bilingual strings
├── public/                # Static files
└── dist/                  # Production build → cPanel

Why React SPA?

The landing page is purely presentational — no user accounts, no database. A React SPA with Vite gives fast page loads, smooth Framer Motion animations, and instant language switching without server round-trips. The static build deploys to shared hosting via cPanel with zero server requirements.

Why Framer Motion?

Scroll-triggered animations, staggered element reveals, and parallax effects create the premium feel expected for a government-backed event. Framer Motion handles all animation orchestration declaratively.

Key Features

Event Showcase

• Countdown timer — Live countdown to race day (December 14, 2025)
• Prize breakdown — Structured prize listings for 5K and 10K national categories
• Route map — Detailed 10K course through Jakarta’s Epicentrum area
• Race day schedule — Timeline from 04:30 warm-up to 07:30 finish

Conversion Optimization

• Registration CTA — Prominent register buttons linking to Sportsplits and Satufoto
• GTM integration — Google Tag Manager for flexible event tracking
• Meta Pixel — Facebook/Instagram ad conversion tracking
• TikTok Pixel — TikTok ad campaign performance tracking

Multi-Language Support

• Indonesian and English — Toggle between languages with flag buttons
• Translation file — All strings in a centralized translations.js file
• Instant switching — No page reload, React state-driven

Animated UX

• Scroll-driven sections — Elements animate in as users scroll down
• Parallax effects — Background layers move at different speeds
• Staggered reveals — Cards and text blocks appear sequentially
• Responsive design — Mobile-first layout for on-the-go registration

What I Learned

• Animation libraries need performance budgets — Framer Motion is powerful but heavy. I learned to use will-change and transform properties to keep 60fps on mobile devices.
• Multi-language is more than translation — Date formats, number formatting, and even layout direction need consideration. Keeping all strings in a single file made maintenance easy.
• Conversion tracking integration is tricky — Three different pixel/tag systems (GTM, Meta, TikTok) all need to fire on the right events without blocking page load. Deferred script loading and async initialization were essential.
• Static hosting is underrated for event pages — A Vite static build deployed to shared cPanel hosting handles thousands of concurrent visitors with zero server cost.

For more on building conversion-optimized web experiences, see my community management PWA — another project focused on real users with offline support and push notifications.