FIX: improved hover animation in card effect component (#475)

[zaidkhan-bit]

Improves the hover effect on card effect component for smoother animation and better visual feedback. This fixes #475.

Summary by CodeRabbit

• New Features

  • Cards now flip on click (and via Enter/Space) to reveal back content with smooth transitions and hover affordances.
  • Front always shows logo and title; back overlays when flipped for clearer interaction.
  • Cards can act as links via an optional href while preserving image alt text and responsive behavior.

• Refactor

  • Card updated to use internal state for explicit, click-driven flip control.

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

[vercel]

@zaidkhan-bit is attempting to deploy a commit to the AOSSIE Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Warning

Rate limit exceeded

@zaidkhan-bit has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 17 minutes and 53 seconds before requesting another review.

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

📥 Commits

Reviewing files that changed from the base of the PR and between d1870c3 and 48ce32f.

📒 Files selected for processing (1)

• src/components/CardEffect.jsx (1 hunks)

Walkthrough

CardEffect was converted to a click-driven, flippable card using local state (useState). The component now accepts an optional href prop and renders a wrapper as either an anchor or a div. Front (logo + heading) and back (content) faces are layered and toggled via isFlipped with opacity and transform transitions.

Changes

Cohort / File(s)

Summary

CardEffect component (single-file behavioral change) src/components/CardEffect.jsx

Added useState and local isFlipped state; updated signature to CardEffect({ heading, content, logo, href }); wrapper now renders as <a> when href provided or as an interactive <div> otherwise; added click and keyboard handlers to toggle flip; refactored markup into front (logo + heading) and back (content) layered faces with conditional opacity/transform classes; preserved next/image usage and existing layout classes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Check keyboard accessibility for non-anchor wrapper (role, tabindex, Enter/Space handling).
• Verify semantics and behavior when href is provided (use of <a> vs Next.js <Link> if required).
• Validate CSS transitions, stacking context, and mobile/hover interactions.

Poem

I hopped on the card with a curious grin,
I tapped and it flipped — a soft wiggly spin,
Logo on the front, a secret on the back,
Paw pressed, light shimmer, a delighted little tack. 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (4 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title mentions 'improved hover animation' but the changes show a flip/toggle mechanism with href support, not just hover animation improvements.	Update the title to accurately reflect the main change, such as 'Add flip interaction and link support to CardEffect component' or similar.
Linked Issues check	⚠️ Warning	The PR implements a flip/toggle mechanism with keyboard support and href-based navigation, which significantly diverges from issue #475's requirement for a smooth hover effect with transform and box-shadow.	Either align the implementation with issue #475 by adding hover-based transform/box-shadow effects, or close #475 and link to a new issue describing the flip functionality.
Out of Scope Changes check	⚠️ Warning	The implementation adds flip state, keyboard handlers (Enter/Space), href prop support, and a two-layer front/back structure unrelated to the hover animation requirement in #475.	Remove out-of-scope changes like isFlipped state, keyboard handlers, and href support, or create a separate PR for these features once #475 is resolved.
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 (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

---

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: 4

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dfb8668 and 2bdda4f.

📒 Files selected for processing (1)

• src/components/CardEffect.jsx (1 hunks)

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

src/components/CardEffect.jsx (1)

35-43: Make image alt text more descriptive.

alt="Project Logo" is generic; using the heading makes the alt more meaningful for screen readers:

-          <Image
-            src={logo}
-            width={150}
-            unoptimized
-            className="mx-auto"
-            alt="Project Logo"
-          />
+          <Image
+            src={logo}
+            width={150}
+            unoptimized
+            className="mx-auto"
+            alt={`${heading} logo`}
+          />

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2bdda4f and 28a1076.

📒 Files selected for processing (1)

• src/components/CardEffect.jsx (1 hunks)

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/components/CardEffect.jsx (1)

36-42: Consider a more descriptive alt text.

The generic "Project Logo" alt doesn't convey which project's logo is shown. Using the heading would improve accessibility for screen reader users.

-            alt="Project Logo"
+            alt={`${heading} logo`}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 28a1076 and 0a60f03.

📒 Files selected for processing (1)

• src/components/CardEffect.jsx (1 hunks)

🔇 Additional comments (2)

src/components/CardEffect.jsx (2)

15-24: LGTM!

The hover lift effect with motion-safe:group-hover:-translate-y-2 and group-hover:shadow-2xl provides the smooth visual feedback described in the PR objectives. The motion-safe prefix respects users' reduced-motion preferences.

---

48-62: LGTM!

The back side correctly mirrors the front side structure with stable absolute positioning and proper aria-hidden toggling for accessibility.

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0a60f03 and d1870c3.

📒 Files selected for processing (1)

• src/components/CardEffect.jsx (1 hunks)