diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx
index bbd7b21bb005cd..e79759b64383a8 100644
--- a/docs/pages/about.tsx
+++ b/docs/pages/about.tsx
@@ -1,716 +1,37 @@
 import * as React from 'react';
-import Avatar from '@mui/material/Avatar';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Container from '@mui/material/Container';
 import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import Grid from '@mui/material/Grid';
-import Paper, { PaperProps } from '@mui/material/Paper';
-import Typography from '@mui/material/Typography';
-import Tooltip from '@mui/material/Tooltip';
-import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
-import TwitterIcon from '@mui/icons-material/Twitter';
-import GitHubIcon from '@mui/icons-material/GitHub';
-import ForumRoundedIcon from '@mui/icons-material/ForumRounded';
-import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded';
-import LocalAtmRoundedIcon from '@mui/icons-material/LocalAtmRounded';
-import Link from 'docs/src/modules/components/Link';
 import AppHeader from 'docs/src/layouts/AppHeader';
-import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References';
-import HeroEnd from 'docs/src/components/home/HeroEnd';
 import AppFooter from 'docs/src/layouts/AppFooter';
-import MuiStatistics from 'docs/src/components/home/MuiStatistics';
-import GradientText from 'docs/src/components/typography/GradientText';
-import ROUTES from 'docs/src/route';
-import Section from 'docs/src/layouts/Section';
-import IconImage from 'docs/src/components/icon/IconImage';
+import AboutHero from 'docs/src/components/about/AboutHero';
+import OurValues from 'docs/src/components/about/OurValues';
+import Team from 'docs/src/components/about/Team';
+import HowToSupport from 'docs/src/components/about/HowToSupport';
+import AboutEnd from 'docs/src/components/about/AboutEnd';
 import Head from 'docs/src/modules/components/Head';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
