feat: add homepage UI components

src/components/UI/homepage/Gopher.tsx

@@ -0,0 +1,10 @@
+import { Image, Stack } from '@chakra-ui/react';
+import { FC } from 'react';
+
+export const Gopher: FC = () => {
+  return (
+    <Stack alignItems='center' p={4} border='2px solid' borderColor='brand.light.primary'>
+      <Image src='/images/pages/gopher-home-side-mobile.svg' alt='Gopher greeting' />
+    </Stack>
+  );
+};

src/components/UI/homepage/HomeHero.tsx

@@ -0,0 +1,111 @@
+import { Box, Button, Flex, Heading, Stack, Text } from '@chakra-ui/react';
+import { FC } from 'react';
+import NextLink from 'next/link';
+
+import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../../constants';
+
+export const HomeHero: FC = () => {
+  return (
+    <Stack border='2px solid' borderColor='brand.light.primary' px={4} py={{ base: 8, md: 5 }}>
+      <Box mb={4}>
+        <Heading
+          as='h1' // TODO: move text style to theme
+          fontFamily='"JetBrains Mono", monospace'
+          fontWeight={700}
+          fontSize='2.75rem'
+          lineHeight='3.375rem'
+          letterSpacing='5%'
+          color='brand.light.body'
+          mb={{ base: 2, md: 4 }}
+          textAlign={{ base: 'center', md: 'left' }}
+        >
+          go-ethereum
+        </Heading>
+
+        <Text
+          // TODO: move text style to theme
+          fontFamily='"JetBrains Mono", monospace'
+          fontWeight={700}
+          lineHeight='21px'
+          letterSpacing='0.05em'
+          textAlign={{ base: 'center', md: 'left' }}
+        >
+          Official Go implementation of the Ethereum protocol
+        </Text>
+      </Box>
+
+      <Flex
+        direction={{ base: 'column', md: 'row' }}
+        alignItems={{ base: 'center', md: 'flex-start' }}
+      >
+        <Flex direction='column' alignItems='center' mr={{ md: 6 }}>
+          {/* TODO: define button variants */}
+          <NextLink href={DOWNLOADS_PAGE} passHref>
+            {/* TODO: update text */}
+            <Button
+              as='a'
+              py='8px'
+              px='32px'
+              borderRadius={0}
+              width={{ base: '188px', md: 'auto' }}
+              // TODO: move to theme colors
+              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', pt: '4px' }}
+              mb={1}
+            >
+              <Text
+                fontFamily='"JetBrains Mono", monospace'
+                // TODO: move to theme colors
+                color='yellow.50'
+                fontWeight={700}
+                textTransform='uppercase'
+              >
+                Download
+              </Text>
+            </Button>
+          </NextLink>
+
+          <Text mt={1} mb={5} textStyle='hero-text-small'>
+            Get our latest releases
+          </Text>
+        </Flex>
+
+        <Flex direction='column' alignItems='center'>
+          {/* TODO: define button variants */}
+          <NextLink href={`${DOCS_PAGE}/getting-started`} passHref>
+            <Button
+              as='a'
+              py='8px'
+              px='32px'
+              borderRadius={0}
+              bg='#11866F'
+              _hover={{ bg: '#25453f' }}
+              _focus={{ bg: '#11866f', boxShadow: 'inset 0 0 0 2px #06fece !important' }}
+              _active={{ borderTop: '4px solid #06fece', pt: '4px' }}
+              mb={1}
+            >
+              <Text
+                fontFamily='"JetBrains Mono", monospace'
+                // TODO: move to theme colors
+                color='#F0F2E2'
+                fontWeight={700}
+                textTransform='uppercase'
+              >
+                Documentation
+              </Text>
+            </Button>
+          </NextLink>
+
+          <Text mt={1} fontSize='13px' fontFamily='"Inter", sans-serif' alignSelf='center'>
+            Read our documentation
+          </Text>
+        </Flex>
+      </Flex>
+    </Stack>
+  );
+};

