Menu and guides listing changes

pages/guides/components/guide-grid-item.tsx

@@ -2,6 +2,7 @@ import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react';
 
 type GuideGridItemProps = {
   title: string;
+  href: string;
   subtitle: string;
   date: string;
   isNew?: boolean;
@@ -14,17 +15,17 @@ const bgColorList = [
 ];
 
 export function GuideGridItem(props: GuideGridItemProps) {
-  const { title, subtitle, date, isNew = false, colorIndex = 0 } = props;
+  const { title, subtitle, date, isNew = false, colorIndex = 0, href } = props;
 
   return (
-    <Link _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Box} href='#' shadow='xl' p='20px'
-          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
+    <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={href} shadow='xl' p='20px'
+         rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
       <Text mb='10px' fontSize='13px' color='gray.400'>
         {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
         {date}
       </Text>
       <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>
       <Text color='gray.300' fontSize='14px'>{subtitle}</Text>
-    </Link>
+    </Box>
   );
 }

pages/guides/index.tsx

@@ -25,12 +25,13 @@ export default function Guides(props: GuidesProps) {
       <Box mb='60px'>
         <PageHeader
           title={'Visual Guides'}
-          subtitle={'Succinct graphical explanations to development related topics.'}
+          subtitle={'Succinct graphical explanations to engineering topics.'}
         />
         <Container maxW='container.md' position='relative'>
           <SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
             {recentGuides.map((recentGuide, counter) => (
               <GuideGridItem
+                href={recentGuide.url}
                 key={recentGuide.id}
                 title={recentGuide.title}
                 subtitle={recentGuide.description}