feat: Add consistent hover effects to all card components (#461)

[mohit200008]

• Add transform/transition/hover classes to Card component
• Add matching hover effects to CardHome component
• Add hover effects to CardEffect component
• Add CSS-in-JS hover styles to MUI cards in ideas page
• Add CSS-in-JS hover styles to MUI cards in projects page

Closes #461

Summary by CodeRabbit

• Style
  • Improved interactive feedback across card components app-wide: cards now use smooth transform-based hover animations (subtle lift, slight scale) and enhanced shadows with consistent transition timing. One area updated to replace a background-color animation with the new transform+shadow interaction for a more polished, responsive feel.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

@mohit200008 is attempting to deploy a commit to the AOSSIE Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Multiple Card components and two pages had Tailwind CSS utility classes added to their root/link wrappers to enable transform, transition, scale, translate, and shadow hover effects. No structural, logic, or public API changes were made.

Changes

Cohort / File(s)	Summary
Card component styling src/components/Card.jsx, src/components/CardEffect.jsx, src/components/CardHome.jsx	Added Tailwind transform/transition utilities (transform, transition, duration-200, ease-out) and hover effects (hover:-translate-y-1, hover:scale-[1.02], hover:shadow-lg) to card wrappers/links. No functional or API changes.
Page card styling src/pages/ideas/index.jsx, src/pages/projects.jsx	Replaced or augmented previous background-color transition with composite transform and box-shadow transitions; added hover lift, slight scale, and increased shadow on cards. No behavioral changes beyond presentation.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Review focus:
  • Verify className strings were concatenated/merged correctly (no accidental removal of existing classes).
  • Confirm hover behavior is accessible and does not disrupt layout (overflow/clipping).
  • Quick visual check across affected pages/components to ensure consistent look.

Poem

🐰
I hop on cards with gentle cheer,
A tiny lift when you draw near,
A shadowed dip, a subtle scale,
I celebrate this fluttered trail —
Soft transforms make interactions dear.

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main objective of adding consistent hover effects to all card components, which is directly supported by the changes in Card.jsx, CardHome.jsx, CardEffect.jsx, and the ideas/projects pages.
Linked Issues check	✅ Passed	The PR successfully implements hover effects across all card components (Card, CardHome, CardEffect, ideas page, and projects page) with consistent styling (transform, transition, hover lift, scale, and shadow) as requested in issue #461.
Out of Scope Changes check	✅ Passed	All changes are focused on adding hover effects to card components and styling adjustments for consistency; no unrelated modifications or out-of-scope changes detected.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 558a88b and 438c074.

📒 Files selected for processing (1)

• src/components/CardEffect.jsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/CardEffect.jsx

---

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]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/components/CardEffect.jsx (1)

5-5: Consider using shadow-lg for consistency.

The hover effect implementation looks good. However, note that shadow-xl is used here while other card components (Card.jsx, CardHome.jsx) use shadow-lg. For visual consistency across the application, consider aligning the shadow size.

🔎 Proposed change for consistency

-        <a className="group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer transform transition duration-200 ease-out hover:-translate-y-1 hover:scale-[1.02] hover:shadow-xl">
+        <a className="group relative block h-[22rem] max-lg:w-72 max-xl:w-60 w-72 cursor-pointer transform transition duration-200 ease-out hover:-translate-y-1 hover:scale-[1.02] hover:shadow-lg">

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dfb8668 and 558a88b.

📒 Files selected for processing (5)

• src/components/Card.jsx
• src/components/CardEffect.jsx
• src/components/CardHome.jsx
• src/pages/ideas/index.jsx
• src/pages/projects.jsx

🔇 Additional comments (4)

src/pages/projects.jsx (1)

46-50: LGTM! Smooth hover interaction added.

The transform and box-shadow transitions provide a polished hover effect. The use of GPU-accelerated transforms ensures smooth performance.

src/components/CardHome.jsx (1)

5-5: LGTM! Consistent hover effect implementation.

The Tailwind transform and transition classes are applied correctly, and the shadow size (shadow-lg) is consistent with other card components.

src/pages/ideas/index.jsx (1)

27-31: LGTM! Consistent with projects page implementation.

The hover effect matches the implementation in projects.jsx, providing a cohesive user experience across card components.

src/components/Card.jsx (1)

19-19: LGTM! Clean implementation with proper class merging.

The hover effects are correctly applied using clsx to merge with any additional classes passed via props, ensuring flexibility while maintaining the consistent hover behavior.