src/components/UI/homepage/HomeSection.tsx

@@ -0,0 +1,81 @@
+import { Heading, Image, Link, Stack, Text } from '@chakra-ui/react';
+import { FC } from 'react';
+import NextLink from 'next/link';
+
+interface Props {
+  imgSrc?: string;
+  imgAltText?: string;
+  sectionTitle: string;
+  buttonLabel: string;
+  buttonHref: string;
+  children?: React.ReactNode;
+}
+
+export const HomeSection: FC<Props> = ({
+  imgSrc,
+  imgAltText,
+  sectionTitle,
+  buttonLabel,
+  buttonHref,
+  children
+}) => {
+  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={700}
+          fontSize='2.125rem'
+          lineHeight='auto'
+          letterSpacing='3%'
+          // TODO: move to theme colors
+          color='#1d242c'
+        >
+          {sectionTitle}
+        </Heading>
+      </Stack>
+
+      <Stack p={4} spacing={4} borderBottom='2px solid #11866f' sx={{ mt: '0 !important' }}>
+        {children}
+      </Stack>
+
+      <Stack sx={{ mt: '0 !important' }}>
+        <NextLink href={buttonHref} passHref>
+          <Link
+            color='#11866f'
+            bg='#d7f5ef'
+            _hover={{ textDecoration: 'none', bg: '#11866f', color: '#f0f2e2' }}
+            _focus={{
+              textDecoration: 'none',
+              bg: '#11866f',
+              color: '#f0f2e2',
+              boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
+            }}
+            _active={{ textDecoration: 'none', bg: '#25453f', color: '#f0f2e2' }}
+            isExternal={buttonHref.startsWith('http')}
+          >
+            <Text
+              fontFamily='"JetBrains Mono", monospace'
+              // TODO: move to theme colors
+              fontWeight={700}
+              textTransform='uppercase'
+              textAlign='center'
+              p={4}
+            >
+              {buttonLabel}
+            </Text>
+          </Link>
+        </NextLink>
+      </Stack>
+    </Stack>
+  );
+};

src/components/UI/homepage/QuickLinks.tsx

