pers and benefits careers page tweaks

danilo-leal · Jun 14, 2024 · 393e52f · 393e52f
1 parent f04c4e3
commit 393e52f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 28 deletions.
diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx
@@ -74,7 +74,7 @@ export default function OurValues() {
             <Paper
               variant="outlined"
               sx={(theme) => ({
-                p: 4,
+                p: 2.5,
                 height: '100%',
                 display: 'flex',
                 flexDirection: 'column',
@@ -110,14 +110,12 @@ export default function OurValues() {
                   variant="body2"
                   sx={[
                     {
-                      fontWeight: 'bold',
+                      fontWeight: 'semiBold',
                     },
                     (theme) => ({
                       mb: 0.5,
                       color: (theme.vars || theme).palette.text.primary,
                       '&::first-letter': {
-                        mr: 0.1,
-                        fontSize: theme.typography.pxToRem(16),
                         color: (theme.vars || theme).palette.primary.main,
                       },
                       ...theme.applyDarkStyles({

diff --git a/docs/src/components/careers/PerksBenefits.tsx b/docs/src/components/careers/PerksBenefits.tsx
@@ -19,30 +19,53 @@ const companyInfo = [
   },
   {
     title: 'Handbook',
-    description: 'Learn everything about how MUI as a company is run.',
+    description: 'Learn everything about how MUI as a company.',
     routeUrl: ROUTES.handbook,
   },
   {
     title: 'Blog',
-    description: 'Check behind-the-scenes and news about the company.',
+    description: 'Learn about our products and team.',
     routeUrl: ROUTES.blog,
   },
 ];
 
+interface CardContentBlockProps {
+  description: string;
+  title: string;
+}
+
+function CardContentBlock({ title, description }: CardContentBlockProps) {
+  return (
+    <React.Fragment>
+      <Typography component="h2" variant="body2" sx={{ fontWeight: 'semiBold' }}>
+        {title}
+      </Typography>
+      <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
+        {description}
+      </Typography>
+      <Typography variant="body2" color="primary" sx={{ fontWeight: 'bold', mt: 'auto' }}>
+        Learn more <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
+      </Typography>
+    </React.Fragment>
+  );
+}
+
 function RemoteAwardCard() {
   return (
     <Paper
       component={Link}
       href="/blog/remote-award-win-2024/"
       noLinkStyle
       variant="outlined"
-      sx={{ p: 2 }}
+      sx={{ p: 2, display: 'flex', flexDirection: 'column ' }}
     >
       <Box
         sx={{
           mb: 2,
           maxWidth: { xs: 315, sm: 325 },
           maxHeight: 315,
+          display: 'flex',
+          aspectRatio: '1 / 1',
           border: '1px solid',
           borderColor: 'divider',
           borderRadius: '6px',
@@ -68,17 +91,12 @@ function RemoteAwardCard() {
           ]}
         />
       </Box>
-      <div>
-        <Typography component="h2" variant="body2" sx={{ fontWeight: 'semiBold' }}>
-          Remote Excellence Awards
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
-          Winners in the first-ever Remote Excellence Awards, in the Small & Mighty category! 🎉
-        </Typography>
-        <Typography variant="body2" color="primary" sx={{ fontWeight: 'bold' }}>
-          Learn more <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
-        </Typography>
-      </div>
+      <Box sx={{ mt: 'auto' }}>
+        <CardContentBlock
+          title="Remote Excellence Awards"
+          description={`Winners in the first-ever Remote Excellence Awards, in the Small & Mighty category! 🎉`}
+        />
+      </Box>
     </Paper>
   );
 }
@@ -151,16 +169,7 @@ export default function PerksBenefits() {
                 variant="outlined"
                 sx={{ p: 2, width: '100%', flexGrow: 1, display: 'flex', flexDirection: 'column' }}
               >
-                <Typography variant="body2" sx={{ fontWeight: 'bold', mb: 0.5 }}>
-                  {title}
-                </Typography>
-                <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1 }}>
-                  {description}
-                </Typography>
-                <Typography variant="body2" color="primary" sx={{ fontWeight: 'bold', mt: 'auto' }}>
-                  Learn more{' '}
-                  <KeyboardArrowRightRounded fontSize="small" sx={{ verticalAlign: 'middle' }} />
-                </Typography>
+                <CardContentBlock title={title} description={description} />
               </Paper>
             ))}
           </Stack>