feat: Pricing Page Revamp (#2452)

# Description Pricing Page Revamp and small changes to DemoSection and TabsSection Fixes #2441, #2445, #2446 ## Type of change Please delete options that are not relevant. - [x] New feature (non-breaking change which adds functionality) # How Has This Been Tested? Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. - [x] Manual Test # Screenshots / Screen recording Pricing Page ![image](https://github.com/zesty-io/website/assets/83058948/422c0b18-ce28-4b4c-8ce0-7f9c7057900d) DemoSection ![image](https://github.com/zesty-io/website/assets/83058948/ea26a5c1-8378-484e-8840-fbc7f9686a0b) --------- Co-authored-by: Darwin ❤️❤️❤️ <71545960+darwin808@users.noreply.github.com>
zesty-io · May 10, 2024 · 188560c · 188560c
1 parent ecc50ba
commit 188560c
Show file tree

Hide file tree

Showing 17 changed files with 1,476 additions and 107 deletions.
diff --git a/src/blocks/pricing/revamp/AdditionalFeatures/FeatureCard.js b/src/blocks/pricing/revamp/AdditionalFeatures/FeatureCard.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import { Button, Card, Typography, Grid, Box } from '@mui/material';
+import { ThemeProvider, useTheme } from '@emotion/react';
+
+import revampTheme from 'theme/revampTheme';
+import FillerContent from 'components/globals/FillerContent';
+
+const FeatureCard = ({ feature }) => {
+  const {
+    image,
+    title,
+    description,
+    primary_cta_label,
+    secondary_cta_label,
+    primary_cta_link,
+    secondary_cta_link,
+  } = feature;
+  const theme = useTheme();
+
+  return (
+    <ThemeProvider theme={() => revampTheme(theme.palette.mode)}>
+      <Card
+        sx={{
+          margin: 0,
+          mx: 2,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          px: '64px',
+          py: '32px',
+          borderRadius: '22px',
+          maxWidth: { xs: '100%', sm: '380px' },
+          minHeight: '460px',
+          backgroundColor: 'white',
+          boxShadow: '0 3px 6px 0 rgba(140, 152, 164, 0.25)',
+        }}
+      >
+        <Box
+          component="img"
+          src={image || FillerContent.image}
+          sx={{ width: '112px', height: '112px', borderRadius: '50%', mb: 3 }}
+        />
+        <Typography
+          sx={{
+            textAlign: 'center',
+            fontSize: '28px',
+            fontWeight: 600,
+            mb: 1,
+            color: theme.palette.zesty.zestyDarkText,
+          }}
+        >
+          {title}
+        </Typography>
+        <Typography
+          sx={{
+            p: 1,
+            textAlign: 'center',
+            fontSize: '18px',
+            fontWeight: 400,
+            overflow: 'auto',
+            textOverflow: 'ellipsis',
+            color: theme.palette.zesty.zestyZambezi,
+          }}
+        >
+          {description}
+        </Typography>
+        <Grid container spacing={2} sx={{ flexGrow: 1 }}>
+          <Grid item xs={6} sx={{ display: 'flex', alignItems: 'flex-end' }}>
+            <Button
+              href={secondary_cta_link}
+              fullWidth
+              variant="outlined"
+              color="primary"
+              sx={{ px: '10px' }}
+              size="large"
+            >
+              {secondary_cta_label}
+            </Button>
+          </Grid>
+          <Grid item xs={6} sx={{ display: 'flex', alignItems: 'flex-end' }}>
+            <Button
+              href={primary_cta_link}
+              fullWidth
+              variant="contained"
+              color="primary"
+              size="large"
+              sx={{ px: '8px' }}
+            >
+              {primary_cta_label}
+            </Button>
+          </Grid>
+        </Grid>
+      </Card>
+    </ThemeProvider>
+  );
+};
+
+export default FeatureCard;
diff --git a/src/blocks/pricing/revamp/AdditionalFeatures/index.js b/src/blocks/pricing/revamp/AdditionalFeatures/index.js
@@ -0,0 +1,125 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import {
+  Typography,
+  Box,
+  useMediaQuery,
+  MobileStepper,
+  Button,
+} from '@mui/material';
+import { KeyboardArrowLeft, KeyboardArrowRight } from '@mui/icons-material';
+
+import FeatureCard from './FeatureCard';
+
+const AdditionalFeatures = ({ features, title }) => {
+  const theme = useTheme();
+
+  const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
+  const isMediumScreen = useMediaQuery(theme.breakpoints.up('md'));
+
+  const [activeStep, setActiveStep] = React.useState(0);
+
+  const featuresPerPage = isLargeScreen ? 3 : isMediumScreen ? 2 : 1;
+  const maxSteps = Math.ceil(features.length / featuresPerPage);
+
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  const startIndex = Math.max(
+    0,
+    activeStep * featuresPerPage - (featuresPerPage - 1),
+  );
+  const endIndex = Math.min(features.length, startIndex + featuresPerPage);
+  const currentFeatures = features.slice(startIndex, endIndex);
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#f9fafb',
+        pt: 10,
+        margin: 0,
+        maxWidth: '100%',
+        '!important': '',
+      }}
+    >
+      <Typography
+        sx={{
+          maxWidth: { sm: '640px', xs: '360px' },
+          fontSize: { sm: '44px', xs: '36px' },
+          fontWeight: 'bold',
+          color: theme.palette.zesty.zestyDarkText,
+          textAlign: 'center',
+          lineHeight: '1.2',
+        }}
+      >
+        {title}
+      </Typography>
+
+      <Box
+        sx={{
+          my: 5,
+          width: '100%',
+          display: 'flex',
+          alignItems: 'start',
+          justifyContent: 'center',
+        }}
+      >
+        {currentFeatures.map((feature) => (
+          <FeatureCard feature={feature} />
+        ))}
+      </Box>
+
+      <MobileStepper
+        variant="dots"
+        steps={maxSteps}
+        position="static"
+        activeStep={activeStep}
+        sx={{
+          backgroundColor: 'transparent',
+          '.MuiMobileStepper-dotActive': {
+            backgroundColor: theme.palette.zesty.zestyOrange,
+          },
+        }}
+        nextButton={
+          <Button
+            color="secondary"
+            size="small"
+            onClick={handleNext}
+            disabled={activeStep === maxSteps - 1}
+          >
+            {theme.direction === 'rtl' ? (
+              <KeyboardArrowLeft />
+            ) : (
+              <KeyboardArrowRight />
+            )}
+          </Button>
+        }
+        backButton={
+          <Button
+            color="secondary"
+            size="small"
+            onClick={handleBack}
+            disabled={activeStep === 0}
+          >
+            {theme.direction === 'rtl' ? (
+              <KeyboardArrowRight />
+            ) : (
+              <KeyboardArrowLeft />
+            )}
+          </Button>
+        }
+      />
+    </Box>
+  );
+};
+
+export default AdditionalFeatures;
diff --git a/src/blocks/pricing/revamp/Brands/index.js b/src/blocks/pricing/revamp/Brands/index.js
@@ -0,0 +1,119 @@
+import { Box, Card, CardContent, Typography, useTheme } from '@mui/material';
+
+import FillerContent from 'components/globals/FillerContent';
+import Container from 'blocks/container/Container';
+import ZestyImage from 'blocks/Image/ZestyImage';
+
+const Brands = ({
+  logoItems = FillerContent.logos,
+  heading_text = '',
+  textOutside = false,
+  maxWidth = 1500,
+  variant = 'contained',
+  invertLogo = true,
+  background = 'transparent',
+  marginTop = 0,
+}) => {
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === 'dark';
+  const sunsDarkLogoUrl =
+    'https://kfg6bckb.media.zestyio.com/sunsdark.1fc97b3c326478bf6afcb60e52679656.png?width=241';
+
+  // check if features_header richtext if not convert it to richtext format for consistency
+  const htmlCheck = new RegExp('<("[^"]*"|\'[^\']*\'|[^\'">])*>');
+  const isRichText = htmlCheck.test(heading_text);
+
+  if (!isRichText && heading_text != '') {
+    heading_text = `<h2>${heading_text}</h2>`;
+  }
+
+  return (
+    <Box component="section" sx={{ mt: marginTop }}>
+      <Container sx={{ maxWidth: maxWidth }}>
+        {textOutside && (
+          <Typography
+            sx={{
+              width: '600px',
+              fontSize: { sm: '44px', xs: '36px' },
+              fontWeight: 'bold',
+              color: theme.palette.zesty.zestyDarkText,
+              textAlign: 'center',
+              lineHeight: '1.2',
+            }}
+          >
+            More than 10 million people across the world choose us
+          </Typography>
+        )}
+        <Card
+          variant={variant}
+          sx={{
+            border: variant === 'outlined' ? 'none' : '',
+            background: background,
+          }}
+        >
+          <CardContent>
+            {!textOutside && (
+              <Box
+                sx={{
+                  width: '100%',
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+              >
+                <Typography
+                  sx={{
+                    width: '800px',
+                    fontSize: { sm: '44px', xs: '36px' },
+                    fontWeight: 'bold',
+                    color: theme.palette.zesty.zestyDarkText,
+                    textAlign: 'center',
+                    lineHeight: '1.2',
+                    mb: 5,
+                  }}
+                >
+                  More than 10 million people across the world choose us
+                </Typography>
+              </Box>
+            )}
+            <Box
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-around',
+                flexWrap: 'wrap',
+                gap: 3,
+              }}
+            >
+              {logoItems?.map((item, index) => (
+                <Box key={index} sx={{ display: 'flex', width: 150 }}>
+                  <ZestyImage
+                    loading="lazy"
+                    style={{
+                      width: '100%',
+                      height: 'auto',
+                      filter:
+                        invertLogo && isDarkMode
+                          ? `${
+                              item?.customer_name === 'Phoenix Suns'
+                                ? 'invert(0)'
+                                : 'brightness(0%)'
+                            } invert(1)`
+                          : '',
+                    }}
+                    alt={item?.customer_name || ''}
+                    src={
+                      item.customer_logo?.data[0]?.url ||
+                      FillerContent.logos[index].url
+                    }
+                  />
+                </Box>
+              ))}
+            </Box>
+          </CardContent>
+        </Card>
+      </Container>
+    </Box>
+  );
+};
+
+export default Brands;