From 25daae23247f514135dc4a66eba204dfa76b3f23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= Date: Fri, 30 Sep 2022 10:27:05 -0300 Subject: [PATCH] feat: add homepage UI components --- src/components/UI/homepage/Gopher.tsx | 10 + src/components/UI/homepage/HomeHero.tsx | 111 +++++++++++ src/components/UI/homepage/HomeSection.tsx | 81 ++++++++ src/components/UI/homepage/QuickLinks.tsx | 155 ++++++++++++++ src/components/UI/homepage/index.ts | 4 + src/pages/homepage.md | 36 ---- src/pages/index.tsx | 222 ++++++++++++++++----- 7 files changed, 530 insertions(+), 89 deletions(-) create mode 100644 src/components/UI/homepage/Gopher.tsx create mode 100644 src/components/UI/homepage/HomeHero.tsx create mode 100644 src/components/UI/homepage/HomeSection.tsx create mode 100644 src/components/UI/homepage/QuickLinks.tsx create mode 100644 src/components/UI/homepage/index.ts delete mode 100644 src/pages/homepage.md diff --git a/src/components/UI/homepage/Gopher.tsx b/src/components/UI/homepage/Gopher.tsx new file mode 100644 index 0000000000..a98275fd17 --- /dev/null +++ b/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 ( + + Gopher greeting + + ); +}; diff --git a/src/components/UI/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx new file mode 100644 index 0000000000..562fca7343 --- /dev/null +++ b/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 ( + + + + go-ethereum + + + + Official Go implementation of the Ethereum protocol + + + + + + {/* TODO: define button variants */} + + {/* TODO: update text */} + + + + + Get our latest releases + + + + + {/* TODO: define button variants */} + + + + + + Read our documentation + + + + + ); +}; diff --git a/src/components/UI/homepage/HomeSection.tsx b/src/components/UI/homepage/HomeSection.tsx new file mode 100644 index 0000000000..cc14a51612 --- /dev/null +++ b/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 = ({ + imgSrc, + imgAltText, + sectionTitle, + buttonLabel, + buttonHref, + children +}) => { + return ( + + {!!imgSrc && ( + + {/* TODO: use NextImage */} + {imgAltText} + + )} + + + + {sectionTitle} + + + + + {children} + + + + + + + {buttonLabel} + + + + + + ); +}; diff --git a/src/components/UI/homepage/QuickLinks.tsx b/src/components/UI/homepage/QuickLinks.tsx new file mode 100644 index 0000000000..ed985e614e --- /dev/null +++ b/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 ( + + + + Quick Links + + + + + {/* get started */} + + + + Don't know where to start? + + + + We can help. + + + + + + + + + Get started + + + + + + + {/* faq */} + + + + Have doubts? + + + + Check the FAQ section in the documentation. + + + + + + + + + Go to the FAQ + + + + + + + {/* how to contribute */} + + + + Want to know how to contribute? + + + + Get more information in the documentation. + + + + + + + + + How to contribute + + + + + + + + ); +}; diff --git a/src/components/UI/homepage/index.ts b/src/components/UI/homepage/index.ts new file mode 100644 index 0000000000..861cb5112f --- /dev/null +++ b/src/components/UI/homepage/index.ts @@ -0,0 +1,4 @@ +export * from './Gopher'; +export * from './HomeHero'; +export * from './HomeSection'; +export * from './QuickLinks'; diff --git a/src/pages/homepage.md b/src/pages/homepage.md deleted file mode 100644 index a57c0a78f7..0000000000 --- a/src/pages/homepage.md +++ /dev/null @@ -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). diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 817ca2ac72..fc926bff3b 100644 --- a/src/pages/index.tsx +++ b/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 ( -
- - Create Next App - - - + <> + {/* TODO: add PageMetadata */}
-

- Welcome to Next.js! -

- -

- Get started by editing pages/index.tsx -

- -
- -

Documentation →

-

Find in-depth information about Next.js features and API.

- - - -

Learn →

-

Learn about Next.js in an interactive course with quizzes!

- - - -

Examples →

-

Discover and deploy boilerplate example Next.js projects.

- - - -

Deploy →

-

Instantly deploy your Next.js site to a public URL with Vercel.

- -
-
+ + + + {/* SECTION: What is Geth */} + + + Geth (go-ethereum) is a{' '} + + Go + {' '} + implementation of{' '} + + Ethereum + {' '} + - 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. + + - -
+ {/* SECTION: 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. + + + + {/* SECTION: 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” + + + + {/* SECTION: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 + + , fix, commit and send a pull request for the maintainers to review and merge into the + main code base. + + + + {/* SECTION: About the Team */} + + + The Geth team comprises 10 developers distributed across the world. The Geth team is + funded directly by The Ethereum Foundation. + + + + {/* TODO: replace with animated/video version */} + + + + + + ); }; -export default Home; +export default HomePage;