diff options
Diffstat (limited to 'packages/website/ts/@next/components/sections/landing')
4 files changed, 62 insertions, 128 deletions
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx index 0efa25215..4c246ec3e 100644 --- a/packages/website/ts/@next/components/sections/landing/about.tsx +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -1,105 +1,46 @@ import * as React from 'react'; import {Button, ButtonWrap, Link} from 'ts/@next/components/button'; import {Icon, InlineIconWrap} from 'ts/@next/components/icon'; -import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {Heading, Paragraph} from 'ts/@next/components/text'; import {colors} from 'ts/style/colors'; -export const SectionLandingAbout = () => ( - <Section bgColor={colors.backgroundDark} isPadLarge={true}> - <WrapCentered width="narrow"> - <InlineIconWrap> - <Icon name="coin" size="small" /> - <Icon name="coin" size="small" /> - <Icon name="coin" size="small" /> - <Icon name="coin" size="small" /> - </InlineIconWrap> - - <Paragraph - size="large" - isCentered={true} - padding={['large', 0, 'default', 0]} - > - 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> - - <Link - href="#" - isTransparent={true} - isWithArrow={true} - isAccentColor={true} - > - Discover how developers use 0x - </Link> - - <hr - style={{ - width: '340px', - borderColor: '#3C4746', - margin: '60px auto 0 auto', - }} - /> - </WrapCentered> - - {/* Note you can also pass in a string "large/default" or a number for custom margins */} - <Wrap padding={['large', 0, 0, 0]}> - {/* NOTE: this probably should be withComponent as part of a <dl> */} - <Column colWidth="1/3" isNoPadding={true}> - <Heading - size="medium" - isCentered={true} - marginBottom="20px" - > - 873,435 - </Heading> +import {Section} from 'ts/@next/components/newLayout'; - <Paragraph - isMuted={0.4} - isCentered={true} - isNoMargin={true} - > - Number of transactions - </Paragraph> - </Column> - - <Column colWidth="1/3" isNoPadding={true}> - <Heading - size="medium" - isCentered={true} - marginBottom="20px" - > - $203M - </Heading> - - <Paragraph - isMuted={0.4} - isCentered={true} - marginBottom="20px" - > - Total volume - </Paragraph> - </Column> - - <Column colWidth="1/3" isNoPadding={true}> - <Heading - size="medium" - isCentered={true} - isNoMargin={true} - > - 227,372 - </Heading> - - <Paragraph - isMuted={0.4} - isCentered={true} - isNoMargin={true} - > - Number of relayers - </Paragraph> - </Column> - </Wrap> +export const SectionLandingAbout = () => ( + <Section bgColor="dark"> + <InlineIconWrap> + <Icon name="coin" size="small" /> + <Icon name="coin" size="small" /> + <Icon name="coin" size="small" /> + <Icon name="coin" size="small" /> + </InlineIconWrap> + + <Paragraph + size="large" + isCentered={true} + padding={['large', 0, 'default', 0]} + > + 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> + + <Link + href="#" + isTransparent={true} + isWithArrow={true} + isAccentColor={true} + > + Discover how developers use 0x + </Link> + + <hr + style={{ + width: '340px', + borderColor: '#3C4746', + margin: '60px auto 0 auto', + }} + /> </Section> ); diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx index a858f0c34..302100ac9 100644 --- a/packages/website/ts/@next/components/sections/landing/clients.tsx +++ b/packages/website/ts/@next/components/sections/landing/clients.tsx @@ -1,9 +1,11 @@ import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; -import {BREAKPOINTS, Section, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; +import {BREAKPOINTS, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {Heading, Paragraph} from 'ts/@next/components/text'; +import {Section} from 'ts/@next/components/newLayout'; + interface ProjectLogo { name: string; imageUrl?: string; @@ -59,7 +61,7 @@ const projects: ProjectLogo[] = [ ]; export const SectionLandingClients = () => ( - <Section isPadLarge={true}> + <Section> <WrapCentered> <Heading size="small"> Join the growing number of projects developing on 0x diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx index 2f853f95b..ad78a1ab4 100644 --- a/packages/website/ts/@next/components/sections/landing/cta.tsx +++ b/packages/website/ts/@next/components/sections/landing/cta.tsx @@ -19,7 +19,7 @@ export const SectionLandingCta = () => ( margin={[0, 0, 'default', 0]} /> - <Paragraph size="medium" color="#00AE99"> + <Paragraph size="medium" color="#00AE99" marginBottom="15px"> Ready to build on 0x? </Paragraph> @@ -45,7 +45,7 @@ export const SectionLandingCta = () => ( margin={[0, 0, 'default', 0]} /> - <Paragraph size="medium" color="#00AE99"> + <Paragraph size="medium" color="#00AE99" marginBottom="15px"> Want help from the 0x team? </Paragraph> diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx index 9e7ed7402..9c6ff7151 100644 --- a/packages/website/ts/@next/components/sections/landing/hero.tsx +++ b/packages/website/ts/@next/components/sections/landing/hero.tsx @@ -1,39 +1,30 @@ import * as React from 'react'; import {Button, ButtonWrap} from 'ts/@next/components/button'; +import {LandingAnimation} from 'ts/@next/components/heroImage'; import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {Heading, Paragraph} from 'ts/@next/components/text'; +import {Hero} from 'ts/@next/components/hero'; + import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; export const SectionLandingHero = () => ( - <Section isPadLarge={true}> - <Wrap isReversed={true}> - <Column colWidth="1/2"> - <WrapCentered> - <LogoOutlined/> - </WrapCentered> - </Column> - - <Column colWidth="1/2" isMobileCentered={true}> - <Heading size="large"> - Powering Decentralized Exchange - </Heading> - - <Paragraph size="medium" isMuted={true}> - 0x is the best solution for adding<br /> - exchange functionality to your business. - </Paragraph> + <Hero + title="Powering Decentralized Exchange" + description="0x is the best solution for adding exchange functionality to your business." + figure={<LandingAnimation image={<LogoOutlined />} />} + actions={<Actions />} + /> +); - <ButtonWrap> - <Button isInline={true}> - Get Started - </Button> +const Actions = () => ( + <> + <Button isInline={true}> + Get Started + </Button> - <Button isTransparent={true} isInline={true}> - Learn More - </Button> - </ButtonWrap> - </Column> - </Wrap> - </Section> + <Button isTransparent={true} isInline={true}> + Learn More + </Button> + </> ); |