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