aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/components/icon.tsx1
-rw-r--r--packages/website/ts/@next/components/text.tsx3
-rw-r--r--packages/website/ts/@next/pages/why.tsx156
3 files changed, 115 insertions, 45 deletions
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
index bc0f6f47e..7e16c2aa2 100644
--- a/packages/website/ts/@next/components/icon.tsx
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -44,6 +44,7 @@ const StyledIcon = styled.figure<IconProps>`
width: ${props => _getSize(props.size)};
height: ${props => _getSize(props.size)};
margin: ${props => getCSSPadding(props.margin)};
+ display: inline-block;
flex-shrink: 0;
svg {
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index d6eabb0d5..d300031dc 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -11,6 +11,7 @@ interface HeadingProps extends BaseTextInterface {
asElement?: 'h1'| 'h2'| 'h3'| 'h4';
isCentered?: boolean;
isNoMargin?: boolean;
+ marginBottom?: string;
color?: string;
}
@@ -24,7 +25,7 @@ const StyledHeading = styled.h1<HeadingProps>`
font-size: ${props => `var(--${props.size || 'default'}Heading)`};
padding: ${props => props.padding && getCSSPadding(props.padding)};
line-height: ${props => `var(--${props.size || 'default'}HeadingHeight)`};
- margin-bottom: ${props => !props.isNoMargin && '30px'};
+ margin-bottom: ${props => !props.isNoMargin && (props.marginBottom || '30px')};
text-align: ${props => props.isCentered && 'center'};
font-weight: 300;
margin-left: ${props => props.isCentered && 'auto'};
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index 1b6a61c4f..956cbbc57 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -1,3 +1,4 @@
+import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
import zenscroll from 'zenscroll';
@@ -15,6 +16,52 @@ import CoinIcon from 'ts/@next/icons/illustrations/coin.svg';
import CustomizeIcon from 'ts/@next/icons/illustrations/customize.svg';
import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
+const offersData = [
+ {
+ icon: 'coin',
+ title: 'A standard for Exchange',
+ description: '0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721.',
+ },
+ {
+ icon: 'coin',
+ title: 'Robust Smart Contracts',
+ description: `0x Protocol's smart contracts have been put through two rounds of rigorous security audits.`,
+ },
+ {
+ icon: 'coin',
+ title: 'Extensible Architecture',
+ description: `0x's modular pipeline enables you to plug in your own smart contracts through an extensible API.`,
+ },
+ {
+ icon: 'coin',
+ title: 'Efficient Design',
+ description: `0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat.`,
+ },
+];
+
+const functionalityData = [
+ {
+ icon: 'coin',
+ title: 'Secure Non-custodial Trading',
+ description: 'Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals.',
+ },
+ {
+ icon: 'coin',
+ title: 'Flexible Order Types',
+ description: 'Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids.',
+ },
+ {
+ icon: 'coin',
+ title: 'Build a Business',
+ description: 'Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.',
+ },
+ {
+ icon: 'coin',
+ title: 'Networked Liquidity',
+ description: 'Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book.',
+ },
+];
+
export class NextWhy extends React.PureComponent {
public scrollToSection = (sectionName: 'benefits' | 'cases' | 'features') => {
zenscroll.to(this[sectionName]);
@@ -39,7 +86,7 @@ export class NextWhy extends React.PureComponent {
<SiteWrap theme="dark">
<Section isPadLarge={true}>
<WrapCentered>
- <Column colWidth="2/3">
+ <Column colWidth="2/3" isNoMargin={true}>
<Heading
size="medium"
isCentered={true}
@@ -95,50 +142,52 @@ export class NextWhy extends React.PureComponent {
</Column>
<Column colWidth="2/3">
- <div ref={elem => this.benefits = elem}>
+ <SectionWrap ref={elem => this.benefits = elem}>
<Heading size="medium">What 0x offers</Heading>
- <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} />
- <Heading size="small">A Standard for Exchange</Heading>
- <Paragraph isMuted={true}>0x provides developers with a technical standard for trading Ethereum-based tokens such as ERC 20 and ERC 721.</Paragraph>
-
- <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} />
- <Heading size="small">Robust Smart Contracts</Heading>
- <Paragraph isMuted={true}>0x Protocol's smart contracts have been put through two rounds of rigorous security audits.</Paragraph>
-
- <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} />
- <Heading size="small">Extensible Architecture</Heading>
- <Paragraph isMuted={true}>0x's modular pipeline enables you to plug in your own smart contracts through an extensible API.</Paragraph>
-
- <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} />
- <Heading size="small">Efficient Design</Heading>
- <Paragraph isMuted={true}>0x’s off-chain order relay with on-chain settlement is a gas efficient approach to p2p exchange, reducing blockchain bloat.</Paragraph>
- </div>
-
- <div ref={elem => this.cases = elem}>
- <Heading size="small">Use Cases</Heading>
+ {_.map(offersData, (item, index) => (
+ <ChapterItemWrap>
+ <Icon name={item.icon} size="medium" margin={[0, 0, 22, 0]} />
+
+ <Heading
+ marginBottom="15px"
+ isNoPadding={true}
+ >
+ {item.title}
+ </Heading>
+
+ <Paragraph isMuted={true}>
+ {item.description}
+ </Paragraph>
+ </ChapterItemWrap>
+ ))}
+ </SectionWrap>
+
+ <SectionWrap ref={elem => this.cases = elem}>
+ <Heading size="medium">Use Cases</Heading>
<Paragraph isMuted={true}>slider</Paragraph>
- </div>
-
- <div ref={elem => this.functionality = elem}>
- <Heading size="small">Exchange Functionality</Heading>
-
- <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} />
- <Heading size="small">Secure Non-custodial Trading</Heading>
- <Paragraph isMuted={true}>Enable tokens to be traded wallet-to-wallet with no deposits or withdrawals.</Paragraph>
-
- <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} />
- <Heading size="small">Flexible Order Types</Heading>
- <Paragraph isMuted={true}>Choose to sell assets at a specific “buy it now” price or allow potential buyers to submit bids.</Paragraph>
-
- <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} />
- <Heading size="small">Build a Business</Heading>
- <Paragraph isMuted={true}>Monetize your product by taking fees on each transaction and join a growing number of relayers in the 0x ecosystem.</Paragraph>
-
- <Icon name="coin" size="medium" margin={[0, 0, 22, 0]} />
- <Heading size="small">Networked Liquidity</Heading>
- <Paragraph isMuted={true}>Allow your assets to appear on other 0x-based marketplaces by sharing your liquidity through an open order book.</Paragraph>
- </div>
+ </SectionWrap>
+
+ <SectionWrap ref={elem => this.functionality = elem}>
+ <Heading size="medium">Exchange Functionality</Heading>
+
+ {_.map(functionalityData, (item, index) => (
+ <ChapterItemWrap>
+ <Icon name={item.icon} size="medium" margin={[0, 0, 22, 0]} />
+
+ <Heading
+ marginBottom="15px"
+ isNoPadding={true}
+ >
+ {item.title}
+ </Heading>
+
+ <Paragraph isMuted={true}>
+ {item.description}
+ </Paragraph>
+ </ChapterItemWrap>
+ ))}
+ </SectionWrap>
</Column>
</Wrap>
</Section>
@@ -154,8 +203,22 @@ export class NextWhy extends React.PureComponent {
}
}
-const StickyColumn = styled(Column)`
- position: sticky;
+const SectionWrap = styled.div`
+ position: relative;
+
+ & + & {
+ padding-top: 60px;
+ }
+
+ & + &:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 1px;
+ background-color: #3d3d3d;
+ }
`;
const ChapterLink = styled.a`
@@ -169,3 +232,8 @@ const ChapterLink = styled.a`
opacity: 1;
}
`;
+
+const ChapterItemWrap = styled.div`
+ max-width: 560px;
+ margin-top: 60px;
+`;