[website] Update the pricing page for the MUI X premium plan release (#…

…32458) * Update prices in pricing page. * Small clean up on pricing page. * Fix punctuaction in pricing page. * Update docs/src/components/pricing/PricingTable.tsx Fix duplicated word. Co-authored-by: danilo leal <[email protected]> * plan info copy update * price change * remove flat price disclaimer * couple of design adjustments * make it available in mobile * fix premium button and adjust styles * Update FAQ, Early bird, What to expect test, and links to the store * Add Premium to -Available with MIT and commercial licenses- section on X homepage * fix lint * Update Support info in pricing table * Update links to the store * prettier * Fix lint on support update * Take -technical advisory- out of features table until we figure out what the Enterprise support Add-On looks like. * Fix anchoring of Early bird container * Simplifying Update docs/src/components/pricing/FAQ.tsx Co-authored-by: Sam Sycamore <[email protected]> * Simplifying Update docs/src/components/pricing/FAQ.tsx Co-authored-by: Sam Sycamore <[email protected]> * Eliminiating nested colons and semi-colons Update docs/src/components/productX/XPlans.tsx Co-authored-by: Sam Sycamore <[email protected]> * Add double colon to the Anchorable Container pseudo element * prettier * small tweak to the What to expect section * small writing tweak * Update hero section * Apply some of Olivier's suggestions from code review Co-authored-by: Olivier Tassinari <[email protected]> * Update docs/src/components/pricing/PricingTable.tsx Co-authored-by: Olivier Tassinari <[email protected]> * Add excel to table * Add back a mention about the price cap * prettier * up order of row reorder in comparison table * Add quick filter to comparison table * simpler scroll anchor scroll logic * fix p > p invalid HTML structure Co-authored-by: danilo leal <[email protected]> Co-authored-by: siriwatknp <[email protected]> Co-authored-by: Sam Sycamore <[email protected]> Co-authored-by: Olivier Tassinari <[email protected]>
mui · May 12, 2022 · f22a532 · f22a532
1 parent feddf0e
commit f22a532
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 195 deletions.
diff --git a/docs/src/components/pricing/EarlyBird.tsx b/docs/src/components/pricing/EarlyBird.tsx
@@ -9,7 +9,7 @@ import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRou
 
 export default function EarlyBird() {
   return (
-    <Container sx={{ pt: 2, pb: { xs: 2, sm: 4, md: 8 } }} id="early-bird">
+    <Container sx={{ pt: 2, pb: { xs: 2, sm: 4, md: 8 }, scrollMarginTop: '80px' }} id="early-bird">
       <Stack
         sx={{
           borderRadius: 1,
@@ -35,16 +35,15 @@ export default function EarlyBird() {
             🐦&nbsp;&nbsp;Early bird special!
           </Typography>
           <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 700 }}>
-            Buy now at a reduced price (~25% off), and get early access to MUI X Pro, with the added
-            opportunity to influence its development. This perpetual license gives access to support
-            and updates for one year. The early bird special is available for a limited time, so
-            don&apos;t miss this opportunity!
+            Buy now at a reduced price (~25% off), and get early access to MUI X Premium, with the
+            added opportunity to influence its development. The early bird special is available for
+            a limited time, so don&apos;t miss this opportunity!
           </Typography>
         </Box>
         <Button
           component={Link}
           noLinkStyle
-          href="https://mui.com/store/items/material-ui-pro/"
+          href="https://mui.com/store/items/mui-x-premium/"
           variant="contained"
           fullWidth
           endIcon={<KeyboardArrowRightRounded />}

diff --git a/docs/src/components/pricing/FAQ.tsx b/docs/src/components/pricing/FAQ.tsx
@@ -41,14 +41,12 @@ const faqData = [
     ),
   },
   {
-    summary: 'How many licenses do I need?',
+    summary: 'How many developer seats do I need?',
     detail: (
       <React.Fragment>
-        The number of licenses purchased must correspond to the number of concurrent developers
-        contributing changes to the front-end code of a project that uses MUI X Pro. However, the
-        number of developer licenses required is capped at 10 developers for the <b>Pro plan</b> and
-        10 developers/project for the <b>Premium plan</b>, developers above this cap don't need to
-        be licensed.
+        The number of seats purchased on your license must correspond to the number of concurrent
+        developers contributing changes to the front-end code of a project that uses MUI X Pro or
+        Premium.
         <br />
         <br />
         <b>Example 1.</b> Company 'A' is developing an application named 'AppA'. The app needs to
@@ -92,15 +90,12 @@ const faqData = [
     summary: 'Am I allowed to use the product after the update entitlement expires?',
     detail: (
       <React.Fragment>
-        Yes. The license is perpetual, so you are allowed to continue using the product even after
-        the entitlement expires. However, you will be using the last product version released before
-        this time. You will lose access to subsequently released functionality and updates, as well
-        as technical support.
+        Yes. You can continue to use the product in production environments after the entitlement
+        expires. But you will need to keep your subscription active to continue development, update
+        for new features, or gain access to technical support.
         <br />
         <br />
-        If you wish to preserve your access to product updates (new features and fixes) and
-        dedicated support, you need to renew your license, please{' '}
-        <Link href="mailto:[email protected]">contact sales</Link>.
+        To renew your license, please <Link href="mailto:[email protected]">contact sales</Link>.
       </React.Fragment>
     ),
   },

diff --git a/docs/src/components/pricing/HeroPricing.tsx b/docs/src/components/pricing/HeroPricing.tsx
@@ -29,8 +29,7 @@ export default function HeroPricing() {
           Start using <GradientText>MUI</GradientText> for free!
         </Typography>
         <Typography color="text.secondary" textAlign="center" sx={{ maxWidth: 500 }}>
-          The community edition lets you get going right away. Switch to MUI&nbsp;X&nbsp;Pro to get
-          more components & professional support.
+          Switch to a commercial plan to access advanced features & professional support.
         </Typography>
       </Box>
       <Divider />

diff --git a/docs/src/components/pricing/PricingList.tsx b/docs/src/components/pricing/PricingList.tsx
@@ -44,19 +44,21 @@ const Plan = React.forwardRef<
         </Button>
       ) : (
         <Button
-          variant={plan === 'pro' ? 'contained' : 'outlined'}
+          variant={plan.match(/(pro|premium)/) ? 'contained' : 'outlined'}
           fullWidth
           component={Link}
           noLinkStyle
           href={
-            plan === 'community'
-              ? '/material-ui/getting-started/usage/'
-              : 'https://mui.com/store/items/material-ui-pro/'
+            {
+              community: '/material-ui/getting-started/usage/',
+              pro: 'https://mui.com/store/items/mui-x-pro/',
+              premium: 'https://mui.com/store/items/mui-x-premium/',
+            }[plan]
           }
           endIcon={<KeyboardArrowRightRounded />}
           sx={{ py: 1 }}
         >
-          {plan === 'pro' ? 'Buy now' : 'Get started'}
+          {plan.match(/(pro|premium)/) ? 'Buy now' : 'Get started'}
         </Button>
       )}
       {benefits &&
@@ -88,7 +90,7 @@ export default function PricingList() {
         sx={{
           mb: 2,
           position: 'sticky',
-          top: 63,
+          top: 55,
           bgcolor: 'background.paper',
           zIndex: 1,
           mx: { xs: -2, sm: -3 },
@@ -129,7 +131,7 @@ export default function PricingList() {
       {planIndex === 2 && (
         <Fade in>
           <div>
-            <Plan plan="premium" unavailable />
+            <Plan plan="premium" />
             <PricingTable columnHeaderHidden plans={['premium']} />
           </div>
         </Fade>