aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-10 20:11:31 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-10 20:11:31 +0800
commit7d9ab27b9d26bf008a1113c50a00b18a1ad6e641 (patch)
tree96633af443a641f4fac0908c4272c854a61e839f /packages/website/ts/@next
parentc686c241c0ea7b9b0a581aa6bd7aac35e2ac11b4 (diff)
downloaddexon-sol-tools-7d9ab27b9d26bf008a1113c50a00b18a1ad6e641.tar
dexon-sol-tools-7d9ab27b9d26bf008a1113c50a00b18a1ad6e641.tar.gz
dexon-sol-tools-7d9ab27b9d26bf008a1113c50a00b18a1ad6e641.tar.bz2
dexon-sol-tools-7d9ab27b9d26bf008a1113c50a00b18a1ad6e641.tar.lz
dexon-sol-tools-7d9ab27b9d26bf008a1113c50a00b18a1ad6e641.tar.xz
dexon-sol-tools-7d9ab27b9d26bf008a1113c50a00b18a1ad6e641.tar.zst
dexon-sol-tools-7d9ab27b9d26bf008a1113c50a00b18a1ad6e641.zip
Divides landing into section components, cleanup
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/components/button.tsx5
-rw-r--r--packages/website/ts/@next/components/icon.tsx2
-rw-r--r--packages/website/ts/@next/components/sections/landing/about.tsx106
-rw-r--r--packages/website/ts/@next/components/sections/landing/clients.tsx78
-rw-r--r--packages/website/ts/@next/components/sections/landing/cta.tsx63
-rw-r--r--packages/website/ts/@next/components/sections/landing/hero.tsx39
-rw-r--r--packages/website/ts/@next/constants/globalStyle.tsx9
-rw-r--r--packages/website/ts/@next/pages/landing.tsx278
8 files changed, 306 insertions, 274 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 14228083f..ea7f286b3 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -11,6 +11,7 @@ interface ButtonInterface {
isNoBorder?: boolean;
isNoPadding?: boolean;
isWithArrow?: boolean;
+ isAccentColor?: boolean;
hasIcon?: boolean | string;
isInline?: boolean;
href?: string;
@@ -26,7 +27,7 @@ export const Button = styled.button<ButtonInterface>`
display: ${props => props.isInline && 'inline-block'};
background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'};
border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#6a6a6a'};
- color: ${props => props.color || props.theme.textColor};
+ color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
text-align: center;
font-size: ${props => props.isWithArrow ? '20px' : '18px'};
@@ -37,7 +38,7 @@ export const Button = styled.button<ButtonInterface>`
}
path {
- fill: ${props => props.color || props.theme.textColor};
+ fill: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
}
`;
diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
index 61f8f8f6f..07a882246 100644
--- a/packages/website/ts/@next/components/icon.tsx
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -10,7 +10,7 @@ interface IconProps extends PaddingInterface {
export const Icon: React.FunctionComponent<Props> = (props: Props) => {
const IconSVG = Loadable({
- loader: () => import(`ts/@next/icons/illustrations/${props.name}.svg`),
+ loader: () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`),
loading: () => 'Loading',
});
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
new file mode 100644
index 000000000..42062a2e1
--- /dev/null
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -0,0 +1,106 @@
+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',
+ margin: '0 auto',
+ borderColor: '#3C4746',
+ marginTop: '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}
+ isNoMargin={true}
+ >
+ 873,435
+ </Heading>
+
+ <Paragraph
+ isMuted={0.4}
+ isCentered={true}
+ isNoMargin={true}
+ >
+ Number of transactions
+ </Paragraph>
+ </Column>
+
+ <Column colWidth="1/3" isNoPadding={true}>
+ <Heading
+ size="medium"
+ isCentered={true}
+ isNoMargin={true}
+ >
+ $203M
+ </Heading>
+
+ <Paragraph
+ isMuted={0.4}
+ isCentered={true}
+ isNoMargin={true}
+ >
+ 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>
+ </Section>
+);
diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx
new file mode 100644
index 000000000..c08a4ea48
--- /dev/null
+++ b/packages/website/ts/@next/components/sections/landing/clients.tsx
@@ -0,0 +1,78 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled from 'styled-components';
+import {Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
+import {Heading, Paragraph} from 'ts/@next/components/text';
+
+interface ProjectLogo {
+ name: string;
+ imageUrl?: string;
+}
+
+const projects: ProjectLogo[] = [
+ {
+ name: 'Radar Relay',
+ imageUrl: '/images/@next/relayer-logos/logo_1.png',
+ },
+ {
+ name: 'Paradex',
+ imageUrl: '/images/@next/relayer-logos/logo_5.png',
+ },
+ {
+ name: 'Amadeus',
+ imageUrl: '/images/@next/relayer-logos/logo_3.png',
+ },
+ {
+ name: 'The Ocean X',
+ imageUrl: '/images/@next/relayer-logos/logo_4.png',
+ },
+ {
+ name: 'Paradex',
+ imageUrl: '/images/@next/relayer-logos/logo_5.png',
+ },
+ {
+ name: 'Decent EX',
+ imageUrl: '/images/@next/relayer-logos/logo_2.1.png',
+ },
+ {
+ name: 'dEX',
+ imageUrl: '/images/@next/relayer-logos/logo_2.2.png',
+ },
+ {
+ name: 'OpenRelay',
+ imageUrl: '/images/@next/relayer-logos/logo_2.3.png',
+ },
+ {
+ name: 'DDEX',
+ imageUrl: '/images/@next/relayer-logos/logo_2.png',
+ },
+];
+
+export const SectionLandingClients = () => (
+ <Section isPadLarge={true}>
+ <WrapCentered>
+ <Heading size="small">You're in good company</Heading>
+ </WrapCentered>
+
+ <WrapGrid width="narrow" isWrapped={true}>
+ {_.map(projects, (item: ProjectLogo, index) => (
+ <StyledProject key={`client-${index}`}>
+ <img src={item.imageUrl} alt={item.name} />
+ </StyledProject>
+ ))}
+ </WrapGrid>
+ </Section>
+);
+
+const StyledProject = styled.div`
+ width: 90px;
+ height: 90px;
+ flex-shrink: 0;
+ margin: 30px;
+
+ img {
+ object-fit: contain;
+ width: 100%;
+ height: 100%;
+ }
+`;
diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx
new file mode 100644
index 000000000..2f853f95b
--- /dev/null
+++ b/packages/website/ts/@next/components/sections/landing/cta.tsx
@@ -0,0 +1,63 @@
+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';
+
+export const SectionLandingCta = () => (
+ <Section>
+ <Wrap>
+ <Column
+ bgColor="#003831"
+ colWidth="1/2"
+ isPadLarge={true}
+ >
+ <WrapCentered>
+ <Icon
+ name="ready-to-build"
+ size="large"
+ margin={[0, 0, 'default', 0]}
+ />
+
+ <Paragraph size="medium" color="#00AE99">
+ Ready to build on 0x?
+ </Paragraph>
+
+ <Link
+ href="#"
+ isTransparent={true}
+ isWithArrow={true}
+ >
+ Get Started
+ </Link>
+ </WrapCentered>
+ </Column>
+
+ <Column
+ bgColor="#003831"
+ colWidth="1/2"
+ isPadLarge={true}
+ >
+ <WrapCentered>
+ <Icon
+ name="ready-to-build"
+ size="large"
+ margin={[0, 0, 'default', 0]}
+ />
+
+ <Paragraph size="medium" color="#00AE99">
+ Want help from the 0x team?
+ </Paragraph>
+
+ <Link
+ href="#"
+ isTransparent={true}
+ isWithArrow={true}
+ >
+ Get in Touch
+ </Link>
+ </WrapCentered>
+ </Column>
+ </Wrap>
+ </Section>
+);
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
new file mode 100644
index 000000000..e43ac41f2
--- /dev/null
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import {Button, ButtonWrap} from 'ts/@next/components/button';
+import {Column, Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
+import {Heading, Paragraph} from 'ts/@next/components/text';
+
+import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
+
+export const SectionLandingHero = () => (
+ <Section>
+ <Wrap>
+ <Column colWidth="1/2">
+ <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>
+
+ <ButtonWrap>
+ <Button isInline={true}>
+ Get Started
+ </Button>
+
+ <Button isTransparent={true} isInline={true}>
+ Learn More
+ </Button>
+ </ButtonWrap>
+ </Column>
+
+ <Column colWidth="1/2">
+ <WrapCentered>
+ <LogoOutlined/>
+ </WrapCentered>
+ </Column>
+ </Wrap>
+ </Section>
+);
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index 8ddf78922..7d5e59c6e 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/packages/website/ts/@next/constants/globalStyle.tsx
@@ -89,10 +89,6 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
overflow: hidden;
}
- a {
- color: ${props => props.theme.linkColor};
- }
-
img, svg {
max-width: 100%;
object-fit: contain;
@@ -103,11 +99,6 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
line-height: 1.444444444em; // 26px
}
- :root a {
- color: inherit;
- text-decoration: none;
- }
-
svg + p,
img + p {
padding-top: 30px;
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 2ee7ede2e..66c4138a1 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -1,270 +1,24 @@
-import * as _ from 'lodash';
import * as React from 'react';
-import styled from 'styled-components';
-
-import {colors} from 'ts/style/colors';
-
-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 {SiteWrap} from 'ts/@next/components/siteWrap';
-import {Heading, Paragraph} from 'ts/@next/components/text';
-import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
-import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
-import ReadyToBuildIcon from 'ts/@next/icons/illustrations/ready-to-build.svg';
-import SupportIcon from 'ts/@next/icons/illustrations/support.svg';
-
-interface ProjectLogo {
- name: string;
- imageUrl?: string;
+import {SectionLandingAbout} from 'ts/@next/components/sections/landing/about';
+import {SectionLandingClients} from 'ts/@next/components/sections/landing/clients';
+import {SectionLandingCta} from 'ts/@next/components/sections/landing/cta';
+import {SectionLandingHero} from 'ts/@next/components/sections/landing/hero';
+
+interface Props {
+ theme: {
+ bgColor: string;
+ textColor: string;
+ linkColor: string;
+ };
}
-const projects: ProjectLogo[] = [
- {
- name: 'Radar Relay',
- imageUrl: '/images/@next/relayer-logos/logo_1.png',
- },
- {
- name: 'Paradex',
- imageUrl: '/images/@next/relayer-logos/logo_5.png',
- },
- {
- name: 'Amadeus',
- imageUrl: '/images/@next/relayer-logos/logo_3.png',
- },
- {
- name: 'The Ocean X',
- imageUrl: '/images/@next/relayer-logos/logo_4.png',
- },
- {
- name: 'Paradex',
- imageUrl: '/images/@next/relayer-logos/logo_5.png',
- },
- {
- name: 'Decent EX',
- imageUrl: '/images/@next/relayer-logos/logo_2.1.png',
- },
- {
- name: 'dEX',
- imageUrl: '/images/@next/relayer-logos/logo_2.2.png',
- },
- {
- name: 'OpenRelay',
- imageUrl: '/images/@next/relayer-logos/logo_2.3.png',
- },
- {
- name: 'DDEX',
- imageUrl: '/images/@next/relayer-logos/logo_2.png',
- },
-];
-
-export const NextLanding: React.StatelessComponent<{}> = () => (
+export const NextLanding: React.StatelessComponent<{}> = (props: Props) => (
<SiteWrap theme="dark">
- <Section>
- <Wrap>
- <Column colWidth="1/2">
- <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>
-
- <ButtonWrap>
- <Button isInline={true}>
- Get Started
- </Button>
-
- <Button isTransparent={true} isInline={true}>
- Learn More
- </Button>
- </ButtonWrap>
- </Column>
-
- <Column colWidth="1/2">
- <WrapCentered>
- <LogoOutlined/>
- </WrapCentered>
- </Column>
- </Wrap>
- </Section>
-
- <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>
-
- <Button href="#" isTransparent={true}>
- Discover how developers use 0x
- </Button>
- </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}
- isNoMargin={true}
- >
- 873,435
- </Heading>
-
- <Paragraph
- isMuted={0.4}
- isCentered={true}
- isNoMargin={true}
- >
- Number of transactions
- </Paragraph>
- </Column>
-
- <Column colWidth="1/3" isNoPadding={true}>
- <Heading
- size="medium"
- isCentered={true}
- isNoMargin={true}
- >
- $203M
- </Heading>
-
- <Paragraph
- isMuted={0.4}
- isCentered={true}
- isNoMargin={true}
- >
- 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>
- </Section>
-
- <Section isPadLarge={true}>
- <WrapCentered>
- <Heading size="small">You're in good company</Heading>
- </WrapCentered>
-
- <WrapGrid width="narrow" isWrapped={true}>
- {_.map(projects, (item: ProjectLogo, index) => (
- <Project
- key={index}
- name={item.name}
- imageUrl={item.imageUrl}
- />
- ))}
- </WrapGrid>
- </Section>
-
- <Section>
- <Wrap>
- <Column
- bgColor="#003831"
- colWidth="1/2"
- isPadLarge={true}
- >
- <WrapCentered>
- <Icon
- name="ready-to-build"
- size="large"
- margin={[0, 0, 'default', 0]}
- />
-
- <Paragraph size="medium" color="#00AE99">
- Ready to build on 0x?
- </Paragraph>
-
- <Link
- href="#"
- isTransparent={true}
- isWithArrow={true}
- >
- Get Started
- </Link>
- </WrapCentered>
- </Column>
-
- <Column
- bgColor="#003831"
- colWidth="1/2"
- isPadLarge={true}
- >
- <WrapCentered>
- <Icon
- name="ready-to-build"
- size="large"
- margin={[0, 0, 'default', 0]}
- />
-
- <Paragraph size="medium" color="#00AE99">
- Want help from the 0x team?
- </Paragraph>
-
- <Link
- href="#"
- isTransparent={true}
- isWithArrow={true}
- >
- Get in Touch
- </Link>
- </WrapCentered>
- </Column>
- </Wrap>
- </Section>
+ <SectionLandingHero />
+ <SectionLandingAbout />
+ <SectionLandingClients />
+ <SectionLandingCta />
</SiteWrap>
);
-
-const Project = ({ name, imageUrl }: ProjectLogo) => (
- <StyledProject>
- <img src={imageUrl} alt={name} />
- </StyledProject>
-);
-
-const StyledProject = styled.div`
- width: 90px;
- height: 90px;
- flex-shrink: 0;
- margin: 30px;
-
- img {
- object-fit: contain;
- width: 100%;
- height: 100%;
- }
-`;