[website] Add enterprise plan

docs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

docs/pages/pricing.tsx

@@ -13,7 +13,9 @@ import HeroEnd from 'docs/src/components/home/HeroEnd';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
+import { PrioritySupportProvider } from 'docs/src/components/pricing/PrioritySupportContext';
 import { LicenseModelProvider } from 'docs/src/components/pricing/LicenseModelContext';
+import PricingCards from 'docs/src/components/pricing/PricingCards';
 
 export default function Pricing() {
   return (
@@ -27,16 +29,21 @@ export default function Pricing() {
       <AppHeader />
       <main id="main-content">
         <HeroPricing />
-        <Divider />
         <LicenseModelProvider>
-          {/* Mobile, Tablet */}
-          <Container sx={{ display: { xs: 'block', md: 'none' }, pb: 3, mt: '-1px' }}>
-            <PricingList />
-          </Container>
-          {/* Desktop */}
-          <Container sx={{ display: { xs: 'none', md: 'block' } }}>
-            <PricingTable />
-          </Container>
+          <PrioritySupportProvider>
+            <Container sx={{ display: { xs: 'none', md: 'block' } }}>
+              <PricingCards />
+            </Container>
+            <Divider />
+            {/* Mobile, Tablet */}
+            <Container sx={{ display: { xs: 'block', md: 'none' }, pb: 3, mt: '-1px' }}>
+              <PricingList />
+            </Container>
+            {/* Desktop */}
+            <Container sx={{ display: { xs: 'none', md: 'block' } }}>
+              <PricingTable />
+            </Container>
+          </PrioritySupportProvider>
         </LicenseModelProvider>
         <PricingWhatToExpect />
         <Divider />

docs/src/components/pricing/InfoPrioritySupport.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import { usePrioritySupport } from 'docs/src/components/pricing/PrioritySupportContext';
+
+export default function InfoPrioritySupport(props: {
+  value: React.ReactNode;
+  value2?: React.ReactNode;
+  metadata?: React.ReactNode;
+  metadata2?: React.ReactNode;
+}) {
+  const { value, value2, metadata, metadata2 } = props;
+  const { prioritySupport } = usePrioritySupport();
+
+  return (
+    <React.Fragment>
+      {prioritySupport ? (
+        <React.Fragment>
+          <Typography variant="body2" sx={{ color: 'text.secondary', textAlign: 'center' }}>
+            {value}
+          </Typography>
+          <Typography
+            variant="caption"
+            sx={{
+              color: 'text.secondary',
+              fontWeight: 'normal',
+              display: 'block',
+              mt: 0.4,
+              textAlign: 'center',
+            }}
+          >
+            {metadata}
+          </Typography>
+        </React.Fragment>
+      ) : (
+        <React.Fragment>
+          <Typography variant="body2" sx={{ color: 'text.secondary', textAlign: 'center' }}>
+            {value2}
+          </Typography>
+          <Typography
+            variant="caption"
+            sx={{
+              color: 'text.secondary',
+              fontWeight: 'normal',
+              display: 'block',
+              mt: 0.4,
+              textAlign: 'center',
+            }}
+          >
+            {metadata2}
+          </Typography>
+        </React.Fragment>
+      )}
+    </React.Fragment>
+  );
+}