[website] Add enterprise plan

[prakhargupta1]

Preview: https://deploy-preview-44267--material-ui.netlify.app/pricing/

• Added pricing cards
• Added a 4th column for 'Contact Sales'
• Tweaked plan descriptions, replace monthly by annual pricing as the primary display
• Moved Plan toggle up
• Support section:
  • Premium: Removed all WIP signs, removed guaranteed response time
  • Enterprise: Describes the Custom offering

To Do

• [x] update icon color
• [x] any icon for support row header
• [x] Add priority support link from Premium plan
• [x] Fix focus visible style of Switch #44449
• [x] design review
• [x] check width issue for iPad Pro
• [x] Update pricing to reflect the priority support toggle
• [x] Add FAQ and link SLA doc
• [x] Add a dedicated Customer Success Manager for Enterprise
• [x] Cleaned priority support Switch and added a Tooltip
• [x] Removed guaranteed response time from the premium plan (based on discussion with José)
• [x] Update X docs to mention Priority support https://github.com/mui/mui-x/pull/16467

To be done separately as part of https://github.com/mui/material-ui/pull/45632

• [ ] In premium plan, add a toggle for priority support add-on
• [ ] Update store links based on the toggles

[oliviertassinari]

Oh funny, https://saucelabs.com/pricing, https://www.browserstack.com/pricing, https://www.lambdatest.com/pricing, they are all locked in a monthly display price, billed annual price.

[prakhargupta1]

they are all locked in a monthly display price, billed annual price.

I think it's only because they support both monthly and annual billing, and show the smaller number to make it appear more affordable. But in our case, we only support annual billing.

[oliviertassinari]

Makes sense 👍

[mui-bot]

Netlify deploy preview

https://deploy-preview-44267--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 :no_entry_sign: dangerJS against f344b86d23872a156dca1a431de963a2432d8733

[prakhargupta1]

Came across: https://www.growthunhinged.com/p/state-of-saas-pricing-changes-2024. May be it can help us design the priority support feature better. Something like: https://linear.app/pricing? cc: @zanivan

[zanivan]

Hey @prakhargupta1, I was talking to @joserodolfofreitas, and we agreed that we should take a few steps back before jumping into a PR for this. Since it’s a sensitive page, we could explore more alternatives first to be more certain about what we want to guide users toward.

[oliviertassinari]

Early feedback:

• [x] 1. Icons layout shift

https://github.com/user-attachments/assets/39bcb728-9282-441a-812f-d277a3d2123a

• [x] 2. I didn't realize that there is a tooltip. Maybe we need an icon?

• [ ] 3. It feels like this needs a learn more link. Maybe an anchor link to scroll to the right place in the page

• [x] 4. I wanted to get a sense of what would be the price of this. I didn't notice 2. Maybe fixing 2. would help, but unclear.

• [x] 5. Strange padding-bottom

Maybe like this:

• [x] 6.

doesn't match Figma https://www.figma.com/design/4uv2dT18rXJPZBbrbpw61q/Marketing-site?node-id=11149-1504&p=f&t=8r5esBKk9LtFzw4V-0

• [ ] 7. The state transition is very strange, it commits two times, we have tearing. It feels like this https://en.wikipedia.org/wiki/Screen_tearing

• [ ] 8. The toggle is not centered

• [ ] 9. Is there a way to increase the affordance of those cells? Leaving a clue that there is something that is available when toggling?

[mapache-salvaje]

this gradient text is tough to read in light mode, especially Priority support - I don't think the lighter colors meet contrast guidelines.

[prakhargupta1]

I've fixed all discussed changes except for engineering issues which also exist on current page. Maybe we can address them separately.