Skip to content

Conversation

@iampratik13
Copy link

What kind of change does this PR introduce?

Adds subtle and smooth hover effects to the four feature cards on the homepage to improve user experience and visual feedback. #1883

Changes

  • Added transition animations to all four feature cards in the "Why JSON Schema?" section
  • Implemented a 3% scale-up effect on hover
  • Added themed shadow/glow effects (blue for light mode, purple for dark mode)
  • Cleaned up class name formatting (removed extra whitespace)

Visual Effects

  • Transform: Slight scale-up (scale(1.03)) for a lift effect
  • Shadow: Soft blue glow in light mode, purple glow in dark mode
  • Transition: Smooth 300ms animation for all properties

Benefits

  • Improves visual feedback for users
  • Enhances modern and dynamic appearance of the website
  • Maintains consistency with existing button hover effects
  • Works seamlessly in both light and dark modes

Testing

  • Tested in light mode
  • Tested in dark mode
  • Verified smooth transitions
  • Confirmed no layout shifts

Related Issue

Closes #1883

Screenshots/videos:

1762367555773341.mp4

Checklist

Please ensure the following tasks are completed before submitting this pull request.

@iampratik13 iampratik13 requested a review from a team as a code owner November 5, 2025 18:36
@github-project-automation github-project-automation bot moved this to Ready to review in PR - Triage Group Nov 5, 2025
@github-actions
Copy link

github-actions bot commented Nov 5, 2025

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name Status Preview Last Commit
website ✅ Ready (View Log) Visit Preview 691f1a9

@codecov
Copy link

codecov bot commented Nov 5, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (1ca4a48) to head (691f1a9).

Additional details and impacted files
@@            Coverage Diff            @@
##              main     #1884   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           30        30           
  Lines          633       633           
  Branches       196       196           
=========================================
  Hits           633       633           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Member

@Utkarsh-123github Utkarsh-123github left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Ready to review

Development

Successfully merging this pull request may close these issues.

Add hover effect for feature cards on homepage

2 participants