crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Adds infinite scroll image on instant page

Browse Source
This commit is contained in:
Ezekiel Aquino
2018-12-11 16:42:46 +01:00
parent bc64c9566c
commit 0948ed7a87
3 changed files with 59 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/website/ts/@next/components/text.tsx
View File

@@ -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)`};

35
packages/website/ts/@next/pages/instant.tsx
View File

@@ -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;
}
}
`;

60
packages/website/ts/@next/pages/why.tsx
View File

@@ -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>
<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>
<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>
<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}