diff options
Diffstat (limited to 'packages/website/ts/pages/landing/landing.tsx')
| -rw-r--r-- | packages/website/ts/pages/landing/landing.tsx | 427 |
1 files changed, 188 insertions, 239 deletions
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 1e97ae240..ca76497df 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -2,13 +2,13 @@ import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; import DocumentTitle = require('react-document-title'); -import {Link} from 'react-router-dom'; -import {Footer} from 'ts/components/footer'; -import {TopBar} from 'ts/components/top_bar'; -import {ScreenWidths, WebsitePaths} from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {constants} from 'ts/utils/constants'; -import {utils} from 'ts/utils/utils'; +import { Link } from 'react-router-dom'; +import { Footer } from 'ts/components/footer'; +import { TopBar } from 'ts/components/top_bar'; +import { ScreenWidths, WebsitePaths } from 'ts/types'; +import { colors } from 'ts/utils/colors'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; interface BoxContent { title: string; @@ -39,22 +39,25 @@ const THROTTLE_TIMEOUT = 100; const boxContents: BoxContent[] = [ { title: 'Trustless exchange', - description: 'Built on Ethereum\'s distributed network with no centralized \ + description: + "Built on Ethereum's distributed network with no centralized \ point of failure and no down time, each trade is settled atomically \ - and without counterparty risk.', + and without counterparty risk.", imageUrl: '/images/landing/distributed_network.png', classNames: '', }, { title: 'Shared liquidity', - description: 'By sharing a standard API, relayers can easily aggregate liquidity pools, \ + description: + 'By sharing a standard API, relayers can easily aggregate liquidity pools, \ creating network effects around liquidity that compound as more relayers come online.', imageUrl: '/images/landing/liquidity.png', classNames: 'mx-auto', }, { title: 'Open source', - description: '0x is open source, permissionless and free to use. Trade directly with a known \ + description: + '0x is open source, permissionless and free to use. Trade directly with a known \ counterparty for free or pay a relayer some ZRX tokens to access their liquidity \ pool.', imageUrl: '/images/landing/open_source.png', @@ -155,13 +158,13 @@ export class Landing extends React.Component<LandingProps, LandingState> { } public render() { return ( - <div id="landing" className="clearfix" style={{color: colors.grey500}}> - <DocumentTitle title="0x Protocol"/> + <div id="landing" className="clearfix" style={{ color: colors.grey500 }}> + <DocumentTitle title="0x Protocol" /> <TopBar blockchainIsLoaded={false} location={this.props.location} isNightVersion={true} - style={{backgroundColor: colors.heroGrey, position: 'relative'}} + style={{ backgroundColor: colors.heroGrey, position: 'relative' }} /> {this._renderHero()} {this._renderProjects()} @@ -188,46 +191,43 @@ export class Landing extends React.Component<LandingProps, LandingState> { lineHeight: '33px', height: 38, }; - const left = 'col lg-col-7 md-col-7 col-12 lg-pt4 md-pt4 sm-pt0 mt1 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center'; + const left = 'col lg-col-7 md-col-7 col-12 lg-pt4 md-pt4 sm-pt0 mt1 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center'; return ( - <div - className="clearfix py4" - style={{backgroundColor: colors.heroGrey}} - > - <div - className="mx-auto max-width-4 clearfix" - > + <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}> + <div className="mx-auto max-width-4 clearfix"> <div className="lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-my4 md-my4 sm-mt2 sm-mb4 clearfix"> <div className="col lg-col-5 md-col-5 col-12 sm-center"> - <img - src="/images/landing/hero_chip_image.png" - height={isSmallScreen ? 300 : 395} - /> + <img src="/images/landing/hero_chip_image.png" height={isSmallScreen ? 300 : 395} /> </div> - <div - className={left} - style={{color: colors.white}} - > - <div style={{paddingLeft: isSmallScreen ? 0 : 12}}> + <div className={left} style={{ color: colors.white }}> + <div style={{ paddingLeft: isSmallScreen ? 0 : 12 }}> <div className="sm-pb2" - style={{fontFamily: 'Roboto Mono', fontSize: isSmallScreen ? 26 : 34}} + style={{ + fontFamily: 'Roboto Mono', + fontSize: isSmallScreen ? 26 : 34, + }} > Powering decentralized exchange </div> <div className="pt2 h5 sm-mx-auto" - style={{maxWidth: 446, fontFamily: 'Roboto Mono', lineHeight: 1.7, fontWeight: 300}} + style={{ + maxWidth: 446, + fontFamily: 'Roboto Mono', + lineHeight: 1.7, + fontWeight: 300, + }} > - 0x is an open, permissionless protocol allowing for ERC20 tokens to - be traded on the Ethereum blockchain. + 0x is an open, permissionless protocol allowing for ERC20 tokens to be traded on the + Ethereum blockchain. </div> - <div className="pt3 clearfix sm-mx-auto" style={{maxWidth: 342}}> + <div className="pt3 clearfix sm-mx-auto" style={{ maxWidth: 342 }}> <div className="lg-pr2 md-pr2 col col-6 sm-center"> <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> <RaisedButton - style={{borderRadius: 6, minWidth: 157.36}} - buttonStyle={{borderRadius: 6}} + style={{ borderRadius: 6, minWidth: 157.36 }} + buttonStyle={{ borderRadius: 6 }} labelStyle={buttonLabelStyle} label="Build on 0x" onClick={_.noop} @@ -241,7 +241,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { className="text-decoration-none" > <RaisedButton - style={{borderRadius: 6, minWidth: 150}} + style={{ borderRadius: 6, minWidth: 150 }} buttonStyle={lightButtonStyle} labelColor="white" backgroundColor={colors.heroGrey} @@ -263,18 +263,11 @@ export class Landing extends React.Component<LandingProps, LandingState> { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; const isMediumScreen = this.state.screenWidth === ScreenWidths.Md; const projectList = _.map(projects, (project: Project, i: number) => { - const colWidth = isSmallScreen ? 3 : (isMediumScreen ? 4 : 2 - (i % 2)); + const colWidth = isSmallScreen ? 3 : isMediumScreen ? 4 : 2 - i % 2; return ( - <div - key={`project-${project.logoFileName}`} - className={`col col-${colWidth} center`} - > + <div key={`project-${project.logoFileName}`} className={`col col-${colWidth} center`}> <div> - <a - href={project.projectUrl} - target="_blank" - className="text-decoration-none" - > + <a href={project.projectUrl} target="_blank" className="text-decoration-none"> <img src={`/images/landing/project_logos/${project.logoFileName}`} height={isSmallScreen ? 60 : 92} @@ -292,29 +285,26 @@ export class Landing extends React.Component<LandingProps, LandingState> { letterSpacing: 3, }; return ( - <div - className="clearfix py4" - style={{backgroundColor: colors.projectsGrey}} - > + <div className="clearfix py4" style={{ backgroundColor: colors.projectsGrey }}> <div className="mx-auto max-width-4 clearfix sm-px3"> - <div - className="h4 pb3 md-pl3 sm-pl2" - style={titleStyle} - > + <div className="h4 pb3 md-pl3 sm-pl2" style={titleStyle}> Projects building on 0x </div> - <div className="clearfix"> - {projectList} - </div> + <div className="clearfix">{projectList}</div> <div className="pt3 mx-auto center" - style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono', maxWidth: 300, fontSize: 14}} + style={{ + color: colors.landingLinkGrey, + fontFamily: 'Roboto Mono', + maxWidth: 300, + fontSize: 14, + }} > view the{' '} <Link to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`} className="text-decoration-none underline" - style={{color: colors.landingLinkGrey}} + style={{ color: colors.landingLinkGrey }} > full list </Link> @@ -326,52 +316,41 @@ export class Landing extends React.Component<LandingProps, LandingState> { private _renderTokenizationSection() { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( - <div - className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" - style={{backgroundColor: colors.grey100}} - > + <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.grey100 }}> <div className="mx-auto max-width-4 py4 clearfix"> - {isSmallScreen && - this._renderTokenCloud() - } + {isSmallScreen && this._renderTokenCloud()} <div className="col lg-col-6 md-col-6 col-12"> - <div className="mx-auto" style={{maxWidth: 385, paddingTop: 7}}> - <div - className="lg-h1 md-h1 sm-h2 sm-center sm-pt3" - style={{fontFamily: 'Roboto Mono'}} - > + <div className="mx-auto" style={{ maxWidth: 385, paddingTop: 7 }}> + <div className="lg-h1 md-h1 sm-h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}> The world's value is becoming tokenized </div> <div className="pb2 lg-pt2 md-pt2 sm-pt3 sm-px3 h5 sm-center" - style={{fontFamily: 'Roboto Mono', lineHeight: 1.7}} + style={{ fontFamily: 'Roboto Mono', lineHeight: 1.7 }} > - {isSmallScreen ? + {isSmallScreen ? ( <span> The Ethereum blockchain is an open, borderless financial system that represents a wide variety of assets as cryptographic tokens. In the future, most digital assets and goods will be tokenized. - </span> : + </span> + ) : ( <div> <div> - The Ethereum blockchain is an open, borderless - financial system that represents + The Ethereum blockchain is an open, borderless financial system that + represents </div> <div> - a wide variety of assets as cryptographic tokens. - In the future, most digital assets and goods will be tokenized. + a wide variety of assets as cryptographic tokens. In the future, most + digital assets and goods will be tokenized. </div> </div> - } - </div> - <div className="flex pt1 sm-px3"> - {this._renderAssetTypes()} + )} </div> + <div className="flex pt1 sm-px3">{this._renderAssetTypes()}</div> </div> </div> - {!isSmallScreen && - this._renderTokenCloud() - } + {!isSmallScreen && this._renderTokenCloud()} </div> </div> ); @@ -379,81 +358,84 @@ export class Landing extends React.Component<LandingProps, LandingState> { private _renderProtocolSection() { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( - <div - className="clearfix lg-py4 md-py4 sm-pt4" - style={{backgroundColor: colors.heroGrey}} - > + <div className="clearfix lg-py4 md-py4 sm-pt4" style={{ backgroundColor: colors.heroGrey }}> <div className="mx-auto max-width-4 lg-py4 md-py4 sm-pt4 clearfix"> <div className="col lg-col-6 md-col-6 col-12 sm-center"> - <img - src="/images/landing/relayer_diagram.png" - height={isSmallScreen ? 326 : 426} - /> + <img src="/images/landing/relayer_diagram.png" height={isSmallScreen ? 326 : 426} /> </div> <div className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto" - style={{color: colors.beigeWhite, paddingTop: 8, maxWidth: isSmallScreen ? 'none' : 445}} + style={{ + color: colors.beigeWhite, + paddingTop: 8, + maxWidth: isSmallScreen ? 'none' : 445, + }} > - <div - className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center" - style={{fontFamily: 'Roboto Mono'}} - > - <div> - Off-chain order relay - </div> - <div> - On-chain settlement - </div> + <div className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center" style={{ fontFamily: 'Roboto Mono' }}> + <div>Off-chain order relay</div> + <div>On-chain settlement</div> </div> <div className="pb2 pt2 h5 sm-center sm-px3 sm-mx-auto" - style={{fontFamily: 'Roboto Mono', lineHeight: 1.7, fontWeight: 300, maxWidth: 445}} + style={{ + fontFamily: 'Roboto Mono', + lineHeight: 1.7, + fontWeight: 300, + maxWidth: 445, + }} > - In 0x protocol, orders are transported off-chain, massively reducing gas - costs and eliminating blockchain bloat. Relayers help broadcast orders and - collect a fee each time they facilitate a trade. Anyone can build a relayer. + In 0x protocol, orders are transported off-chain, massively reducing gas costs and + eliminating blockchain bloat. Relayers help broadcast orders and collect a fee each time + they facilitate a trade. Anyone can build a relayer. </div> <div className="pt3 sm-mx-auto sm-px3" - style={{color: colors.landingLinkGrey, maxWidth: isSmallScreen ? 412 : 'none'}} + style={{ + color: colors.landingLinkGrey, + maxWidth: isSmallScreen ? 412 : 'none', + }} > - <div className="flex" style={{fontSize: 18}}> + <div className="flex" style={{ fontSize: 18 }}> <div className="lg-h4 md-h4 sm-h5" - style={{letterSpacing: isSmallScreen ? 1 : 3, fontFamily: 'Roboto Mono'}} + style={{ + letterSpacing: isSmallScreen ? 1 : 3, + fontFamily: 'Roboto Mono', + }} > RELAYERS BUILDING ON 0X </div> - <div className="h5" style={{marginLeft: isSmallScreen ? 26 : 49}}> + <div className="h5" style={{ marginLeft: isSmallScreen ? 26 : 49 }}> <Link to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`} className="text-decoration-none underline" - style={{color: colors.landingLinkGrey, fontFamily: 'Roboto Mono'}} + style={{ + color: colors.landingLinkGrey, + fontFamily: 'Roboto Mono', + }} > view all </Link> </div> </div> - <div className="lg-flex md-flex sm-clearfix pt3" style={{opacity: 0.4}}> + <div className="lg-flex md-flex sm-clearfix pt3" style={{ opacity: 0.4 }}> <div className="col col-4 sm-center"> - <img - src="/images/landing/ethfinex.png" - style={{height: isSmallScreen ? 85 : 107}} - /> + <img + src="/images/landing/ethfinex.png" + style={{ height: isSmallScreen ? 85 : 107 }} + /> </div> - <div - className="col col-4 center" - > - <img - src="/images/landing/radar_relay.png" - style={{height: isSmallScreen ? 85 : 107}} - /> + <div className="col col-4 center"> + <img + src="/images/landing/radar_relay.png" + style={{ height: isSmallScreen ? 85 : 107 }} + /> </div> - <div className="col col-4 sm-center" style={{textAlign: 'right'}}> - <img - src="/images/landing/paradex.png" - style={{height: isSmallScreen ? 85 : 107}} - /> + <div className="col col-4 sm-center" style={{ textAlign: 'right' }}> + <img + src="/images/landing/paradex.png" + style={{ height: isSmallScreen ? 85 : 107 }} + /> </div> </div> </div> @@ -478,58 +460,45 @@ export class Landing extends React.Component<LandingProps, LandingState> { maxWidth: isSmallScreen ? 375 : 441, }; return ( - <div - className="clearfix lg-pt4 md-pt4" - style={{backgroundColor: colors.heroGrey}} - > + <div className="clearfix lg-pt4 md-pt4" style={{ backgroundColor: colors.heroGrey }}> <div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix"> - {isSmallScreen && - this._renderBlockChipImage() - } + {isSmallScreen && this._renderBlockChipImage()} <div className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3" - style={{color: colors.beigeWhite}} + style={{ color: colors.beigeWhite }} > <div className="pb1 lg-pt4 md-pt4 sm-pt3 lg-h1 md-h1 sm-h2 sm-px3 sm-center" - style={{fontFamily: 'Roboto Mono'}} + style={{ fontFamily: 'Roboto Mono' }} > A building block for dApps </div> - <div - className="pb3 pt2 sm-mx-auto sm-center" - style={descriptionStyle} - > + <div className="pb3 pt2 sm-mx-auto sm-center" style={descriptionStyle}> 0x protocol is a pluggable building block for dApps that require exchange functionality. Join the many developers that are already using 0x in their web applications and smart contracts. </div> - <div - className="sm-mx-auto sm-center" - style={callToActionStyle} - > + <div className="sm-mx-auto sm-center" style={callToActionStyle}> Learn how in our{' '} <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none underline" - style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}} + style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }} > 0x.js - </Link> - {' '}and{' '} + </Link>{' '} + and{' '} <Link to={WebsitePaths.SmartContracts} className="text-decoration-none underline" - style={{color: colors.beigeWhite, fontFamily: 'Roboto Mono'}} + style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }} > smart contract - </Link> - {' '}docs + </Link>{' '} + docs </div> </div> - {!isSmallScreen && - this._renderBlockChipImage() - } + {!isSmallScreen && this._renderBlockChipImage()} </div> </div> ); @@ -538,10 +507,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( <div className="col lg-col-6 md-col-6 col-12 sm-center"> - <img - src="/images/landing/0x_chips.png" - height={isSmallScreen ? 240 : 368} - /> + <img src="/images/landing/0x_chips.png" height={isSmallScreen ? 240 : 368} /> </div> ); } @@ -549,10 +515,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( <div className="col lg-col-6 md-col-6 col-12 center"> - <img - src="/images/landing/tokenized_world.png" - height={isSmallScreen ? 280 : 364.5} - /> + <img src="/images/landing/tokenized_world.png" height={isSmallScreen ? 280 : 364.5} /> </div> ); } @@ -566,7 +529,10 @@ export class Landing extends React.Component<LandingProps, LandingState> { { title: 'Traditional assets', imageUrl: '/images/landing/stocks.png', - style: {paddingLeft: isSmallScreen ? 41 : 56, paddingRight: isSmallScreen ? 41 : 56}, + style: { + paddingLeft: isSmallScreen ? 41 : 56, + paddingRight: isSmallScreen ? 41 : 56, + }, }, { title: 'Digital goods', @@ -576,18 +542,18 @@ export class Landing extends React.Component<LandingProps, LandingState> { const assets = _.map(assetTypes, (assetType: AssetType) => { const style = _.isUndefined(assetType.style) ? {} : assetType.style; return ( - <div - key={`asset-${assetType.title}`} - className="center" - style={{opacity: 0.8, ...style}} - > + <div key={`asset-${assetType.title}`} className="center" style={{ opacity: 0.8, ...style }}> <div> - <img - src={assetType.imageUrl} - height="80" - /> + <img src={assetType.imageUrl} height="80" /> </div> - <div style={{fontFamily: 'Roboto Mono', fontSize: 13.5, fontWeight: 400, opacity: 0.75}}> + <div + style={{ + fontFamily: 'Roboto Mono', + fontSize: 13.5, + fontWeight: 400, + opacity: 0.75, + }} + > {assetType.title} </div> </div> @@ -606,43 +572,24 @@ export class Landing extends React.Component<LandingProps, LandingState> { }; const boxes = _.map(boxContents, (boxContent: BoxContent) => { return ( - <div - key={`box-${boxContent.title}`} - className="col lg-col-4 md-col-4 col-12 sm-pb4" - > - <div - className={`center sm-mx-auto ${!isSmallScreen && boxContent.classNames}`} - style={boxStyle} - > + <div key={`box-${boxContent.title}`} className="col lg-col-4 md-col-4 col-12 sm-pb4"> + <div className={`center sm-mx-auto ${!isSmallScreen && boxContent.classNames}`} style={boxStyle}> <div> - <img src={boxContent.imageUrl} style={{height: 210}} /> + <img src={boxContent.imageUrl} style={{ height: 210 }} /> </div> - <div - className="h3" - style={{color: 'black', fontFamily: 'Roboto Mono'}} - > + <div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}> {boxContent.title} </div> - <div - className="pt2 pb2" - style={{fontFamily: 'Roboto Mono', fontSize: 14}} - > + <div className="pt2 pb2" style={{ fontFamily: 'Roboto Mono', fontSize: 14 }}> {boxContent.description} </div> </div> </div> ); - }); return ( - <div - className="clearfix" - style={{backgroundColor: colors.heroGrey}} - > - <div - className="mx-auto py4 sm-mt2 clearfix" - style={{maxWidth: '60em'}} - > + <div className="clearfix" style={{ backgroundColor: colors.heroGrey }}> + <div className="mx-auto py4 sm-mt2 clearfix" style={{ maxWidth: '60em' }}> {boxes} </div> </div> @@ -655,7 +602,8 @@ export class Landing extends React.Component<LandingProps, LandingState> { { imageUrl: '/images/landing/governance_icon.png', type: 'Decentralized governance', - description: 'Decentralized organizations use tokens to represent ownership and \ + description: + 'Decentralized organizations use tokens to represent ownership and \ guide their governance logic. 0x allows decentralized organizations \ to seamlessly and safely trade ownership for startup capital.', projectIconUrls: ['/images/landing/aragon.png'], @@ -664,7 +612,8 @@ export class Landing extends React.Component<LandingProps, LandingState> { { imageUrl: '/images/landing/prediction_market_icon.png', type: 'Prediction markets', - description: 'Decentralized prediction market platforms generate sets of tokens that \ + description: + 'Decentralized prediction market platforms generate sets of tokens that \ represent a financial stake in the outcomes of real-world events. 0x allows \ these tokens to be instantly tradable.', projectIconUrls: ['/images/landing/augur.png'], @@ -673,7 +622,8 @@ export class Landing extends React.Component<LandingProps, LandingState> { { imageUrl: '/images/landing/stable_tokens_icon.png', type: 'Stable tokens', - description: 'Novel economic constructs such as stable coins require efficient, liquid \ + description: + 'Novel economic constructs such as stable coins require efficient, liquid \ markets to succeed. 0x will facilitate the underlying economic mechanisms \ that allow these tokens to remain stable.', projectIconUrls: ['/images/landing/maker.png'], @@ -682,22 +632,28 @@ export class Landing extends React.Component<LandingProps, LandingState> { { imageUrl: '/images/landing/loans_icon.png', type: 'Decentralized loans', - description: 'Efficient lending requires liquid markets where investors can buy and re-sell loans. \ + description: + 'Efficient lending requires liquid markets where investors can buy and re-sell loans. \ 0x enables an ecosystem of lenders to self-organize and efficiently determine \ market prices for all outstanding loans.', projectIconUrls: ['/images/landing/dharma.png', '/images/landing/lendroid.png'], classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6', - style: {width: 291, float: 'right', marginTop: !isSmallScreen ? 38 : 0}, + style: { + width: 291, + float: 'right', + marginTop: !isSmallScreen ? 38 : 0, + }, }, { imageUrl: '/images/landing/fund_management_icon.png', type: 'Fund management', - description: 'Decentralized fund management limits fund managers to investing in pre-agreed \ + description: + 'Decentralized fund management limits fund managers to investing in pre-agreed \ upon asset classes. Embedding 0x into fund management smart contracts enables \ them to enforce these security constraints.', projectIconUrls: ['/images/landing/melonport.png'], classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6', - style: {width: 291, marginTop: !isSmallScreen ? 38 : 0}, + style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 }, }, ]; @@ -722,22 +678,21 @@ export class Landing extends React.Component<LandingProps, LandingState> { key={`useCase-${useCase.type}`} className={`col lg-col-4 md-col-4 col-12 sm-pt3 sm-px3 sm-pb3 ${useCase.classNames}`} > - <div - className="relative p2 pb2 sm-mx-auto" - style={useCaseBoxStyle} - > - <div - className="absolute center" - style={{top: -35, width: 'calc(100% - 32px)'}} - > - <img src={useCase.imageUrl} style={{height: 50}} /> + <div className="relative p2 pb2 sm-mx-auto" style={useCaseBoxStyle}> + <div className="absolute center" style={{ top: -35, width: 'calc(100% - 32px)' }}> + <img src={useCase.imageUrl} style={{ height: 50 }} /> </div> <div className="pt2 center" style={typeStyle}> {useCase.type} </div> <div className="pt2" - style={{lineHeight: 1.5, fontSize: 14, overflow: 'hidden', height: 104}} + style={{ + lineHeight: 1.5, + fontSize: 14, + overflow: 'hidden', + height: 104, + }} > {useCase.description} </div> @@ -746,14 +701,8 @@ export class Landing extends React.Component<LandingProps, LandingState> { ); }); return ( - <div - className="clearfix pb4 lg-pt2 md-pt2 sm-pt4" - style={{backgroundColor: colors.heroGrey}} - > - <div - className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" - style={{maxWidth: '67em'}} - > + <div className="clearfix pb4 lg-pt2 md-pt2 sm-pt4" style={{ backgroundColor: colors.heroGrey }}> + <div className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" style={{ maxWidth: '67em' }}> {cases} </div> </div> @@ -772,26 +721,26 @@ export class Landing extends React.Component<LandingProps, LandingState> { lineHeight: '33px', height: 49, }; - const callToActionClassNames = 'col lg-col-8 md-col-8 col-12 lg-pr3 md-pr3 \ + const callToActionClassNames = + 'col lg-col-8 md-col-8 col-12 lg-pr3 md-pr3 \ lg-right-align md-right-align sm-center sm-px3 h4'; return ( - <div - className="clearfix pb4" - style={{backgroundColor: colors.heroGrey}} - > - <div - className="mx-auto max-width-4 pb4 mb3 clearfix" - > + <div className="clearfix pb4" style={{ backgroundColor: colors.heroGrey }}> + <div className="mx-auto max-width-4 pb4 mb3 clearfix"> <div className={callToActionClassNames} - style={{fontFamily: 'Roboto Mono', color: colors.white, lineHeight: isSmallScreen ? 1.7 : 3}} + style={{ + fontFamily: 'Roboto Mono', + color: colors.white, + lineHeight: isSmallScreen ? 1.7 : 3, + }} > Get started on building the decentralized future </div> <div className="col lg-col-4 md-col-4 col-12 sm-center sm-pt2"> <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> <RaisedButton - style={{borderRadius: 6, minWidth: 150}} + style={{ borderRadius: 6, minWidth: 150 }} buttonStyle={lightButtonStyle} labelColor={colors.white} backgroundColor={colors.heroGrey} |