diff options
Diffstat (limited to 'packages/website/ts/@next/components/sections/landing/about.tsx')
-rw-r--r-- | packages/website/ts/@next/components/sections/landing/about.tsx | 55 |
1 files changed, 50 insertions, 5 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; +`; |