@@ -0,0 +1,155 @@
+import { Grid, GridItem, Heading, Link, Stack, Text } from '@chakra-ui/react';
+import { FC } from 'react';
+import NextLink from 'next/link';
+
+import { CONTRIBUTING_PAGE, DOCS_PAGE, FAQ_PAGE } from '../../../constants';
+
+export const QuickLinks: FC = () => {
+  return (
+    <Stack border='2px solid #11866f'>
+      <Stack p={4} borderBottom='2px solid #11866f'>
+        <Heading
+          // TODO: move text style to theme
+          as='h2'
+          fontFamily='"JetBrains Mono", monospace'
+          fontWeight={400}
+          fontSize='28px'
+          lineHeight='37px'
+          letterSpacing='0.04em'
+          // TODO: move to theme colors
+          color='#1D242C'
+        >
+          Quick Links
+        </Heading>
+      </Stack>
+
+      <Grid templateColumns='repeat(2, 1fr)' sx={{ mt: '0 !important' }}>
+        {/* get started */}
+        <GridItem borderRight='2px solid #11866f' borderBottom='2px solid #11866f'>
+          <Stack p={4} h='100%'>
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
+              Don&apos;t know where to start?
+            </Text>
+
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+              We can help.
+            </Text>
+          </Stack>
+        </GridItem>
+        <GridItem borderBottom='2px solid #11866f'>
+          <NextLink href={`${DOCS_PAGE}/getting-started`} passHref>
+            <Link _hover={{ textDecoration: 'none' }}>
+              <Stack
+                data-group
+                bg='#d7f5ef'
+                _hover={{ textDecoration: 'none', bg: '#11866f', color: '#f0f2e2' }}
+                _focus={{
+                  textDecoration: 'none',
+                  bg: '#11866f',
+                  color: '#f0f2e2',
+                  boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
+                }}
+                _active={{ textDecoration: 'none', bg: '#25453f', color: '#f0f2e2' }}
+                justifyContent='center'
+                h='100%'
+                p={4}
+              >
+                <Text
+                  fontFamily='"JetBrains Mono", monospace'
+                  // TODO: move to theme colors
+                  fontWeight={700}
+                  textTransform='uppercase'
+                  textAlign='center'
+                  color='#11866f'
+                  _groupHover={{ color: '#f0f2e2' }}
+                  _groupActive={{ color: '#f0f2e2' }}
+                  _groupFocus={{ color: '#f0f2e2' }}
+                >
+                  Get started
+                </Text>
+              </Stack>
+            </Link>
+          </NextLink>
+        </GridItem>
+
+        {/* faq */}
+        <GridItem borderRight='2px solid #11866f' borderBottom='2px solid #11866f'>
+          <Stack p={4} h='100%'>
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
+              Have doubts?
+            </Text>
+
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+              Check the FAQ section in the documentation.
+            </Text>
+          </Stack>
+        </GridItem>
+        <GridItem borderBottom='2px solid #11866f'>
+          <NextLink href={FAQ_PAGE} passHref>
+            <Link _hover={{ textDecoration: 'none' }}>
+              <Stack
+                data-group
+                bg='#d7f5ef'
+                _hover={{ textDecoration: 'none', bg: '#11866F', color: '#f0f2e2' }}
+                justifyContent='center'
+                h='100%'
+                p={4}
+              >
+                <Text
+                  fontFamily='"JetBrains Mono", monospace'
+                  // TODO: move to theme colors
+                  fontWeight={700}
+                  textTransform='uppercase'
+                  textAlign='center'
+                  color='#11866f'
+                  _groupHover={{ color: '#f0f2e2' }}
+                >
+                  Go to the FAQ
+                </Text>
+              </Stack>
+            </Link>
+          </NextLink>
+        </GridItem>
+
+        {/* how to contribute */}
+        <GridItem borderRight='2px solid #11866f'>
+          <Stack p={4} h='100%'>
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
+              Want to know how to contribute?
+            </Text>
+
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+              Get more information in the documentation.
+            </Text>
+          </Stack>
+        </GridItem>
+        <GridItem>
+          <NextLink href={CONTRIBUTING_PAGE} passHref>
+            <Link _hover={{ textDecoration: 'none' }}>
+              <Stack
+                data-group
+                bg='#d7f5ef'
+                _hover={{ textDecoration: 'none', bg: '#11866F', color: '#f0f2e2' }}
+                justifyContent='center'
+                h='100%'
+                p={4}
+              >
+                <Text
+                  fontFamily='"JetBrains Mono", monospace'
+                  // TODO: move to theme colors
+                  fontWeight={700}
+                  textTransform='uppercase'
+                  textAlign='center'
+                  color='#11866f'
+                  _groupHover={{ color: '#f0f2e2' }}
+                >
+                  How to contribute
+                </Text>
+              </Stack>
+            </Link>
+          </NextLink>
+        </GridItem>
+      </Grid>
+    </Stack>
+  );
+};

src/components/UI/homepage/index.ts

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

src/pages/homepage.md

