[website] Update the about page

docs/src/components/about/AboutHero.tsx

@@ -0,0 +1,181 @@
+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';
+
+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">
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Typography color="primary.main" variant="body2" fontWeight="bold">
+          About us
+        </Typography>
+        <Typography component="h1" variant="h2" sx={{ my: 1, textAlign: 'center' }}>
+          We&apos;re on a mission to make <br />{' '}
+          <GradientText>building better UIs effortless</GradientText>
+        </Typography>
+        <Typography
+          color="text.secondary"
+          textAlign="center"
+          sx={{
+            maxWidth: { md: 450 },
+          }}
+        >
+          We aim high at enabling developers & designers to bring stunning UIs to life with
+          unrivalled speed and ease.
+        </Typography>
+      </Box>
+      <PhotoGallery />
+      <TeamStatistics />
+    </Section>
+  );
+}

docs/src/components/about/HowToSupport.tsx

@@ -0,0 +1,202 @@
+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 Link from 'docs/src/modules/components/Link';
+import Section from 'docs/src/layouts/Section';
+
+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}`,
+        }),
+      })}
+    >
+      <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>
+  );
+}
+
+export default function HowToSupport() {
+  return (
+    <Section cozy>
+      <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, 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>
+  );
+}