[landing-page][Section] Top builders row

[Benjtalkshow]

Context

The landing page showcases the ecosystem's top builders as a curated row (not the full filterable directory, which lives on /builders). This is the star section of the page.

Depends on: [landing-page][Setup] API client, TanStack Query, and environment config and [landing-page][Component] BuilderCard.

What to build

A TopBuilders section that:

• Fetches the top builders via a TanStack Query hook calling apiFetch -> GET /api/leaderboard?limit=8 (base URL https://stage-api.boundlessfi.xyz, set via NEXT_PUBLIC_API_URL). Supported params: limit, page, timeframe, tier. Inspect the live response and map its fields into BuilderCardView. Do not assume field names.
• Renders a SectionHeading ("Top builders" + a short subheading) and a responsive grid of BuilderCards.
• Handles loading (render BuilderCardSkeleton) and empty states.
• Includes a "View all builders" link to /builders.

Where files go

• components/landing/top-builders.tsx (new components/landing/ folder for landing-specific sections).
• If a leaderboard-to-view-model mapper is needed, put it beside it: components/landing/to-builder-card.ts.

How Boundless builds this (reference)

On the Boundless explore page (private repo), curated content sits inside a Section wrapper (capped at max-w-page with consistent vertical rhythm) topped by a SectionHeading (eyebrow + title + description), with cards in a responsive grid and Skeleton placeholders while loading. These exact primitives are already vendored in this repo. Reuse them, do not rebuild:

• components/marketing/section.tsx -> Section, SectionHeading, Eyebrow
• components/marketing/reveal.tsx -> Reveal (optional scroll-in wrapper, as the platform uses)
• components/cards/builder-card.tsx -> the card (from its own issue)
• components/ui/skeleton.tsx -> loading state

Design system (must follow)

• Reuse the section primitives above. Do not build a new section wrapper.
• Use BuilderCard as-is. Do not restyle it here.
• Follow design.md for spacing and type. Content caps at max-w-page.

Out of scope

No filters, pagination, or sort UI (those belong to the /builders directory). Fixed curated row only.

Acceptance criteria

• Section fetches GET /api/leaderboard?limit=8 via a Query hook and renders BuilderCards.
• Loading and empty states handled.
• "View all builders" links to /builders.
• Uses Section / SectionHeading from components/marketing/section.tsx (not a new wrapper).
• npm run lint and npm run build pass.
• Screenshot attached to the PR.

References (in this repo)

• components/marketing/section.tsx, components/marketing/reveal.tsx.
• components/cards/builder-card.tsx (from its issue), components/cards/opportunity-card.tsx (grid pattern).
• lib/api/client.ts (from the setup issue), ENDPOINTS.md, design.md.

[linear]

BOU-328

[coderabbitai]

🔗 Related PRs

#315 - feat: use badge pill for hero eyebrow [merged]
#316 - docs: add API endpoint map for the builders app [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[Mayorlay]

@Mayorlay has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello please This issue aligns well with my experience. I can work on it and submit a polished PR for review

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Mayorlay to this issue.

[LiegeFx]

@LiegeFx has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello, I’ve read and understood the issue requirements. I’m confident I can complete it successfully and would appreciate the opportunity to work on it.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @LiegeFx to this issue.

[felladaniel36-hash]

@felladaniel36-hash has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I'd like to claim this issue. I have reviewed the details and can begin working on a fix right away. Please assign it to me if it's still available. Thanks!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @felladaniel36-hash to this issue.

[Kappa16]

@Kappa16 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Please maintainer..I can handle this professionally and make sure this issue is closed ASAP WITHOUT ERRORS.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Kappa16 to this issue.

[shadrackmanfred]

@shadrackmanfred has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello maintainer please I will like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @shadrackmanfred to this issue.

[chigozzdevv]

@chigozzdevv has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello chief, good evening.

I’d like to take on this issue. My approach:

1. Inspect the live leaderboard response and map its actual fields into BuilderCardView.

2. Build the responsive TopBuilders grid using the existing Section, SectionHeading, and BuilderCard components.

3. Add skeleton loading, empty-state handling, and the “View all builders” link.

4. Run lint and build checks, then attach a screenshot to the PR.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @chigozzdevv to this issue.

[drips-wave]

Congratulations, @chigozzdevv! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @chigozzdevv: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