aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components/sections/landing
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/components/sections/landing')
-rw-r--r--packages/website/ts/@next/components/sections/landing/about.tsx55
-rw-r--r--packages/website/ts/@next/components/sections/landing/clients.tsx17
-rw-r--r--packages/website/ts/@next/components/sections/landing/cta.tsx76
-rw-r--r--packages/website/ts/@next/components/sections/landing/hero.tsx10
4 files changed, 83 insertions, 75 deletions
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
index 4c246ec3e..22abe6c26 100644
--- a/packages/website/ts/@next/components/sections/landing/about.tsx
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -1,13 +1,18 @@
import * as React from 'react';
-import {Button, ButtonWrap, Link} from 'ts/@next/components/button';
+import styled from 'styled-components';
+
+import {Link} from 'ts/@next/components/button';
import {Icon, InlineIconWrap} from 'ts/@next/components/icon';
+import {Column, FlexWrap, Section} from 'ts/@next/components/newLayout';
import {Heading, Paragraph} from 'ts/@next/components/text';
-import {colors} from 'ts/style/colors';
-import {Section} from 'ts/@next/components/newLayout';
+interface FigureProps {
+ value: string;
+ description: string;
+}
export const SectionLandingAbout = () => (
- <Section bgColor="dark">
+ <Section bgColor="dark" isTextCentered={true}>
<InlineIconWrap>
<Icon name="coin" size="small" />
<Icon name="coin" size="small" />
@@ -39,8 +44,48 @@ export const SectionLandingAbout = () => (
style={{
width: '340px',
borderColor: '#3C4746',
- margin: '60px auto 0 auto',
+ margin: '60px auto',
}}
/>
+
+ <FlexWrap as="dl">
+ <Figure
+ value="873,435"
+ description="Number of Transactions"
+ />
+
+ <Figure
+ value="$203M"
+ description="Total Volume"
+ />
+
+ <Figure
+ value="227,372"
+ description="Number of Relayers"
+ />
+ </FlexWrap>
</Section>
);
+
+const Figure = (props: FigureProps) => (
+ <Column padding="0 30px">
+ <FigureValue>
+ {props.value}
+ </FigureValue>
+ <FigureDescription>
+ {props.description}
+ </FigureDescription>
+ </Column>
+);
+
+const FigureValue = styled.dt`
+ font-size: 50px;
+ font-size: 40px;
+ font-weight: 300;
+ margin-bottom: 15px;
+`;
+
+const FigureDescription = styled.dd`
+ font-size: 18px;
+ color: #999999;
+`;
diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx
index 302100ac9..8f6429328 100644
--- a/packages/website/ts/@next/components/sections/landing/clients.tsx
+++ b/packages/website/ts/@next/components/sections/landing/clients.tsx
@@ -1,10 +1,9 @@
import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
-import {BREAKPOINTS, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
import {Heading, Paragraph} from 'ts/@next/components/text';
-import {Section} from 'ts/@next/components/newLayout';
+import {Section, WrapGrid} from 'ts/@next/components/newLayout';
interface ProjectLogo {
name: string;
@@ -61,12 +60,10 @@ const projects: ProjectLogo[] = [
];
export const SectionLandingClients = () => (
- <Section>
- <WrapCentered>
- <Heading size="small">
- Join the growing number of projects developing on 0x
- </Heading>
- </WrapCentered>
+ <Section isTextCentered={true}>
+ <Heading size="small">
+ Join the growing number of projects developing on 0x
+ </Heading>
<WrapGrid width="narrow" isWrapped={true}>
{_.map(projects, (item: ProjectLogo, index) => (
@@ -90,13 +87,13 @@ const StyledProject = styled.div<StyledProjectInterface>`
height: 100%;
}
- @media (min-width: ${BREAKPOINTS.mobile}) {
+ @media (min-width: 768px) {
width: 120px;
height: 120px;
margin: 30px;
}
- @media (max-width: ${BREAKPOINTS.mobile}) {
+ @media (max-width: 768px) {
width: 100px;
height: 100px;
margin: 15px;
diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx
index ad78a1ab4..4c06982e4 100644
--- a/packages/website/ts/@next/components/sections/landing/cta.tsx
+++ b/packages/website/ts/@next/components/sections/landing/cta.tsx
@@ -1,63 +1,31 @@
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 {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" marginBottom="15px">
- Ready to build on 0x?
- </Paragraph>
-
- <Link
- href="#"
- isTransparent={true}
- isWithArrow={true}
- >
- Get Started
- </Link>
- </WrapCentered>
- </Column>
+import {Column, Section} from 'ts/@next/components/newLayout';
- <Column
- bgColor="#003831"
- colWidth="1/2"
- isPadLarge={true}
- >
- <WrapCentered>
- <Icon
- name="ready-to-build"
- size="large"
- margin={[0, 0, 'default', 0]}
- />
+import {BlockIconLink} from 'ts/@next/components/blockIconLink';
- <Paragraph size="medium" color="#00AE99" marginBottom="15px">
- Want help from the 0x team?
- </Paragraph>
-
- <Link
- href="#"
- isTransparent={true}
- isWithArrow={true}
- >
- Get in Touch
- </Link>
- </WrapCentered>
- </Column>
- </Wrap>
+export const SectionLandingCta = () => (
+ <Section
+ isPadded={false}
+ isFullWidth={true}
+ isFlex={true}
+ flexBreakpoint="900px"
+ >
+ <BlockIconLink
+ icon=""
+ title="Ready to build on 0x?"
+ linkLabel="Get Started"
+ linkUrl="#"
+ />
+ <BlockIconLink
+ icon="coin"
+ title="Wat help from the 0x team?"
+ linkLabel="Get in Touch"
+ linkUrl="#"
+ />
</Section>
);
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
index 9c6ff7151..930b80e89 100644
--- a/packages/website/ts/@next/components/sections/landing/hero.tsx
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -1,10 +1,8 @@
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 {Button} from 'ts/@next/components/button';
import {Hero} from 'ts/@next/components/hero';
+import {LandingAnimation} from 'ts/@next/components/heroImage';
import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
@@ -13,11 +11,11 @@ export const SectionLandingHero = () => (
title="Powering Decentralized Exchange"
description="0x is the best solution for adding exchange functionality to your business."
figure={<LandingAnimation image={<LogoOutlined />} />}
- actions={<Actions />}
+ actions={<HeroActions />}
/>
);
-const Actions = () => (
+const HeroActions = () => (
<>
<Button isInline={true}>
Get Started