[website] Add content about the Sync plugin in the Material UI page

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
@@ -14,6 +13,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&apos;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 +40,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 +73,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 +86,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 +167,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,

docs/src/components/productMaterial/MUIConnectSignUp.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme, styled, alpha } from '@mui/material/styles';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import FormLabel from '@mui/material/FormLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import InputBase, { inputBaseClasses } from '@mui/material/InputBase';
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+
+const MUI_CONNECT_TESTER_SIGNUP_URL =
+  'https://f0433e60.sibforms.com/serve/MUIFAEl9y_vZ59Eato2gk5uDWRUAmkO_vJPSHZa_neoS1qya4NBd-0xFNSN_2ag0OCIx6VFJFF5TJk7ts1jZt1NmhkzvDC9CTT7oobVw_PHr1NR5FOfzBZqlv-bdms8_skT4IqBrgAYF6BUAEbI9rONx2h_3kkd0tLk16NnCkSJoIKJ41vasa3RRbbgt1NzBTLs9ojkbnxFO1dXp';
+
+const Form = styled('form')({});
+
+function searchParams(params: any) {
+  return Object.keys(params)
+    .filter((key) => params[key] != null)
+    .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
+    .join('&');
+}
+
+export default function MUIConnectSignUp({ sx }: { sx?: SxProps<Theme> }) {
+  const [form, setForm] = React.useState<{
+    email: string;
+    status: 'initial' | 'loading' | 'failure' | 'sent';
+  }>({
+    email: '',
+    status: 'initial',
+  });
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setForm((current) => ({ ...current, status: 'loading' }));
+    try {
+      await fetch(MUI_CONNECT_TESTER_SIGNUP_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        mode: 'no-cors',
+        body: searchParams({
+          EMAIL: form.email,
+          email_address_check: '',
+          locale: 'en',
+        }),
+      });
+      setForm((current) => ({ ...current, status: 'sent' }));
+    } catch (error) {
+      setForm((current) => ({ ...current, status: 'failure' }));
+    }
+  };
+  if (form.status === 'sent') {
+    return (
+      <Alert
+        severity="success"
+        sx={[
+          (theme) => ({
+            bgcolor: 'success.50',
+            ...theme.applyDarkStyles({
+              bgcolor: 'primaryDark.700',
+            }),
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+        iconMapping={{
+          success: (
+            <CheckCircleRoundedIcon
+              fontSize="small"
+              sx={(theme: Theme) => ({
+                color: 'success.700',
+                ...theme.applyDarkStyles({
+                  color: 'success.600',
+                }),
+              })}
+            />
+          ),
+        }}
+      >
+        <Box mt="3px">
+          Thanks for signing up! We will contact you when you can start testing MUI Connect.
+        </Box>
+      </Alert>
+    );
+  }
+  return (
+    <Form onSubmit={handleSubmit} sx={sx}>
+      <FormLabel
+        htmlFor="email-subscribe"
+        sx={{ typography: 'caption', color: 'text.secondary', fontWeight: 'medium' }}
+      >
+        Your email
+      </FormLabel>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'row' },
+          mt: 1,
+          gap: 1.5,
+        }}
+      >
+        <InputBase
+          id="email-subscribe"
+          name="email"
+          type="email"
+          placeholder="[email protected]"
+          value={form.email}
+          onChange={(event) => setForm({ email: event.target.value, status: 'initial' })}
+          inputProps={{ required: true }}
+          sx={[
+            (theme) => ({
+              flexGrow: 1,
+              minWidth: 220,
+              borderRadius: 1,
+              border: '1px solid',
+              bgcolor: '#fff',
+              boxShadow: `inset 0 1px 2px ${
+                (theme.vars || theme).palette.grey[50]
+              }, 0 1px 0.5px ${alpha(theme.palette.grey[100], 0.6)}`,
+              borderColor: 'grey.200',
+              typography: 'body2',
+              '&:hover': {
+                borderColor: 'grey.300',
+                boxShadow: `inset 0 1px 2px ${(theme.vars || theme).palette.grey[50]}, 0 1px 2px ${
+                  (theme.vars || theme).palette.grey[100]
+                }`,
+              },
+              [`&.${inputBaseClasses.focused}`]: {
+                boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary[200]}`,
+                borderColor: 'primary.300',
+              },
+              [`& .${inputBaseClasses.input}`]: {
+                borderRadius: `calc(${theme.shape.borderRadius}px - 1px)`,
+                py: 1,
+                px: 1.5,
+              },
+            }),
+            (theme) =>
+              theme.applyDarkStyles({
+                bgcolor: 'primaryDark.800',
+                boxShadow: `inset 0 1px 1px ${
+                  (theme.vars || theme).palette.primaryDark[900]
+                }, 0 1px 0.5px ${(theme.vars || theme).palette.common.black}`,
+                borderColor: 'primaryDark.600',
+                '&:hover': {
+                  borderColor: 'primaryDark.400',
+                  boxShadow: `inset 0 1px 1px ${
+                    (theme.vars || theme).palette.primaryDark[900]
+                  }, 0 1px 2px ${(theme.vars || theme).palette.common.black}`,
+                },
+                [`&.${inputBaseClasses.focused}`]: {
+                  boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary[800]}`,
+                  borderColor: 'primary.600',
+                },
+              }),
+          ]}
+        />
+        <Button variant="outlined" disabled={form.status === 'loading'} type="submit">
+          Sign up
+        </Button>
+      </Box>
+      {form.status === 'failure' && (
+        <FormHelperText
+          sx={(theme) => ({
+            color: 'warning.800',
+            ...theme.applyDarkStyles({
+              color: 'warning.500',
+            }),
+          })}
+        >
+          Oops! Something went wrong, please try again later.
+        </FormHelperText>
+      )}
+    </Form>
+  );
+}