Integrate @measured/puck (MIT, self-hosted, no licensing cost) as the page composition engine for group profile custom pages.
Install: npm install @measured/puck
Two modes of use:
- Editor (admin only, desktop only) — full Puck drag-and-drop UI embedded within /en/business/manage/profile and /en/chapter/manage/profile. Opened via "Edit page" button per custom nav page. Saves JSON to GroupPage.puckPageData[pageKey] via PATCH /api/groups/[id]/page.
- 2. Renderer (public, server-side) — @measured/puck/rsc renders stored Puck JSON as static React on the public profile page. No Puck JS shipped to visitors.
Block library — define in src/lib/puck/config.ts, scoped to BikerBase design system (Ruby primary hsl(0 69% 36%), Inter font, Tailwind tokens). Initial blocks:
- Hero — headline, subheadline, background image, CTA button
- - Features — icon + title + body, up to 6 items, 2-3 column grid
- - Two-column — left/right text + image
- - CTA — headline, body, button
- - Testimonials — quote, author, star rating, up to 4 items
- - Gallery — image grid, up to 12 images
- - Text — rich text block (plate editor embedded)
Tier gating:
- Basic tier (groupPageBuilder quota = false): template pre-loaded, Puck editor locked — only content-editable text fields shown, no block reordering or adding
- - Premium tier (groupPageBuilder quota = true): full Puck drag-and-drop unlocked
- - Gate checked via existing permission quota system, not hardcoded