From 01a7012a7cca15b29ae17fc9ec654c7ff6b89d77 Mon Sep 17 00:00:00 2001
From: Arzl James <70579069+arzljames@users.noreply.github.com>
Date: Tue, 26 Mar 2024 21:22:23 +0800
Subject: [PATCH 1/9] fix: demo page revamp (#2413)

# Description

Removed the stack cards from the demo page and render directly the demo
form.

Fixes #2407

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)

# How Has This Been Tested?

- [x] Manual Test

# Screenshots / Screen recording

Please add screenshots or recording if applicable

**FROM:**

![image](https://github.com/zesty-io/website/assets/70579069/b9b8d86a-81a6-4255-a43b-443efc2997d2)


**TO:**

![image](https://github.com/zesty-io/website/assets/70579069/1e187304-8605-4e85-a1ca-8f4859b01117)
---
 src/components/cta/TryFreeButton.js          |   2 +-
 src/layouts/Main/MarketingMain.js            |   4 +
 src/layouts/Main/components/Topbar/Topbar.js |   3 +-
 src/views/zesty/Demo.js                      | 179 ++-----------------
 4 files changed, 21 insertions(+), 167 deletions(-)

diff --git a/src/components/cta/TryFreeButton.js b/src/components/cta/TryFreeButton.js
index 27a62fabf..fb029a330 100644
--- a/src/components/cta/TryFreeButton.js
+++ b/src/components/cta/TryFreeButton.js
@@ -10,7 +10,7 @@ import Icon from '@mui/material/Icon';
 import CodeBlock from './CodeBlock';
 
 export default function TryFreeButton({
-  text = 'Request Demo',
+  text = '',
   target = 'blank',
   fullWidth = false,
   component = 'button',
diff --git a/src/layouts/Main/MarketingMain.js b/src/layouts/Main/MarketingMain.js
index a7c00b14d..b30d58662 100644
--- a/src/layouts/Main/MarketingMain.js
+++ b/src/layouts/Main/MarketingMain.js
@@ -19,6 +19,7 @@ import { Topbar } from './components';
 
 import dynamic from 'next/dynamic';
 import revampTheme from 'theme/revampTheme';
+import useFetch from 'components/hooks/useFetch';
 
 const Footer = dynamic(() => import('./components/Footer/FooterDynamic'));
 const Sidebar = dynamic(() => import('./components').then((e) => e.Sidebar));
@@ -99,6 +100,8 @@ const MarketingMain = ({
     }
   }, [userInfo]);
 
+  const data = useFetch('/-/demo-cta.json');
+
   return (
     <>
       {isLoggedIn === false && !isLoginPage && <SiteBanner />}
@@ -163,6 +166,7 @@ const MarketingMain = ({
                 isAuthenticated={isLoggedIn}
                 userInfo={userInfo?.data}
                 loading={loading}
+                cta={data?.data?.demo_cta}
               />
             </Stack>
           </Container>
diff --git a/src/layouts/Main/components/Topbar/Topbar.js b/src/layouts/Main/components/Topbar/Topbar.js
index ce4f88aa5..ec7e0cae9 100644
--- a/src/layouts/Main/components/Topbar/Topbar.js
+++ b/src/layouts/Main/components/Topbar/Topbar.js
@@ -35,6 +35,7 @@ const Topbar = ({
   userInfo = {},
   loading = false,
   flyoutNavigation: data = [],
+  cta,
 }) => {
   const theme = useTheme();
   const { mode } = theme.palette;
@@ -167,7 +168,7 @@ const Topbar = ({
               </Box>
               <Box>
                 <TryFreeButton
-                  text="Contact Sales"
+                  text={cta}
                   variant="contained"
                   component="a"
                   size="large"
diff --git a/src/views/zesty/Demo.js b/src/views/zesty/Demo.js
index 0ef69a8ca..22c3d1cc2 100644
--- a/src/views/zesty/Demo.js
+++ b/src/views/zesty/Demo.js
@@ -23,178 +23,27 @@
  * Data Output Example: https://zesty.org/services/web-engine/introduction-to-parsley/parsley-index#tojson
  * Images API: https://zesty.org/services/media-storage-micro-dam/on-the-fly-media-optimization-and-dynamic-image-manipulation
  */
-import { React } from 'react';
-import { useTheme } from '@mui/material/styles';
-import {
-  Box,
-  Button,
-  Card,
-  Grid,
-  Stack,
-  ThemeProvider,
-  Typography,
-  alpha,
-} from '@mui/material';
-import MuiMarkdown from 'markdown-to-jsx';
+import React from 'react';
+import { ThemeProvider, useTheme } from '@mui/material/styles';
 import revampTheme from 'theme/revampTheme';
-import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
-import Link from 'next/link';
-import { G2Awards, Logos } from 'revamp/ui/GetDemoSection';
-import { pushDataLayer } from 'lib/ga';
+import GetDemoSection from 'revamp/ui/GetDemoSection';
 
-const Demo = ({ content }) => {
+function Demo({ content }) {
   const theme = useTheme();
 
-  const cardData = content?.dynamic_contact_page?.data;
+  const getDemoSectionProps = {
+    title: content?.demo_section_title,
+    supportingText: content?.demo_section_supportingtext,
+    formTitle: content?.demo_section_formtitle,
+    cta: content?.cta_button_text,
+    id: '#demo-cta',
+  };
+
   return (
     <ThemeProvider theme={() => revampTheme(theme.palette.mode)}>
-      <EngageTypeCards cardData={cardData} />
-      {/* <GetDemoSection /> */}
+      <GetDemoSection {...getDemoSectionProps} />
     </ThemeProvider>
   );
-};
+}
 
 export default Demo;
-
-function EngageTypeCards({ cardData }) {
-  const theme = useTheme();
-  return (
-    <Stack
-      bgcolor="grey.900"
-      py={{ xs: 4, tablet: 6, lg: 10 }}
-      px={{ xs: 2, tablet: 4, lg: 14 }}
-      alignItems="center"
-      justifyContent="center"
-      textAlign="center"
-    >
-      <Stack mb={{ xs: 4, lg: 5 }}>
-        <Typography
-          py={0}
-          fontWeight={800}
-          fontSize={{ xs: 36, tablet: 52 }}
-          lineHeight={{ xs: '44px', tablet: '56px' }}
-          mb={{ xs: 2, tablet: '24px' }}
-          letterSpacing="-0.02em"
-          color="#fff"
-        >
-          How would you like to engage?
-        </Typography>
-      </Stack>
-
-      <Grid
-        container
-        spacing={{ xs: 4, sm: 1, md: 4 }}
-        sx={{ width: '100%', maxWidth: 1200 }}
-        justifyContent="center"
-      >
-        {cardData?.map((item) => {
-          return (
-            <Grid
-              key={item}
-              component={Link}
-              onClick={() =>
-                pushDataLayer({
-                  buttonText: item?.button_text || '',
-                  targetPage: item.button_link || '#',
-                })
-              }
-              href={item.button_link || '#'}
-              sx={{ textDecoration: 'none' }}
-              item
-              xs={12}
-              sm={4}
-            >
-              <Stack
-                height={'100%'}
-                minHeight={250}
-                component={Card}
-                sx={(theme) => ({
-                  '&:hover': {
-                    background:
-                      theme.palette.mode === 'light'
-                        ? theme.palette.grey[200]
-                        : theme.palette.grey[800],
-                  },
-                })}
-                borderRadius="8px"
-              >
-                <Stack sx={{ height: '100%' }}>
-                  <Box
-                    p="20px"
-                    spacing={1}
-                    sx={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      width: '100%',
-                    }}
-                  >
-                    <Typography
-                      variant="h5"
-                      letterSpacing="-0.02em"
-                      color="text.primary"
-                      fontWeight={600}
-                    >
-                      {item?.title || ''}
-                    </Typography>
-
-                    <ArrowForwardRoundedIcon
-                      sx={{
-                        width: '16px',
-                        height: '16px',
-                        alignSelf: 'center',
-                        fill: alpha(theme.palette.grey[900], '.4'),
-                      }}
-                    />
-                  </Box>
-                  <Box
-                    sx={{
-                      mb: 2,
-                      height: '100%',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      justifyContent: 'space-between',
-                    }}
-                  >
-                    <Stack gap={2} px="20px">
-                      <MuiMarkdown
-                        options={{
-                          overrides: {
-                            p: {
-                              component: Typography,
-                              props: {
-                                sx: {
-                                  textAlign: 'left',
-                                  fontSize: { sm: 14, md: 'unset' },
-                                },
-                                color: 'text.secondary',
-                              },
-                            },
-                          },
-                        }}
-                      >
-                        {item?.description || ''}
-                      </MuiMarkdown>
-                    </Stack>
-
-                    <Button sx={{ mx: 2 }} variant="contained" size="medium">
-                      {item?.button_text || ''}
-                    </Button>
-                  </Box>
-                </Stack>
-              </Stack>
-            </Grid>
-          );
-        })}
-      </Grid>
-
-      <Grid container spacing={4} sx={{ width: '100%', maxWidth: 1200, mt: 8 }}>
-        <Grid item xs={12} md={6}>
-          <Logos />
-        </Grid>
-        <Grid item xs={12} md={6}>
-          <G2Awards />
-        </Grid>
-      </Grid>
-    </Stack>
-  );
-}

From 59240571853fae9888a9ed73198eadb4da57a12c Mon Sep 17 00:00:00 2001
From: Jomar Montuya <61284357+jomarmontuya@users.noreply.github.com>
Date: Tue, 26 Mar 2024 21:23:55 +0800
Subject: [PATCH 2/9] fix: account ui top right search support legacy search
 (#2412)

# Description

Allow Search by Legacy ID inside account ui topbar search

Fixes # (issue)

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)


![image](https://github.com/zesty-io/website/assets/61284357/d61663a3-dbdf-465e-bd06-a3c8474026e7)


closes https://github.com/zesty-io/website/issues/2347
---
 src/components/accounts/ui/select/AccountsComboBox.js | 3 ++-
 src/components/console/AccountsAppbar.js              | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/accounts/ui/select/AccountsComboBox.js b/src/components/accounts/ui/select/AccountsComboBox.js
index 36fc9996e..beec9f2d7 100644
--- a/src/components/accounts/ui/select/AccountsComboBox.js
+++ b/src/components/accounts/ui/select/AccountsComboBox.js
@@ -141,7 +141,7 @@ const StyledPopper = styled(Popper)({
 
 const filterOptions = createFilterOptions({
   matchFrom: 'any',
-  stringify: (option) => option.name + option.value,
+  stringify: (option) => option.name + option.value + option.id,
 });
 
 const Index = ({
@@ -161,6 +161,7 @@ const Index = ({
     return {
       name: e.name,
       value: e.ZUID,
+      id: e.ID,
     };
   });
 
diff --git a/src/components/console/AccountsAppbar.js b/src/components/console/AccountsAppbar.js
index 1b239ae7e..eb65fa623 100644
--- a/src/components/console/AccountsAppbar.js
+++ b/src/components/console/AccountsAppbar.js
@@ -93,6 +93,7 @@ export const AccountsAppbar = ({ colorInvert = false }) => {
   if (isDocsPage) {
     return <></>;
   }
+
   return (
     <Box
       width={1}

From cc2121203407f5d4b6c277798fe2ca5f5b41e290 Mon Sep 17 00:00:00 2001
From: Arzl James <70579069+arzljames@users.noreply.github.com>
Date: Mon, 1 Apr 2024 23:59:37 +0800
Subject: [PATCH 3/9] fix(constant.js): customer stories link (#2417)

# Description

Fix customer stories link under flyout navigation of use cases.

Fixes #2415

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)

# 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



https://github.com/zesty-io/website/assets/70579069/63907101-7dc2-4685-9c70-ef6a5364212e
---
 src/components/globals/constants.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/globals/constants.js b/src/components/globals/constants.js
index ef44204f6..b0f667f99 100644
--- a/src/components/globals/constants.js
+++ b/src/components/globals/constants.js
@@ -2248,6 +2248,11 @@ export const flyoutNavigation = [
             ],
           },
           related_articles: null,
+          meta: {
+            web: {
+              uri: '/mindshare/customer-stories/rocket-league-launches-e-sports-site-celebrating-players-and-tournaments/',
+            },
+          },
         },
       ],
     },
@@ -2383,6 +2388,11 @@ export const flyoutNavigation = [
             ],
           },
           related_articles: null,
+          meta: {
+            web: {
+              uri: '/mindshare/customer-stories/cornershop-by-uber-selects-zesty-io-to-drive-global-expansion-effort/',
+            },
+          },
         },
       ],
     },

From 296d916854073cfbffed3b3cfb7de2dd3f4a1aa1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Darwin=20=E2=9D=A4=EF=B8=8F=E2=9D=A4=EF=B8=8F=E2=9D=A4?=
 =?UTF-8?q?=EF=B8=8F?= <71545960+darwin808@users.noreply.github.com>
Date: Wed, 3 Apr 2024 14:38:34 +0800
Subject: [PATCH 4/9] build: update next js `14.1.4` (#2418)

# Description

update next js to `14.1.4`

Co-authored-by: darwin.apolinario <darwin.apolinario@gmail.com>
---
 package-lock.json | 178 ++++++++++++++++++++++++----------------------
 package.json      |   2 +-
 2 files changed, 93 insertions(+), 87 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3913b440c..bd3c08ead 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,7 +39,7 @@
         "markdown-it": "^13.0.2",
         "markdown-to-jsx": "^7.3.2",
         "material-ui-phone-number": "^3.0.0",
-        "next": "^14.0.4",
+        "next": "^14.1.4",
         "notistack": "^3.0.1",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
@@ -3219,14 +3219,14 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.4.tgz",
-      "integrity": "sha512-irQnbMLbUNQpP1wcE5NstJtbuA/69kRfzBrpAD7Gsn8zm/CY6YQYc3HQBz8QPxwISG26tIm5afvvVbu508oBeQ=="
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.4.tgz",
+      "integrity": "sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ=="
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.4.tgz",
-      "integrity": "sha512-mF05E/5uPthWzyYDyptcwHptucf/jj09i2SXBPwNzbgBNc+XnwzrL0U6BmPjQeOL+FiB+iG1gwBeq7mlDjSRPg==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.4.tgz",
+      "integrity": "sha512-ubmUkbmW65nIAOmoxT1IROZdmmJMmdYvXIe8211send9ZYJu+SqxSnJM4TrPj9wmL6g9Atvj0S/2cFmMSS99jg==",
       "cpu": [
         "arm64"
       ],
@@ -3239,9 +3239,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.4.tgz",
-      "integrity": "sha512-IZQ3C7Bx0k2rYtrZZxKKiusMTM9WWcK5ajyhOZkYYTCc8xytmwSzR1skU7qLgVT/EY9xtXDG0WhY6fyujnI3rw==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.4.tgz",
+      "integrity": "sha512-b0Xo1ELj3u7IkZWAKcJPJEhBop117U78l70nfoQGo4xUSvv0PJSTaV4U9xQBLvZlnjsYkc8RwQN1HoH/oQmLlQ==",
       "cpu": [
         "x64"
       ],
@@ -3254,9 +3254,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.4.tgz",
-      "integrity": "sha512-VwwZKrBQo/MGb1VOrxJ6LrKvbpo7UbROuyMRvQKTFKhNaXjUmKTu7wxVkIuCARAfiI8JpaWAnKR+D6tzpCcM4w==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.4.tgz",
+      "integrity": "sha512-457G0hcLrdYA/u1O2XkRMsDKId5VKe3uKPvrKVOyuARa6nXrdhJOOYU9hkKKyQTMru1B8qEP78IAhf/1XnVqKA==",
       "cpu": [
         "arm64"
       ],
@@ -3269,9 +3269,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.4.tgz",
-      "integrity": "sha512-8QftwPEW37XxXoAwsn+nXlodKWHfpMaSvt81W43Wh8dv0gkheD+30ezWMcFGHLI71KiWmHK5PSQbTQGUiidvLQ==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.4.tgz",
+      "integrity": "sha512-l/kMG+z6MB+fKA9KdtyprkTQ1ihlJcBh66cf0HvqGP+rXBbOXX0dpJatjZbHeunvEHoBBS69GYQG5ry78JMy3g==",
       "cpu": [
         "arm64"
       ],
@@ -3284,9 +3284,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.4.tgz",
-      "integrity": "sha512-/s/Pme3VKfZAfISlYVq2hzFS8AcAIOTnoKupc/j4WlvF6GQ0VouS2Q2KEgPuO1eMBwakWPB1aYFIA4VNVh667A==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.4.tgz",
+      "integrity": "sha512-BapIFZ3ZRnvQ1uWbmqEGJuPT9cgLwvKtxhK/L2t4QYO7l+/DxXuIGjvp1x8rvfa/x1FFSsipERZK70pewbtJtw==",
       "cpu": [
         "x64"
       ],
@@ -3299,9 +3299,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.4.tgz",
-      "integrity": "sha512-m8z/6Fyal4L9Bnlxde5g2Mfa1Z7dasMQyhEhskDATpqr+Y0mjOBZcXQ7G5U+vgL22cI4T7MfvgtrM2jdopqWaw==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.4.tgz",
+      "integrity": "sha512-mqVxTwk4XuBl49qn2A5UmzFImoL1iLm0KQQwtdRJRKl21ylQwwGCxJtIYo2rbfkZHoSKlh/YgztY0qH3wG1xIg==",
       "cpu": [
         "x64"
       ],
@@ -3314,9 +3314,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.4.tgz",
-      "integrity": "sha512-7Wv4PRiWIAWbm5XrGz3D8HUkCVDMMz9igffZG4NB1p4u1KoItwx9qjATHz88kwCEal/HXmbShucaslXCQXUM5w==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.4.tgz",
+      "integrity": "sha512-xzxF4ErcumXjO2Pvg/wVGrtr9QQJLk3IyQX1ddAC/fi6/5jZCZ9xpuL9Tzc4KPWMFq8GGWFVDMshZOdHGdkvag==",
       "cpu": [
         "arm64"
       ],
@@ -3329,9 +3329,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.4.tgz",
-      "integrity": "sha512-zLeNEAPULsl0phfGb4kdzF/cAVIfaC7hY+kt0/d+y9mzcZHsMS3hAS829WbJ31DkSlVKQeHEjZHIdhN+Pg7Gyg==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.4.tgz",
+      "integrity": "sha512-WZiz8OdbkpRw6/IU/lredZWKKZopUMhcI2F+XiMAcPja0uZYdMTZQRoQ0WZcvinn9xZAidimE7tN9W5v9Yyfyw==",
       "cpu": [
         "ia32"
       ],
@@ -3344,9 +3344,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.4.tgz",
-      "integrity": "sha512-yEh2+R8qDlDCjxVpzOTEpBLQTEFAcP2A8fUFLaWNap9GitYKkKv1//y2S6XY6zsR4rCOPRpU7plYDR+az2n30A==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.4.tgz",
+      "integrity": "sha512-4Rto21sPfw555sZ/XNLqfxDUNeLhNYGO2dlPqsnuCg8N8a2a9u1ltqBOPQ4vj1Gf7eJC0W2hHG2eYUHuiXgY2w==",
       "cpu": [
         "x64"
       ],
@@ -5197,7 +5197,8 @@
     },
     "node_modules/asap": {
       "version": "2.0.6",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
     },
     "node_modules/asn1": {
       "version": "0.2.6",
@@ -5486,7 +5487,8 @@
     },
     "node_modules/base16": {
       "version": "1.0.0",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz",
+      "integrity": "sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ=="
     },
     "node_modules/base64-arraybuffer": {
       "version": "0.1.4",
@@ -5824,7 +5826,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001563",
+      "version": "1.0.30001605",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001605.tgz",
+      "integrity": "sha512-nXwGlFWo34uliI9z3n6Qc0wZaf7zaZWA1CPZ169La5mV3I/gem7bst0vr5XQH5TJXZIMfDeZyOrZnSlVzKxxHQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -5838,8 +5842,7 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ],
-      "license": "CC-BY-4.0"
+      ]
     },
     "node_modules/caseless": {
       "version": "0.12.0",
@@ -6330,7 +6333,8 @@
     },
     "node_modules/cross-fetch": {
       "version": "3.1.8",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
+      "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==",
       "dependencies": {
         "node-fetch": "^2.6.12"
       }
@@ -8101,14 +8105,16 @@
     },
     "node_modules/fbemitter": {
       "version": "3.0.0",
-      "license": "BSD-3-Clause",
+      "resolved": "https://registry.npmjs.org/fbemitter/-/fbemitter-3.0.0.tgz",
+      "integrity": "sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==",
       "dependencies": {
         "fbjs": "^3.0.0"
       }
     },
     "node_modules/fbjs": {
       "version": "3.0.5",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.5.tgz",
+      "integrity": "sha512-ztsSx77JBtkuMrEypfhgc3cI0+0h+svqeie7xHbh1k/IKdcydnvadp/mUaGgjAOXQmQSxsqgaRhS3q9fy+1kxg==",
       "dependencies": {
         "cross-fetch": "^3.1.5",
         "fbjs-css-vars": "^1.0.0",
@@ -8121,7 +8127,8 @@
     },
     "node_modules/fbjs-css-vars": {
       "version": "1.0.2",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
+      "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
     },
     "node_modules/fd-slicer": {
       "version": "1.1.0",
@@ -8584,10 +8591,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/glob-to-regexp": {
-      "version": "0.4.1",
-      "license": "BSD-2-Clause"
-    },
     "node_modules/global": {
       "version": "4.4.0",
       "license": "MIT",
@@ -11795,7 +11798,8 @@
     },
     "node_modules/lodash.curry": {
       "version": "4.1.1",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz",
+      "integrity": "sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA=="
     },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
@@ -11803,7 +11807,8 @@
     },
     "node_modules/lodash.flow": {
       "version": "3.5.0",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz",
+      "integrity": "sha512-ff3BX/tSioo+XojX4MOsOMhJw0nZoUEF011LX8g8d3gvjVbxd89cCio4BCXronjxcTUIJUoqKEUA+n4CqvvRPw=="
     },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
@@ -13084,18 +13089,17 @@
       }
     },
     "node_modules/next": {
-      "version": "14.0.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.0.4.tgz",
-      "integrity": "sha512-qbwypnM7327SadwFtxXnQdGiKpkuhaRLE2uq62/nRul9cj9KhQ5LhHmlziTNqUidZotw/Q1I9OjirBROdUJNgA==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.1.4.tgz",
+      "integrity": "sha512-1WTaXeSrUwlz/XcnhGTY7+8eiaFvdet5z9u3V2jb+Ek1vFo0VhHKSAIJvDWfQpttWjnyw14kBeq28TPq7bTeEQ==",
       "dependencies": {
-        "@next/env": "14.0.4",
+        "@next/env": "14.1.4",
         "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
-        "caniuse-lite": "^1.0.30001406",
+        "caniuse-lite": "^1.0.30001579",
         "graceful-fs": "^4.2.11",
         "postcss": "8.4.31",
-        "styled-jsx": "5.1.1",
-        "watchpack": "2.4.0"
+        "styled-jsx": "5.1.1"
       },
       "bin": {
         "next": "dist/bin/next"
@@ -13104,15 +13108,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.0.4",
-        "@next/swc-darwin-x64": "14.0.4",
-        "@next/swc-linux-arm64-gnu": "14.0.4",
-        "@next/swc-linux-arm64-musl": "14.0.4",
-        "@next/swc-linux-x64-gnu": "14.0.4",
-        "@next/swc-linux-x64-musl": "14.0.4",
-        "@next/swc-win32-arm64-msvc": "14.0.4",
-        "@next/swc-win32-ia32-msvc": "14.0.4",
-        "@next/swc-win32-x64-msvc": "14.0.4"
+        "@next/swc-darwin-arm64": "14.1.4",
+        "@next/swc-darwin-x64": "14.1.4",
+        "@next/swc-linux-arm64-gnu": "14.1.4",
+        "@next/swc-linux-arm64-musl": "14.1.4",
+        "@next/swc-linux-x64-gnu": "14.1.4",
+        "@next/swc-linux-x64-musl": "14.1.4",
+        "@next/swc-win32-arm64-msvc": "14.1.4",
+        "@next/swc-win32-ia32-msvc": "14.1.4",
+        "@next/swc-win32-x64-msvc": "14.1.4"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -14379,7 +14383,8 @@
     },
     "node_modules/promise": {
       "version": "7.3.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
       "dependencies": {
         "asap": "~2.0.3"
       }
@@ -14475,7 +14480,8 @@
     },
     "node_modules/pure-color": {
       "version": "1.3.0",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
+      "integrity": "sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA=="
     },
     "node_modules/pure-rand": {
       "version": "6.0.4",
@@ -14561,7 +14567,8 @@
     },
     "node_modules/react": {
       "version": "18.2.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -14571,7 +14578,8 @@
     },
     "node_modules/react-base16-styling": {
       "version": "0.6.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.6.0.tgz",
+      "integrity": "sha512-yvh/7CArceR/jNATXOKDlvTnPKPmGZz7zsenQ3jUwLzHkNUR0CvY3yGYJbWJ/nnxsL8Sgmt5cO3/SILVuPO6TQ==",
       "dependencies": {
         "base16": "^1.0.0",
         "lodash.curry": "^4.0.1",
@@ -14594,7 +14602,8 @@
     },
     "node_modules/react-dom": {
       "version": "18.2.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -14689,7 +14698,8 @@
     },
     "node_modules/react-json-view": {
       "version": "1.21.3",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/react-json-view/-/react-json-view-1.21.3.tgz",
+      "integrity": "sha512-13p8IREj9/x/Ye4WI/JpjhoIwuzEgUAtgJZNBJckfzJt1qyh24BdTm6UQNGnyTq9dapQdrqvquZTo3dz1X6Cjw==",
       "dependencies": {
         "flux": "^4.0.1",
         "react-base16-styling": "^0.6.0",
@@ -14703,7 +14713,8 @@
     },
     "node_modules/react-json-view/node_modules/flux": {
       "version": "4.0.4",
-      "license": "BSD-3-Clause",
+      "resolved": "https://registry.npmjs.org/flux/-/flux-4.0.4.tgz",
+      "integrity": "sha512-NCj3XlayA2UsapRpM7va6wU1+9rE5FIL7qoMcmxWHRzbp0yujihMBm9BBHZ1MDIk5h5o2Bl6eGiCe8rYELAmYw==",
       "dependencies": {
         "fbemitter": "^3.0.0",
         "fbjs": "^3.0.1"
@@ -14916,7 +14927,8 @@
     },
     "node_modules/react-textarea-autosize": {
       "version": "8.5.3",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz",
+      "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
         "use-composed-ref": "^1.3.0",
@@ -15549,7 +15561,8 @@
     },
     "node_modules/setimmediate": {
       "version": "1.0.5",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
     },
     "node_modules/sha.js": {
       "version": "2.4.11",
@@ -16698,6 +16711,8 @@
     },
     "node_modules/ua-parser-js": {
       "version": "1.0.37",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
+      "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -16712,7 +16727,6 @@
           "url": "https://github.com/sponsors/faisalman"
         }
       ],
-      "license": "MIT",
       "engines": {
         "node": "*"
       }
@@ -16929,14 +16943,16 @@
     },
     "node_modules/use-composed-ref": {
       "version": "1.3.0",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.3.0.tgz",
+      "integrity": "sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/use-isomorphic-layout-effect": {
       "version": "1.1.2",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       },
@@ -16948,7 +16964,8 @@
     },
     "node_modules/use-latest": {
       "version": "1.2.1",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/use-latest/-/use-latest-1.2.1.tgz",
+      "integrity": "sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==",
       "dependencies": {
         "use-isomorphic-layout-effect": "^1.1.1"
       },
@@ -17160,17 +17177,6 @@
         "loose-envify": "^1.0.0"
       }
     },
-    "node_modules/watchpack": {
-      "version": "2.4.0",
-      "license": "MIT",
-      "dependencies": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "dev": true,
diff --git a/package.json b/package.json
index 9a33d55d9..d210b4e99 100644
--- a/package.json
+++ b/package.json
@@ -87,7 +87,7 @@
     "markdown-it": "^13.0.2",
     "markdown-to-jsx": "^7.3.2",
     "material-ui-phone-number": "^3.0.0",
-    "next": "^14.0.4",
+    "next": "^14.1.4",
     "notistack": "^3.0.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

From 45fd4c9fee80646f8711705006462fa796157c9a Mon Sep 17 00:00:00 2001
From: "Japheth Louie M. Gofredo" <83058948+japhethLG@users.noreply.github.com>
Date: Fri, 5 Apr 2024 22:19:33 +0800
Subject: [PATCH 5/9] fix: login meta title and description issue (#2421)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context. List any dependencies that
are required for this change.

Fixes #2416

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)

# 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

Please add screenshots or recording if applicable

![image](https://github.com/zesty-io/website/assets/83058948/b8adc4be-7b67-40ea-bccd-14eb2809c6dc)

**fixed**

![image](https://github.com/zesty-io/website/assets/83058948/df68f116-a1ea-48ab-b1d7-d537e4a63b74)
---
 src/pages/login/index.js | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/pages/login/index.js b/src/pages/login/index.js
index 050e6cf8c..365518cd2 100644
--- a/src/pages/login/index.js
+++ b/src/pages/login/index.js
@@ -16,14 +16,15 @@ const site = 'https://www.zesty.io';
 const Login = (props) => {
   const router = useRouter();
   const content = props.data.data[0].content;
+  const loginContent = props.loginData.data[0].content;
   const ogimage = content?.feature_image?.data[0]?.url;
 
   const preview = ogimage.replace(
     'kfg6bckb.media.zestyio.com',
     'kfg6bckb.media.zesty.site',
   );
-  const title = content.seo_meta_title;
-  const description = content.seo_meta_description;
+  const title = loginContent.seo_meta_title;
+  const description = loginContent.seo_meta_description;
   const canonicalURL = site + router.asPath;
 
   const isLoggedIn = useIsLoggedIn();
@@ -66,22 +67,31 @@ const Login = (props) => {
 };
 
 export async function getServerSideProps({ req, res }) {
-  const isProd = process.env.PRODUCTION === 'true' ? true : false;
+  const isProd = process.env.PRODUCTION === 'true';
+  const baseUrl = isProd
+    ? 'https://www.zesty.io'
+    : 'https://kfg6bckb-dev.webengine.zesty.io';
 
-  let url = 'https://www.zesty.io/-/instant/6-90fbdcadfc-4lc0s5.json';
-  if (!isProd) {
-    url =
-      'https://kfg6bckb-dev.webengine.zesty.io/-/instant/6-90fbdcadfc-4lc0s5.json';
-  }
+  const url = `${baseUrl}/-/instant/6-90fbdcadfc-4lc0s5.json`;
+  const loginUrl = `${baseUrl}/-/instant/6-ccb9ca9fc1-06fhhc.json`;
 
   let isAuthenticated =
     (await isUserAuthenticated(req, true, isProd)) || getIsAuthenticated(res);
-  const response = await fetch(url, { cache: 'no-cache' });
-  const data = await response.json();
+
+  const [response, loginResponse] = await Promise.all([
+    fetch(url, { cache: 'no-cache' }),
+    fetch(loginUrl, { cache: 'no-cache' }),
+  ]);
+
+  const [data, loginData] = await Promise.all([
+    response.json(),
+    loginResponse.json(),
+  ]);
 
   return {
     props: {
       data,
+      loginData,
       isAuthenticated,
     },
   };

From cf02783641d1dc29db127fdb833e64c31e71b451 Mon Sep 17 00:00:00 2001
From: Arzl James <70579069+arzljames@users.noreply.github.com>
Date: Mon, 8 Apr 2024 21:58:12 +0800
Subject: [PATCH 6/9] =?UTF-8?q?fix(slashimageherowithcta.js):=20conditiona?=
 =?UTF-8?q?l=20rendering=20when=20cta=20is=20avai=E2=80=A6=20(#2428)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Description

Remove blank CTA button. Mindshare tag page should not contain a CTA
button based on the schema structure from the manager.

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)

# Screenshots / Screen recording

![image](https://github.com/zesty-io/website/assets/70579069/ffab6c68-345c-42ac-82eb-d4851b80017f)
---
 .../heroes/SlashImageHeroWithCta/SlashImageHeroWithCta.js      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/blocks/heroes/SlashImageHeroWithCta/SlashImageHeroWithCta.js b/src/blocks/heroes/SlashImageHeroWithCta/SlashImageHeroWithCta.js
index 210110a96..b5de3ca12 100644
--- a/src/blocks/heroes/SlashImageHeroWithCta/SlashImageHeroWithCta.js
+++ b/src/blocks/heroes/SlashImageHeroWithCta/SlashImageHeroWithCta.js
@@ -109,6 +109,7 @@ const Hero = ({
           </>
         )}
 
+
         <Stack
           sx={{
             display: 'flex',
@@ -126,7 +127,7 @@ const Hero = ({
               {cta_left || FillerContent.cta}
             </Button>
           ) : (
-            <TryFreeButton
+            cta_left && <TryFreeButton
               text={cta_left}
               variant="contained"
               size="large"

From b2e20365a680349c39bf6e4e84ab74851fea0fb5 Mon Sep 17 00:00:00 2001
From: "Japheth Louie M. Gofredo" <83058948+japhethLG@users.noreply.github.com>
Date: Fri, 12 Apr 2024 23:18:54 +0800
Subject: [PATCH 7/9] feat: Add the next JS playlist to the Learning Hub
 (#2430)

# Description

Added a separate 'Featured Tutorials' section under 'Featured Videos'
and 'All Videos'.

Fixes #2422

## 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


![image](https://github.com/zesty-io/website/assets/83058948/e02e83c8-53cc-4f05-9c9a-20fca072153e)
---
 .../marketing/LearningHub/FeaturedVideos.js        |  5 ++---
 src/components/marketing/LearningHub/Filters.js    |  2 ++
 src/views/zesty/LearningHub.js                     | 14 +++++++++++++-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/marketing/LearningHub/FeaturedVideos.js b/src/components/marketing/LearningHub/FeaturedVideos.js
index 3d8518406..07b888dac 100644
--- a/src/components/marketing/LearningHub/FeaturedVideos.js
+++ b/src/components/marketing/LearningHub/FeaturedVideos.js
@@ -15,7 +15,7 @@ import VideoCard from './FeaturedCard';
 import { useContext } from 'react';
 import { LearningHubVideosContext } from './context/LearningHubVideosContext';
 
-const FeaturedVideos = ({ featuredVideos = [] }) => {
+const FeaturedVideos = ({ title, featuredVideos = [] }) => {
   const { searchKey, selectedTags } = useContext(LearningHubVideosContext);
 
   /************************************************
@@ -30,7 +30,6 @@ const FeaturedVideos = ({ featuredVideos = [] }) => {
       <Box
         hidden={searchKey !== '' || selectedTags !== '' ? true : false}
         sx={{
-          pt: 10,
           px: 4,
         }}
         component="section"
@@ -45,7 +44,7 @@ const FeaturedVideos = ({ featuredVideos = [] }) => {
               textAlign: isExtraSmall ? 'center' : 'text-left',
             }}
           >
-            Featured Videos
+            {title}
           </Typography>
           <Grid container spacing={2}>
             {featuredVideos?.map((item, idx) => {
diff --git a/src/components/marketing/LearningHub/Filters.js b/src/components/marketing/LearningHub/Filters.js
index b0dd84a94..7998df460 100644
--- a/src/components/marketing/LearningHub/Filters.js
+++ b/src/components/marketing/LearningHub/Filters.js
@@ -49,6 +49,7 @@ const Filters = ({ featuredCards, tags }) => {
               component="a"
               p={1}
               sx={{
+                cursor: 'pointer',
                 textDecoration: 'none',
                 width: '100%',
                 maxWidth: isTablet ? 'auto' : 550,
@@ -72,6 +73,7 @@ const Filters = ({ featuredCards, tags }) => {
                   ? theme.palette.zesty.zestyBlue
                   : theme.palette.background.paper,
               }}
+              onClick={() => setSelectedTags(item.title)}
             >
               <Typography
                 sx={{
diff --git a/src/views/zesty/LearningHub.js b/src/views/zesty/LearningHub.js
index c5858ed63..3a439aed5 100644
--- a/src/views/zesty/LearningHub.js
+++ b/src/views/zesty/LearningHub.js
@@ -24,6 +24,7 @@
  * Images API: https://zesty.org/services/media-storage-micro-dam/on-the-fly-media-optimization-and-dynamic-image-manipulation
  */
 
+import { Box } from '@mui/material';
 import Hero from 'components/marketing/LearningHub/Hero';
 import LearningHubVideosProvider from 'components/marketing/LearningHub/context/LearningHubVideosContext';
 import FeaturedVideos from 'components/marketing/LearningHub/FeaturedVideos';
@@ -55,8 +56,19 @@ function LearningHub({ content }) {
     <>
       <LearningHubVideosProvider inititalEntities={videos?.data}>
         <Hero {...heroProps} />
-        <FeaturedVideos featuredVideos={content?.featured_videos?.data} />
+        <Box sx={{ pt: 10 }}>
+          <FeaturedVideos
+            title="Featured Videos"
+            featuredVideos={content?.featured_videos?.data}
+          />
+        </Box>
         <MainVideos withPagination={true} />
+        <Box sx={{ pb: 10 }}>
+          <FeaturedVideos
+            title="Featured Tutorials"
+            featuredVideos={content?.featured_tutorials?.data}
+          />
+        </Box>
       </LearningHubVideosProvider>
     </>
   );

From f63be9c09ef4233e6e37762d27be75c13cd2cd73 Mon Sep 17 00:00:00 2001
From: "Japheth Louie M. Gofredo" <83058948+japhethLG@users.noreply.github.com>
Date: Sat, 13 Apr 2024 06:47:53 +0800
Subject: [PATCH 8/9] feat: Create drag and drop page designer under Key
 Features. (#2431)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context. List any dependencies that
are required for this change.

Fixes #2426

## 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


![image](https://github.com/zesty-io/website/assets/83058948/5ad068ce-2b20-4abf-8cd7-38b242ace093)
---
 src/components/globals/constants.js           |  42 +++++
 src/components/marketing/Freestyle/FAQs.js    |  38 ++++
 src/components/marketing/Freestyle/Hero.js    | 171 ++++++++++++++++++
 .../marketing/Freestyle/SimpleCardLogo.js     | 142 +++++++++++++++
 .../marketing/Freestyle/SingleTesimonial.js   | 145 +++++++++++++++
 .../marketing/Freestyle/TechStack.js          | 162 +++++++++++++++++
 src/components/marketing/Freestyle/UseCase.js | 162 +++++++++++++++++
 src/views/zesty/Freestyle.js                  | 135 ++++++++++++++
 src/views/zesty/index.js                      |   2 +
 9 files changed, 999 insertions(+)
 create mode 100644 src/components/marketing/Freestyle/FAQs.js
 create mode 100644 src/components/marketing/Freestyle/Hero.js
 create mode 100644 src/components/marketing/Freestyle/SimpleCardLogo.js
 create mode 100644 src/components/marketing/Freestyle/SingleTesimonial.js
 create mode 100644 src/components/marketing/Freestyle/TechStack.js
 create mode 100644 src/components/marketing/Freestyle/UseCase.js
 create mode 100644 src/views/zesty/Freestyle.js

diff --git a/src/components/globals/constants.js b/src/components/globals/constants.js
index b0f667f99..94baeb796 100644
--- a/src/components/globals/constants.js
+++ b/src/components/globals/constants.js
@@ -665,6 +665,39 @@ export const flyoutNavigation = [
       model: 'sub_nav2022',
       totalItems: 3,
       data: [
+        {
+          nav_item_name: 'Drag and Drop Page Designer',
+          page_link: {
+            type: 'relationship',
+            model: 'freestyle',
+            totalItems: 1,
+            data: [{}],
+          },
+          external_link_if_needed: '/freestyle',
+          parent_nav_item: {
+            type: 'relationship',
+            model: 'sub_nav2022',
+            totalItems: 1,
+            data: [
+              {
+                message: 'max hydration depth hit',
+              },
+            ],
+          },
+          icon_image: {
+            type: 'images',
+            totalItems: 1,
+            data: [
+              {
+                type: 'image',
+                zuid: '3-11748308-nvd2g3',
+                url: 'https://kfg6bckb.media.zestyio.com/website-design.png',
+              },
+            ],
+          },
+          sort_order: '0',
+          main_or_blue_secondary_item: '1',
+        },
         {
           nav_item_name: 'SEO',
           page_link: {
@@ -11415,6 +11448,15 @@ export const navigationCustom = [
     zuid: '7-cc809dacb1-hxjshj',
     children: [],
   },
+  {
+    external: false,
+    parentZUID: null,
+    sort: '1',
+    url: '/freestyle/',
+    title: 'Freestyle',
+    zuid: '7-d0c28d93ea-vqbq8j',
+    children: [],
+  },
   {
     external: false,
     parentZUID: '7-bca0ada1df-1k1b7g',
diff --git a/src/components/marketing/Freestyle/FAQs.js b/src/components/marketing/Freestyle/FAQs.js
new file mode 100644
index 000000000..be6ab9158
--- /dev/null
+++ b/src/components/marketing/Freestyle/FAQs.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Container from 'components/Container';
+
+const FAQs = ({ faqsData }) => {
+  return (
+    <Container>
+      <Box sx={{ px: 4 }}>
+        <Box marginBottom={4}>
+          <Typography fontWeight={700} variant={'h4'} align={'center'}>
+            Frequently asked questions
+          </Typography>
+        </Box>
+        {faqsData.length > 0 && (
+          <Grid container spacing={4}>
+            {faqsData.map((item, i) => (
+              <Grid key={i} item xs={12} sm={6} md={4}>
+                <Typography variant={'h6'} fontWeight={600} gutterBottom>
+                  {item.question}
+                </Typography>
+                <Box
+                  color="text.secondary"
+                  dangerouslySetInnerHTML={{
+                    __html: item.answer,
+                  }}
+                ></Box>
+              </Grid>
+            ))}
+          </Grid>
+        )}
+      </Box>
+    </Container>
+  );
+};
+
+export default FAQs;
diff --git a/src/components/marketing/Freestyle/Hero.js b/src/components/marketing/Freestyle/Hero.js
new file mode 100644
index 000000000..be4ab4a1a
--- /dev/null
+++ b/src/components/marketing/Freestyle/Hero.js
@@ -0,0 +1,171 @@
+import { Box, Button, Grid, Stack, Typography } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
+import MuiMarkdown from 'markdown-to-jsx';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import { useEffect, useState } from 'react';
+
+const Hero = ({
+  overline = '',
+  description,
+  heroImage = 'https://kfg6bckb.media.zestyio.com/Hero-Image-2.webp',
+  primaryCta = 'Talk to Us',
+  primaryCtaLink = '/demo?ab=light',
+  secondaryCtaText,
+  secondaryCtaLink,
+}) => {
+  const theme = useTheme();
+  const isLg = useMediaQuery(theme.breakpoints.up('lg'), {
+    defaultMatches: true,
+  });
+
+  const [heroList, setHeroList] = useState([]);
+
+  useEffect(() => {
+    const regex = /<li>(.*?)<\/li>/g;
+    const liTextArray = [];
+
+    // Use a loop to iterate through matches and extract the li text content
+    let match;
+    while ((match = regex.exec(description)) !== null) {
+      liTextArray.push(match[1]);
+    }
+
+    setHeroList([...liTextArray]);
+  }, []);
+
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        overflow: 'hidden',
+        display: 'flex',
+        justifyContent: 'center',
+      }}
+    >
+      <Grid
+        container
+        px={{ xs: 2, tablet: 4, lg: 14 }}
+        spacing={{ lg: 8 }}
+        position="relative"
+        maxWidth={1500}
+      >
+        <Grid
+          item
+          xs={12}
+          lg={6}
+          mb={4}
+          sx={(theme) => ({
+            [theme.breakpoints.up('xl')]: {
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            },
+          })}
+        >
+          <Stack py={{ lg: '92px' }}>
+            <Typography
+              color="primary"
+              variant="overline"
+              sx={{ fontWeight: '600', fontSize: '14px' }}
+            >
+              {overline}
+            </Typography>
+            <Stack mb={4}>
+              <MuiMarkdown
+                options={{
+                  overrides: {
+                    h1: {
+                      component: Typography,
+                      props: {
+                        fontSize: '44px',
+                        lineHeight: '48px',
+                        letterSpacing: '-0.02em',
+                        fontWeight: '800',
+                        color: 'text.primary',
+                      },
+                    },
+                    p: {
+                      component: Typography,
+                      props: {
+                        fontSize: '18px',
+                        lineHeight: '28px',
+                        color: 'text.secondary',
+                        mt: '20px',
+                      },
+                    },
+                    li: {
+                      props: {
+                        style: {
+                          display: 'none',
+                        },
+                      },
+                    },
+                  },
+                }}
+              >
+                {description}
+              </MuiMarkdown>
+
+              <Stack rowGap="8px" mt={2}>
+                {heroList?.length !== 0 &&
+                  heroList.map((item, index) => {
+                    return (
+                      <Stack key={index} direction="row" columnGap="12px">
+                        <CheckRoundedIcon color="primary" />
+                        <Typography fontWeight={400} color="text.secondary">
+                          {item}
+                        </Typography>
+                      </Stack>
+                    );
+                  })}
+              </Stack>
+            </Stack>
+
+            <Stack
+              spacing="12px"
+              mb={4}
+              direction={{
+                xs: 'column',
+                tablet: 'row',
+              }}
+            >
+              <Button
+                href={primaryCtaLink}
+                variant="contained"
+                color="primary"
+                size={isLg ? 'extraLarge' : 'large'}
+                title={primaryCta}
+              >
+                Get Started
+              </Button>
+              {secondaryCtaText && (
+                <Button
+                  href={secondaryCtaLink}
+                  variant="outlined"
+                  color="primary"
+                  size={isLg ? 'extraLarge' : 'large'}
+                  title={secondaryCtaText}
+                >
+                  {secondaryCtaText}
+                </Button>
+              )}
+            </Stack>
+          </Stack>
+        </Grid>
+        <Grid item xs={12} lg={6} sx={{ position: 'relative', zIndex: 1 }}>
+          <img
+            loading="eager"
+            src={heroImage}
+            width="100%"
+            height="100%"
+            alt="Zesty Image"
+            style={{ objectFit: 'contain ' }}
+          />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default Hero;
diff --git a/src/components/marketing/Freestyle/SimpleCardLogo.js b/src/components/marketing/Freestyle/SimpleCardLogo.js
new file mode 100644
index 000000000..74e62f2c2
--- /dev/null
+++ b/src/components/marketing/Freestyle/SimpleCardLogo.js
@@ -0,0 +1,142 @@
+// Mui Import
+
+import { Box, Card, CardContent, Typography } from '@mui/material';
+import MuiMarkdown from 'markdown-to-jsx';
+import { useTheme } from '@mui/material/styles';
+import FillerContent from 'components/globals/FillerContent';
+
+// Components Import
+import Container from 'blocks/container/Container';
+import ZestyImage from 'blocks/Image/ZestyImage';
+
+/**
+ *
+ * @param {array} logoItems - array of logo items
+ * @param {string} heading_text - logo heading text
+ * @param {boolean} textOutside - determine if heading text will appear outside the card or inside
+ * @param {boolean} invertLogo - invert logo color on darkmode default true
+ * @param {string} background - background color default to transparent
+ *
+ */
+
+const SimpleCardLogo = ({
+  logoItems = FillerContent.logos,
+  heading_text = '',
+  textOutside = false,
+  maxWidth = 1500,
+  variant = 'contained',
+  invertLogo = true,
+  background = 'transparent',
+  marginTop = 8,
+}) => {
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === 'dark';
+
+  // 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, mb: 4 }}>
+      <Container sx={{ maxWidth: maxWidth }}>
+        {textOutside && (
+          <MuiMarkdown
+            options={{
+              overrides: {
+                h2: {
+                  component: Typography,
+                  props: {
+                    variant: 'h2',
+                    component: 'h2',
+                    sx: {
+                      color: 'text.primary',
+                      fontWeight: 'bold',
+                      textAlign: 'center',
+                      mb: 4,
+                    },
+                  },
+                },
+              },
+            }}
+          >
+            {heading_text}
+          </MuiMarkdown>
+        )}
+        <Card
+          variant={variant}
+          sx={{
+            py: 2,
+            border: variant === 'outlined' ? 'none' : '',
+            background: background,
+          }}
+        >
+          <CardContent>
+            {!textOutside && (
+              <MuiMarkdown
+                options={{
+                  overrides: {
+                    h2: {
+                      component: Typography,
+                      props: {
+                        variant: 'h2',
+                        component: 'h2',
+                        sx: {
+                          color: 'text.secondary',
+                          fontWeight: 'bold',
+                          textAlign: 'center',
+                          mb: 4,
+                        },
+                      },
+                    },
+                  },
+                }}
+              >
+                {heading_text}
+              </MuiMarkdown>
+            )}
+            <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 SimpleCardLogo;
diff --git a/src/components/marketing/Freestyle/SingleTesimonial.js b/src/components/marketing/Freestyle/SingleTesimonial.js
new file mode 100644
index 000000000..ffd40d6d3
--- /dev/null
+++ b/src/components/marketing/Freestyle/SingleTesimonial.js
@@ -0,0 +1,145 @@
+import { Box, Stack, Typography } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
+
+const witnessImage = 'https://kfg6bckb.media.zestyio.com/Ben.webp',
+  witnessLogo =
+    'https://kfg6bckb.media.zestyio.com/bluePixelLogo.H1OTqyvkp.svg';
+
+const SingleTestimonial = ({
+  witness = witnessImage,
+  logo = witnessLogo,
+  name = 'Ben Johnson',
+  role = 'Director of Technology Operations',
+  header = `Our team uses Zesty to support creative, complex campaigns for enterprise clients with global audiences.`,
+  quote = `"We’ve worked with several different brands using Zesty, and the reason we keep coming back to use them is consistency. The platform is reliable, the support is available 24/7, and our suggestions for feature additions actually help drive product direction. 
+
+When working with clients like Sony, we need to be using secure, enterprise-grade software that’s still agile enough to allow us to move quickly with the market. Zesty allows us to do that, and after over seven years of partnership, we’re excited to continue growing with an amazing technology partner.”`,
+}) => {
+  const theme = useTheme();
+  const isTablet = useMediaQuery(theme.breakpoints.up('tablet'), {
+    defaultMatches: true,
+  });
+
+  const isLg = useMediaQuery(theme.breakpoints.up('lg'), {
+    defaultMatches: true,
+  });
+
+  return (
+    <Stack
+      sx={(theme) => ({
+        [theme.breakpoints.up('xs')]: {
+          py: 4,
+          px: 2,
+        },
+        [theme.breakpoints.up('tablet')]: {
+          py: 6,
+          px: 4,
+        },
+        [theme.breakpoints.up('lg')]: {
+          py: 8,
+          px: 14,
+        },
+        [theme.breakpoints.up('xl')]: {
+          maxWidth: theme.maxWidth,
+          mx: 'auto',
+        },
+      })}
+    >
+      <Stack
+        bgcolor="grey.900"
+        borderRadius="32px"
+        direction={isLg ? 'row' : 'column'}
+        spacing={isLg ? 4 : 0}
+        sx={(theme) => ({
+          [theme.breakpoints.up('xs')]: {
+            p: 4,
+          },
+          [theme.breakpoints.up('tablet')]: {
+            p: 6,
+          },
+        })}
+      >
+        <Stack
+          mb={4}
+          alignItems="center"
+          sx={{
+            width: {
+              lg: '363px',
+            },
+          }}
+        >
+          <Box
+            sx={(theme) => ({
+              display: 'flex',
+              justifyContent: 'center',
+              [theme.breakpoints.up('xs')]: {
+                objectFit: 'contain',
+                width: '100%',
+                height: '100%',
+                mb: 4,
+              },
+              [theme.breakpoints.up('mobile')]: {
+                width: '303.14px',
+                height: '280px',
+              },
+              [theme.breakpoints.up('lg')]: {
+                width: '393px',
+                height: '363px',
+              },
+            })}
+          >
+            <img
+              style={{ borderRadius: '50%' }}
+              src={witness}
+              loading="lazy"
+              alt="zesty-image"
+              width={280}
+              height={280}
+            />
+          </Box>
+          <Typography variant="h5" component="p" color="white" fontWeight={600}>
+            {name}
+          </Typography>
+          <Typography color="white" fontWeight={700} mb="20px">
+            {role}
+          </Typography>
+          {logo && (
+            <Box
+              component="img"
+              alt="zesty-image"
+              loading="lazy"
+              width="132.53px"
+              height="48px"
+              src={logo}
+            />
+          )}
+        </Stack>
+
+        <Stack alignItems="start" justifyContent={isLg ? 'center' : 'block'}>
+          <Typography
+            variant={isTablet ? 'h1' : 'h3'}
+            color="white"
+            fontWeight={600}
+            mb={isTablet ? 4 : 3}
+          >
+            {header}
+          </Typography>
+
+          <Box borderLeft="4px solid white" p={2}>
+            <Typography
+              variant={isTablet ? 'body1' : 'body2'}
+              color="white"
+              style={{ whiteSpace: 'pre-line' }}
+              dangerouslySetInnerHTML={{
+                __html: quote,
+              }}
+            ></Typography>
+          </Box>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default SingleTestimonial;
diff --git a/src/components/marketing/Freestyle/TechStack.js b/src/components/marketing/Freestyle/TechStack.js
new file mode 100644
index 000000000..b78f6c925
--- /dev/null
+++ b/src/components/marketing/Freestyle/TechStack.js
@@ -0,0 +1,162 @@
+// MUI Imports
+import { Box, Container, Typography, Grid } from '@mui/material';
+import MuiMarkdown from 'markdown-to-jsx';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import FillerContent from 'components/globals/FillerContent';
+import ZestyImage from 'blocks/Image/ZestyImage';
+import DemoCta from 'components/cta/DemoCta';
+
+const TechStack = ({
+  headerColor,
+  text_content,
+  logos,
+  cta_text,
+  cta_link,
+  textHighlight,
+}) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  // check if features_header richtext if not convert it to richtext format for consistency
+  const htmlCheck = new RegExp('<("[^"]*"|\'[^\']*\'|[^\'">])*>');
+  const isRichText = htmlCheck.test(text_content);
+
+  if (!isRichText) {
+    text_content = `<h2>${text_content}</h2>`;
+  }
+
+  return (
+    <Box
+      component="section"
+      sx={{
+        px: 4,
+        py: 10,
+      }}
+    >
+      <Container>
+        <Grid container>
+          <Grid item sm={12} md={6}>
+            <MuiMarkdown
+              options={{
+                overrides: {
+                  h2: {
+                    component: Typography,
+                    props: {
+                      variant: 'h2',
+                      component: 'h2',
+                      sx: {
+                        fontWeight: 'bold',
+                        color: headerColor
+                          ? headerColor
+                          : theme.palette.text.primary,
+                      },
+                    },
+                  },
+                  h3: {
+                    component: Typography,
+                    props: {
+                      variant: 'h4',
+                      component: 'h3',
+                      sx: {
+                        mt: 2,
+                        fontWeight: 'bold',
+                        color: theme.palette.text.secondary,
+                      },
+                    },
+                  },
+                  h4: {
+                    component: Typography,
+                    props: {
+                      variant: 'h3',
+                      component: 'h2',
+                      sx: {
+                        fontWeight: 700,
+                        color: theme.palette.primary,
+                      },
+                    },
+                  },
+                  p: {
+                    component: Typography,
+                    props: {
+                      variant: 'h5',
+                      component: 'p',
+                      sx: {
+                        mt: 2,
+                        color: theme.palette.text.secondary,
+                      },
+                    },
+                  },
+                },
+              }}
+            >
+              {text_content.replace(
+                textHighlight,
+                `<span>${textHighlight}</span>`,
+              )}
+            </MuiMarkdown>
+            {cta_link && (
+              <Box sx={{ width: '100%', mt: 4 }}>
+                <DemoCta
+                  icon={false}
+                  fullWidth={isMobile}
+                  variant="contained"
+                  sx={{
+                    background: theme.palette.primary,
+                    px: 6,
+                    fontWeight: 'bold',
+                  }}
+                  text={cta_text || FillerContent.cta}
+                  href={cta_link || FillerContent.href}
+                />
+              </Box>
+            )}
+          </Grid>
+          <Grid
+            sx={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              alignItems: 'center',
+            }}
+            item
+            sm={12}
+            md={6}
+          >
+            <Box
+              sx={{
+                mt: isMobile ? 4 : 0,
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 1.0,
+                justifyContent: 'flex-end',
+                alignItems: 'center',
+              }}
+            >
+              <Box
+                sx={{
+                  height: 88,
+                  width: 230,
+                  display: isMobile ? 'none' : 'block',
+                }}
+              />
+              {logos?.map((item, idx) => {
+                return (
+                  <ZestyImage
+                    key={idx}
+                    width={88}
+                    height={88}
+                    style={{ height: 88, width: 'auto' }}
+                    alt="integration logo's"
+                    src={item.logo?.data[0].url}
+                  />
+                );
+              })}
+            </Box>
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
+  );
+};
+
+export default TechStack;
diff --git a/src/components/marketing/Freestyle/UseCase.js b/src/components/marketing/Freestyle/UseCase.js
new file mode 100644
index 000000000..0a96d4704
--- /dev/null
+++ b/src/components/marketing/Freestyle/UseCase.js
@@ -0,0 +1,162 @@
+import {
+  Box,
+  useMediaQuery,
+  Typography,
+  useTheme,
+  Stack,
+  Button,
+  Container,
+} from '@mui/material';
+import React from 'react';
+import MuiMarkdown from 'markdown-to-jsx';
+import FillerContent from 'components/globals/FillerContent';
+
+const UseCase = ({ header, data }) => {
+  const theme = useTheme();
+  const isLg = useMediaQuery(theme.breakpoints.up('lg'), {
+    defaultMatches: true,
+  });
+  return (
+    <Box mt={10}>
+      <Container>
+        {header && (
+          <MuiMarkdown
+            options={{
+              overrides: {
+                h2: {
+                  component: Typography,
+                  props: {
+                    component: 'h2',
+                    variant: 'h2',
+                    color: 'text.secondary',
+                    sx: {
+                      fontWeight: 'bold',
+                      textAlign: 'center',
+                    },
+                  },
+                },
+              },
+            }}
+          >
+            {header || FillerContent.header}
+          </MuiMarkdown>
+        )}
+      </Container>
+      {data.map((item, index) => {
+        return (
+          <Stack key={index}>
+            <Stack
+              direction={{ xs: 'column', lg: 'row' }}
+              justifyContent={{ desktopWide: 'center' }}
+              sx={(theme) => ({
+                [theme.breakpoints.up('xs')]: {
+                  py: 4,
+                  px: 2,
+                },
+                [theme.breakpoints.up('tablet')]: {
+                  py: 4,
+                  px: 4,
+                },
+                [theme.breakpoints.up('lg')]: {
+                  maxWidth: theme.maxWidth,
+                  mx: 'auto',
+                  py: 4,
+                  px: 14,
+                  gap: 8,
+                },
+              })}
+            >
+              <Stack
+                mb={{ xs: 3, tablet: 6, lg: 0 }}
+                sx={{ width: { lg: '456px', desktopWide: '576px' } }}
+                py={{ desktopWide: 6 }}
+                order={0}
+                justifyContent="center"
+              >
+                <Typography
+                  color="primary"
+                  letterSpacing="-0.02em"
+                  fontWeight={800}
+                  variant="h4"
+                  mb="12px"
+                >
+                  {item.header}
+                </Typography>
+                <MuiMarkdown
+                  options={{
+                    overrides: {
+                      p: {
+                        component: Typography,
+                        props: {
+                          fontSize: '18px',
+                          lineHeight: '28px',
+                          color: 'text.secondary',
+                        },
+                      },
+                    },
+                  }}
+                >
+                  {item?.content || FillerContent.description}
+                </MuiMarkdown>
+
+                <Stack mt={3} direction="row" columnGap={2}>
+                  {item?.primaryCtaText && (
+                    <Button
+                      href={item.primaryCtaLink}
+                      variant="contained"
+                      color="primary"
+                      size={isLg ? 'extraLarge' : 'large'}
+                    >
+                      {item.primaryCtaText}
+                    </Button>
+                  )}
+                  {item?.secondaryCtaText && (
+                    <Button
+                      href={item.secondaryCtaLink}
+                      variant="outlined"
+                      color="primary"
+                      size={isLg ? 'extraLarge' : 'large'}
+                    >
+                      {item.secondaryCtaText}
+                    </Button>
+                  )}
+                </Stack>
+              </Stack>
+              <Stack order={1} justifyContent="center">
+                <Box
+                  component="img"
+                  src={item.icon_image || FillerContent.image}
+                  sx={(theme) => ({
+                    [theme.breakpoints.up('xs')]: {
+                      objectFit: 'contain',
+                      maxWidth: '100%',
+                      height: '100%',
+                    },
+                    [theme.breakpoints.up('tablet')]: {
+                      maxWidth: '100%',
+                      height: '420px',
+                    },
+                    [theme.breakpoints.up('lg')]: {
+                      width: '456px',
+                      height: '100%',
+                    },
+                    [theme.breakpoints.between(1201, 1439)]: {
+                      maxWidth: '100%',
+                      height: '100%',
+                    },
+                    [theme.breakpoints.up('desktopWide')]: {
+                      width: '576px',
+                      height: '420px',
+                    },
+                  })}
+                />
+              </Stack>
+            </Stack>
+          </Stack>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default UseCase;
diff --git a/src/views/zesty/Freestyle.js b/src/views/zesty/Freestyle.js
new file mode 100644
index 000000000..64fadd540
--- /dev/null
+++ b/src/views/zesty/Freestyle.js
@@ -0,0 +1,135 @@
+/**
+ * Zesty.io Content Model Component
+ * When the ZestyLoader [..slug].js file is used, this component will autoload if it associated with the URL
+ * 
+ * Label: freestyle 
+ * Name: freestyle 
+ * Model ZUID: 6-bcf781c4e4-pbcmpl
+ * File Created On: Thu Apr 04 2024 21:06:18 GMT+0800 (Philippine Standard Time)
+ * 
+ * Model Fields:
+ * 
+  * hero_eyebrow (text)
+ * hero_promo_video (text)
+ * hero_title (text)
+ * hero_primary_cta_text (text)
+ * hero_primary_cta_link (text)
+ * hero_description (wysiwyg_basic)
+ * resources_title (text)
+ * resources_buttons (one_to_many)
+ * logos_title (text)
+ * logos (one_to_many)
+ * feature_h2 (text)
+ * feature_description_1 (wysiwyg_basic)
+ * feature_1_image (images)
+ * feature_description_2 (wysiwyg_basic)
+ * feature_2_image (images)
+ * feature_description_3 (wysiwyg_basic)
+ * feature_3_image (images)
+ * faq_title (text)
+ * faqs (one_to_many)
+ * popular_features (text)
+ * freestyle_popular_features (one_to_many)
+
+ * 
+ * In the render function, text fields can be accessed like {content.field_name}, relationships are arrays,
+ * images are objects {content.image_name.data[0].url}
+ * 
+ * This file is expected to be customized; because of that, it is not overwritten by the integration script.
+ * Model and field changes in Zesty.io will not be reflected in this comment.
+ * 
+ * View and Edit this model's current schema on Zesty.io at https://8-aaeffee09b-7w6v22.manager.zesty.io/schema/6-bcf781c4e4-pbcmpl
+ * 
+ * Data Output Example: https://zesty.org/services/web-engine/introduction-to-parsley/parsley-index#tojson
+ * Images API: https://zesty.org/services/media-storage-micro-dam/on-the-fly-media-optimization-and-dynamic-image-manipulation
+ */
+
+import { ThemeProvider, useTheme } from '@emotion/react';
+import React from 'react';
+
+import FillerContent from 'components/globals/FillerContent';
+import revampTheme from 'theme/revampTheme';
+
+import Hero from 'components/marketing/Freestyle/Hero';
+import UseCase from 'components/marketing/Freestyle/UseCase';
+import SimpleCardLogo from 'components/marketing/Freestyle/SimpleCardLogo';
+import TabsSection from 'revamp/ui/TabsSection';
+import SingleTestimonial from 'components/marketing/Freestyle/SingleTesimonial';
+import TechStack from 'components/marketing/Freestyle/TechStack';
+import GetDemoSection from 'revamp/ui/GetDemoSection';
+import FAQs from 'components/marketing/Freestyle/FAQs';
+
+const benefitsData = (dataArray) => {
+  return (
+    dataArray?.data?.reduce((acc, item) => {
+      acc.push({
+        icon_image: item.use_case_image?.data[0].url,
+        header: item.header,
+        content: item.use_case_content,
+        primaryCtaText: item.primary_cta_text,
+        secondaryCtaText: item.secondary_cta_text,
+        primaryCtaLink: item.left_cta_link?.data?.[0].meta?.web?.uri,
+        secondaryCtaLink: item.right_cta_link?.data?.[0].meta?.web?.uri,
+      });
+
+      return acc;
+    }, []) || []
+  );
+};
+
+function Freestyle({ content }) {
+  const theme = useTheme();
+
+  const heroProps = {
+    overline: content.header_eyebrow,
+    description: content.hero_description,
+    heroImage: content.header_graphic?.data[0]?.url,
+    primaryCta: content.hero_primary_cta_text || FillerContent.link,
+    primaryCtaLink:
+      (content.hero_primary_cta_link == 0 && '/join/') ||
+      content.header_button_link?.data[0].meta.web.uri,
+    secondaryCtaText: content.hero_secondary_cta_text,
+    secondaryCtaLink: content.hero_secondary_cta_link?.data[0].meta.web.uri,
+  };
+
+  const useCasesProps = {
+    header: content.use_cases_title,
+    data: benefitsData(content.use_cases),
+  };
+
+  const demoProps = {
+    title: content.demo_title || FillerContent.demo.title,
+    supportingText:
+      content?.demo_description_2 || FillerContent.demo.supportingText,
+    cta: content?.demo_cta || FillerContent.demo.cta,
+  };
+
+  const integrationProps = {
+    text_content: content.integrations_title,
+    logos: content.integration_logos?.data,
+    headerFontWeight: 700,
+    cta_text: content.integrations_button_text,
+    cta_link: content.integration_button_link,
+  };
+
+  return (
+    <ThemeProvider theme={() => revampTheme(theme.palette.mode)}>
+      <Hero {...heroProps} />
+      <UseCase {...useCasesProps} />
+      <SimpleCardLogo
+        variant="outlined"
+        heading_text={content?.logos_title}
+        logoItems={content?.logos?.data}
+      />
+      <TabsSection tabs={content?.features_options} />
+      <SingleTestimonial />
+      <GetDemoSection {...demoProps} />
+      {content.integrations_title && content.integration_logos && (
+        <TechStack {...integrationProps} />
+      )}
+      <FAQs faqsData={content?.faqs.data} />
+    </ThemeProvider>
+  );
+}
+
+export default Freestyle;
diff --git a/src/views/zesty/index.js b/src/views/zesty/index.js
index 1c8895e7a..4ffdceede 100644
--- a/src/views/zesty/index.js
+++ b/src/views/zesty/index.js
@@ -210,6 +210,7 @@ const DocsOverview = dynamic(() => import('./DocsOverview'));
 const CmWorldDemo = dynamic(() => import('./CmWorldDemo'));
 const Header = dynamic(() => import('./Header'));
 const Footer = dynamic(() => import('./Footer'));
+const Freestyle = dynamic(() => import('./Freestyle'));
 
 export {
   Clipping,
@@ -393,4 +394,5 @@ export {
   CmWorldDemo,
   Footer,
   Header,
+  Freestyle,
 };

From 06fac47f0e7059b0e5638f83c383a992f607c397 Mon Sep 17 00:00:00 2001
From: "Japheth Louie M. Gofredo" <83058948+japhethLG@users.noreply.github.com>
Date: Tue, 16 Apr 2024 23:50:08 +0800
Subject: [PATCH 9/9] feat: integrate Wistia analytics in Video Learning Hub
 page (#2435)

# Description

Integrate Wistia analytics in Video Learning Hub page

Fixes #2432

## 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

![image](https://github.com/zesty-io/website/assets/83058948/fef8743e-bde1-4957-be2a-e8be2675d816)

![image](https://github.com/zesty-io/website/assets/83058948/c078b506-1c7f-4252-b1c1-c2d320e6455f)
---
 .../marketing/LearningHub/FeaturedVideos.js   |  7 +-
 .../LearningHub/FeaturedWistiaCard.js         | 96 +++++++++++++++++++
 .../marketing/LearningHub/Filters.js          | 20 +++-
 src/views/zesty/LearningHub.js                |  2 +-
 4 files changed, 120 insertions(+), 5 deletions(-)
 create mode 100644 src/components/marketing/LearningHub/FeaturedWistiaCard.js

diff --git a/src/components/marketing/LearningHub/FeaturedVideos.js b/src/components/marketing/LearningHub/FeaturedVideos.js
index 07b888dac..3033a8602 100644
--- a/src/components/marketing/LearningHub/FeaturedVideos.js
+++ b/src/components/marketing/LearningHub/FeaturedVideos.js
@@ -8,6 +8,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
  * Components Imports
  */
 import VideoCard from './FeaturedCard';
+import WistiaVideoCard from './FeaturedWistiaCard';
 
 /**
  * React Imports
@@ -51,7 +52,11 @@ const FeaturedVideos = ({ title, featuredVideos = [] }) => {
               return (
                 <Grid key={idx} item xs={12} md={6} lg={4}>
                   <Box sx={{ textDecoration: 'none' }}>
-                    <VideoCard {...item} />
+                    {item?.youtube_link ? (
+                      <VideoCard {...item} />
+                    ) : (
+                      <WistiaVideoCard {...item} />
+                    )}
                   </Box>
                 </Grid>
               );
diff --git a/src/components/marketing/LearningHub/FeaturedWistiaCard.js b/src/components/marketing/LearningHub/FeaturedWistiaCard.js
new file mode 100644
index 000000000..59f101219
--- /dev/null
+++ b/src/components/marketing/LearningHub/FeaturedWistiaCard.js
@@ -0,0 +1,96 @@
+/**
+ * MUI Imports
+ */
+import { Box, Card, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useEffect } from 'react';
+
+const WistiaVideoCard = ({
+  title,
+  wistia_video_id,
+  published_date,
+  video_length,
+}) => {
+  const theme = useTheme();
+
+  const formatDate = (date) => {
+    date = new Date(date);
+    const options = { year: 'numeric', month: 'long', day: 'numeric' };
+    return date.toLocaleDateString('en-US', options);
+  };
+
+  useEffect(() => {
+    const script1 = document.createElement('script');
+    script1.src = `https://fast.wistia.com/embed/medias/${wistia_video_id}.jsonp`;
+    script1.async = true;
+
+    const script2 = document.createElement('script');
+    script2.src = 'https://fast.wistia.com/assets/external/E-v1.js';
+    script2.async = true;
+
+    document.body.appendChild(script1);
+    document.body.appendChild(script2);
+
+    return () => {
+      document.body.removeChild(script1);
+      document.body.removeChild(script2);
+    };
+  }, [wistia_video_id]);
+
+  return (
+    <Box sx={{ textDecoration: 'none' }}>
+      <Card
+        sx={{
+          '&:hover': {
+            border: `1px solid ${theme.palette.zesty.zestyOrange}`,
+          },
+          margin: 'auto',
+          width: '100%',
+          minHeight: 280,
+          background: '#000',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          border:
+            theme.palette.mode === 'light' &&
+            `1px solid ${theme.palette.common.grey}`,
+        }}
+      >
+        <Box
+          sx={{
+            position: 'relative',
+            overflow: 'hidden',
+            paddingTop: '56.25%',
+            height: '100%',
+            width: '100%',
+          }}
+        >
+          <Box
+            className={`wistia_embed wistia_async_${wistia_video_id} popover=true videoFoam=true`}
+            sx={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+            }}
+          />
+        </Box>
+      </Card>
+
+      <Typography component="h4" variant="body1" sx={{ fontWeight: 'bold' }}>
+        {title}
+      </Typography>
+      {video_length && (
+        <Typography component="p" variant="subtitle2">
+          {video_length}
+        </Typography>
+      )}
+      <Typography component="p" variant="subtitle2">
+        {formatDate(published_date)}
+      </Typography>
+    </Box>
+  );
+};
+
+export default WistiaVideoCard;
diff --git a/src/components/marketing/LearningHub/Filters.js b/src/components/marketing/LearningHub/Filters.js
index 7998df460..43fd08343 100644
--- a/src/components/marketing/LearningHub/Filters.js
+++ b/src/components/marketing/LearningHub/Filters.js
@@ -18,7 +18,7 @@ import CloseIcon from '@mui/icons-material/Close';
 /**
  * React Imports
  */
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import { LearningHubVideosContext } from './context/LearningHubVideosContext';
 
 const Filters = ({ featuredCards, tags }) => {
@@ -33,6 +33,16 @@ const Filters = ({ featuredCards, tags }) => {
     LearningHubVideosContext,
   );
 
+  const scrollToVideos = () => {
+    document.getElementById('scrollTop').scrollIntoView({ behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    if (selectedTags) {
+      scrollToVideos();
+    }
+  }, [selectedTags]);
+
   return (
     <Container>
       <Grid
@@ -73,7 +83,9 @@ const Filters = ({ featuredCards, tags }) => {
                   ? theme.palette.zesty.zestyBlue
                   : theme.palette.background.paper,
               }}
-              onClick={() => setSelectedTags(item.title)}
+              onClick={() => {
+                setSelectedTags(item.title);
+              }}
             >
               <Typography
                 sx={{
@@ -122,7 +134,9 @@ const Filters = ({ featuredCards, tags }) => {
         {tags.map((item, idx) => (
           <Grid key={idx} item sm={6} md={4} lg={2}>
             <Box
-              onClick={() => setSelectedTags(item.tag_name)}
+              onClick={() => {
+                setSelectedTags(item.tag_name);
+              }}
               sx={{
                 textDecoration: 'none',
                 border: item.isActive
diff --git a/src/views/zesty/LearningHub.js b/src/views/zesty/LearningHub.js
index 3a439aed5..47b9e455d 100644
--- a/src/views/zesty/LearningHub.js
+++ b/src/views/zesty/LearningHub.js
@@ -59,7 +59,7 @@ function LearningHub({ content }) {
         <Box sx={{ pt: 10 }}>
           <FeaturedVideos
             title="Featured Videos"
-            featuredVideos={content?.featured_videos?.data}
+            featuredVideos={content?.featured_wistia_videos?.data}
           />
         </Box>
         <MainVideos withPagination={true} />