-import teamMembers from 'docs/data/about/teamMembers.json';
-/**
- * Import data from: https://tools-public.mui.com/prod/pages/nSwYn51
-
-curl 'https://tools-public.mui.com/prod/api/data/muicomabout/queryAbout' \
-  -H 'content-type: application/json' \
-  --data-raw '{}' \
-  --compressed
-*/
-
-interface Profile {
-  name: string;
-  /**
-   * Role, what are you working on?
-   */
-  title: string;
-  /**
-   * Country where you live in, ISO 3166-1.
-   */
-  locationCountry: string; // https://flagpedia.net/download/api
-  /**
-   * Image URL.
-   */
-  src?: string;
-  /**
-   * Lives in.
-   */
-  location?: string;
-  /**
-   * Short summary about you.
-   */
-  about?: string;
-  github?: string;
-  twitter?: string;
-}
-
-function Person(props: Profile & { sx?: PaperProps['sx'] }) {
-  return (
-    <Paper variant="outlined" sx={{ p: 2, height: '100%', ...props.sx }}>
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'flex-start',
-          flexWrap: 'wrap',
-          '& > div': { minWidth: 'clamp(0px, (150px - 100%) * 999 ,100%)' },
-        }}
-      >
-        <Tooltip
-          title={props.location || false}
-          placement="right-end"
-          PopperProps={{
-            popperOptions: {
-              modifiers: [
-                {
-                  name: 'offset',
-                  options: {
-                    offset: [3, 2],
-                  },
-                },
-              ],
-            },
-          }}
-        >
-          <Box sx={{ position: 'relative', display: 'inline-block' }}>
-            <Avatar
-              variant="rounded"
-              imgProps={{
-                width: '70',
-                height: '70',
-                loading: 'lazy',
-              }}
-              src={props.src}
-              alt={props.name}
-              {...(props.src?.startsWith('https://avatars.githubusercontent.com') && {
-                src: `${props.src}?s=70`,
-                srcSet: `${props.src}?s=140 2x`,
-              })}
-              sx={(theme) => ({
-                width: 70,
-                height: 70,
-                borderRadius: 1,
-                backgroundColor: 'primary.100',
-                ...theme.applyDarkStyles({
-                  backgroundColor: 'primary.900',
-                }),
-              })}
-            />
-            <Box
-              sx={{
-                position: 'absolute',
-                bottom: 0,
-                right: 0,
-                transform: 'translateX(50%)',
-                boxShadow: '0px 4px 20px rgba(61, 71, 82, 0.25)',
-                width: 24,
-                height: 24,
-                border: '2px solid #fff',
-                backgroundColor: '#fff',
-                borderRadius: 40,
-                overflow: 'hidden',
-                display: 'flex',
-                justifyContent: 'center',
-              }}
-            >
-              <img
-                loading="lazy"
-                height="20"
-                src={`https://flagcdn.com/${props.locationCountry}.svg`}
-                alt=""
-              />
-            </Box>
-          </Box>
-        </Tooltip>
-        <Box sx={{ mx: 'auto', height: 15 }} />
-        <Box sx={{ mt: -0.5, mr: -0.5 }}>
-          {props.github && (
-            <IconButton
-              aria-label={`${props.name} github`}
-              component="a"
-              href={`https://github.com/${props.github}`}
-              target="_blank"
-              rel="noreferrer noopener"
-            >
-              <GitHubIcon fontSize="small" sx={{ color: 'grey.500' }} />
-            </IconButton>
-          )}
-          {props.twitter && (
-            <IconButton
-              aria-label={`${props.name} twitter`}
-              component="a"
-              href={`https://twitter.com/${props.twitter}`}
-              target="_blank"
-              rel="noreferrer noopener"
-            >
-              <TwitterIcon fontSize="small" sx={{ color: 'grey.500' }} />
-            </IconButton>
-          )}
-        </Box>
-      </Box>
-      <Typography variant="body2" fontWeight="bold" sx={{ mt: 2, mb: 0.5 }}>
-        {props.name}
-      </Typography>
-      <Typography variant="body2" color="text.secondary">
-        {props.title}
-      </Typography>
-      {props.about && (
-        <Divider
-          sx={(theme) => ({
-            my: 1,
-            borderColor: 'grey.100',
-            ...theme.applyDarkStyles({
-              borderColor: 'primaryDark.400',
-            }),
-          })}
-        />
-      )}
-      {props.about && (
-        <Typography variant="body2" color="text.secondary">
-          {props.about}
-        </Typography>
-      )}
-    </Paper>
-  );
-}
-
-function Widget({
-  children,
-  title,
-  icon,
-}: {
-  children: React.ReactNode;
-  title: string;
-  icon: React.ReactElement;
-}) {
-  return (
-    <Paper
-      variant="outlined"
-      sx={(theme) => ({
-        p: 4,
-        height: '100%',
-        position: 'relative',
-        borderRadius: '12px',
-        border: '1px solid',
-        borderColor: 'grey.100',
-        background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-
-        ...theme.applyDarkStyles({
-          bgcolor: 'primaryDark.900',
-          borderColor: 'primaryDark.700',
-          background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
-        }),
-      })}
-    >
-      <Box
-        sx={(theme) => ({
-          width: 40,
-          height: 40,
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          borderRadius: 1,
-          border: '1px solid',
-          borderColor: 'primary.200',
-          bgcolor: 'primary.50',
-          boxShadow:
-            '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
-          ...theme.applyDarkStyles({
-            borderColor: 'primary.400',
-            bgcolor: 'primary.900',
-            boxShadow:
-              '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
-          }),
-        })}
-      >
-        {icon}
-      </Box>
-      <Typography
-        fontWeight="bold"
-        component="h3"
-        color="text.primary"
-        variant="body2"
-        mt={2}
-        mb={0.5}
-      >
-        {title}
-      </Typography>
-      {children}
-    </Paper>
-  );
-}
-
-const contributors = [
-  {
-    name: 'Sebastian Silbermann',
-    github: 'eps1lon',
-    title: 'MUI Core, everything Open Source',
-    location: 'Berlin, Germany',
-    locationCountry: 'de',
-    src: 'https://avatars.githubusercontent.com/u/12292047',
-    twitter: 'sebsilbermann',
-  },
-  {
-    name: 'Ryan Cogswell',
-    github: 'ryancogswell',
-    title: 'Stack Overflow top contributor',
-    location: 'Minnesota, United States',
-    locationCountry: 'us',
-    src: 'https://avatars.githubusercontent.com/u/287804',
-  },
-  {
-    name: 'Yan Lee',
-    github: 'AGDholo',
-    title: 'Chinese docs',
-    location: 'China',
-    locationCountry: 'cn',
-    src: 'https://avatars.githubusercontent.com/u/13300332',
-  },
-  {
-    name: 'Jairon Alves Lima',
-    github: 'jaironalves',
-    title: 'Brazilian Portuguese docs',
-    location: 'São Paulo, Brazil',
-    locationCountry: 'br',
-    src: 'https://avatars.githubusercontent.com/u/29267813',
-  },
-  {
-    name: 'Danica Shen',
-    github: 'DDDDDanica',
-    title: 'Chinese docs',
-    location: 'Ireland',
-    locationCountry: 'ie',
-    src: 'https://avatars.githubusercontent.com/u/12678455',
-  },
-];
-
-const emeriti = [
-  {
-    name: 'Hai Nguyen',
-    github: 'hai-cea',
-    twitter: 'haicea',
-    title: 'MUI Core, v0.x creator',
-    location: 'Dallas, US',
-    locationCountry: 'us',
-    src: 'https://avatars.githubusercontent.com/u/2007468',
-  },
-  {
-    name: 'Nathan Marks',
-    github: 'nathanmarks',
-    title: 'MUI Core, v1.x co-creator',
-    location: 'Toronto, CA',
-    locationCountry: 'ca',
-    src: 'https://avatars.githubusercontent.com/u/4420103',
-  },
-  {
-    name: 'Kevin Ross',
-    github: 'rosskevin',
-    twitter: 'rosskevin',
-    title: 'MUI Core, flow',
-    location: 'Franklin, US',
-    locationCountry: 'us',
-    src: 'https://avatars.githubusercontent.com/u/136564',
-  },
-  {
-    name: 'Sebastian Sebald',
-    github: 'sebald',
-    twitter: 'sebastiansebald',
-    title: 'MUI Core',
-    location: 'Freiburg, Germany',
-    locationCountry: 'de',
-    src: 'https://avatars.githubusercontent.com/u/985701',
-  },
-  {
-    name: 'Ken Gregory',
-    github: 'kgregory',
-    title: 'MUI Core',
-    location: 'New Jersey, US',
-    locationCountry: 'us',
-    src: 'https://avatars.githubusercontent.com/u/3155127',
-  },
-  {
-    name: 'Tom Crockett',
-    github: 'pelotom',
-    twitter: 'pelotom',
-    title: 'MUI Core',
-    location: 'Los Angeles, US',
-    locationCountry: 'us',
-    src: 'https://avatars.githubusercontent.com/u/128019',
-  },
-  {
-    name: 'Maik Marschner',
-    github: 'leMaik',
-    twitter: 'leMaikOfficial',
-    title: 'MUI Core',
-    location: 'Hannover, Germany',
-    locationCountry: 'de',
-    src: 'https://avatars.githubusercontent.com/u/5544859',
-  },
-  {
-    name: 'Oleg Slobodskoi',
-    github: 'kof',
-    twitter: 'oleg008',
-    title: 'MUI Core, JSS',
-    location: 'Berlin, Germany',
-    locationCountry: 'de',
-    src: 'https://avatars.githubusercontent.com/u/52824',
-  },
-  {
-    name: 'Dmitriy Kovalenko',
-    github: 'dmtrKovalenko',
-    twitter: 'goose_plus_plus',
-    title: 'MUI X, date pickers',
-    location: 'Kharkiv, Ukraine',
-    locationCountry: 'ua',
-    src: 'https://avatars.githubusercontent.com/u/16926049',
-  },
-  {
-    name: 'Josh Wooding',
-    github: 'joshwooding',
-    twitter: 'JoshWooding_',
-    title: 'MUI Core, J.P. Morgan',
-    location: 'London, UK',
-    locationCountry: 'gb',
-    src: 'https://avatars.githubusercontent.com/u/12938082',
-  },
-];
-
-function AboutContent() {
-  return (
-    <React.Fragment>
-      <Container>
-        <Box
-          sx={{
-            pt: 12,
-
-            minHeight: 200,
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            maxWidth: 600,
-            mx: 'auto',
-            textAlign: 'center',
-          }}
-        >
-          <Typography variant="body2" color="primary.600" fontWeight="bold">
-            About us
-          </Typography>
-          <Typography component="h1" variant="h2" sx={{ my: 1 }}>
-            We&apos;re on a mission to make <br /> building UIs more{' '}
-            <GradientText>accessible</GradientText>
-          </Typography>
-          <Typography
-            color="text.secondary"
-            textAlign="center"
-            sx={{
-              maxWidth: { md: 500 },
-              minHeight: 48, // a hack to reduce CLS (layout shift)
-            }}
-          >
-            Our mission is to empower anyone to build UIs, faster. We&apos;re reducing the entry
-            barrier, making design skills accessible.
-          </Typography>
-        </Box>
-        <References companies={CORE_CUSTOMERS} />
-      </Container>
-      <Divider />
-      <Section bg="gradient" cozy>
-        <Grid container alignItems="center" spacing={4}>
-          <Grid item xs={12} md={6}>
-            <Typography variant="h2" sx={{ my: 1 }}>
-              Our <GradientText>ultimate</GradientText> goal
-            </Typography>
-            <Typography color="text.secondary" sx={{ mb: 1, maxWidth: 450 }}>
-              We aim high trying to design the most effective and efficient tool for building UIs,
-              for developers and designers. MUI started back in 2014, to unify React and Material
-              Design. Since then, we&apos;ve become a community of over 2M developers from every
-              corner of the world.
-            </Typography>
-            <Typography color="text.secondary" sx={{ mb: 2 }}>
-              We plan on doing all that cultivating our values:
-            </Typography>
-            {[
-              'Customer obsessed. We put our customers front & center.',
-              'Transparency. Most of our work is public.',
-              'Freedom. We work from anywhere in the world.',
-              'Autonomy. We want to create a safe, high-trust team.',
-              "Excellence. We're aiming high, and we know it.",
-            ].map((text) => (
-              <Box key={text} sx={{ display: 'flex', alignItems: 'center', mt: 1 }}>
-                <IconImage name="pricing/yes" />
-                <Typography variant="body2" color="text.primary" fontWeight={600} sx={{ ml: 1.5 }}>
-                  {text}
-                </Typography>
-              </Box>
-            ))}
-          </Grid>
-          <MuiStatistics />
-        </Grid>
-      </Section>
-      <Divider />
-      <Container sx={{ py: { xs: 4, md: 8 } }}>
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <div>
-            <Typography variant="h2" sx={{ my: 1 }}>
-              Team
-            </Typography>
-            <Typography color="text.secondary" sx={{ mb: 2, maxWidth: 450 }}>
-              MUI is maintained by a group of invaluable core contributors, with the massive support
-              and involvement of the community.
-            </Typography>
-            <Button
-              component={Link}
-              noLinkStyle
-              href={ROUTES.careers}
-              endIcon={<KeyboardArrowRightRounded fontSize="small" />}
-              variant="contained"
-              size="large"
-              sx={{ width: { xs: '100%', sm: 'auto' } }}
-            >
-              See open roles
-            </Button>
-          </div>
-        </Box>
-        <Divider sx={{ my: { xs: 2, sm: 4 } }} />
-        <Typography
-          component="h3"
-          variant="h5"
-          color="primary"
-          fontWeight="extraBold"
-          sx={{ mb: 1 }}
-          id="company"
-        >
-          Company
-        </Typography>
-        <Typography color="text.secondary" sx={{ maxWidth: { md: 450 } }}>
-          The development of the project and its ecosystem is guided by an international team.
-        </Typography>
-        <Box sx={{ pt: 2 }}>
-          <Grid container spacing={2}>
-            {(teamMembers as Array<Profile>).map((profileJson) => {
-              const profile = {
-                src: `/static/branding/about/${profileJson.name
-                  .split(' ')
-                  .map((x) => x.toLowerCase())
-                  .join('-')}.png`,
-                ...profileJson,
-              };
-              return (
-                <Grid key={profile.name} item xs={12} sm={6} md={3}>
-                  <Person {...profile} />
-                </Grid>
-              );
-            })}
-          </Grid>
-        </Box>
-      </Container>
-      <Divider />
-      <Box data-mui-color-scheme="dark" sx={{ bgcolor: 'primaryDark.900' }}>
-        <Container sx={{ py: { xs: 4, sm: 8 } }}>
-          <Typography
-            component="h3"
-            variant="h5"
-            color="primary.400"
-            fontWeight="extraBold"
-            sx={{ mb: 1 }}
-          >
-            Community contributors
-          </Typography>
-          <Typography color="text.secondary" sx={{ maxWidth: { md: 500 } }}>
-            Some members of the community have so enriched it, that they deserve special mention.
-          </Typography>
-          <Box sx={{ pt: 2, pb: { xs: 4, sm: 8 } }}>
-            <Grid container spacing={2}>
-              {contributors.map((profile) => (
-                <Grid key={profile.name} item xs={12} sm={6} md={3}>
-                  <Person {...profile} sx={{ bgcolor: 'primaryDark.600' }} />
-                </Grid>
-              ))}
-            </Grid>
-          </Box>
-          <Typography
-            component="h3"
-            variant="h5"
-            color="warning.500"
-            fontWeight="extraBold"
-            sx={{ mb: 1 }}
-          >
-            Community emeriti
-          </Typography>
-          <Typography color="text.secondary" sx={{ maxWidth: { md: 500 } }}>
-            We honor some no-longer-active core team members who have made valuable contributions in
-            the past. They advise us from time to time.
-          </Typography>
-          <Box sx={{ pt: 2 }}>
-            <Grid container spacing={2}>
-              {emeriti.map((profile) => (
-                <Grid key={profile.name} item xs={12} sm={6} md={3}>
-                  <Person {...profile} sx={{ bgcolor: 'primaryDark.600' }} />
-                </Grid>
-              ))}
-            </Grid>
-          </Box>
-        </Container>
-      </Box>
-      <Divider />
-      <Container sx={{ py: { xs: 4, md: 12 } }}>
-        <Typography variant="h2" sx={{ mt: 1, mb: { xs: 2, sm: 4 } }}>
-          How can you support us?
-        </Typography>
-        <Grid container spacing={3}>
-          <Grid item xs={12} sm={6} md={4}>
-            <Widget
-              icon={<ForumRoundedIcon fontSize="small" color="primary" />}
-              title="Give feedback"
-            >
-              <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                Tell us what and where we can improve or share your happy moments with us! You can
-                also up or downvote any page on our documentation. <br />
-                <br /> And lastly, from time to time, we send our community a survey for more
-                structured feedback, you&apos;re always invited to participate to share your
-                thoughts.
-              </Typography>
-              <Button
-                component="a"
-                // @ts-expect-error
-                variant="link"
-                size="small"
-                href="https://github.com/mui/material-ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc"
-                endIcon={<KeyboardArrowRightRounded />}
-                sx={{ ml: -1 }}
-              >
-                Leave your feedback{' '}
-              </Button>
-            </Widget>
-          </Grid>
-          <Grid item xs={12} sm={6} md={4}>
-            <Widget
-              icon={<PeopleRoundedIcon fontSize="small" color="primary" />}
-              title="Join the community"
-            >
-              <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                Become a member of a huge community of developers supporting MUI. You can:
-              </Typography>
-              <Box
-                component="ul"
-                sx={{
-                  typography: 'body2',
-                  color: 'text.secondary',
-                  pl: 2,
-                  mb: 2,
-                }}
-              >
-                <li>
-                  Add new features by{' '}
-                  <Link href="https://github.com/mui/material-ui/blob/HEAD/CONTRIBUTING.md#your-first-pull-request">
-                    submitting a pull request
-                  </Link>
-                  .
-                </li>
-                <li>
-                  Fix bugs or{' '}
-                  <Link href="https://github.com/mui/material-ui/tree/HEAD/docs">
-                    improve our documentation
-                  </Link>
-                  .
-                </li>
-                <li>
-                  Help others by reviewing and commenting on existing{' '}
-                  <Link href="https://github.com/mui/material-ui/pulls">PRs</Link> and{' '}
-                  <Link href="https://github.com/mui/material-ui/issues">issues</Link>.
-                </li>
-                <li>
-                  Help <Link href="https://crowdin.com/project/material-ui-docs">translate</Link>{' '}
-                  the documentation.
-                </li>
-                <li>
-                  Answer questions on{' '}
-                  <Link href="https://stackoverflow.com/questions/tagged/material-ui">
-                    Stack Overflow
-                  </Link>
-                  .
-                </li>
-              </Box>
-              <Button
-                component="a"
-                // @ts-expect-error
-                variant="link"
-                size="small"
-                href="https://github.com/mui/material-ui"
-                endIcon={<KeyboardArrowRightRounded />}
-                sx={{ ml: -1 }}
-              >
-                See the repository
-              </Button>
-            </Widget>
-          </Grid>
-          <Grid item xs={12} sm={6} md={4}>
-            <Widget
-              icon={<LocalAtmRoundedIcon fontSize="small" color="primary" />}
-              title="Support us financially"
-            >
-              <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                If you use MUI in a commercial project and would like to support its continued
-                development by becoming a Sponsor, or in a side or hobby project and would like to
-                become a Backer, you can do so through {'Open Collective'}.
-                <br />
-                <br />
-                All funds donated are managed transparently, and Sponsors receive recognition in the
-                README and on the MUI home page.
-              </Typography>
-              <Button
-                component="a"
-                // @ts-expect-error
-                variant="link"
-                size="small"
-                href="https://opencollective.com/mui"
-                endIcon={<KeyboardArrowRightRounded />}
-                sx={{ ml: -1 }}
-              >
-                {'See Open Collective'}
-              </Button>
-            </Widget>
-          </Grid>
-        </Grid>
-      </Container>
-      <Divider />
-      <HeroEnd />
-      <Divider />
-    </React.Fragment>
-  );
-}
 
 export default function About() {
   return (
     <BrandingCssVarsProvider>
       <Head
         title="About us - MUI"
-        description="Our mission is to empower anyone to build UIs, faster. We're reducing the entry barrier, making design skills accessible."
+        description="MUI is a 100% remote globally distributed team, supported by a community of thousands
+        of developers all across the world."
       />
       <AppHeaderBanner />
       <AppHeader />
       <main id="main-content">
-        <AboutContent />
+        <AboutHero />
+        <Divider />
+        <OurValues />
+        <Divider />
+        <Team />
+        <Divider />
+        <HowToSupport />
+        <Divider />
+        <AboutEnd />
+        <Divider />
       </main>
       <AppFooter />
     </BrandingCssVarsProvider>
diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx
index 97a32575e1d465..3af136634824f4 100644
--- a/docs/pages/careers.tsx
+++ b/docs/pages/careers.tsx
@@ -1,26 +1,27 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
 import Paper from '@mui/material/Paper';
 import Button from '@mui/material/Button';
+import Badge from '@mui/material/Badge';
 import Typography from '@mui/material/Typography';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded';
 import MuiAccordion from '@mui/material/Accordion';
 import MuiAccordionSummary from '@mui/material/AccordionSummary';
 import MuiAccordionDetail from '@mui/material/AccordionDetails';
+import OurValues from 'docs/src/components/about/OurValues';
 import Link from 'docs/src/modules/components/Link';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import AppFooter from 'docs/src/layouts/AppFooter';
-import MuiStatistics from 'docs/src/components/home/MuiStatistics';
 import GradientText from 'docs/src/components/typography/GradientText';
 import IconImage from 'docs/src/components/icon/IconImage';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import Head from 'docs/src/modules/components/Head';
 import ROUTES from 'docs/src/route';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
@@ -44,20 +45,10 @@ function Role(props: RoleProps) {
         }}
       >
         <span>
-          <Typography
-            component="span"
-            variant="body1"
-            color="text.primary"
-            fontWeight={700}
-            sx={{ display: 'block', mb: 0.5 }}
-          >
+          <Typography variant="body1" color="text.primary" fontWeight="semiBold" gutterBottom>
             {props.title}
           </Typography>
-          <Typography
-            component="span"
-            color="text.secondary"
-            sx={{ display: 'block', mb: 1, maxWidth: 700 }}
-          >
+          <Typography component="p" color="text.secondary" sx={{ maxWidth: 700 }}>
             {props.description}
           </Typography>
         </span>
@@ -80,7 +71,7 @@ function Role(props: RoleProps) {
       <Typography variant="body1" color="text.primary" fontWeight={700} sx={{ my: 1 }}>
         {props.title}
       </Typography>
-      <Typography color="text.secondary" sx={{ mb: 1, maxWidth: 700 }}>
+      <Typography color="text.secondary" sx={{ maxWidth: 700 }}>
         {props.description}
       </Typography>
     </div>
@@ -92,7 +83,7 @@ const Accordion = styled(MuiAccordion)(({ theme }) => ({
   transition: theme.transitions.create('box-shadow'),
   borderRadius: theme.shape.borderRadius,
   '&:hover': {
-    boxShadow: '1px 1px 20px 0 rgb(90 105 120 / 20%)',
+    boxShadow: '0 4px 8px 0 rgb(90 105 120 / 20%)',
   },
   '&:not(:last-of-type)': {
     marginBottom: theme.spacing(2),
@@ -280,103 +271,40 @@ function CareersContent() {
   return (
     <React.Fragment>
       {/* Hero */}
-      <Container>
-        <Box
-          sx={{
-            height: '30vh',
-            minHeight: 300,
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            maxWidth: 600,
-            mx: 'auto',
-            textAlign: 'center',
-          }}
-        >
-          <Typography variant="body2" color="primary.600" fontWeight="bold">
-            Careers
-          </Typography>
-          <Typography component="h1" variant="h2" sx={{ my: 1 }}>
-            Build the <GradientText>next generation</GradientText> of tools for UI development
-          </Typography>
-          <Typography
-            color="text.secondary"
-            textAlign="center"
-            sx={{
-              maxWidth: { md: 500 },
-              minHeight: 48, // a hack to reduce CLS (layout shift)
-            }}
-          >
-            Our mission is to enable developers at every level of ability
-            <br /> to build great UIs, faster.
-          </Typography>
-        </Box>
-      </Container>
-      {/* Our ultimate goal */}
+      <Section cozy>
+        <SectionHeadline
+          alwaysCenter
+          overline="Join us"
+          title={
+            <Typography variant="h2" sx={{ maxWidth: 600, mx: 'auto' }}>
+              Build <GradientText>the next generation</GradientText>
+              <br /> of tools for UI development
+            </Typography>
+          }
+          description="Together, we are enabling developers & designers to bring stunning UIs to life with unrivalled speed and ease."
+        />
+      </Section>
       <Divider />
-      <Box
-        sx={(theme) => ({
-          bgcolor: 'grey.50',
-          ...theme.applyDarkStyles({
-            bgcolor: 'primaryDark.900',
-          }),
-        })}
-      >
-        <Section bg="gradient" cozy>
-          <Grid container alignItems="center" spacing={4}>
-            <Grid item xs={12} md={6}>
-              <Typography variant="h2" sx={{ my: 1 }}>
-                Our <GradientText>ultimate</GradientText> goal
-              </Typography>
-              <Typography color="text.secondary" sx={{ mb: 1, maxWidth: 450 }}>
-                We aim high trying to design the most effective and efficient tool for building UIs,
-                for developers and designers. MUI started back in 2014, to unify React and Material
-                Design. Since then, we&apos;ve become a community of over 2M developers from every
-                corner of the world.
-              </Typography>
-              <Typography color="text.secondary" sx={{ mb: 2 }}>
-                We plan on doing all that cultivating our values:
-              </Typography>
-              {[
-                'Customer obsessed. We put our customers front & center.',
-                "Excellence. We're aiming high, and we know it.",
-                'Transparency. Most of our work is public.',
-                'Freedom. We work from anywhere in the world.',
-                'Autonomy. We want to create a safe, high-trust team.',
-              ].map((text) => (
-                <Box key={text} sx={{ display: 'flex', alignItems: 'center', mt: 1 }}>
-                  <IconImage name="pricing/yes" />
-                  <Typography variant="body2" color="text.primary" fontWeight={600} sx={{ ml: 1 }}>
-                    {text}
-                  </Typography>
-                </Box>
-              ))}
-            </Grid>
-            <MuiStatistics />
-          </Grid>
-        </Section>
-      </Box>
+      <OurValues />
       <Divider />
       {/* Perks & benefits */}
-      <Section bg="transparent" cozy>
-        <Grid container alignItems="center" spacing={{ xs: 2, sm: 4 }}>
-          <Grid item xs={12} md={6} sx={{ pr: { sm: 0, md: 4 } }}>
-            <Typography variant="h2" sx={{ my: 1 }} id="perks-amp-benefits">
-              {'Perks & benefits'}
-            </Typography>
-            <Typography color="text.secondary" sx={{ mb: 2 }}>
-              To help you go above and beyond with us, we provide:
-            </Typography>
+      <Section bg="gradient" cozy>
+        <Grid container spacing={5} alignItems="center">
+          <Grid item md={6}>
+            <SectionHeadline
+              overline="Working at MUI"
+              title={<Typography variant="h2">Perks & benefits</Typography>}
+              description="To help you go above and beyond with us, we provide:"
+            />
             {[
-              ['Remote work:', 'Our entire company is distributed.'],
+              ['100% remote work:', 'Our entire company is globally distributed.'],
               [
                 'Retreats:',
-                'We meet up every eight months for a week of working and having fun together!',
+                'We meet up every 8 months for a week of working & having fun together!',
               ],
               [
                 'Equipment:',
-                'We will provide the hardware of your choice (initial grant of $2,500 USD).',
+                'We provide the hardware of your choice (initial grant of $2,500 USD).',
               ],
               ['Time off:', 'We provide 33 days of paid time off globally.'],
             ].map((textArray) => (
@@ -389,60 +317,85 @@ function CareersContent() {
               </Box>
             ))}
           </Grid>
-          <Grid item xs={12} sm={12} md={6}>
-            <Paper
-              component={Link}
-              href={ROUTES.blog}
-              noLinkStyle
-              variant="outlined"
-              sx={{ p: 2, width: { xs: '100%', sm: '50%' } }}
-            >
-              <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
-                Blog
-              </Typography>
-              <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                Check behind the scenes and news from the company.
-              </Typography>
-              <Typography
-                sx={(theme) => ({
-                  color: 'primary.600',
-                  ...theme.applyDarkStyles({
-                    color: 'primary.400',
-                  }),
-                })}
-                variant="body2"
-                fontWeight="bold"
+          <Grid item xs={12} md={6} container>
+            <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 2 }}>
+              <Paper
+                component={Link}
+                href={ROUTES.handbook}
+                noLinkStyle
+                variant="outlined"
+                sx={{ p: 2, width: '100%' }}
               >
-                Learn more{' '}
-                <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
-              </Typography>
-            </Paper>
+                <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
+                  Handbook
+                </Typography>
+                <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                  Learn everything about how MUI as a company is run.
+                </Typography>
+                <Typography
+                  sx={(theme) => ({
+                    color: 'primary.600',
+                    ...theme.applyDarkStyles({
+                      color: 'primary.400',
+                    }),
+                  })}
+                  variant="body2"
+                  fontWeight="bold"
+                >
+                  Learn more{' '}
+                  <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
+                </Typography>
+              </Paper>
+              <Paper
+                component={Link}
+                href={ROUTES.blog}
+                noLinkStyle
+                variant="outlined"
+                sx={{ p: 2, width: '100%' }}
+              >
+                <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
+                  Blog
+                </Typography>
+                <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                  Check behind the scenes and news from the company.
+                </Typography>
+                <Typography
+                  sx={(theme) => ({
+                    color: 'primary.600',
+                    ...theme.applyDarkStyles({
+                      color: 'primary.400',
+                    }),
+                  })}
+                  variant="body2"
+                  fontWeight="bold"
+                >
+                  Learn more{' '}
+                  <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
+                </Typography>
+              </Paper>
+            </Box>
           </Grid>
         </Grid>
       </Section>
-      {/* Open roles */}
       <Divider />
-      <Container sx={{ py: { xs: 4, md: 8 } }}>
-        <div>
-          <Typography variant="h2" sx={{ my: 1 }} id="open-roles">
-            {`Open roles (${openRolesData.reduce((acc, item) => acc + item.roles.length, 0)})`}
-          </Typography>
-          <Typography color="text.secondary" sx={{ mb: 2, maxWidth: 500 }}>
-            The company is bootstrapped (so far). It was incorporated in mid-2019 and is growing
-            fast (x2 YoY). We doubled the team in 2020 (6), accelerated in 2021 (15), kept a similar
-            pace in 2022 (25), and we plan to double it in 2023 (50). We&apos;re looking for help to
-            grow in the following areas:
-          </Typography>
-        </div>
-        <Divider
-          sx={(theme) => ({
-            my: { xs: 2, sm: 4 },
-            borderColor: 'grey.100',
-            ...theme.applyDarkStyles({
-              borderColor: 'primaryDark.600',
-            }),
-          })}
+      {/* Open roles */}
+      <Section cozy>
+        <SectionHeadline
+          title={
+            <Typography variant="h2" id="open-roles" gutterBottom>
+              Open roles
+              <Badge
+                badgeContent={openRolesData.reduce((acc, item) => acc + item.roles.length, 0)}
+                color="success"
+                showZero
+                sx={{ ml: 3 }}
+              />
+            </Typography>
+          }
+          description="The company is bootstrapped (so far). It was incorporated in mid-2019 and is growing fast (x2 YoY). We doubled the team in 2020 (6), accelerated in 2021 (15), kept a similar pace in 2022 (25), and we plan to double it in 2023 (50). We're looking for help to
+          grow in the following areas:"
         />
+        <Divider sx={{ my: { xs: 2, sm: 4 } }} />
         <Stack
           spacing={2}
           divider={
@@ -480,39 +433,31 @@ function CareersContent() {
             );
           })}
         </Stack>
-      </Container>
-      {/* Next roles */}
+      </Section>
       <Divider />
-      {nextRolesData.length > 0 ? (
+      {/* Next roles */}
+      {nextRolesData.length > 0 && (
         <Box data-mui-color-scheme="dark" sx={{ bgcolor: 'primaryDark.900' }}>
-          <Container sx={{ py: { xs: 4, md: 8 } }}>
-            <Box
-              sx={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-              }}
-            >
-              <div>
-                <Typography variant="h2" sx={{ my: 1 }} id="next-roles">
+          <Section bg="transparent">
+            <SectionHeadline
+              title={
+                <Typography variant="h2" id="next-roles" gutterBottom>
                   Next roles
                 </Typography>
-                <Typography color="text.secondary" sx={{ mb: 2, maxWidth: 450 }}>
+              }
+              description={
+                <React.Fragment>
                   We hire in batches, we collect applications a few months before we actively aim to
-                  fill the roles. If none of these roles fit with what you are looking for, you can
-                  apply to the{' '}
+                  fill the roles. If none of them fit with what you are looking for, apply to the{' '}
                   <Link href="https://jobs.ashbyhq.com/MUI/4715d81f-d00f-42d4-a0d0-221f40f73e19/application?utm_source=ZNRrPGBkqO">
                     Dream job
                   </Link>{' '}
                   role.
-                </Typography>
-              </div>
-            </Box>
-            <Divider sx={{ my: { xs: 2, sm: 4 }, borderColor: 'primaryDark.600' }} />
-            <Stack
-              spacing={2}
-              divider={<Divider sx={{ my: { xs: 1, sm: 2 }, borderColor: 'primaryDark.600' }} />}
-            >
+                </React.Fragment>
+              }
+            />
+            <Divider sx={{ my: { xs: 2, sm: 4 } }} />
+            <Stack spacing={2} divider={<Divider sx={{ my: { xs: 1, sm: 2 } }} />}>
               {nextRolesData.map((category) => {
                 const roles = category.roles;
                 return (
@@ -536,9 +481,9 @@ function CareersContent() {
                 );
               })}
             </Stack>
-          </Container>
+          </Section>
         </Box>
-      ) : null}
+      )}
       <Divider />
       {/* Frequently asked questions */}
       <Section bg="transparent">
@@ -557,10 +502,9 @@ function CareersContent() {
               sx={(theme) => ({
                 p: 2,
                 borderStyle: 'dashed',
-                borderColor: 'grey.300',
+                borderColor: 'divider',
                 bgcolor: 'white',
                 ...theme.applyDarkStyles({
-                  borderColor: 'primaryDark.600',
                   bgcolor: 'primaryDark.800',
                 }),
               })}
@@ -570,11 +514,11 @@ function CareersContent() {
                   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.secondary" sx={{ my: 1, textAlign: 'left' }}>
                 We&apos;re to help you with any other question you have about our hiring process.
               </Typography>
               <Link href="mailto:job@mui.com" variant="body2">
-                Contact us <KeyboardArrowRightRounded fontSize="small" sx={{ mt: '1px' }} />
+                Contact us <KeyboardArrowRightRounded fontSize="small" />
               </Link>
             </Paper>
           </Grid>
diff --git a/docs/public/static/branding/about/group-photo/group-photo.jpg b/docs/public/static/branding/about/group-photo/group-photo.jpg
new file mode 100644
index 00000000000000..2d9aaa544a58c6
Binary files /dev/null and b/docs/public/static/branding/about/group-photo/group-photo.jpg differ
diff --git a/docs/public/static/branding/about/group-photo/group-photo.png b/docs/public/static/branding/about/group-photo/group-photo.png
new file mode 100644
index 00000000000000..a516c7900d9312
Binary files /dev/null and b/docs/public/static/branding/about/group-photo/group-photo.png differ
diff --git a/docs/public/static/branding/about/group-photo/outdoor-focus-group.png b/docs/public/static/branding/about/group-photo/outdoor-focus-group.png
new file mode 100644
index 00000000000000..f88f881524aeb3
Binary files /dev/null and b/docs/public/static/branding/about/group-photo/outdoor-focus-group.png differ
diff --git a/docs/public/static/branding/about/group-photo/portugal-sight-seeing.png b/docs/public/static/branding/about/group-photo/portugal-sight-seeing.png
new file mode 100644
index 00000000000000..47303a569ae941
Binary files /dev/null and b/docs/public/static/branding/about/group-photo/portugal-sight-seeing.png differ
diff --git a/docs/public/static/branding/about/group-photo/scuba-gear.png b/docs/public/static/branding/about/group-photo/scuba-gear.png
new file mode 100644
index 00000000000000..634d8c5887881c
Binary files /dev/null and b/docs/public/static/branding/about/group-photo/scuba-gear.png differ
diff --git a/docs/public/static/branding/about/group-photo/skiers.jpg b/docs/public/static/branding/about/group-photo/skiers.jpg
new file mode 100644
index 00000000000000..b47c9846c447c2
Binary files /dev/null and b/docs/public/static/branding/about/group-photo/skiers.jpg differ
diff --git a/docs/public/static/branding/about/group-photo/skiers.png b/docs/public/static/branding/about/group-photo/skiers.png
new file mode 100644
index 00000000000000..d1441fd9a6a7c6
Binary files /dev/null and b/docs/public/static/branding/about/group-photo/skiers.png differ
diff --git a/docs/public/static/branding/about/group-photo/snow-tea.png b/docs/public/static/branding/about/group-photo/snow-tea.png
new file mode 100644
index 00000000000000..194e79fa673505
Binary files /dev/null and b/docs/public/static/branding/about/group-photo/snow-tea.png differ
diff --git a/docs/public/static/branding/about/group-photo/team-dinner.png b/docs/public/static/branding/about/group-photo/team-dinner.png
new file mode 100644
index 00000000000000..5e4e669425ad5f
Binary files /dev/null and b/docs/public/static/branding/about/group-photo/team-dinner.png differ
diff --git a/docs/public/static/branding/about/group-photo/teide-group.jpg b/docs/public/static/branding/about/group-photo/teide-group.jpg
new file mode 100644
index 00000000000000..959aa192a083f5
Binary files /dev/null and b/docs/public/static/branding/about/group-photo/teide-group.jpg differ
diff --git a/docs/public/static/branding/about/group-photo/teide-group.png b/docs/public/static/branding/about/group-photo/teide-group.png
new file mode 100644
index 00000000000000..e16a0c1a16e5e4
Binary files /dev/null and b/docs/public/static/branding/about/group-photo/teide-group.png differ
diff --git a/docs/public/static/branding/about/group-photo/working-table-portugal.png b/docs/public/static/branding/about/group-photo/working-table-portugal.png
new file mode 100644
index 00000000000000..2e7747a8958a82
Binary files /dev/null and b/docs/public/static/branding/about/group-photo/working-table-portugal.png differ
diff --git a/docs/public/static/branding/about/group-photo/working-table-tenerife.png b/docs/public/static/branding/about/group-photo/working-table-tenerife.png
new file mode 100644
index 00000000000000..eaac20aace7060
Binary files /dev/null and b/docs/public/static/branding/about/group-photo/working-table-tenerife.png differ
diff --git a/docs/public/static/branding/about/illustrations/better-dark.svg b/docs/public/static/branding/about/illustrations/better-dark.svg
new file mode 100644
index 00000000000000..ff3b4b8508114a
--- /dev/null
+++ b/docs/public/static/branding/about/illustrations/better-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="89" height="89" fill="none"><path fill="#0059B3" fill-opacity=".3" d="m82.486 51.65 4.355-1.005.525-5.66-5.69-2.484a37.494 37.494 0 0 0-.37-4.063l1.424-.968 3.7-2.511-1.556-5.467-6.182-.26a36.441 36.441 0 0 0-1.83-3.662l.975-1.41 2.542-3.678-3.426-4.536-5.88 1.998c-.072-.073-.14-.146-.214-.219a37.685 37.685 0 0 0-2.798-2.53c.162-.672.302-1.259.402-1.68l1.042-4.348-4.833-2.992-4.744 3.973a36.304 36.304 0 0 0-3.82-1.476l-.228-1.698-.6-4.43L49.694 1.5l-2.997 5.436a37.662 37.662 0 0 0-4.077.003l-.836-1.516-2.16-3.915-5.586 1.044-.83 6.133c-1.3.422-2.574.916-3.817 1.48l-1.312-1.098-3.427-2.87-4.834 2.992c.33 1.37 1.001 4.179 1.445 6.032a37.645 37.645 0 0 0-2.762 2.503c-.083.083-.162.168-.244.25l-1.641-.557-4.233-1.44-3.425 4.537 3.52 5.092a36.578 36.578 0 0 0-1.824 3.665l-1.71.071-4.468.188-1.555 5.467 5.13 3.482a37.481 37.481 0 0 0-.364 4.063l-1.589.693L2 45.023l.525 5.66 6.034 1.393c.3 1.335.674 2.648 1.118 3.936l-1.216 1.206-3.174 3.147 2.534 5.088 6.134-.882a36.8 36.8 0 0 0 2.47 3.25l-.706 1.58-1.823 4.082 4.201 3.83 5.402-3.04a36.549 36.549 0 0 0 3.475 2.156c-.035.685-.066 1.283-.086 1.711l-.225 4.465 5.3 2.053 3.937-4.782c1.319.32 2.66.567 4.018.741l.542 1.639 1.403 4.244h5.684l1.947-5.89a36.947 36.947 0 0 0 4.017-.744l1.09 1.325 2.842 3.452 5.3-2.053-.312-6.184a36.712 36.712 0 0 0 3.472-2.16c.6.339 1.124.633 1.5.844l3.897 2.193 4.2-3.83a20737.6 20737.6 0 0 1-2.53-5.668 37.065 37.065 0 0 0 2.465-3.253l1.703.244 4.425.636 2.533-5.088-4.395-4.358a36.35 36.35 0 0 0 1.114-3.937l1.672-.387-.001.008Z"/><path fill="#004C99" d="M49.796 41.43c.596-1.22 1.939 1.93 2.636 3.094.698 1.166 1.101 2.566.82 3.896-.282 1.33-1.566 3.423-2.71 2.688-2.15-1.378-1.545-8.044-.748-9.679l.002.001Z"/><path stroke="#39F" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".3" stroke-width="2.56" d="m52.718 67.406 2.934 1.6.806-3.243 3.158 1.093.261-3.332 3.295.56-.288-3.328 3.342.014-.83-3.237 3.299-.535-1.352-3.057 3.166-1.073-1.84-2.79 2.943-1.583-2.274-2.448 2.643-2.044-2.643-2.044 2.274-2.447-2.943-1.582 1.84-2.79-3.166-1.073 1.352-3.057-3.299-.535.83-3.237-3.342.014.288-3.33-3.295.561-.261-3.331-3.158 1.093L55.652 19l-2.934 1.6-1.332-3.064-2.628 2.065-1.822-2.802-2.252 2.467L42.43 16.8l-1.822 2.802-2.627-2.065-1.333 3.064-2.934-1.6-.806 3.244-3.158-1.093-.26 3.331-3.295-.56.288 3.329-3.343-.014.83 3.237-3.299.535 1.352 3.057-3.165 1.072 1.839 2.79-2.943 1.584 2.275 2.447-2.643 2.044 2.643 2.045-2.275 2.447 2.943 1.582-1.84 2.79 3.165 1.073"/><path fill="url(#a)" d="M30.846 48.487c-.388 1.82-1.506 12.119-2.064 14.578-.223 1.248-.626 2.055-1.166 3.189a2.328 2.328 0 0 0 .865 2.985c1.325.835 3.193 1.919 4.736 2.46 1.605.561 3.846.882 5.429 1.051 1.133.121 2.166-.582 2.587-1.641 1.655-4.16 2.742-4.755 3.801-6.492 2.11-3.46 6.27-6.528 9.202-9.094 1.347-1.179 2.414-2.797 3.38-4.274.858-1.31 1.766-2.587 2.673-3.861.737-1.037 1.52-1.909.324-2.962-1.318-1.163-2.72-.356-3.903.592-.758.607-1.706 2.212-2.485 2.976-1.728 1.695-3.473 2.15-4.388-.112-.393-.972-.374-4.24.004-5.748 1.212-4.366 3.384-7.94 4.518-12.04.34-1.23.634-2.77-.255-3.89-.395-.5-1.118-.773-1.727-.553-.627.225-.975.874-1.183 1.492-.868 2.58-2.441 4.762-3.903 7.262l-.022.038c-1.099 1.879-2.396 4.096-4.786 2.784-.553-.303-1.166-.598-1.787-.492-1.425.244-1.832 2.142-3.215 2.381-.664.114-1.135-.358-1.837-.085-1.179.458-1.031 1.743-1.812 2.488-.288.274-.685.219-.972.45-.407.33-.734 1.058-.925 1.534-.632 1.578-.737 3.334-1.09 4.984Z"/><path stroke="#39F" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.072" d="M82.486 51.646c0 .002.001.003.003.003l2.933-.677a2.015 2.015 0 0 0 1.554-1.777l.22-2.368a2.56 2.56 0 0 0-1.525-2.582l-2.522-1.101c-.901-.393-1.49-1.269-1.567-2.249a37.987 37.987 0 0 0-.078-.863c-.1-.977.318-1.944 1.13-2.497l.096-.065 2.168-1.472a2.56 2.56 0 0 0 1.025-2.819l-.543-1.907a2.56 2.56 0 0 0-2.355-1.857l-2.728-.115c-.982-.041-1.846-.645-2.274-1.529a36.424 36.424 0 0 0-.391-.784c-.45-.876-.413-1.933.147-2.744l.058-.083 1.49-2.156a2.56 2.56 0 0 0-.063-2.998l-1.195-1.583a2.56 2.56 0 0 0-2.868-.881l-3.839 1.304a.488.488 0 0 1-.503-.12v0a37.674 37.674 0 0 0-1.575-1.488c-.734-.654-1.076-1.65-.848-2.606l.027-.117.611-2.549a2.56 2.56 0 0 0-1.142-2.773L66.246 7.15a2.56 2.56 0 0 0-2.993.214l-2.091 1.752c-.754.631-1.8.767-2.713.402a36.1 36.1 0 0 0-.818-.316c-.923-.344-1.606-1.15-1.738-2.126l-.013-.1-.351-2.597a2.56 2.56 0 0 0-2.067-2.174l-1.95-.364A2.559 2.559 0 0 0 48.8 3.12l-1.329 2.41c-.474.86-1.398 1.365-2.38 1.353a35.866 35.866 0 0 0-.865.001c-.983.013-1.909-.492-2.383-1.353l-.06-.108-1.266-2.295a2.56 2.56 0 0 0-2.712-1.28l-1.95.364a2.56 2.56 0 0 0-2.066 2.174l-.366 2.705c-.132.974-.813 1.78-1.734 2.124-.274.102-.547.208-.818.317-.913.367-1.96.231-2.715-.4l-.078-.065-2.009-1.683a2.56 2.56 0 0 0-2.991-.214L21.39 8.214c-.94.582-1.4 1.7-1.142 2.775l.64 2.673c.228.954-.113 1.949-.844 2.602-.527.47-1.042.956-1.545 1.46v0a.56.56 0 0 1-.576.138l-1.31-.445-2.48-.844a2.56 2.56 0 0 0-2.867.881l-1.196 1.584a2.56 2.56 0 0 0-.063 2.998l1.553 2.245c.56.81.599 1.865.15 2.741-.133.26-.263.52-.39.783-.428.887-1.294 1.492-2.278 1.533l-.1.004-2.62.11A2.56 2.56 0 0 0 3.97 31.31l-.543 1.908a2.56 2.56 0 0 0 1.024 2.818l2.273 1.542c.812.551 1.23 1.517 1.131 2.492-.029.288-.055.576-.077.864-.077.981-.665 1.858-1.567 2.252l-.113.05-2.401 1.047a2.56 2.56 0 0 0-1.525 2.583l.183 1.976a2.56 2.56 0 0 0 1.973 2.257l2.662.615c.96.221 1.7.975 1.957 1.925.077.282.157.563.24.842.28.943.048 1.971-.65 2.663l-.075.074-1.86 1.844a2.56 2.56 0 0 0-.489 2.96l.884 1.775a2.561 2.561 0 0 0 2.657 1.392l2.714-.39c.971-.139 1.93.294 2.515 1.082.172.232.347.462.525.69.605.778.762 1.823.36 2.722l-.048.108-1.069 2.392a2.56 2.56 0 0 0 .613 2.936l1.467 1.337a2.56 2.56 0 0 0 2.98.34l2.384-1.343c.859-.482 1.914-.423 2.744.106.246.156.493.31.741.46.842.507 1.362 1.424 1.314 2.406l-.005.105-.132 2.617a2.56 2.56 0 0 0 1.632 2.516l1.85.717a2.56 2.56 0 0 0 2.901-.76l1.741-2.115c.624-.758 1.625-1.084 2.588-.895.284.056.57.109.855.158.972.167 1.792.835 2.102 1.77l.035.108.822 2.487a2.56 2.56 0 0 0 2.43 1.757h1.984a2.56 2.56 0 0 0 2.431-1.757l.861-2.604c.31-.934 1.128-1.6 2.098-1.769.286-.05.571-.102.856-.158.964-.19 1.965.136 2.59.894.023.03.047.057.069.085l1.666 2.023a2.56 2.56 0 0 0 2.9.76l1.851-.716a2.559 2.559 0 0 0 1.632-2.515l-.138-2.733c-.05-.981.47-1.897 1.31-2.405.249-.15.495-.304.74-.46.832-.531 1.888-.59 2.748-.107l.093.052 2.284 1.285a2.56 2.56 0 0 0 2.98-.339l1.466-1.336a2.56 2.56 0 0 0 .613-2.936l-1.12-2.51c-.401-.898-.246-1.941.358-2.718.178-.23.353-.46.525-.693.584-.79 1.544-1.223 2.516-1.083l.113.016 2.593.373a2.56 2.56 0 0 0 2.656-1.393l.885-1.776a2.559 2.559 0 0 0-.49-2.958l-1.94-1.925c-.698-.692-.93-1.719-.651-2.66.187-.632.358-1.27.51-1.913a.817.817 0 0 1 .609-.61l1.173-.271c.002 0 .003.001.003.003v0Z"/><defs><linearGradient id="a" x1="63.778" x2="21.729" y1="36.074" y2="42.266" gradientUnits="userSpaceOnUse"><stop stop-color="#007FFF"/><stop offset="1" stop-color="#39F"/></linearGradient></defs></svg>
diff --git a/docs/public/static/branding/about/illustrations/better-light.svg b/docs/public/static/branding/about/illustrations/better-light.svg
new file mode 100644
index 00000000000000..ebb328d791569b
--- /dev/null
+++ b/docs/public/static/branding/about/illustrations/better-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="89" height="89" fill="none"><path fill="#E7F2FE" fill-opacity=".5" d="m82.486 51.65 4.355-1.005.525-5.66-5.69-2.484a37.494 37.494 0 0 0-.37-4.063l1.424-.968 3.7-2.511-1.556-5.467-6.182-.26a36.441 36.441 0 0 0-1.83-3.662l.975-1.41 2.542-3.678-3.426-4.536-5.88 1.998c-.072-.073-.14-.146-.214-.219a37.685 37.685 0 0 0-2.798-2.53c.162-.672.302-1.259.402-1.68l1.042-4.348-4.833-2.992-4.744 3.973a36.304 36.304 0 0 0-3.82-1.476l-.228-1.698-.6-4.43L49.694 1.5l-2.997 5.436a37.662 37.662 0 0 0-4.077.003l-.836-1.516-2.16-3.915-5.586 1.044-.83 6.133c-1.3.422-2.574.916-3.817 1.48l-1.312-1.098-3.427-2.87-4.834 2.992c.33 1.37 1.001 4.179 1.445 6.032a37.645 37.645 0 0 0-2.762 2.503c-.083.083-.162.168-.244.25l-1.641-.557-4.233-1.44-3.425 4.537 3.52 5.092a36.578 36.578 0 0 0-1.824 3.665l-1.71.071-4.468.188-1.555 5.467 5.13 3.482a37.481 37.481 0 0 0-.364 4.063l-1.589.693L2 45.023l.525 5.66 6.034 1.393c.3 1.335.674 2.648 1.118 3.936l-1.216 1.206-3.174 3.147 2.534 5.088 6.134-.882a36.8 36.8 0 0 0 2.47 3.25l-.706 1.58-1.823 4.082 4.201 3.83 5.402-3.04a36.549 36.549 0 0 0 3.475 2.156c-.035.685-.066 1.283-.086 1.711l-.225 4.465 5.3 2.053 3.937-4.782c1.319.32 2.66.567 4.018.741l.542 1.639 1.403 4.244h5.684l1.947-5.89a36.947 36.947 0 0 0 4.017-.744l1.09 1.325 2.842 3.452 5.3-2.053-.312-6.184a36.712 36.712 0 0 0 3.472-2.16c.6.339 1.124.633 1.5.844l3.897 2.193 4.2-3.83a20737.6 20737.6 0 0 1-2.53-5.668 37.065 37.065 0 0 0 2.465-3.253l1.703.244 4.425.636 2.533-5.088-4.395-4.358a36.35 36.35 0 0 0 1.114-3.937l1.672-.387-.001.008Z"/><path fill="#004C99" d="M49.796 41.43c.596-1.22 1.939 1.93 2.636 3.094.698 1.166 1.101 2.566.82 3.896-.282 1.33-1.566 3.423-2.71 2.688-2.15-1.378-1.545-8.044-.748-9.679l.002.001Z"/><path stroke="#C2E0FF" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".5" stroke-width="2.56" d="m52.718 67.406 2.934 1.6.806-3.243 3.158 1.093.261-3.332 3.295.56-.288-3.328 3.342.014-.83-3.237 3.299-.535-1.352-3.057 3.166-1.073-1.84-2.79 2.943-1.583-2.274-2.448 2.643-2.044-2.643-2.044 2.274-2.447-2.943-1.582 1.84-2.79-3.166-1.073 1.352-3.057-3.299-.535.83-3.237-3.342.014.288-3.33-3.295.561-.261-3.331-3.158 1.093L55.652 19l-2.934 1.6-1.332-3.064-2.628 2.065-1.822-2.802-2.252 2.467L42.43 16.8l-1.822 2.802-2.627-2.065-1.333 3.064-2.934-1.6-.806 3.244-3.158-1.093-.26 3.331-3.295-.56.288 3.329-3.343-.014.83 3.237-3.299.535 1.352 3.057-3.165 1.072 1.839 2.79-2.943 1.584 2.275 2.447-2.643 2.044 2.643 2.045-2.275 2.447 2.943 1.582-1.84 2.79 3.165 1.073"/><path fill="url(#a)" d="M30.846 48.487c-.388 1.82-1.506 12.119-2.064 14.578-.223 1.248-.626 2.055-1.166 3.189a2.328 2.328 0 0 0 .865 2.985c1.325.835 3.193 1.919 4.736 2.46 1.605.561 3.846.882 5.429 1.051 1.133.121 2.166-.582 2.587-1.641 1.655-4.16 2.742-4.755 3.801-6.492 2.11-3.46 6.27-6.528 9.202-9.094 1.347-1.179 2.414-2.797 3.38-4.274.858-1.31 1.766-2.587 2.673-3.861.737-1.037 1.52-1.909.324-2.962-1.318-1.163-2.72-.356-3.903.592-.758.607-1.706 2.212-2.485 2.976-1.728 1.695-3.473 2.15-4.388-.112-.393-.972-.374-4.24.004-5.748 1.212-4.366 3.384-7.94 4.518-12.04.34-1.23.634-2.77-.255-3.89-.395-.5-1.118-.773-1.727-.553-.627.225-.975.874-1.183 1.492-.868 2.58-2.441 4.762-3.903 7.262l-.022.038c-1.099 1.879-2.396 4.096-4.786 2.784-.553-.303-1.166-.598-1.787-.492-1.425.244-1.832 2.142-3.215 2.381-.664.114-1.135-.358-1.837-.085-1.179.458-1.031 1.743-1.812 2.488-.288.274-.685.219-.972.45-.407.33-.734 1.058-.925 1.534-.632 1.578-.737 3.334-1.09 4.984Z"/><path stroke="#8DCEFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.072" d="M82.486 51.646c0 .002.001.003.003.003l2.933-.677a2.015 2.015 0 0 0 1.554-1.777l.22-2.368a2.56 2.56 0 0 0-1.525-2.582l-2.522-1.101c-.901-.393-1.49-1.269-1.567-2.249a37.987 37.987 0 0 0-.078-.863c-.1-.977.318-1.944 1.13-2.497l.096-.065 2.168-1.472a2.56 2.56 0 0 0 1.025-2.819l-.543-1.907a2.56 2.56 0 0 0-2.355-1.857l-2.728-.115c-.982-.041-1.846-.645-2.274-1.529a36.424 36.424 0 0 0-.391-.784c-.45-.876-.413-1.933.147-2.744l.058-.083 1.49-2.156a2.56 2.56 0 0 0-.063-2.998l-1.195-1.583a2.56 2.56 0 0 0-2.868-.881l-3.839 1.304a.488.488 0 0 1-.503-.12v0a37.674 37.674 0 0 0-1.575-1.488c-.734-.654-1.076-1.65-.848-2.606l.027-.117.611-2.549a2.56 2.56 0 0 0-1.142-2.773L66.246 7.15a2.56 2.56 0 0 0-2.993.214l-2.091 1.752c-.754.631-1.8.767-2.713.402a36.1 36.1 0 0 0-.818-.316c-.923-.344-1.606-1.15-1.738-2.126l-.013-.1-.351-2.597a2.56 2.56 0 0 0-2.067-2.174l-1.95-.364A2.559 2.559 0 0 0 48.8 3.12l-1.329 2.41c-.474.86-1.398 1.365-2.38 1.353a35.866 35.866 0 0 0-.865.001c-.983.013-1.909-.492-2.383-1.353l-.06-.108-1.266-2.295a2.56 2.56 0 0 0-2.712-1.28l-1.95.364a2.56 2.56 0 0 0-2.066 2.174l-.366 2.705c-.132.974-.813 1.78-1.734 2.124-.274.102-.547.208-.818.317-.913.367-1.96.231-2.715-.4l-.078-.065-2.009-1.683a2.56 2.56 0 0 0-2.991-.214L21.39 8.214c-.94.582-1.4 1.7-1.142 2.775l.64 2.673c.228.954-.113 1.949-.844 2.602-.527.47-1.042.956-1.545 1.46v0a.56.56 0 0 1-.576.138l-1.31-.445-2.48-.844a2.56 2.56 0 0 0-2.867.881l-1.196 1.584a2.56 2.56 0 0 0-.063 2.998l1.553 2.245c.56.81.599 1.865.15 2.741-.133.26-.263.52-.39.783-.428.887-1.294 1.492-2.278 1.533l-.1.004-2.62.11A2.56 2.56 0 0 0 3.97 31.31l-.543 1.908a2.56 2.56 0 0 0 1.024 2.818l2.273 1.542c.812.551 1.23 1.517 1.131 2.492-.029.288-.055.576-.077.864-.077.981-.665 1.858-1.567 2.252l-.113.05-2.401 1.047a2.56 2.56 0 0 0-1.525 2.583l.183 1.976a2.56 2.56 0 0 0 1.973 2.257l2.662.615c.96.221 1.7.975 1.957 1.925.077.282.157.563.24.842.28.943.048 1.971-.65 2.663l-.075.074-1.86 1.844a2.56 2.56 0 0 0-.489 2.96l.884 1.775a2.561 2.561 0 0 0 2.657 1.392l2.714-.39c.971-.139 1.93.294 2.515 1.082.172.232.347.462.525.69.605.778.762 1.823.36 2.722l-.048.108-1.069 2.392a2.56 2.56 0 0 0 .613 2.936l1.467 1.337a2.56 2.56 0 0 0 2.98.34l2.384-1.343c.859-.482 1.914-.423 2.744.106.246.156.493.31.741.46.842.507 1.362 1.424 1.314 2.406l-.005.105-.132 2.617a2.56 2.56 0 0 0 1.632 2.516l1.85.717a2.56 2.56 0 0 0 2.901-.76l1.741-2.115c.624-.758 1.625-1.084 2.588-.895.284.056.57.109.855.158.972.167 1.792.835 2.102 1.77l.035.108.822 2.487a2.56 2.56 0 0 0 2.43 1.757h1.984a2.56 2.56 0 0 0 2.431-1.757l.861-2.604c.31-.934 1.128-1.6 2.098-1.769.286-.05.571-.102.856-.158.964-.19 1.965.136 2.59.894.023.03.047.057.069.085l1.666 2.023a2.56 2.56 0 0 0 2.9.76l1.851-.716a2.559 2.559 0 0 0 1.632-2.515l-.138-2.733c-.05-.981.47-1.897 1.31-2.405.249-.15.495-.304.74-.46.832-.531 1.888-.59 2.748-.107l.093.052 2.284 1.285a2.56 2.56 0 0 0 2.98-.339l1.466-1.336a2.56 2.56 0 0 0 .613-2.936l-1.12-2.51c-.401-.898-.246-1.941.358-2.718.178-.23.353-.46.525-.693.584-.79 1.544-1.223 2.516-1.083l.113.016 2.593.373a2.56 2.56 0 0 0 2.656-1.393l.885-1.776a2.559 2.559 0 0 0-.49-2.958l-1.94-1.925c-.698-.692-.93-1.719-.651-2.66.187-.632.358-1.27.51-1.913a.817.817 0 0 1 .609-.61l1.173-.271c.002 0 .003.001.003.003v0Z"/><defs><linearGradient id="a" x1="63.778" x2="21.729" y1="36.074" y2="42.266" gradientUnits="userSpaceOnUse"><stop stop-color="#007FFF"/><stop offset="1" stop-color="#39F"/></linearGradient></defs></svg>
diff --git a/docs/public/static/branding/about/illustrations/bureaucracy-dark.svg b/docs/public/static/branding/about/illustrations/bureaucracy-dark.svg
new file mode 100644
index 00000000000000..6ab8a241602561
--- /dev/null
+++ b/docs/public/static/branding/about/illustrations/bureaucracy-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="81" height="94" fill="none"><path fill="#0059B3" fill-opacity=".3" d="M38.306 79.3c20.052 0 36.307-16.254 36.307-36.306 0-20.051-16.255-36.306-36.307-36.306C18.255 6.688 2 22.943 2 42.994c0 20.052 16.255 36.307 36.306 36.307Z"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M26.67 36.725c-.693 1.764-4.79 3.312-7.817 2.122-3.028-1.189-4.42-3.19-3.728-4.954.693-1.764 3.074-2.283 6.102-1.095 3.028 1.19 4.977 5.11 4.284 6.875"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M27.632 35.198c-.927 1.654-5.195 2.629-8.033 1.039-2.839-1.59-3.945-3.763-3.019-5.417.927-1.653 3.357-1.843 6.195-.253 2.839 1.59 4.235 5.74 3.309 7.393"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M28.792 33.817c-1.143 1.512-5.504 1.896-8.1-.065-2.595-1.961-3.395-4.265-2.252-5.776 1.143-1.512 3.576-1.37 6.172.593 2.595 1.962 3.414 6.264 2.27 7.775"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M30.132 32.607c-1.338 1.343-5.712 1.13-8.015-1.166-2.305-2.298-2.784-4.687-1.445-6.03 1.337-1.342 3.73-.87 6.034 1.428 2.304 2.297 2.529 6.669 1.191 8.011"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M31.622 31.59c-1.509 1.148-5.812.342-7.782-2.248-1.97-2.59-2.12-5.022-.61-6.169 1.508-1.148 3.813-.353 5.782 2.236 1.97 2.59 1.599 6.952.09 8.1"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M33.237 30.786c-1.652.931-5.805-.453-7.404-3.286-1.598-2.834-1.415-5.264.235-6.195s3.826.168 5.424 3.002c1.599 2.834.637 7.105-1.014 8.036"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M34.947 30.21c-1.762.698-5.689-1.24-6.887-4.265-1.198-3.024-.686-5.407 1.076-6.105 1.762-.698 3.767.688 4.965 3.713 1.197 3.024-.337 7.125-2.1 7.823"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M36.718 29.872c-1.841.451-5.467-2.003-6.242-5.162-.775-3.16.056-5.451 1.897-5.903 1.842-.451 3.639 1.195 4.413 4.354.775 3.16-1.303 7.014-3.144 7.465"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M38.52 29.777c-1.884.197-5.143-2.728-5.48-5.964-.338-3.235.797-5.392 2.683-5.59 1.885-.196 3.442 1.68 3.78 4.916.336 3.235-2.247 6.77-4.133 6.967"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M40.318 29.93c-1.894-.062-4.724-3.404-4.618-6.656.106-3.252 1.525-5.233 3.42-5.172 1.894.062 3.18 2.133 3.075 5.385-.106 3.252-3.148 6.401-5.043 6.339"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M42.078 30.326c-1.868-.32-4.216-4.015-3.668-7.223.548-3.207 2.224-4.977 4.093-4.658 1.868.32 2.86 2.546 2.313 5.752-.548 3.208-3.99 5.913-5.858 5.595"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M43.769 30.957c-1.807-.57-3.63-4.552-2.651-7.653.98-3.102 2.88-4.628 4.688-4.057 1.807.57 2.488 2.911 1.508 6.014-.98 3.102-4.758 5.314-6.565 4.744"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M45.356 31.813c-1.713-.811-2.977-5.004-1.584-7.943 1.393-2.94 3.484-4.193 5.197-3.38 1.712.811 2.068 3.222.675 6.163-1.393 2.94-5.437 4.617-7.15 3.806"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M46.813 32.876c-1.587-1.037-2.268-5.362-.488-8.085 1.78-2.722 4.023-3.678 5.61-2.641 1.586 1.037 1.61 3.475-.17 6.198-1.78 2.722-6.015 3.833-7.602 2.797"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M48.112 34.13c-1.43-1.244-1.517-5.622.618-8.077 2.134-2.456 4.486-3.098 5.916-1.854 1.43 1.243 1.122 3.66-1.013 6.116-2.135 2.455-6.482 2.979-7.911 1.735"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M49.227 35.547c-1.248-1.426-.736-5.775 1.712-7.917 2.45-2.142 4.866-2.458 6.114-1.03 1.248 1.426.613 3.78-1.835 5.921-2.45 2.142-6.827 2.069-8.074.643"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M50.14 37.103c-1.042-1.583.057-5.822 2.774-7.61 2.718-1.789 5.155-1.772 6.197-.19 1.042 1.584.092 3.829-2.624 5.617-2.719 1.788-7.046 1.12-8.088-.463"/><path stroke="#39F" stroke-miterlimit="10" stroke-opacity=".4" stroke-width="1.414" d="M50.833 38.77c-.817-1.71.848-5.76 3.783-7.162 2.937-1.402 5.35-1.054 6.165.656.817 1.71-.43 3.806-3.365 5.208-2.936 1.401-7.131.15-7.948-1.56"/><path stroke="#39F" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.829" d="M38.307 6.688V2C60.947 2 79.3 20.354 79.3 42.993c0 22.64-18.354 40.993-40.993 40.993v8.012"/><path stroke="#39F" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.829" d="M38.306 79.3c20.052 0 36.307-16.254 36.307-36.306 0-20.051-16.255-36.306-36.307-36.306C18.255 6.688 2 22.943 2 42.994c0 20.052 16.255 36.307 36.306 36.307Z"/><path fill="url(#a)" fill-rule="evenodd" d="M19.233 40.547c-.644-.34-1.634.014-1.643.898l.002.002c-.01.928.116 1.795.349 2.707.185.723.595 1.83.952 2.79v.001l.263.715c-.514-.771-1.795-3.564-2.04-4.773-.086-.42-.165-.923-.249-1.454-.158-1-.332-2.103-.594-2.953-.566-1.837-2.535-1.663-2.29.458.04.35.076.736.113 1.142.092 1.005.194 2.125.408 3.066.393 1.733.836 3.178 1.124 4.117.075.245.14.456.19.629-.273-.33-1.221-2.318-1.715-4.672-.154-.736-.3-1.504-.44-2.25-.368-1.943-.704-3.724-1.092-4.334-1.247-1.962-2.557-.188-2.248 2.127.144 1.08.453 2.718.79 4.499l.19 1.017c.262 1.392.806 2.887 1.133 3.785.135.37.233.639.258.757-.248-.314-1.097-1.903-1.544-3.205-.354-1.033-.549-2.155-.717-3.122-.186-1.07-.339-1.951-.638-2.307-.818-.974-1.402-.336-1.616.895-.157.903-.124 2.727.165 3.867.487 1.918 1.038 3.757 2.032 5.864.854 1.81 1.782 3.592 2.749 5.115-.678-.21-1.385-.637-2.055-1.552-1.177-1.611-2.856-2.62-3.444-1.483-.345.667.483 2.636 1.354 3.854a11.397 11.397 0 0 0 3.66 3.32c1.046.598 1.75.869 2.543 1.174.764.294 1.612.62 2.932 1.304.094.05.19.101.289.151.977.517 1.994 1.225 2.8 1.826.87.882 1.515 1.976 1.916 3.217.076.236.159.738.245 1.45a30.963 30.963 0 0 0 10.632 3.525c-1.375-5.878-2.613-10.987-3.101-12.33a31.712 31.712 0 0 1-.554-1.714c-.587-1.946-1.174-3.893-3.476-6.625-1.057-1.254-1.763-1.68-2.359-2.037-.703-.424-1.252-.754-2.042-2.247-.226-.427-.433-.807-.622-1.154-.68-1.25-1.134-2.083-1.448-3.212a17.868 17.868 0 0 1-.092-.353c-.207-.81-.57-2.23-1.07-2.495Z" clip-rule="evenodd"/><path fill="url(#b)" fill-rule="evenodd" d="M58.687 37.643c.699-.248 1.708.217 1.649 1.071-.1 1.454-1.643 6.5-1.643 6.5.79-2.552 2.296-6.824 3.357-9.278.735-1.702 2.782-1.29 2.36.727-.39 1.864-.845 3.53-1.312 5.235-.29 1.06-.585 2.136-.87 3.284.63-1.509 1.202-3.374 1.741-5.132.74-2.41 1.416-4.618 2.1-5.433 1.458-1.738 2.525.249 1.97 2.432-.31 1.219-.847 2.98-1.402 4.793-.23.754-.463 1.517-.684 2.253.065.041.132.09.2.146l.01-.03c.923-2.803 1.95-5.924 2.5-6.42 1.614-1.454 1.883 1.189 1.213 3.785-.15.585-.299 1.172-.447 1.761-.756 3-1.52 6.033-2.682 8.88a8.842 8.842 0 0 1-.868 1.617l.348-.259c1.005-.752 1.89-1.414 2.65-1.023.538.276.69.91.71.993.436 1.939-3.213 4.47-6.005 5.524-1.135.43-3.018.95-5.53.786-1.412 1.302-2.199 3.308-2.584 5.192-.102.497-.333 2.164-.634 4.434a30.988 30.988 0 0 1-13.68 4.587c2.224-6.103 4.375-12.177 4.725-13.774.849-3.877 1.464-5.04 2.22-6.466.18-.34.368-.696.569-1.107 1.026-2.095 2.356-3.068 3.642-4.01 1.345-.985 2.643-1.935 3.497-4.097.756-1.912 1.234-3.173 1.786-5.154.173-.62.456-1.59 1.094-1.817Z" clip-rule="evenodd"/><path stroke="#39F" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.829" d="M19.578 92h37.456"/><defs><linearGradient id="a" x1="35.953" x2="3.646" y1="43.982" y2="48.666" gradientUnits="userSpaceOnUse"><stop stop-color="#007FFF"/><stop offset="1" stop-color="#39F"/></linearGradient><linearGradient id="b" x1="41.154" x2="72.562" y1="46.995" y2="49.158" gradientUnits="userSpaceOnUse"><stop stop-color="#005BB8"/><stop offset="1" stop-color="#0072E6"/></linearGradient></defs></svg>
diff --git a/docs/public/static/branding/about/illustrations/bureaucracy-light.svg b/docs/public/static/branding/about/illustrations/bureaucracy-light.svg
new file mode 100644
index 00000000000000..3658d933271e2d
--- /dev/null
+++ b/docs/public/static/branding/about/illustrations/bureaucracy-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="81" height="94" fill="none"><path fill="#E7F2FE" fill-opacity=".5" d="M38.306 79.3c20.052 0 36.307-16.254 36.307-36.306 0-20.051-16.255-36.306-36.306-36.306C18.255 6.688 2 22.943 2 42.994c0 20.052 16.255 36.307 36.306 36.307Z"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M26.67 36.725c-.693 1.764-4.79 3.312-7.817 2.123-3.028-1.19-4.42-3.19-3.728-4.954.693-1.765 3.074-2.284 6.102-1.096 3.028 1.19 4.977 5.11 4.284 6.875"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M27.632 35.198c-.927 1.654-5.195 2.629-8.033 1.039-2.839-1.59-3.945-3.763-3.019-5.416.927-1.654 3.357-1.844 6.195-.254 2.839 1.59 4.235 5.74 3.309 7.393"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M28.793 33.817c-1.144 1.512-5.505 1.896-8.1-.065-2.596-1.961-3.396-4.265-2.253-5.776 1.143-1.512 3.576-1.37 6.172.593 2.595 1.962 3.414 6.264 2.271 7.775"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M30.132 32.608c-1.338 1.342-5.712 1.129-8.015-1.167-2.305-2.298-2.784-4.687-1.445-6.03 1.337-1.342 3.73-.87 6.034 1.428 2.304 2.297 2.529 6.669 1.191 8.011"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M31.622 31.59c-1.509 1.148-5.812.342-7.782-2.248-1.97-2.59-2.12-5.022-.61-6.169 1.508-1.148 3.813-.353 5.782 2.236 1.97 2.59 1.599 6.952.09 8.1"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M33.237 30.786c-1.652.931-5.805-.454-7.404-3.286-1.598-2.834-1.415-5.264.235-6.195s3.826.168 5.424 3.002c1.599 2.834.637 7.105-1.014 8.036"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M34.946 30.21c-1.762.698-5.688-1.24-6.887-4.265-1.198-3.024-.686-5.407 1.076-6.105 1.762-.698 3.767.688 4.965 3.713 1.197 3.024-.337 7.125-2.1 7.823"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M36.718 29.872c-1.841.451-5.467-2.003-6.242-5.162-.775-3.16.056-5.451 1.897-5.903 1.842-.451 3.639 1.195 4.413 4.354.775 3.16-1.303 7.014-3.144 7.465"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M38.52 29.777c-1.884.197-5.143-2.728-5.48-5.964-.338-3.235.797-5.392 2.683-5.59 1.885-.196 3.442 1.68 3.78 4.916.336 3.236-2.247 6.77-4.133 6.967"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M40.318 29.93c-1.894-.062-4.724-3.404-4.618-6.655.106-3.253 1.525-5.234 3.42-5.173 1.894.062 3.18 2.133 3.075 5.385-.106 3.252-3.148 6.401-5.043 6.339"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M42.078 30.326c-1.868-.32-4.216-4.015-3.668-7.222.548-3.208 2.224-4.978 4.093-4.659 1.868.32 2.86 2.546 2.313 5.752-.548 3.208-3.99 5.913-5.858 5.595"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M43.768 30.957c-1.807-.57-3.63-4.552-2.651-7.653.98-3.102 2.88-4.628 4.688-4.057 1.807.57 2.488 2.911 1.508 6.014-.98 3.102-4.758 5.314-6.565 4.744"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M45.356 31.813c-1.713-.81-2.977-5.004-1.584-7.943 1.393-2.94 3.484-4.193 5.197-3.38 1.712.811 2.068 3.222.675 6.163-1.393 2.94-5.437 4.617-7.15 3.806"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M46.813 32.876c-1.587-1.037-2.268-5.362-.488-8.084 1.78-2.723 4.023-3.68 5.61-2.642 1.586 1.037 1.61 3.475-.17 6.198-1.78 2.722-6.015 3.833-7.602 2.797"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M48.112 34.13c-1.43-1.244-1.517-5.622.618-8.077 2.134-2.456 4.486-3.098 5.916-1.854 1.43 1.243 1.122 3.66-1.013 6.116-2.135 2.455-6.482 2.979-7.911 1.735"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M49.228 35.547c-1.248-1.426-.736-5.775 1.712-7.917 2.45-2.142 4.866-2.458 6.114-1.03 1.248 1.426.613 3.78-1.835 5.921-2.45 2.142-6.827 2.07-8.075.643"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M50.14 37.103c-1.042-1.583.057-5.822 2.774-7.61 2.718-1.789 5.155-1.772 6.197-.19 1.043 1.584.092 3.829-2.624 5.617-2.719 1.788-7.046 1.12-8.088-.463"/><path stroke="#C2E0FF" stroke-miterlimit="10" stroke-opacity=".5" stroke-width="1.414" d="M50.832 38.77c-.817-1.71.848-5.76 3.783-7.162 2.936-1.402 5.35-1.054 6.165.656.817 1.71-.43 3.806-3.365 5.208-2.936 1.401-7.131.15-7.948-1.56"/><path stroke="#8DCEFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.829" d="M38.307 6.688V2C60.947 2 79.3 20.354 79.3 42.993c0 22.64-18.354 40.993-40.993 40.993v8.012"/><path stroke="#8DCEFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.829" d="M38.306 79.3c20.052 0 36.307-16.254 36.307-36.306 0-20.051-16.255-36.306-36.306-36.306C18.255 6.688 2 22.943 2 42.994c0 20.052 16.255 36.307 36.306 36.307Z"/><path fill="url(#a)" fill-rule="evenodd" d="M19.228 40.547c-.644-.34-1.634.014-1.643.898l.002.002c-.01.928.116 1.795.349 2.707.185.723.595 1.83.952 2.79v.001l.263.715c-.514-.771-1.795-3.564-2.04-4.773-.086-.42-.165-.923-.249-1.454-.158-1-.332-2.103-.594-2.953-.566-1.837-2.535-1.663-2.29.458.04.35.076.736.113 1.142.092 1.005.195 2.125.408 3.066.393 1.733.836 3.178 1.124 4.117.075.245.14.456.19.629-.273-.33-1.221-2.318-1.715-4.672-.154-.736-.3-1.504-.44-2.25-.368-1.943-.704-3.724-1.092-4.334-1.247-1.962-2.557-.188-2.248 2.127.144 1.08.453 2.718.79 4.499l.19 1.017c.262 1.392.806 2.887 1.133 3.785.135.37.233.639.259.757-.25-.314-1.098-1.903-1.544-3.205-.355-1.033-.55-2.155-.718-3.122-.186-1.07-.339-1.951-.638-2.307-.818-.974-1.401-.336-1.616.895-.157.903-.124 2.727.165 3.867.487 1.918 1.038 3.757 2.032 5.864.855 1.81 1.782 3.592 2.749 5.115-.678-.21-1.385-.637-2.055-1.552-1.177-1.611-2.856-2.62-3.444-1.483-.345.667.484 2.636 1.355 3.854a11.397 11.397 0 0 0 3.658 3.32c1.047.598 1.75.869 2.544 1.174a25.793 25.793 0 0 1 3.221 1.455c.977.518 1.994 1.225 2.8 1.826.87.882 1.516 1.976 1.916 3.217.077.236.159.738.245 1.448a30.964 30.964 0 0 0 10.632 3.527c-1.375-5.878-2.613-10.987-3.1-12.33a31.712 31.712 0 0 1-.555-1.714c-.587-1.946-1.174-3.893-3.476-6.625-1.057-1.254-1.763-1.68-2.359-2.037-.703-.424-1.251-.754-2.042-2.247-.226-.427-.433-.807-.622-1.154-.68-1.25-1.134-2.083-1.448-3.212a17.868 17.868 0 0 1-.092-.353c-.207-.81-.57-2.23-1.07-2.495Z" clip-rule="evenodd"/><path fill="url(#b)" fill-rule="evenodd" d="M58.684 37.643c.699-.248 1.708.217 1.649 1.071-.1 1.454-1.643 6.5-1.643 6.5.79-2.552 2.296-6.824 3.357-9.278.735-1.702 2.783-1.29 2.36.727-.389 1.864-.845 3.53-1.312 5.235-.29 1.06-.585 2.136-.87 3.284.63-1.509 1.202-3.374 1.742-5.132.738-2.41 1.415-4.618 2.1-5.433 1.457-1.738 2.524.249 1.97 2.432-.31 1.219-.848 2.98-1.402 4.793-.23.754-.464 1.516-.684 2.253.064.041.132.09.2.146l.01-.03c.922-2.803 1.95-5.924 2.5-6.42 1.613-1.454 1.882 1.189 1.212 3.785-.15.585-.298 1.172-.447 1.761-.755 3-1.52 6.033-2.682 8.88a8.84 8.84 0 0 1-.868 1.617l.348-.259c1.006-.752 1.89-1.414 2.65-1.023.538.276.69.91.71.993.437 1.939-3.213 4.47-6.005 5.524-1.135.43-3.017.95-5.53.786-1.412 1.302-2.199 3.308-2.584 5.192-.102.497-.333 2.165-.634 4.435a30.986 30.986 0 0 1-13.68 4.587c2.224-6.104 4.375-12.178 4.725-13.775.849-3.877 1.464-5.04 2.22-6.466.18-.34.368-.696.569-1.107 1.026-2.095 2.356-3.068 3.642-4.01 1.346-.985 2.643-1.935 3.497-4.097.756-1.912 1.234-3.173 1.786-5.153.173-.62.456-1.592 1.094-1.818Z" clip-rule="evenodd"/><path stroke="#8DCEFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.829" d="M19.578 92h37.456"/><defs><linearGradient id="a" x1="35.948" x2="3.641" y1="43.982" y2="48.666" gradientUnits="userSpaceOnUse"><stop stop-color="#007FFF"/><stop offset="1" stop-color="#39F"/></linearGradient><linearGradient id="b" x1="41.151" x2="72.559" y1="46.995" y2="49.158" gradientUnits="userSpaceOnUse"><stop stop-color="#004C99"/><stop offset="1" stop-color="#0072E6"/></linearGradient></defs></svg>
diff --git a/docs/public/static/branding/about/illustrations/community-dark.svg b/docs/public/static/branding/about/illustrations/community-dark.svg
new file mode 100644
index 00000000000000..beba4ba00ef5ac
--- /dev/null
+++ b/docs/public/static/branding/about/illustrations/community-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="92" height="84" fill="none"><path fill="#0059B3" fill-opacity=".3" d="M55.466 2H36.985C17.663 2 2 17.663 2 36.985S16.37 71.97 36.985 71.97h4.088C43.23 75.32 49.999 82 64.847 82c-5.834-4.763-6.757-8.215-6.626-10.137 19.588 0 32.23-16.483 32.23-34.877 0-19.322-15.663-34.985-34.985-34.985V2Z"/><path stroke="#39F" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".3" stroke-width="2.793" d="M14.684 47.016c3.954 9.665 13.451 16.476 24.541 16.476h16.476c13.382 0 22.375-9.917 23.826-22.802M18.93 19.935c4.863-5.782 12.15-9.457 20.295-9.457h14.003c6.56 0 12.564 2.384 17.192 6.332"/><path fill="url(#a)" fill-rule="evenodd" d="M61.625 50.672c.029-.024.058-.051.086-.08.643-.614.706-1.167.528-1.938 0 0 2.547.461 2.701-1.421a.35.35 0 0 0 0-.065 2.026 2.026 0 0 0-.174-.876c-.232-.529-2.32-2.986-2.529-3.19-3.27-3.399-7.576-6.1-7.576-6.1 1.195-.053 2.27-.363 3.468-.708l.067-.019c1.464-.421 2.849-1.328 3.533-2.689L48.95 28.664s-.589-.376-1.504-.422c-2.562-.133-4.806.599-7.104 1.348-1.518.495-3.06.997-4.733 1.264-1.823.29-2.576.045-4.245-.498l-.232-.076L11.3 25.751c-1.078-.246-2.18.3-2.585 1.33-.568 1.442-1.305 3.52-1.595 5.23-.263 1.551-.339 3.638-.356 5.135-.013 1.108.791 2.041 1.882 2.233l17.649 3.104c.615.316 1.582 1.017 2.485 1.67.652.471 1.27.918 1.697 1.179 1.181.72 2.335 1.483 3.49 2.247 1.832 1.214 3.664 2.426 5.601 3.46 1.737.928 3.662 1.237 5.595 1.547 1.582.255 3.17.51 4.666 1.105 1.363.542 2.338.505 2.95.18.183-.097.334-.221.452-.363.596-.61.674-1.356.674-1.356s1.113.34 1.753.518c.081.023.165.05.253.076.588.183 1.32.41 2.062-.134.231-.143.42-.336.55-.56.22-.288.435-.663.646-1.143 1.276.182 1.957-.094 2.456-.537Z" clip-rule="evenodd"/><path fill="url(#b)" d="M68.214 43.245c.972-1.265 3.004-3.672 2.688-5.236l13.142-5.767c.957-.42 1.517-1.426 1.328-2.453-.226-1.229-.57-2.86-.989-4.052-.395-1.125-1.149-2.513-1.782-3.587-.59-1-1.848-1.345-2.894-.84L64.98 28.408c-2.77 1.009-4.881-.575-7.792-1.05-2.91-.474-6.001-.773-8.717.373a9.357 9.357 0 0 0-1.025.51c-1.966 1.13-3.526 2.915-5.021 4.651l-2.87 3.334c-.136.158-.277.328-.31.534-.059.37.248.69.555.902a4.377 4.377 0 0 0 3.732.571c1.07-.332 1.967-1.066 2.784-1.832a27.941 27.941 0 0 0 2.408-2.558c1.7.931 3.464 1.997 5.212 3.16 3.286 2.186 7.801 6.07 10.452 8.661 1.537-.252 2.675-.923 3.826-2.419Z"/><path fill="url(#c)" d="M48.541 51.372c-.125-.441-.465-.767-1.01-.968-1.005-.372-1.758-.17-2.458.322.351-.753.394-1.598.067-2.22-.333-.632-1.002-.94-1.835-.847-.732.082-1.505.467-2.26 1.006a2.501 2.501 0 0 0 .159-1.736 1.657 1.657 0 0 0-.783-1.034c-.559-.32-1.334-.358-2.24-.109-.53.146-1.281.475-2.05.951.353-.687.358-1.366-.003-2-.36-.63-.948-.986-1.701-1.023-1.338-.069-3.08.909-4.05 2.27-.461.648-.607 1.357-.409 1.995.19.616.685 1.11 1.356 1.358.352.129.656.19.939.19.468 0 .88-.167 1.356-.458-.186.29-.34.596-.449.912-.262.762-.128 1.572.357 2.167.468.572 1.199.883 2.05.883.157 0 .316-.01.479-.032.428-.055.903-.186 1.493-.558-.11.373-.101.752.032 1.104.28.738 1.077 1.253 2.183 1.414.124.017.245.027.363.027.729 0 1.383-.322 1.983-.8-.065.365-.001.658.075.852.278.715 1.087 1.223 2.013 1.265.09.004.175.006.26.006.937 0 1.577-.28 2.556-1.536l.048-.063c.71-.909 1.78-2.282 1.48-3.337v-.001Z"/><path stroke="#39F" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.793" d="M55.466 2H36.985C17.663 2 2 17.663 2 36.985S16.37 71.97 36.985 71.97h4.088C43.23 75.32 49.999 82 64.847 82c-5.834-4.763-6.757-8.215-6.626-10.137 19.588 0 32.23-16.483 32.23-34.877 0-19.322-15.663-34.985-34.985-34.985V2Z"/><defs><linearGradient id="a" x1="6.764" x2="65.509" y1="32.244" y2="48.363" gradientUnits="userSpaceOnUse"><stop stop-color="#005BB8"/><stop offset="1" stop-color="#0072E6"/></linearGradient><linearGradient id="b" x1="89.096" x2="38.249" y1="26.027" y2="44.957" gradientUnits="userSpaceOnUse"><stop stop-color="#007FFF"/><stop offset="1" stop-color="#39F"/></linearGradient><linearGradient id="c" x1="49.977" x2="28.576" y1="46.505" y2="52.937" gradientUnits="userSpaceOnUse"><stop stop-color="#007FFF"/><stop offset="1" stop-color="#39F"/></linearGradient></defs></svg>
diff --git a/docs/public/static/branding/about/illustrations/community-light.svg b/docs/public/static/branding/about/illustrations/community-light.svg
new file mode 100644
index 00000000000000..b9274520db9fdf
--- /dev/null
+++ b/docs/public/static/branding/about/illustrations/community-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="92" height="84" fill="none"><path fill="#E7F2FE" fill-opacity=".5" d="M55.466 2H36.985C17.663 2 2 17.663 2 36.985S16.37 71.97 36.985 71.97h4.088C43.23 75.32 49.999 82 64.847 82c-5.834-4.763-6.757-8.215-6.626-10.137 19.588 0 32.23-16.483 32.23-34.877 0-19.322-15.663-34.985-34.985-34.985V2Z"/><path stroke="#C2E0FF" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".5" stroke-width="2.793" d="M14.684 47.016c3.954 9.665 13.451 16.476 24.541 16.476h16.476c13.382 0 22.375-9.917 23.826-22.802M18.93 19.935c4.863-5.782 12.15-9.457 20.295-9.457h14.003c6.56 0 12.564 2.384 17.192 6.332"/><path fill="url(#a)" fill-rule="evenodd" d="M61.627 50.67a1.49 1.49 0 0 0 .082-.075c.645-.616.709-1.17.53-1.941 0 0 2.547.461 2.702-1.421a.348.348 0 0 0-.002-.066 2.026 2.026 0 0 0-.173-.875c-.232-.529-2.32-2.986-2.529-3.19-3.27-3.399-7.576-6.1-7.576-6.1 1.195-.053 2.27-.363 3.468-.708l.067-.019c1.464-.421 2.849-1.328 3.533-2.689L48.95 28.664s-.589-.376-1.504-.422c-2.562-.133-4.806.599-7.104 1.348-1.518.495-3.06.997-4.733 1.264-1.823.29-2.576.045-4.245-.498l-.232-.076L11.3 25.751c-1.078-.246-2.18.3-2.585 1.33-.568 1.442-1.305 3.52-1.595 5.23-.263 1.551-.339 3.638-.356 5.135-.013 1.108.791 2.041 1.882 2.233l17.649 3.104c.615.316 1.582 1.017 2.485 1.67.652.471 1.27.918 1.697 1.179 1.181.72 2.335 1.483 3.49 2.247 1.832 1.214 3.664 2.426 5.601 3.46 1.737.928 3.662 1.237 5.595 1.547 1.582.255 3.17.51 4.666 1.105 1.363.542 2.338.505 2.95.18.183-.097.333-.22.452-.362.596-.61.674-1.357.674-1.357s1.114.34 1.753.518c.081.023.165.05.253.076.588.183 1.32.41 2.062-.134.231-.143.42-.336.55-.559.219-.289.435-.663.646-1.144 1.278.182 1.959-.094 2.458-.538Z" clip-rule="evenodd"/><path fill="url(#b)" d="M68.214 43.245c.972-1.265 3.004-3.672 2.688-5.236l13.142-5.767c.957-.42 1.517-1.426 1.328-2.453-.226-1.229-.57-2.86-.989-4.052-.395-1.125-1.149-2.513-1.782-3.587-.59-1-1.848-1.345-2.894-.84L64.98 28.408c-2.77 1.009-4.881-.575-7.792-1.05-2.91-.474-6.001-.773-8.717.373a9.357 9.357 0 0 0-1.025.51c-1.966 1.13-3.526 2.915-5.021 4.651l-2.87 3.334c-.136.159-.277.328-.31.534-.059.37.248.69.555.902a4.377 4.377 0 0 0 3.732.571c1.07-.332 1.967-1.065 2.784-1.832a27.941 27.941 0 0 0 2.408-2.558c1.7.931 3.464 1.997 5.212 3.16 3.286 2.186 7.801 6.07 10.452 8.661 1.537-.252 2.675-.923 3.826-2.419Z"/><path fill="url(#c)" d="M48.541 51.372c-.125-.441-.465-.767-1.01-.968-1.005-.372-1.758-.17-2.458.322.351-.753.394-1.598.067-2.22-.333-.632-1.002-.94-1.835-.847-.732.082-1.505.467-2.26 1.006a2.501 2.501 0 0 0 .159-1.736 1.657 1.657 0 0 0-.783-1.034c-.559-.32-1.334-.358-2.24-.109-.53.146-1.281.475-2.05.951.353-.687.358-1.366-.003-2-.36-.63-.948-.986-1.701-1.023-1.338-.069-3.08.909-4.05 2.27-.461.648-.607 1.357-.409 1.995.19.616.685 1.11 1.356 1.358.352.129.656.19.939.19.468 0 .88-.167 1.356-.458-.186.29-.34.596-.449.912-.262.762-.128 1.572.357 2.167.468.572 1.199.883 2.05.883.157 0 .316-.01.479-.032.428-.055.903-.186 1.493-.558-.11.373-.101.752.032 1.104.28.738 1.077 1.253 2.183 1.414.124.017.245.027.363.027.729 0 1.383-.322 1.983-.8-.065.365-.001.658.075.852.278.715 1.087 1.223 2.013 1.265.09.004.175.006.26.006.937 0 1.577-.28 2.556-1.536l.048-.063c.71-.909 1.78-2.282 1.48-3.337v-.001Z"/><path stroke="#8DCEFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.793" d="M55.466 2H36.985C17.663 2 2 17.663 2 36.985S16.37 71.97 36.985 71.97h4.088C43.23 75.32 49.999 82 64.847 82c-5.834-4.763-6.757-8.215-6.626-10.137 19.588 0 32.23-16.483 32.23-34.877 0-19.322-15.663-34.985-34.985-34.985V2Z"/><defs><linearGradient id="a" x1="6.764" x2="65.509" y1="32.244" y2="48.363" gradientUnits="userSpaceOnUse"><stop stop-color="#004C99"/><stop offset="1" stop-color="#0072E6"/></linearGradient><linearGradient id="b" x1="89.096" x2="38.249" y1="26.027" y2="44.957" gradientUnits="userSpaceOnUse"><stop stop-color="#007FFF"/><stop offset="1" stop-color="#39F"/></linearGradient><linearGradient id="c" x1="49.977" x2="28.576" y1="46.505" y2="52.937" gradientUnits="userSpaceOnUse"><stop stop-color="#007FFF"/><stop offset="1" stop-color="#39F"/></linearGradient></defs></svg>
diff --git a/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png b/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png
new file mode 100644
index 00000000000000..8b59dc339963b1
Binary files /dev/null and b/docs/public/static/branding/about/illustrations/team-globe-distribution-dark.png differ
diff --git a/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png b/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png
new file mode 100644
index 00000000000000..57efc00531a072
Binary files /dev/null and b/docs/public/static/branding/about/illustrations/team-globe-distribution-light.png differ
diff --git a/docs/public/static/branding/about/illustrations/trust-dark.svg b/docs/public/static/branding/about/illustrations/trust-dark.svg
new file mode 100644
index 00000000000000..893b09521d0b8a
--- /dev/null
+++ b/docs/public/static/branding/about/illustrations/trust-dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="75" height="92" fill="none"><path stroke="#39F" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.521" d="m38.332 71.682-4.174 11.42c-.599 1.638-2.818 1.876-3.75.401l-2.744-4.343a2.101 2.101 0 0 0-2.41-.88l-4.873 1.542c-1.668.528-3.212-1.094-2.604-2.734l3.171-8.553M38.12 70.426l3.008 13.356c.383 1.702 2.553 2.222 3.667.88l3.28-3.955a2.101 2.101 0 0 1 2.505-.564l4.65 2.165c1.582.737 3.32-.665 2.936-2.367l-3.13-13.875"/><path fill="#0059B3" fill-opacity=".3" d="M72.865 37.365c0 1.461-3.37 3.175-3.578 4.621-.207 1.446 2.542 4.038 2.132 5.44-.411 1.402-4.128 2.098-4.736 3.429-.607 1.33 1.303 4.593.513 5.82-.79 1.23-4.55.848-5.507 1.953-.958 1.106-.046 4.772-1.15 5.73-1.105.958-4.606-.467-5.836.322-1.228.79-1.387 4.568-2.716 5.173-1.33.61-4.289-1.746-5.688-1.336-1.402.413-2.62 3.993-4.066 4.2-1.446.208-3.624-2.883-5.083-2.883-1.46 0-3.625 2.977-5.084 2.883-1.457-.094-2.663-3.787-4.065-4.2-1.401-.41-4.36 1.945-5.688 1.336-1.33-.605-1.49-4.384-2.716-5.173-1.23-.79-4.733.635-5.838-.322-1.102-.958-.19-4.624-1.148-5.73-.956-1.105-4.719-.723-5.509-1.953-.788-1.227 1.119-4.49.513-5.82-.607-1.33-4.324-2.026-4.735-3.428-.412-1.403 2.339-3.995 2.13-5.44-.207-1.446-3.577-3.16-3.577-4.622 0-1.461 3.37-3.177 3.578-4.621.208-1.448-2.543-4.04-2.13-5.443.41-1.401 4.126-2.095 4.734-3.425.605-1.327-1.302-4.592-.513-5.82.79-1.23 4.553-.851 5.51-1.955.957-1.105.045-4.773 1.147-5.73 1.104-.957 4.607.467 5.838-.322 1.23-.79 1.387-4.568 2.716-5.175C23.643 4.269 26.6 6.62 28 6.209c1.402-.41 2.608-4.104 4.064-4.199 1.46-.093 3.625 2.884 5.085 2.884S40.787 1.8 42.233 2.01c1.446.208 2.664 3.787 4.066 4.199 1.4.41 4.357-1.94 5.688-1.335 1.33.607 1.488 4.386 2.716 5.175 1.23.789 4.731-.635 5.836.322 1.104.956.193 4.624 1.15 5.73.957 1.104 4.717.725 5.507 1.955.79 1.228-1.117 4.493-.513 5.82.608 1.33 4.325 2.024 4.736 3.425.41 1.404-2.339 3.996-2.132 5.443.208 1.445 3.578 3.162 3.578 4.621Z"/><path stroke="#39F" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".3" stroke-width="2.801" d="M15.347 47.864c-.745-1.543.647-3.871.258-5.581-.376-1.657-2.649-3.149-2.649-4.919 0-1.77 2.273-3.262 2.65-4.918.388-1.71-1.004-4.039-.259-5.582.756-1.568 3.452-1.927 4.528-3.274 1.08-1.353.835-4.06 2.189-5.142 1.347-1.075 3.929-.237 5.498-.993 1.544-.745 2.492-3.294 4.202-3.682 1.657-.377 3.614 1.499 5.384 1.499 1.77 0 3.727-1.876 5.384-1.5 1.711.39 2.66 2.938 4.203 3.683 1.569.756 4.15-.082 5.499.994 1.354 1.08 1.107 3.788 2.188 5.14 1.076 1.349 3.771 1.707 4.529 3.275.743 1.543-.649 3.871-.26 5.582.377 1.656 2.65 3.148 2.65 4.918s-2.273 3.262-2.65 4.919c-.389 1.71 1.003 4.038.26 5.58-.758 1.57-3.453 1.928-4.53 3.275"/><path fill="url(#a)" d="M27.775 35.33s2.321 6.637 3.021 9.443c1.78 7.137 6.915 9.028 8.158 11.55.977 1.981 1.96 3.72 3.319 5.998.456.766 1.35 1.158 2.21.923.933-.255 2.126-.634 2.974-1.09.778-.42 1.66-1.116 2.362-1.723.77-.666.865-1.798.296-2.644-1.077-1.601-1.75-2.766-2.285-4.1-1.231-3.07-.587-3.49.228-5.592.815-2.102.79-5.716 1.022-6.947.52-2.75 1.86-4.169.514-4.859-1.082-.554-2.59.898-3.083 2.577-.894 3.05-1.135 6.66-2.066-.353-.36-2.715-1.41-9.851-1.717-12.573-.106-.948-.684-1.614-1.46-1.512-.946.124-1.324.964-1.25 1.916.195 2.48.324 8.93.43 11.105.014.294-.23.55-.338.068-.556-2.472-2.077-10.967-2.605-13.736-.22-1.15-1.218-1.751-2.089-1.253-.582.333-.878 1.037-.772 1.72.396 2.56 2.021 13.674 2.021 13.674.156.792-.247.746-.415.212l-.03-.075s-2.854-8.384-3.438-10.554c-.242-.9-.815-1.688-1.692-1.441-.875.247-1.08 1.175-.866 2.082.613 2.588 2.608 9.953 3.17 12.209.24.966.06 1.03-.24.405-.348-.726-2.634-5.454-3.011-6.32-.357-.819-1.028-1.55-1.86-1.229-.834.322-.83 1.284-.508 2.118Z"/><path fill="url(#b)" d="M47.578 32.178s-3.28 7.982-4.058 10.767h-.002c-1.981 7.087-3.481 7.191-6.073 11.382-.171.298-.349.6-.533.903l-.005.008-.003.006c-1.205 1.979-2.699 4.062-4.495 6.225-.665.801-1.392 1.651-2.17 2.536a1.986 1.986 0 0 1-2.227.553c-1.327-.528-3.373-1.427-4.685-2.415-1.092-.821-2.284-2.162-3.129-3.19-.666-.813-.557-1.984.185-2.727.997-.998 1.841-1.904 2.485-2.68.678-.815 1.335-1.56 1.85-2.334 1.833-2.754.549-7.99.354-10.235-.194-2.246.075-4.644.707-5.726 1.966-3.361-.686-5.275 1.373-5.613 1.718-.283 2.125 3.254 1.822 5.647l.007-.003c-.603 4.745.699 2.77 1.434-.787.555-2.682 1.85-8.007 2.391-10.692.188-.935.82-1.547 1.585-1.38.932.206 1.236 1.076 1.08 2.018-.408 2.454-1.145 6.983-1.467 9.556-.044.349.234.53.37-.04.654-2.768 2.181-8.246 2.826-11.014.26-1.114 1.299-1.675 2.175-1.168.585.34.867 1.033.737 1.697-.483 2.484-1.901 11.092-1.901 11.092-.195.938.254.899.458.268 0 0 1.97-6.51 2.558-8.775.244-.938.844-1.769 1.784-1.532.94.236 1.173 1.195.959 2.14-.612 2.7-1.512 8.148-2.088 10.85-.247 1.159-.181 1.293.17.56.41-.853 2.782-5.996 3.185-6.852.38-.808 1.07-1.52 1.894-1.176.824.345.793 1.306.447 2.13Z"/><path stroke="#39F" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.521" d="M72.865 37.365c0 1.461-3.37 3.175-3.578 4.621-.207 1.446 2.542 4.038 2.132 5.44-.411 1.402-4.128 2.098-4.736 3.429-.607 1.33 1.303 4.593.513 5.82-.79 1.23-4.55.848-5.507 1.953-.958 1.106-.046 4.772-1.15 5.73-1.105.958-4.606-.467-5.836.322-1.228.79-1.387 4.568-2.716 5.173-1.33.61-4.289-1.746-5.688-1.336-1.402.413-2.62 3.993-4.066 4.2-1.446.208-3.624-2.883-5.083-2.883-1.46 0-3.625 2.977-5.084 2.883-1.457-.094-2.663-3.787-4.065-4.2-1.401-.41-4.36 1.945-5.688 1.336-1.33-.605-1.49-4.384-2.716-5.173-1.23-.79-4.733.635-5.838-.322-1.102-.958-.19-4.624-1.148-5.73-.956-1.105-4.719-.723-5.509-1.953-.788-1.227 1.119-4.49.513-5.82-.607-1.33-4.324-2.026-4.735-3.428-.412-1.403 2.339-3.995 2.13-5.44-.207-1.446-3.577-3.16-3.577-4.622 0-1.461 3.37-3.177 3.578-4.621.208-1.448-2.543-4.04-2.13-5.443.41-1.401 4.126-2.095 4.734-3.425.605-1.327-1.302-4.592-.513-5.82.79-1.23 4.553-.851 5.51-1.955.957-1.105.045-4.773 1.147-5.73 1.104-.957 4.607.467 5.838-.322 1.23-.79 1.387-4.568 2.716-5.175C23.643 4.269 26.6 6.62 28 6.209c1.402-.41 2.608-4.104 4.064-4.199 1.46-.093 3.625 2.884 5.085 2.884S40.787 1.8 42.233 2.01c1.446.208 2.664 3.787 4.066 4.199 1.4.41 4.357-1.94 5.688-1.335 1.33.607 1.488 4.386 2.716 5.175 1.23.789 4.731-.635 5.836.322 1.104.956.193 4.624 1.15 5.73.957 1.104 4.717.725 5.507 1.955.79 1.228-1.117 4.493-.513 5.82.608 1.33 4.325 2.024 4.736 3.425.41 1.404-2.339 3.996-2.132 5.443.208 1.445 3.578 3.162 3.578 4.621Z"/><defs><linearGradient id="a" x1="27.574" x2="52.981" y1="31.762" y2="33.726" gradientUnits="userSpaceOnUse"><stop stop-color="#005BB8"/><stop offset="1" stop-color="#0072E6"/></linearGradient><linearGradient id="b" x1="49.932" x2="14.728" y1="31.227" y2="35.937" gradientUnits="userSpaceOnUse"><stop stop-color="#007FFF"/><stop offset="1" stop-color="#39F"/></linearGradient></defs></svg>
diff --git a/docs/public/static/branding/about/illustrations/trust-light.svg b/docs/public/static/branding/about/illustrations/trust-light.svg
new file mode 100644
index 00000000000000..45464f8c9851d3
--- /dev/null
+++ b/docs/public/static/branding/about/illustrations/trust-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="75" height="92" fill="none"><path stroke="#8DCEFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.521" d="m38.916 71.682-4.175 11.42c-.599 1.638-2.818 1.876-3.75.401l-2.744-4.343a2.1 2.1 0 0 0-2.41-.88l-4.873 1.542c-1.668.528-3.212-1.094-2.604-2.734l3.171-8.553M38.703 70.426l3.008 13.356c.383 1.702 2.553 2.222 3.667.88l3.28-3.955a2.101 2.101 0 0 1 2.505-.564l4.65 2.165c1.582.737 3.32-.665 2.936-2.367l-3.13-13.875"/><path fill="#E7F2FE" fill-opacity=".5" d="M73.433 37.365c0 1.461-3.37 3.175-3.578 4.621-.207 1.446 2.542 4.038 2.131 5.44-.41 1.402-4.127 2.098-4.736 3.429-.607 1.33 1.303 4.593.513 5.82-.79 1.23-4.55.848-5.507 1.953-.958 1.106-.046 4.772-1.15 5.73-1.104.958-4.605-.467-5.836.322-1.228.79-1.386 4.568-2.715 5.173-1.331.61-4.29-1.746-5.689-1.336-1.402.413-2.62 3.993-4.065 4.2-1.447.208-3.625-2.883-5.084-2.883-1.459 0-3.625 2.977-5.084 2.883-1.456-.094-2.662-3.787-4.065-4.2-1.4-.41-4.36 1.945-5.688 1.336-1.33-.605-1.49-4.384-2.716-5.173-1.23-.79-4.732.635-5.837-.322-1.102-.958-.191-4.624-1.149-5.73-.956-1.105-4.718-.723-5.508-1.953-.788-1.227 1.118-4.49.512-5.82-.607-1.33-4.324-2.026-4.734-3.428-.412-1.403 2.338-3.995 2.13-5.44C5.37 40.54 2 38.826 2 37.364c0-1.461 3.37-3.177 3.578-4.621.208-1.448-2.542-4.04-2.13-5.443.41-1.401 4.126-2.095 4.734-3.425.605-1.327-1.301-4.592-.512-5.82.79-1.23 4.553-.851 5.508-1.955.959-1.105.047-4.773 1.149-5.73 1.104-.957 4.606.467 5.837-.322 1.23-.79 1.387-4.568 2.716-5.175 1.33-.605 4.287 1.746 5.689 1.335 1.402-.41 2.608-4.104 4.064-4.199 1.46-.093 3.624 2.884 5.084 2.884 1.46 0 3.637-3.093 5.084-2.884 1.445.208 2.663 3.787 4.065 4.199 1.4.41 4.358-1.94 5.689-1.335 1.329.607 1.487 4.386 2.715 5.175 1.23.789 4.732-.635 5.836.322 1.104.956.193 4.624 1.15 5.73.957 1.104 4.717.725 5.507 1.955.79 1.228-1.117 4.493-.513 5.82.609 1.33 4.325 2.024 4.736 3.425.41 1.404-2.338 3.996-2.131 5.443.208 1.445 3.578 3.162 3.578 4.621Z"/><path stroke="#C2E0FF" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".5" stroke-width="2.801" d="M15.914 47.864c-.744-1.543.647-3.871.259-5.581-.376-1.657-2.65-3.149-2.65-4.919 0-1.77 2.274-3.262 2.65-4.918.389-1.71-1.003-4.039-.259-5.582.757-1.568 3.452-1.927 4.528-3.274 1.081-1.353.835-4.06 2.19-5.142 1.346-1.075 3.928-.237 5.498-.993 1.543-.745 2.492-3.294 4.202-3.682 1.656-.377 3.614 1.499 5.384 1.499 1.77 0 3.727-1.876 5.383-1.5 1.712.39 2.66 2.938 4.204 3.683 1.568.756 4.15-.082 5.498.994 1.354 1.08 1.107 3.788 2.188 5.14 1.076 1.349 3.772 1.707 4.529 3.275.744 1.543-.648 3.871-.26 5.582.378 1.656 2.65 3.148 2.65 4.918s-2.272 3.262-2.65 4.919c-.388 1.71 1.004 4.038.26 5.58-.758 1.57-3.453 1.928-4.529 3.275"/><path fill="url(#a)" d="M28.342 35.33s2.322 6.637 3.021 9.443c1.78 7.137 6.915 9.028 8.159 11.55.977 1.981 1.96 3.72 3.318 5.998.456.766 1.35 1.158 2.21.923.933-.255 2.126-.634 2.974-1.09.778-.42 1.66-1.116 2.362-1.723.771-.666.865-1.798.296-2.644-1.076-1.601-1.75-2.766-2.285-4.1-1.23-3.07-.587-3.49.228-5.592.816-2.102.79-5.716 1.023-6.947.518-2.75 1.859-4.169.513-4.859-1.082-.554-2.59.898-3.083 2.577-.894 3.05-1.135 6.66-2.065-.353-.36-2.715-1.411-9.851-1.718-12.573-.106-.948-.684-1.614-1.46-1.512-.946.124-1.324.964-1.25 1.916.195 2.48.324 8.93.43 11.105.014.294-.23.55-.338.068-.556-2.472-2.077-10.967-2.605-13.736-.22-1.15-1.218-1.751-2.088-1.253-.582.333-.879 1.037-.773 1.72.397 2.56 2.022 13.674 2.022 13.674.155.792-.247.746-.415.212l-.03-.075s-2.855-8.384-3.44-10.554c-.24-.9-.813-1.688-1.69-1.441-.876.247-1.08 1.175-.866 2.082.612 2.588 2.607 9.953 3.17 12.209.24.966.06 1.03-.24.405-.349-.726-2.635-5.454-3.012-6.32-.356-.819-1.027-1.55-1.86-1.229-.834.322-.83 1.284-.508 2.118Z"/><path fill="url(#b)" d="M48.146 32.178s-3.28 7.982-4.058 10.767h-.002c-1.982 7.087-3.482 7.191-6.073 11.382-.172.298-.35.6-.534.903l-.004.008-.003.006c-1.205 1.979-2.7 4.062-4.495 6.225-.666.801-1.393 1.651-2.17 2.536a1.986 1.986 0 0 1-2.227.553c-1.328-.528-3.373-1.427-4.686-2.415-1.091-.821-2.284-2.162-3.128-3.19-.666-.813-.558-1.984.184-2.727.998-.998 1.842-1.904 2.486-2.68.677-.815 1.335-1.56 1.85-2.334 1.833-2.754.548-7.99.354-10.235-.195-2.246.074-4.644.707-5.726 1.965-3.361-.686-5.275 1.373-5.613 1.717-.283 2.125 3.254 1.821 5.647l.008-.003c-.603 4.745.698 2.77 1.434-.787.554-2.682 1.85-8.007 2.39-10.692.189-.935.821-1.547 1.586-1.38.932.206 1.235 1.076 1.079 2.018-.408 2.454-1.144 6.983-1.467 9.556-.044.349.234.53.37-.04.654-2.768 2.182-8.246 2.827-11.014.26-1.114 1.298-1.675 2.174-1.168.586.34.867 1.033.738 1.697-.483 2.484-1.902 11.092-1.902 11.092-.195.938.255.899.458.268 0 0 1.97-6.51 2.558-8.775.244-.938.844-1.769 1.784-1.532.94.236 1.174 1.195.96 2.14-.613 2.7-1.512 8.148-2.09 10.85-.246 1.159-.18 1.293.172.56.41-.853 2.782-5.996 3.184-6.852.38-.808 1.07-1.52 1.894-1.176.824.345.793 1.306.448 2.13Z"/><path stroke="#8DCEFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.521" d="M73.433 37.365c0 1.461-3.37 3.175-3.578 4.621-.207 1.446 2.542 4.038 2.131 5.44-.41 1.402-4.127 2.098-4.736 3.429-.607 1.33 1.303 4.593.513 5.82-.79 1.23-4.55.848-5.507 1.953-.958 1.106-.046 4.772-1.15 5.73-1.104.958-4.605-.467-5.836.322-1.228.79-1.386 4.568-2.715 5.173-1.331.61-4.29-1.746-5.689-1.336-1.402.413-2.62 3.993-4.065 4.2-1.447.208-3.625-2.883-5.084-2.883-1.459 0-3.625 2.977-5.084 2.883-1.456-.094-2.662-3.787-4.065-4.2-1.4-.41-4.36 1.945-5.688 1.336-1.33-.605-1.49-4.384-2.716-5.173-1.23-.79-4.732.635-5.837-.322-1.102-.958-.191-4.624-1.149-5.73-.956-1.105-4.718-.723-5.508-1.953-.788-1.227 1.118-4.49.512-5.82-.607-1.33-4.324-2.026-4.734-3.428-.412-1.403 2.338-3.995 2.13-5.44C5.37 40.54 2 38.826 2 37.364c0-1.461 3.37-3.177 3.578-4.621.208-1.448-2.542-4.04-2.13-5.443.41-1.401 4.126-2.095 4.734-3.425.605-1.327-1.301-4.592-.512-5.82.79-1.23 4.553-.851 5.508-1.955.959-1.105.047-4.773 1.149-5.73 1.104-.957 4.606.467 5.837-.322 1.23-.79 1.387-4.568 2.716-5.175 1.33-.605 4.287 1.746 5.689 1.335 1.402-.41 2.608-4.104 4.064-4.199 1.46-.093 3.624 2.884 5.084 2.884 1.46 0 3.637-3.093 5.084-2.884 1.445.208 2.663 3.787 4.065 4.199 1.4.41 4.358-1.94 5.689-1.335 1.329.607 1.487 4.386 2.715 5.175 1.23.789 4.732-.635 5.836.322 1.104.956.193 4.624 1.15 5.73.957 1.104 4.717.725 5.507 1.955.79 1.228-1.117 4.493-.513 5.82.609 1.33 4.325 2.024 4.736 3.425.41 1.404-2.338 3.996-2.131 5.443.208 1.445 3.578 3.162 3.578 4.621Z"/><defs><linearGradient id="a" x1="28.142" x2="53.548" y1="31.762" y2="33.726" gradientUnits="userSpaceOnUse"><stop stop-color="#004C99"/><stop offset="1" stop-color="#0072E6"/></linearGradient><linearGradient id="b" x1="50.499" x2="15.296" y1="31.227" y2="35.937" gradientUnits="userSpaceOnUse"><stop stop-color="#007FFF"/><stop offset="1" stop-color="#39F"/></linearGradient></defs></svg>
diff --git a/docs/src/components/about/AboutEnd.tsx b/docs/src/components/about/AboutEnd.tsx
new file mode 100644
index 00000000000000..77757e62292bcd
--- /dev/null
+++ b/docs/src/components/about/AboutEnd.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import Link from 'docs/src/modules/components/Link';
+import GradientText from 'docs/src/components/typography/GradientText';
+import ROUTES from 'docs/src/route';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+
+export default function AboutEnd() {
+  return (
+    <Section bg="gradient" sx={{ p: { sm: 8 } }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          position: 'relative',
+        }}
+      >
+        <SectionHeadline
+          alwaysCenter
+          overline="Join us"
+          title={
+            <Typography variant="h2" sx={{ maxWidth: 600, mx: 'auto' }}>
+              <GradientText>Build the next generation</GradientText>
+              <br /> of tools for UI development
+            </Typography>
+          }
+          description="Together, we are enabling developers & designers to bring stunning UIs to life with unrivalled speed and ease."
+        />
+        <Button
+          component={Link}
+          noLinkStyle
+          href={ROUTES.careers}
+          endIcon={<KeyboardArrowRightRounded fontSize="small" />}
+          variant="contained"
+          sx={{ width: { xs: '100%', sm: 'fit-content' } }}
+        >
+          View careers
+        </Button>
+      </Box>
+      <Box
+        component="img"
+        src="/static/branding/about/illustrations/team-globe-distribution-light.png"
+        alt="A map illustration with pins loosely positioned where team members from MUI are located."
+        loading="lazy"
+        width="1100"
+        height="690"
+        sx={(theme) => ({
+          mt: -8,
+          display: { xs: 'none', sm: 'block' },
+          width: { sm: '100%' },
+          ...theme.applyDarkStyles({
+            content: 'url(/static/branding/about/illustrations/team-globe-distribution-dark.png)',
+          }),
+        })}
+      />
+    </Section>
+  );
+}
diff --git a/docs/src/components/about/AboutHero.tsx b/docs/src/components/about/AboutHero.tsx
new file mode 100644
index 00000000000000..d5ff899ceb7eea
--- /dev/null
+++ b/docs/src/components/about/AboutHero.tsx
@@ -0,0 +1,167 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { styled, keyframes } from '@mui/material/styles';
+import Section from 'docs/src/layouts/Section';
+import GradientText from 'docs/src/components/typography/GradientText';
+import TeamStatistics from 'docs/src/components/about/TeamStatistics';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+
+const teamPhotos = [
+  {
+    img: '/static/branding/about/group-photo/teide-group.jpg',
+    title:
+      'A group photo of the MUI crew posing near the base of Mount Teide at the start of the hike.',
+  },
+  {
+    img: '/static/branding/about/group-photo/skiers.jpg',
+    title: 'MUI team members standing lined-up in the snow with their skigear.',
+  },
+  {
+    img: '/static/branding/about/group-photo/group-photo.jpg',
+    title: 'Photo of the MUI team in front of the pool at our accommodations in Tenerife',
+  },
+  {
+    img: '/static/branding/about/group-photo/team-dinner.png',
+    title: 'Members of the MUI team sitting around a large wooden dining table.',
+  },
+  {
+    img: '/static/branding/about/group-photo/working-table-tenerife.png',
+    title: 'The Toolpad team working together on a heads-down moment in Tenerife.',
+  },
+  {
+    img: '/static/branding/about/group-photo/scuba-gear.png',
+    title:
+      'MUI team members and their diving instructors pose in scuba gear before a successful scuba diving lesson.',
+  },
+  {
+    img: '/static/branding/about/group-photo/outdoor-focus-group.png',
+    title:
+      'An impromptu focus group gathered next to the pool with laptops to discuss cross-team marketing strategies.',
+  },
+  {
+    img: '/static/branding/about/group-photo/working-table-portugal.png',
+    title: 'MUI team members working together on a heads-down moment in Portugal.',
+  },
+  {
+    img: '/static/branding/about/group-photo/snow-tea.png',
+    title: 'The team shares a cup of tea up in the mountains of Chamonix, France.',
+  },
+  {
+    img: '/static/branding/about/group-photo/portugal-sight-seeing.png',
+    title: 'MUI team selfie while sightseeing in Lisbon, Portugal.',
+  },
+];
+
+const ImageContainer = styled('div')(() => ({
+  display: 'flex',
+  gap: 16,
+  justifyContent: 'center',
+}));
+
+const Image = styled('img')(({ theme }) => ({
+  width: 400,
+  height: 300,
+  boxSizing: 'content-box',
+  objectFit: 'cover',
+  borderRadius: theme.shape.borderRadius,
+  border: '1px solid',
+  borderColor: (theme.vars || theme).palette.divider,
+  boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.grey[200]}`,
+  transition: 'all 100ms ease',
+  ...theme.applyDarkStyles({
+    borderColor: (theme.vars || theme).palette.primaryDark[600],
+    boxShadow: `0px 2px 8px ${(theme.vars || theme).palette.common.black}`,
+  }),
+}));
+
+const scroll = keyframes`
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%)
+  }
+`;
+
+function PhotoGallery() {
+  return (
+    <Box
+      sx={(theme) => ({
+        borderRadius: 1,
+        overflow: 'hidden',
+        position: 'relative',
+        minWidth: '100%',
+        display: 'flex',
+        gap: 2,
+        my: 5,
+        '& > div': {
+          animation: `${scroll} 120s linear infinite`,
+        },
+        '&::before, &::after': {
+          background: `linear-gradient(to right, #FFF 0%, rgba(255, 255, 255, 0) 100%)`,
+          content: "''",
+          height: '100%',
+          position: 'absolute',
+          width: 200,
+          zIndex: 1,
+          pointerEvents: 'none',
+        },
+        '&::before': {
+          right: { xs: -64, sm: -20 },
+          top: 0,
+          transform: 'rotateZ(180deg)',
+        },
+        '&::after': {
+          left: { xs: -64, sm: -20 },
+          top: 0,
+        },
+        ...theme.applyDarkStyles({
+          '&::before, &::after': {
+            background: `linear-gradient(to right, ${
+              (theme.vars || theme).palette.primaryDark[900]
+            } 0%, rgba(0, 0, 0, 0) 100%)`,
+          },
+        }),
+      })}
+    >
+      <ImageContainer>
+        {teamPhotos.map((item, index) => (
+          <Image
+            key={index}
+            src={item.img}
+            alt={item.title}
+            loading={index > 2 ? 'lazy' : undefined}
+            fetchPriority={index > 2 ? undefined : 'high'}
+          />
+        ))}
+      </ImageContainer>
+      <ImageContainer aria-hidden="true">
+        {/* aria-hidden is used here because this element is a copy from the above, meaning we want to hide it from screen readers. */}
+        {teamPhotos.map((item, index) => (
+          <Image key={index} src={item.img} alt={item.title} loading="lazy" />
+        ))}
+      </ImageContainer>
+    </Box>
+  );
+}
+
+export default function AboutHero() {
+  return (
+    <Section cozy bg="gradient">
+      <SectionHeadline
+        alwaysCenter
+        overline="About us"
+        title={
+          <Typography variant="h2" sx={{ maxWidth: 600, mx: 'auto' }}>
+            We&apos;re on a mission to make <br />{' '}
+            <GradientText>building better UIs effortless</GradientText>
+          </Typography>
+        }
+        description="Together, we are enabling developers & designers to bring stunning UIs to life with unrivalled speed and ease."
+      />
+      <PhotoGallery />
+      <TeamStatistics />
+    </Section>
+  );
+}
diff --git a/docs/src/components/about/HowToSupport.tsx b/docs/src/components/about/HowToSupport.tsx
new file mode 100644
index 00000000000000..e3346a64a40177
--- /dev/null
+++ b/docs/src/components/about/HowToSupport.tsx
@@ -0,0 +1,190 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import ForumRoundedIcon from '@mui/icons-material/ForumRounded';
+import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded';
+import LocalAtmRoundedIcon from '@mui/icons-material/LocalAtmRounded';
+import GradientText from 'docs/src/components/typography/GradientText';
+import Link from 'docs/src/modules/components/Link';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+import { GlowingIconContainer } from 'docs/src/components/action/InfoCard';
+
+function Widget({
+  children,
+  title,
+  icon,
+}: {
+  children: React.ReactNode;
+  title: string;
+  icon: React.ReactElement;
+}) {
+  return (
+    <Paper
+      variant="outlined"
+      sx={(theme) => ({
+        p: 4,
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        borderRadius: '12px',
+        border: '1px solid',
+        borderColor: 'grey.100',
+        background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+        ...theme.applyDarkStyles({
+          bgcolor: 'primaryDark.900',
+          borderColor: 'primaryDark.700',
+          background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+        }),
+      })}
+    >
+      <GlowingIconContainer icon={icon} />
+      <Typography
+        fontWeight="bold"
+        component="h3"
+        color="text.primary"
+        variant="body2"
+        mt={2}
+        mb={0.5}
+      >
+        {title}
+      </Typography>
+      {children}
+    </Paper>
+  );
+}
+
+export default function HowToSupport() {
+  return (
+    <Section cozy>
+      <SectionHeadline
+        overline="Support us"
+        title={
+          <Typography variant="h2" sx={{ maxWidth: 600, mb: 4 }}>
+            Learn how to support
+            <br /> <GradientText>MUI&apos;s growth</GradientText>
+          </Typography>
+        }
+        description=""
+      />
+      <Grid container spacing={3}>
+        <Grid item xs={12} sm={6} md={4}>
+          <Widget
+            icon={<ForumRoundedIcon fontSize="small" color="primary" />}
+            title="Give feedback"
+          >
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+              Tell us what and where we can improve or share your happy moments with us! You can
+              also up or downvote any page on our documentation. <br />
+              <br /> And lastly, from time to time, we send our community a survey for more
+              structured feedback, you&apos;re always invited to participate to share your thoughts.
+            </Typography>
+            <Button
+              component="a"
+              // @ts-expect-error
+              variant="link"
+              size="small"
+              href="https://github.com/mui/material-ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc"
+              endIcon={<KeyboardArrowRightRounded />}
+              sx={{ ml: -1, mt: 'auto', width: 'fit-content' }}
+            >
+              Leave your feedback{' '}
+            </Button>
+          </Widget>
+        </Grid>
+        <Grid item xs={12} sm={6} md={4}>
+          <Widget
+            icon={<PeopleRoundedIcon fontSize="small" color="primary" />}
+            title="Join the community"
+          >
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+              Become a member of a huge community of developers supporting MUI. You can:
+            </Typography>
+            <Box
+              component="ul"
+              sx={{
+                typography: 'body2',
+                color: 'text.secondary',
+                pl: 2,
+                mb: 2,
+              }}
+            >
+              <li>
+                Add new features by{' '}
+                <Link href="https://github.com/mui/material-ui/blob/HEAD/CONTRIBUTING.md#your-first-pull-request">
+                  submitting a pull request
+                </Link>
+                .
+              </li>
+              <li>
+                Fix bugs or{' '}
+                <Link href="https://github.com/mui/material-ui/tree/HEAD/docs">
+                  improve our documentation
+                </Link>
+                .
+              </li>
+              <li>
+                Help others by reviewing and commenting on existing{' '}
+                <Link href="https://github.com/mui/material-ui/pulls">PRs</Link> and{' '}
+                <Link href="https://github.com/mui/material-ui/issues">issues</Link>.
+              </li>
+              <li>
+                Help <Link href="https://crowdin.com/project/material-ui-docs">translate</Link> the
+                documentation.
+              </li>
+              <li>
+                Answer questions on{' '}
+                <Link href="https://stackoverflow.com/questions/tagged/material-ui">
+                  Stack Overflow
+                </Link>
+                .
+              </li>
+            </Box>
+            <Button
+              component="a"
+              // @ts-expect-error
+              variant="link"
+              size="small"
+              href="https://github.com/mui/material-ui"
+              endIcon={<KeyboardArrowRightRounded />}
+              sx={{ ml: -1, mt: 'auto', width: 'fit-content' }}
+            >
+              See the repository
+            </Button>
+          </Widget>
+        </Grid>
+        <Grid item xs={12} sm={6} md={4}>
+          <Widget
+            icon={<LocalAtmRoundedIcon fontSize="small" color="primary" />}
+            title="Support us financially"
+          >
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+              If you use MUI in a commercial project and would like to support its continued
+              development by becoming a Sponsor, or in a side or hobby project and would like to
+              become a Backer, you can do so through {'Open Collective'}.
+              <br />
+              <br />
+              All funds donated are managed transparently, and Sponsors receive recognition in the
+              README and on the MUI home page.
+            </Typography>
+            <Button
+              component="a"
+              // @ts-expect-error
+              variant="link"
+              size="small"
+              href="https://opencollective.com/mui"
+              endIcon={<KeyboardArrowRightRounded />}
+              sx={{ ml: -1, mt: 'auto', width: 'fit-content' }}
+            >
+              {'See Open Collective'}
+            </Button>
+          </Widget>
+        </Grid>
+      </Grid>
+    </Section>
+  );
+}
diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx
new file mode 100644
index 00000000000000..40b58370b82d19
--- /dev/null
+++ b/docs/src/components/about/OurValues.tsx
@@ -0,0 +1,140 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import Link from 'docs/src/modules/components/Link';
+import GradientText from 'docs/src/components/typography/GradientText';
+import ROUTES from 'docs/src/route';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+
+const values = [
+  {
+    title: 'Put community first 💙',
+    description: 'We never lose sight of who we’re serving and why.',
+    lightIcon: 'url(/static/branding/about/illustrations/community-light.svg)',
+    darkIcon: 'url(/static/branding/about/illustrations/community-dark.svg)',
+    width: 92,
+    height: 84,
+  },
+  {
+    title: 'Avoid bureaucracy 🚫',
+    description: 'We’re so not corporate — and we like it that way.',
+    lightIcon: 'url(/static/branding/about/illustrations/bureaucracy-light.svg)',
+    darkIcon: 'url(/static/branding/about/illustrations/bureaucracy-dark.svg)',
+    width: 81,
+    height: 94,
+  },
+  {
+    title: 'Chase “better” 🌱',
+    description: 'We’re driven by an unending desire to improve.',
+    lightIcon: 'url(/static/branding/about/illustrations/better-light.svg)',
+    darkIcon: 'url(/static/branding/about/illustrations/better-dark.svg)',
+    width: 89,
+    height: 89,
+  },
+  {
+    title: 'Trust and deliver together 🚀',
+    description: 'We choose to cultivate unity as the core of achievement.',
+    lightIcon: 'url(/static/branding/about/illustrations/trust-light.svg)',
+    darkIcon: 'url(/static/branding/about/illustrations/trust-dark.svg)',
+    width: 75,
+    height: 92,
+  },
+];
+
+export default function OurValues() {
+  return (
+    <Section cozy>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <SectionHeadline
+          overline="Our values"
+          title={
+            <Typography variant="h2">
+              The MUI <GradientText>team pact</GradientText>
+            </Typography>
+          }
+          description="They explain the behaviors and mindsets we actively encourage, discourage, and why. They serve as a guide toward better decision-making, results, and experiences at work."
+        />
+        <Button
+          component={Link}
+          noLinkStyle
+          href={ROUTES.handbook}
+          endIcon={<KeyboardArrowRightRounded fontSize="small" />}
+          variant="contained"
+          sx={{ width: { xs: '100%', sm: 'fit-content' } }}
+        >
+          View our handbook
+        </Button>
+      </Box>
+      <Grid container spacing={3} sx={{ mt: { xs: 1, sm: 2 } }}>
+        {values.map(({ title, description, darkIcon, lightIcon, height, width }) => (
+          <Grid key={title} item xs={12} md={3}>
+            <Paper
+              variant="outlined"
+              sx={(theme) => ({
+                p: 4,
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'space-between',
+                gap: 1.5,
+                background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+                ...theme.applyDarkStyles({
+                  bgcolor: 'primaryDark.900',
+                  background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
+                  borderColor: 'primaryDark.700',
+                }),
+              })}
+            >
+              <Box
+                sx={(theme) => ({
+                  background: `${lightIcon}`,
+                  ...theme.applyDarkStyles({
+                    background: `${darkIcon}`,
+                  }),
+                })}
+                width={width}
+                height={height}
+              />
+              <Box sx={{ flexGrow: 1 }}>
+                <Typography
+                  fontWeight="bold"
+                  component="h3"
+                  variant="body2"
+                  sx={(theme) => ({
+                    mb: 0.5,
+                    color: (theme.vars || theme).palette.text.primary,
+                    '&::first-letter': {
+                      mr: 0.1,
+                      fontSize: theme.typography.pxToRem(16),
+                      color: (theme.vars || theme).palette.primary.main,
+                    },
+                    ...theme.applyDarkStyles({
+                      '&::first-letter': {
+                        color: (theme.vars || theme).palette.primary[400],
+                      },
+                    }),
+                  })}
+                >
+                  {title}
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                  {description}
+                </Typography>
+              </Box>
+            </Paper>
+          </Grid>
+        ))}
+      </Grid>
+    </Section>
+  );
+}
diff --git a/docs/src/components/about/Team.tsx b/docs/src/components/about/Team.tsx
new file mode 100644
index 00000000000000..a361923e50d58b
--- /dev/null
+++ b/docs/src/components/about/Team.tsx
@@ -0,0 +1,395 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import Grid from '@mui/material/Grid';
+import Paper, { PaperProps } from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Tooltip from '@mui/material/Tooltip';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import TwitterIcon from '@mui/icons-material/Twitter';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import Link from 'docs/src/modules/components/Link';
+import ROUTES from 'docs/src/route';
+import Section from 'docs/src/layouts/Section';
+import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
+import GradientText from 'docs/src/components/typography/GradientText';
+import teamMembers from 'docs/data/about/teamMembers.json';
+
+interface Profile {
+  name: string;
+  /**
+   * Role, what are you working on?
+   */
+  title: string;
+  /**
+   * Country where you live in, ISO 3166-1.
+   */
+  locationCountry: string; // https://flagpedia.net/download/api
+  /**
+   * Image URL.
+   */
+  src?: string;
+  /**
+   * Lives in.
+   */
+  location?: string;
+  /**
+   * Short summary about you.
+   */
+  about?: string;
+  github?: string;
+  twitter?: string;
+}
+
+function Person(props: Profile & { sx?: PaperProps['sx'] }) {
+  return (
+    <Paper variant="outlined" sx={{ p: 2, height: '100%', ...props.sx }}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'flex-start',
+          flexWrap: 'wrap',
+          '& > div': { minWidth: 'clamp(0px, (150px - 100%) * 999 ,100%)' },
+        }}
+      >
+        <Tooltip
+          title={props.location || false}
+          placement="right-end"
+          describeChild
+          PopperProps={{
+            popperOptions: {
+              modifiers: [
+                {
+                  name: 'offset',
+                  options: {
+                    offset: [3, 2],
+                  },
+                },
+              ],
+            },
+          }}
+        >
+          <Box sx={{ position: 'relative', display: 'inline-block' }}>
+            <Avatar
+              variant="rounded"
+              imgProps={{
+                width: '70',
+                height: '70',
+                loading: 'lazy',
+              }}
+              src={props.src}
+              alt={props.name}
+              {...(props.src?.startsWith('https://avatars.githubusercontent.com') && {
+                src: `${props.src}?s=70`,
+                srcSet: `${props.src}?s=140 2x`,
+              })}
+              sx={(theme) => ({
+                width: 70,
+                height: 70,
+                borderRadius: 1,
+                border: '1px solid',
+                borderColor: 'grey.100',
+                backgroundColor: 'primary.50',
+                ...theme.applyDarkStyles({
+                  backgroundColor: 'primary.900',
+                  borderColor: 'primaryDark.500',
+                }),
+              })}
+            />
+            <Box
+              sx={(theme) => ({
+                width: 24,
+                height: 24,
+                display: 'flex',
+                justifyContent: 'center',
+                position: 'absolute',
+                bottom: 0,
+                right: 0,
+                backgroundColor: '#FFF',
+                borderRadius: 40,
+                border: '2px solid',
+                borderColor: 'primary.50',
+                boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.15)',
+                transform: 'translateX(50%)',
+                overflow: 'hidden',
+                ...theme.applyDarkStyles({
+                  borderColor: 'primary.200',
+                }),
+              })}
+            >
+              <img
+                loading="lazy"
+                height="20"
+                width="40"
+                src={`https://flagcdn.com/${props.locationCountry}.svg`}
+                alt=""
+              />
+            </Box>
+          </Box>
+        </Tooltip>
+        <Box sx={{ mt: -0.5, mr: -0.5, ml: 'auto' }}>
+          {props.github && (
+            <IconButton
+              aria-label={`${props.name} github`}
+              component="a"
+              href={`https://github.com/${props.github}`}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              <GitHubIcon fontSize="small" sx={{ color: 'grey.500' }} />
+            </IconButton>
+          )}
+          {props.twitter && (
+            <IconButton
+              aria-label={`${props.name} twitter`}
+              component="a"
+              href={`https://twitter.com/${props.twitter}`}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              <TwitterIcon fontSize="small" sx={{ color: 'grey.500' }} />
+            </IconButton>
+          )}
+        </Box>
+      </Box>
+      <Typography variant="body2" fontWeight="bold" sx={{ mt: 2, mb: 0.5 }}>
+        {props.name}
+      </Typography>
+      <Typography variant="body2" color="text.secondary">
+        {props.title}
+      </Typography>
+      {props.about && <Divider sx={{ my: 1.5 }} />}
+      {props.about && (
+        <Typography variant="body2" color="grey.600">
+          {props.about}
+        </Typography>
+      )}
+    </Paper>
+  );
+}
+
+const contributors = [
+  {
+    name: 'Sebastian Silbermann',
+    github: 'eps1lon',
+    title: 'MUI Core, everything Open Source',
+    location: 'Berlin, Germany',
+    locationCountry: 'de',
+    src: 'https://avatars.githubusercontent.com/u/12292047',
+    twitter: 'sebsilbermann',
+  },
+  {
+    name: 'Ryan Cogswell',
+    github: 'ryancogswell',
+    title: 'Stack Overflow top contributor',
+    location: 'Minnesota, United States',
+    locationCountry: 'us',
+    src: 'https://avatars.githubusercontent.com/u/287804',
+  },
+  {
+    name: 'Yan Lee',
+    github: 'AGDholo',
+    title: 'Chinese docs',
+    location: 'China',
+    locationCountry: 'cn',
+    src: 'https://avatars.githubusercontent.com/u/13300332',
+  },
+  {
+    name: 'Jairon Alves Lima',
+    github: 'jaironalves',
+    title: 'Brazilian Portuguese docs',
+    location: 'São Paulo, Brazil',
+    locationCountry: 'br',
+    src: 'https://avatars.githubusercontent.com/u/29267813',
+  },
+  {
+    name: 'Danica Shen',
+    github: 'DDDDDanica',
+    title: 'Chinese docs',
+    location: 'Ireland',
+    locationCountry: 'ie',
+    src: 'https://avatars.githubusercontent.com/u/12678455',
+  },
+];
+
+const emeriti = [
+  {
+    name: 'Hai Nguyen',
+    github: 'hai-cea',
+    twitter: 'haicea',
+    title: 'MUI Core, v0.x creator',
+    location: 'Dallas, US',
+    locationCountry: 'us',
+    src: 'https://avatars.githubusercontent.com/u/2007468',
+  },
+  {
+    name: 'Nathan Marks',
+    github: 'nathanmarks',
+    title: 'MUI Core, v1.x co-creator',
+    location: 'Toronto, CA',
+    locationCountry: 'ca',
+    src: 'https://avatars.githubusercontent.com/u/4420103',
+  },
+  {
+    name: 'Kevin Ross',
+    github: 'rosskevin',
+    twitter: 'rosskevin',
+    title: 'MUI Core, flow',
+    location: 'Franklin, US',
+    locationCountry: 'us',
+    src: 'https://avatars.githubusercontent.com/u/136564',
+  },
+  {
+    name: 'Sebastian Sebald',
+    github: 'sebald',
+    twitter: 'sebastiansebald',
+    title: 'MUI Core',
+    location: 'Freiburg, Germany',
+    locationCountry: 'de',
+    src: 'https://avatars.githubusercontent.com/u/985701',
+  },
+  {
+    name: 'Ken Gregory',
+    github: 'kgregory',
+    title: 'MUI Core',
+    location: 'New Jersey, US',
+    locationCountry: 'us',
+    src: 'https://avatars.githubusercontent.com/u/3155127',
+  },
+  {
+    name: 'Tom Crockett',
+    github: 'pelotom',
+    twitter: 'pelotom',
+    title: 'MUI Core',
+    location: 'Los Angeles, US',
+    locationCountry: 'us',
+    src: 'https://avatars.githubusercontent.com/u/128019',
+  },
+  {
+    name: 'Maik Marschner',
+    github: 'leMaik',
+    twitter: 'leMaikOfficial',
+    title: 'MUI Core',
+    location: 'Hannover, Germany',
+    locationCountry: 'de',
+    src: 'https://avatars.githubusercontent.com/u/5544859',
+  },
+  {
+    name: 'Oleg Slobodskoi',
+    github: 'kof',
+    twitter: 'oleg008',
+    title: 'MUI Core, JSS',
+    location: 'Berlin, Germany',
+    locationCountry: 'de',
+    src: 'https://avatars.githubusercontent.com/u/52824',
+  },
+  {
+    name: 'Dmitriy Kovalenko',
+    github: 'dmtrKovalenko',
+    twitter: 'goose_plus_plus',
+    title: 'MUI X, date pickers',
+    location: 'Kharkiv, Ukraine',
+    locationCountry: 'ua',
+    src: 'https://avatars.githubusercontent.com/u/16926049',
+  },
+  {
+    name: 'Josh Wooding',
+    github: 'joshwooding',
+    twitter: 'JoshWooding_',
+    title: 'MUI Core, J.P. Morgan',
+    location: 'London, UK',
+    locationCountry: 'gb',
+    src: 'https://avatars.githubusercontent.com/u/12938082',
+  },
+];
+
+export default function Team() {
+  return (
+    <React.Fragment>
+      <Section cozy>
+        <Box
+          sx={{
+            my: 4,
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <SectionHeadline
+            overline="Team"
+            title={
+              <Typography variant="h2" id="muiers">
+                Meet the <GradientText>MUIers</GradientText>
+              </Typography>
+            }
+            description="Contributing from all corners of the world, MUI is a global, fully-remote team & community."
+          />
+          <Button
+            component={Link}
+            noLinkStyle
+            href={ROUTES.careers}
+            endIcon={<KeyboardArrowRightRounded fontSize="small" />}
+            variant="contained"
+            sx={{ width: { xs: '100%', sm: 'fit-content' } }}
+          >
+            View careers
+          </Button>
+        </Box>
+        <Grid container spacing={2}>
+          {(teamMembers as Array<Profile>).map((profileJson) => {
+            const profile = {
+              src: `/static/branding/about/${profileJson.name
+                .split(' ')
+                .map((x) => x.toLowerCase())
+                .join('-')}.png`,
+              ...profileJson,
+            };
+            return (
+              <Grid key={profile.name} item xs={12} sm={6} md={3}>
+                <Person {...profile} />
+              </Grid>
+            );
+          })}
+        </Grid>
+      </Section>
+      <Divider />
+      {/* Community contributors */}
+      <Box data-mui-color-scheme="dark" sx={{ bgcolor: 'primaryDark.900' }}>
+        <Container sx={{ py: { xs: 4, sm: 8 } }}>
+          <Typography component="h3" variant="h4" color="primary.200" fontWeight="semiBold">
+            Community contributors
+          </Typography>
+          <Typography color="text.secondary" sx={{ maxWidth: { md: 500 } }}>
+            Special members of the community deserve a shout-out for their ever-lasting impact on
+            MUI&apos;s products.
+          </Typography>
+          <Grid container spacing={2} mt={2}>
+            {contributors.map((profile) => (
+              <Grid key={profile.name} item xs={12} sm={6} md={3}>
+                <Person {...profile} sx={{ bgcolor: 'primaryDark.600' }} />
+              </Grid>
+            ))}
+          </Grid>
+          <Divider sx={{ my: { xs: 2, sm: 6 } }} />
+          <Typography component="h3" variant="h4" color="warning.300" fontWeight="semiBold">
+            Community emeriti
+          </Typography>
+          <Typography color="text.secondary" sx={{ maxWidth: { md: 500 } }}>
+            We honor some no-longer-active core team members who have made valuable contributions in
+            the past. They advise us from time to time.
+          </Typography>
+          <Grid container spacing={2} mt={2}>
+            {emeriti.map((profile) => (
+              <Grid key={profile.name} item xs={12} sm={6} md={3}>
+                <Person {...profile} sx={{ bgcolor: 'primaryDark.600' }} />
+              </Grid>
+            ))}
+          </Grid>
+        </Container>
+      </Box>
+    </React.Fragment>
+  );
+}
diff --git a/docs/src/components/about/TeamStatistics.tsx b/docs/src/components/about/TeamStatistics.tsx
new file mode 100644
index 00000000000000..a05ccc95f87984
--- /dev/null
+++ b/docs/src/components/about/TeamStatistics.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+const data = [
+  { number: '2014', metadata: 'The starting year' },
+  { number: '100%', metadata: 'Remote global team' },
+  { number: '20+', metadata: 'Countries represented' },
+];
+
+export default function TeamStatistics() {
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'center', gap: 2 }}>
+      {data.map((item) => (
+        <Box key={item.number} sx={{ height: '100%', width: { xs: '100%', sm: 200 } }}>
+          <Typography
+            component="p"
+            variant="h4"
+            fontWeight="bold"
+            sx={(theme) => ({
+              textAlign: { xs: 'left', sm: 'center' },
+              color: 'primary.main',
+              ...theme.applyDarkStyles({
+                color: 'primary.200',
+              }),
+            })}
+          >
+            {item.number}
+          </Typography>
+          <Typography color="text.secondary" sx={{ textAlign: { xs: 'left', sm: 'center' } }}>
+            {item.metadata}
+          </Typography>
+        </Box>
+      ))}
+    </Box>
+  );
+}
diff --git a/docs/src/components/action/InfoCard.tsx b/docs/src/components/action/InfoCard.tsx
index 9e702aab1f592c..dfe90ba4ef635a 100644
--- a/docs/src/components/action/InfoCard.tsx
+++ b/docs/src/components/action/InfoCard.tsx
@@ -4,6 +4,38 @@ import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Link from 'docs/src/modules/components/Link';
 
