From 4dbb879973401be92664fc3c39f2b27fed487b4a Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 17 Oct 2023 21:07:08 -0300
Subject: [PATCH] add stray website adjustments

---
 docs/pages/blog.tsx                           |  5 ++
 docs/src/components/action/Item.tsx           |  2 +-
 docs/src/components/home/Hero.tsx             | 17 ++----
 .../home/MaterialDesignComponents.tsx         |  2 +-
 docs/src/components/home/UserFeedbacks.tsx    | 60 +++++++++++--------
 .../productBaseUI/BaseUIComponents.tsx        | 22 ++++---
 .../components/productBaseUI/BaseUIEnd.tsx    | 23 +++----
 .../components/productBaseUI/BaseUIHero.tsx   |  2 -
 .../productBaseUI/BaseUITestimonial.tsx       | 35 ++++++++---
 .../productDesignKit/DesignKitDemo.tsx        | 59 ++++++++++++------
 .../productMaterial/MaterialDesignKits.tsx    |  2 +-
 .../productTemplate/TemplateDemo.tsx          | 22 ++++---
 docs/src/components/productX/XComponents.tsx  | 22 ++++---
 docs/src/components/productX/XDataGrid.tsx    | 24 ++++----
 docs/src/components/productX/XTheming.tsx     | 25 ++++----
 docs/src/components/showcase/FolderTable.tsx  |  1 +
 .../components/showcase/NotificationCard.tsx  | 48 ++++++++++-----
 docs/src/components/showcase/TaskCard.tsx     | 30 ++++++----
 .../components/showcase/ThemeDatePicker.tsx   |  1 +
 .../components/typography/SectionHeadline.tsx |  2 +-
 20 files changed, 232 insertions(+), 172 deletions(-)

diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
index a07ce70773f838..386b54337ff848 100644
--- a/docs/pages/blog.tsx
+++ b/docs/pages/blog.tsx
@@ -17,6 +17,7 @@ import TwitterIcon from '@mui/icons-material/Twitter';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
 import YouTubeIcon from '@mui/icons-material/YouTube';
+import DiscordIcon from 'docs/src/icons/DiscordIcon';
 import Head from 'docs/src/modules/components/Head';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import AppFooter from 'docs/src/layouts/AppFooter';
@@ -461,6 +462,10 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                   <TwitterIcon fontSize="small" />
                   Twitter
                 </Link>
+                <Link href="https://mui.com/r/discord/" target="_blank" fontSize={14}>
+                  <DiscordIcon fontSize="small" />
+                  Discord
+                </Link>
                 <Link href="https://www.linkedin.com/company/mui/" target="_blank" fontSize={14}>
                   <LinkedInIcon fontSize="small" />
                   LinkedIn
