diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-03 07:17:26 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2019-01-03 07:17:26 +0800 |
commit | 65af195054e1f6de41d36a2d30d8342bef9752c0 (patch) | |
tree | 8559d71d6dd4269139afa5334b317f6efe90acd3 /packages/website/ts/components/sections/landing/about.tsx | |
parent | 9f47f90c6e80ba9a61bcb6065fed1e2c6be8c5b7 (diff) | |
parent | 1ddf1087dd327b2ef35165518ee91eb457b84174 (diff) | |
download | dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.gz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.bz2 dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.lz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.xz dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.tar.zst dexon-sol-tools-65af195054e1f6de41d36a2d30d8342bef9752c0.zip |
Merge branch 'development' into feature/monorepo/release-notes
Diffstat (limited to 'packages/website/ts/components/sections/landing/about.tsx')
-rw-r--r-- | packages/website/ts/components/sections/landing/about.tsx | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/packages/website/ts/components/sections/landing/about.tsx b/packages/website/ts/components/sections/landing/about.tsx new file mode 100644 index 000000000..9c369d83a --- /dev/null +++ b/packages/website/ts/components/sections/landing/about.tsx @@ -0,0 +1,81 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { Button } from 'ts/components/button'; +import { Icon, InlineIconWrap } from 'ts/components/icon'; +import { Column, FlexWrap, Section } from 'ts/components/newLayout'; +import { Paragraph } from 'ts/components/text'; +import { WebsitePaths } from 'ts/types'; + +interface FigureProps { + value: string; + description: string; +} + +export const SectionLandingAbout = () => ( + <Section bgColor="dark" isTextCentered={true}> + <InlineIconWrap> + <Icon name="descriptionCoin" size="small" /> + <Icon name="descriptionCopy" size="small" /> + <Icon name="descriptionFlask" size="small" /> + <Icon name="descriptionBolt" size="small" /> + </InlineIconWrap> + + <Paragraph size="large" isCentered={true} isMuted={1} padding={['large', 0, 'default', 0]}> + 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 never existed before. + </Paragraph> + + <DeveloperLink href={`${WebsitePaths.Why}#cases`} isWithArrow={true} isAccentColor={true}> + Discover how developers use 0x + </DeveloperLink> + + <hr + style={{ + width: '100%', + maxWidth: '340px', + borderColor: '#3C4746', + margin: '60px auto', + }} + /> + + <FlexWrap as="dl"> + <Figure value="353K" description="Total Transactions" /> + + <Figure value="$447M" description="Total Volume" /> + + <Figure value="30+" description="Total Projects" /> + </FlexWrap> + </Section> +); + +const Figure = (props: FigureProps) => ( + <Column padding="0 30px"> + <FigureValue>{props.value}</FigureValue> + <FigureDescription>{props.description}</FigureDescription> + </Column> +); + +const DeveloperLink = styled(Button)` + @media (max-width: 500px) { + && { + white-space: pre-wrap; + line-height: 1.3; + } + } +`; + +const FigureValue = styled.dt` + font-size: 50px; + font-weight: 300; + margin-bottom: 15px; + + @media (max-width: 768px) { + font-size: 40px; + } +`; + +const FigureDescription = styled.dd` + font-size: 18px; + color: #999999; +`; |