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

…40515)

Co-authored-by: David Cnoops <[email protected]>
Co-authored-by: zanivan <[email protected]>

docs/pages/design-kits.tsx

@@ -7,8 +7,8 @@ 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 DesignKitFAQ from 'docs/src/components/productDesignKit/DesignKitFAQ';
-import Testimonials from 'docs/src/components/home/Testimonials';
-import HeroEnd from 'docs/src/components/home/HeroEnd';
+import SyncFeatures from 'docs/src/components/productDesignKit/SyncFeatures';
+import MaterialEnd from 'docs/src/components/productMaterial/MaterialEnd';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import References, { DESIGNKITS_CUSTOMERS } from 'docs/src/components/home/References';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
@@ -31,11 +31,11 @@ export default function DesignKits() {
         <Divider />
         <DesignKitDemo />
         <Divider />
-        <DesignKitFAQ />
+        <SyncFeatures />
         <Divider />
-        <Testimonials />
+        <DesignKitFAQ />
         <Divider />
-        <HeroEnd />
+        <MaterialEnd noFaq />
       </main>
       <Divider />
       <AppFooter />

docs/src/components/action/Item.tsx

@@ -91,7 +91,9 @@ export default function Item({
         p: 2,
         pr: smallerIconDistance ? 3 : 2,
         display: 'flex',
-        alignItems: 'center',
+        flexDirection: { xs: 'column', sm: 'row' },
+        alignItems: { xs: 'start', sm: 'center' },
+        gap: { xs: 2, sm: 0.5 },
         ...props.sx,
       }}
     >

docs/src/components/action/NpmCopyButton.tsx

@@ -13,6 +13,7 @@ const Button = styled('button')(({ theme }) => ({
   marginTop: 16,
   cursor: 'copy',
   padding: 0,
+  position: 'relative',
   display: 'inline-flex',
   alignItems: 'flex-start',
   justifyContent: 'center',
@@ -43,8 +44,8 @@ const Button = styled('button')(({ theme }) => ({
   },
   '& svg': {
     display: 'inline-block',
-    position: 'relative',
-    right: 3,
+    position: 'absolute',
+    right: -24,
     top: 1,
     opacity: 0,
     transition: theme.transitions.create('opacity', {

docs/src/components/header/HeaderNavBar.tsx

@@ -69,9 +69,9 @@ const Navigation = styled('nav')(({ theme }) => [
 const PRODUCT_IDS = [
   'product-core',
   'product-advanced',
+  'product-toolpad',
   'product-templates',
   'product-design',
-  'product-toolpad',
 ];
 
 type ProductSubMenuProps = {
@@ -282,29 +282,29 @@ export default function HeaderNavBar() {
                     <li>
                       <ProductSubMenu
                         id={PRODUCT_IDS[2]}
-                        href={ROUTES.productTemplates}
-                        icon={<IconImage name="product-templates" />}
-                        name="Templates"
-                        description="Fully built, out-of-the-box, templates for your application."
+                        href={ROUTES.productToolpad}
+                        icon={<IconImage name="product-toolpad" />}
+                        name="Toolpad"
+                        chip={<Chip label="Beta" size="small" color="primary" variant="outlined" />}
+                        description="Low-code admin builder."
                       />
                     </li>
                     <li>
                       <ProductSubMenu
                         id={PRODUCT_IDS[3]}
-                        href={ROUTES.productDesignKits}
-                        icon={<IconImage name="product-designkits" />}
-                        name="Design kits"
-                        description="Our components available in your favorite design tool."
+                        href={ROUTES.productTemplates}
+                        icon={<IconImage name="product-templates" />}
+                        name="Templates"
+                        description="Fully built, out-of-the-box, templates for your application."
                       />
                     </li>
                     <li>
                       <ProductSubMenu
                         id={PRODUCT_IDS[4]}
-                        href={ROUTES.productToolpad}
-                        icon={<IconImage name="product-toolpad" />}
-                        name="Toolpad"
-                        chip={<Chip label="Beta" size="small" color="primary" variant="outlined" />}
-                        description="Low-code admin builder."
+                        href={ROUTES.productDesignKits}
+                        icon={<IconImage name="product-designkits" />}
+                        name="Design Kits"
+                        description="Material UI components in your favorite design tool."
                       />
                     </li>
                   </ul>

docs/src/components/header/HeaderNavDropdown.tsx

@@ -71,8 +71,8 @@ const PRODUCTS = [
     href: ROUTES.productTemplates,
   },
   {
-    name: 'Design kits',
-    description: 'Our components available in your favorite design tool.',
+    name: 'Design Kits',
+    description: 'Material UI components in your favorite design tool.',
     href: ROUTES.productDesignKits,
   },
   {

docs/src/components/home/CompaniesGrid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
 import IconImage, { IconImageProps } from 'docs/src/components/icon/IconImage';
 
 export const CORE_CUSTOMERS: Array<IconImageProps> = [
@@ -189,7 +189,6 @@ export default function CompaniesGrid({ data }: { data: Array<IconImageProps> })
       {data.map((imgProps) => (
         <Grid
           key={imgProps.name}
-          item
           xs={6}
           sm={4}
           md={2}

docs/src/components/home/DesignKits.tsx

@@ -29,34 +29,37 @@ const Image = styled('img')(({ theme }) => ({
   objectFit: 'cover',
   transitionProperty: 'all',
   transitionDuration: '150ms',
-  boxShadow: '0px 4px 20px rgba(61, 71, 82, 0.25)',
+  boxShadow: '0 4px 20px rgba(61, 71, 82, 0.2)',
   ...theme.applyDarkStyles({
     borderColor: (theme.vars || theme).palette.grey[800],
-    boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.6)',
+    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.6)',
   }),
 }));
 
 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)}`,
+    boxShadow: `0 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)}`,
+      boxShadow: `0 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],
-    boxShadow: `0px 2px 12px ${alpha(theme.palette.primaryDark[800], 0.5)}`,
+    backgroundColor: alpha(theme.palette.primaryDark[900], 0.8),
+    borderColor: (theme.vars || theme).palette.primaryDark[600],
+    boxShadow: `0 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`}