[Feat]-added hover effect and 'Read More' to blog cards

[MadhavDhatrak]

What kind of change does this PR introduce? Feature Addition- Add hover and Read More to blog cards

Issue Number:

• Closes #1330

Screenshots/videos:

https://github.com/user-attachments/assets/29b9b84f-10bd-425e-afd4-98eeafaf9be4

If relevant, did you update the documentation? No

Summary Added new UI enhancements to improve blog post interaction and readability:

• Added hover effects to the blog cards to make them visually interactive.
• Introducing a dedicated "Read More" button to guide users towards detailed blog posts.

Does this PR introduce a breaking change? No this is just a UI enhancement that doesn't affect functionality

[github-actions[bot]]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
website	✅ Ready (View Log)	Visit Preview	4f178e8ab11e48116c590577eb941533e4bc74a7

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 100.00%. Comparing base (a44dbdf) to head (4f178e8). Report is 39 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1350   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           10        10           
  Lines          396       396           
  Branches       106       106           
=========================================
  Hits           396       396           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[DhairyaMajmudar]

Making blogs page a grid of 4xn makes it looks more airy, Pls. make it grid of 4

[MadhavDhatrak]

Hey @DhairyaMajmudar

As you requested I have made the following changes:

• Added a 4xN grid.
• Removed the hover background from headings.
• Removed comments from the codebase.

A video demo is attached below:

https://github.com/user-attachments/assets/cf27e958-5b12-4820-ab79-a064ed39e349

Please review the changes and let me know if any further modifications are needed.

[benjagm]

This is looking mostly great but it is missing the last changes made on main. Can you please update from main and fix the merge conflicts to check if we can merge it?

[MadhavDhatrak]

@benjagm Some code for the "Read More" button may have been removed or overwritten during merge conflict resolution causing it to not appear in some cases No worries, I'll update it again!

[github-actions[bot]]

Hi @MadhavDhatrak! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: breaking changes information

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions[bot]]

Hi @MadhavDhatrak! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: breaking changes information

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions[bot]]

Hi @MadhavDhatrak! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: breaking changes information

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[github-actions[bot]]

Hi @MadhavDhatrak! Thanks a lot for your contribution!

I noticed that the following required information is missing or incomplete: breaking changes information

Please update the PR description to include this information. You can find placeholders in the PR template for these items.

Thanks a lot!

[MadhavDhatrak]

@benjagm @DhairyaMajmudar I have resolved the merge conflicts, and the code is now working as expected. Please review it

[benjagm]

I have resolved the merge conflicts, and the code is now working as expected. Please review it

This PR needs to include the changes added with #1477 to have all the blog images with the same size.

[Utkarsh-123github]

Hi @MadhavDhatrak , as per Benjamin's comment: https://github.com/json-schema-org/website/issues/1330#issuecomment-2924813441 , I think we can close this issue. Thank you for your efforts and contribution🚀