[website] Add Base UI marketing page

[siriwatknp]

Introducing Base UI as a stable product within the MUI Core line.
https://deploy-preview-36622--material-ui.netlify.app/base-ui/

Landing page tasks

• Add animations to the hero section so it pops out more ✨
• Sort the image size optimization on the Testimonial section.
• Iterate further on the Hero section to make it both more understandable + more impactful. ⚠️
• Add a page that shows all supported components so we can link the "Much more" to it. [docs][base] Add page for all Base UI components #37536
• Finalize the Components section Tailwind CSS and Plain CSS demos.
• Sort the horizontal scrolling on the Components section.
• Fix the z-index issue on the Menu demo within the Components section.

Tangential tasks

• Customize the Product menu to fit Base UI in.
• Make the Core page refer to a group of products instead. [website] Make the Core page refer to group of products #37608
• Use the content that's currently used in the Core page to create a new pair Material UI page. [website] Transition the Core page to be Material UI instead #37583
• Fix MUI X expired license on the /x page.
• Create another button variant to fix the installation command copy button.

---

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

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 9950524

[siriwatknp]

@danilo-leal I Need some clarification on the new font so that we can optimize them similar to what I did with PlusJarkarta, the rest looks good.

[siriwatknp]

@danilo-leal The font flash is fixed (I did it for IBM Plex Sans regular as well). I can't approve my PR so feel free to merge when you think it is ready.

[mnajdova]

Few ideas for improvement:

• The Accessibility card points to a section that does not cover anything related to accessibility
• 
  We should link to a page or explain a bit how it is different
• 
  The shadow on the inputs for Base UI looks a bit too much

[danilo-leal]

Sweet, these are all good points!

• re A11y page: yeah, there isn't a specific section in the docs covering the specifics of accessibility on Base. We should definitely write it and come back to the landing page to link it!
• re Competitor difference: uhm, that's interesting! I wonder if it should live on the landing page, though... but either way, it's a good point to call out specific differentiators from the competition. Would love to get your & Michal's help to dig in further on that.
• re Input shadow: that's on the docs intro demo rather than in the landing page, right? We can definitely polish it!

Just reiterating that given the merge of this PR and the marketing/promotion of the page are separate things, don't think these points are blockers! We should for sure iterate/work on them following the merge 🤙

And for the sake of alignment, we agreed on merging this PR as it houses a bunch of general style updates to the website/documentation and to hold on to the actual Base UI page promotion until possibly the end of the northern hemisphere summer to potentially bundle it up with the Joy UI stable.

@mnajdova let me know if all of this makes sense and if you think it's ready to go! 😄

[danilo-leal]

Excited to get this one out! 🎉

[oliviertassinari]

It's awesome to have this page 🎉

---

A review on the page: https://mui.com/base-ui/. Opportunities we could use to improve it. I'm adding @zanivan to the loop as this can often be applied to the core in general. Here is what I think would move us to state-of-the-art.
I think that fixing these is part of what it takes to standout for Twitter, our exigeant users, they will notice them all IMHO:

• 1 Use of cursor: pointer. We ruled toward using this style for any interactive elements, this is missed on the page. I added a few in [website] Fix a few regression #38050.

• 5 The Modal animation is buggy. It behaves correctly on https://mui.com/base-ui/react-modal/#transitions but not on this product page. See the scrollbar layout shift that shouldn't happen:

Screen.Recording.2023-07-21.at.00.07.14.mov

• 9 The focus visible style on the lower demo is soo much better:

Eww

Great

• 12. We are missing a clean focus visible style on all the elements:

In the doubt, I think using the same one as Joy UI would make sense.

• 6 The label isn't wired to the select, also clicking on it should focus the select

• 2 Slider animation. This feels super nice on my end:

Screen.Recording.2023-07-20.at.23.29.45.mov

I haven't seen any other libraries do this, but it's so smooth (click jump https://m2.material.io/components/sliders#discrete-sliders)

• 3 I think that white could feel a great step forward:

• 4 The Modal Escape interaction doesn't work when opening it. It behaves correctly on https://mui.com/base-ui/react-modal/. The focus should be moved to the modal:

• 7 Changing the color for each style could help reinforce the difference

• 8 I feel like the dropdown misses an open and close animation

• 10 Pressing Space doesn't trigger the focus visible style [Switch] Improve design across libraries base-ui#19

Screen.Recording.2023-07-21.at.00.21.56.mov

This is a bug with Joy UI and Material UI as well.

• 11. The reference to the switch looks wrong to me, it should be a label, see https://ui.shadcn.com/docs/components/switch

• 13. Something I noticed while behind surprised I could select the text in the button. This looks correct here. However, there is a bug in Material UI cc @DiegoAndai and Joy UI cc @siriwatknp, both get it wrong, but in a different way 😆

• 15. Background color

Correct

Wrong

• 16. Select label click toggle issue [Select][base-ui] Label open issue #38477.

• 17. Joy UI, I would argue we should disable text selection

Screen.Recording.2023-07-20.at.23.52.34.mov

Material UI, I would argue that when the button is a <button> we should be able to select text, relying on the default browser behavior.

Screen.Recording.2023-07-21.at.01.39.03.mov

Related to whatwg/html#8228

---

Enjoy 😁

[danilo-leal]

@oliviertassinari sweet, appreciate the thorough & detailed feedback! 😬 Two clarifying questions, though:

• Bullet 3 wasn't clear, what do you mean by "white could feel a great step forward"?
• I'm feeling like bullet 13 is sort of unrelated to this PR/page and it's something that would deserve an issue for both Material & Joy? Parting from "This looks correct here" I'm assuming that there's no change to be made on any page-related file, right? 🤔

[oliviertassinari]

• 3 In dark mode, it feels OK on my end. But in light mode, I don't find that the button with the #000000 black background color has enough contrast with the text to be read easily. #0000ff blue -> #ffffff white could solve this.
• 13 Agree, I noticed this while I could select the text of the button, at first I was surprised / thought it was wrong, but diving deeper, it actually looks like it's my expectation that is wrong: Base UI got it right. So Material UI & Joy UI that gets it wrong.

[oliviertassinari]

Actually on 13. it directly connects to a UX pain on the page. In the beginning of the video, I have no idea of the copy click feature, I just want to copy the text, I can't. Then, in the second part of the video, I remove the user-select: none CSS.

Screen.Recording.2023-07-23.at.02.05.15.mov

I think they do it right:

Screen.Recording.2023-07-23.at.02.07.04.mov

[DiegoAndai]

Created #38158 to address point 13.

In Firefox, the button text will still be not selectable, as that's their default (check https://nextjs.org/ on that browser).

[oliviertassinari]

Once we complet the round of polish on the marketing page, I think that we can announce it on Twitter, it will make for a great content, e.g. https://twitter.com/colmtuite/status/1453021328274034694.