Merge branch 'setupDocs' into codeSnippet

src/components/UI/downloads/DownloadsHero.tsx

@@ -1,11 +1,11 @@
-import { Box, Button, Image, Link, Stack, HStack, Text } from '@chakra-ui/react';
+import { Box, Center, Button, Grid, Image, Link, Stack, HStack, Text } from '@chakra-ui/react';
 import { FC } from 'react';
 import NextLink from 'next/link';
 
 import { DOWNLOAD_HEADER_BUTTONS } from '../../../constants';
 
 interface DownloadsHero {
-  currentBuildName: string;
+  currentBuild: string;
   currentBuildVersion: string;
   linuxBuildURL: string;
   macOSBuildURL: string;
@@ -15,7 +15,7 @@ interface DownloadsHero {
 }
 
 export const DownloadsHero: FC<DownloadsHero> = ({
-  currentBuildName,
+  currentBuild,
   currentBuildVersion,
   linuxBuildURL,
   macOSBuildURL,
@@ -29,12 +29,21 @@ export const DownloadsHero: FC<DownloadsHero> = ({
   DOWNLOAD_HEADER_BUTTONS.sourceCode.buildURL = sourceCodeURL;
 
   return (
-    <Stack border='3px solid' borderColor='brand.light.primary' py={4} px={4}>
+    <Grid
-      <Stack alignItems='center'>
+      border='3px solid'
-        <Image src='/images/pages/gopher-downloads-front-light.svg' alt='Gopher plugged in' />
+      borderColor='brand.light.primary'
-      </Stack>
+      p={4}
-
+      templateColumns={{ base: 'repeat(1, 1fr)', lg: '1fr 430px' }}
-      <Box mb={4}>
+      gap={4}
+    >
+      <Stack>
+        <Grid
+          mb={4}
+          templateColumns={{ base: 'repeat(1, 1fr)', md: '1fr 300px', lg: '1fr' }}
+          gap={4}
+          p={4}
+        >
+          <Stack>
             <Box as='h1' textStyle='h1'>
               Download go-ethereum
             </Box>
@@ -43,47 +52,76 @@ export const DownloadsHero: FC<DownloadsHero> = ({
               // TODO: move text style to theme
               fontFamily='"JetBrains Mono", monospace'
               lineHeight='21px'
-          mb={8}
+              mb={{ base: '4 !important', md: '8 !important' }}
             >
-          {currentBuildName} ({currentBuildVersion})
+              {currentBuild}
             </Text>
 
             <Text mb={4}>
-          You can download the latest 64-bit stable release of Geth for our primary platforms below.
+              You can download the latest 64-bit stable release of Geth for our primary platforms
-          Packages for all supported platforms, as well as develop builds, can be found further down
+              below. Packages for all supported platforms, as well as develop builds, can be found
-          the page. If you&apos;re looking to install Geth and/or associated tools via your favorite
+              further down the page. If you&apos;re looking to install Geth and/or associated tools
-          package manager, please check our installation guide.
+              via your favorite package manager, please check our installation guide.
             </Text>
+          </Stack>
 
+          <Stack
+            py={{ base: 0 }}
+            px={{ base: 8 }}
+            flex={{ base: 'none' }}
+            display={{ base: 'block', lg: 'none' }}
+            order={{ base: -1, md: 1 }}
+          >
+            <Center>
+              <Image
+                src='/images/pages/gopher-downloads-front-light.svg'
+                alt='Gopher plugged in'
+                w={{ md: 72 }}
+              />
+            </Center>
+          </Stack>
+        </Grid>
+
+        <Grid templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} gap={4} mb={4}>
           {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => {
             return (
               <NextLink key={key} href={DOWNLOAD_HEADER_BUTTONS[key].buildURL} passHref>
-              <Button as='a' variant='primary' width={{ base: '100%' }} p={8} mb={4}>
+                <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16}>
                   <HStack spacing={4}>
                     <Stack alignItems='center'>
                       <Image
                         src={DOWNLOAD_HEADER_BUTTONS[key].image}
                         alt={DOWNLOAD_HEADER_BUTTONS[key].imageAlt}
+                        h='44px'
                       />
                     </Stack>
                     <Box>
                       <Text textStyle='downloads-button-label'>
                         For {DOWNLOAD_HEADER_BUTTONS[key].name}
                       </Text>
-                    <Text textStyle='downloads-button-label'>geth {currentBuildName}</Text>
+                      <Text textStyle='downloads-button-sublabel'>geth {currentBuildVersion}</Text>
                     </Box>
                   </HStack>
                 </Button>
               </NextLink>
             );
           })}
+        </Grid>
 
         <Box textAlign={'center'}>
           <Link href={releaseNotesURL} isExternal variant='light'>
-            Release notes for {currentBuildName} {currentBuildVersion}
+            Release notes for {currentBuild}
           </Link>
         </Box>
-      </Box>
       </Stack>
+
+      <Center display={{ base: 'none', lg: 'flex' }}>
+        <Image
+          src='/images/pages/gopher-downloads-front-light.svg'
+          alt='Gopher plugged in'
+          w={96}
+        />
+      </Center>
+    </Grid>
   );
 };

src/components/UI/downloads/DownloadsSection.tsx

@@ -1,4 +1,4 @@
-import { Box, Image, Stack } from '@chakra-ui/react';
+import { Center, Flex, Image, Stack, Text } from '@chakra-ui/react';
 import { FC } from 'react';
 
 interface Props {
@@ -6,10 +6,18 @@ interface Props {
   id: string;
   imgSrc?: string;
   imgAltText?: string;
+  sectionDescription?: React.ReactNode;
   sectionTitle: string;
 }
 
-export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sectionTitle, id }) => {
+export const DownloadsSection: FC<Props> = ({
+  children,
+  imgSrc,
+  imgAltText,
+  sectionDescription,
+  sectionTitle,
+  id
+}) => {
   return (
     <Stack border='2px solid' borderColor='brand.light.primary' id={id}>
       {!!imgSrc && (
@@ -19,18 +27,33 @@ export const DownloadsSection: FC<Props> = ({ children, imgSrc, imgAltText, sect
         </Stack>
       )}
 
-      <Stack
+      <Flex
-        p={4}
         borderBottom='2px solid'
         borderColor='brand.light.primary'
-        sx={{ mt: '0 !important' }}
+        flexDirection={{ base: 'column', md: 'row' }}
       >
-        <Box as='h2' textStyle='h2'>
+        <Flex p={4} sx={{ mt: '0 !important' }} flex='none'>
+          <Center>
+            <Text as='h2' textStyle='h2'>
               {sectionTitle}
-        </Box>
+            </Text>
-      </Stack>
+          </Center>
+        </Flex>
 
-      <Stack spacing={4}>{children}</Stack>
+        {sectionDescription && (
+          <Center
+            p={4}
+            borderLeft={{ base: 'none', md: '2px solid #11866f' }}
+            borderTop={{ base: '2px solid #11866f', md: 'none' }}
+          >
+            {sectionDescription}
+          </Center>
+        )}
+      </Flex>
+
+      <Stack spacing={4} sx={{ mt: '0 !important' }}>
+        {children}
+      </Stack>
     </Stack>
   );
 };

src/components/UI/downloads/SpecificVersionsSection.tsx

@@ -0,0 +1,42 @@
+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/components/UI/homepage/HomeHero.tsx

@@ -19,7 +19,7 @@ export const HomeHero: FC = () => {
           textStyle='h1'
           mb={{ base: 2, md: 4 }}
           textAlign={{ base: 'center', md: 'left' }}
-          fontSize={{ base: '3rem', md: '6rem' }}
+          fontSize={{ base: '5xl', md: '8xl' }}
           lineHeight={{ md: '6rem' }}
           fontWeight='500'
         >

src/components/layouts/Footer.tsx

@@ -82,7 +82,7 @@ export const Footer: FC = () => {
             }}
             borderColor='brand.light.primary !important'
             _hover={{
-              bg: 'brand.light.primary',
+              bg: 'brand.light.primary'
             }}
             alignItems='center'
             p={4}
@@ -94,7 +94,7 @@ export const Footer: FC = () => {
                   height={8}
                   _groupHover={{
                     svg: {
-                      path:{fill: 'yellow.50 !important'}
+                      path: { fill: 'yellow.50 !important' }
                     }
                   }}
                 />
@@ -106,7 +106,7 @@ export const Footer: FC = () => {
             data-group
             flex={1}
             _hover={{
-              bg: 'brand.light.primary',
+              bg: 'brand.light.primary'
             }}
             alignItems='center'
             borderWidth='2px'
@@ -121,7 +121,7 @@ export const Footer: FC = () => {
                   height={8}
                   _groupHover={{
                     svg: {
-                      path:{fill: 'yellow.50 !important'}
+                      path: { fill: 'yellow.50 !important' }
                     }
                   }}
                 />
@@ -133,7 +133,7 @@ export const Footer: FC = () => {
             data-group
             flex={1}
             _hover={{
-              bg: 'brand.light.primary',
+              bg: 'brand.light.primary'
             }}
             alignItems='center'
             p={4}
@@ -145,7 +145,7 @@ export const Footer: FC = () => {
                   height={7}
                   _groupHover={{
                     svg: {
-                      path:{fill: 'yellow.50 !important'}
+                      path: { fill: 'yellow.50 !important' }
                     }
                   }}
                 />

src/constants.ts

@@ -66,3 +66,19 @@ export const DOWNLOAD_OPENPGP_DEVELOPER_HEADERS = [
   'OpenPGP Key',
   'Fingerprint'
 ];
+
+// GitHub urls
+export const LATEST_GETH_RELEASE_URL =
+  'https://api.github.com/repos/ethereum/go-ethereum/releases/latest';
+export const ALL_GETH_RELEASES_URL = 'https://api.github.com/repos/ethereum/go-ethereum/releases';
+export const ALL_GETH_COMMITS_URL = 'https://api.github.com/repos/ethereum/go-ethereum/commits/';
+
+export const LINUX_BINARY_BASE_URL =
+  'https://gethstore.blob.core.windows.net/builds/geth-linux-amd64-';
+export const MACOS_BINARY_BASE_URL =
+  'https://gethstore.blob.core.windows.net/builds/geth-darwin-amd64-';
+export const WINDOWS_BINARY_BASE_URL =
+  'https://gethstore.blob.core.windows.net/builds/geth-windows-amd64-';
+
+export const LATEST_SOURCES_BASE_URL = 'https://github.com/ethereum/go-ethereum/archive/';
+export const RELEASE_NOTES_BASE_URL = 'https://github.com/ethereum/go-ethereum/releases/tag/';

src/pages/downloads.tsx

@@ -1,22 +1,100 @@
-import { Code, Link, ListItem, Stack, Text, UnorderedList } from '@chakra-ui/react';
+import { Center, Code, Flex, Link, ListItem, Stack, Text, UnorderedList } from '@chakra-ui/react';
-import type { NextPage } from 'next';
+import type { GetServerSideProps, 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 {
+  ALL_GETH_COMMITS_URL,
   DEFAULT_BUILD_AMOUNT_TO_SHOW,
   DOWNLOAD_OPENPGP_BUILD_HEADERS,
   DOWNLOAD_OPENPGP_DEVELOPER_HEADERS,
-  GETH_REPO_URL
+  GETH_REPO_URL,
+  LATEST_GETH_RELEASE_URL,
+  LATEST_SOURCES_BASE_URL,
+  LINUX_BINARY_BASE_URL,
+  MACOS_BINARY_BASE_URL,
+  RELEASE_NOTES_BASE_URL,
+  WINDOWS_BINARY_BASE_URL
 } from '../constants';
 
 import { testDownloadData } from '../data/test/download-testdata';
 import { pgpBuildTestData } from '../data/test/pgpbuild-testdata';
 import { pgpDeveloperTestData } from '../data/test/pgpdeveloper-testdata';
 
-const DownloadsPage: NextPage = () => {
+export const getServerSideProps: GetServerSideProps = async () => {
+  // Latest release name & version number
+  const { versionNumber, releaseName } = await fetch(LATEST_GETH_RELEASE_URL)
+    .then(response => response.json())
+    .then(release => {
+      return {
+        versionNumber: release.tag_name,
+        releaseName: release.name
+      };
+    });
+  // Latest release commit hash
+  const commit = await fetch(`${ALL_GETH_COMMITS_URL}/${versionNumber}`)
+    .then(response => response.json())
+    .then(commit => commit.sha.slice(0, 8));
+
+  // Latest binaries urls
+  const LATEST_LINUX_BINARY_URL = `${LINUX_BINARY_BASE_URL}${versionNumber.slice(
+    1
+  )}-${commit}.tar.gz`;
+  const LATEST_MACOS_BINARY_URL = `${MACOS_BINARY_BASE_URL}${versionNumber.slice(
+    1
+  )}-${commit}.tar.gz`;
+  const LATEST_WINDOWS_BINARY_URL = `${WINDOWS_BINARY_BASE_URL}${versionNumber.slice(
+    1
+  )}-${commit}.exe`;
+
+  // Sources urls
+  const LATEST_SOURCES_URL = `${LATEST_SOURCES_BASE_URL}${versionNumber}.tar.gz`;
+  const RELEASE_NOTES_URL = `${RELEASE_NOTES_BASE_URL}${versionNumber}`;
+
+  const LATEST_RELEASES_DATA = {
+    versionNumber,
+    releaseName,
+    urls: {
+      LATEST_LINUX_BINARY_URL,
+      LATEST_MACOS_BINARY_URL,
+      LATEST_WINDOWS_BINARY_URL,
+      LATEST_SOURCES_URL,
+      RELEASE_NOTES_URL
+    }
+  };
+
+  return {
+    props: {
+      data: { LATEST_RELEASES_DATA }
+    }
+  };
+};
+
+interface Props {
+  data: {
+    // TODO: define interfaces after adding the rest of the logic
+    LATEST_RELEASES_DATA: {
+      versionNumber: string;
+      releaseName: string;
+      urls: {
+        LATEST_LINUX_BINARY_URL: string;
+        LATEST_MACOS_BINARY_URL: string;
+        LATEST_WINDOWS_BINARY_URL: string;
+        LATEST_SOURCES_URL: string;
+        RELEASE_NOTES_URL: string;
+      };
+    };
+  };
+}
+
+const DownloadsPage: NextPage<Props> = ({ data }) => {
   const [amountStableReleases, updateAmountStables] = useState(DEFAULT_BUILD_AMOUNT_TO_SHOW);
   const [amountDevelopBuilds, updateAmountDevelopBuilds] = useState(DEFAULT_BUILD_AMOUNT_TO_SHOW);
 
@@ -28,35 +106,27 @@ const DownloadsPage: NextPage = () => {
     updateAmountDevelopBuilds(amountDevelopBuilds + 10);
   };
 
+  const {
+    LATEST_RELEASES_DATA: { releaseName, versionNumber, urls }
+  } = data;
+
   return (
     <>
       {/* TODO: add PageMetadata */}
 
       <main>
         <Stack spacing={4}>
-          {/* TODO: replace hardcoded strings with build information */}
           <DownloadsHero
-            currentBuildName={'Sentry Omega'}
+            currentBuild={releaseName}
-            currentBuildVersion={'v1.10.23'}
+            currentBuildVersion={versionNumber}
-            linuxBuildURL={
+            linuxBuildURL={urls.LATEST_LINUX_BINARY_URL}
-              'https://gethstore.blob.core.windows.net/builds/geth-linux-amd64-1.10.25-69568c55.tar.gz'
+            macOSBuildURL={urls.LATEST_MACOS_BINARY_URL}
-            }
+            windowsBuildURL={urls.LATEST_WINDOWS_BINARY_URL}
-            macOSBuildURL={
+            sourceCodeURL={urls.LATEST_SOURCES_URL}
-              'https://gethstore.blob.core.windows.net/builds/geth-darwin-amd64-1.10.25-69568c55.tar.gz'
+            releaseNotesURL={urls.RELEASE_NOTES_URL}
-            }
-            releaseNotesURL={''}
-            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'
-            }
           />
 
-          <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,10 +162,11 @@ const DownloadsPage: NextPage = () => {
                 Signatures for details).
               </Text>
             </Stack>
-          </DownloadsSection>
+          </SpecificVersionsSection>
 
-          <DownloadsSection sectionTitle='Stable releases' id='stablereleases'>
+          <DownloadsSection
-            <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
+            id='stablereleases'
+            sectionDescription={
               <Text textStyle='quick-link-text'>
                 These are the current and previous stable releases of go-ethereum, updated
                 automatically when a new version is tagged in our{' '}
@@ -103,12 +174,30 @@ const DownloadsPage: NextPage = () => {
                   GitHub repository.
                 </Link>
               </Text>
-            </Stack>
+            }
-
+            sectionTitle='Stable releases'
+          >
             {/* TODO: swap test data for real data */}
             <DownloadsTable data={testDownloadData.slice(0, amountStableReleases)} />
 
-            <Stack sx={{ mt: '0 !important' }}>
+            <Flex
+              sx={{ mt: '0 !important' }}
+              flexDirection={{ base: 'column', md: 'row' }}
+              justifyContent='space-between'
+            >
+              <Stack p={4} display={{ base: 'none', md: 'block' }}>
+                <Center>
+                  {/* TODO: swap testDownloadData with actual data */}
+                  <Text>
+                    Showing {amountStableReleases} latest releases of a total{' '}
+                    {testDownloadData.length} releases
+                  </Text>
+                </Center>
+              </Stack>
+              <Stack
+                sx={{ mt: '0 !important' }}
+                borderLeft={{ base: 'none', md: '2px solid #11866f' }}
+              >
                 <Link as='button' variant='button-link-secondary' onClick={showMoreStableReleases}>
                   <Text
                     fontFamily='"JetBrains Mono", monospace'
@@ -121,10 +210,12 @@ const DownloadsPage: NextPage = () => {
                   </Text>
                 </Link>
               </Stack>
+            </Flex>
           </DownloadsSection>
 
-          <DownloadsSection sectionTitle='Develop builds' id='developbuilds'>
+          <DownloadsSection
-            <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
+            id='developbuilds'
+            sectionDescription={
               <Text textStyle='quick-link-text'>
                 These are the develop snapshots of go-ethereum, updated automatically when a new
                 commit is pushed into our{' '}
@@ -132,12 +223,30 @@ const DownloadsPage: NextPage = () => {
                   GitHub repository.
                 </Link>
               </Text>
-            </Stack>
+            }
-
+            sectionTitle='Develop builds'
+          >
             {/* TODO: swap for real data */}
             <DownloadsTable data={testDownloadData.slice(0, amountDevelopBuilds)} />
 
-            <Stack sx={{ mt: '0 !important' }}>
+            <Flex
+              sx={{ mt: '0 !important' }}
+              flexDirection={{ base: 'column', md: 'row' }}
+              justifyContent='space-between'
+            >
+              <Stack p={4} display={{ base: 'none', md: 'block' }}>
+                <Center>
+                  {/* TODO: swap testDownloadData with actual data */}
+                  <Text>
+                    Showing {amountDevelopBuilds} latest releases of a total{' '}
+                    {testDownloadData.length} releases
+                  </Text>
+                </Center>
+              </Stack>
+              <Stack
+                sx={{ mt: '0 !important' }}
+                borderLeft={{ base: 'none', md: '2px solid #11866f' }}
+              >
                 <Link as='button' variant='button-link-secondary' onClick={showMoreDevelopBuilds}>
                   <Text
                     fontFamily='"JetBrains Mono", monospace'
@@ -150,15 +259,18 @@ const DownloadsPage: NextPage = () => {
                   </Text>
                 </Link>
               </Stack>
+            </Flex>
           </DownloadsSection>
 
-          <DownloadsSection sectionTitle='OpenPGP Signatures' id='pgpsignatures'>
+          <DownloadsSection
-            <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
+            id='pgpsignatures'
+            sectionDescription={
               <Text textStyle='quick-link-text'>
                 All the binaries available from this page are signed via our build server PGP keys:
               </Text>
-            </Stack>
+            }
-
+            sectionTitle='OpenPGP Signatures'
+          >
             {/* TODO: swap for real data */}
             <Stack borderBottom='2px solid' borderColor='brand.light.primary'>
               <DataTable columnHeaders={DOWNLOAD_OPENPGP_BUILD_HEADERS} data={pgpBuildTestData} />
@@ -173,37 +285,67 @@ const DownloadsPage: NextPage = () => {
             </Stack>
           </DownloadsSection>
 
-          <DownloadsSection sectionTitle='Importing keys and verifying builds' id='importingkeys'>
+          <DownloadsSection id='importingkeys' sectionTitle='Importing keys and verifying builds'>
-            <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
+            <Flex
+              p={4}
+              borderBottom='2px solid'
+              borderColor='brand.light.primary'
+              gap={4}
+              flexDirection={{ base: 'column', md: 'row' }}
+            >
+              <Stack flex={1}>
                 <Text textStyle='quick-link-text'>
-                You can import the build server public keys by grabbing the individual keys directly
+                  You can import the build server public keys by grabbing the individual keys
-                from the keyserver network:
+                  directly from the keyserver network:
                 </Text>
+              </Stack>
 
+              <Stack flex={1} w={'100%'}>
                 {/* TODO: These keys depends on the binary */}
                 <Code p={4}>gpg --recv-keys F9585DE6 C2FF8BBF 9BA28146 7B9E2481 D2A67EAC</Code>
               </Stack>
+            </Flex>
 
-            <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
+            <Flex
+              p={4}
+              borderBottom='2px solid'
+              borderColor='brand.light.primary'
+              gap={4}
+              flexDirection={{ base: 'column', md: 'row' }}
+            >
+              <Stack flex={1}>
                 <Text textStyle='quick-link-text'>
                   Similarly you can import all the developer public keys by grabbing them directly
                   from the keyserver network:
                 </Text>
+              </Stack>
 
+              <Stack flex={1} w={'100%'}>
                 {/* TODO: These are developer keys, do we need to change? */}
                 <Code p={4}>gpg --recv-keys E058A81C 05A5DDF0 1CCB7DD2</Code>
               </Stack>
+            </Flex>
 
-            <Stack p={4}>
+            <Flex
+              p={4}
+              borderBottom='2px solid'
+              borderColor='brand.light.primary'
+              gap={4}
+              flexDirection={{ base: 'column', md: 'row' }}
+            >
+              <Stack flex={1}>
                 <Text textStyle='quick-link-text'>
                   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>
+              </Stack>
 
+              <Stack flex={1} w={'100%'}>
                 {/* TODO: These keys depends on the binary */}
                 <Code p={4}>gpg --verify geth-linux-amd64-1.5.0-d0c820ac.tar.gz.asc</Code>
               </Stack>
+            </Flex>
           </DownloadsSection>
         </Stack>
       </main>

src/theme/components/Button.ts

@@ -12,6 +12,19 @@ export const Button = {
         boxShadow: 'inset 0 0 0 2px #06fece !important'
       },
       _active: { borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }
+    },
+    downloadsHeader: {
+      py: '8px',
+      px: '32px',
+      borderRadius: 0,
+      width: { base: '188px', md: 'auto' },
+      bg: 'brand.light.primary',
+      _hover: { bg: 'brand.light.secondary' },
+      _focus: {
+        bg: 'brand.light.primary',
+        boxShadow: 'inset 0 0 0 2px #06fece !important'
+      },
+      _active: { borderTop: '4px solid', borderColor: 'green.200' }
     }
   }
 };

src/theme/foundations/textStyles.ts

@@ -67,7 +67,13 @@ export const textStyles = {
   'downloads-button-label': {
     fontFamily: '"JetBrains Mono", monospace',
     color: 'yellow.50',
-    fontSize: 'xs',
+    fontSize: { base: 'md', lg: 'xl' },
+    textTransform: 'uppercase'
+  },
+  'downloads-button-sublabel': {
+    fontFamily: '"JetBrains Mono", monospace',
+    color: 'yellow.50',
+    fontSize: { base: 'xs', lg: 'sm' },
     textTransform: 'uppercase'
   },
   'download-tab-label': {