From 46f1034163c99d4f35332f439be98b1072890ef6 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 4 Aug 2021 00:20:16 +0200
Subject: [PATCH] Add videos section

---
 pages/index.tsx | 123 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)

diff --git a/pages/index.tsx b/pages/index.tsx
index 7dca0f7b5..6b471d82b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -415,6 +415,7 @@ export default function Home() {
               <Flex alignItems='center' className='video-title' transition={'200ms'}>
                 <VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
                 <Text as='span' ml='7px'>Creating a React App</Text>
+                <Badge variant='subtle' colorScheme='purple' ml='10px'>Pro</Badge>
               </Flex>
               <Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
             </Link>
@@ -462,6 +463,128 @@ export default function Home() {
               </Flex>
               <Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
             </Link>
+            <Link
+              fontSize='15px'
+              p='10px'
+              d='flex'
+              fontWeight={500}
+              color='gray.600'
+              alignItems='center'
+              justifyContent={'space-between'}
+              _hover={{
+                textDecoration: 'none',
+                color: 'blue.400',
+                '& .video-title': {
+                  transform: 'translateX(10px)'
+                }
+              }}
+            >
+              <Flex alignItems='center' className='video-title' transition={'200ms'}>
+                <VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
+                <Text as='span' ml='7px'>Content Delivery Networks</Text>
+              </Flex>
+              <Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
+            </Link>
+            <Link
+              fontSize='15px'
+              p='10px'
+              d='flex'
+              fontWeight={500}
+              color='gray.600'
+              alignItems='center'
+              justifyContent={'space-between'}
+              _hover={{
+                textDecoration: 'none',
+                color: 'blue.400',
+                '& .video-title': {
+                  transform: 'translateX(10px)'
+                }
+              }}
+            >
+              <Flex alignItems='center' className='video-title' transition={'200ms'}>
+                <VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
+                <Text as='span' ml='7px'>Load Balancers in Depth</Text>
+              </Flex>
+              <Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
+            </Link>
+            <Link
+              fontSize='15px'
+              p='10px'
+              d='flex'
+              fontWeight={500}
+              color='gray.600'
+              alignItems='center'
+              justifyContent={'space-between'}
+              _hover={{
+                textDecoration: 'none',
+                color: 'blue.400',
+                '& .video-title': {
+                  transform: 'translateX(10px)'
+                }
+              }}
+            >
+              <Flex alignItems='center' className='video-title' transition={'200ms'}>
+                <VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
+                <Text as='span' ml='7px'>DNS and How does it Work?</Text>
+              </Flex>
+              <Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
+            </Link>
+            <Link
+              fontSize='15px'
+              p='10px'
+              d='flex'
+              fontWeight={500}
+              color='gray.600'
+              alignItems='center'
+              justifyContent={'space-between'}
+              _hover={{
+                textDecoration: 'none',
+                color: 'blue.400',
+                '& .video-title': {
+                  transform: 'translateX(10px)'
+                }
+              }}
+            >
+              <Flex alignItems='center' className='video-title' transition={'200ms'}>
+                <VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
+                <Text as='span' ml='7px'>JavaScript Fetch API</Text>
+              </Flex>
+              <Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>15 minutes</Text>
+            </Link>
+
+            <Box position='relative' textAlign='center' bottom='10px'>
+              <Box
+                opacity={1}
+                pointerEvents='none'
+                position='absolute'
+                bottom={0}
+                height='200px'
+                width='100%'
+                background='linear-gradient(180deg, transparent, #e6fffa)'
+              />
+
+              <Link
+                rounded='20px'
+                display='inline'
+                bg='green.600'
+                color='white'
+                p='7px 20px'
+                href={'#'}
+                fontWeight={800}
+                fontSize='11px'
+                textTransform='uppercase'
+                my='25px'
+                position='relative'
+                _hover={{
+                  textDecoration: 'none',
+                  '& .forward-arrow': {
+                    transform: 'translateX(3px)'
+                  }
+                }}>
+                View all Videos
+                <Text d='inline-block' as='span' transition='200ms' ml='4px' className='forward-arrow'>&rarr;</Text>
+              </Link>
+            </Box>
           </VStack>
         </Container>
       </Box>