aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
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
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')
-rw-r--r--packages/website/ts/@next/components/blockIconLink.tsx32
-rw-r--r--packages/website/ts/@next/components/definition.tsx106
-rw-r--r--packages/website/ts/@next/components/hero.tsx103
-rw-r--r--packages/website/ts/@next/components/heroImage.tsx34
-rw-r--r--packages/website/ts/@next/components/layout.tsx2
-rw-r--r--packages/website/ts/@next/components/newLayout.tsx39
-rw-r--r--packages/website/ts/@next/components/sections/landing/about.tsx133
-rw-r--r--packages/website/ts/@next/components/sections/landing/clients.tsx6
-rw-r--r--packages/website/ts/@next/components/sections/landing/cta.tsx4
-rw-r--r--packages/website/ts/@next/components/sections/landing/hero.tsx47
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx2
-rw-r--r--packages/website/ts/@next/constants/globalStyle.tsx6
-rw-r--r--packages/website/ts/@next/pages/instant.tsx65
-rw-r--r--packages/website/ts/@next/pages/why.tsx102
14 files changed, 446 insertions, 235 deletions
diff --git a/packages/website/ts/@next/components/blockIconLink.tsx b/packages/website/ts/@next/components/blockIconLink.tsx
new file mode 100644
index 000000000..be3ded71f
--- /dev/null
+++ b/packages/website/ts/@next/components/blockIconLink.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import {Link} from 'ts/@next/components/button';
+import {Icon} from 'ts/@next/components/icon';
+
+interface Props {
+ icon: string;
+ title: string;
+ linkLabel: string;
+ linkUrl: string;
+}
+
+export const BlockIconLink = (props: Props) => (
+ <Wrap>
+ <div>
+ <Icon
+ name={props.icon}
+ size="large"
+ margin={[0, 0, 'default', 0]}
+ />
+ </div>
+ </Wrap>
+);
+
+const Wrap = styled.div`
+ padding: 40px;
+ display: flex;
+ align-items: center;
+ text-align: center;
+ background-color: ${props => props.theme.lightBgColor};
+`;
diff --git a/packages/website/ts/@next/components/definition.tsx b/packages/website/ts/@next/components/definition.tsx
new file mode 100644
index 000000000..88ef6acdc
--- /dev/null
+++ b/packages/website/ts/@next/components/definition.tsx
@@ -0,0 +1,106 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import {Link} from 'ts/@next/components/button';
+import { Icon } from 'ts/@next/components/icon';
+
+interface Action {
+ label: string;
+ url: string;
+}
+
+interface Props {
+ isInline?: boolean;
+ isInlineIcon?: boolean;
+ isCentered?: boolean;
+ isWithMargin?: boolean;
+ iconSize?: 'medium' | 'large' | number;
+ title: string;
+ description: React.Node;
+ actions?: Action[];
+}
+
+export const Definition = (props: Props) => (
+ <Wrap isWithMargin={props.isWithMargin} isInline={props.isInline} isInlineIcon={props.isInlineIcon}>
+ <Icon
+ name="ready-to-build"
+ size={props.iconSize || 'medium'}
+ margin={[0, 0, 'default', 0]}
+ />
+
+ <TextWrap>
+ <Title>
+ {props.title}
+ </Title>
+
+ <Paragraph>
+ {props.description}
+ </Paragraph>
+
+ {props.actions &&
+ <LinkWrap>
+ {props.actions.map((item, index) => (
+ <Link
+ href={item.url}
+ isWithArrow={true}
+ isTransparent={true}
+ isNoBorder={true}
+ isAccentColor={true}
+ >
+ {item.label}
+ </Link>
+ ))}
+ </LinkWrap>
+ }
+ </TextWrap>
+ </Wrap>
+);
+
+const Wrap = styled.div`
+ max-width: ${props => props.isInline && '354px'};
+
+ & + & {
+ margin-top: ${props => (props.isWithMargin && !props.isInlineIcon) ? '60px' : '120px'};
+ }
+
+ @media (min-width: 768px) {
+ width: ${props => props.isInline ? 'calc(33.3333% - 30px)' : '100%'};
+ display: ${props => props.isInlineIcon && 'flex'};
+ justify-content: ${props => props.isInlineIcon && 'space-between'};
+ align-items: ${props => props.isInlineIcon && 'center'};
+ text-align: ${props => props.isInlineIcon && 'left'};
+ }
+
+ @media (max-width: 768px) {
+ margin: 0 auto;
+
+ & + & {
+ margin-top: ${props => props.isInline && '60px'};
+ }
+ }
+`;
+
+const TextWrap = styled.div`
+ width: 100%;
+ max-width: 560px;
+`;
+
+const Title = styled.h2`
+ font-size: 20px;
+ line-height: 1.3;
+ margin-bottom: 15px;
+`;
+
+const Paragraph = styled.p`
+ font-size: 17px;
+ opacity: 0.75;
+`;
+
+const LinkWrap = styled.div`
+ display: inline-flex;
+ margin-top: 60px;
+
+ a + a {
+ margin-left: 60px;
+ }
+`;
diff --git a/packages/website/ts/@next/components/hero.tsx b/packages/website/ts/@next/components/hero.tsx
new file mode 100644
index 000000000..d17856b8a
--- /dev/null
+++ b/packages/website/ts/@next/components/hero.tsx
@@ -0,0 +1,103 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+interface Props {
+ title: string;
+ description: string;
+ figure?: React.Node;
+ actions?: React.Node;
+}
+
+export const Hero = (props: Props) => (
+ <Section>
+ <Wrap isCentered={!props.figure}>
+ {props.figure &&
+ <Content width="400px">
+ {props.figure}
+ </Content>
+ }
+
+ <Content width={props.figure ? '546px' : '678px'}>
+ <Title isLarge={props.figure}>
+ {props.title}
+ </Title>
+
+ <Description>
+ {props.description}
+ </Description>
+
+ {props.actions &&
+ <ButtonWrap>
+ {props.actions}
+ </ButtonWrap>
+ }
+ </Content>
+ </Wrap>
+ </Section>
+);
+
+const Section = styled.section`
+ padding: 120px 0;
+
+ @media (max-width: 768px) {
+ padding: 60px 0;
+ }
+`;
+
+const Wrap = styled.div`
+ width: calc(100% - 60px);
+ margin: 0 auto;
+
+ @media (min-width: 768px) {
+ max-width: 1136px;
+ flex-direction: row-reverse;
+ display: flex;
+ align-items: center;
+ text-align: ${props => props.isCentered && 'center'};
+ justify-content: ${props => props.isCentered ? 'center' : 'space-between'};
+ }
+
+ @media (max-width: 768px) {
+ text-align: center;
+ }
+`;
+
+const Title = styled.h1`
+ font-size: ${props => props.isLarge ? '80px' : '58px'};
+ font-weight: 300;
+ line-height: 1.1;
+ margin-bottom: 30px;
+
+ @media (max-width: 1024px) {
+ font-size: 60px;
+ }
+
+ @media (max-width: 768px) {
+ font-size: 46px;
+ }
+`;
+
+const Description = styled.p`
+ font-size: 22px;
+ line-height: 31px;
+ padding: 0;
+ margin-bottom: 30px;
+ opacity: 0.75;
+`;
+
+const Content = styled.div`
+ width: 100%;
+
+ @media (min-width: 768px) {
+ max-width: ${props => props.width};
+ }
+`;
+
+const ButtonWrap = styled.div`
+ display: inline-flex;
+ align-items: center;
+
+ * + * {
+ margin-left: 12px;
+ }
+`;
diff --git a/packages/website/ts/@next/components/heroImage.tsx b/packages/website/ts/@next/components/heroImage.tsx
new file mode 100644
index 000000000..51b35480b
--- /dev/null
+++ b/packages/website/ts/@next/components/heroImage.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
+
+interface Props {
+ image: React.Node;
+}
+
+export const LandingAnimation = (props: Props) => (
+ <Wrap>
+ {props.image}
+ </Wrap>
+);
+
+const Wrap = styled.figure`
+ border: 1px solid red;
+ display: inline-block;
+
+ svg {
+ width: 100%;
+ height: auto;
+ }
+
+ @media (min-width: 768px) {
+ width: 100%;
+ max-width: 400px;
+ }
+
+ @media (max-width: 768px) {
+ width: 180px;
+ margin-bottom: 40px;
+ }
+`;
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index ce15bd2b3..32e92aa34 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -152,7 +152,7 @@ export const Column = styled.div<ColumnProps>`
}
@media (max-width: ${BREAKPOINTS.mobile}) {
- padding: ${props => !props.isNoPadding && (props.isPadLarge ? '40px 30px' : '15px')};
+ padding: ${props => !props.isNoPadding && (props.isPadLarge ? '40px 30px' : 0)};
margin-bottom: 20px;
text-align: ${props => props.isMobileCentered && 'center'};
}
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
new file mode 100644
index 000000000..8a3514bd9
--- /dev/null
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+interface Props {
+ isPadded: boolean;
+ bgColor?: 'dark' | 'light' | string;
+}
+
+export const Section = (props: Props) => (
+ <SectionBase bgColor={props.bgColor}>
+ <Wrap
+ isPadded={props.isPadded}
+ >
+ {props.children}
+ </Wrap>
+ </SectionBase>
+);
+
+Section.defaultProps = {
+ isPadded: true,
+};
+
+const SectionBase = styled.section`
+ width: calc(100% - 60px);
+ margin: 0 auto;
+ padding: 120px 0;
+ background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};
+
+ @media (max-width: 768px) {
+ padding: 40px 0;
+ }
+`;
+
+const Wrap = styled.div`
+ width: calc(100% - 60px);
+ max-width: 895px;
+ margin: 0 auto;
+ text-align: center;
+`;
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
index 0efa25215..4c246ec3e 100644
--- a/packages/website/ts/@next/components/sections/landing/about.tsx
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -1,105 +1,46 @@
import * as React from 'react';
import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
-import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
import {Heading, Paragraph} from 'ts/@next/components/text';
import {colors} from 'ts/style/colors';
-export const SectionLandingAbout = () => (
- <Section bgColor={colors.backgroundDark} isPadLarge={true}>
- <WrapCentered width="narrow">
- <InlineIconWrap>
- <Icon name="coin" size="small" />
- <Icon name="coin" size="small" />
- <Icon name="coin" size="small" />
- <Icon name="coin" size="small" />
- </InlineIconWrap>
-
- <Paragraph
- size="large"
- isCentered={true}
- padding={['large', 0, 'default', 0]}
- >
- 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based
- tokens. Anyone in the world can use 0x to service a wide variety of markets
- ranging from gaming items to financial instruments to assets that could have
- near existed before.
- </Paragraph>
-
- <Link
- href="#"
- isTransparent={true}
- isWithArrow={true}
- isAccentColor={true}
- >
- Discover how developers use 0x
- </Link>
-
- <hr
- style={{
- width: '340px',
- borderColor: '#3C4746',
- margin: '60px auto 0 auto',
- }}
- />
- </WrapCentered>
-
- {/* Note you can also pass in a string "large/default" or a number for custom margins */}
- <Wrap padding={['large', 0, 0, 0]}>
- {/* NOTE: this probably should be withComponent as part of a <dl> */}
- <Column colWidth="1/3" isNoPadding={true}>
- <Heading
- size="medium"
- isCentered={true}
- marginBottom="20px"
- >
- 873,435
- </Heading>
+import {Section} from 'ts/@next/components/newLayout';
- <Paragraph
- isMuted={0.4}
- isCentered={true}
- isNoMargin={true}
- >
- Number of transactions
- </Paragraph>
- </Column>
-
- <Column colWidth="1/3" isNoPadding={true}>
- <Heading
- size="medium"
- isCentered={true}
- marginBottom="20px"
- >
- $203M
- </Heading>
-
- <Paragraph
- isMuted={0.4}
- isCentered={true}
- marginBottom="20px"
- >
- Total volume
- </Paragraph>
- </Column>
-
- <Column colWidth="1/3" isNoPadding={true}>
- <Heading
- size="medium"
- isCentered={true}
- isNoMargin={true}
- >
- 227,372
- </Heading>
-
- <Paragraph
- isMuted={0.4}
- isCentered={true}
- isNoMargin={true}
- >
- Number of relayers
- </Paragraph>
- </Column>
- </Wrap>
+export const SectionLandingAbout = () => (
+ <Section bgColor="dark">
+ <InlineIconWrap>
+ <Icon name="coin" size="small" />
+ <Icon name="coin" size="small" />
+ <Icon name="coin" size="small" />
+ <Icon name="coin" size="small" />
+ </InlineIconWrap>
+
+ <Paragraph
+ size="large"
+ isCentered={true}
+ padding={['large', 0, 'default', 0]}
+ >
+ 0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based
+ tokens. Anyone in the world can use 0x to service a wide variety of markets
+ ranging from gaming items to financial instruments to assets that could have
+ near existed before.
+ </Paragraph>
+
+ <Link
+ href="#"
+ isTransparent={true}
+ isWithArrow={true}
+ isAccentColor={true}
+ >
+ Discover how developers use 0x
+ </Link>
+
+ <hr
+ style={{
+ width: '340px',
+ borderColor: '#3C4746',
+ margin: '60px auto 0 auto',
+ }}
+ />
</Section>
);
diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx
index a858f0c34..302100ac9 100644
--- a/packages/website/ts/@next/components/sections/landing/clients.tsx
+++ b/packages/website/ts/@next/components/sections/landing/clients.tsx
@@ -1,9 +1,11 @@
import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
-import {BREAKPOINTS, Section, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
+import {BREAKPOINTS, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
import {Heading, Paragraph} from 'ts/@next/components/text';
+import {Section} from 'ts/@next/components/newLayout';
+
interface ProjectLogo {
name: string;
imageUrl?: string;
@@ -59,7 +61,7 @@ const projects: ProjectLogo[] = [
];
export const SectionLandingClients = () => (
- <Section isPadLarge={true}>
+ <Section>
<WrapCentered>
<Heading size="small">
Join the growing number of projects developing on 0x
diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx
index 2f853f95b..ad78a1ab4 100644
--- a/packages/website/ts/@next/components/sections/landing/cta.tsx
+++ b/packages/website/ts/@next/components/sections/landing/cta.tsx
@@ -19,7 +19,7 @@ export const SectionLandingCta = () => (
margin={[0, 0, 'default', 0]}
/>
- <Paragraph size="medium" color="#00AE99">
+ <Paragraph size="medium" color="#00AE99" marginBottom="15px">
Ready to build on 0x?
</Paragraph>
@@ -45,7 +45,7 @@ export const SectionLandingCta = () => (
margin={[0, 0, 'default', 0]}
/>
- <Paragraph size="medium" color="#00AE99">
+ <Paragraph size="medium" color="#00AE99" marginBottom="15px">
Want help from the 0x team?
</Paragraph>
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
index 9e7ed7402..9c6ff7151 100644
--- a/packages/website/ts/@next/components/sections/landing/hero.tsx
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -1,39 +1,30 @@
import * as React from 'react';
import {Button, ButtonWrap} from 'ts/@next/components/button';
+import {LandingAnimation} from 'ts/@next/components/heroImage';
import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
import {Heading, Paragraph} from 'ts/@next/components/text';
+import {Hero} from 'ts/@next/components/hero';
+
import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
export const SectionLandingHero = () => (
- <Section isPadLarge={true}>
- <Wrap isReversed={true}>
- <Column colWidth="1/2">
- <WrapCentered>
- <LogoOutlined/>
- </WrapCentered>
- </Column>
-
- <Column colWidth="1/2" isMobileCentered={true}>
- <Heading size="large">
- Powering Decentralized Exchange
- </Heading>
-
- <Paragraph size="medium" isMuted={true}>
- 0x is the best solution for adding<br />
- exchange functionality to your business.
- </Paragraph>
+ <Hero
+ title="Powering Decentralized Exchange"
+ description="0x is the best solution for adding exchange functionality to your business."
+ figure={<LandingAnimation image={<LogoOutlined />} />}
+ actions={<Actions />}
+ />
+);
- <ButtonWrap>
- <Button isInline={true}>
- Get Started
- </Button>
+const Actions = () => (
+ <>
+ <Button isInline={true}>
+ Get Started
+ </Button>
- <Button isTransparent={true} isInline={true}>
- Learn More
- </Button>
- </ButtonWrap>
- </Column>
- </Wrap>
- </Section>
+ <Button isTransparent={true} isInline={true}>
+ Learn More
+ </Button>
+ </>
);
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 5071b8ef4..ae642f193 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -26,6 +26,8 @@ export interface ThemeInterface {
const GLOBAL_THEMES: ThemeInterface = {
dark: {
bgColor: '#000000',
+ darkBgColor: '#111A19',
+ lightBgColor: '#003831',
textColor: '#FFFFFF',
linkColor: colors.brandLight,
dropdownBg: '#111A19',
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index 28d8e4b5e..86b9e16c5 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -70,10 +70,10 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
--largeHeadingHeight: 1.108695652em; // TO DO
--smallParagraph: 14px; // TO DO
--defaultParagraph: 16px; // TO DO
- --mediumParagraph: 16px; // TO DO
- --largeParagraph: 18px; // TO DO
+ --mediumParagraph: 20px; // TO DO
+ --largeParagraph: 20px; // TO DO
--smallIcon: 55px;
- --mediumIcon: 55px;
+ --mediumIcon: 85px;
--largeIcon: 115px;
}
}
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>