Beranda redesign v2 — "Dokumen resmi, disederhanakan"
Date: 2026-07-10 · Scope: apps/public-web /beranda only (presentation + one
functional upgrade). No API, auth, boundary, or deploy-script changes.
Brief
Re-design the public landing (/beranda) to be modern, clean, polished, and animated
(GSAP), for a masyarakat-umum audience, Bahasa Indonesia. Client: Ditjen AHU,
Kementerian Hukum RI. The page's single job: get a first-time citizen visitor to ask
their first question (route to /tanya).
Direction
The current page is the "Kertas broadsheet" look (white, hairline rules, maroon accent,
zero motion). v2 moves to an official-document world: Kemenkumham navy + gold,
security-print (guilloché) line art, and a cited-answer demo as the hero's signature
moment — because the product's differentiator is jawaban dengan kutipan sumber resmi.
Tokens (landing-scoped, .lv2-* classes; do NOT touch app-wide --bg/--ink tokens)
| Token | Value | Use |
|---|---|---|
--lv2-navy-950 |
#081120 |
hero + footer background |
--lv2-navy-900 |
#0D1B2E |
cards on dark, nav solid state |
--lv2-navy-800 |
#16283F |
borders/elevated surfaces on dark |
--lv2-ink |
#101E31 |
text on light |
--lv2-ink-soft |
#41506A |
secondary text on light |
--lv2-paper |
#F4F6F9 |
light section background (cool paper) |
--lv2-gold |
#E4BE54 |
CTA + accents on dark |
--lv2-gold-deep |
#8A6B1F |
gold text/accents on light (AA) |
--lv2-line |
#DFE5EC / rgba(255,255,255,.10) |
hairlines light / dark |
Rationale: navy + gold is the ministry's own identity (biru tua + emas Pengayoman) —
authority the audience already recognizes — and was independently confirmed by the
design-system search ("Authority navy + trust gold"). Explicitly avoided: AI
purple/pink gradients, cream+serif template look.
Type
- Display + body: Plus Jakarta Sans (Tokotype — Indonesian foundry; the capital's
own typeface). Display 800 tight-tracked; body 400/500 at 16–17px. - Utility/citation: Geist Mono (already loaded) for citation chips, counters, labels.
- Loaded via
next/fontas--font-jakarta; only landing CSS consumes it.
Signature element
Hero right card = contoh percakapan (labeled honestly as an example): a citizen
question types in, the answer reveals, a mono citation chip (PP 21/2021 · Pasal 32)
pops, then a gold "Sumber resmi ✓" stamp rotates in — security-print framing, loop
through 3 real example QA pairs. Reduced-motion: static completed state.
Structure (all existing anchors + routes preserved)
- Nav — transparent over hero → solid navy on scroll. Same links (
#cara-kerja,
#pertanyaan-populer,#untuk-pegawai, disabledTentang), goldMulaiCTA. - Hero (navy) — badge
Asisten resmi…, H1 "Layanan hukum umum, kini tinggal
tanya.", sub with the honesty line, functional composer input (submit →
/tanya?seed=…), topic chips, demo card, guilloché arcs background. - Stat band (bottom of hero, on navy) — 4 counters (existing fixture data),
GSAP count-up on scroll, gold numerals. - Pertanyaan Populer (light) — 6 fixture questions as 3×2 icon cards
(lucide per tag), hover lift, stagger reveal. Click →/tanya?seed=. - Cara kerja (light) — 3 numbered steps (true sequence), scroll-drawn connector.
- Perlu Anda ketahui — honesty band: gratis/tanpa akun, kutipan pasal, menolak
bila keyakinan rendah, bukan pengganti notaris/ahli hukum. - Staff CTA — slim outlined band, same
STAFF_LOGIN_URL. - Footer — navy bookend, same link set incl. placeholder pattern.
Motion spec (GSAP 3.15 + ScrollTrigger, all inside gsap.matchMedia guarding
prefers-reduced-motion: reduce)
- Load timeline: badge → H1 line rise (stagger 0.09) → sub/composer/chips → demo card
in → demo loop (repeat, 3 QA pairs). - ScrollTrigger: section reveals (y 24→0, once), counters, connector line scrub,
nav solid-state toggle. - Transform/opacity only; 150–400ms micro, demo loop is the one long choreography.
Quality floor
375px responsive, visible :focus-visible rings, AA contrast both on navy and paper,
44px touch targets, cursor-pointer, no emoji icons (lucide SVG), reduced-motion
renders full static content.
Non-goals
- No changes to
/tanya, shared@ahu/ui, app-wide tokens, or palette system. - Fixture data stays fixture (phase-2 telemetry APIs unchanged).
- No new routes;
Tentangstays a placeholder.