feat: Add Projects component

[BIA3IA]

Introduce a new Projects component to showcase featured projects.

Refactor existing components for improved structure and styling.

[coderabbitai]

Warning

Rate limit exceeded

@toto04 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 16 minutes and 30 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c7fbb981-b87b-489a-8758-e6831c94898d

📥 Commits

Reviewing files that changed from the base of the PR and between 4d877c6 and fd89784.

📒 Files selected for processing (1)

• src/app/page.tsx

Walkthrough

This PR adds a new Projects section to the home page with a responsive carousel component. The carousel UI component provides Embla-based slide navigation with keyboard support and dot pagination. CardCaption is extended to accept rich content. The Projects section uses both components to display featured projects with responsive layouts. The home page is updated to integrate the new section with adjusted spacing.

Changes

Projects Section with Carousel UI

Layer / File(s)	Summary
Carousel UI component src/components/ui/carousel.tsx	Defines CarouselApi, Carousel, CarouselContent, CarouselItem, and CarouselDots components using embla-carousel-react. Manages Embla initialization, scroll state, keyboard navigation via arrow keys, and exposes optional setApi callback. Uses React context to share refs and navigation state with subcomponents.
CardCaption enrichment for rich content src/components/card-caption.tsx	Extends CardCaption to accept ReactNode instead of only string, adds optional className prop for the root Card, and conditionally wraps string captions in <p> while rendering non-string nodes directly.
Projects section component src/components/home/projects.tsx	Defines Projects component with featured project data. Renders responsive "15+ Projects" section with static CardCaption grid on desktop/tablet and Carousel with CarouselItem slides and CarouselDots pagination on mobile, plus a primary call-to-action button.
Home page layout integration src/app/page.tsx, src/components/home/hero.tsx, src/components/home/materials.tsx, package.json	Imports and inserts Projects component into home page between Materials and AboutUs. Updates Hero section top padding from pt-24 to pt-67 and removes sm:pt-67. Changes Materials section padding from sm:py-28 to universal py-28. Adds embla-carousel-react@^8.6.0 dependency.

Possibly related PRs

• PoliNetworkOrg/web#42: Added Hero component and initially structured src/app/page.tsx layout.
• PoliNetworkOrg/web#57: Previously modified Hero section layout and padding classes.
• PoliNetworkOrg/web#102: Modified Materials section responsive layout and styling.

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: Add Projects component' is fully related to the primary change. The PR's main objective is introducing a new Projects component, and the changeset includes the new component implementation plus supporting infrastructure (carousel, updated CardCaption, routing changes).
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

src/components/ui/carousel.tsx (1)

150-161: ⚡ Quick win

Consider using a more appropriate element than <fieldset> for carousel items.

The <fieldset> element is semantically intended for grouping form controls with a <legend>. For carousel slides, a <div> is more semantically appropriate. If the carousel structure uses a list pattern, consider <li> within a <ul> parent.

♻️ Proposed refactor to use div

-    <fieldset
+    <div
       aria-roledescription="slide"
       data-slot="carousel-item"
       className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
       {...props}
     />

🤖 Prompt for 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.

In `@src/components/ui/carousel.tsx` around lines 150 - 161, The CarouselItem
component currently renders a <fieldset>, which is semantically incorrect for
slides; change the element returned by the CarouselItem function to a
semantically appropriate container (e.g., <div> or <li> if used inside a list)
while preserving attributes: keep aria-roledescription="slide",
data-slot="carousel-item", className computed via cn(...) and spread {...props};
update any TypeScript props typing from React.ComponentProps<"fieldset"> to
React.ComponentProps<"div"> (or "li") and ensure useCarousel() usage and class
composition remain unchanged.

🤖 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.

Nitpick comments:
In `@src/components/ui/carousel.tsx`:
- Around line 150-161: The CarouselItem component currently renders a
<fieldset>, which is semantically incorrect for slides; change the element
returned by the CarouselItem function to a semantically appropriate container
(e.g., <div> or <li> if used inside a list) while preserving attributes: keep
aria-roledescription="slide", data-slot="carousel-item", className computed via
cn(...) and spread {...props}; update any TypeScript props typing from
React.ComponentProps<"fieldset"> to React.ComponentProps<"div"> (or "li") and
ensure useCarousel() usage and class composition remain unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c4cca3b5-082e-48eb-bcf2-c16637b7f563

📥 Commits

Reviewing files that changed from the base of the PR and between f34cf16 and 4d877c6.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (7)

• package.json
• src/app/page.tsx
• src/components/card-caption.tsx
• src/components/home/hero.tsx
• src/components/home/materials.tsx
• src/components/home/projects.tsx
• src/components/ui/carousel.tsx