diff options
Diffstat (limited to 'packages/website/ts/components/sections/landing')
4 files changed, 254 insertions, 0 deletions
diff --git a/packages/website/ts/components/sections/landing/about.tsx b/packages/website/ts/components/sections/landing/about.tsx new file mode 100644 index 000000000..9c369d83a --- /dev/null +++ b/packages/website/ts/components/sections/landing/about.tsx @@ -0,0 +1,81 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { Button } from 'ts/components/button'; +import { Icon, InlineIconWrap } from 'ts/components/icon'; +import { Column, FlexWrap, Section } from 'ts/components/newLayout'; +import { Paragraph } from 'ts/components/text'; +import { WebsitePaths } from 'ts/types'; + +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 never existed before. + </Paragraph> + + <DeveloperLink href={`${WebsitePaths.Why}#cases`} isWithArrow={true} isAccentColor={true}> + Discover how developers use 0x + </DeveloperLink> + + <hr + style={{ + width: '100%', + maxWidth: '340px', + borderColor: '#3C4746', + margin: '60px auto', + }} + /> + + <FlexWrap as="dl"> + <Figure value="353K" description="Total Transactions" /> + + <Figure value="$447M" description="Total Volume" /> + + <Figure value="30+" description="Total Projects" /> + </FlexWrap> + </Section> +); + +const Figure = (props: FigureProps) => ( + <Column padding="0 30px"> + <FigureValue>{props.value}</FigureValue> + <FigureDescription>{props.description}</FigureDescription> + </Column> +); + +const DeveloperLink = styled(Button)` + @media (max-width: 500px) { + && { + white-space: pre-wrap; + line-height: 1.3; + } + } +`; + +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/components/sections/landing/clients.tsx b/packages/website/ts/components/sections/landing/clients.tsx new file mode 100644 index 000000000..9a68fbf4c --- /dev/null +++ b/packages/website/ts/components/sections/landing/clients.tsx @@ -0,0 +1,113 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; +import { Heading } from 'ts/components/text'; + +import { Section, WrapGrid } from 'ts/components/newLayout'; + +interface ProjectLogo { + name: string; + imageUrl?: string; + persistOnMobile?: boolean; +} + +interface StyledProjectInterface { + isOnMobile?: boolean; +} + +const projects: ProjectLogo[] = [ + { + name: 'Radar Relay', + imageUrl: 'images/clients/radar-relay.svg', + persistOnMobile: true, + }, + { + name: 'Paradex', + imageUrl: 'images/clients/paradex.svg', + persistOnMobile: true, + }, + { + name: 'Star Bit Ex', + imageUrl: 'images/clients/starbitex.svg', + }, + { + name: 'LedgerDex', + imageUrl: 'images/clients/ledgerdex.svg', + }, + { + name: 'OpenRelay', + imageUrl: 'images/clients/openrelay.svg', + persistOnMobile: true, + }, + { + name: 'Bamboo Relay', + imageUrl: 'images/clients/bamboo.svg', + persistOnMobile: true, + }, + { + name: 'dEX', + imageUrl: 'images/clients/ercdex.svg', + persistOnMobile: true, + }, + { + name: 'emoon', + imageUrl: 'images/clients/emoon.svg', + persistOnMobile: true, + }, + { + name: 'Gods Unchained', + imageUrl: 'images/clients/godsUnchained.svg', + }, + { + name: 'Instex', + imageUrl: 'images/clients/instex.svg', + }, + { + name: 'Lake Trade', + imageUrl: 'images/clients/laketrade.svg', + }, + { + name: 'Veil', + imageUrl: 'images/clients/veil.svg', + }, +]; + +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/components/sections/landing/cta.tsx b/packages/website/ts/components/sections/landing/cta.tsx new file mode 100644 index 000000000..ec5a58a58 --- /dev/null +++ b/packages/website/ts/components/sections/landing/cta.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; + +import { BlockIconLink } from 'ts/components/blockIconLink'; +import { Section } from 'ts/components/newLayout'; + +import { AnimatedChatIcon } from 'ts/components/animatedChatIcon'; +import { AnimatedCompassIcon } from 'ts/components/animatedCompassIcon'; +import { WebsitePaths } from 'ts/types'; + +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={WebsitePaths.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/components/sections/landing/hero.tsx b/packages/website/ts/components/sections/landing/hero.tsx new file mode 100644 index 000000000..489757286 --- /dev/null +++ b/packages/website/ts/components/sections/landing/hero.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; + +import { Button } from 'ts/components/button'; +import { Hero } from 'ts/components/hero'; +import { LandingAnimation } from 'ts/components/heroImage'; + +import { HeroAnimation } from 'ts/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://0x.org/docs" isInline={true}> + Get Started + </Button> + + <Button to={WebsitePaths.Why} isTransparent={true} isInline={true}> + Learn More + </Button> + </> +); |