implemented the new case study section of the home page

[ShravaniAK]

Fixes #6031

implemented the new design of the case study section , did the following changes

1. changed the background color of each case study to white.
2. changed the font family and removed the italic style.
3. added margin and padding .
4. Changed the color of the horizontal line and the font.
5. added box shadow effect on Hover .

Before :

After:

[netlify]

✅ Deploy Preview for knative ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	f9950b7
🔍 Latest deploy log	https://app.netlify.com/sites/knative/deploys/66993b1b87960c00086643ff
😎 Deploy Preview	https://deploy-preview-6032--knative.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Cali0707]

/cc @zainabhusain227 @mmejia02

[Cali0707]

Hey @zainabhusain227 @mmejia02 when you have some time can you compare the preview to the designs and leave any feedback here?

[Cali0707]

Hey @ShravaniAK , feedback on these changes from todays UX WG review was:

1. There should be a larger padding at the top of the case study boxes so that there is a bit more space between the company logo and the border of the box
2. There should be more space between the "Knative is a Cloud Native Computing Foundation incubation project" text and the "Case Studies" section
3. For the hover effect on the individual case studies, we should only change the border colour, and not do any box shadow. We should also add a transition to this so that it animates nicely
4. The entire case study box should use the pointer for the mouse, and should be clickable and take users to the case study page. Currently, this only works if users click on the text in the box.
5. We should incorporate the arrows from the design in Improvements to Case Studies Section ux#146

Thanks for all your work on this so far, once we have these fixes this should be good to merge

[ShravaniAK]

@Cali0707 , I have implemented all the changes requested, except for the "incorporate the arrows" , I think that it's a new feature implementation that can be made in a new separate pr.

[ShravaniAK]

Also for point 2 , I have fixed that in #6036

[Cali0707]

@ShravaniAK it looks like this has some conflicts now that your other PR merged, would you mind fixing those?

[ShravaniAK]

@Cali0707 I have fixed the conflicts!

[Cali0707]

Thanks @ShravaniAK ! There are a few issues that need fixing (see video below):

1. When hovering over a case study, some of the text is shifted by the border
2. The transition between no border and border should be animated

Screencast.from.2024-07-18.11-45-07.mp4

[ShravaniAK]

@Cali0707 I have fixed both the issues, can you please review them once again, Thanks!

[Cali0707]

/lgtm
/approve

Thanks @ShravaniAK !

[knative-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: Cali0707, ShravaniAK

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [Cali0707]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment