[website] Update the about page

docs/pages/careers.tsx

@@ -13,14 +13,15 @@ import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRound
 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={{ mb: 1, maxWidth: 700 }}>
             {props.description}
           </Typography>
         </span>
@@ -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),
@@ -283,7 +274,7 @@ function CareersContent() {
       <Container>
         <Box
           sx={{
-            height: '30vh',
+            height: '36vh',
             minHeight: 300,
             display: 'flex',
             flexDirection: 'column',
@@ -298,7 +289,8 @@ function CareersContent() {
             Careers
           </Typography>
           <Typography component="h1" variant="h2" sx={{ my: 1 }}>
-            Build the <GradientText>next generation</GradientText> of tools for UI development
+            Build <GradientText>the next generation</GradientText>
+            <br /> of tools for UI development
           </Typography>
           <Typography
             color="text.secondary"
@@ -308,75 +300,33 @@ function CareersContent() {
               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.
+            We aim high at enabling developers & designers to bring stunning UIs to life with
+            unrivalled speed and ease.
           </Typography>
         </Box>
       </Container>
       {/* Our ultimate goal */}
       <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,40 +339,69 @@ 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 } }}>
+      {/* Open roles */}
+      <Section cozy>
         <div>
           <Typography variant="h2" sx={{ my: 1 }} id="open-roles">
             {`Open roles (${openRolesData.reduce((acc, item) => acc + item.roles.length, 0)})`}
@@ -434,15 +413,7 @@ function CareersContent() {
             grow in the following areas:
           </Typography>
         </div>
-        <Divider
-          sx={(theme) => ({
-            my: { xs: 2, sm: 4 },
-            borderColor: 'grey.100',
-            ...theme.applyDarkStyles({
-              borderColor: 'primaryDark.600',
-            }),
-          })}
-        />
+        <Divider sx={{ my: { xs: 2, sm: 4 } }} />
         <Stack
           spacing={2}
           divider={
@@ -480,39 +451,35 @@ 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 } }}>
+          <Section bg="transparent">
             <Box
               sx={{
                 display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
+                flexDirection: 'column',
+                alignItems: 'start',
+                gap: 1,
               }}
             >
-              <div>
-                <Typography variant="h2" sx={{ my: 1 }} id="next-roles">
-                  Next roles
-                </Typography>
-                <Typography color="text.secondary" sx={{ mb: 2, maxWidth: 450 }}>
-                  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{' '}
-                  <Link href="https://jobs.ashbyhq.com/MUI/4715d81f-d00f-42d4-a0d0-221f40f73e19/application?utm_source=ZNRrPGBkqO">
-                    Dream job
-                  </Link>{' '}
-                  role.
-                </Typography>
-              </div>
+              <Typography variant="h2" id="next-roles">
+                Next roles
+              </Typography>
+              <Typography color="text.secondary" sx={{ mb: 2, maxWidth: 450 }}>
+                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{' '}
+                <Link href="https://jobs.ashbyhq.com/MUI/4715d81f-d00f-42d4-a0d0-221f40f73e19/application?utm_source=ZNRrPGBkqO">
+                  Dream job
+                </Link>{' '}
+                role.
+              </Typography>
             </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' }} />}
-            >
+            <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 +503,9 @@ function CareersContent() {
                 );
               })}
             </Stack>
-          </Container>
+          </Section>
         </Box>
-      ) : null}
+      )}
       <Divider />
       {/* Frequently asked questions */}
       <Section bg="transparent">
@@ -557,10 +524,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 +536,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>