think
16px
820px
← all files

Beranda redesign v3 — completion notes

Date: 2026-07-15 · Commit: 92118fd · Deployed: staging
(https://x056.ahu-demo.chatbot-neo.val.id/beranda), verified live.
Spec: specs/2026-07-15-beranda-redesign-v3-design.md ·
Plan: plans/2026-07-15-beranda-redesign-v3-plan.md

What shipped

"Kertas, diperbesar" — v1's kertas language (paper #FCFBF9, ink, warm
hairlines, deep maroon #7E2F26, Geist + Geist Mono) executed at the fj-tech
reference's editorial scale, replacing the v2 navy+gold look Efran rejected:

  • Hero: stacked 3-line display H1 (clamp(52px…118px), middle line muted,
    "AHU." in maroon) over faint registry columns with scroll parallax; working
    composer seeding /tanya; topic chips; mono kicker chip.
  • Fact strip: hairline-columned band (Gratis · 24 jam · 2.418 peraturan ·
    Berkutipan) — facts, no counters.
  • Cara kerja (signature): the document demo card (typing question →
    thinking → streaming answer → mono citation chip → red cap-dinas
    "SUMBER RESMI" stamp) drives the three numbered steps in sync via an
    onPhase callback; card arrives with a clip-path wipe + perspective settle,
    crop-mark corners outside the sheet.
  • Cakupan layanan: six editorial index rows (mono index, display titles,
    hairlines, maroon hover) seeding /tanya.
  • Pertanyaan populer: fixture cards (mono tag + question + arrow).
  • Perlu Anda ketahui: the page's one dark (ink) full-bleed panel.
  • Closing CTA + paper footer (same verified links).
  • NORDE devices (from the pasted aura.build template): film grain overlay,
    crop marks, clip reveal, accent-tick section rules, parallax. Custom cursor
    and loader deliberately skipped (public-service usability).
  • Fonts: paste's Kanit/Nunito line contradicted its own template
    (Cormorant/Inter Tight); kept v1's Geist per "learn from v1".

Verification

  • pnpm check green (236 tests incl. isolation guards; conventions OK).
  • Prod build screenshot pass at 1440 & 390 (wheel-scroll folds); dev-server
    screenshots are misleading — see gotchas.
  • Staging deployed via build-and-ship (2 passes to 10-min cap + manual
    finish: last docker save, scp ×4, remote docker load), tar-not-rsync
    infra sync, 4 stacks up, /api/health ok, live URL screenshot-verified.

Gotchas for next time

  • Turbopack panics in-container ("Next.js package not found"): run
    node_modules/.bin/next dev -p 3501 (webpack) instead of the turbopack
    dev script.
  • Never judge GSAP reveals on the dev server: StrictMode double-mount +
    mm.revert() leaves .from() reveals in a half-initialized state (inline
    visibility:hidden; opacity:0, transform cleared). Production builds are
    correct. Verify with next build && next start.
  • CSS transitions must not share properties with GSAP tweens: the step
    dimming was moved from a class transition to gsap.to inline opacity so it
    can't fight the container reveal; card hover transitions on transform are
    tolerable only because reveals clearProps: "transform" on complete.
  • Streaming text must not reflow: the demo answer area reserves the
    longest PAIRS answer via an invisible strut under an absolutely positioned
    stream target.
  • The beranda-v2/ untracked scratch dirs (app + components) from the v2
    session are still present and now stale; left untouched — ask Efran before
    deleting. They compile (route /beranda-v2 still builds from them).