Depends on #364. Do not start until the /builders route exists.
Context
Listing pages in the main Boundless app open with a banner above the filter rail row. We want /builders to mimick that. Per CONTRIBUTING, port it from boundless-platform rather than inventing one.
Reference implementation
Every page in the (discover) group of boundless-platform uses this structure:
<div className='flex flex-col gap-8 pt-4 pb-16'>
<ProfileBanner />
<StatsBanner title={...} subtitle={...} stats={...} />
<div className='flex gap-6'>{/* filter rail + grid */}</div>
</div>
Three rules to preserve:
- The banner is a sibling of the rail row, not a child of the grid column. It spans the full content width, including the space the rail later occupies.
- Spacing comes from the parent container's
gap-8, not from the banner itself.
- The banner does the page heading's job.
DiscoverView in the main app still declares heading and subtext props but never renders them. The StatsBanner title carries that role.
Port StatsBanner from src/features/discover/components/landing/stats-banner.tsx. Its shell is rounded-[16px] border border-[#2e3a38] bg-ink with a pointer-events-none teal radial gradient over inset-0.
Do not copy the main app's projects page banner. It is a deliberately empty 280px placeholder box and the code comment there says so. Copy the grants or bounties treatment instead.
Scope
- Port the banner into
components/marketing/ or components/discover/
- Place it as the first child of the builders view container
- Use tokens from
design.md instead of hard-coded hex wherever a token exists
- Keep the stat cells configurable through props
Open decisions for the maintainer
- Copy. The banner needs a title and subtitle. The main app uses "Earn by Building the Future". This app is display-only, so that copy does not fit. Please supply the wording.
- Stats source. No endpoint is confirmed to supply builder-directory stat figures. Options are to reuse the counts
StatsStrip already fetches, to use the directory's own total, or to leave the cells out for now. Please confirm which.
- Header. Decide whether the banner replaces
DiscoverHeader on this page or sits above it. The main app replaces it.
Do not invent figures. If no source is confirmed, render the banner without stat cells and say so in the PR.
Acceptance criteria
Depends on #364. Do not start until the
/buildersroute exists.Context
Listing pages in the main Boundless app open with a banner above the filter rail row. We want
/buildersto mimick that. Per CONTRIBUTING, port it fromboundless-platformrather than inventing one.Reference implementation
Every page in the
(discover)group ofboundless-platformuses this structure:Three rules to preserve:
gap-8, not from the banner itself.DiscoverViewin the main app still declaresheadingandsubtextprops but never renders them. TheStatsBannertitle carries that role.Port
StatsBannerfromsrc/features/discover/components/landing/stats-banner.tsx. Its shell isrounded-[16px] border border-[#2e3a38] bg-inkwith apointer-events-noneteal radial gradient overinset-0.Do not copy the main app's projects page banner. It is a deliberately empty 280px placeholder box and the code comment there says so. Copy the grants or bounties treatment instead.
Scope
components/marketing/orcomponents/discover/design.mdinstead of hard-coded hex wherever a token existsOpen decisions for the maintainer
StatsStripalready fetches, to use the directory's own total, or to leave the cells out for now. Please confirm which.DiscoverHeaderon this page or sits above it. The main app replaces it.Do not invent figures. If no source is confirmed, render the banner without stat cells and say so in the PR.
Acceptance criteria
npm run lint,npx tsc --noEmit, andnpm run buildpass