Style changes in homepage

[cbum-dev]

What kind of change does this PR introduce?
Ui fixes in main page particularly the "Welcome to the JSON Schema Community" section. Changed the styling and positioning of cards.
Changed more <img tags to Image.

Issue Number:

• Closes 🐛 Bug: Ui fixes in main page. #1273
• Closes 🐛 Bug: Adding Image tag to all the remaining <img> tags. #1465

Screenshots/videos:

Screencast.From.2025-01-22.23-07-02.mp4

If relevant, did you update the documentation?
No

Does this PR introduce a breaking change?

[cbum-dev]

Hi everyone, let me know if their is some need of improvement here.

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
website	✅ Ready (View Log)	Visit Preview	1cbeaed

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (60f2d6a) to head (1cbeaed).
Report is 1 commits behind head on main.

Additional details and impacted files

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

☔ 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.

[benjagm]

Can you please review and fix the new borders added? They don't work in the dark theme.

[DhairyaMajmudar]

@cbum-dev pls. resolve the merge conflicts

[cbum-dev]

@cbum-dev pls. resolve the merge conflicts

Sure.

[benjagm]

Hi @cbum-dev Can you please leave the original border style?

Current:

Orginal:

[cbum-dev]

Hi @cbum-dev Can you please leave the original border style?

Current:

Orginal:

Do I have to remove the borders from light mode too ? @benjagm
Also in the dark mode as all you can see the height is not even in all cards and the border is extending. So maybe I have to shorten the height to make the border fit in or this is looking fine?

[cbum-dev]

Hi @benjagm any update on this?

[benjagm]

Looks mostly good. Just left some comments regarding using Image instead img.

[benjagm]

Can you use image instead of img?

[cbum-dev]

Hi @benjagm you mentioned only 2 places where I have to change the img tag or the whole page, as their are so many img tags present.

[benjagm]

Please fix all of them.

[benjagm]

Can you please replace img with Image in all cases? We prefer to use the next Image vs img from HTML.

[benjagm]

Please fix all of them.

[cbum-dev]

Can you please replace img with Image in all cases? We prefer to use the next Image vs img from HTML.

Done @DhairyaMajmudar and @benjagm

[DhairyaMajmudar]

@cbum-dev it seems you need to add some padding in responsive mode, pls. check below screenshot

[cbum-dev]

@cbum-dev it seems you need to add some padding in responsive mode, pls. check below screenshot

Hi @DhairyaMajmudar is it good enough or I should increase ?

[benjagm]

I have a problem with this PR. I don't think we are adding any relevant value, just another style that is not consistent at all with the other cards in the upper part of the section "Why JSON Schema?"

I can accept the proposal of adding the improvements on the styles of the card, but if they are consistent across the landing page.

I don't think the proposed single border improves the style of the cards on top in the section "Why JSON Schema?".

Why not adding a hover style to "Why JSON Schema?" card and apply the same approach in the community cards?

[cbum-dev]

I have a problem with this PR. I don't think we are adding any relevant value, just another style that is not consistent at all with the other cards in the upper part of the section "Why JSON Schema?"

Now I think it's true as well. Making them consistent is a bonus.

I don't think the proposed single border improves the style of the cards on top in the section "Why JSON Schema?".
Why not adding a hover style to "Why JSON Schema?" card and apply the same approach in the community cards?

I can think of another idea to make them consistent too, along with adding the hover effect you mentioned.