aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/pages
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-12 16:47:55 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-12 20:32:20 +0800
commitc5db8f25d31d45ac3ff9fff78f7e1fde348d81d4 (patch)
tree0ec31d48290d5bb84d833cf70e51c0886b8dffdf /packages/website/ts/@next/pages
parent965b1ff32fac0eaf91731b9f6b3d0a9ce94e6bb9 (diff)
downloaddexon-sol-tools-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar
dexon-sol-tools-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.gz
dexon-sol-tools-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.bz2
dexon-sol-tools-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.lz
dexon-sol-tools-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.xz
dexon-sol-tools-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.tar.zst
dexon-sol-tools-c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4.zip
WIP
Diffstat (limited to 'packages/website/ts/@next/pages')
-rw-r--r--packages/website/ts/@next/pages/instant.tsx65
-rw-r--r--packages/website/ts/@next/pages/why.tsx102
2 files changed, 64 insertions, 103 deletions
diff --git a/packages/website/ts/@next/pages/instant.tsx b/packages/website/ts/@next/pages/instant.tsx
index 73aed59b2..cf316cfe6 100644
--- a/packages/website/ts/@next/pages/instant.tsx
+++ b/packages/website/ts/@next/pages/instant.tsx
@@ -5,6 +5,8 @@ import LazyLoad from 'react-lazyload';
import {colors} from 'ts/style/colors';
+import {Hero} from 'ts/@next/components/hero';
+
import {Banner} from 'ts/@next/components/banner';
import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
import {Icon} from 'ts/@next/components/Icon';
@@ -12,6 +14,9 @@ import {Column, Section, Wrap, WrapCentered} from 'ts/@next/components/layout';
import {SiteWrap} from 'ts/@next/components/siteWrap';
import {Heading, Paragraph} from 'ts/@next/components/text';
+import {Definition} from 'ts/@next/components/Definition';
+
+import {Section as NewSection} from 'ts/@next/components/newLayout';
// import { Configurator } from 'ts/pages/instant/configurator';
import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
@@ -66,16 +71,11 @@ const featuresData = [
export const Next0xInstant = () => (
<SiteWrap>
- <Section isPadLarge={true}>
- <WrapCentered>
- <Heading size="medium" isCentered={true}>Introducing 0x Instant</Heading>
- <Paragraph size="medium" isCentered={true}>
- A free and flexible way to offer simple<br />
- crypto purchasing in any app or website
- </Paragraph>
- <Button href="#">Get Started</Button>
- </WrapCentered>
- </Section>
+ <Hero
+ title="Introducing 0x Instant"
+ description="A free and flexible way to offer simple crypto purchasing in any app or website"
+ actions={<Button href="#">Get Started</Button>}
+ />
<Section isFullWidth={true} isNoPadding={true}>
<Wrap width="full">
@@ -89,40 +89,17 @@ export const Next0xInstant = () => (
</Wrap>
</Section>
- <Section>
- <Wrap width="narrow">
- {_.map(featuresData, (item, index) => (
- <Wrap padding={['large', 0, 'large', 0]}>
- <Column colWidth="1/3">
- <Icon name={item.icon} size={240} />
- </Column>
-
- <Column colWidth="2/3">
- <Heading>
- {item.title}
- </Heading>
- <Paragraph size="medium" isMuted={true}>
- {item.description}
- </Paragraph>
-
- <ButtonWrap>
- {_.map(item.links, (link, i) => (
- <Link
- href={link.url}
- key={`link-${i}`}
- isTransparent={true}
- isAccentColor={true}
- isWithArrow={true}
- >
- {link.label}
- </Link>
- ))}
- </ButtonWrap>
- </Column>
- </Wrap>
- ))}
- </Wrap>
- </Section>
+ <NewSection>
+ {_.map(featuresData, (item, index) => (
+ <Definition
+ title={item.title}
+ description={item.description}
+ isInlineIcon={true}
+ iconSize={240}
+ actions={item.links}
+ />
+ ))}
+ </NewSection>
<Section bgColor={colors.backgroundDark}>
<Wrap>
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index 43d78f99a..fc24fd665 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/packages/website/ts/@next/pages/why.tsx
@@ -5,6 +5,8 @@ import styled from 'styled-components';
import { colors } from 'ts/style/colors';
+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';
@@ -13,6 +15,8 @@ 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';
+
const offersData = [
{
icon: 'robustSmartContracts',
@@ -76,57 +80,43 @@ 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
- 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>
+ <Hero
+ title="The exchange layer for the crypto economy"
+ description="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."
+ actions={
+ <Link
+ href="/docs"
+ isCentered={true}
+ isWithArrow={true}
+ isAccentColor={true}
+ >
+ Build on 0x
+ </Link>
+ }
+ />
<Section bgColor={colors.backgroundDark} isPadLarge={true}>
<Wrap>
- <Column colWidth="1/3">
- <Icon name="supportForAllEthereumStandards" size="large" margin={[0, 0, 32, 0]} />
- <Heading size="small" marginBottom="15px">Support for all Ethereum Standards</Heading>
- <Paragraph isMuted={true}>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...</Paragraph>
- </Column>
-
- <Column colWidth="1/3">
- <Icon name="networkedLiquidity" size="large" margin={[0, 0, 32, 0]} />
- <Heading size="small" marginBottom="15px">Shared Networked Liquidity</Heading>
- <Paragraph isMuted={true}>0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system.</Paragraph>
- </Column>
-
- <Column colWidth="1/3">
- <Icon name="flexibleIntegration" size="large" margin={[0, 0, 32, 0]} />
- <Heading size="small" marginBottom="15px">Customize the User Experience</Heading>
- <Paragraph isMuted={true}>Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces.</Paragraph>
- </Column>
+ <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..."
+ iconSize="large"
+ isInline={true}
+ />
+
+ <Definition
+ title="Shared Networked Liquidity"
+ description="0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system."
+ iconSize="large"
+ isInline={true}
+ />
+
+ <Definition
+ title="Support for all Ethereum Standards"
+ description="Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces."
+ iconSize="large"
+ isInline={true}
+ />
</Wrap>
</Section>
@@ -145,17 +135,11 @@ export class NextWhy extends React.PureComponent {
<Heading size="medium">What 0x offers</Heading>
{_.map(offersData, (item, index) => (
- <ChapterItemWrap key={`benefits-${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>
+ <Definition
+ title={item.title}
+ description={item.description}
+ isWithMargin={true}
+ />
))}
</SectionWrap>