feat(landing): add top builders section

[chigozzdevv]

Summary

• fetch the top eight builders with TanStack Query through apiFetch
• map the verified nested leaderboard payload into BuilderCardView
• render responsive cards with loading, empty, and error states
• link the section to the builders directory
• allow the Cloudinary avatar path returned by the live leaderboard

Verification

• npm run lint
• NEXT_PUBLIC_API_URL=https://stage-api.boundlessfi.xyz npm run build
• desktop and mobile visual checks

Runtime note

The staging API currently omits Access-Control-Allow-Origin for the Builders origin. The section handles that request failure, but the backend allowlist must include https://builders.boundlessfi.xyz for live browser data.

Closes #320

Summary by CodeRabbit

• New Features

  • Added a “Top builders” section to the landing page, featuring builder cards and links to detailed profiles.
  • Added loading, empty, and error states for leaderboard data.
  • Added a link to browse all builders.

• Bug Fixes

  • Enabled secure display of remote builder images hosted on Cloudinary.

[vercel]

@chigozzdevv is attempting to deploy a commit to the Threadflow Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@chigozzdevv Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[coderabbitai]

Warning

Review limit reached

@chigozzdevv, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 13 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 157856a1-adc6-4c12-8d54-a6d2f6d20f46

📥 Commits

Reviewing files that changed from the base of the PR and between b0cca82 and c4c41a3.

📒 Files selected for processing (1)

• components/landing/top-builders.tsx

📝 Walkthrough

Walkthrough

Adds a client-side “Top builders” landing section that fetches leaderboard data, maps contributors into builder cards, handles query states, links to /builders, and permits Cloudinary images through Next.js configuration.

Changes

Top builders landing flow

Layer / File(s)	Summary
Leaderboard card contract components/landing/to-builder-card.ts	Defines leaderboard response interfaces and maps entries into BuilderCardView, limiting skills to four and generating builder detail URLs.
Top builders fetch and rendering components/landing/top-builders.tsx	Fetches eight leaderboard entries with React Query and renders cards, loading skeletons, empty state, error state, and the /builders link.
Builder image configuration next.config.ts	Allows remote Cloudinary images under the configured upload path.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• boundlessfi/builders#325: Adds the BuilderCard view model and components consumed by this mapping and rendering flow.
• boundlessfi/builders#328: Implements related landing-page TopBuilders and leaderboard card integration.

Sequence Diagram(s)

sequenceDiagram
  participant LandingPage
  participant TopBuilders
  participant LeaderboardAPI
  participant BuilderCard

  LandingPage->>TopBuilders: render section
  TopBuilders->>LeaderboardAPI: GET /leaderboard?limit=8
  LeaderboardAPI-->>TopBuilders: leaderboard entries
  TopBuilders->>BuilderCard: render mapped contributors

Loading

Poem

A bunny hops where builders shine,
Eight bright cards fall into line.
Tags are trimmed and links take flight,
Cloudinary keeps each portrait bright.
“View all builders!” the rabbit sings—
New leaderboard joy it brings!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding a Top builders landing section.
Linked Issues check	✅ Passed	The changes add the TopBuilders section, leaderboard mapping, loading/empty states, the /builders link, and Cloudinary support required by #320.
Out of Scope Changes check	✅ Passed	The extra Next.js image config supports the leaderboard avatars and stays within the requested landing section scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[chigozzdevv]

Screenshot

Top builders section (desktop)

[chigozzdevv]

Updated screenshot

Top builders section without the optional eyebrow.

[Benjtalkshow]

LGTM!