Live at myanmargoal.com

MyanmarGoal Landing

The bilingual marketing site that turns football fans into installs.

Role: Frontend Developer & Designer
Timeline: Jun 2026– Jun 2026 · eTrade Myanmar
Platforms: Web

The public marketing site for Myanmar Goal — a bilingual (English / Burmese) Next.js 16 landing page built to turn football fans into app installs. Server-rendered for speed and SEO, it showcases live scores, daily news, the monthly quiz and subscription plans with multiple payment options, then routes visitors to the App Store, Google Play or the web app.

I designed and built it end to end: a Tailwind v4 design system with a synchronized light/dark theme, a custom EN/MM localization layer, and a pricing section driven entirely from JSON so plans and payment options can change without a redeploy — all shipped as a lean standalone Docker build.

Visit website Web app

Under the hood

A small, fast, content-driven frontend — everything server-rendered, no heavy client framework.

Next.js App Router site

Frontend · SSR

Server-rendered marketing pages (home, download, privacy, terms) composed from section components — hero, features, live scores, news, quiz, pricing, download and FAQ.

Next.js

React

TypeScript

Design system & theming

Tailwind v4 · theming

CSS-variable design tokens with a synchronized light/dark theme via next-themes, custom fonts (Archivo, Inter, Noto Sans Myanmar) and lucide / react-icons.

Tailwind next-themes

Content, i18n & pricing

Bilingual · JSON-driven

A custom EN/MM localization layer (a data-locale attribute + a Txt component, no i18n library) and a typed pricing service that renders subscription plans and payment options straight from a JSON file.

TypeScript

Features

Feature highlights

A scannable grid of what the app does — real-time scores, match-event alerts, daily news & video, and following leagues & teams.

Live scores preview

Device mockups of the match centre — standings, line-ups and head-to-head — with copy that sells the real-time experience.

News & video showcase

Highlights the Burmese-language editorial: match reviews, previews, predictions and video, produced for fans at home.

Multiple payment options

Daily / weekly / monthly plans with MPT, ATOM and U9 billing tabs — rendered dynamically from JSON, not hard-coded.

Cross-platform download

The conversion CTA: App Store, Google Play and web-app links with a free-to-start message to drive installs.

Tech Stack

Framework

Next.js

React

TypeScript

Styling & UI

Tailwind lucide-react react-icons

Theming & i18n

next-themes EN/MM i18n

Build & Infra

Docker

CI/CD

What I owned

• Designed and built the bilingual marketing site end to end in Next.js 16 (App Router, SSR) to drive iOS/Android installs.
• Created a Tailwind v4 design system with CSS-variable tokens and a synchronized light/dark theme via next-themes.
• Implemented a custom EN/MM localization layer (data-locale + Txt) with no i18n dependency, plus Myanmar/Latin font handling.
• Made subscription pricing and payment options data-driven from JSON so plans update without a redeploy.
• Shipped a standalone Docker build with an AVIF/WebP image pipeline and apple-app-site-association deep links.