[blog] Add post about remote (#41565)

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

docs/pages/blog.tsx

@@ -98,20 +98,17 @@ function PostPreview(props: BlogPost) {
               '& .MuiAvatar-circular': {
                 width: 28,
                 height: 28,
-                border: 3,
-                borderColor: '#FFF',
+                border: `1px solid ${(theme.vars || theme).palette.divider}`,
+                outline: '3px solid',
+                outlineColor: '#FFF',
                 backgroundColor: (theme.vars || theme).palette.grey[100],
-                color: (theme.vars || theme).palette.grey[800],
-                fontSize: theme.typography.pxToRem(13),
-                fontWeight: 500,
               },
             }),
             (theme) =>
               theme.applyDarkStyles({
                 '& .MuiAvatar-circular': {
-                  borderColor: (theme.vars || theme).palette.primaryDark[800],
+                  outlineColor: (theme.vars || theme).palette.primaryDark[900],
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-                  color: (theme.vars || theme).palette.primaryDark[100],
                 },
               }),
           ]}
@@ -167,17 +164,7 @@ function PostPreview(props: BlogPost) {
           href={`/blog/${props.slug}`}
           id={`describe-${props.slug}`}
           endIcon={<KeyboardArrowRightRoundedIcon />}
-          sx={(theme) => ({
-            mt: { xs: 1, md: 0 },
-            mb: { xs: -1, md: 0 },
-            color: (theme.vars || theme).palette.primary[600],
-            '& .MuiButton-endIcon': {
-              ml: 0,
-            },
-            ...theme.applyDarkStyles({
-              color: (theme.vars || theme).palette.primary[300],
-            }),
-          })}
+          sx={{ mt: { xs: 0.5, md: 0 }, p: { xs: 0, sm: '6px 8px' } }}
         >
           Read more
         </Button>
@@ -293,7 +280,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                     flexDirection: 'column',
                     position: 'relative',
                     borderColor: 'grey.200',
-                    boxShadow: '0px 4px 16px rgba(170, 180, 190, 0.2)',
+                    boxShadow: '0px 4px 12px rgba(170, 180, 190, 0.2)',
                     '&:focus-within': {
                       '& a': {
                         outline: 0,
@@ -302,7 +289,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
                   },
                   (theme) =>
                     theme.applyDarkStyles({
-                      boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.4)',
+                      boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.4)',
                     }),
                 ]}
               >

docs/pages/blog/remote-award-win-2024.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
+import { docs } from './remote-award-win-2024.md?muiMarkdown';
+
+export default function Page() {
+  return <TopLayoutBlog docs={docs} />;
+}

docs/pages/blog/remote-award-win-2024.md

