Skip to content

[UI/UX]: Improve Feature Card Hover Feedback in Light and Dark Modes #227

@Luffy-456

Description

@Luffy-456

Description

The feature cards in the features.tsx section currently use a basic hover:shadow-lg effect for hover interaction. While the effect is partially visible in light mode, it becomes very subtle in dark mode because of the darker background (dark:bg-gray-800).

As a result, the cards lack clear interactive feedback and feel visually flat across both themes, especially in dark mode where the shadow contrast is significantly reduced.

Current Behavior

  • Hover shadow is weak and barely noticeable in dark mode.
  • Cards feel static despite being interactive UI elements.
  • Light mode hover effect also appears visually bland and lacks depth.
  • User interaction feedback is inconsistent between themes.

Expected Behavior

Feature cards should provide a clear and polished hover interaction in both light and dark themes by:

  • Improving shadow visibility and contrast
  • Adding smoother elevation effects
  • Maintaining consistent visual feedback across themes
  • Enhancing overall UI responsiveness and interactivity

Possible Improvements

Some potential enhancements include:

  • Adding subtle card elevation using hover:-translate-y-1
  • Improving shadow intensity for dark mode
  • Adding border transition or glow effects
  • Refining transition timing and smoothness
  • Using theme-aware hover styles for better visibility

Why This Matters

  • Improves visual consistency between light and dark themes
  • Provides better interaction feedback to users
  • Makes the UI feel more modern and responsive
  • Enhances overall user experience with minimal design changes

Hi @mehul-m-prajapati, I would like to work on this UI/UX improvement.
Could you please assign this issue to me under GSSoC 2026?

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions