[website] Add Case studies to the homepage

[prakhargupta1]

Preview: https://deploy-preview-46416--material-ui.netlify.app/customers/

To do:

• Change images to https://mui.com/static....

Continuation of #45675

[mui-bot]

Netlify deploy preview

https://deploy-preview-46416--material-ui.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	0B(0.00%)	0B(0.00%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against ac8dba0

[mbrookes]

@prakhargupta1, don't miss these additional comments: #46416 (review) 😉

[prakhargupta1]

• There are several mentions of a UI "framework", which isn't strictly accurate. Prefer "library" or "foundation" instead?

Replaced framework -> library.

• For the block quotes could we put the quotation mark vertically in line with the text? It looks a bit lost at the moment (and also lacks padding above it). That said, the blue vertical bar already identified it as a quote. Do we need both?

Removed the quotation mark.

• There are quite a few "MUI X Data Grid Premium", which is a bit of a mouthful. Should we drop the "Premium" (not sure the tier is important for these case studies), and perhaps even the MUI X in places?

MUI X Data Grid Premium -> Data Grid. Removed MUI X and Premium/Pro from all occurrences. Also, at some places Data
Grid was mentioned in bold, removed that as well.

• Should recommendations such as "Moz strongly recommends" be attributed as a quote? Otherwise it sounds like we're putting words in customers' mouths...

Added it in a quote and removed 'strongly'.

• There's a mix of "UX" and "user experience" in the text. Should we pick one? (No strong opinion.)

Replaced user experience -> UX wherever it made sense.

[mbrookes]

Thanks @prakhargupta1 Let me know when the rest of the feedback has been addressed, and I'll take another look

[prakhargupta1]

Thanks @prakhargupta1 Let me know when the rest of the feedback has been addressed, and I'll take another look

@alelthomas, I'm assuming you're looking into the rest of the styling related feedback but let me know if there is something that I should check.
I'm hopeful that we'll be able to finally merge it this week.

[alelthomas]

RE: styling suggestions on the Testimonials grid. I'm not sure I love centering Loggi + Particle, it looks off:

vs doing space-around (as opposed to space-between which is what I had before). This looks slightly better to me, but lmk:

[alelthomas]

Made a bunch of little adjustments to tackle Matt and Nora's feedback too:

• Rearranged the Spotlight grid so it's 2 rows of 2 and 1 of 4 (2 of 2 and 1 of 3 on tablet)
• Logos should render without issue now (lmk if you stumble into anything else)
• Added header image for MOZ and standardized logos
• Fixed padding for mobile / tablet
• Tweaks to the Testimonials grid: fixed Particl logo being a different color, fixed positioning for gridArea one (Particl and Loggi), adjusted padding disparity between Docker and Unity logos, removed outline and borders on Avatars
• Logo slider: scrunched them up a bit horizontally and rearranged so wider logos are right next to the shorter ones. Sped up animation on mobile

Let me know if I missed anything. @prakhargupta1

[prakhargupta1]

Some things that I noticed:

• Title is missing in the Moz story.
• We need to change the logo for Delivery hero https://github.com/mui/material-ui/pull/46416/files#r2594691653
• In the Tebra card, Read Story button is not aligned with the rest.
• Let's also add alt-text in Athena and Oregon, we may have to show them in the future for a visual balance.

Just my 2 cents on the design:

• The Testimonial grid looks unbalanced to me as there is a lot of text at the bottom. I'd preferred Particl and Loggi, to be vertically centered.

Everything else looks good to me 🙌

[mbrookes]

I'd preferred Particl and Loggi, to be vertically centered.

I had suggested the same thing. It still looks off to me.

Current:

Proposed:

On a related(ish) note, there are double borders where adjacent divs meet.

There's a layout shift when a case study header image loads.

And something I hadn't paid enough attention to – the CTA at the bottom reads:

Find out why MUI's tools are trusted by thousands of open-source developers and teams around the world.
[Discover the Core libraries >]

1. The case studies are all commercial/closed-source use, rather than open-source, and presumably that's who we're targeting?
2. Given that all of the case studies feature MUI X in one form or another, is Core the best place to link? Apart from anything else, the Core page features Joy UI, which in turn is called out as "in beta and development is currently on hold." Probably not the best look...

Edit to add: Nitiest of nitpicks, but the Delivery Hero logo is vertically much smaller than the others in this set:

John Dere also, but less noticeably so. Seems we've squeezed those to fit 100px wide (300px intrinsic), and lost height as a result.

Please could we have a quick follow-up PR to work through these niggles?

[alelthomas]

RE testimonials section, this was the approved design months ago designed by Nora and Victor:

I personally like the original option better, but the implementation I went for seemed like a good compromise - but I shall open the discussion again with the rest of the team to avoid bias.

I've opened a new PR to address the rest: #47555