feat: learning hub page (#2403)

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

## Type of change

Please delete options that are not relevant.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

# 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
- [ ] Unit Test
- [ ] E2E Test

# Screenshots / Screen recording

Please add screenshots or recording if applicable


![image](https://github.com/zesty-io/website/assets/70579069/e5f4f452-deb5-4497-987a-b69407facb9e)

![image](https://github.com/zesty-io/website/assets/70579069/e19518a2-76fc-4db6-946c-2aba5e81a756)

![image](https://github.com/zesty-io/website/assets/70579069/0c84a57f-906a-469d-a986-19a2f7990632)
![Uploading image.png…]()

src/components/globals/constants.js

@@ -6144,8 +6144,47 @@ export const flyoutNavigation = [
     column_2_items: {
       type: 'relationship',
       model: 'sub_nav2022',
-      totalItems: 4,
+      totalItems: 5,
       data: [
+        {
+          nav_item_name: 'Learning Hub Videos',
+          page_link: {
+            type: 'relationship',
+            model: 'for_industry_pages',
+            totalItems: 1,
+            data: [[]],
+          },
+          external_link_if_needed: '/learning-hub/',
+          parent_nav_item: {
+            type: 'relationship',
+            model: 'sub_nav2022',
+            totalItems: 1,
+            data: [
+              {
+                nav_item_name: 'Industry learning',
+                page_link: null,
+                external_link_if_needed: null,
+                parent_nav_item: null,
+                icon_image: null,
+                sort_order: '2',
+                main_or_blue_secondary_item: '0',
+              },
+            ],
+          },
+          icon_image: {
+            type: 'images',
+            totalItems: 1,
+            data: [
+              {
+                type: 'image',
+                zuid: '3-11555e5b-gtgn5t',
+                url: 'https://kfg6bckb.media.zestyio.com/Learning-Hub.png',
+              },
+            ],
+          },
+          sort_order: '1',
+          main_or_blue_secondary_item: '1',
+        },
         {
           nav_item_name: 'Blog',
           page_link: {
@@ -11357,6 +11396,15 @@ export const navigationCustom = [
     zuid: '7-8ed2b6a189-w85cqt',
     children: [],
   },
+  {
+    external: false,
+    parentZUID: null,
+    sort: '1',
+    url: '/learning-hub/',
+    title: 'Learning Hub Videos',
+    zuid: '7-cc809dacb1-hxjshj',
+    children: [],
+  },
   {
     external: false,
     parentZUID: '7-bca0ada1df-1k1b7g',

src/components/marketing/LearningHub/FeaturedCard.js

@@ -0,0 +1,86 @@
+/**
+ * MUI Imports
+ */
+import { Box, Card, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+
+const VideoCard = ({ title, youtube_link, 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);
+  };
+
+  function convertToNoCookie(url) {
+    if (!url) return;
+    // Replace "www.youtube.com" with "www.youtube-nocookie.com"
+    // Also remove the "/embed/" part
+    return url.replace(
+      'www.youtube.com/embed/',
+      'www.youtube-nocookie.com/embed/',
+    );
+  }
+
+  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={{
+            width: '100%',
+            height: '100%',
+            position: 'relative',
+            overflow: 'hidden',
+            paddingTop: '56.25%',
+          }}
+        >
+          <iframe
+            title="YouTube video player"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowfullscreen
+            src={convertToNoCookie(youtube_link)}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              height: '100%',
+              width: '100%',
+              border: 'none',
+            }}
+          ></iframe>
+        </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 VideoCard;

src/components/marketing/LearningHub/FeaturedVideos.js

@@ -0,0 +1,67 @@
+/**
+ * MUI Imports
+ */
+import { Box, Grid, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+/**
+ * Components Imports
+ */
+import VideoCard from './FeaturedCard';
+
+/**
+ * React Imports
+ */
+import { useContext } from 'react';
+import { LearningHubVideosContext } from './context/LearningHubVideosContext';
+
+const FeaturedVideos = ({ featuredVideos = [] }) => {
+  const { searchKey, selectedTags } = useContext(LearningHubVideosContext);
+
+  /************************************************
+   * Theme Settings
+   */
+
+  const theme = useTheme();
+  const isExtraSmall = useMediaQuery(theme.breakpoints.between('xs', 600));
+
+  return (
+    <>
+      <Box
+        hidden={searchKey !== '' || selectedTags !== '' ? true : false}
+        sx={{
+          pt: 10,
+          px: 4,
+        }}
+        component="section"
+      >
+        <Box sx={{ width: '100%', maxWidth: 1600, margin: 'auto' }}>
+          <Typography
+            variant="h6"
+            component="p"
+            sx={{
+              color: theme.palette.zesty.zestyLightText,
+              mb: 2,
+              textAlign: isExtraSmall ? 'center' : 'text-left',
+            }}
+          >
+            Featured Videos
+          </Typography>
+          <Grid container spacing={2}>
+            {featuredVideos?.map((item, idx) => {
+              return (
+                <Grid key={idx} item xs={12} md={6} lg={4}>
+                  <Box sx={{ textDecoration: 'none' }}>
+                    <VideoCard {...item} />
+                  </Box>
+                </Grid>
+              );
+            })}
+          </Grid>
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default FeaturedVideos;