+interface GlowingIconContainerProps {
+  icon: React.ReactNode;
+}
+
+export function GlowingIconContainer({ icon }: GlowingIconContainerProps) {
+  return (
+    <Box
+      sx={(theme) => ({
+        width: 40,
+        height: 40,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 1,
+        border: '1px solid',
+        borderColor: 'primary.200',
+        bgcolor: 'primary.50',
+        boxShadow:
+          '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
+        ...theme.applyDarkStyles({
+          borderColor: 'primary.400',
+          bgcolor: 'primary.900',
+          boxShadow:
+            '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
+        }),
+      })}
+    >
+      {icon}
+    </Box>
+  );
+}
+
 interface InfoCardProps {
   icon: React.ReactNode;
   title: string;
@@ -29,29 +61,7 @@ export default function InfoCard({ icon, title, description, link }: InfoCardPro
         }),
       })}
     >
-      <Box
-        sx={(theme) => ({
-          width: 40,
-          height: 40,
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          borderRadius: 1,
-          border: '1px solid',
-          borderColor: 'primary.200',
-          bgcolor: 'primary.50',
-          boxShadow:
-            '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
-          ...theme.applyDarkStyles({
-            borderColor: 'primary.400',
-            bgcolor: 'primary.900',
-            boxShadow:
-              '0px 1px 6px 0px rgba(0, 89, 178, 1), 0px 2px 30px 0px rgba(0, 0, 0, 0.25) inset',
-          }),
-        })}
-      >
-        {icon}
-      </Box>
+      <GlowingIconContainer icon={icon} />
       <Typography
         fontWeight="bold"
         component="h3"
