add content about MUI Connect on the Material + Design kits pages

docs/pages/design-kits.tsx

@@ -5,9 +5,8 @@ import AppHeader from 'docs/src/layouts/AppHeader';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import DesignKitHero from 'docs/src/components/productDesignKit/DesignKitHero';
 import DesignKitValues from 'docs/src/components/productDesignKit/DesignKitValues';
-import DesignKitDemo from 'docs/src/components/productDesignKit/DesignKitDemo';
+import MaterialDesignKits from 'docs/src/components/productMaterial/MaterialDesignKits';
 import DesignKitFAQ from 'docs/src/components/productDesignKit/DesignKitFAQ';
-import Testimonials from 'docs/src/components/home/Testimonials';
 import HeroEnd from 'docs/src/components/home/HeroEnd';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import References, { DESIGNKITS_CUSTOMERS } from 'docs/src/components/home/References';
@@ -29,12 +28,10 @@ export default function DesignKits() {
         <Divider />
         <DesignKitValues />
         <Divider />
-        <DesignKitDemo />
+        <MaterialDesignKits gradient />
         <Divider />
         <DesignKitFAQ />
         <Divider />
-        <Testimonials />
-        <Divider />
         <HeroEnd />
       </main>
       <Divider />

docs/src/components/home/DesignKits.tsx

@@ -40,23 +40,26 @@ const Anchor = styled('a')(({ theme }) => [
   {
     display: 'inline-block',
     position: 'relative',
-    transitionProperty: 'all',
-    transitionDuration: '150ms',
+    transition: 'all 120ms ease',
     borderRadius: '50%',
     border: '1px solid',
     borderColor: (theme.vars || theme).palette.grey[200],
     boxShadow: `0px 2px 12px ${alpha(theme.palette.primary[200], 0.3)}`,
+    backgroundColor: '#FFF',
     '&:hover, &:focus': {
       borderColor: (theme.vars || theme).palette.primary[300],
       boxShadow: `0px 4px 20px ${alpha(theme.palette.primary[400], 0.3)}`,
+      backgroundColor: (theme.vars || theme).palette.primary[50],
     },
   } as const,
   theme.applyDarkStyles({
-    borderColor: (theme.vars || theme).palette.primary[900],
+    backgroundColor: alpha(theme.palette.primaryDark[900], 0.8),
+    borderColor: (theme.vars || theme).palette.primaryDark[600],
     boxShadow: `0px 2px 12px ${alpha(theme.palette.primaryDark[800], 0.5)}`,
     '&:hover, &:focus': {
+      backgroundColor: alpha(theme.palette.primary[900], 0.8),
       borderColor: (theme.vars || theme).palette.primary[700],
-      boxShadow: `0 2px 20px 0 ${alpha(theme.palette.primary[800], 0.5)}`,
+      boxShadow: `0 2px 16px 0 ${alpha(theme.palette.primary[800], 0.5)}`,
     },
   }),
 ]);
@@ -94,18 +97,12 @@ const DesignToolLogo = React.forwardRef<
     <Box
       ref={ref}
       {...props}
-      sx={[
-        (theme) => ({
-          display: 'flex',
-          backgroundColor: '#FFF',
-          p: 2,
-          borderRadius: '50%',
-          ...theme.applyDarkStyles({
-            backgroundColor: alpha(theme.palette.primary[900], 0.5),
-          }),
-        }),
+      sx={{
+        display: 'flex',
+        p: 2,
+        borderRadius: '50%',
         ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
-      ]}
+      }}
     >
       <img
         src={`/static/branding/design-kits/${brand}-logo.svg`}

docs/src/components/productDesignKit/DesignKitFAQ.tsx

@@ -14,6 +14,16 @@ import InternalLink from 'docs/src/modules/components/Link';
 import Section from 'docs/src/layouts/Section';
 
 const faqData = [
+  {
+    summary: 'How long until MUI Connect is out?',
+    detail: (
+      <React.Fragment>
+        We’re still polishing it for a &quot;stable&quot; release. Add your email in the input
+        available in the section above to be notified of any updates as we get further into
+        development.
+      </React.Fragment>
+    ),
+  },
   {
     summary: 'What long-term support do you offer?',
     detail: (
@@ -31,18 +41,18 @@ const faqData = [
       <React.Fragment>
         The number of licenses purchased must correspond to the maximum number of editors working
         concurrently in a 24 hour period. An editor is somebody contributing changes to the designed
-        screens that use the UI kits. No licenses are required for viewing the designs.
+        screens that use the Design kits. No licenses are required for viewing the designs.
       </React.Fragment>
     ),
   },
   {
-    summary: 'The UI kit got an update. How do I get it?',
+    summary: 'The Design kit got an update. How do I get it?',
     detail: (
       <React.Fragment>
         We&apos;ll send you an email when a new release is available. You can access the item on the{' '}
         <InternalLink href="https://mui.com/store/account/downloads/">download</InternalLink> page
-        of your store account. You can find a detailed description of the changes under the
-        &quot;Changelog&quot; tab on this page.
+        of your store account and find a detailed description of the changes under
+        the&quot;Changelog&quot; tab on this page..
       </React.Fragment>
     ),
   },
@@ -64,7 +74,7 @@ const faqData = [
     detail: (
       <React.Fragment>
         We aim to keep feature parity between the Figma, Sketch, and Adobe XD kits where possible.
-        We have a 50% off coupon for past customers who want to switch between two design tools.
+        We have a 50% off coupon for past customers who want to switch between them.
       </React.Fragment>
     ),
   },
@@ -77,7 +87,7 @@ const Accordion = styled(MuiAccordion)(({ theme }) => ({
     borderRadius: theme.shape.borderRadius,
   },
   '&:hover': {
-    boxShadow: '1px 1px 20px 0 rgb(90 105 120 / 20%)',
+    boxShadow: '1px 1px 8px 0 rgb(90 105 120 / 20%)',
   },
   '&:not(:last-of-type)': {
     marginBottom: theme.spacing(2),
@@ -158,18 +168,17 @@ export default function DesignKitFAQ() {
               borderStyle: 'dashed',
               borderColor: 'grey.300',
               bgcolor: 'white',
+              textAlign: 'left',
               ...theme.applyDarkStyles({
                 borderColor: 'primaryDark.600',
                 bgcolor: 'primaryDark.800',
               }),
             })}
           >
-            <Box sx={{ textAlign: 'left' }}>
-              <Typography variant="body2" color="text.primary" fontWeight="bold">
-                Got any questions unanswered or need more help?
-              </Typography>
-            </Box>
-            <Typography variant="body2" color="text.primary" sx={{ my: 1, textAlign: 'left' }}>
+            <Typography variant="body2" color="text.primary" fontWeight="bold" gutterBottom>
+              Got any questions unanswered or need more help?
+            </Typography>
+            <Typography variant="body2" color="text.primary" gutterBottom>
               From community help to premium business support, we&apos;re here to help.
             </Typography>
             <Button

docs/src/components/productDesignKit/DesignKitHero.tsx

@@ -2,12 +2,10 @@ import * as React from 'react';
 import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-import Button from '@mui/material/Button';
-import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 import GradientText from 'docs/src/components/typography/GradientText';
 import HeroContainer from 'docs/src/layouts/HeroContainer';
 import IconImage from 'docs/src/components/icon/IconImage';
-import Link from 'docs/src/modules/components/Link';
+import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
 import {
   DesignKitImagesSet1,
   DesignKitImagesSet2,
@@ -46,17 +44,12 @@ export default function TemplateHero() {
             Pick your favorite design tool to enjoy and use Material UI components. Boost
             consistency and facilitate communication when working with developers.
           </Typography>
-          <Button
-            component={Link}
-            noLinkStyle
-            href="https://mui.com/store/?utm_source=marketing&utm_medium=referral&utm_campaign=design-cta#design"
-            size="large"
-            variant="contained"
-            endIcon={<KeyboardArrowRightRounded />}
-            sx={{ width: { xs: '100%', sm: 'auto' } }}
-          >
-            Buy now
-          </Button>
+          <GetStartedButtons
+            primaryLabel="Buy now"
+            primaryUrl="https://mui.com/store/?utm_source=marketing&utm_medium=referral&utm_campaign=design-cta#design"
+            secondaryLabel="Figma Preview"
+            secondaryUrl="https://www.figma.com/community/file/912837788133317724/material-ui-for-figma-and-mui-x"
+          />
         </Box>
       }
       right={
@@ -70,9 +63,10 @@ export default function TemplateHero() {
               width: '100%',
               height: '100%',
               zIndex: 1,
-              background: `linear-gradient(90deg, ${
-                (theme.vars || theme).palette.primaryDark[900]
-              } 1%, ${alpha(theme.palette.primaryDark[900], 0.5)})`,
+              background: `linear-gradient(90deg, ${alpha(
+                theme.palette.primaryDark[900],
+                0.8,
+              )} 1%, ${alpha(theme.palette.primaryDark[900], 0.1)})`,
               opacity: 0,
               ...theme.applyDarkStyles({
                 opacity: 1,