[website] Customers/Marketing page for Case Studies (DX-33)

[alelthomas]

TODO: Only pending to fix section sizes - remove date from the published case studies?

Lots of placeholders/dummy content for now as we get real stuff. But wanted to start implementing the design so we can tweak and be ready for publishing whenever we do get something.

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

Design: https://www.figma.com/design/4uv2dT18rXJPZBbrbpw61q/Marketing-site?node-id=11206-4811&t=QUj8FwUjcdIerT21-4

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 518f3e0

[mapache-salvaje]

Love to see it!

I think the active + hover state colors for these buttons could use a bit more contrast in dark mode:

[noraleonte]

Really nice work, Ale! 💙 Leaving a few design-related comments 😸

• I think all the sections should have the same maxWidth for balance 👇
  
  

• In the original design, the left and right columns of the bento grid have a smooth gradient in the background. It's quite a nice touch, we could consider adding that 🤔

• I also like the dotted pattern on those, it fills the negative space quite well. We can use a different one too, if you think it would work better, I like the polka dots though 🙈 I use this site for css patterns quite a lot

• I think a primary blue background with low opacity would work better as a :hover effect on this grid elements, instead of the current grey
  

• I think we could add a divider between the Start now and What people say sections

[noraleonte]

I think the active + hover state colors for these buttons could use a bit more contrast in dark mode:

I agree! I would even go for an outlined version of those tabs (similar to the button we have in the footer)

Something like: