specific versions section

src/components/UI/downloads/SpecificVersionsSection.tsx

@@ -0,0 +1,44 @@
+import { Box, Flex, Image, Stack } from '@chakra-ui/react';
+import { FC } from 'react';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export const SpecificVersionsSection: FC<Props> = ({ children }) => {
+  return (
+    <Flex
+      id="specificversions"
+      border='2px solid'
+      borderColor='brand.light.primary'
+      flexDir={{base: 'column', md: 'row'}}
+    >
+      <Flex
+        p={4}
+        alignItems='center'
+        justifyContent='center'
+        borderBottom={{ base: '2px solid #11866f', md: 'none'}}
+        borderRight={{ base: 'none', md: '2px solid #11866f' }}
+        flex='none'
+      >
+        {/* TODO: use NextImage */}
+        <Image src='/images/pages/gopher-home-side-desktop.svg' alt='Gopher facing right' />
+      </Flex>
+      <Flex
+        flexDir='column'
+      >
+        <Stack
+          p={4}
+          borderBottom='2px solid'
+          borderColor='brand.light.primary'
+          sx={{ mt: '0 !important' }}
+        >
+          <Box as='h2' textStyle='h2'>
+            Specific Versions
+          </Box>
+        </Stack>
+        {children}
+      </Flex>
+    </Flex>
+  );
+};

src/components/UI/downloads/index.ts

@@ -1,3 +1,4 @@
 export * from './DownloadsHero';
 export * from './DownloadsSection';
 export * from './DownloadsTable';
+export * from './SpecificVersionsSection'

src/pages/downloads.tsx

@@ -2,7 +2,7 @@ import { Code, Link, ListItem, Stack, Text, UnorderedList } from '@chakra-ui/rea
 import type { NextPage } from 'next';
 import { useState } from 'react';
 
-import { DownloadsHero, DownloadsSection, DownloadsTable } from '../components/UI/downloads';
+import { DownloadsHero, DownloadsSection, DownloadsTable, SpecificVersionsSection } from '../components/UI/downloads';
 import { DataTable } from '../components/UI';
 
 import {
@@ -51,12 +51,7 @@ const DownloadsPage: NextPage = () => {
             }
           />
 
-          <DownloadsSection
+          <SpecificVersionsSection>
-            imgSrc='/images/pages/gopher-home-side-desktop.svg'
-            imgAltText='Gopher facing right'
-            sectionTitle='Specific Versions'
-            id='specificversions'
-          >
             <Stack p={4}>
               <Text textStyle='quick-link-text'>
                 If you&apos;re looking for a specific release, operating system or architecture,
@@ -92,7 +87,7 @@ const DownloadsPage: NextPage = () => {
                 Signatures for details).
               </Text>
             </Stack>
-          </DownloadsSection>
+          </SpecificVersionsSection>
 
           <DownloadsSection sectionTitle='Stable releases' id='stablereleases'>
             <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>