aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/text.tsx2
-rw-r--r--packages/website/ts/@next/pages/instant.tsx35
-rw-r--r--packages/website/ts/@next/pages/why.tsx64
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}