-
+
+
+
+ {/* 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;
diff --git a/src/theme/components/.delete-me b/src/theme/components/.delete-me
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/src/theme/components/Button.ts b/src/theme/components/Button.ts
new file mode 100644
index 000000000000..5d953f46c0e2
--- /dev/null
+++ b/src/theme/components/Button.ts
@@ -0,0 +1,17 @@
+export const Button = {
+ variants: {
+ primary: {
+ 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', pt: '4px' }
+ }
+ }
+};
diff --git a/src/theme/components/Link.ts b/src/theme/components/Link.ts
new file mode 100644
index 000000000000..295f82f5ff05
--- /dev/null
+++ b/src/theme/components/Link.ts
@@ -0,0 +1,30 @@
+export const Link = {
+ variants: {
+ 'button-link-secondary': {
+ color: 'brand.light.primary',
+ bg: 'green.50',
+ _hover: { textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' },
+ _focus: {
+ textDecoration: 'none',
+ bg: 'brand.light.primary',
+ color: 'yellow.50',
+ boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
+ },
+ _active: { textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' }
+ },
+ light: {
+ textDecoration: 'underline',
+ color: 'brand.light.primary',
+ _hover: { color: 'brand.light.body', textDecorationColor: 'brand.light.body' },
+ _focus: {
+ color: 'brand.light.primary',
+ boxShadow: '0 0 0 1px #11866f !important',
+ textDecoration: 'none'
+ },
+ _pressed: {
+ color: 'brand.light.secondary',
+ textDecorationColor: 'brand.light.secondary'
+ }
+ }
+ }
+};
diff --git a/src/theme/components/index.ts b/src/theme/components/index.ts
new file mode 100644
index 000000000000..4b249348b6ed
--- /dev/null
+++ b/src/theme/components/index.ts
@@ -0,0 +1,2 @@
+export * from './Button';
+export * from './Link';
diff --git a/src/theme/foundations/breakpoints.ts b/src/theme/foundations/breakpoints.ts
deleted file mode 100644
index f43deba73190..000000000000
--- a/src/theme/foundations/breakpoints.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const breakpoints = {
- xs: '320px',
- sm: '360px',
- md: '768px',
- lg: '1096px',
- xl: '1200px',
- '2xl': '1600px',
- '3xl': '2000px'
-};
diff --git a/src/theme/foundations/colors.ts b/src/theme/foundations/colors.ts
new file mode 100644
index 000000000000..2fc5df88a293
--- /dev/null
+++ b/src/theme/foundations/colors.ts
@@ -0,0 +1,16 @@
+export const colors = {
+ brand: {
+ light: {
+ primary: '#11866f',
+ secondary: '#25453f',
+ body: '#1d242c'
+ }
+ },
+ green: {
+ 50: '#d7f5ef',
+ 200: '#06fece'
+ },
+ yellow: {
+ 50: '#f0f2e2'
+ }
+};
diff --git a/src/theme/foundations/index.ts b/src/theme/foundations/index.ts
index 05b3824cdcd7..3e6332ffc5ad 100644
--- a/src/theme/foundations/index.ts
+++ b/src/theme/foundations/index.ts
@@ -1,2 +1,3 @@
-export * from './breakpoints';
+export * from './colors';
export * from './sizes';
+export * from './textStyles';
diff --git a/src/theme/foundations/sizes.ts b/src/theme/foundations/sizes.ts
index cfde7b238858..7cd50316be1a 100644
--- a/src/theme/foundations/sizes.ts
+++ b/src/theme/foundations/sizes.ts
@@ -1,7 +1,8 @@
export const sizes = {
container: {
- sm: '448px',
+ sm: '480px',
lg: '1096px',
- xl: '1200px'
+ xl: '1200px',
+ '2xl': '1536px'
}
};
diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts
new file mode 100644
index 000000000000..fa4bd9b9aef2
--- /dev/null
+++ b/src/theme/foundations/textStyles.ts
@@ -0,0 +1,60 @@
+export const textStyles = {
+ h1: {
+ fontFamily: '"JetBrains Mono", monospace',
+ fontWeight: 700,
+ fontSize: '2.75rem',
+ lineHeight: '3.375rem',
+ letterSpacing: '5%',
+ color: 'brand.light.body'
+ },
+ h2: {
+ fontFamily: '"JetBrains Mono", monospace',
+ fontWeight: 400,
+ fontSize: '1.5rem',
+ lineHeight: 'auto',
+ letterSpacing: '4%',
+ color: 'brand.light.body'
+ },
+ 'homepage-description': {
+ fontFamily: '"JetBrains Mono", monospace',
+ fontWeight: 700,
+ lineHeight: '21px',
+ letterSpacing: '0.05em',
+ textAlign: { base: 'center', md: 'left' }
+ },
+ 'homepage-primary-label': {
+ fontFamily: '"JetBrains Mono", monospace',
+ color: 'yellow.50',
+ fontWeight: 700,
+ textTransform: 'uppercase'
+ },
+ 'home-section-link-label': {
+ fontFamily: '"JetBrains Mono", monospace',
+ fontWeight: 700,
+ textTransform: 'uppercase',
+ textAlign: 'center',
+ p: 4
+ },
+ 'quick-link-text': {
+ fontFamily: '"Inter", sans-serif',
+ lineHeight: '26px'
+ },
+ 'quick-link-label': {
+ fontFamily: '"JetBrains Mono", monospace',
+ fontWeight: 700,
+ textTransform: 'uppercase',
+ textAlign: 'center',
+ color: 'brand.light.primary',
+ _groupHover: { color: 'yellow.50' },
+ _groupActive: { color: 'yellow.50' },
+ _groupFocus: { color: 'yellow.50' }
+ },
+ 'hero-text-small': {
+ fontSize: '13px',
+ fontFamily: '"Inter", sans-serif'
+ },
+ // TODO: refactor w/ semantic tokens for light/dark mode
+ 'link-light': {},
+ // TODO: refactor w/ semantic tokens for light/dark mode
+ 'text-light': {}
+};
diff --git a/src/theme/index.ts b/src/theme/index.ts
index f9be847dc223..cccdd60e096e 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,10 +1,23 @@
import { extendTheme } from '@chakra-ui/react';
-import { breakpoints, sizes } from './foundations';
+import { colors, sizes, textStyles } from './foundations';
+import { Button, Link } from './components';
const overrides = {
- breakpoints,
- sizes
+ colors,
+ components: {
+ Button,
+ Link
+ },
+ sizes,
+ styles: {
+ global: () => ({
+ body: {
+ bg: 'yellow.50'
+ }
+ })
+ },
+ textStyles
};
export default extendTheme(overrides);