diff options
Diffstat (limited to 'packages/website/ts/@next/components/sections/landing')
4 files changed, 83 insertions, 75 deletions
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx index 4c246ec3e..22abe6c26 100644 --- a/packages/website/ts/@next/components/sections/landing/about.tsx +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -1,13 +1,18 @@ import * as React from 'react'; -import {Button, ButtonWrap, Link} from 'ts/@next/components/button'; +import styled from 'styled-components'; + +import {Link} from 'ts/@next/components/button'; import {Icon, InlineIconWrap} from 'ts/@next/components/icon'; +import {Column, FlexWrap, Section} from 'ts/@next/components/newLayout'; import {Heading, Paragraph} from 'ts/@next/components/text'; -import {colors} from 'ts/style/colors'; -import {Section} from 'ts/@next/components/newLayout'; +interface FigureProps { + value: string; + description: string; +} export const SectionLandingAbout = () => ( - <Section bgColor="dark"> + <Section bgColor="dark" isTextCentered={true}> <InlineIconWrap> <Icon name="coin" size="small" /> <Icon name="coin" size="small" /> @@ -39,8 +44,48 @@ export const SectionLandingAbout = () => ( style={{ width: '340px', borderColor: '#3C4746', - margin: '60px auto 0 auto', + margin: '60px auto', }} /> + + <FlexWrap as="dl"> + <Figure + value="873,435" + description="Number of Transactions" + /> + + <Figure + value="$203M" + description="Total Volume" + /> + + <Figure + value="227,372" + description="Number of Relayers" + /> + </FlexWrap> </Section> ); + +const Figure = (props: FigureProps) => ( + <Column padding="0 30px"> + <FigureValue> + {props.value} + </FigureValue> + <FigureDescription> + {props.description} + </FigureDescription> + </Column> +); + +const FigureValue = styled.dt` + font-size: 50px; + font-size: 40px; + font-weight: 300; + margin-bottom: 15px; +`; + +const FigureDescription = styled.dd` + font-size: 18px; + color: #999999; +`; diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx index 302100ac9..8f6429328 100644 --- a/packages/website/ts/@next/components/sections/landing/clients.tsx +++ b/packages/website/ts/@next/components/sections/landing/clients.tsx @@ -1,10 +1,9 @@ import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; -import {BREAKPOINTS, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {Heading, Paragraph} from 'ts/@next/components/text'; -import {Section} from 'ts/@next/components/newLayout'; +import {Section, WrapGrid} from 'ts/@next/components/newLayout'; interface ProjectLogo { name: string; @@ -61,12 +60,10 @@ const projects: ProjectLogo[] = [ ]; export const SectionLandingClients = () => ( - <Section> - <WrapCentered> - <Heading size="small"> - Join the growing number of projects developing on 0x - </Heading> - </WrapCentered> + <Section isTextCentered={true}> + <Heading size="small"> + Join the growing number of projects developing on 0x + </Heading> <WrapGrid width="narrow" isWrapped={true}> {_.map(projects, (item: ProjectLogo, index) => ( @@ -90,13 +87,13 @@ const StyledProject = styled.div<StyledProjectInterface>` height: 100%; } - @media (min-width: ${BREAKPOINTS.mobile}) { + @media (min-width: 768px) { width: 120px; height: 120px; margin: 30px; } - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 768px) { width: 100px; height: 100px; margin: 15px; diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx index ad78a1ab4..4c06982e4 100644 --- a/packages/website/ts/@next/components/sections/landing/cta.tsx +++ b/packages/website/ts/@next/components/sections/landing/cta.tsx @@ -1,63 +1,31 @@ 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 {Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; import {Heading, Paragraph} from 'ts/@next/components/text'; -export const SectionLandingCta = () => ( - <Section> - <Wrap> - <Column - bgColor="#003831" - colWidth="1/2" - isPadLarge={true} - > - <WrapCentered> - <Icon - name="ready-to-build" - size="large" - margin={[0, 0, 'default', 0]} - /> - - <Paragraph size="medium" color="#00AE99" marginBottom="15px"> - Ready to build on 0x? - </Paragraph> - - <Link - href="#" - isTransparent={true} - isWithArrow={true} - > - Get Started - </Link> - </WrapCentered> - </Column> +import {Column, Section} from 'ts/@next/components/newLayout'; - <Column - bgColor="#003831" - colWidth="1/2" - isPadLarge={true} - > - <WrapCentered> - <Icon - name="ready-to-build" - size="large" - margin={[0, 0, 'default', 0]} - /> +import {BlockIconLink} from 'ts/@next/components/blockIconLink'; - <Paragraph size="medium" color="#00AE99" marginBottom="15px"> - Want help from the 0x team? - </Paragraph> - - <Link - href="#" - isTransparent={true} - isWithArrow={true} - > - Get in Touch - </Link> - </WrapCentered> - </Column> - </Wrap> +export const SectionLandingCta = () => ( + <Section + isPadded={false} + isFullWidth={true} + isFlex={true} + flexBreakpoint="900px" + > + <BlockIconLink + icon="" + title="Ready to build on 0x?" + linkLabel="Get Started" + linkUrl="#" + /> + <BlockIconLink + icon="coin" + title="Wat help from the 0x team?" + linkLabel="Get in Touch" + linkUrl="#" + /> </Section> ); diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx index 9c6ff7151..930b80e89 100644 --- a/packages/website/ts/@next/components/sections/landing/hero.tsx +++ b/packages/website/ts/@next/components/sections/landing/hero.tsx @@ -1,10 +1,8 @@ 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 {Button} from 'ts/@next/components/button'; import {Hero} from 'ts/@next/components/hero'; +import {LandingAnimation} from 'ts/@next/components/heroImage'; import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; @@ -13,11 +11,11 @@ export const SectionLandingHero = () => ( title="Powering Decentralized Exchange" description="0x is the best solution for adding exchange functionality to your business." figure={<LandingAnimation image={<LogoOutlined />} />} - actions={<Actions />} + actions={<HeroActions />} /> ); -const Actions = () => ( +const HeroActions = () => ( <> <Button isInline={true}> Get Started |