Enhance subject cards with hover animation and shadow effect

[antara5603]

✨ Enhance subject cards with hover animation and shadow effect

Labels: enhancement, frontend, UI/UX, good first issue

Description

Currently the subject cards on the homepage have no hover feedback. They feel static and unresponsive, which reduces the overall polish of the UI. Adding subtle hover animations and a shadow effect would make the cards feel more interactive and modern.

Current Behavior

• Cards have no visual change on hover
• No depth/shadow to distinguish cards from background
• Feels flat and unclickable to new visitors

Proposed Solution

Add the following CSS transitions to subject cards:

1. Slight upward translate on hover:
   transform: translateY(-4px)

2. Box shadow on hover:
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25)

3. Smooth transition:
   transition: transform 0.2s ease, box-shadow 0.2s ease

4. Subtle scale (optional):
   transform: translateY(-4px) scale(1.02)

"Coming Soon" cards can have a reduced/muted hover effect to visually indicate they are not yet clickable.

Acceptance Criteria

• Hover animation applied to all active subject cards
• Shadow visible on hover, removed on mouse-out
• Transition is smooth (no janky jumps)
• "Coming Soon" cards have a dimmed/disabled hover style
• No layout shift caused by the transform
• Works correctly on all modern browsers
• Mobile tap state also feels responsive (active state)

Additional Context

Pure CSS solution — no JS or library needed.
Can be implemented in a few lines inside the existing card stylesheet. Low effort, high visual impact.

[antara5603]

Hii @pushkarscripts
I am GSSoc'2026 contributor. Please assign this issue to me.