diff --git a/docs/src/components/action/Item.tsx b/docs/src/components/action/Item.tsx
index 456bc66864795b..8f68ade5827717 100644
--- a/docs/src/components/action/Item.tsx
+++ b/docs/src/components/action/Item.tsx
@@ -101,7 +101,7 @@ export default function Item({
           color="text.primary"
           variant="body2"
           fontWeight="bold"
-          sx={{ display: 'block', mr: 2 }}
+          sx={{ display: 'block' }}
         >
           {title}
         </Typography>
diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx
index d3b1c0e57d8dc8..efca17de6b6cc0 100644
--- a/docs/src/components/home/Hero.tsx
+++ b/docs/src/components/home/Hero.tsx
@@ -64,10 +64,6 @@ const ThemeSlider = dynamic(() => import('../showcase/ThemeSlider'), {
   ssr: false,
   loading: createLoading({ width: 400, height: 104 }),
 });
-const ThemeButton = dynamic(() => import('../showcase/ThemeButton'), {
-  ssr: false,
-  loading: createLoading({ width: 360, height: 38 }),
-});
 const ThemeAccordion = dynamic(() => import('../showcase/ThemeAccordion'), {
   ssr: false,
   loading: createLoading({ width: { md: 360, xl: 400 }, height: 231 }),
@@ -85,7 +81,7 @@ export default function Hero() {
       linearGradient
       left={
         <Box sx={{ textAlign: { xs: 'center', md: 'left' } }}>
-          <Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
+          <Typography variant="h1" sx={{ mb: 2, maxWidth: 500 }}>
             <GradientText>Move faster</GradientText> <br />
             with intuitive React UI tools
           </Typography>
@@ -121,21 +117,20 @@ export default function Hero() {
           {isMdUp && (
             <Stack spacing={3} sx={{ '& > .MuiPaper-root': { maxWidth: 'none' } }}>
               <TaskCard />
-              <ThemeToggleButton />
+              <ThemeChip />
               <ThemeDatePicker />
-              <ThemeButton />
-              <FolderTable />
+              <NotificationCard />
+              <ThemeAccordion />
             </Stack>
           )}
           {isMdUp && (
             <Stack spacing={3} sx={{ ml: 3, '& > .MuiPaper-root': { maxWidth: 'none' } }}>
-              <NotificationCard />
-              <ThemeChip />
               <ThemeTimeline />
+              <ThemeToggleButton />
               <ThemeSlider />
               <ThemeTabs />
               <PlayerCard />
-              <ThemeAccordion />
+              <FolderTable />
             </Stack>
           )}
         </React.Fragment>
diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
index 887837348a87d3..74d35cef98a002 100644
--- a/docs/src/components/home/MaterialDesignComponents.tsx
+++ b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -547,7 +547,7 @@ export default function MaterialDesignComponents() {
         />
         <StyledChip
           color="primary"
-          label="Custom Theme"
+          label="Custom theme"
           size="small"
           variant={customized ? 'filled' : 'outlined'}
           onClick={() => setCustomized(true)}
diff --git a/docs/src/components/home/UserFeedbacks.tsx b/docs/src/components/home/UserFeedbacks.tsx
index d0440eef182acc..62fc708bfcba49 100644
--- a/docs/src/components/home/UserFeedbacks.tsx
+++ b/docs/src/components/home/UserFeedbacks.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import SwipeableViews from 'react-swipeable-views';
 import Avatar from '@mui/material/Avatar';
 import ButtonBase from '@mui/material/ButtonBase';
@@ -21,32 +22,39 @@ function Feedback({
 }) {
   return (
     <Box sx={{ color: '#fff' }}>
-      <Typography variant="body1" fontWeight="500" component="div" sx={{ mb: 2.5 }}>
+      <Typography variant="body1" fontWeight="medium" component="div" sx={{ mb: 2.5 }}>
         {quote}
       </Typography>
-      <Box sx={{ display: 'flex' }}>
-        <Avatar
-          srcSet={profile.avatarSrcSet}
-          src={profile.avatarSrc}
-          alt={`Picture of ${profile.name}`}
-          imgProps={{ loading: 'lazy' }}
-          sx={{
-            width: 58,
-            height: 58,
-            border: '2px solid',
-            borderColor: 'primary.200',
-            bgcolor: 'grey.800',
-          }}
-        />
-        <Box sx={{ ml: 2 }}>
-          <Typography fontWeight="500" sx={{ mb: 1 }}>
-            {profile.name},{' '}
-            <Box component="span" sx={{ color: 'grey.500', fontWeight: 'regular' }}>
-              {profile.role}
-            </Box>
-          </Typography>
-          {profile.company}
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+        <Box
+          sx={(theme) => ({
+            p: 0.5,
+            border: '1px solid',
+            borderColor: 'primary.800',
+            bgcolor: alpha(theme.palette.primary[900], 0.5),
+            borderRadius: 99,
+          })}
+        >
+          <Avatar
+            srcSet={profile.avatarSrcSet}
+            src={profile.avatarSrc}
+            alt={`${profile.name}'s profile picture`}
+            imgProps={{ loading: 'lazy' }}
+            sx={{
+              width: 52,
+              height: 52,
+            }}
+          />
         </Box>
+        <div>
+          <Typography fontWeight="semiBold" color="text.primary">
+            {profile.name}
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            {profile.role}
+          </Typography>
+        </div>
+        <Box sx={{ ml: 'auto' }}>{profile.company}</Box>
       </Box>
     </Box>
   );
@@ -55,7 +63,7 @@ function Feedback({
 const TESTIMONIALS = [
   {
     quote:
-      '"MUI looks great and lets us deliver fast, thanks to their solid API design and documentation - it\'s refreshing to use a component library where you get everything you need from their site rather than Stack Overflow. We think the upcoming version, with extra themes and customizability, will make MUI even more of a game changer. We\'re extremely grateful to the team for the time and effort spent maintaining the project."',
+      '"Material UI looks great and lets us deliver fast, thanks to their solid API design and documentation - it\'s refreshing to use a component library where you get everything you need from their site rather than Stack Overflow. We think the upcoming version, with extra themes and customizability, will make Material UI even more of a game changer. We\'re extremely grateful to the team for the time and effort spent maintaining the project."',
     profile: {
       avatarSrc: 'https://avatars.githubusercontent.com/u/197016?s=58',
       avatarSrcSet: 'https://avatars.githubusercontent.com/u/197016?s=116 2x',
@@ -74,7 +82,7 @@ const TESTIMONIALS = [
   },
   {
     quote:
-      '"MUI offers a wide variety of high quality components that have allowed us to ship features faster. MUI has been used by more than a hundred engineers in our organization. What\'s more, MUI\'s well architected customization system has allowed us to differentiate ourselves in the marketplace."',
+      '"Material UI offers a wide variety of high quality components that have allowed us to ship features faster. It has been used by more than a hundred engineers in our organization. What\'s more, Material UI\'s well architected customization system has allowed us to differentiate ourselves in the marketplace."',
     profile: {
       avatarSrc: 'https://avatars.githubusercontent.com/u/28296253?s=58',
       avatarSrcSet: 'https://avatars.githubusercontent.com/u/28296253?s=116 2x',
@@ -93,7 +101,7 @@ const TESTIMONIALS = [
   },
   {
     quote:
-      '"After much research on React component libraries, we decided to ditch our in-house library for MUI, using its powerful customization system to implement our Design System. This simple move did a rare thing in engineering: it lowered our maintenance costs while enhancing both developer and customer experience. All of this was done without sacrificing the organization\'s branding and visual identity."',
+      '"After much research on React component libraries, we decided to ditch our in-house library for Material UI, using its powerful customization system to implement our Design System. This simple move did a rare thing in engineering: it lowered our maintenance costs while enhancing both developer and customer experience. All of this was done without sacrificing the organization\'s branding and visual identity."',
     profile: {
       avatarSrc: 'https://avatars.githubusercontent.com/u/732422?s=58',
       avatarSrcSet: 'https://avatars.githubusercontent.com/u/732422?s=116 2x',
diff --git a/docs/src/components/productBaseUI/BaseUIComponents.tsx b/docs/src/components/productBaseUI/BaseUIComponents.tsx
index 6c2d45e6b5a026..a6dc1a5554f0c8 100644
--- a/docs/src/components/productBaseUI/BaseUIComponents.tsx
+++ b/docs/src/components/productBaseUI/BaseUIComponents.tsx
@@ -75,18 +75,16 @@ export default function BaseUIComponents() {
     <Section bg="gradient">
       <Grid container spacing={2}>
         <Grid md={6} sx={{ minWidth: 0 }}>
-          <Box maxWidth={500} sx={{ mb: 4 }}>
-            <SectionHeadline
-              overline="Unstyled components"
-              title={
-                <Typography variant="h2">
-                  Choose your own
-                  <br /> <GradientText>CSS adventure</GradientText>
-                </Typography>
-              }
-              description="Base UI's skeletal components give you a sturdy foundation to apply custom styles with ease. With no defaults to override, you're free to start from scratch using vanilla CSS, Tailwind CSS, MUI System, or any other framework you prefer."
-            />
-          </Box>
+          <SectionHeadline
+            overline="Unstyled components"
+            title={
+              <Typography variant="h2">
+                Choose your own
+                <br /> <GradientText>CSS adventure</GradientText>
+              </Typography>
+            }
+            description="Base UI's skeletal components give you a sturdy foundation to apply custom styles with ease. With no defaults to override, you're free to start from scratch using vanilla CSS, Tailwind CSS, MUI System, or any other framework you prefer."
+          />
           <Group desktopColumns={2} sx={{ m: -2, p: 2 }}>
             {DEMOS.map((name) => (
               <Highlighter key={name} selected={name === demo} onClick={() => setDemo(name)}>
diff --git a/docs/src/components/productBaseUI/BaseUIEnd.tsx b/docs/src/components/productBaseUI/BaseUIEnd.tsx
index 1aed4a2e6ce5ce..94f0d5f1d56539 100644
--- a/docs/src/components/productBaseUI/BaseUIEnd.tsx
+++ b/docs/src/components/productBaseUI/BaseUIEnd.tsx
@@ -1,18 +1,16 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import Grid from '@mui/material/Unstable_Grid2';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Typography from '@mui/material/Typography';
 import CompareIcon from '@mui/icons-material/Compare';
 import StyleRoundedIcon from '@mui/icons-material/StyleRounded';
-import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
-import { alpha } from '@mui/material/styles';
+import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
 import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import GradientText from 'docs/src/components/typography/GradientText';
-import Link from 'docs/src/modules/components/Link';
 import ROUTES from 'docs/src/route';
 
 export default function BaseUIEnd() {
@@ -45,17 +43,12 @@ export default function BaseUIEnd() {
               </React.Fragment>
             }
           />
-          <Button
-            href={ROUTES.baseDocs}
-            component={Link}
-            noLinkStyle
-            size="large"
-            variant="contained"
-            endIcon={<KeyboardArrowRightRounded />}
-            sx={{ mt: 2 }}
-          >
-            Get started
-          </Button>
+          <GetStartedButtons
+            primaryUrl={ROUTES.baseDocs}
+            secondaryLabel="Learn Base UI"
+            secondaryUrl={ROUTES.baseQuickstart}
+            altInstallation="npm install @mui/base"
+          />
         </Grid>
         <Grid xs={12} sm={6}>
           <List sx={{ '& > li': { alignItems: 'flex-start' } }}>
diff --git a/docs/src/components/productBaseUI/BaseUIHero.tsx b/docs/src/components/productBaseUI/BaseUIHero.tsx
index 71eb65e11592f1..fce806f672263f 100644
--- a/docs/src/components/productBaseUI/BaseUIHero.tsx
+++ b/docs/src/components/productBaseUI/BaseUIHero.tsx
@@ -1,9 +1,7 @@
 import * as React from 'react';
 import dynamic from 'next/dynamic';
-
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
-
 // Local imports
 import HeroContainer from 'docs/src/layouts/HeroContainer';
 import IconImage from 'docs/src/components/icon/IconImage';
diff --git a/docs/src/components/productBaseUI/BaseUITestimonial.tsx b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
index 4b3c5f3917783b..3944d4d8047c04 100644
--- a/docs/src/components/productBaseUI/BaseUITestimonial.tsx
+++ b/docs/src/components/productBaseUI/BaseUITestimonial.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable material-ui/straight-quotes */
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Unstable_Grid2';
@@ -19,19 +20,25 @@ export default function BaseUITestimonial() {
               border: '1px solid',
               borderColor: 'divider',
               borderRadius: 1,
-              pt: 3,
+              pt: 2,
               pl: 3,
               background: 'linear-gradient(260deg, #3399FF 0%, #0059B3 95%)',
               backgroundClip: 'padding-box',
               overflow: 'auto',
               '& img': {
                 width: '100%',
-                borderTopLeftRadius: '12px',
+                borderTopLeftRadius: '8px',
                 display: 'block',
               },
             }}
           >
-            <Typography variant="h4" component="h2" mb={2.5} sx={{ color: '#fff' }}>
+            <Typography
+              variant="h4"
+              component="h2"
+              mb={2.5}
+              fontWeight="medium"
+              sx={{ color: '#FFF' }}
+            >
               Nhost&apos;s dashboard
             </Typography>
             <Box
@@ -68,10 +75,24 @@ export default function BaseUITestimonial() {
           </Typography>
           <Divider />
           <Box sx={{ display: 'flex', gap: 1 }}>
-            <Avatar
-              alt=""
-              src="https://media.licdn.com/dms/image/C4D03AQHm6cbz2UDXpw/profile-displayphoto-shrink_800_800/0/1642674447256?e=2147483647&v=beta&t=L8g2vW_8mG8AvB3lwui0CT8969_Cx9QQ0iJXIS47i0o"
-            />
+            <Box
+              sx={(theme) => ({
+                p: 0.5,
+                bgcolor: 'primary.50',
+                border: '1px solid',
+                borderColor: 'primary.200',
+                borderRadius: 99,
+                ...theme.applyDarkStyles({
+                  borderColor: 'primary.800',
+                  bgcolor: alpha(theme.palette.primary[900], 0.5),
+                }),
+              })}
+            >
+              <Avatar
+                alt="Szilárd Dóró's profile picture"
+                src="https://media.licdn.com/dms/image/C4D03AQHm6cbz2UDXpw/profile-displayphoto-shrink_800_800/0/1642674447256?e=2147483647&v=beta&t=L8g2vW_8mG8AvB3lwui0CT8969_Cx9QQ0iJXIS47i0o"
+              />
+            </Box>
             <Box sx={{ flex: 1 }}>
               <Typography variant="body2" fontWeight={600}>
                 Szilárd Dóró
diff --git a/docs/src/components/productDesignKit/DesignKitDemo.tsx b/docs/src/components/productDesignKit/DesignKitDemo.tsx
index 687f7153acb5a8..10c95bae3e7f6a 100644
--- a/docs/src/components/productDesignKit/DesignKitDemo.tsx
+++ b/docs/src/components/productDesignKit/DesignKitDemo.tsx
@@ -42,18 +42,16 @@ export default function TemplateDemo() {
     <Section bg="gradient" cozy>
       <Grid container spacing={2} alignItems="center">
         <Grid item md={6} sx={{ minWidth: 0 }}>
-          <Box sx={{ maxWidth: 500 }}>
-            <SectionHeadline
-              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 release."
-            />
-          </Box>
-          <Group desktopColumns={2} sx={{ mt: 4 }}>
+          <SectionHeadline
+            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 release."
+          />
+          <Group desktopColumns={2} sx={{ m: -2, p: 2 }}>
             {DEMOS.map((name) => (
               <Highlighter key={name} selected={name === demo} onClick={() => setDemo(name)}>
                 <Item
@@ -198,18 +196,43 @@ export default function TemplateDemo() {
                 />
               </Fade>
             </Frame.Demo>
-            <Frame.Info sx={{ display: 'flex', alignItems: 'center', minWidth: 0 }}>
-              <Box sx={{ minWidth: 0 }}>
-                <Typography variant="body2" fontWeight={500} noWrap sx={{ mb: 0.5 }}>
-                  e.g. Material UI for Figma
+            <Frame.Info
+              data-mui-color-scheme="dark"
+              sx={{
+                display: 'flex',
+                alignItems: { xs: 'start', sm: 'center' },
+                flexDirection: { xs: 'column', sm: 'row' },
+                minWidth: 0,
+                gap: { xs: 3, sm: 0 },
+              }}
+            >
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: { xs: 'column', sm: 'row' },
+                  alignItems: { xs: 'start', sm: 'center' },
+                  gap: 1,
+                }}
+              >
+                <Typography variant="body2" fontWeight="semiBold">
+                  Available for:
                 </Typography>
+                <Box sx={{ display: 'flex', gap: 1, '& >img': { width: 26, height: 26 } }}>
+                  <img src="/static/branding/design-kits/figma-logo.svg" alt="" loading="lazy" />
+                  <img src="/static/branding/design-kits/sketch-logo.svg" alt="" loading="lazy" />
+                  <img src="/static/branding/design-kits/adobexd-logo.svg" alt="" loading="lazy" />
+                </Box>
               </Box>
               <Button
                 component={Link}
-                noLinkStyle
+                variant="outlined"
                 href="https://mui.com/store/?utm_source=marketing&utm_medium=referral&utm_campaign=design-cta2#design"
                 endIcon={<LaunchRounded sx={{ '&&': { fontSize: 16 } }} />}
-                sx={{ ml: 'auto', color: 'primary.300' }}
+                sx={{
+                  ml: { xs: 0, sm: 'auto' },
+                  color: 'primary.300',
+                  width: { xs: '100%', sm: 'fit-content' },
+                }}
               >
                 Buy now
               </Button>
diff --git a/docs/src/components/productMaterial/MaterialDesignKits.tsx b/docs/src/components/productMaterial/MaterialDesignKits.tsx
index 69ed2f271d47d3..c2a97d4f03fdc2 100644
--- a/docs/src/components/productMaterial/MaterialDesignKits.tsx
+++ b/docs/src/components/productMaterial/MaterialDesignKits.tsx
@@ -217,7 +217,7 @@ export default function MaterialDesignKits() {
                 }}
               >
                 <Typography variant="body2" fontWeight="semiBold">
-                  Available for all design softwares:
+                  Available for:
                 </Typography>
                 <Box sx={{ display: 'flex', gap: 1, '& >img': { width: 26, height: 26 } }}>
                   <img src="/static/branding/design-kits/figma-logo.svg" alt="" loading="lazy" />
diff --git a/docs/src/components/productTemplate/TemplateDemo.tsx b/docs/src/components/productTemplate/TemplateDemo.tsx
index 228267cfa491a9..b53eaa55637913 100644
--- a/docs/src/components/productTemplate/TemplateDemo.tsx
+++ b/docs/src/components/productTemplate/TemplateDemo.tsx
@@ -60,19 +60,17 @@ export default function TemplateDemo() {
     <Section bg="gradient">
       <Grid container spacing={2} alignItems="center">
         <Grid item md={6} sx={{ minWidth: 0 }}>
-          <Box sx={{ maxWidth: 500 }}>
-            <SectionHeadline
-              overline="Templates"
-              title={
-                <Typography variant="h2">
-                  The right template for your <GradientText>specific use case</GradientText>
-                </Typography>
-              }
-              description="A collection of 4.5 average rating templates, for multiple use cases, all powered by Material UI components and carefully curated by MUI's team.
+          <SectionHeadline
+            overline="Templates"
+            title={
+              <Typography variant="h2">
+                The right template for your <GradientText>specific use case</GradientText>
+              </Typography>
+            }
+            description="A collection of 4.5 average rating templates, for multiple use cases, all powered by Material UI components and carefully curated by MUI's team.
               "
-            />
-          </Box>
-          <Group desktopColumns={2} sx={{ mt: 4 }}>
+          />
+          <Group desktopColumns={2} sx={{ m: -2, p: 2 }}>
             {DEMOS.map((name) => (
               <Highlighter
                 key={name}
diff --git a/docs/src/components/productX/XComponents.tsx b/docs/src/components/productX/XComponents.tsx
index 3c0d7ec0e906dc..dff368d572c0d6 100644
--- a/docs/src/components/productX/XComponents.tsx
+++ b/docs/src/components/productX/XComponents.tsx
@@ -74,18 +74,16 @@ export default function XComponents() {
     <Section bg="gradient">
       <Grid container spacing={2}>
         <Grid item md={6} sx={{ minWidth: 0 }}>
-          <Box sx={{ maxWidth: 500 }}>
-            <SectionHeadline
-              overline="React component library"
-              title={
-                <Typography variant="h2">
-                  Powerful components for <GradientText>advanced</GradientText> use-cases
-                </Typography>
-              }
-              description="The MUI X package enables applications to have complex use-cases, supported by several advanced components."
-            />
-          </Box>
-          <Group desktopColumns={2} sx={{ mt: 4 }}>
+          <SectionHeadline
+            overline="React component library"
+            title={
+              <Typography variant="h2">
+                Powerful components for <GradientText>advanced</GradientText> use-cases
+              </Typography>
+            }
+            description="The MUI X package enables applications to have complex use-cases, supported by several advanced components."
+          />
+          <Group desktopColumns={2} sx={{ m: -2, p: 2 }}>
             {DEMOS.map((name) => (
               <Highlighter key={name} selected={name === demo} onClick={() => setDemo(name)}>
                 <Item icon={React.cloneElement(icons[name])} title={name} />
diff --git a/docs/src/components/productX/XDataGrid.tsx b/docs/src/components/productX/XDataGrid.tsx
index 00c22f9f32d6a4..d73076093176c0 100644
--- a/docs/src/components/productX/XDataGrid.tsx
+++ b/docs/src/components/productX/XDataGrid.tsx
@@ -121,19 +121,17 @@ export default function XDataGrid() {
     <Section>
       <Grid container spacing={2}>
         <Grid item md={6} sx={{ minWidth: 0 }}>
-          <Box sx={{ maxWidth: 500 }}>
-            <SectionHeadline
-              overline="Data Grid"
-              title={
-                <Typography variant="h2">
-                  A level of <GradientText>performance and quality</GradientText> that hasn&apos;t
-                  been seen before
-                </Typography>
-              }
-              description="The MUI X Data Grid is a data table powerhouse. It is packed with exclusive features that will enrich the experience of dealing with and maintaining lots of data."
-            />
-          </Box>
-          <Group desktopColumns={2} sx={{ mt: 4 }}>
+          <SectionHeadline
+            overline="Data Grid"
+            title={
+              <Typography variant="h2">
+                A level of <GradientText>performance and quality</GradientText> that hasn&apos;t
+                been seen before
+              </Typography>
+            }
+            description="The MUI X Data Grid is a data table powerhouse. It is packed with exclusive features that will enrich the experience of dealing with and maintaining lots of data."
+          />
+          <Group desktopColumns={2} sx={{ m: -2, p: 2 }}>
             {DEMOS.map((name) => (
               <Highlighter
                 selectedBg="comfort"
diff --git a/docs/src/components/productX/XTheming.tsx b/docs/src/components/productX/XTheming.tsx
index f714d1ea7d1c09..693550f3996166 100644
--- a/docs/src/components/productX/XTheming.tsx
+++ b/docs/src/components/productX/XTheming.tsx
@@ -8,7 +8,6 @@ import {
 import { useDemoData } from '@mui/x-data-grid-generator';
 import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
 import { red } from '@mui/material/colors';
-import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
@@ -97,22 +96,20 @@ export default function XTheming() {
     <Section bg="gradient">
       <Grid container spacing={2}>
         <Grid item md={6} sx={{ minWidth: 0 }}>
-          <Box sx={{ maxWidth: 500 }}>
-            <SectionHeadline
-              overline="Theming"
-              title={
-                <Typography variant="h2">
-                  Advanced and <GradientText>beautiful</GradientText>
-                </Typography>
-              }
-              description="Use the sophisticated theming features to make the MUI X components look exactly as you want. "
-            />
-          </Box>
-          <Group sx={{ mt: 4 }}>
+          <SectionHeadline
+            overline="Theming"
+            title={
+              <Typography variant="h2">
+                Advanced and <GradientText>beautiful</GradientText>
+              </Typography>
+            }
+            description="Use the sophisticated theming features to make the MUI X components look exactly as you want."
+          />
+          <Group sx={{ m: -2, p: 2 }}>
             <Highlighter disableBorder selected={customized} onClick={() => setCustomized(true)}>
               <Item
                 icon={<SvgTwinkle />}
-                title="Custom Theme"
+                title="Custom theme"
                 description="Theming allows you to use your brand's design tokens, easily making the components reflect its look and feel."
               />
             </Highlighter>
diff --git a/docs/src/components/showcase/FolderTable.tsx b/docs/src/components/showcase/FolderTable.tsx
index 2cb428525d0558..6b315db73fc405 100644
--- a/docs/src/components/showcase/FolderTable.tsx
+++ b/docs/src/components/showcase/FolderTable.tsx
@@ -18,6 +18,7 @@ const data = [
   { name: 'Pictures & videos', size: 134000000 },
   { name: 'Source files', size: 200000000 },
   { name: 'Dependencies', size: 44000000 },
+  { name: 'Assets & illustrations', size: 21000000 },
 ];
 
 type Data = typeof data extends Array<infer T> ? T : never;
diff --git a/docs/src/components/showcase/NotificationCard.tsx b/docs/src/components/showcase/NotificationCard.tsx
index 00d3404c9b424d..b624ff63ac3d3b 100644
--- a/docs/src/components/showcase/NotificationCard.tsx
+++ b/docs/src/components/showcase/NotificationCard.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
@@ -22,40 +23,55 @@ export default function NotificationCard() {
           }),
         })}
       >
-        <Avatar
-          imgProps={{ 'aria-labelledby': 'demo-notification-card-messenger-name' }}
-          src="/static/images/avatar/3-sm.jpeg"
-          sx={{ width: 40, height: 40 }}
-        />
+        <Box
+          sx={(theme) => ({
+            height: 'fit-content',
+            p: 0.5,
+            bgcolor: 'primary.50',
+            border: '1px solid',
+            borderColor: 'primary.200',
+            borderRadius: 99,
+            ...theme.applyDarkStyles({
+              borderColor: 'primary.800',
+              bgcolor: alpha(theme.palette.primary[900], 0.5),
+            }),
+          })}
+        >
+          <Avatar
+            imgProps={{ 'aria-labelledby': 'demo-notification-card-messenger-name' }}
+            src="/static/images/avatar/3-sm.jpeg"
+            sx={{ width: 40, height: 40 }}
+          />
+        </Box>
         <Box sx={{ flexGrow: 1 }}>
           <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
             <Typography
               id="demo-notification-card-messenger-name"
-              color="primary.400"
-              fontWeight={500}
+              color="primary.main"
+              fontWeight="semiBold"
               fontSize={12}
               gutterBottom
             >
-              From: Angela Erickson
+              Angela Erickson
             </Typography>
             <Typography color="text.secondary" variant="caption">
               09:41
             </Typography>
           </Box>
-          <Box sx={{ display: 'flex' }}>
-            <Box sx={{ flexGrow: 1, minWidth: '0px' }}>
-              <Typography fontWeight={600} fontSize={14} gutterBottom>
-                Incredible discoveries!
+          <Box sx={{ display: 'flex', gap: 2 }}>
+            <div>
+              <Typography fontWeight="semiBold" fontSize={14}>
+                Incredible discoveries
               </Typography>
-              <Typography fontSize={14} color="text.secondary" noWrap>
-                Just found out Material UI & Joy UI and wow...
+              <Typography fontSize={14} color="text.secondary">
+                It's about Material UI & Base UI...
               </Typography>
-            </Box>
+            </div>
             <Chip
               label="3"
               color="success"
               size="small"
-              sx={{ mt: '3px', color: '#fff', fontSize: '0.75rem', height: 18 }}
+              sx={{ ml: 'auto', color: '#fff', fontSize: '0.75rem', height: 18 }}
             />
           </Box>
         </Box>
diff --git a/docs/src/components/showcase/TaskCard.tsx b/docs/src/components/showcase/TaskCard.tsx
index adb871e8f5ee90..27f8fadf857aec 100644
--- a/docs/src/components/showcase/TaskCard.tsx
+++ b/docs/src/components/showcase/TaskCard.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { alpha } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
@@ -28,27 +29,36 @@ export default function TaskCard() {
       >
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>
           <ScheduleRounded fontSize="inherit" />
-          <Typography variant="caption" fontWeight={600}>
+          <Typography variant="caption" fontWeight="semiBold">
             March 25th
           </Typography>
         </Box>
         <Box sx={{ my: 'auto' }}>
           <CodeRounded color="white" />
-          <Typography fontSize={18} component="div" fontWeight={600} sx={{ lineHeight: 1.4 }}>
+          <Typography fontSize={18} component="div" fontWeight="semiBold" sx={{ lineHeight: 1.4 }}>
             Customize every button and chip instance primary color
           </Typography>
         </Box>
-        <Box sx={{ display: 'flex', gap: 1, py: 1 }}>
-          <Avatar
-            imgProps={{ 'aria-labelledby': 'demo-task-card-assignee-name' }}
-            src="/static/images/avatar/1-sm.jpeg"
-            sx={{ border: '2px solid #FFF' }}
-          />
+        <Box sx={{ display: 'flex', gap: 1, py: 1, alignItems: 'center' }}>
+          <Box
+            sx={{
+              p: 0.5,
+              bgcolor: 'primary.400',
+              border: '1px solid',
+              borderColor: 'primary.100',
+              borderRadius: 99,
+            }}
+          >
+            <Avatar
+              imgProps={{ 'aria-labelledby': 'demo-task-card-assignee-name' }}
+              src="/static/images/avatar/1-sm.jpeg"
+            />
+          </Box>
           <div>
-            <Typography color="primary.200" fontWeight={600} fontSize={12}>
+            <Typography color="primary.100" fontWeight="semiBold" fontSize={12}>
               Assigned to
             </Typography>
-            <Typography id="demo-task-card-assignee-name" variant="body2" fontWeight={600}>
+            <Typography id="demo-task-card-assignee-name" variant="body2" fontWeight="semiBold">
               Michael Scott
             </Typography>
           </div>
diff --git a/docs/src/components/showcase/ThemeDatePicker.tsx b/docs/src/components/showcase/ThemeDatePicker.tsx
index 92ac93693d6092..a0c79a5b7a313e 100644
--- a/docs/src/components/showcase/ThemeDatePicker.tsx
+++ b/docs/src/components/showcase/ThemeDatePicker.tsx
@@ -35,6 +35,7 @@ export default function ThemeDatePicker() {
               },
               '& .MuiDateCalendar-root': {
                 width: '100%',
+                height: 'fit-content',
                 '& .MuiPickersCalendarHeader-root': {
                   margin: '12px 0',
                   paddingLeft: '18px',
diff --git a/docs/src/components/typography/SectionHeadline.tsx b/docs/src/components/typography/SectionHeadline.tsx
index 0e7dec6656d30a..5ae9766837075d 100644
--- a/docs/src/components/typography/SectionHeadline.tsx
+++ b/docs/src/components/typography/SectionHeadline.tsx
@@ -71,7 +71,7 @@ export default function SectionHeadline(props: SectionHeadlineProps) {
         <Typography
           sx={(theme) => ({
             mt: 1,
-            mb: 2,
+            mb: 3,
             maxWidth: 450,
             ...(inverted
               ? {