think
16px
820px
← all files

Completion notes — Beranda redesign v2

Spec: specs/2026-07-10-beranda-redesign-v2-design.md · Plan:
plans/2026-07-10-beranda-redesign-v2-plan.md

What shipped

/beranda rebuilt as the "Dokumen resmi, disederhanakan" landing: navy+gold
(Kemenkumham identity), Plus Jakarta Sans display/body (--font-jakarta, additive
next/font var), GSAP 3.15 motion (intro timeline, looping cited-answer demo, count-up
stats, scroll reveals, dashed process-line draw), functional hero composer that seeds
/tanya, honesty panel (TrustNotes, new). All v1 anchors/routes/fixtures preserved.
Old beranda CSS blocks removed from globals.css (.landing-*, .hero-card,
.popular-*, .public-footer — verified unreferenced). /tanya visually unchanged
(screenshot-verified).

Implementation notes worth keeping

  • Motion guard: all GSAP runs inside gsap.matchMedia("(prefers-reduced-motion: no-preference)") via useLandingMotion (useLandingGsap.ts), which uses a
    pre-paint isomorphic layout effect so intro timelines apply initial hidden states
    before first client paint. Static SSR markup is the completed state (HeroDemo
    renders PAIRS[0] finished), so no-JS/reduced-motion visitors get the full page.
  • Nav solid-state is a plain scroll listener, not GSAP — it's a legibility
    requirement and must work under reduced motion.
  • SVG gotchas hit: an <svg> with position:absolute; left+right keeps its
    300px intrinsic width — size it explicitly. Drawing a dashed line via
    stroke-dashoffset destroys the dash pattern; use a clip-path: inset() wipe.
  • Playwright fullPage screenshots don't scroll, so ScrollTrigger reveals never
    fire → sections look blank. Scroll through the page first (see the session's
    shot-scroll pattern) or emulate reducedMotion: 'reduce' to capture the static
    render.
  • PJS ExtraBold fit: headline lines were sized by measurement (~0.55em/char);
    "Layanan AHU," / "kini tinggal tanya." fits the 1.08fr column at 66px max.
  • pnpm check / build-and-ship.sh call bare pnpm; shim corepack pnpm onto
    PATH in this container.

Round 2 (same day, commit 78c11b2) — public-service register

Feedback-driven revision: /beranda is an enterprise/public-service page, not a
sales page.

  • Removed: Tentang nav item (no about page planned), the staff hand-off
    section + staff-url.ts (staff use their surface's own URL; the isolation test
    now guards that NO staff link appears on the public surface), the count-up stat
    strip + public-stats.ts fixture, and the per-question ask-counts.
  • Added: InfoStrip (product facts on the hero band — no numbers) and
    ServiceScope ("Cakupan layanan", #cakupan-layanan): six AHU service domains,
    each seeding /tanya.
  • Nav anchors fixed: plain same-page #hash anchors (the old /#… form
    round-tripped through the root redirect = full reload), CSS
    scroll-behavior: smooth scoped via html:has(.lv2-page) (auto under
    reduced-motion) + scroll-margin-top: 92px so headings clear the fixed nav.
  • Footer: real official links, all verified live 2026-07-10 — ahu.go.id,
    apostille.ahu.go.id, kemenkum.go.id, portal.ahu.go.id, jdih.kemenkum.go.id.
  • Naming: ministry is "Kementerian Hukum" (Kemenkum), not Kemenkumham.
    Historical legal citations (e.g. "Permenkumham 6/2022") keep their issued names.

Follow-ups

  • Demo answers are curated sample content (labeled "contoh percakapan" + "bukan
    nasihat hukum"); if regulations change, update HeroDemo.tsx PAIRS.
  • Popular-questions fixture unchanged — phase-2 telemetry endpoint still the plan.
  • Remaining footer placeholders: the Bantuan column + Kebijakan Privasi.