Beranda redesign v3 — implementation plan

Spec: ../specs/2026-07-15-beranda-redesign-v3-design.md

Steps

1. Rewrite apps/public-web/src/app/beranda/landing.css as the lv3 kertas
   sheet: --lv3-* tokens, nav, hero + fact strip, demo/steps, scope rows,
   popular cards, dark trust panel, closing CTA, footer, responsive + reduced
   motion. Delete every lv2- rule (page and components swap in the same
   commit, so no mixed state ships).
2. Rework components in src/components/beranda/ (same filenames, lv3
   classes): PublicTopNav, Hero (stacked H1 + composer + chips + hairline
   grid bg), InfoStrip → fact strip, HowItWorks (steps column, exports step
   ids), HeroDemo → document card + step-sync callbacks (rendered inside the
   HowItWorks section now), ServiceScope (index rows), PopularQuestions
   (quiet cards), TrustNotes (dark panel), PublicFooter (paper). Keep
   useLandingGsap.ts as-is (infrastructure).
3. page.tsx: new section order (Hero → FactStrip → CaraKerja(demo) →
   Cakupan → Populer → Trust → ClosingCta → Footer), updated doc comment,
   metadata unchanged.
4. Verify locally: corepack pnpm --filter public-web dev in-container,
   screenshot desktop 1440 + mobile 390 folds, iterate on polish (type scale,
   spacing, hairlines, demo timing). Kill the dev server after.
5. pnpm check (typecheck + suites + conventions — isolation tests must
   stay green).
6. Ship: build-and-ship.sh → deploy-staging.sh with the known
   workarounds (pnpm shim, multi-pass build, tar-not-rsync), verify
   https://x056.ahu-demo.chatbot-neo.val.id/beranda, screenshot.
7. Completion notes + upload rendered docs, update memory.

Risks

• Playwright fullPage shots don't fire ScrollTrigger → scroll-step screenshots
  (wheelshot) or reduced-motion emulation for full-page verification.
• Demo/step sync adds a callback surface between HeroDemo and HowItWorks —
  keep it a plain onPhase(index) prop, no context.
• Build minutes: docker build may need multiple passes (10-min cap).