aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components/sections/landing/about.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/@next/components/sections/landing/about.tsx')
-rw-r--r--packages/website/ts/@next/components/sections/landing/about.tsx133
1 files changed, 37 insertions, 96 deletions
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>
);