diff options
Diffstat (limited to 'packages/website/ts/@next')
10 files changed, 259 insertions, 153 deletions
diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx index be3ded71f..cc3e88280 100644 --- a/packages/website/ts/@next/components/blockIconLink.tsx +++ b/packages/website/ts/@next/components/blockIconLink.tsx @@ -19,14 +19,41 @@ export const BlockIconLink = (props: Props) => ( size="large" margin={[0, 0, 'default', 0]} /> + + <Title> + {props.title} + </Title> + + <Link + isWithArrow={true} + isTransparent={true} + isNoBorder={true} + href={props.linkUrl} + > + {props.linkLabel} + </Link> </div> </Wrap> ); const Wrap = styled.div` + width: calc(50% - 15px); + height: 400px; padding: 40px; display: flex; + justify-content: center; align-items: center; text-align: center; background-color: ${props => props.theme.lightBgColor}; + + @media (max-width: 900px) { + width: 100%; + margin-top: 30px; + } +`; + +const Title = styled.h2` + font-size: 20px; + margin-bottom: 30px; + color: ${props => props.theme.linkColor}; `; diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx index 88ef6acdc..da72fe805 100644 --- a/packages/website/ts/@next/components/definition.tsx +++ b/packages/website/ts/@next/components/definition.tsx @@ -21,7 +21,7 @@ interface Props { } export const Definition = (props: Props) => ( - <Wrap isWithMargin={props.isWithMargin} isInline={props.isInline} isInlineIcon={props.isInlineIcon}> + <Wrap {...props}> <Icon name="ready-to-build" size={props.iconSize || 'medium'} @@ -60,7 +60,8 @@ const Wrap = styled.div` max-width: ${props => props.isInline && '354px'}; & + & { - margin-top: ${props => (props.isWithMargin && !props.isInlineIcon) ? '60px' : '120px'}; + margin-top: ${props => props.isInlineIcon && '120px'}; + margin-top: ${props => props.isWithMargin && '60px'}; } @media (min-width: 768px) { @@ -68,7 +69,7 @@ const Wrap = styled.div` display: ${props => props.isInlineIcon && 'flex'}; justify-content: ${props => props.isInlineIcon && 'space-between'}; align-items: ${props => props.isInlineIcon && 'center'}; - text-align: ${props => props.isInlineIcon && 'left'}; + text-align: ${props => (props.isInlineIcon || !props.isCentered) && 'left'}; } @media (max-width: 768px) { diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx index 9c2ed1ea8..d6f11b653 100644 --- a/packages/website/ts/@next/components/footer.tsx +++ b/packages/website/ts/@next/components/footer.tsx @@ -108,7 +108,12 @@ const LinkList = (props: LinkListProps) => ( </List> ); -const FooterSection = Section.withComponent('footer'); +const FooterSection = styled.section` + padding: 30px; + margin-top: 30px; + background-color: #181818; +`; + const FooterWrap = styled(FooterSection)` color: ${colors.white}; diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx index 8a3514bd9..8598b8f12 100644 --- a/packages/website/ts/@next/components/newLayout.tsx +++ b/packages/website/ts/@next/components/newLayout.tsx @@ -1,39 +1,99 @@ import * as React from 'react'; import styled from 'styled-components'; -interface Props { - isPadded: boolean; +interface WrapProps { + isFullWidth?: boolean; + isTextCentered?: boolean; +} + +interface SectionProps { + isPadded?: boolean; + isFullWidth?: boolean; + isFlex?: boolean; + flexBreakpoint?: string; + maxWidth?: string; bgColor?: 'dark' | 'light' | string; } -export const Section = (props: Props) => ( - <SectionBase bgColor={props.bgColor}> - <Wrap - isPadded={props.isPadded} - > - {props.children} - </Wrap> - </SectionBase> -); +interface FlexProps { + padding?: string; + isFlex?: boolean; +} -Section.defaultProps = { - isPadded: true, +interface ColumnProps { + padding?: string; +} + +export const Section = (props: SectionProps) => { + return ( + <SectionBase {...props}> + <Wrap {...props}> + {props.children} + </Wrap> + </SectionBase> + ); }; +export const Column = styled.div` + width: ${props => props.width}; + max-width: ${props => props.maxWidth}; + padding: ${props => props.padding}; + + @media (max-width: 768px) { + width: 100%; + margin-bottom: 60px; + } +`; + +export const FlexWrap = styled.div` + padding: ${props => props.padding}; + + @media (min-width: ${props => props.flexBreakpoint || '768px'}) { + display: ${props => props.isFlex && 'flex'}; + justify-content: ${props => props.isFlex && 'space-between'}; + } +`; + +export const WrapSticky = styled.div` + position: sticky; + top: ${props => props.offsetTop || '60px'}; +`; + const SectionBase = styled.section` - width: calc(100% - 60px); margin: 0 auto; - padding: 120px 0; + padding: ${props => props.isPadded && '120px 0'}; background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor}; @media (max-width: 768px) { - padding: 40px 0; + padding: ${props => props.isPadded && '40px 0'}; } `; -const Wrap = styled.div` +const Wrap = styled(FlexWrap)` width: calc(100% - 60px); - max-width: 895px; + max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')}; margin: 0 auto; - text-align: center; + text-align: ${props => props.isTextCentered && 'center'}; +`; + +export const WrapGrid = styled(Wrap)` + display: flex; + flex-wrap: ${props => props.isWrapped && `wrap`}; + justify-content: ${props => props.isCentered ? `center` : 'space-between'}; `; + +Section.defaultProps = { + isPadded: true, +}; + +FlexWrap.defaultProps = { + isFlex: true, +}; + +WrapGrid.defaultProps = { + isCentered: true, +}; + +Wrap.defaultProps = { + isFlex: false, +}; 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 diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 66c4138a1..fab5e62b6 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import styled from 'styled-components'; import {SiteWrap} from 'ts/@next/components/siteWrap'; import {SectionLandingAbout} from 'ts/@next/components/sections/landing/about'; @@ -6,6 +7,12 @@ import {SectionLandingClients} from 'ts/@next/components/sections/landing/client import {SectionLandingCta} from 'ts/@next/components/sections/landing/cta'; import {SectionLandingHero} from 'ts/@next/components/sections/landing/hero'; +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'; + interface Props { theme: { bgColor: string; diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index fc24fd665..d0d909949 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -10,12 +10,12 @@ import {Hero} from 'ts/@next/components/hero'; import { Banner } from 'ts/@next/components/banner'; import { Link } from 'ts/@next/components/button'; import { Icon } from 'ts/@next/components/icon'; -import { BREAKPOINTS, Column, Section, Wrap, WrapCentered, WrapSticky } from 'ts/@next/components/layout'; import { SiteWrap } from 'ts/@next/components/siteWrap'; import { Slide, Slider } from 'ts/@next/components/slider/slider'; import { Heading, Paragraph } from 'ts/@next/components/text'; import {Definition} from 'ts/@next/components/definition'; +import {Column, Section, WrapSticky} from 'ts/@next/components/newLayout'; const offersData = [ { @@ -95,8 +95,11 @@ export class NextWhy extends React.PureComponent { } /> - <Section bgColor={colors.backgroundDark} isPadLarge={true}> - <Wrap> + <Section + bgColor="dark" + isFlex={true} + maxWidth="1170px" + > <Definition title="Support for all Ethereum Standards" description="0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol..." @@ -117,12 +120,10 @@ export class NextWhy extends React.PureComponent { iconSize="large" isInline={true} /> - </Wrap> - </Section> + </Section> - <Section> - <Wrap> - <Column colWidth="1/3"> + <Section maxWidth="1170px" isFlex={true}> + <Column> <NavStickyWrap offsetTop="130px"> <ChapterLink offset="60" href="#benefits">Benefits</ChapterLink> <ChapterLink offset="60" href="#cases">Use Cases</ChapterLink> @@ -130,52 +131,49 @@ export class NextWhy extends React.PureComponent { </NavStickyWrap> </Column> - <Column colWidth="2/3"> - <SectionWrap id="benefits"> - <Heading size="medium">What 0x offers</Heading> - - {_.map(offersData, (item, index) => ( - <Definition - title={item.title} - description={item.description} - isWithMargin={true} - /> - ))} - </SectionWrap> - - <SectionWrap id="cases"> - <Heading size="medium">Use Cases</Heading> - <Slider> - {_.map(useCaseSlides, (item, index) => ( - <Slide - key={`useCaseSlide-${index}`} - heading={item.title} - text={item.description} - icon={item.icon} + <Column width="55%" maxWidth="826px"> + <Column width="100%" maxWidth="560px"> + <SectionWrap id="benefits"> + <Heading size="medium">What 0x offers</Heading> + + {_.map(offersData, (item, index) => ( + <Definition + key={`offers-${index}`} + title={item.title} + description={item.description} + isWithMargin={true} /> ))} - </Slider> - </SectionWrap> - - <SectionWrap id="functionality"> - <Heading size="medium">Exchange Functionality</Heading> - - {_.map(functionalityData, (item, index) => ( - <ChapterItemWrap key={`functionality-${index}`}> - <Icon name={item.icon} size="medium" margin={[0, 0, 22, 0]} /> - - <Heading marginBottom="15px"> - {item.title} - </Heading> - - <Paragraph isMuted={true} isNoMargin={true}> - {item.description} - </Paragraph> - </ChapterItemWrap> - ))} - </SectionWrap> - </Column> - </Wrap> + </SectionWrap> + + <SectionWrap id="cases"> + <Heading size="medium">Use Cases</Heading> + <Slider> + {_.map(useCaseSlides, (item, index) => ( + <Slide + key={`useCaseSlide-${index}`} + heading={item.title} + text={item.description} + icon={item.icon} + /> + ))} + </Slider> + </SectionWrap> + + <SectionWrap id="functionality"> + <Heading size="medium">Exchange Functionality</Heading> + + {_.map(functionalityData, (item, index) => ( + <Definition + key={`functionality-${index}`} + title={item.title} + description={item.description} + isWithMargin={true} + /> + ))} + </SectionWrap> + </Column> + </Column> </Section> <Banner @@ -206,13 +204,13 @@ const SectionWrap = styled.div` background-color: #3d3d3d; } - @media (min-width: ${BREAKPOINTS.mobile}) { + @media (min-width: 768px) { & + &:before { width: 100vw; } } - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 768px) { text-align: left; & + &:before { @@ -222,7 +220,7 @@ const SectionWrap = styled.div` `; const NavStickyWrap = styled(WrapSticky)` - @media (max-width: ${BREAKPOINTS.mobile}) { + @media (max-width: 768px) { display: none; } `; |