Skip to content

Commit deb7a6d

Browse files
danilo-lealoliviertassinari
danilo-leal
and
oliviertassinari
committed
[blog] Add post about remote (#41565)
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
1 parent c8dfeb0 commit deb7a6d

File tree

8 files changed

+149
-55
lines changed

8 files changed

+149
-55
lines changed

‎docs/pages/blog.tsx‎

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -98,20 +98,17 @@ function PostPreview(props: BlogPost) {
9898
'& .MuiAvatar-circular': {
9999
width: 28,
100100
height: 28,
101-
border: 3,
102-
borderColor: '#FFF',
101+
border: `1px solid ${(theme.vars || theme).palette.divider}`,
102+
outline: '3px solid',
103+
outlineColor: '#FFF',
103104
backgroundColor: (theme.vars || theme).palette.grey[100],
104-
color: (theme.vars || theme).palette.grey[800],
105-
fontSize: theme.typography.pxToRem(13),
106-
fontWeight: 500,
107105
},
108106
}),
109107
(theme) =>
110108
theme.applyDarkStyles({
111109
'& .MuiAvatar-circular': {
112-
borderColor: (theme.vars || theme).palette.primaryDark[800],
110+
outlineColor: (theme.vars || theme).palette.primaryDark[900],
113111
backgroundColor: (theme.vars || theme).palette.primaryDark[700],
114-
color: (theme.vars || theme).palette.primaryDark[100],
115112
},
116113
}),
117114
]}
@@ -167,17 +164,7 @@ function PostPreview(props: BlogPost) {
167164
href={`/blog/${props.slug}`}
168165
id={`describe-${props.slug}`}
169166
endIcon={<KeyboardArrowRightRoundedIcon />}
170-
sx={(theme) => ({
171-
mt: { xs: 1, md: 0 },
172-
mb: { xs: -1, md: 0 },
173-
color: (theme.vars || theme).palette.primary[600],
174-
'& .MuiButton-endIcon': {
175-
ml: 0,
176-
},
177-
...theme.applyDarkStyles({
178-
color: (theme.vars || theme).palette.primary[300],
179-
}),
180-
})}
167+
sx={{ mt: { xs: 0.5, md: 0 }, p: { xs: 0, sm: '6px 8px' } }}
181168
>
182169
Read more
183170
</Button>
@@ -293,7 +280,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
293280
flexDirection: 'column',
294281
position: 'relative',
295282
borderColor: 'grey.200',
296-
boxShadow: '0px 4px 16px rgba(170, 180, 190, 0.2)',
283+
boxShadow: '0px 4px 12px rgba(170, 180, 190, 0.2)',
297284
'&:focus-within': {
298285
'& a': {
299286
outline: 0,
@@ -302,7 +289,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
302289
},
303290
(theme) =>
304291
theme.applyDarkStyles({
305-
boxShadow: '0px 4px 16px rgba(0, 0, 0, 0.4)',
292+
boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.4)',
306293
}),
307294
]}
308295
>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from 'react';
2+
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
3+
import { docs } from './remote-award-win-2024.md?muiMarkdown';
4+
5+
export default function Page() {
6+
return <TopLayoutBlog docs={docs} />;
7+
}

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: MUI scoops the win in renowned Remote Excellence Awards
3+
description: We're delighted to be honored with this global recognition for our commitment to fostering excellence in remote work.
4+
date: 2024-03-20T12:00:00.000Z
5+
authors: ['mikailaread']
6+
tags: ['Company']
7+
card: true
8+
---
9+
10+
MUI has been named a **winner** in the first-ever [Remote Excellence Awards](https://remote.com/remote-excellence-awards/), in the Small & Mighty category! 🎉
11+
12+
<img alt="MUI's official winners badge provided by Remote." src="/static/blog/remote-award-win-2024/award-image.png" width="2400" height="1100" />
13+
14+
## Small & Mighty winners
15+
16+
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.
17+
18+
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.
19+
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.
20+
Factors considered included employee engagement, impact on employee engagement and productivity, and technology adoption.
21+
22+
> 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.
23+
> 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.
24+
25+
– [Job van der Voort](https://www.linkedin.com/in/jobvo/), CEO, and Co-founder of Remote.
26+
27+
> 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.
28+
29+
– [Hailley Griffis](https://www.linkedin.com/in/hailleygriffis/), Head of Communications & Content at Buffer
30+
31+
## Reflections from MUI's leadership
32+
33+
Above all, this recognition as one of the best fully remote workplaces is a testament to the incredible dedication of our team.
34+
A company's culture lives in the daily interactions of the people who work there.
35+
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.
36+
37+
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.
38+
Congratulations to all winners!
39+
40+
When asked what he'd like to say to MUI employees about this win, Co-founder and CEO Olivier Tassinari said:
41+
42+
> 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.
43+
> 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.
44+
> 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.
45+
46+
## Join our thriving remote team from anywhere
47+
48+
MUI is hiring now for always-remote roles.
49+
We're looking for people who share our passion for quality, community, and freedom to help us shape the future of new developer tools.
50+
51+
If our purpose and ways of working resonate with you, we'd love to hear from you!
52+
53+
👉 Visit [our Careers page](/careers/) now.

‎docs/pages/careers.tsx‎

Lines changed: 82 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -328,6 +328,55 @@ function renderFAQItem(index: number, defaultExpanded?: boolean) {
328328
);
329329
}
330330

331+
function RemoteAwardCard() {
332+
return (
333+
<Paper
334+
component={Link}
335+
href="/blog/remote-award-win-2024/"
336+
noLinkStyle
337+
variant="outlined"
338+
sx={{ p: 2 }}
339+
>
340+
<Box
341+
sx={{
342+
aspectRatio: '1/1',
343+
border: '1px solid',
344+
borderColor: 'divider',
345+
borderRadius: '6px',
346+
overflow: 'clip',
347+
mb: 2,
348+
}}
349+
>
350+
<Box
351+
component="img"
352+
src="/static/branding/careers/remote-award-light.png"
353+
alt="MUI is the winner of the Remote Excellence Awards in the Small and Mighty for SMEs category."
354+
height="1200px"
355+
width="1200px"
356+
sx={(theme) => ({
357+
width: '100%',
358+
height: '100%',
359+
...theme.applyDarkStyles({
360+
content: `url(/static/branding/careers/remote-award-dark.png)`,
361+
}),
362+
})}
363+
/>
364+
</Box>
365+
<div>
366+
<Typography component="h2" variant="body2" fontWeight="semiBold">
367+
Remote Excellence Awards
368+
</Typography>
369+
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
370+
Winners in the first-ever Remote Excellence Awards, in the Small & Mighty category! 🎉
371+
</Typography>
372+
<Typography variant="body2" fontWeight="bold" color="primary">
373+
Learn more <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
374+
</Typography>
375+
</div>
376+
</Paper>
377+
);
378+
}
379+
331380
export default function Careers() {
332381
return (
333382
<BrandingCssVarsProvider>
@@ -399,41 +448,39 @@ export default function Careers() {
399448
</Box>
400449
</Grid>
401450
<Grid item xs={12} md={6}>
402-
<Stack spacing={2} useFlexGap>
403-
{companyInfo.map(({ title, description, routeUrl }) => (
404-
<Paper
405-
component={Link}
406-
href={routeUrl}
407-
noLinkStyle
408-
variant="outlined"
409-
sx={{ p: 2, width: '100%' }}
410-
key={title}
411-
>
412-
<Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
413-
{title}
414-
</Typography>
415-
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
416-
{description}
417-
</Typography>
418-
<Typography
419-
sx={(theme) => ({
420-
color: 'primary.600',
421-
...theme.applyDarkStyles({
422-
color: 'primary.400',
423-
}),
424-
})}
425-
variant="body2"
426-
fontWeight="bold"
427-
>
428-
Learn more{' '}
429-
<KeyboardArrowRightRounded
430-
fontSize="small"
431-
sx={{ verticalAlign: 'middle' }}
432-
/>
433-
</Typography>
434-
</Paper>
435-
))}
436-
</Stack>
451+
<Grid container spacing={2}>
452+
<Grid item xs={12} md={8}>
453+
<RemoteAwardCard />
454+
</Grid>
455+
<Grid item xs={12} md={4}>
456+
<Stack spacing={2} useFlexGap sx={{ height: '100%', width: '100%' }}>
457+
{companyInfo.map(({ title, description, routeUrl }) => (
458+
<Paper
459+
component={Link}
460+
href={routeUrl}
461+
noLinkStyle
462+
variant="outlined"
463+
sx={{ p: 2, width: '100%', flexGrow: 1 }}
464+
key={title}
465+
>
466+
<Typography variant="body2" fontWeight="bold" sx={{ mb: 0.5 }}>
467+
{title}
468+
</Typography>
469+
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
470+
{description}
471+
</Typography>
472+
<Typography variant="body2" fontWeight="bold" color="primary">
473+
Learn more{' '}
474+
<KeyboardArrowRightRounded
475+
fontSize="small"
476+
sx={{ verticalAlign: 'middle' }}
477+
/>
478+
</Typography>
479+
</Paper>
480+
))}
481+
</Stack>
482+
</Grid>
483+
</Grid>
437484
</Grid>
438485
</Grid>
439486
</Section>

‎docs/public/static/blog/remote-award-win-2024/award-image.png‎

348 KB
Loading

‎docs/public/static/blog/remote-award-win-2024/card.png‎

237 KB
Loading

‎docs/public/static/branding/careers/remote-award-dark.png‎

292 KB
Loading

‎docs/public/static/branding/careers/remote-award-light.png‎

181 KB
Loading

0 commit comments

Comments
 (0)