diff options
Diffstat (limited to 'packages/website/ts/@next/pages/landing.tsx')
| -rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 88 |
1 files changed, 66 insertions, 22 deletions
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 9be2ee4da..d207bd9ff 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -5,7 +5,7 @@ import { colors } from 'ts/style/colors' import { Button, ButtonWrap } from 'ts/@next/components/button'; import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; -import { Heading, Intro, Text } from 'ts/@next/components/text'; +import { Heading, Paragraph } from 'ts/@next/components/text'; import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg'; @@ -18,9 +18,14 @@ export const NextLanding = () => ( <SiteWrap> <Section> <Wrap> - <Column colWidth="2/3"> - <Heading>Powering Decentralized Exchange</Heading> - <Intro>0x is the best solution for adding exchange functionality to your business.</Intro> + <Column colWidth="1/2"> + <Heading size="large"> + Powering Decentralized Exchange + </Heading> + + <Paragraph size="medium"> + 0x is the best solution for adding exchange functionality to your business. + </Paragraph> <ButtonWrap> <Button inline> @@ -33,18 +38,69 @@ export const NextLanding = () => ( </ButtonWrap> </Column> - <Column colWidth="1/3"> - <ProtocolIcon /> + <Column colWidth="1/2"> + <Icon as={logoOutlined as 'svg'} /> </Column> </Wrap> </Section> <Section bgColor={colors.backgroundDark}> - <WrapCentered> - <Icon><LogoOutlined /></Icon> - <Text size="medium">0x is the best solution for adding exchange functionality to your business.</Text> - <Text size="medium">Discover how developers use 0x (need arrow + line under)</Text> + <WrapCentered width="narrow"> + <Icon as={protocol as 'svg'} /> + + <Paragraph size="large" center> + 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial instruments to assets that could have near existed before. + </Paragraph> + + <Button href="#" transparent> + Discover how developers use 0x + </Button> </WrapCentered> + + <Wrap> + {/* NOTE: this probably should be withComponent as part of a <dl> */} + <Column colWidth="1/3"> + <Heading size="medium" center> + 873,435 + </Heading> + + <Paragraph muted={0.4} center noMargin> + Number of transactions + </Paragraph> + </Column> + + <Column colWidth="1/3"> + <Heading size="medium" center> + $203M + </Heading> + + <Paragraph muted={0.4} center noMargin> + Total volume + </Paragraph> + </Column> + + <Column colWidth="1/3"> + <Heading size="medium" center> + 227,372 + </Heading> + + <Paragraph muted={0.4} center noMargin> + Number of relayers + </Paragraph> + </Column> + </Wrap> + </Section> + + <Section> + <Wrap> + <Column bgColor="#003831" colWidth="1/2"> + This is a 2 COLUMN section + </Column> + + <Column bgColor="#003831" colWidth="1/2"> + Again a 2 column section + </Column> + </Wrap> </Section> <Section> @@ -95,17 +151,5 @@ export const NextLanding = () => ( </Column> </Wrap> </Section> - - <Section> - <Wrap> - <Column colWidth="1/2"> - This is a 2 COLUMN section - </Column> - - <Column colWidth="1/2"> - Again a 2 column section - </Column> - </Wrap> - </Section> </SiteWrap> ); |