[website] Add a templates & design kits section to the Material UI pa…

…ge (#38617)

Co-authored-by: Olivier Tassinari <[email protected]>

docs/pages/material-ui.tsx

@@ -7,6 +7,8 @@ import MaterialHero from 'docs/src/components/productMaterial/MaterialHero';
 import MaterialComponents from 'docs/src/components/productMaterial/MaterialComponents';
 import MaterialTheming from 'docs/src/components/productMaterial/MaterialTheming';
 import MaterialStyling from 'docs/src/components/productMaterial/MaterialStyling';
+import MaterialTemplates from 'docs/src/components/productMaterial/MaterialTemplates';
+import MaterialDesignKits from 'docs/src/components/productMaterial/MaterialDesignKits';
 import CoreHeroEnd from 'docs/src/components/productCore/CoreHeroEnd';
 import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References';
 import AppFooter from 'docs/src/layouts/AppFooter';
@@ -32,6 +34,10 @@ export default function Core() {
         <Divider />
         <MaterialStyling />
         <Divider />
+        <MaterialTemplates />
+        <Divider />
+        <MaterialDesignKits />
+        <Divider />
         <CoreHeroEnd />
         <Divider />
       </main>

docs/src/components/action/Item.tsx

@@ -3,15 +3,20 @@ import { useTheme } from '@mui/material/styles';
 import Box, { BoxProps } from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 
-export function Group({ desktopColumns = 1, ...props }: { desktopColumns?: number } & BoxProps) {
+export function Group({
+  desktopColumns = 1,
+  rowLayout = false,
+  ...props
+}: { desktopColumns?: number; rowLayout?: boolean } & BoxProps) {
   const theme = useTheme();
   return (
     <Box
       {...props}
       sx={{
-        maxWidth: { md: 500 },
+        maxWidth: rowLayout ? 'none' : { md: 500 },
         overflow: 'auto',
-        display: 'grid',
+        display: { xs: 'grid', sm: rowLayout ? 'flex' : 'grid' },
+        justifyContent: { xs: 'start', sm: rowLayout ? 'center' : null },
         gap: 1,
         gridTemplateColumns: `repeat(${desktopColumns}, 1fr)`,
         '@media (prefers-reduced-motion: no-preference)': {
@@ -96,7 +101,7 @@ export default function Item({
           color="text.primary"
           variant="body2"
           fontWeight="bold"
-          sx={{ display: 'block' }}
+          sx={{ display: 'block', mr: 2 }}
         >
           {title}
         </Typography>

docs/src/components/action/More.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import ButtonBase, { ButtonBaseProps } from '@mui/material/ButtonBase';
 import Typography from '@mui/material/Typography';
-import AddCircleOutlineRounded from '@mui/icons-material/AddCircleOutlineRounded';
+import AddCircleRoundedIcon from '@mui/icons-material/AddCircleRounded';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 
 export default (function More(props: ButtonBaseProps) {
@@ -28,7 +29,7 @@ export default (function More(props: ButtonBaseProps) {
         }
       }}
       sx={[
-        {
+        (theme) => ({
           p: 2,
           display: 'flex',
           alignItems: 'center',
@@ -40,33 +41,43 @@ export default (function More(props: ButtonBaseProps) {
           transitionProperty: 'all',
           transitionDuration: '150ms',
           borderColor: 'grey.200',
+          '& * svg': { transition: '0.2s' },
           '&:hover, &:focus': {
             borderColor: 'primary.main',
-            bgcolor: 'primary.50',
+            bgcolor: alpha(theme.palette.primary[100], 0.4),
+            '* .chevron': { transform: 'translateX(2px)' },
             '@media (hover: none)': {
               bgcolor: 'transparent',
             },
           },
-        },
-        (theme) =>
-          theme.applyDarkStyles({
+          ...theme.applyDarkStyles({
             borderColor: 'primaryDark.600',
             '&:hover, &:focus': {
-              bgcolor: 'primaryDark.700',
+              bgcolor: alpha(theme.palette.primary[900], 0.4),
             },
           }),
+        }),
         ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
       ]}
     >
       <Box component="span" sx={{ mr: 1, px: '3px', lineHeight: 0 }}>
-        <AddCircleOutlineRounded color="primary" fontSize="small" />
+        <AddCircleRoundedIcon color="primary" fontSize="small" />
       </Box>
-      <Typography component="span" color="primary.main" variant="body2" fontWeight="bold">
+      <Typography
+        component="span"
+        color="primary.main"
+        variant="body2"
+        fontWeight="bold"
+        sx={{
+          width: '100%',
+        }}
+      >
         Much more{' '}
         <KeyboardArrowRightRounded
+          className="chevron"
           color="primary"
           fontSize="small"
-          sx={{ verticalAlign: 'middle' }}
+          sx={{ verticalAlign: 'middle', ml: 'auto' }}
         />
       </Typography>
     </ButtonBase>

docs/src/components/home/DesignKits.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
-import Avatar, { AvatarProps } from '@mui/material/Avatar';
+import { AvatarProps } from '@mui/material/Avatar';
 import Box, { BoxProps } from '@mui/material/Box';
 import Slide from 'docs/src/components/animation/Slide';
 import FadeDelay from 'docs/src/components/animation/FadeDelay';
@@ -43,20 +43,27 @@ const Anchor = styled('a')(({ theme }) => [
     transitionProperty: 'all',
     transitionDuration: '150ms',
     borderRadius: '50%',
+    border: '1px solid',
+    borderColor: (theme.vars || theme).palette.grey[200],
+    boxShadow: `0px 2px 12px ${alpha(theme.palette.primary[200], 0.3)}`,
     '&:hover, &:focus': {
-      boxShadow: '0 6px 20px 0 rgba(0,0,0,0.2)',
+      borderColor: (theme.vars || theme).palette.primary[300],
+      boxShadow: `0px 4px 20px ${alpha(theme.palette.primary[400], 0.3)}`,
     },
   } as const,
   theme.applyDarkStyles({
+    borderColor: (theme.vars || theme).palette.primary[900],
+    boxShadow: `0px 2px 12px ${alpha(theme.palette.primaryDark[800], 0.5)}`,
     '&:hover, &:focus': {
-      boxShadow: `0 6px 20px 0 ${alpha(theme.palette.primaryDark[100], 0.5)}`,
+      borderColor: (theme.vars || theme).palette.primary[700],
+      boxShadow: `0 2px 20px 0 ${alpha(theme.palette.primary[800], 0.5)}`,
     },
   }),
 ]);
 
 const DesignToolLink = React.forwardRef<
   HTMLAnchorElement,
-  React.PropsWithChildren<{ brand: 'figma' | 'sketch' | 'xd' }>
+  React.PropsWithChildren<{ brand: 'figma' | 'sketch' | 'adobexd' }>
 >(function DesignToolLink({ brand, ...props }, ref) {
   return (
     <Anchor
@@ -68,7 +75,8 @@ const DesignToolLink = React.forwardRef<
             'https://mui.com/store/items/figma-react/?utm_source=marketing&utm_medium=referral&utm_campaign=home-products',
           sketch:
             'https://mui.com/store/items/sketch-react/?utm_source=marketing&utm_medium=referral&utm_campaign=home-products',
-          xd: 'https://mui.com/store/items/adobe-xd-react/?utm_source=marketing&utm_medium=referral&utm_campaign=home-products',
+          adobexd:
+            'https://mui.com/store/items/adobe-xd-react/?utm_source=marketing&utm_medium=referral&utm_campaign=home-products',
         }[brand]
       }
       target="_blank"
@@ -81,24 +89,33 @@ const DesignToolLink = React.forwardRef<
 
 const DesignToolLogo = React.forwardRef<
   HTMLImageElement,
-  { brand: 'figma' | 'sketch' | 'xd' } & AvatarProps
+  { brand: 'figma' | 'sketch' | 'adobexd' } & AvatarProps
 >(function DesignToolLogo({ brand, ...props }, ref) {
   return (
-    <Avatar
+    <Box
       ref={ref}
-      src={`/static/branding/design-kits/designkits-${brand}.png`}
-      alt=""
       {...props}
       sx={[
         (theme) => ({
-          boxShadow: `0px 3.57436px 44.6795px ${'rgba(90, 105, 120, 0.36)'}`,
+          display: 'flex',
+          backgroundColor: '#FFF',
+          p: 2,
+          borderRadius: '50%',
           ...theme.applyDarkStyles({
-            boxShadow: `0px 3.57436px 44.6795px ${(theme.vars || theme).palette.primaryDark[900]}`,
+            backgroundColor: alpha(theme.palette.primary[900], 0.5),
           }),
         }),
         ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
       ]}
-    />
+    >
+      <img
+        src={`/static/branding/design-kits/${brand}-logo.svg`}
+        alt=""
+        loading="lazy"
+        width="60"
+        height="60"
+      />
+    </Box>
   );
 });
 
@@ -184,7 +201,7 @@ export function DesignKitImagesSet2({
 }
 
 export function DesignKitTools({ disableLink, ...props }: { disableLink?: boolean } & BoxProps) {
-  function renderTool(brand: 'figma' | 'sketch' | 'xd') {
+  function renderTool(brand: 'figma' | 'sketch' | 'adobexd') {
     if (disableLink) {
       return <DesignToolLogo brand={brand} />;
     }
@@ -216,7 +233,7 @@ export function DesignKitTools({ disableLink, ...props }: { disableLink?: boolea
     >
       <FadeDelay delay={200}>{renderTool('figma')}</FadeDelay>
       <FadeDelay delay={400}>{renderTool('sketch')}</FadeDelay>
-      <FadeDelay delay={600}>{renderTool('xd')}</FadeDelay>
+      <FadeDelay delay={600}>{renderTool('adobexd')}</FadeDelay>
     </Box>
   );
 }

docs/src/components/home/MuiStatistics.tsx

@@ -18,9 +18,8 @@ export default function MuiStatistics() {
           <Box
             sx={(theme) => ({
               height: '100%',
-              p: 0.5,
               pl: 2,
-              borderLeft: '2px solid',
+              borderLeft: '1px solid',
               borderColor: 'primary.100',
               ...theme.applyDarkStyles({
                 borderColor: 'primaryDark.600',
@@ -40,16 +39,7 @@ export default function MuiStatistics() {
             >
               {item.title}
             </Typography>
-            <Typography
-              sx={(theme) => ({
-                color: 'grey.800',
-                ...theme.applyDarkStyles({
-                  color: 'grey.300',
-                }),
-              })}
-            >
-              {item.metadata}
-            </Typography>
+            <Typography color="text.secondary">{item.metadata}</Typography>
           </Box>
         </Grid>
       ))}

docs/src/components/productCore/CoreHeroEnd.tsx

@@ -38,7 +38,7 @@ export default function CoreHeroEnd() {
               description="The core components were crafted by many hands, all over the world. Join us today to get help when you need it, and lend a hand when you can."
             />
             <Button
-              aria-label="Go to documentation"
+              aria-label="Learn more"
               component={Link}
               href={ROUTES.communityHelp}
               noLinkStyle

docs/src/components/productDesignKit/DesignKitDemo.tsx

@@ -44,13 +44,13 @@ export default function TemplateDemo() {
         <Grid item md={6} sx={{ minWidth: 0 }}>
           <Box sx={{ maxWidth: 500 }}>
             <SectionHeadline
-              overline="Features"
+              overline="Design kits"
               title={
                 <Typography variant="h2">
                   Upgrade your <GradientText>design workflow</GradientText>
                 </Typography>
               }
-              description="The Design kits contain many of the Material UI components with states, variations, colors, typography, and icons. We frequently update it to sync with the most up-to-date Material UI release."
+              description="The Design kits contain many of the Material UI components with states, variations, colors, typography, and icons. We frequently update it to sync with the most up-to-date release."
             />
           </Box>
           <Group desktopColumns={2} sx={{ mt: 4 }}>