From c921c775efa8acb343c3fe2d445e9793de4860af Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Thu, 6 Oct 2022 13:38:42 -0600
Subject: [PATCH] create DownloadsSection component

---
 .../{homepage => downloads}/DownloadsHero.tsx |  0
 .../UI/downloads/DownloadsSection.tsx         | 47 +++++++++
 src/components/UI/downloads/index.ts          |  2 +
 src/components/UI/homepage/index.ts           |  1 -
 src/pages/downloads.tsx                       | 97 +++++++++++++++++--
 5 files changed, 140 insertions(+), 7 deletions(-)
 rename src/components/UI/{homepage => downloads}/DownloadsHero.tsx (100%)
 create mode 100644 src/components/UI/downloads/DownloadsSection.tsx
 create mode 100644 src/components/UI/downloads/index.ts

diff --git a/src/components/UI/homepage/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx
similarity index 100%
rename from src/components/UI/homepage/DownloadsHero.tsx
rename to src/components/UI/downloads/DownloadsHero.tsx
diff --git a/src/components/UI/downloads/DownloadsSection.tsx b/src/components/UI/downloads/DownloadsSection.tsx
new file mode 100644
index 0000000000..19cee95f39
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file
diff --git a/src/components/UI/downloads/index.ts b/src/components/UI/downloads/index.ts
new file mode 100644
index 0000000000..3296aa7933
--- /dev/null
+++ b/src/components/UI/downloads/index.ts
@@ -0,0 +1,2 @@
+export * from './DownloadsHero';
+export * from './DownloadsSection'
\ No newline at end of file
diff --git a/src/components/UI/homepage/index.ts b/src/components/UI/homepage/index.ts
index a75a03c2af..861cb5112f 100644
--- a/src/components/UI/homepage/index.ts
+++ b/src/components/UI/homepage/index.ts
@@ -1,4 +1,3 @@
-export * from './DownloadsHero';
 export * from './Gopher';
 export * from './HomeHero';
 export * from './HomeSection';
diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx
index caf41e9eb1..3e1bda1b5c 100644
--- a/src/pages/downloads.tsx
+++ b/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>
     </>