experiment with an AboutEnd section

docs/pages/about.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import Divider from '@mui/material/Divider';
 import AppHeader from 'docs/src/layouts/AppHeader';
-import HeroEnd from 'docs/src/components/home/HeroEnd';
 import AppFooter from 'docs/src/layouts/AppFooter';
 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';
@@ -30,7 +30,7 @@ export default function About() {
         <Divider />
         <HowToSupport />
         <Divider />
-        <HeroEnd />
+        <AboutEnd />
         <Divider />
       </main>
       <AppFooter />

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: { xs: 4, sm: 8 } }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          position: 'relative',
+          zIdex: 10,
+        }}
+      >
+        <SectionHeadline
+          alwaysCenter
+          overline="Join us"
+          title={
+            <Typography variant="h2" sx={{ mt: 1, maxWidth: 600, mx: 'auto' }}>
+              Build <GradientText>the next generation</GradientText> of tools for UI development
+            </Typography>
+          }
+          description="We aim high at 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"
+          size="medium"
+          sx={{ width: { xs: '100%', sm: 'fit-content' } }}
+        >
+          View careers
+        </Button>
+      </Box>
+      <Box
+        component="img"
+        src="/static/branding/about/team-globe-distribution-light.png"
+        alt="Illustration of MUI's pricing page."
+        loading="lazy"
+        width="1100"
+        sx={(theme) => ({
+          mt: -8,
+          display: { xs: 'none', sm: 'block' },
+          width: { sm: '100%' },
+          ...theme.applyDarkStyles({
+            content: 'url(/static/branding/about/team-globe-distribution-dark.png)',
+          }),
+        })}
+      />
+    </Section>
+  );
+}

docs/src/components/about/Team.tsx

@@ -15,6 +15,7 @@ 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';
 
@@ -312,17 +313,20 @@ export default function Team() {
       <Section cozy>
         <Box
           sx={{
+            my: 4,
             display: 'flex',
             flexDirection: 'column',
           }}
         >
-          <Typography variant="h2" mb={1} id="muiers">
-            Meet the <GradientText>MUIers</GradientText>
-          </Typography>
-          <Typography color="text.secondary" mb={2} sx={{ maxWidth: 450 }}>
-            Contributing from all corners of the world, <br />
-            MUI is a global team & community.
-          </Typography>
+          <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
@@ -335,24 +339,22 @@ export default function Team() {
             View careers
           </Button>
         </Box>
-        <Box mt={4}>
-          <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>
+        <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 */}
@@ -363,7 +365,7 @@ export default function Team() {
           </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’s products.
+            MUI&apos;s products.
           </Typography>
           <Grid container spacing={2} mt={2}>
             {contributors.map((profile) => (