feat(demo): update demo page

update demo page to select user journey
zesty-io · Dec 22, 2023 · 633498a · 633498a
1 parent 66069f8
commit 633498a
Show file tree

Hide file tree

Showing 2 changed files with 286 additions and 263 deletions.
diff --git a/src/revamp/ui/GetDemoSection/index.js b/src/revamp/ui/GetDemoSection/index.js
@@ -1,4 +1,4 @@
-import { Stack, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 import { Form, Formik } from 'formik';
 import MuiMarkdown from 'markdown-to-jsx';
 import {
@@ -139,112 +139,7 @@ const GetDemoSection = ({
               {data?.description || supportingText}
             </MuiMarkdown>
           </Stack>
-          <Stack>
-            <Typography
-              variant="body2"
-              color="primary"
-              mb="12px"
-              textTransform="uppercase"
-            >
-              Trusted By
-            </Typography>
-            <Stack
-              flexWrap="wrap"
-              direction="row"
-              gap={{ xs: '20px', desktopWide: '30px' }}
-            >
-              <img
-                loading="lazy"
-                src={sony}
-                width="91px"
-                height="32px"
-                alt={generateAlt('Sony')}
-              />
-              <img
-                loading="lazy"
-                src={rocketLeague}
-                width="60px"
-                height="32px"
-                alt={generateAlt('Rocket League')}
-              />
-              <img
-                loading="lazy"
-                src={singlife}
-                width="102.12px"
-                height="32px"
-                alt={generateAlt('Singlife')}
-              />
-              <img
-                loading="lazy"
-                src={acorns}
-                width="94px"
-                height="32px"
-                alt={generateAlt('Acorns')}
-              />
-              <img
-                loading="lazy"
-                src={phoenixSuns}
-                width="107.54px"
-                height="32px"
-                alt={generateAlt('Phoenix Suns')}
-              />
-              <img
-                loading="lazy"
-                src={wattpad}
-                width="115.91px"
-                height="32px"
-                alt={generateAlt('Wattpad')}
-              />
-              <img
-                loading="lazy"
-                src={cornershop}
-                width="96.69px"
-                height="32px"
-                alt={generateAlt('Corner Shop')}
-              />
-              <img
-                loading="lazy"
-                src={bjs}
-                width="36.48px"
-                height="32px"
-                alt={generateAlt('Bjs')}
-              />
-            </Stack>
-
-            <Stack sx={{ mt: 8 }}>
-              <Typography
-                color="primary"
-                variant="body2"
-                mb="12px"
-                textTransform="uppercase"
-              >
-                G2 MOMENTUM LEADER
-              </Typography>
-              <Stack flexWrap="wrap" direction="row" gap="20px">
-                <img
-                  alt={generateAlt('')}
-                  loading="lazy"
-                  src={pic1}
-                  width="92.2px"
-                  height="120px"
-                />
-                <img
-                  alt={generateAlt('')}
-                  loading="lazy"
-                  src={pic2}
-                  width="92.2px"
-                  height="120px"
-                />
-                <img
-                  alt={generateAlt('')}
-                  loading="lazy"
-                  src={pic3}
-                  width="92.2px"
-                  height="120px"
-                />
-              </Stack>
-            </Stack>
-          </Stack>
+          <TrustLogos />
         </Stack>
 
         <Stack>
@@ -375,3 +270,145 @@ const GetDemoSection = ({
 };
 
 export default GetDemoSection;
+
+function TrustLogos() {
+  return (
+    <Stack>
+      <Logos alignLeft />
+      <Box sx={{ mt: 8 }}>
+        <G2Awards alignLeft />
+      </Box>
+    </Stack>
+  );
+}
+
+export function Logos({ invert = false, alignLeft }) {
+  return (
+    <Stack>
+      <Typography
+        variant="body2"
+        color="primary"
+        mb="12px"
+        textTransform="uppercase"
+        textAlign={alignLeft ? 'left' : 'center'}
+      >
+        Trusted By
+      </Typography>
+      <Stack
+        justifyContent={alignLeft ? '' : 'center'}
+        flexWrap="wrap"
+        direction="row"
+        gap={{ xs: '20px', desktopWide: '30px' }}
+      >
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={sony}
+          width="91px"
+          height="32px"
+          alt={generateAlt('Sony')}
+        />
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={rocketLeague}
+          width="60px"
+          height="32px"
+          alt={generateAlt('Rocket League')}
+        />
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={singlife}
+          width="102.12px"
+          height="32px"
+          alt={generateAlt('Singlife')}
+        />
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={acorns}
+          width="94px"
+          height="32px"
+          alt={generateAlt('Acorns')}
+        />
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={phoenixSuns}
+          width="107.54px"
+          height="32px"
+          alt={generateAlt('Phoenix Suns')}
+        />
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={wattpad}
+          width="115.91px"
+          height="32px"
+          alt={generateAlt('Wattpad')}
+        />
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={cornershop}
+          width="96.69px"
+          height="32px"
+          alt={generateAlt('Corner Shop')}
+        />
+        <img
+          style={{ filter: invert ? 'invert(0.5)' : 'none' }}
+          loading="lazy"
+          src={bjs}
+          width="36.48px"
+          height="32px"
+          alt={generateAlt('Bjs')}
+        />
+      </Stack>
+    </Stack>
+  );
+}
+
+export function G2Awards({ alignLeft }) {
+  return (
+    <Stack>
+      <Typography
+        color="primary"
+        variant="body2"
+        mb="12px"
+        textTransform="uppercase"
+        textAlign={alignLeft ? 'left' : 'center'}
+      >
+        G2 MOMENTUM LEADER
+      </Typography>
+      <Stack
+        flexWrap="wrap"
+        justifyContent={alignLeft ? '' : 'center'}
+        direction="row"
+        gap="20px"
+      >
+        <img
+          alt={generateAlt('')}
+          loading="lazy"
+          src={pic1}
+          width="92.2px"
+          height="120px"
+        />
+        <img
+          alt={generateAlt('')}
+          loading="lazy"
+          src={pic2}
+          width="92.2px"
+          height="120px"
+        />
+        <img
+          alt={generateAlt('')}
+          loading="lazy"
+          src={pic3}
+          width="92.2px"
+          height="120px"
+        />
+      </Stack>
+    </Stack>
+  );
+}