feat: add Hero component and remove unused CarouselMock

[BIA3IA]

Introduce a Hero component for improved page headers. Remove the unused CarouselMock component from the Home page to clean up the codebase.

[coderabbitai]

Walkthrough

A new shared Hero component is introduced to standardize page headers. The AssociationsPage and CommunityNews component adopt this reusable Hero in place of inline markup. Additionally, responsive grid breakpoint utilities across project card layouts are updated from xl to 1xl for consistency.

Changes

Hero Component and Layout Refactoring

Layer / File(s)	Summary
Hero UI component src/components/ui/hero.tsx	New Hero component accepts title and description string props and renders a centered layout with display-typography heading, gradient text styling, and max-width-constrained paragraph.
Hero adoption in page components src/app/associations/page.tsx, src/components/projects/community-news.tsx	AssociationsPage and CommunityNews import Hero and replace inline header markup with configured <Hero title={...} description={...} /> instances, eliminating duplicated heading and paragraph blocks.
Grid layout responsive breakpoint updates src/components/projects/collection.tsx, src/components/projects/deprecated.tsx	Tailwind grid responsive breakpoint for desktop card columns is updated from xl:grid-cols-4 to 1xl:grid-cols-4 in Collection and Deprecated components; base grid-cols-2 and other utilities remain unchanged.

Possibly related PRs

• PoliNetworkOrg/web#78: Directly modifies CommunityNews by replacing its inline header with the new Hero component.
• PoliNetworkOrg/web#59: Updates home page to render content under the same new Hero component.
• PoliNetworkOrg/web#107: Removes src/components/home/carousel-mock.tsx, the same file deleted in this PR.

Suggested labels

priority: high

🚥 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 accurately summarizes the two main changes: adding a new Hero component and removing the unused CarouselMock component.
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.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

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]

♻️ Duplicate comments (1)

src/components/projects/deprecated.tsx (1)

50-50: ⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Invalid Tailwind breakpoint 1xl breaks responsive layout.

Same issue as in collection.tsx line 86: 1xl is not a standard Tailwind v4 breakpoint. This will prevent the grid from expanding to 4 columns on desktop screens.

🔧 Proposed fix

Option 1: Restore original xl breakpoint (1280px)

-          <div className="grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">
+          <div className="grid xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">

Option 2: Use 2xl breakpoint (1536px)

-          <div className="grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">
+          <div className="grid 2xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">

🤖 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/projects/deprecated.tsx` at line 50, The Tailwind breakpoint
token `1xl` used in the className on the grid in deprecated.tsx (the div with
className "grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6") is
invalid and prevents the grid from expanding; replace `1xl` with a valid
breakpoint such as `xl` (to target 1280px) or `2xl` (to target 1536px) so the
class becomes e.g. `xl:grid-cols-4` or `2xl:grid-cols-4`, preserving the rest of
the classes (`grid-cols-2`, `justify-items-center`, `gap-6`) unchanged.

🧹 Nitpick comments (1)

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

1-1: 💤 Low value

Consider extracting prop types for reusability.

While inline prop types work for simple components, extracting them to a named interface improves documentation and allows the type to be imported if needed elsewhere.

♻️ Optional refactor

+interface HeroProps {
+  title: string
+  description: string
+}
+
-export function Hero({ title, description }: { title: string; description: string }) {
+export function Hero({ title, description }: HeroProps) {

🤖 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/hero.tsx` at line 1, Extract the inline prop type from the
Hero component into a named exported interface (e.g., export interface
HeroProps) and replace the inline annotation in the Hero function signature with
that interface; update any existing uses/imports to reference HeroProps if
needed and ensure the Hero function still accepts the same props ({ title,
description }: HeroProps).

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

Duplicate comments:
In `@src/components/projects/deprecated.tsx`:
- Line 50: The Tailwind breakpoint token `1xl` used in the className on the grid
in deprecated.tsx (the div with className "grid 1xl:grid-cols-4 grid-cols-2
justify-items-center gap-6") is invalid and prevents the grid from expanding;
replace `1xl` with a valid breakpoint such as `xl` (to target 1280px) or `2xl`
(to target 1536px) so the class becomes e.g. `xl:grid-cols-4` or
`2xl:grid-cols-4`, preserving the rest of the classes (`grid-cols-2`,
`justify-items-center`, `gap-6`) unchanged.

---

Nitpick comments:
In `@src/components/ui/hero.tsx`:
- Line 1: Extract the inline prop type from the Hero component into a named
exported interface (e.g., export interface HeroProps) and replace the inline
annotation in the Hero function signature with that interface; update any
existing uses/imports to reference HeroProps if needed and ensure the Hero
function still accepts the same props ({ title, description }: HeroProps).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2c3f8b94-493c-4bea-9c3e-a7a515553ded

📥 Commits

Reviewing files that changed from the base of the PR and between 68e769e and c77ef1d.

📒 Files selected for processing (6)

• src/app/associations/page.tsx
• src/components/home/carousel-mock.tsx
• src/components/projects/collection.tsx
• src/components/projects/community-news.tsx
• src/components/projects/deprecated.tsx
• src/components/ui/hero.tsx

💤 Files with no reviewable changes (1)

• src/components/home/carousel-mock.tsx