diff --git a/docs/src/components/typography/SectionHeadline.tsx b/docs/src/components/typography/SectionHeadline.tsx
index 15e12590b67681..0e7dec6656d30a 100644
--- a/docs/src/components/typography/SectionHeadline.tsx
+++ b/docs/src/components/typography/SectionHeadline.tsx
@@ -4,7 +4,7 @@ import Typography from '@mui/material/Typography';
 interface SectionHeadlineProps {
   description?: React.ReactNode;
   id?: string;
-  overline: React.ReactNode;
+  overline?: React.ReactNode;
   title: string | React.ReactElement;
   alwaysCenter?: boolean;
   /**
@@ -17,24 +17,23 @@ export default function SectionHeadline(props: SectionHeadlineProps) {
   const { description, id, overline, title, alwaysCenter = false, inverted = false } = props;
   return (
     <React.Fragment>
-      <Typography
-        id={id}
-        component="h2"
-        fontWeight="bold"
-        variant="body2"
-        sx={(theme) => ({
-          mb: 1,
-          color: 'primary.600',
-          ...theme.applyDarkStyles({
-            color: 'primary.300',
-          }),
-          ...(alwaysCenter && {
-            textAlign: 'center',
-          }),
-        })}
-      >
-        {overline}
-      </Typography>
+      {overline && (
+        <Typography
+          id={id}
+          component="h2"
+          variant="body2"
+          fontWeight="bold"
+          color="primary.main"
+          sx={{
+            mb: 1,
+            ...(alwaysCenter && {
+              textAlign: 'center',
+            }),
+          }}
+        >
+          {overline}
+        </Typography>
+      )}
       {typeof title === 'string' ? (
         <Typography
           variant="h2"
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
index 644593bbabfa5d..cf71e165bd13cf 100644
--- a/docs/src/modules/brandingTheme.ts
+++ b/docs/src/modules/brandingTheme.ts
@@ -473,6 +473,20 @@ export function getThemedComponents(): ThemeOptions {
               '& > span': { transition: '0.2s', marginLeft: 4 },
               '&:hover > span': { transform: 'translateX(2px)' },
             }),
+            ...(ownerState.size === 'medium' && {
+              padding: theme.spacing('8px', '12px'),
+              '& > span': { transition: '0.2s', marginLeft: 4 },
+              '&:hover > span': { transform: 'translateX(2px)' },
+            }),
+            ...(ownerState.size === 'small' && {
+              padding: theme.spacing(0.5, 1),
+              fontFamily: theme.typography.fontFamily,
+              fontSize: defaultTheme.typography.pxToRem(13),
+              fontWeight: theme.typography.fontWeightSemiBold,
+              borderRadius: 8,
+              '& > span': { transition: '0.2s', marginLeft: 4 },
+              '&:hover > span': { transform: 'translateX(2px)' },
+            }),
             ...(ownerState.variant === 'outlined' &&
               ownerState.color === 'secondary' && {
                 color: (theme.vars || theme).palette.text.secondary,
@@ -522,13 +536,6 @@ export function getThemedComponents(): ThemeOptions {
                   },
                 }),
               }),
-            ...(ownerState.size === 'small' && {
-              padding: theme.spacing(0.5, 1),
-              fontFamily: theme.typography.fontFamily,
-              fontSize: '0.75rem',
-              fontWeight: theme.typography.fontWeightSemiBold,
-              borderRadius: '6px',
-            }),
             ...(ownerState.variant === 'contained' &&
               ownerState.color === 'primary' && {
                 color: '#FFF',
@@ -683,16 +690,19 @@ export function getThemedComponents(): ThemeOptions {
             // @ts-ignore internal repo module augmentation issue
             props: { variant: 'link' },
             style: ({ theme }) => ({
+              marginBottom: 1,
               fontSize: theme.typography.pxToRem(14),
-              fontWeight: 700,
+              fontWeight: theme.typography.fontWeightBold,
               color: (theme.vars || theme).palette.primary[600],
+              '&:hover': {
+                backgroundColor: (theme.vars || theme).palette.primary[50],
+              },
               ...theme.applyDarkStyles({
                 color: (theme.vars || theme).palette.primary[300],
+                '&:hover': {
+                  backgroundColor: alpha(theme.palette.primary[800], 0.3),
+                },
               }),
-              mb: 1,
-              '& svg': {
-                ml: -0.5,
-              },
             }),
           },
         ],