[blog] Add post about remote

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

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

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

@@ -0,0 +1,54 @@
+---
+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/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
+
+– [Job van der Voort](https://www.linkedin.com/in/jobvo/), CEO, and Co-founder of Remote.
+
+> 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.
+
+In judging, [Hailley Griffis](https://www.linkedin.com/in/hailleygriffis/), Head of Communications & Content at Buffer remarked:
+
+> 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.
+
+## 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/"
+      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>