feat(landing): add featured projects section

[chigozzdevv]

Summary

• fetch featured projects with TanStack Query through apiFetch
• map project data into OpportunityCardView and render the existing cards
• handle loading, error, and empty states with a link to /projects

Verification

• npm run lint
• NEXT_PUBLIC_API_URL=https://stage-api.boundlessfi.xyz npm run build

Closes #321

Summary by CodeRabbit

• New Features
  • Added a featured projects section to the landing page.
  • Displays project cards in a responsive grid with status, participation, and project details.
  • Added loading, error, and empty-state messaging.
  • Added a “Browse all projects” link for exploring the full project directory.

[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: 47 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: 44a42720-1eb6-4220-aa7b-989fffe65ff4

📥 Commits

Reviewing files that changed from the base of the PR and between bbf7828 and 7c4c9ee.

📒 Files selected for processing (3)

• components/cards/opportunity-card.tsx
• components/cards/types.ts
• components/landing/to-project-card.ts

📝 Walkthrough

Walkthrough

Adds a FeaturedProjects landing section that fetches featured projects, maps DTOs into opportunity cards, and renders loading, error, empty, and populated states with a link to /projects.

Changes

Featured Projects

Layer / File(s)	Summary
Project DTO mapping components/landing/to-project-card.ts	Defines project DTO contracts and maps status, origin, participants, defaults, and detail URLs into OpportunityCardView values.
Featured project fetching and rendering components/landing/featured-projects.tsx	Adds the React Query fetch hook, loading skeletons, error and empty states, responsive project cards, and the “Browse all projects” link.

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

Sequence Diagram(s)

sequenceDiagram
  participant FeaturedProjects
  participant useFeaturedProjects
  participant apiFetch
  participant OpportunityCard
  FeaturedProjects->>useFeaturedProjects: request featured projects
  useFeaturedProjects->>apiFetch: GET /projects/featured
  apiFetch-->>useFeaturedProjects: paginated project data
  useFeaturedProjects-->>FeaturedProjects: query state and projects
  FeaturedProjects->>OpportunityCard: render mapped project cards

Loading

Possibly related PRs

• boundlessfi/builders#328: Overlaps with the featured projects section, fetch, and project-card mapping work.

Poem

A rabbit hops through cards so bright,
Fetching projects into sight.
Skeletons wait, then cards appear,
Empty states keep pathways clear.
To /projects, we gladly leap—
Featured rows for folks to peek!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	The summary covers fetching featured projects, mapping to OpportunityCardView, loading/empty states, and the /projects link, but omits Section/SectionHeading details.	Confirm the implementation uses Section, SectionHeading, and OpportunityCardSkeleton as required, or update the summary with those details.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title is concise and accurately summarizes the featured projects landing-page change.
Out of Scope Changes check	✅ Passed	The changes stay focused on the featured projects landing section and mapper, with no unrelated functionality introduced.
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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@components/landing/to-project-card.ts`:
- Around line 68-72: Update the featured project data passed to OpportunityCard
so reward and countdown fields use actual API values instead of fabricated empty
strings and zero values. If the API does not provide them, make the
corresponding fields optional and ensure OpportunityCard hides the unavailable
rows rather than rendering placeholders.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b1c56ebc-0050-4310-a2d4-6fa3a3ab6e0f

📥 Commits

Reviewing files that changed from the base of the PR and between 840f177 and bbf7828.

📒 Files selected for processing (2)

• components/landing/featured-projects.tsx
• components/landing/to-project-card.ts