[website] Add blog link to pricing table (@zanivan) (#43140)

mui · Aug 1, 2024 · b6b702f · b6b702f
1 parent bacd2db
commit b6b702f
Showing 1 changed file with 44 additions and 6 deletions.
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
@@ -10,6 +10,7 @@ import Tooltip from '@mui/material/Tooltip';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { useRouter } from 'next/router';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
 import LaunchRounded from '@mui/icons-material/LaunchRounded';
 import UnfoldMoreRounded from '@mui/icons-material/UnfoldMoreRounded';
 import { Link } from '@mui/docs/Link';
@@ -142,14 +143,33 @@ export function PlanPrice(props: PlanPriceProps) {
             {priceUnit}
           </Typography>
         </Box>
-        <Box sx={{ minHeight: planPriceMinHeight }}>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 2,
+            mb: 2,
+            minHeight: planPriceMinHeight,
+          }}
+        >
           {(annual || monthlyDisplay) && (
             <Typography variant="body2" color="text.secondary" textAlign="center">
               {priceExplanation}
             </Typography>
           )}
-          <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }} textAlign="center">
-            {'No additional fee beyond 10 devs.'}
+
+          <Typography variant="body2" sx={{ color: 'text.secondary', textAlign: 'center' }}>
+            No extra fees for orders with over 10 devs&nbsp;
+            <span>
+              <Tooltip title="Our pricing policies are changing. Read more on our blog.">
+                <Link href="https://mui.com/pricing">
+                  by Aug 30
+                  <OpenInNewRoundedIcon sx={{ fontSize: '16px', ml: 0.5 }} />
+                </Link>
+              </Tooltip>
+            </span>
+            .
           </Typography>
         </Box>
       </React.Fragment>
@@ -206,14 +226,32 @@ export function PlanPrice(props: PlanPriceProps) {
           {priceUnit}
         </Typography>
       </Box>
-      <Box sx={{ minHeight: planPriceMinHeight }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 2,
+          mb: 2,
+          minHeight: planPriceMinHeight,
+        }}
+      >
         {(annual || monthlyDisplay) && (
           <Typography variant="body2" color="text.secondary" textAlign="center">
             {priceExplanation}
           </Typography>
         )}
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }} textAlign="center">
-          🐦 Early bird special (25% off).
+        <Typography variant="body2" sx={{ color: 'text.secondary', textAlign: 'center' }}>
+          🐦 Early Bird: <strong>25% off</strong> if ordered &nbsp;
+          <span>
+            <Tooltip title="Our pricing policies are changing. Read more on our blog.">
+              <Link href="https://mui.com/pricing">
+                by Aug 30
+                <OpenInNewRoundedIcon sx={{ fontSize: '16px', ml: 0.5 }} />{' '}
+              </Link>
+            </Tooltip>
+          </span>
+          .
         </Typography>
       </Box>
     </React.Fragment>