chore: update SpecificVersionsSection component layout to match homepage (#64)

* chore: update SpecificVersionsSection component layout to match homepage

* chore: remove non-required repeat function

src/components/UI/downloads/SpecificVersionsSection.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Image, Stack } from '@chakra-ui/react';
+import { Box, Flex, Grid, GridItem, Image, Stack } from '@chakra-ui/react';
 import { FC } from 'react';
 import { GopherHomeLinks } from '../svgs';
 
@@ -8,24 +8,25 @@ interface Props {
 
 export const SpecificVersionsSection: FC<Props> = ({ children }) => {
   return (
-    <Flex
-      id='specificversions'
-      border='2px'
-      borderColor='primary'
-      flexDir={{ base: 'column', md: 'row' }}
-    >
-      <Flex
-        p={4}
-        alignItems='center'
+    <Grid id='specificversions' templateColumns={{ base: '1fr', md: '300px 1fr' }} gap={4}>
+      <GridItem w='auto'>
+        <Box h='100%'>
+          {/* TODO: replace with animated/video version */}
+          <Stack
             justifyContent='center'
-        borderBottom={{ base: '2px', md: 'none' }}
-        borderRight={{ base: 'none', md: '2px' }}
-        borderColor='primary !important'
-        flex='none'
+            alignItems='center'
+            p={4}
+            border='2px solid'
+            borderColor='primary'
+            h='100%'
           >
             <GopherHomeLinks />
-      </Flex>
-      <Flex flexDir='column'>
+          </Stack>
+        </Box>
+      </GridItem>
+
+      <GridItem>
+        <Flex flexDir='column' border='2px solid' borderColor='primary' pb={6}>
           <Stack p={4} borderBottom='2px' borderColor='primary' sx={{ mt: '0 !important' }}>
             <Box as='h2' textStyle='h2'>
               Specific Versions
@@ -33,6 +34,7 @@ export const SpecificVersionsSection: FC<Props> = ({ children }) => {
           </Stack>
           {children}
         </Flex>
-    </Flex>
+      </GridItem>
+    </Grid>
   );
 };

src/pages/index.tsx

@@ -142,7 +142,7 @@ const HomePage: NextPage = ({}) => {
             </GridItem>
           </Grid>
 
-          <Grid templateColumns={{ base: 'repeat(1, 1fr)', md: '300px 1fr' }} gap={4}>
+          <Grid templateColumns={{ base: '1fr', md: '300px 1fr' }} gap={4}>
             <GridItem w='auto'>
               <Box h='100%'>
                 {/* TODO: replace with animated/video version */}