@@ -0,0 +1,53 @@
+---
+title: MUI scoops the win in renowned Remote Excellence Awards
+description: We're delighted to be honored with this global recognition for our commitment to fostering excellence in remote work.
+date: 2024-03-20T12:00:00.000Z
+authors: ['mikailaread']
+tags: ['Company']
+card: true
+---
+
+MUI has been named a **winner** in the first-ever [Remote Excellence Awards](https://remote.com/remote-excellence-awards/), in the Small & Mighty category! 🎉
+
+<img alt="MUI's official winners badge provided by Remote." src="/static/blog/remote-award-win-2024/award-image.png" width="2400" height="1100" />
+
+## Small & Mighty winners
+
+The awards, presented by [Remote](https://remote.com/), recognize companies that have demonstrated exceptional commitment, innovation, and enthusiasm in navigating the challenges and opportunities presented by remote work.
+
+The awards celebrate MUI's efforts driving success in the realm of remote work and distributed teams and provide a roadmap of effective strategies and practices for other businesses to follow.
+The winners across 10 categories were selected through a rigorous evaluation process by a panel of judges, comprising Remote's leaders and a panel of influential industry figures.
+Factors considered included employee engagement, impact on employee engagement and productivity, and technology adoption.
+
+> MUI's achievement in the Remote Excellence Awards highlights the dedication and hard work of its leaders and teams in succeeding in the new world of work.
+> Organizations like these have become the benchmark, through their commitment to excellence and their ability to thrive, paving a way forward for other organizations to confidently pursue their own remote work endeavors.
+
+– [Job van der Voort](https://www.linkedin.com/in/jobvo/), CEO, and Co-founder of Remote.
+
+> MUI is the definition of small and mighty. I am blown away by their commitment to building a company in their own way while achieving powerful results for themselves, their community, and their customers.
+
+– [Hailley Griffis](https://www.linkedin.com/in/hailleygriffis/), Head of Communications & Content at Buffer
+
+## Reflections from MUI's leadership
+
+Above all, this recognition as one of the best fully remote workplaces is a testament to the incredible dedication of our team.
+A company's culture lives in the daily interactions of the people who work there.
+I'm so proud to see ours celebrated for how, together, we've built a highly efficient remote work environment that's able to serve a global community comprising hundreds of thousands of designers and developers.
+
+It's a reflection of the commitment shared by every MUIer, and proof of the power of remote teams united by shared principles and values.
+Congratulations to all winners!
+
+When asked what he'd like to say to MUI employees about this win, Co-founder and CEO Olivier Tassinari said:
+
+> It feels extremely validating to see MUI (and our leadership) recognized in this way! We truly care about doing remote work well, and it's part of why we've scaled so intentionally.
+> What started as an open-source community has grown and evolved into a lean, focused team that's committed to driving the best possible experience for both developers and users.
+> What we've been able to accomplish in the last 5 years as an async, distributed organization fills me with gratitude for our people today and excitement for what's to come in the future.
+
+## Join our thriving remote team from anywhere
+
+MUI is hiring now for always-remote roles.
+We're looking for people who share our passion for quality, community, and freedom to help us shape the future of new developer tools.
+
+If our purpose and ways of working resonate with you, we'd love to hear from you!
+
+👉 Visit [our Careers page](/careers/) now.

docs/pages/careers.tsx

@@ -328,6 +328,55 @@ function renderFAQItem(index: number, defaultExpanded?: boolean) {
   );
 }
 
+function RemoteAwardCard() {
+  return (
+    <Paper
+      component={Link}
+      href="/blog/remote-award-win-2024/"
+      noLinkStyle
+      variant="outlined"
+      sx={{ p: 2 }}
+    >
+      <Box
+        sx={{
+          aspectRatio: '1/1',
+          border: '1px solid',
+          borderColor: 'divider',
+          borderRadius: '6px',
+          overflow: 'clip',
+          mb: 2,
+        }}
+      >
+        <Box
+          component="img"
+          src="/static/branding/careers/remote-award-light.png"
+          alt="MUI is the winner of the Remote Excellence Awards in the Small and Mighty for SMEs category."
+          height="1200px"
+          width="1200px"
+          sx={(theme) => ({
+            width: '100%',
+            height: '100%',
+            ...theme.applyDarkStyles({
+              content: `url(/static/branding/careers/remote-award-dark.png)`,
+            }),
+          })}
+        />
+      </Box>
+      <div>
+        <Typography component="h2" variant="body2" fontWeight="semiBold">
+          Remote Excellence Awards
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+          Winners in the first-ever Remote Excellence Awards, in the Small & Mighty category! 🎉
+        </Typography>
+        <Typography variant="body2" fontWeight="bold" color="primary">
+          Learn more <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
+        </Typography>
+      </div>
+    </Paper>
+  );
+}
+
 export default function Careers() {
   return (
     <BrandingCssVarsProvider>
@@ -399,41 +448,39 @@ export default function Careers() {
               </Box>
             </Grid>
             <Grid item xs={12} md={6}>
-              <Stack spacing={2} useFlexGap>
-                {companyInfo.map(({ title, description, routeUrl }) => (
-                  <Paper
-                    component={Link}
-                    href={routeUrl}
-                    noLinkStyle
-                    variant="outlined"
-                    sx={{ p: 2, width: '100%' }}
-                    key={title}
-                  >
-                    <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
-                      {title}
-                    </Typography>
-                    <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
-                      {description}
-                    </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>
-                ))}
-              </Stack>
+              <Grid container spacing={2}>
+                <Grid item xs={12} md={8}>
+                  <RemoteAwardCard />
+                </Grid>
+                <Grid item xs={12} md={4}>
+                  <Stack spacing={2} useFlexGap sx={{ height: '100%', width: '100%' }}>
+                    {companyInfo.map(({ title, description, routeUrl }) => (
+                      <Paper
+                        component={Link}
+                        href={routeUrl}
+                        noLinkStyle
+                        variant="outlined"
+                        sx={{ p: 2, width: '100%', flexGrow: 1 }}
+                        key={title}
+                      >
+                        <Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
+                          {title}
+                        </Typography>
+                        <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                          {description}
+                        </Typography>
+                        <Typography variant="body2" fontWeight="bold" color="primary">
+                          Learn more{' '}
+                          <KeyboardArrowRightRounded
+                            fontSize="small"
+                            sx={{ verticalAlign: 'middle' }}
+                          />
+                        </Typography>
+                      </Paper>
+                    ))}
+                  </Stack>
+                </Grid>
+              </Grid>
             </Grid>
           </Grid>
         </Section>