[website] Adjust site to add Toolpad on the homepage

docs/src/components/action/Frame.tsx

@@ -29,14 +29,17 @@ const FrameInfo = React.forwardRef<HTMLDivElement, BoxProps>(function FrameInfo(
       ref={ref}
       {...props}
       sx={{
-        color: '#fff',
         p: 2,
+        overflow: 'clip',
+        position: 'relative',
+        colorScheme: 'dark',
+        color: '#fff',
         bgcolor: 'common.black',
         border: '1px solid',
         borderColor: 'primaryDark.700',
         borderTop: 0,
-        colorScheme: 'dark',
-        overflow: 'clip',
+        borderBottomLeftRadius: 12,
+        borderBottomRightRadius: 12,
         ...props.sx,
       }}
     />

docs/src/components/action/Item.tsx

@@ -93,19 +93,15 @@ export default function Item({
         display: 'flex',
         flexDirection: { xs: 'column', sm: 'row' },
         alignItems: { xs: 'start', sm: 'center' },
-        gap: { xs: 2, sm: 0.5 },
+        gap: { xs: 2, sm: '14px' },
         ...props.sx,
       }}
     >
-      <Box component="span" sx={{ mr: smallerIconDistance ? 1 : 2, lineHeight: 0 }}>
+      <Box component="span" sx={{ lineHeight: 0 }}>
         {icon}
       </Box>
       <Box sx={{ flexWrap: 'wrap' }}>
-        <Typography
-          component="span"
-          variant="body2"
-          sx={{ color: 'text.primary', fontWeight: 'bold', display: 'block' }}
-        >
+        <Typography color="text.primary" variant="body2" fontWeight="semiBold">
           {title}
         </Typography>
         {description && (

docs/src/components/action/MaterialVsCustomToggle.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Button, { buttonClasses } from '@mui/material/Button';
+
+interface MaterialVsCustomToggleProps {
+  customized: boolean;
+  setCustomized: React.Dispatch<boolean>;
+}
+
+export default function MaterialVsCustomToggle({
+  customized,
+  setCustomized,
+}: MaterialVsCustomToggleProps) {
+  return (
+    <Box
+      sx={(theme) => ({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        p: 1.5,
+        display: 'flex',
+        gap: 1,
+        zIndex: 3,
+        background: `linear-gradient(to bottom, ${
+          (theme.vars || theme).palette.common.black
+        } 70%, transparent)`,
+        [`& .${buttonClasses.root}`]: {
+          borderRadius: 99,
+          padding: '1px 8px',
+          fontSize: theme.typography.pxToRem(12),
+        },
+        '& .MuiButton-outlinedPrimary': {
+          backgroundColor: alpha(theme.palette.primary[900], 0.5),
+        },
+      })}
+    >
+      <Button
+        size="small"
+        variant="outlined"
+        color={customized ? 'secondary' : 'primary'}
+        onClick={() => {
+          setCustomized(false);
+        }}
+      >
+        Material Design
+      </Button>
+      <Button
+        size="small"
+        variant="outlined"
+        color={customized ? 'primary' : 'secondary'}
+        onClick={() => {
+          setCustomized(true);
+        }}
+      >
+        Custom theme
+      </Button>
+    </Box>
+  );
+}

docs/src/components/action/MoreInfoBox.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { alpha } from '@mui/material/styles';
+import Box, { BoxProps } from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import { Link } from '@mui/docs/Link';
+import IconButton from '@mui/material/IconButton';
+import KeyboardArrowUpRounded from '@mui/icons-material/KeyboardArrowUpRounded';
+import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded';
+
+export function AppearingInfoBox({
+  appeared,
+  children,
+  ...props
+}: { appeared: boolean; children: React.ReactNode } & BoxProps) {
+  const [hidden, setHidden] = React.useState(false);
+  return (
+    <Box
+      {...props}
+      sx={{
+        position: 'absolute',
+        bottom: 8,
+        left: 8,
+        right: 8,
+        zIndex: 3,
+        mx: -1,
+        background: ({ palette }) => alpha(palette.common.black, 0.9),
+        borderTop: '1px solid',
+        borderColor: hidden || !appeared ? 'transparent' : 'primaryDark.700',
+        transform: hidden || !appeared ? 'translateY(100%)' : 'translateY(0)',
+        transition: '0.2s',
+        ...props.sx,
+      }}
+    >
+      <IconButton
+        size="small"
+        aria-label={hidden ? 'show' : 'hide'}
+        onClick={() => setHidden((bool) => !bool)}
+        sx={{
+          position: 'absolute',
+          zIndex: 2,
+          transition: '0.3s',
+          right: 16,
+          bottom: '100%',
+          transform: hidden || !appeared ? 'translateY(-10px)' : 'translateY(50%)',
+          opacity: appeared ? 1 : 0,
+          color: '#FFF',
+          backgroundColor: 'primary.500',
+          '&:hover': {
+            backgroundColor: 'primary.800',
+          },
+        }}
+      >
+        {hidden ? (
+          <KeyboardArrowUpRounded fontSize="small" />
+        ) : (
+          <KeyboardArrowDownRounded fontSize="small" />
+        )}
+      </IconButton>
+      <Box sx={{ px: 2, py: 1.5 }}>{children}</Box>
+    </Box>
+  );
+}
+
+export default function MoreInfoBox({
+  primaryBtnLabel,
+  primaryBtnHref,
+  secondaryBtnLabel,
+  secondaryBtnHref,
+  ...props
+}: {
+  primaryBtnLabel: string;
+  primaryBtnHref: string;
+  secondaryBtnLabel: string;
+  secondaryBtnHref: string;
+} & BoxProps) {
+  return (
+    <Box
+      data-mui-color-scheme="dark"
+      {...props}
+      sx={{
+        p: 1.5,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        background: ({ palette }) => alpha(palette.primaryDark[800], 0.2),
+        display: 'flex',
+        flexDirection: { xs: 'column', sm: 'row' },
+        gap: { xs: 1.5, sm: 1 },
+        borderTop: '1px solid',
+        borderColor: 'divider',
+        zIndex: 3,
+        ...props.sx,
+      }}
+    >
+      <Button component={Link} noLinkStyle size="small" variant="contained" href={primaryBtnHref}>
+        {primaryBtnLabel}
+      </Button>
+      <Button
+        component={Link}
+        noLinkStyle
+        size="small"
+        variant="outlined"
+        color="secondary"
+        href={secondaryBtnHref}
+      >
+        {secondaryBtnLabel}
+      </Button>
+    </Box>
+  );
+}

docs/src/components/home/AdvancedShowcase.tsx

@@ -1,16 +1,19 @@
 import * as React from 'react';
 import { DataGrid, GridCellParams, GridRenderEditCellParams, GridColDef } from '@mui/x-data-grid';
+import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
-import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
+import ShowcaseContainer, { ShowcaseCodeWrapper } from 'docs/src/components/home/ShowcaseContainer';
 import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
+import MoreInfoBox from 'docs/src/components/action/MoreInfoBox';
 import ProgressBar from 'docs/src/components/x-grid/ProgressBar';
 import EditProgress from 'docs/src/components/x-grid/EditProgress';
 import Status from 'docs/src/components/x-grid/Status';
 import EditStatus from 'docs/src/components/x-grid/EditStatus';
+import ROUTES from 'docs/src/route';
 
 const columns: Array<GridColDef> = [
   {
@@ -1686,13 +1689,13 @@ export default function DataTable() {
           sx={(theme) => ({
             overflow: 'hidden',
             width: '100%',
-            boxShadow: '0px 4px 16px rgba(61, 71, 82, 0.15)',
+            boxShadow: `0 4px 8px ${alpha(theme.palette.primaryDark[300], 0.3)}`,
             bgcolor: '#fff',
             border: '1px solid',
             borderColor: 'grey.200',
             ...theme.applyDarkStyles({
               bgcolor: 'primaryDark.800',
-              boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.4)',
+              boxShadow: `0 4px 8px ${alpha(theme.palette.common.black, 0.3)}`,
             }),
           })}
         >
@@ -1716,23 +1719,17 @@ export default function DataTable() {
         </Paper>
       }
       code={
-        <Box
-          sx={{
-            overflow: 'auto',
-            flexGrow: 1,
-            '&::-webkit-scrollbar': {
-              display: 'none',
-            },
-            '& pre': {
-              bgcolor: 'transparent !important',
-              '&::-webkit-scrollbar': {
-                display: 'none',
-              },
-            },
-          }}
-        >
-          <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
-        </Box>
+        <React.Fragment>
+          <ShowcaseCodeWrapper maxHeight={280}>
+            <HighlightedCode copyButtonHidden code={code} language="jsx" plainStyle />
+          </ShowcaseCodeWrapper>
+          <MoreInfoBox
+            primaryBtnLabel="Start with the Data Grid"
+            primaryBtnHref={ROUTES.dataGridOverview}
+            secondaryBtnLabel="Learn more about MUI X"
+            secondaryBtnHref={ROUTES.productAdvanced}
+          />
+        </React.Fragment>
       }
     />
   );