@@ -1,36 +0,0 @@
----
-title: Home
-description: Geth homepage
----
-
-## What is Geth?
-
-Geth (go-ethereum) is a [Go](https://go.dev/) implementation of [Ethereum](http://ethereum.org) - a gateway into the decentralized web.
-
-Geth has been a core part of Etheruem since the very beginning. Geth was one of the original Ethereum implementations making it the most battle-hardened and tested client.
-
-Geth is an Ethereum _execution client_ meaning it handles transactions, deployment and execution of smart contracts and contains an embedded computer known as the _Ethereum Virtual Machine_.
-
-Running Geth alongside a consensus client turns a computer into an Ethereum node.
-
-## What is Ethereum?
-
-Ethereum is a technology for building apps and organizations, holding assets, transacting and communicating without being controlled by a central authority. It is the base of a new, decentralized internet.
-
-Read more on our [Ethereum page](/ethereum) or on [ethereum.org](http://ethereum.org).
-
-## Why run a node?
-
-Running your own node enables you to use Ethereum in a truly private, self-sufficient and trustless manner. You don't need to trust information you receive because you can verify the data yourself using your Geth instance.
-
-**"Don't trust, verify"**
-
-[Read more about running a node](http://https://ethereum.org/en/run-a-node/#main-content)
-
-## Contribute to Geth
-
-We welcome contributions from anyone on the internet, and are grateful for even the smallest of fixes! If you'd like to contribute to the Geth source code, please fork the [Github repository](https://github.com/ethereum/go-ethereum), fix, commit and send a pull request for the maintainers to review and merge into the main code base. See our [contribution guidelines](/content/docs/developers/contributing.md) for more information.
-
-## About the Team
-
-The Geth team comprises 10 developers distributed across the world. The Geth team is funded directly by [The Ethereum Foundation](https://ethereum.foundation).

src/pages/index.tsx

@@ -1,62 +1,178 @@
+import { Link, Stack, Text } from '@chakra-ui/react';
 import type { NextPage } from 'next';
-import Head from 'next/head';
-import Image from 'next/image';
 
-const Home: NextPage = () => {
+import { Gopher, HomeHero, HomeSection, QuickLinks } from '../components/UI/homepage';
+
+import {
+  CONTRIBUTING_PAGE,
+  DOCS_PAGE,
+  ETHEREUM_FOUNDATION_URL,
+  ETHEREUM_ORG_RUN_A_NODE_URL,
+  ETHEREUM_ORG_URL,
+  GETH_REPO_URL
+} from '../constants';
+
+const HomePage: NextPage = ({}) => {
   return (
-    <div>
+    <>
-      <Head>
+      {/* TODO: add PageMetadata */}
-        <title>Create Next App</title>
-        <meta name='description' content='Generated by create next app' />
-        <link rel='icon' href='/favicon.ico' />
-      </Head>
 
       <main>
-        <h1>
+        <Stack spacing={4}>
-          Welcome to <a href='https://nextjs.org'>Next.js!</a>
+          <HomeHero />
-        </h1>
+
-
+          {/* SECTION: What is Geth */}
-        <p>
+          <HomeSection
-          Get started by editing <code>pages/index.tsx</code>
+            imgSrc='/images/pages/gopher-home-front.svg'
-        </p>
+            imgAltText='Gopher greeting'
-
+            sectionTitle='What is Geth'
-        <div>
+            buttonLabel='Get started with Geth'
-          <a href='https://nextjs.org/docs'>
+            buttonHref={`${DOCS_PAGE}/getting-started`}
-            <h2>Documentation &rarr;</h2>
+          >
-            <p>Find in-depth information about Next.js features and API.</p>
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
-          </a>
+              Geth (go-ethereum) is a{' '}
-
+              <Link
-          <a href='https://nextjs.org/learn'>
+                href='https://go.dev/'
-            <h2>Learn &rarr;</h2>
+                isExternal
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
+                textDecoration='underline'
-          </a>
+                color='#11866f'
-
+                _hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
-          <a href='https://github.com/vercel/next.js/tree/canary/examples'>
+                _focus={{
-            <h2>Examples &rarr;</h2>
+                  color: '#11866f',
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
+                  boxShadow: '0 0 0 1px #11866f !important',
-          </a>
+                  textDecoration: 'none'
-
+                }}
-          <a href='https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'>
+                _pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
-            <h2>Deploy &rarr;</h2>
+              >
-            <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
+                Go
-          </a>
+              </Link>{' '}
-        </div>
+              implementation of{' '}
-      </main>
+              <Link
+                href={ETHEREUM_ORG_URL}
+                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' }}
+              >
+                Ethereum
+              </Link>{' '}
+              - a gateway into the decentralized web.
+            </Text>
+
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+              Geth has been a core part of Etheruem since the very beginning. Geth was one of the
+              original Ethereum implementations making it the most battle-hardened and tested
+              client.
+            </Text>
+
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+              Geth is an Ethereum{' '}
+              <Text as='span' fontStyle='italic'>
+                execution client
+              </Text>{' '}
+              meaning it handles transactions, deployment and execution of smart contracts and
+              contains an embedded computer known as the{' '}
+              <Text as='span' fontStyle='italic'>
+                Ethereum Virtual Machine
+              </Text>
+              .
+            </Text>
+
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+              Running Geth alongside a consensus client turns a computer into an Ethereum node.
+            </Text>
+          </HomeSection>
+
+          {/* SECTION: What is Ethereum */}
+          <HomeSection
+            imgSrc='/images/pages/glyph-home-light.svg'
+            imgAltText='Ethereum glyph'
+            sectionTitle='What is Ethereum'
+            buttonLabel='Learn more on Ethereum.org'
+            buttonHref={ETHEREUM_ORG_URL}
+          >
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+              Ethereum is a technology for building apps and organizations, holding assets,
+              transacting and communicating without being controlled by a central authority. It is
+              the base of a new, decentralized internet.
+            </Text>
+          </HomeSection>
+
+          {/* SECTION: Why run a Node */}
+          <HomeSection
+            imgSrc='/images/pages/gopher-home-nodes.svg'
+            imgAltText='Gopher staring at nodes'
+            sectionTitle='Why run a node?'
+            buttonLabel='Read more about running a node'
+            buttonHref={ETHEREUM_ORG_RUN_A_NODE_URL}
+          >
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+              Running your own node enables you to use Ethereum in a truly private, self-sufficient
+              and trustless manner. You don&apos;t need to trust information you receive because you
+              can verify the data yourself using your Geth instance.
+            </Text>
 
-      <footer>
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px' fontWeight={700}>
-        <a
+              &ldquo;Don&apos;t trust, verify&rdquo;
-          href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
+            </Text>
-          target='_blank'
+          </HomeSection>
-          rel='noopener noreferrer'
+
-        >
+          {/* SECTION:Contribute to Geth */}
-          Powered by{' '}
+          <HomeSection
-          <span>
+            sectionTitle='Contribute to Geth'
-            <Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} />
+            buttonLabel='Read our contribution guidelines'
-          </span>
+            buttonHref={CONTRIBUTING_PAGE}
-        </a>
+          >
-      </footer>
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
-    </div>
+              We welcome contributions from anyone on the internet, and are grateful for even the
+              smallest of fixes! If you&apos;d like to contribute to the Geth source code, please
+              fork the{' '}
+              <Link
+                href={GETH_REPO_URL}
+                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' }}
+              >
+                Github repository
+              </Link>
+              , fix, commit and send a pull request for the maintainers to review and merge into the
+              main code base.
+            </Text>
+          </HomeSection>
+
+          {/* SECTION: About the Team */}
+          <HomeSection
+            sectionTitle='About the Team'
+            buttonLabel='Read more about the Ethereum Foundation'
+            buttonHref={ETHEREUM_FOUNDATION_URL}
+          >
+            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+              The Geth team comprises 10 developers distributed across the world. The Geth team is
+              funded directly by The Ethereum Foundation.
+            </Text>
+          </HomeSection>
+
+          {/* TODO: replace with animated/video version */}
+          <Gopher />
+
+          <QuickLinks />
+        </Stack>
+      </main>
+    </>
   );
 };
 
-export default Home;
+export default HomePage;