diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-12-21 08:01:53 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-12-21 08:01:53 +0800 |
commit | abdf91c691b924b75d71db49fba296da9c8ddcac (patch) | |
tree | 78e62a107f1de7f3b16dd63bdbc039ab26b561a3 /packages/website/ts/components/sections/landing/about.tsx | |
parent | 9b540fd8e52e7578d3749e6d9ef9cd97d602ffb3 (diff) | |
download | dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.gz dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.bz2 dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.lz dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.xz dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.tar.zst dexon-sol-tools-abdf91c691b924b75d71db49fba296da9c8ddcac.zip |
feat: move all @next files to non @next directory
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..7b51b0d13 --- /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/@next/components/button'; +import { Icon, InlineIconWrap } from 'ts/@next/components/icon'; +import { Column, FlexWrap, Section } from 'ts/@next/components/newLayout'; +import { Paragraph } from 'ts/@next/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; +`; |