mirror of
https://github.com/ethereum/go-ethereum.git
synced 2026-05-13 03:26:38 +00:00
feat: add homepage UI components
This commit is contained in:
Nicolás Quiroz
parent
6ba9dc891e
commit
25daae2324
7 changed files with 525 additions and 84 deletions
10
src/components/UI/homepage/Gopher.tsx
Normal file
10
src/components/UI/homepage/Gopher.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
111
src/components/UI/homepage/HomeHero.tsx
Normal file
111
src/components/UI/homepage/HomeHero.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
81
src/components/UI/homepage/HomeSection.tsx
Normal file
81
src/components/UI/homepage/HomeSection.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
155
src/components/UI/homepage/QuickLinks.tsx
Normal file
155
src/components/UI/homepage/QuickLinks.tsx
Normal file
|
|
@ -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'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>
|
||||||
|
);
|
||||||
|
};
|
||||||
4
src/components/UI/homepage/index.ts
Normal file
4
src/components/UI/homepage/index.ts
Normal file
|
|
@ -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 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 (
|
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>
|
<main>
|
||||||
<h1>
|
<Stack spacing={4}>
|
||||||
Welcome to <a href='https://nextjs.org'>Next.js!</a>
|
<HomeHero />
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p>
|
{/* SECTION: What is Geth */}
|
||||||
Get started by editing <code>pages/index.tsx</code>
|
<HomeSection
|
||||||
</p>
|
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>
|
||||||
|
|
||||||
<div>
|
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
||||||
<a href='https://nextjs.org/docs'>
|
Geth has been a core part of Etheruem since the very beginning. Geth was one of the
|
||||||
<h2>Documentation →</h2>
|
original Ethereum implementations making it the most battle-hardened and tested
|
||||||
<p>Find in-depth information about Next.js features and API.</p>
|
client.
|
||||||
</a>
|
</Text>
|
||||||
|
|
||||||
<a href='https://nextjs.org/learn'>
|
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
||||||
<h2>Learn →</h2>
|
Geth is an Ethereum{' '}
|
||||||
<p>Learn about Next.js in an interactive course with quizzes!</p>
|
<Text as='span' fontStyle='italic'>
|
||||||
</a>
|
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>
|
||||||
|
|
||||||
<a href='https://github.com/vercel/next.js/tree/canary/examples'>
|
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
||||||
<h2>Examples →</h2>
|
Running Geth alongside a consensus client turns a computer into an Ethereum node.
|
||||||
<p>Discover and deploy boilerplate example Next.js projects.</p>
|
</Text>
|
||||||
</a>
|
</HomeSection>
|
||||||
|
|
||||||
<a href='https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'>
|
{/* SECTION: What is Ethereum */}
|
||||||
<h2>Deploy →</h2>
|
<HomeSection
|
||||||
<p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
|
imgSrc='/images/pages/glyph-home-light.svg'
|
||||||
</a>
|
imgAltText='Ethereum glyph'
|
||||||
</div>
|
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'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}>
|
||||||
|
“Don't trust, verify”
|
||||||
|
</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'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>
|
</main>
|
||||||
|
</>
|
||||||
<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>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Home;
|
export default HomePage;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue