Update UI

components/header.tsx

@@ -13,10 +13,10 @@ export function Header() {
           <Stack shouldWrapChildren isInline spacing='15px' alignItems='center' color='gray.50' fontSize='15px'>
             <Link borderBottomWidth={0} borderBottomColor='gray.500'
                   _hover={{ textDecoration: 'none', borderBottomColor: 'white' }} fontWeight={500}
-                  href='#'>Read</Link>
+                  href='/guides'>Guides</Link>
             <Link borderBottomWidth={0} borderBottomColor='gray.500'
                   _hover={{ textDecoration: 'none', borderBottomColor: 'white' }} fontWeight={500}
-                  href='#'>Watch</Link>
+                  href='#'>Videos</Link>
             <Link ml='10px' bgGradient='linear(to-l, yellow.700, red.600)' p='7px 10px' rounded='4px'
                   _hover={{ textDecoration: 'none', bgGradient: 'linear(to-l, red.800, yellow.700)' }}
                   fontWeight={500} href={'#'}>Get Updates</Link>

pages/guides/index.tsx

@@ -11,10 +11,10 @@ export default function Guides() {
     <Box bg='white' minH='100vh'>
       <Header />
       <Box mb='60px'>
-        <Box pt='50px' pb='30px' borderBottomWidth={1}>
+        <Box pt='45px' pb='30px' borderBottomWidth={1}>
           <Container maxW='container.md' position='relative'>
-            <Heading as='h1' color='black' fontSize='40px' fontWeight={700} mb='5px'>Visual Guides</Heading>
+            <Heading as='h1' color='black' fontSize='35px' fontWeight={700} mb='5px'>Visual Guides</Heading>
-            <Text>Succinct graphical explanations to development related topics.</Text>
+            <Text fontSize='15px'>Succinct graphical explanations to development related topics.</Text>
           </Container>
         </Box>
         <Container maxW='container.md' position='relative'>