Skip to content

Add the banner to the top of the builders page #365

Description

@Benjtalkshow

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:

  1. 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.
  2. Spacing comes from the parent container's gap-8, not from the banner itself.
  3. 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

  • The banner sits above the filter rail row and spans the full content width
  • Layout matches the main app at mobile, tablet, and desktop widths
  • No invented statistics
  • npm run lint, npx tsc --noEmit, and npm run build pass
  • The PR includes a screenshot of the page

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions