diff options
| -rw-r--r-- | packages/website/ts/@next/components/text.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/instant.tsx | 35 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/why.tsx | 64 |
3 files changed, 61 insertions, 40 deletions
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx index 07d0ebce2..df3977444 100644 --- a/packages/website/ts/@next/components/text.tsx +++ b/packages/website/ts/@next/components/text.tsx @@ -9,6 +9,7 @@ interface BaseTextInterface extends PaddingInterface { interface HeadingProps extends BaseTextInterface { asElement?: 'h1'| 'h2'| 'h3'| 'h4'; + maxWidth?: string; isCentered?: boolean; isNoMargin?: boolean; isMuted?: boolean | number; @@ -23,6 +24,7 @@ interface ParagraphProps extends BaseTextInterface { } const StyledHeading = styled.h1<HeadingProps>` + max-width: ${props => props.maxWidth}; color: ${props => props.color || props.theme.textColor}; font-size: ${props => isNaN(props.size) ? `var(--${props.size || 'default'}Heading)` : `${props.size}px`}; line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`}; diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx index 686c48533..91a07594e 100644 --- a/packages/website/ts/@next/pages/instant.tsx +++ b/packages/website/ts/@next/pages/instant.tsx @@ -1,6 +1,6 @@ import * as _ from 'lodash'; import * as React from 'react'; -import styled from 'styled-components'; +import styled, { keyframes } from 'styled-components'; import LazyLoad from 'react-lazyload'; import {colors} from 'ts/style/colors'; @@ -67,7 +67,7 @@ const featuresData = [ export const Next0xInstant = () => ( <SiteWrap> - <Section> + <Section isPadLarge={true}> <WrapCentered> <Heading size="medium" isCentered={true}>Introducing 0x Instant</Heading> <Paragraph size="medium" isCentered={true}> @@ -80,10 +80,13 @@ export const Next0xInstant = () => ( <Section isFullWidth={true} isNoPadding={true}> <Wrap width="full"> - {/* Note: This should be another component, this is just for mocking */} - <ImageLoop> - <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/> - </ImageLoop> + <MarqueeWrap> + <div> + <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/> + <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/> + <img src="/images/@next/0x-instant/0x-instant-widgets@2x.png" alt="Preview of payment widgets"/> + </div> + </MarqueeWrap> </Wrap> </Section> @@ -146,8 +149,24 @@ export const Next0xInstant = () => ( </SiteWrap> ); -const ImageCarousel = styled.div` +const scroll = keyframes` + 0% { transform: translate3d(0, 0, 0) } + 100% { transform: translate3d(-1715.18px, 0, 0) } +`; +const MarqueeWrap = styled.div` width: 100vw; height: 380px; - margin: 90px 0; + padding-bottom: 60px; + + > div { + width: 5145.54px; + height: 380px; + display: flex; + animation: ${scroll} 20s linear infinite; + + img { + width: auto; + height: 380px; + } + } `; diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx index 0872ade7d..e293d99fb 100644 --- a/packages/website/ts/@next/pages/why.tsx +++ b/packages/website/ts/@next/pages/why.tsx @@ -86,37 +86,37 @@ export class NextWhy extends React.PureComponent { public render(): React.ReactNode { return ( <SiteWrap theme="dark"> - <Section isPadLarge={true}> - <WrapCentered> - <Column colWidth="2/3" isNoMargin={true}> - <Heading - size="medium" - isCentered={true} - > - The exchange layer for<br /> - the crypto economy - </Heading> - - <Paragraph - size="medium" - isMuted={true} - isCentered={true} - marginBottom="60px" - > - The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. - </Paragraph> - - <Link - href="/docs" - isCentered={true} - isWithArrow={true} - isAccentColor={true} - > - Build on 0x - </Link> - </Column> - </WrapCentered> - </Section> + <Section isPadLarge={true}> + <WrapCentered> + <Column colWidth="2/3" isNoMargin={true}> + <Heading + maxWidth="600px" + size="medium" + isCentered={true} + > + The exchange layer for the crypto economy + </Heading> + + <Paragraph + size="medium" + isMuted={true} + isCentered={true} + marginBottom="60px" + > + The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens. + </Paragraph> + + <Link + href="/docs" + isCentered={true} + isWithArrow={true} + isAccentColor={true} + > + Build on 0x + </Link> + </Column> + </WrapCentered> + </Section> <Section bgColor={colors.backgroundDark} isPadLarge={true}> <Wrap> @@ -173,7 +173,7 @@ export class NextWhy extends React.PureComponent { <Heading size="medium">Use Cases</Heading> <Slider> {_.map(useCaseSlides, (item, index) => ( - <Slide + <Slide key={`useCaseSlide-${index}`} heading={item.title} text={item.description} |