diff options
Diffstat (limited to 'packages/website/ts/@next/components')
6 files changed, 290 insertions, 3 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 14228083f..ea7f286b3 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -11,6 +11,7 @@ interface ButtonInterface { isNoBorder?: boolean; isNoPadding?: boolean; isWithArrow?: boolean; + isAccentColor?: boolean; hasIcon?: boolean | string; isInline?: boolean; href?: string; @@ -26,7 +27,7 @@ export const Button = styled.button<ButtonInterface>` display: ${props => props.isInline && 'inline-block'}; background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'}; border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'}; - color: ${props => props.color || props.theme.textColor}; + color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'}; text-align: center; font-size: ${props => props.isWithArrow ? '20px' : '18px'}; @@ -37,7 +38,7 @@ export const Button = styled.button<ButtonInterface>` } path { - fill: ${props => props.color || props.theme.textColor}; + fill: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)}; } `; diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx index 61f8f8f6f..07a882246 100644 --- a/packages/website/ts/@next/components/icon.tsx +++ b/packages/website/ts/@next/components/icon.tsx @@ -10,7 +10,7 @@ interface IconProps extends PaddingInterface { export const Icon: React.FunctionComponent<Props> = (props: Props) => { const IconSVG = Loadable({ - loader: () => import(`ts/@next/icons/illustrations/${props.name}.svg`), + loader: () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`), loading: () => 'Loading', }); 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..42062a2e1 --- /dev/null +++ b/packages/website/ts/@next/components/sections/landing/about.tsx @@ -0,0 +1,106 @@ +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', + margin: '0 auto', + borderColor: '#3C4746', + marginTop: '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} + isNoMargin={true} + > + 873,435 + </Heading> + + <Paragraph + isMuted={0.4} + isCentered={true} + isNoMargin={true} + > + Number of transactions + </Paragraph> + </Column> + + <Column colWidth="1/3" isNoPadding={true}> + <Heading + size="medium" + isCentered={true} + isNoMargin={true} + > + $203M + </Heading> + + <Paragraph + isMuted={0.4} + isCentered={true} + isNoMargin={true} + > + 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> + </Section> +); 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..c08a4ea48 --- /dev/null +++ b/packages/website/ts/@next/components/sections/landing/clients.tsx @@ -0,0 +1,78 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import styled from 'styled-components'; +import {Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; +import {Heading, Paragraph} from 'ts/@next/components/text'; + +interface ProjectLogo { + name: string; + imageUrl?: string; +} + +const projects: ProjectLogo[] = [ + { + name: 'Radar Relay', + imageUrl: '/images/@next/relayer-logos/logo_1.png', + }, + { + name: 'Paradex', + imageUrl: '/images/@next/relayer-logos/logo_5.png', + }, + { + name: 'Amadeus', + imageUrl: '/images/@next/relayer-logos/logo_3.png', + }, + { + name: 'The Ocean X', + imageUrl: '/images/@next/relayer-logos/logo_4.png', + }, + { + name: 'Paradex', + imageUrl: '/images/@next/relayer-logos/logo_5.png', + }, + { + name: 'Decent EX', + imageUrl: '/images/@next/relayer-logos/logo_2.1.png', + }, + { + name: 'dEX', + imageUrl: '/images/@next/relayer-logos/logo_2.2.png', + }, + { + name: 'OpenRelay', + imageUrl: '/images/@next/relayer-logos/logo_2.3.png', + }, + { + name: 'DDEX', + imageUrl: '/images/@next/relayer-logos/logo_2.png', + }, +]; + +export const SectionLandingClients = () => ( + <Section isPadLarge={true}> + <WrapCentered> + <Heading size="small">You're in good company</Heading> + </WrapCentered> + + <WrapGrid width="narrow" isWrapped={true}> + {_.map(projects, (item: ProjectLogo, index) => ( + <StyledProject key={`client-${index}`}> + <img src={item.imageUrl} alt={item.name} /> + </StyledProject> + ))} + </WrapGrid> + </Section> +); + +const StyledProject = styled.div` + width: 90px; + height: 90px; + flex-shrink: 0; + margin: 30px; + + img { + object-fit: contain; + width: 100%; + height: 100%; + } +`; 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..2f853f95b --- /dev/null +++ b/packages/website/ts/@next/components/sections/landing/cta.tsx @@ -0,0 +1,63 @@ +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'; + +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"> + Ready to build on 0x? + </Paragraph> + + <Link + href="#" + isTransparent={true} + isWithArrow={true} + > + Get Started + </Link> + </WrapCentered> + </Column> + + <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"> + Want help from the 0x team? + </Paragraph> + + <Link + href="#" + isTransparent={true} + isWithArrow={true} + > + Get in Touch + </Link> + </WrapCentered> + </Column> + </Wrap> + </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..e43ac41f2 --- /dev/null +++ b/packages/website/ts/@next/components/sections/landing/hero.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import {Button, ButtonWrap} from 'ts/@next/components/button'; +import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout'; +import {Heading, Paragraph} from 'ts/@next/components/text'; + +import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg'; + +export const SectionLandingHero = () => ( + <Section> + <Wrap> + <Column colWidth="1/2"> + <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> + + <ButtonWrap> + <Button isInline={true}> + Get Started + </Button> + + <Button isTransparent={true} isInline={true}> + Learn More + </Button> + </ButtonWrap> + </Column> + + <Column colWidth="1/2"> + <WrapCentered> + <LogoOutlined/> + </WrapCentered> + </Column> + </Wrap> + </Section> +); |