From 02acb13959dbf4957d02730c8f76e3ae0ae12a4f Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Thu, 21 Sep 2023 16:25:08 -0300
Subject: [PATCH] add in the values illustrations
---
.../static/branding/about/better-dark.svg | 13 +++
.../static/branding/about/better-light.svg | 13 +++
.../branding/about/bureaucracy-dark.svg | 36 ++++++++
.../branding/about/bureaucracy-light.svg | 36 ++++++++
.../static/branding/about/community-dark.svg | 23 ++++++
.../static/branding/about/community-light.svg | 23 ++++++
.../static/branding/about/trust-dark.svg | 19 +++++
.../static/branding/about/trust-light.svg | 19 +++++
docs/src/components/about/OurValues.tsx | 82 ++++++++++++-------
9 files changed, 235 insertions(+), 29 deletions(-)
create mode 100644 docs/public/static/branding/about/better-dark.svg
create mode 100644 docs/public/static/branding/about/better-light.svg
create mode 100644 docs/public/static/branding/about/bureaucracy-dark.svg
create mode 100644 docs/public/static/branding/about/bureaucracy-light.svg
create mode 100644 docs/public/static/branding/about/community-dark.svg
create mode 100644 docs/public/static/branding/about/community-light.svg
create mode 100644 docs/public/static/branding/about/trust-dark.svg
create mode 100644 docs/public/static/branding/about/trust-light.svg
diff --git a/docs/public/static/branding/about/better-dark.svg b/docs/public/static/branding/about/better-dark.svg
new file mode 100644
index 00000000000000..f7171a3a030caa
--- /dev/null
+++ b/docs/public/static/branding/about/better-dark.svg
@@ -0,0 +1,13 @@
+
diff --git a/docs/public/static/branding/about/better-light.svg b/docs/public/static/branding/about/better-light.svg
new file mode 100644
index 00000000000000..705677833d9aa5
--- /dev/null
+++ b/docs/public/static/branding/about/better-light.svg
@@ -0,0 +1,13 @@
+
diff --git a/docs/public/static/branding/about/bureaucracy-dark.svg b/docs/public/static/branding/about/bureaucracy-dark.svg
new file mode 100644
index 00000000000000..1a8e9d73d80d8c
--- /dev/null
+++ b/docs/public/static/branding/about/bureaucracy-dark.svg
@@ -0,0 +1,36 @@
+
diff --git a/docs/public/static/branding/about/bureaucracy-light.svg b/docs/public/static/branding/about/bureaucracy-light.svg
new file mode 100644
index 00000000000000..f7d78824a30ae9
--- /dev/null
+++ b/docs/public/static/branding/about/bureaucracy-light.svg
@@ -0,0 +1,36 @@
+
diff --git a/docs/public/static/branding/about/community-dark.svg b/docs/public/static/branding/about/community-dark.svg
new file mode 100644
index 00000000000000..9d054a7d47f4a3
--- /dev/null
+++ b/docs/public/static/branding/about/community-dark.svg
@@ -0,0 +1,23 @@
+
diff --git a/docs/public/static/branding/about/community-light.svg b/docs/public/static/branding/about/community-light.svg
new file mode 100644
index 00000000000000..56c9e64d20dd40
--- /dev/null
+++ b/docs/public/static/branding/about/community-light.svg
@@ -0,0 +1,23 @@
+
diff --git a/docs/public/static/branding/about/trust-dark.svg b/docs/public/static/branding/about/trust-dark.svg
new file mode 100644
index 00000000000000..c25d813a70c982
--- /dev/null
+++ b/docs/public/static/branding/about/trust-dark.svg
@@ -0,0 +1,19 @@
+
diff --git a/docs/public/static/branding/about/trust-light.svg b/docs/public/static/branding/about/trust-light.svg
new file mode 100644
index 00000000000000..3a255a5b62f032
--- /dev/null
+++ b/docs/public/static/branding/about/trust-light.svg
@@ -0,0 +1,19 @@
+
diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx
index 8cab13f044337c..6a3ac54f51baf1 100644
--- a/docs/src/components/about/OurValues.tsx
+++ b/docs/src/components/about/OurValues.tsx
@@ -5,34 +5,44 @@ 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 StyleRoundedIcon from '@mui/icons-material/StyleRounded';
import Link from 'docs/src/modules/components/Link';
import GradientText from 'docs/src/components/typography/GradientText';
import ROUTES from 'docs/src/route';
import Section from 'docs/src/layouts/Section';
import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
-import { GlowingIconContainer } from 'docs/src/components/action/InfoCard';
const values = [
{
- icon: ,
title: 'Put community first 💙',
description: 'We never lose sight of who we’re serving and why.',
+ lightIcon: 'url(/static/branding/about/community-light.svg)',
+ darkIcon: 'url(/static/branding/about/community-dark.svg)',
+ width: 92,
+ height: 84,
},
{
- icon: ,
title: 'Avoid bureaucracy 🚫',
description: 'We’re so not corporate — and we like it that way.',
+ lightIcon: 'url(/static/branding/about/bureaucracy-light.svg)',
+ darkIcon: 'url(/static/branding/about/bureaucracy-dark.svg)',
+ width: 81,
+ height: 94,
},
{
- icon: ,
title: 'Chase “better” 🌱',
description: 'We’re driven by an unending desire to improve.',
+ lightIcon: 'url(/static/branding/about/better-light.svg)',
+ darkIcon: 'url(/static/branding/about/better-dark.svg)',
+ width: 89,
+ height: 89,
},
{
- icon: ,
title: 'Trust and deliver together 🚀',
description: 'We choose to cultivate unity as the core of achievement.',
+ lightIcon: 'url(/static/branding/about/trust-light.svg)',
+ darkIcon: 'url(/static/branding/about/trust-dark.svg)',
+ width: 75,
+ height: 92,
},
];
@@ -66,13 +76,17 @@ export default function OurValues() {
- {values.map(({ icon, title, description }) => (
+ {values.map(({ title, description, darkIcon, lightIcon, height, width }) => (
({
p: 4,
height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'space-between',
+ gap: 1.5,
background: `${(theme.vars || theme).palette.gradients.linearSubtle}`,
...theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
@@ -81,32 +95,42 @@ export default function OurValues() {
}),
})}
>
-
- ({
- mt: 2,
- 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,
- },
+ background: `${lightIcon}`,
...theme.applyDarkStyles({
- '&::first-letter': {
- color: (theme.vars || theme).palette.primary[400],
- },
+ background: `${darkIcon}`,
}),
})}
- >
- {title}
-
-
- {description}
-
+ width={width}
+ height={height}
+ />
+
+ ({
+ 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({
+ '&::first-letter': {
+ color: (theme.vars || theme).palette.primary[400],
+ },
+ }),
+ })}
+ >
+ {title}
+
+
+ {description}
+
+
))}