create DownloadsSection component

src/components/UI/downloads/DownloadsSection.tsx

@@ -0,0 +1,47 @@
+import { Heading, Image, Stack } from '@chakra-ui/react';
+import { FC } from 'react';
+
+interface Props {
+  children?: React.ReactNode;
+  imgSrc?: string;
+  imgAltText?: string;
+  sectionTitle: string
+}
+
+export const DownloadsSection: FC<Props> = ({
+  children,
+  imgSrc,
+  imgAltText,
+  sectionTitle,
+}) => {
+  return (
+    <Stack border='2px solid #11866F'>
+      {!!imgSrc && (
+        <Stack alignItems='center' p={4} borderBottom='2px solid #11866f'>
+          {/* TODO: use NextImage */}
+          <Image src={imgSrc} alt={imgAltText} />
+        </Stack>
+      )}
+
+      <Stack p={4} borderBottom='2px solid #11866f' sx={{ mt: '0 !important' }}>
+        <Heading
+          // TODO: move text style to theme
+          as='h2'
+          fontFamily='"JetBrains Mono", monospace'
+          fontWeight={400}
+          fontSize='1.5rem'
+          lineHeight='auto'
+          letterSpacing='4%'
+          // TODO: move to theme colors
+          color='#1d242c'
+        >
+          {sectionTitle}
+        </Heading>
+      </Stack>
+
+      <Stack spacing={4}>
+        {children}
+      </Stack>
+    </Stack>
+  )
+}

src/components/UI/downloads/index.ts

@@ -0,0 +1,2 @@
+export * from './DownloadsHero';
+export * from './DownloadsSection'

src/components/UI/homepage/index.ts

@@ -1,4 +1,3 @@
-export * from './DownloadsHero';
 export * from './Gopher';
 export * from './HomeHero';
 export * from './HomeSection';

src/pages/downloads.tsx

@@ -1,11 +1,15 @@
-import { Stack } from '@chakra-ui/react';
+import {
+  Code,
+  Link,
+  ListItem,
+  Stack,
+  Text,
+  UnorderedList,
+} from '@chakra-ui/react';
 import type { NextPage } from 'next';
 
-import { DownloadsHero } from '../components/UI/homepage';
-
-import {
+import { DownloadsHero, DownloadsSection } from '../components/UI/downloads';
 
-} from '../constants';
 
 const DownloadsPage: NextPage = ({}) => {
   return (
@@ -14,6 +18,7 @@ const DownloadsPage: NextPage = ({}) => {
      
      <main>
       <Stack spacing={4}>
+        {/* TODO: replace hardcoded strings with build information */}
         <DownloadsHero
           currentBuildName={'Sentry Omega'}
           currentBuildVersion={'v1.10.23'}
@@ -23,7 +28,87 @@ const DownloadsPage: NextPage = ({}) => {
           sourceCodeURL={'https://github.com/ethereum/go-ethereum/archive/v1.10.25.tar.gz'}
           windowsBuildURL={'https://gethstore.blob.core.windows.net/builds/geth-windows-amd64-1.10.25-69568c55.exe'}
         />
-        <p>Hello</p>
+
+        <DownloadsSection
+          imgSrc='/images/pages/gopher-home-side-desktop.svg'
+          imgAltText='Gopher facing right'
+          sectionTitle='Specific Versions'
+        >
+          <Stack p={4}>
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+              If you&apos;re looking for a specific release, operating system or architecture, below you will find:
+            </Text>
+
+            <UnorderedList px={4}>
+              <ListItem>
+                <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+                  All stable and develop builds of Geth and tools
+                </Text>
+              </ListItem>
+              <ListItem>
+                <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+                  Archives for non-primary processor architectures
+                </Text>
+              </ListItem>
+              <ListItem>
+                <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+                  Android library archives and iOS XCode frameworks
+                </Text>
+              </ListItem>
+            </UnorderedList>
+
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+              Please select your desired platform from the lists below and download your bundle of choice. Please be aware that the MD5 checksums are provided by our binary hosting platform (Azure Blobstore) to help check for download errors. For security guarantees please verify any downloads via the attached PGP signature files (see{' '}
+              <Link
+                href={''}
+                isExternal
+                textDecoration='underline'
+                color='#11866f'
+                _hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
+                _focus={{
+                  color: '#11866f',
+                  boxShadow: '0 0 0 1px #11866f !important',
+                  textDecoration: 'none'
+                }}
+                _pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
+              >
+                OpenPGP
+              </Link>{' '}
+              Signatures for details).
+            </Text>
+          </Stack>
+        </DownloadsSection>
+
+        <DownloadsSection sectionTitle='Importing keys and verifying builds'>
+          <Stack p={4} borderBottom='2px solid #11866f'>
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+              You can import the build server public keys by grabbing the individual keys directly from the keyserver network:
+            </Text>
+            <Code p={4}>
+              gpg --recv-keys F9585DE6 C2FF8BBF 9BA28146 7B9E2481 D2A67EAC
+            </Code>
+          </Stack>
+
+          <Stack p={4} borderBottom='2px solid #11866f'>
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+              Similarly you can import all the developer public keys by grabbing them directly from the keyserver network:
+            </Text>
+
+            <Code p={4}>
+              gpg --recv-keys E058A81C  05A5DDF0 1CCB7DD2
+            </Code>
+          </Stack>
+
+          <Stack p={4}>
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+              From the download listings above you should see a link both to the downloadable archives as well as detached signature files. To verify the authenticity of any downloaded data, grab both files and then run:
+            </Text>
+
+            <Code p={4}>
+              gpg --verify geth-linux-amd64-1.5.0-d0c820ac.tar.gz.asc
+            </Code>
+          </Stack>
+        </DownloadsSection>
       </Stack>
      </main>
     </>