Add hover effects to Features section (dark & light mode)

[Lehana02]

Related Issue

• Closes: [Enhancement] Add hover effects to Features section for dark and light mode #288

Description

Add hover effects to the Features section cards to improve UI interactivity and user experience in both light and dark modes

How Has This Been Tested?

• Navigate the Features section in the home page
• Tested hover effects on feature cards in both light and dark modes
• Verified smooth transition effects (translate, scale, shadow, and background change)

Screenshots (if applicable)

Type of Change

• Bug fix
• [✔] New feature
• Code style update
• Breaking change
• Documentation update

Summary by CodeRabbit

• Style
  • Feature cards now use a consistent gray background and simplified hover visuals for a cleaner, more uniform look across light/dark modes.
  • Feature icons gain smooth scale-on-hover animations for improved interactivity.
  • Note: Card hover no longer alters feature titles or descriptions—those text elements no longer respond to hovering the card.

[netlify]

✅ Deploy Preview for github-spy ready!

Name	Link
🔨 Latest commit	e71e546
🔍 Latest deploy log	https://app.netlify.com/projects/github-spy/deploys/6a0b062b9eaae20008833507
😎 Deploy Preview	https://deploy-preview-290--github-spy.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 52f746db-bfea-445f-8d48-8ad3ec4e276c

📥 Commits

Reviewing files that changed from the base of the PR and between b01bf99 and e71e546.

📒 Files selected for processing (1)

• src/components/Features.tsx

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

• src/components/Features.tsx

---

📝 Walkthrough

Walkthrough

Removed group-based hover classes from feature card wrapper in src/components/Features.tsx, replaced with fixed hover/background classes; added transition-transform, duration-300, and hover:scale-110 to the icon container, so title/description no longer respond to group-hover.

Changes

Feature Card Hover Effects

Layer / File(s)	Summary
Card wrapper and icon class updates src/components/Features.tsx	Card wrapper className no longer uses group or per-feature hover/border classes and now applies fixed hover/background classes (hover:bg-blue-100 / dark:hover:bg-gray-600); icon container adds transition-transform, duration-300, and hover:scale-110.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• [Enhancement] Add hover effects to Features section for dark and light mode #288: This PR implements hover effects for the Features section in dark and light modes.

Possibly related PRs

• GitMetricsLab/github_tracker#230: Both PRs modify src/components/Features.tsx to change feature-card hover styling; #230 added per-feature hoverColor/borderColor and group-based hooks which this PR removes.

Suggested labels

level:intermediate, quality:clean

Poem

I'm a rabbit in the code, I hop on cards with flair,
I nudge the icons gently — they stretch and spin mid-air.
No more hidden group to bind, the hover's clear and bright,
Light and dark both nod with joy, the features feel just right. 🐰✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main change: adding hover effects to the Features section with dark and light mode support.
Description check	✅ Passed	The PR description includes all required template sections: Related Issue, Description, How Has This Been Tested, Screenshots, and Type of Change. All sections are adequately filled with relevant information.
Linked Issues check	✅ Passed	The code changes successfully implement the requirements from issue #288: adding hover effects to feature cards with smooth transitions and proper support for both light and dark modes.
Out of Scope Changes check	✅ Passed	All changes in Features.tsx are directly related to implementing hover effects for the feature cards. The modifications to className styling, padding, and transitions align with the stated objective of issue #288.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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.}

[github-actions]

🎉 Thank you @Lehana02 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines