diff options
Diffstat (limited to 'packages/website/ts/@next/components/sections/landing')
4 files changed, 254 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx new file mode 100644 index 000000000..700d5e7d2 --- /dev/null +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -0,0 +1,91 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import {Button} from 'ts/@next/components/button'; +import {Icon, InlineIconWrap} from 'ts/@next/components/icon'; +import {Column, FlexWrap, Section} from 'ts/@next/components/newLayout'; +import {Paragraph} from 'ts/@next/components/text'; + +interface FigureProps { + value: string; + description: string; +} + +export const SectionLandingAbout = () => ( + <Section bgColor="dark" isTextCentered={true}> + <InlineIconWrap> + <Icon name="descriptionCoin" size="small" /> + <Icon name="descriptionCopy" size="small" /> + <Icon name="descriptionFlask" size="small" /> + <Icon name="descriptionBolt" size="small" /> + </InlineIconWrap> + + <Paragraph + size="large" + isCentered={true} + isMuted={1} + padding={['large', 0, 'default', 0]} + > + 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="#" + isWithArrow={true} + isAccentColor={true} + > + Discover how developers use 0x + </Button> + + <hr + style={{ + width: '340px', + borderColor: '#3C4746', + 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-weight: 300; + margin-bottom: 15px; + + @media (max-width: 768px) { + font-size: 40px; + } +`; + +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 new file mode 100644 index 000000000..8e2347d02 --- /dev/null +++ b/packages/website/ts/@next/components/sections/landing/clients.tsx @@ -0,0 +1,98 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; +import {Heading} from 'ts/@next/components/text'; + +import {Section, WrapGrid} from 'ts/@next/components/newLayout'; + +interface ProjectLogo { + name: string; + imageUrl?: string; + persistOnMobile?: boolean; +} + +interface StyledProjectInterface { + isOnMobile?: boolean; +} + +const projects: ProjectLogo[] = [ + { + name: 'Radar Relay', + imageUrl: 'images/@next/clients/client-radar.png', + persistOnMobile: true, + }, + { + name: 'Paradex', + imageUrl: 'images/@next/clients/client-paradex.png', + persistOnMobile: true, + }, + { + name: 'The Ocean X', + imageUrl: 'images/@next/clients/client-oceanx.png', + }, + { + name: 'Decent EX', + imageUrl: 'images/@next/clients/client-decent.png', + }, + { + name: 'dEX', + imageUrl: 'images/@next/clients/client-dex.png', + }, + { + name: 'OpenRelay', + imageUrl: 'images/@next/clients/client-openrelay.png', + persistOnMobile: true, + }, + { + name: 'Amadeus', + imageUrl: 'images/@next/clients/client-amadeus.png', + persistOnMobile: true, + }, + { + name: 'DDEX', + imageUrl: 'images/@next/clients/client-ddex.png', + persistOnMobile: true, + }, +]; + +export const SectionLandingClients = () => ( + <Section isTextCentered={true}> + <Heading size="small"> + Join the growing number of projects developing on 0x + </Heading> + + <WrapGrid isWrapped={true}> + {_.map(projects, (item: ProjectLogo, index) => ( + <StyledProject + key={`client-${index}`} + isOnMobile={item.persistOnMobile} + > + <img src={item.imageUrl} alt={item.name} /> + </StyledProject> + ))} + </WrapGrid> + </Section> +); + +const StyledProject = styled.div<StyledProjectInterface>` + flex-shrink: 0; + + img { + object-fit: contain; + width: 100%; + height: 100%; + } + + @media (min-width: 768px) { + width: auto; + height: 50px; + margin: 30px; + } + + @media (max-width: 768px) { + width: auto; + height: 42px; + margin: 15px; + display: ${props => !props.isOnMobile && 'none'}; + } +`; diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx new file mode 100644 index 000000000..1a959a6e9 --- /dev/null +++ b/packages/website/ts/@next/components/sections/landing/cta.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; + +import {BlockIconLink} from 'ts/@next/components/blockIconLink'; +import {Section} from 'ts/@next/components/newLayout'; + +import {AnimatedChatIcon} from 'ts/@next/components/animatedChatIcon'; +import {AnimatedCompassIcon} from 'ts/@next/components/animatedCompassIcon'; + +interface Props { + onContactClick?: () => void; +} + +export const SectionLandingCta = (props: Props) => ( + <Section + isPadded={false} + isFlex={true} + maxWidth="auto" + wrapWidth="100%" + flexBreakpoint="900px" + > + <BlockIconLink + iconComponent={<AnimatedCompassIcon />} + title="Ready to build on 0x?" + linkLabel="Get Started" + linkUrl="https://0xproject.com/docs" + /> + <BlockIconLink + iconComponent={<AnimatedChatIcon />} + title="Want help from the 0x team?" + linkLabel="Get in Touch" + linkAction={props.onContactClick} + /> + </Section> +); diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx new file mode 100644 index 000000000..6bd34c46d --- /dev/null +++ b/packages/website/ts/@next/components/sections/landing/hero.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; + +import {Button} from 'ts/@next/components/button'; +import {Hero} from 'ts/@next/components/hero'; +import {LandingAnimation} from 'ts/@next/components/heroImage'; + +import {HeroAnimation} from 'ts/@next/components/heroAnimation'; +import { WebsitePaths } from 'ts/types'; + +export const SectionLandingHero = () => ( + <Hero + title="Powering Decentralized Exchange" + isLargeTitle={true} + isFullWidth={true} + description="0x is an open protocol that enables the peer-to-peer exchange of assets on the Ethereum blockchain." + figure={<LandingAnimation image={<HeroAnimation />} />} + actions={<HeroActions />} + /> +); + +const HeroActions = () => ( + <> + <Button href="https://0xproject.com/docs" isInline={true}> + Get Started + </Button> + + <Button to={WebsitePaths.Why} isTransparent={true} isInline={true}> + Learn More + </Button> + </> +); |