feat: add homepage UI components

pull/26459/head^2
Nicolás Quiroz 2 years ago
parent 6ba9dc891e
commit 25daae2324
  1. 10
      src/components/UI/homepage/Gopher.tsx
  2. 111
      src/components/UI/homepage/HomeHero.tsx
  3. 81
      src/components/UI/homepage/HomeSection.tsx
  4. 155
      src/components/UI/homepage/QuickLinks.tsx
  5. 4
      src/components/UI/homepage/index.ts
  6. 36
      src/pages/homepage.md
  7. 222
      src/pages/index.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>
);
};

@ -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>
);
};

@ -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>
);
};

@ -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>
);
};

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

@ -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).

@ -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>
<title>Create Next App</title>
<meta name='description' content='Generated by create next app' />
<link rel='icon' href='/favicon.ico' />
</Head>
<>
{/* TODO: add PageMetadata */}
<main>
<h1>
Welcome to <a href='https://nextjs.org'>Next.js!</a>
</h1>
<p>
Get started by editing <code>pages/index.tsx</code>
</p>
<div>
<a href='https://nextjs.org/docs'>
<h2>Documentation &rarr;</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href='https://nextjs.org/learn'>
<h2>Learn &rarr;</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a href='https://github.com/vercel/next.js/tree/canary/examples'>
<h2>Examples &rarr;</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a href='https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'>
<h2>Deploy &rarr;</h2>
<p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
</a>
</div>
</main>
<Stack spacing={4}>
<HomeHero />
{/* SECTION: What is Geth */}
<HomeSection
imgSrc='/images/pages/gopher-home-front.svg'
imgAltText='Gopher greeting'
sectionTitle='What is Geth'
buttonLabel='Get started with Geth'
buttonHref={`${DOCS_PAGE}/getting-started`}
>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
Geth (go-ethereum) is a{' '}
<Link
href='https://go.dev/'
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' }}
>
Go
</Link>{' '}
implementation of{' '}
<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>
<footer>
<a
href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
target='_blank'
rel='noopener noreferrer'
>
Powered by{' '}
<span>
<Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} />
</span>
</a>
</footer>
</div>
{/* 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>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px' fontWeight={700}>
&ldquo;Don&apos;t trust, verify&rdquo;
</Text>
</HomeSection>
{/* SECTION:Contribute to Geth */}
<HomeSection
sectionTitle='Contribute to Geth'
buttonLabel='Read our contribution guidelines'
buttonHref={CONTRIBUTING_PAGE}
>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
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;

Loading…
Cancel
Save