Added hover interaction to FAQ items

[Akash22-cyber]

Addressed Issues:

This PR fixes the hover interaction issue in the FAQ section by improving responsiveness and animation smoothness.
Fixes #5

Screenshots/Recordings:

After:

Recording.2026-03-24.164717.mp4

Additional Notes:

• Added hover performance by removing Tailwind transform transitions and using Framer Motion (whileHover) for smooth animation.
• Added proper spring animation for better UX.
• Resolved dark mode inconsistency (dark:border-green-* instead of gray).
• Fixed invalid Tailwind classes (border- 6, grey → gray).
• Prevented hover blocking by background using:
  - -z-10
  - pointer-events-none
• Improved overall interactivity with:
  - subtle elevation (y, scale)
  - soft shadow transitions

Checklist

• [x ] My code follows the project's code style and conventions
• [x ] I have made corresponding changes to the documentation
• [ x] My changes generate no new warnings or errors
• [x ] I have joined the Discord server and I will share a link to this PR with the project maintainers there
• [x ] I have read the Contributing Guidelines

⚠️ AI Notice - Important!

We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact.

Summary by CodeRabbit

• Style
  • Improved FAQ item card hover interactions with dynamic visual feedback.
  • Enhanced card borders and shadow styling for better visual distinction.
  • Optimized background animation layering for improved visual hierarchy.

[coderabbitai]

Walkthrough

Updated FAQ accordion item card animations and styling in the component. Replaced scroll-based view animations with hover-triggered interactions, modified border styling logic from dynamic pink/grey emphasis to fixed green/grey variants, and adjusted background animation layering to sit behind content with improved visual hierarchy.

Changes

Cohort / File(s)	Summary
FAQ Item Interactivity & Styling src/Pages/FaqPage/FAQ.tsx	Replaced scroll-triggered animations with hover-driven interactivity (translate, scale, shadow). Updated border styling from dynamic classes to fixed border-2 with green/grey variants. Added conditional shadow on open state and hover border color transitions. Repositioned background animation layer using -z-10 and pointer-events-none for proper depth layering.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

Typescript Lang

Poem

🐰 Hover magic now unfolds,
FAQ cards with grace take hold,
Spring animations dance and sway,
Shadows shift in green array,
Interactive charm displays the way!

🚥 Pre-merge checks | ✅ 4

✅ 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 'Added hover interaction to FAQ items' directly and concisely describes the main change made in the pull request.
Linked Issues check	✅ Passed	The PR implements all requirements from issue #5: hover feedback with subtle styling changes, shadow effects, border highlighting, and smooth spring-based transitions.
Out of Scope Changes check	✅ Passed	All changes are focused on implementing hover interactions for FAQ items; background layer adjustment is scoped to preventing interference with the hover interaction feature.

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

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/Pages/FaqPage/FAQ.tsx`:
- Line 159: Summary: Remove the negative z-index from the background layer to
avoid stacking issues. Locate the div whose className contains "absolute inset-0
-z-10 pointer-events-none overflow-hidden" in FAQ.tsx and remove the "-z-10"
token (leave "absolute inset-0 pointer-events-none overflow-hidden"); if you
need an explicit stacking order, replace "-z-10" with "z-0" instead of a
negative z value so the background stays behind content without risking being
pushed behind sibling sections.
- Around line 99-116: The FAQ card wrapper currently only animates border and
shadow but not the card surface tint; update the className logic on the
container that uses isOpen (the JSX with className={`... ${isOpen ? ... :
...}`}) to also apply a background tint class when isOpen is true and mirror
that same tint for interactive states by adding hover:... and focus-within:...
(and dark: variants) so the surface color changes on open, hover, and keyboard
focus; keep existing border and shadow classes and ensure the tint classes are
present alongside them so whileHover/transition props (y, scale, boxShadow)
continue to work.

🪄 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: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: ccaa079a-09c0-470b-bfab-912f0533fa23

📥 Commits

Reviewing files that changed from the base of the PR and between 1496367 and 654fec0.

⛔ Files ignored due to path filters (2)

• dist/index.html is excluded by !**/dist/**, !**/dist/**
• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (1)

• src/Pages/FaqPage/FAQ.tsx

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Drop the negative z-index from the background layer.

pointer-events-none already prevents the background from blocking hover. Keeping -z-10 here is risky because the parent section does not create its own stacking context, so this layer can end up behind the section itself or adjacent sections.

Suggested patch

-    <div className="absolute inset-0 -z-10 pointer-events-none overflow-hidden">
+    <div className="absolute inset-0 z-0 pointer-events-none overflow-hidden">

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<div className="absolute inset-0 -z-10 pointer-events-none overflow-hidden">
	<div className="absolute inset-0 z-0 pointer-events-none overflow-hidden">

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/Pages/FaqPage/FAQ.tsx` at line 159, Summary: Remove the negative z-index
from the background layer to avoid stacking issues. Locate the div whose
className contains "absolute inset-0 -z-10 pointer-events-none overflow-hidden"
in FAQ.tsx and remove the "-z-10" token (leave "absolute inset-0
pointer-events-none overflow-hidden"); if you need an explicit stacking order,
replace "-z-10" with "z-0" instead of a negative z value so the background stays
behind content without risking being pushed behind sibling sections.