[website] Refine home, pricing and about pages

[siriwatknp]

Preview pages

• Home
• Pricing
• About

Perfomance

Good to go!
https://webpagetest.org/video/compare.php?tests=210826_AiDcEW_12eeae53592aadc3593d6feffcdb00bb%2C210826_BiDcMQ_da93be69ea92c948d93d421492502f9a%2C210826_BiDc46_f17c4522340bf8a8a9fd14cbee549051&thumbSize=200&ival=500&end=visual

Common

• Email Subscribe UX @danilo-leal @oliviertassinari the code is copied from old rebranding. If you subscribe, you will see green alert (replace the input) tell u to check your inbox. Do we want to go with this UX?
• Land on homepage with Toast after confirm in the inbox.
• SendInBlue setup (group, naming ...) @oliviertassinari @mbrookes I have created form "Newsletter" in sendinblue, please recheck if I missed anything.
• dark mode primary.main color @danilo-leal I think the primary.main color need to be brighter in dark mode. We did it for docs before. (primary.400 works great with primaryDark.700, 800, 900)
  
• remove passHref from all component={Link} since the prop is true by default [docs] Fix missing href for AppDrawerNavItems #27936

Header

• keyboard navigation on menus (← →)
• npm install should be @material-ui/core @oliviertassinari @danilo-leal From my understanding, we are not changing the package name at v5.0.0. wait for confirmation.
• I saw with the nav menu on small screens. When I can't see the whole menu and try to scroll down, only the background scrolls.
  
• Hide products menu (enable it once all product pages are done)
• add tooltip to mode toggle @danilo-leal is this better than not having?
  
• add search bar

Home

• social share image og:image @danilo-leal we need to change the image for social sharing, can you provide one in figma? I can take care of the rest.
• Rich result status reports (use the same as current index page)
• code highlight in core showcase is not align (only mobile device)
• metadata in core showcase at custom design
• weird shadow in designkits & template showcase (only mobile device)
• Add non breaking space between "your" & "UI" to prevent the hanging "UI"?
  
• Align user logo baselines
• Diamond sponsor logos should be bigger than gold
• Diamond sponsor card should be bigger than gold? @danilo-leal
• Ii might be intentional, but the external link icon moving on hover looks like a bug:
  
• Diamond / gold footer on every card seems redundant, and makes the sponsors section larger than it needs to be. A heading might be better
• "Check it for yourself, give it a try and share with us what you've built!" -> "Try it for yourself, and share with us what you've built!"
• "Showcases" -> "Showcase"
• "See more projects and companies that rely on MUI."
• We're still leaking internal meta-labels. Is it intentional? If the heading doesn't communicate the intention of the section, might it be better to improve the copy. (Partially fixed by making it h1)
  
• Dark mode setting isn't retained when switching to the docs
• "Hover the component for highlighting the code." -> "Hover the component to highlight the code".
• The right margin of the code preview doesn't match the rest of the copy.
• DataGrid in advance showcase create new style every time the mode changes

Pricing

• social share image og:image @danilo-leal
• GetStarted links
• no icon
• UI Bug in mobile
• Pricing>Pro>Buy now links to https://next.material-ui.com/components/data-grid/. It should presumably be /store/items/material-ui-pro/. Also the currently linked page is out of date. (compare https://material-ui.com/components/data-grid/
• "Get started with the most popular and industry-standard UI library to build interfaces with React." -> "Get started with the industry-standard UI library for building React user interfaces."
• Table header starts cropping when screen width is between 1010px and 902px. @siriwatknp

table.crop.mov

• Icons not centered:
  
  Edit: Actually, looking at the alignment of the scroll-view header, it seems it might be intentional. Let's revert it and center both. It doesn't look right.
• Table rows have a hover indicator but clicking anything other than the Data grid accordion doesn't do anything, breaking expectations. no bg for the table row on touch device
• Data grid accordion headerhas smaller height than other table rows.
• Data grid accordion icon transition feels much too slow.
• When the accordion is collapsed, the data grid doesn't appear to be included in any plan. Suggest a "partial" icon (empty circle?) for Community, and checkmark for Pro and Premium, only when not open.
• "$0 / Free forever" -> "$0 – free forever".
• "$186 / per developer" -> "$186 / developer" or "$186 per developer".
• There seems to be a spacing issue with the icon:
  

About us

• social share image og:image @danilo-leal
• Join the team link? @danilo-leal should I build the career page in figma right in this PR?
• Tooltip bg-color @danilo-leal I will make the bg darker for the light mode and add some shadow.
  

Footer

• links (hidden some that are not available) @oliviertassinari @danilo-leal
  
• "Copyright © 2021 MATERIAL-UI SAS." -> "Copyright © 2021 Material-UI SAS."

[mui-pr-bot]

No bundle size changes (experimental)

Generated by 🚫 dangerJS against 457a0a5

[danilo-leal]

@oliviertassinari @mbrookes

We're referring to the advanced components in three different ways: Advanced, MUI X and Advanced X. We should standardize and commit to one of them... I'd think that ditching the lonely Advanced is the first move since the packages will have x as pre-fix and it's probably a good thing to resonate with that. And, in order to not have to name the Core as MUI Core as well, I'd personally vote for using Advanced X. It might sound a bit redundant but overall I think it's fine. Using only X feels too empty for me. Great for the packages but weird for written text. This is just my opinion... I'd like to get your perspective on the matter so we launch these pages with the right name in each instance.

[siriwatknp]

@danilo-leal What do you think about this (after clicking confirm in the email will land on homepage with Toast)?

Screen.Recording.2564-08-27.at.10.01.39.mov

[mnajdova]

1. Could we have fix height on the div around so that the page don't jump when they are loaded:

2. Maybe the placeholder can have a lighter color:

3. Not critical but we may wanna fix it later:

4. I remember we had nice animations here:

Were they removed because of perf?

---

These were all things I could find, nothing is critical tough... Very good job @siriwatknp & @danilo-leal 🤩

[mnajdova]

Left couple of comments, rest looks 💯

[siriwatknp]

1 Could we have fix height on the div around so that the page don't jump when they are loaded:

fixed

2. Maybe the placeholder can have a lighter color:

I think it is light enough 🤔. May be @danilo-leal can decide.

3. Not critical but we may wanna fix it later:

@danilo-leal should we do it?

I remember we had nice animations here:

which animation?

[oliviertassinari]

This is suspicious. I think that it should either:

• be inside the CssBaseline if it fixes the root cause of a problem
• not be required if the issue is that we missed Typography wrappers in a few places

[oliviertassinari]

Wait, isn't it breaking the font size accessibility of the page? I can no longer use:

to remove.

[siriwatknp]

@oliviertassinari it is removed in #27956

[mbrookes]

Just spotted another "leverage":

Not sure if we're doing another round before release, but it would be good to fix that at some point.

[danilo-leal]

@mbrookes Just FYI: changed from "leverage" to "use" on this commit f8aa03f on the currently open #27956 PR.