diff options
author | Brandon Millman <brandon@0xproject.com> | 2018-08-31 04:46:37 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-08-31 04:46:37 +0800 |
commit | 8c7cec98223920a8c977c3b7b1cd87dd560b55db (patch) | |
tree | 3b93ece887bb5e1500fdbc9da1dd3cb763e4b758 /packages/website/ts/pages/landing | |
parent | 81ba2a8411abc84ab052a65e1c674af44b8cf746 (diff) | |
parent | a224ce347e3ee15b7bb3992a3f59d1576b07b46a (diff) | |
download | dexon-sol-tools-8c7cec98223920a8c977c3b7b1cd87dd560b55db.tar dexon-sol-tools-8c7cec98223920a8c977c3b7b1cd87dd560b55db.tar.gz dexon-sol-tools-8c7cec98223920a8c977c3b7b1cd87dd560b55db.tar.bz2 dexon-sol-tools-8c7cec98223920a8c977c3b7b1cd87dd560b55db.tar.lz dexon-sol-tools-8c7cec98223920a8c977c3b7b1cd87dd560b55db.tar.xz dexon-sol-tools-8c7cec98223920a8c977c3b7b1cd87dd560b55db.tar.zst dexon-sol-tools-8c7cec98223920a8c977c3b7b1cd87dd560b55db.zip |
Merge pull request #1040 from 0xProject/feature/website/v2-tweaks
[website] Landing page tweaks for v2 launch
Diffstat (limited to 'packages/website/ts/pages/landing')
-rw-r--r-- | packages/website/ts/pages/landing/landing.tsx | 521 |
1 files changed, 187 insertions, 334 deletions
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx index 78f5fc3c1..34f124d8c 100644 --- a/packages/website/ts/pages/landing/landing.tsx +++ b/packages/website/ts/pages/landing/landing.tsx @@ -8,6 +8,9 @@ import { SubscribeForm } from 'ts/components/forms/subscribe_form'; import { TopBar } from 'ts/components/top_bar/top_bar'; import { CallToAction } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; +import { Image } from 'ts/components/ui/image'; +import { Text } from 'ts/components/ui/text'; +import { TypedText } from 'ts/components/ui/typed_text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types'; import { constants } from 'ts/utils/constants'; @@ -31,7 +34,6 @@ interface UseCase { description: string; classNames: string; style?: React.CSSProperties; - projectIconUrls: string[]; } interface Project { logoFileName: string; @@ -41,72 +43,22 @@ interface Project { const THROTTLE_TIMEOUT = 100; const WHATS_NEW_TITLE = '18 ideas for 0x relayers in 2018'; const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f'; - -const relayersAndDappProjects: Project[] = [ - { - logoFileName: 'ercdex.png', - projectUrl: constants.PROJECT_URL_ERC_DEX, - }, - { - logoFileName: 'radar_relay.png', - projectUrl: constants.PROJECT_URL_RADAR_RELAY, - }, - { - logoFileName: 'paradex.png', - projectUrl: constants.PROJECT_URL_PARADEX, - }, - { - logoFileName: 'the_ocean.png', - projectUrl: constants.PROJECT_URL_0CEAN, - }, - { - logoFileName: 'dydx.png', - projectUrl: constants.PROJECT_URL_DYDX, - }, - { - logoFileName: 'ethfinex.png', - projectUrl: constants.PROJECT_URL_ETHFINEX, - }, - { - logoFileName: 'melonport.png', - projectUrl: constants.PROJECT_URL_MELONPORT, - }, - { - logoFileName: 'maker.png', - projectUrl: constants.PROJECT_URL_MAKER, - }, - { - logoFileName: 'dharma.png', - projectUrl: constants.PROJECT_URL_DHARMA, - }, - { - logoFileName: 'lendroid.png', - projectUrl: constants.PROJECT_URL_LENDROID, - }, - { - logoFileName: 'district0x.png', - projectUrl: constants.PROJECT_URL_DISTRICT_0X, - }, - { - logoFileName: 'aragon.png', - projectUrl: constants.PROJECT_URL_ARAGON, - }, - { - logoFileName: 'blocknet.png', - projectUrl: constants.PROJECT_URL_BLOCKNET, - }, - { - logoFileName: 'imtoken.png', - projectUrl: constants.PROJECT_URL_IMTOKEN, - }, - { - logoFileName: 'augur.png', - projectUrl: constants.PROJECT_URL_AUGUR, - }, - { - logoFileName: 'anx.png', - projectUrl: constants.PROJECT_URL_OPEN_ANX, - }, +const TITLE_STYLE: React.CSSProperties = { + fontFamily: 'Roboto Mono', + color: colors.grey, + fontWeight: 300, + letterSpacing: 3, +}; +const ROTATING_LIST = [ + 'tokens', + 'game items', + 'digital art', + 'outcomes', + 'stocks', + 'derivatives', + 'loans', + 'cats', + 'everything', ]; const relayerProjects: Project[] = [ @@ -199,21 +151,13 @@ export class Landing extends React.Component<LandingProps, LandingState> { /> {this._renderHero()} {this._renderProjects( - relayersAndDappProjects, - this.props.translate.get(Key.ProjectsHeader, Deco.Upper), - colors.projectsGrey, - false, - )} - {this._renderTokenizationSection()} - {this._renderProtocolSection()} - {this._renderProjects( relayerProjects, this.props.translate.get(Key.RelayersHeader, Deco.Upper), - colors.heroGrey, + colors.projectsGrey, true, )} {this._renderInfoBoxes()} - {this._renderBuildingBlocksSection()} + {this._renderTokenizationSection()} {this._renderUseCases()} {this._renderCallToAction()} <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} /> @@ -222,15 +166,18 @@ export class Landing extends React.Component<LandingProps, LandingState> { } private _renderHero(): React.ReactNode { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const left = 'col lg-col-7 md-col-7 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center'; + const left = 'col lg-col-6 md-col-6 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center'; + const flexClassName = isSmallScreen + ? 'flex items-center flex-column justify-center' + : 'flex items-center justify-center'; return ( <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}> <div className="mx-auto max-width-4 clearfix"> {this._renderWhatsNew()} - <div className="lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-mt4 md-mt4 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} /> - </div> + <div className={`${flexClassName} lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-mt4 md-mt4 sm-mt2 sm-mb4`}> + <Container marginTop="30px" marginBottom="30px" marginLeft="15px" marginRight="15px"> + <Image src="/images/landing/0x_homepage.svg" maxWidth="100%" height="auto" /> + </Container> <div className={left} style={{ color: colors.white, height: 390, lineHeight: '390px' }}> <div className="inline-block lg-align-middle md-align-middle sm-align-top" @@ -239,37 +186,46 @@ export class Landing extends React.Component<LandingProps, LandingState> { lineHeight: '36px', }} > - <div + <Text className="sm-pb2" - style={{ - fontFamily: 'Roboto Mono', - fontSize: isSmallScreen ? 26 : 34, - }} + fontFamily="Roboto" + display="inline-block" + fontColor={colors.grey300} + fontWeight={500} + lineHeight="1.3em" + fontSize={isSmallScreen ? '28px' : '36px'} > {this.props.translate.get(Key.TopHeader, Deco.Cap)} - </div> - <div - className="pt2 h5 sm-mx-auto" - style={{ - maxWidth: 446, - fontFamily: 'Roboto Mono', - lineHeight: 1.7, - fontWeight: 300, - }} + {this.props.translate.getLanguage() === Language.English && ( + <React.Fragment> + {' '} + for{' '} + <TypedText + fontFamily="Roboto" + display="inline-block" + fontColor={colors.white} + fontWeight={700} + lineHeight="1.3em" + fontSize={isSmallScreen ? '28px' : '36px'} + textList={ROTATING_LIST} + shouldRepeat={true} + /> + </React.Fragment> + )} + </Text> + <Container + className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`} > - {this.props.translate.get(Key.TopTagline)} - </div> - <Container className="pt3 clearfix sm-mx-auto" maxWidth="390px"> - <div className="lg-pr2 md-pr2 lg-col lg-col-6 sm-center sm-col sm-col-12 mb2"> + <Container paddingRight="20px"> <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none"> - <CallToAction width="175px" type="light"> + <CallToAction type="light"> {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)} </CallToAction> </Link> - </div> - <div className="lg-col lg-col-6 sm-center sm-col sm-col-12"> + </Container> + <div> <Link to={WebsitePaths.Portal} className="text-decoration-none"> - <CallToAction width="175px"> + <CallToAction> {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)} </CallToAction> </Link> @@ -287,19 +243,24 @@ export class Landing extends React.Component<LandingProps, LandingState> { return ( <div className="sm-center sm-px1"> <a href={WHATS_NEW_URL} target="_blank" className="inline-block text-decoration-none"> - <div className="flex sm-pl0 md-pl2 lg-pl0" style={{ fontFamily: 'Roboto Mono', fontWeight: 600 }}> - <div - className="mr1 px1" - style={{ - backgroundColor: colors.white, - borderRadius: 3, - color: colors.heroGrey, - height: 23, - }} + <div className="flex items-center sm-pl0 md-pl2 lg-pl0"> + <Container + paddingTop="3px" + paddingLeft="8px" + paddingBottom="3px" + paddingRight="8px" + backgroundColor={colors.white} + borderRadius={6} > - New - </div> - <div style={{ color: colors.darkGrey }}>{WHATS_NEW_TITLE}</div> + <Text fontSize="14px" fontWeight={500} fontColor={colors.heroGrey}> + New + </Text> + </Container> + <Container marginLeft="12px"> + <Text fontSize="16px" fontWeight={500} fontColor={colors.grey300}> + {WHATS_NEW_TITLE} + </Text> + </Container> </div> </a> </div> @@ -344,16 +305,10 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); }); - const titleStyle: React.CSSProperties = { - fontFamily: 'Roboto Mono', - color: colors.grey, - fontWeight: 300, - letterSpacing: 3, - }; return ( <div className={`clearfix py4 ${isTitleCenter && 'center'}`} style={{ backgroundColor }}> <div className="mx-auto max-width-4 clearfix sm-px3"> - <div className="h4 pb3 lg-pl0 md-pl3 sm-pl2" style={titleStyle}> + <div className="h4 pb3 lg-pl0 md-pl3 sm-pl2" style={TITLE_STYLE}> {title} </div> <div className="clearfix">{projectList}</div> @@ -368,7 +323,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { > {this.props.translate.get(Key.FullListPrompt)}{' '} <Link - to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`} + to={WebsitePaths.Portal} className="text-decoration-none underline" style={{ color: colors.landingLinkGrey }} > @@ -402,7 +357,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { > {this.props.translate.get(Key.TokenizedSectionDescription, Deco.Cap)} </div> - <div className="flex pt1 sm-px3">{this._renderAssetTypes()}</div> + <div className="flex pt1 sm-px3">{this._renderMissionAndValuesButton()}</div> </div> </div> {!isSmallScreen && this._renderTokenCloud()} @@ -410,116 +365,6 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); } - private _renderProtocolSection(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - return ( - <div className="clearfix pt4" style={{ backgroundColor: colors.heroGrey }}> - <div className="mx-auto max-width-4 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} /> - </div> - <div - className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto" - style={{ - color: colors.beigeWhite, - maxWidth: isSmallScreen ? 'none' : 445, - height: 430, - lineHeight: '430px', - }} - > - <div - className="inline-block lg-align-middle md-align-middle sm-align-top" - style={{ lineHeight: '43px' }} - > - <div - className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center" - style={{ fontFamily: 'Roboto Mono' }} - > - <div>{this.props.translate.get(Key.OffChainOrderRelay, Deco.Cap)}</div> - <div> {this.props.translate.get(Key.OnChainSettlement, Deco.Cap)}</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, - }} - > - {this.props.translate.get(Key.OffChainOnChainDescription, Deco.Cap)} - </div> - </div> - </div> - </div> - </div> - ); - } - private _renderBuildingBlocksSection(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const descriptionStyle: React.CSSProperties = { - fontFamily: 'Roboto Mono', - lineHeight: isSmallScreen ? 1.5 : 2, - fontWeight: 300, - fontSize: 15, - maxWidth: isSmallScreen ? 375 : 'none', - }; - const callToActionStyle: React.CSSProperties = { - fontFamily: 'Roboto Mono', - fontSize: 15, - fontWeight: 300, - maxWidth: isSmallScreen ? 375 : 441, - }; - return ( - <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()} - <div - className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3" - 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' }} - > - {this.props.translate.get(Key.BuildingBlockSectionHeader, Deco.Cap)} - </div> - <div className="pb3 pt2 sm-mx-auto sm-center" style={descriptionStyle}> - {this.props.translate.get(Key.BuildingBlockSectionDescription, Deco.Cap)} - </div> - <div className="sm-mx-auto sm-center" style={callToActionStyle}> - {this.props.translate.get(Key.DevToolsPrompt, Deco.Cap)}{' '} - <Link - to={WebsitePaths.ZeroExJs} - className="text-decoration-none underline" - style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }} - > - 0x.js - </Link>{' '} - {this.props.translate.get(Key.And)}{' '} - <Link - to={WebsitePaths.SmartContracts} - className="text-decoration-none underline" - style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }} - > - {this.props.translate.get(Key.SmartContract)} - </Link>{' '} - {this.props.translate.get(Key.Docs)} - </div> - </div> - {!isSmallScreen && this._renderBlockChipImage()} - </div> - </div> - ); - } - private _renderBlockChipImage(): React.ReactNode { - 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} /> - </div> - ); - } private _renderTokenCloud(): React.ReactNode { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; return ( @@ -528,48 +373,16 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); } - private _renderAssetTypes(): React.ReactNode { - const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - const assetTypes: AssetType[] = [ - { - title: this.props.translate.get(Key.Currency, Deco.Cap), - imageUrl: '/images/landing/currency.png', - }, - { - title: this.props.translate.get(Key.TraditionalAssets, Deco.Cap), - imageUrl: '/images/landing/stocks.png', - style: { - paddingLeft: isSmallScreen ? 41 : 56, - paddingRight: isSmallScreen ? 41 : 56, - }, - }, - { - title: this.props.translate.get(Key.DigitalGoods, Deco.Cap), - imageUrl: '/images/landing/digital_goods.png', - }, - ]; - 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> - <img src={assetType.imageUrl} height="80" /> - </div> - <div - style={{ - fontFamily: 'Roboto Mono', - fontSize: 13.5, - fontWeight: 400, - color: colors.darkestGrey, - lineHeight: 1.4, - }} - > - {assetType.title} - </div> - </div> - ); - }); - return assets; + private _renderMissionAndValuesButton(): React.ReactNode { + return ( + <a + href={constants.URL_MISSION_AND_VALUES_BLOG_POST} + target="_blank" + className="inline-block text-decoration-none" + > + <CallToAction>{this.props.translate.get(Key.OurMissionAndValues, Deco.CapWords)}</CallToAction> + </a> + ); } private _renderInfoBoxes(): React.ReactNode { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; @@ -596,7 +409,7 @@ export class Landing extends React.Component<LandingProps, LandingState> { { title: this.props.translate.get(Key.BenefitThreeTitle, Deco.Cap), description: this.props.translate.get(Key.BenefitThreeDescription, Deco.Cap), - imageUrl: '/images/landing/open_source.png', + imageUrl: '/images/landing/exchange_everywhere.png', classNames: 'right', }, ]; @@ -604,9 +417,13 @@ export class Landing extends React.Component<LandingProps, LandingState> { 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> - <img src={boxContent.imageUrl} style={{ height: 210 }} /> - </div> + <Container className="flex items-center" height="210px"> + <img + className="mx-auto" + src={boxContent.imageUrl} + style={{ height: 'auto', maxWidth: 160 }} + /> + </Container> <div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}> {boxContent.title} </div> @@ -617,15 +434,9 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); }); - const titleStyle: React.CSSProperties = { - fontFamily: 'Roboto Mono', - color: colors.grey, - fontWeight: 300, - letterSpacing: 3, - }; return ( <div className="clearfix" style={{ backgroundColor: colors.heroGrey }}> - <div className="center pb3 pt4" style={titleStyle}> + <div className="center pb3 pt4" style={TITLE_STYLE}> {this.props.translate.get(Key.BenefitsHeader, Deco.Upper)} </div> <div className="mx-auto pb4 sm-mt2 clearfix" style={{ maxWidth: '60em' }}> @@ -634,53 +445,92 @@ export class Landing extends React.Component<LandingProps, LandingState> { </div> ); } - private _renderUseCases(): React.ReactNode { + private _getUseCases(): UseCase[] { const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; - - const useCases: UseCase[] = [ - { - imageUrl: '/images/landing/governance_icon.png', - type: this.props.translate.get(Key.DecentralizedGovernance, Deco.Upper), - description: this.props.translate.get(Key.DecentralizedGovernanceDescription, Deco.Cap), - projectIconUrls: ['/images/landing/aragon.png'], - classNames: 'lg-px2 md-px2', - }, - { - imageUrl: '/images/landing/prediction_market_icon.png', - type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper), - description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap), - projectIconUrls: ['/images/landing/augur.png'], - classNames: 'lg-px2 md-px2', - }, - { - imageUrl: '/images/landing/stable_tokens_icon.png', - type: this.props.translate.get(Key.StableTokens, Deco.Upper), - description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap), - projectIconUrls: ['/images/landing/maker.png'], - classNames: 'lg-px2 md-px2', - }, - { - imageUrl: '/images/landing/loans_icon.png', - type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper), - description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap), - 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, + const isEnglish = this.props.translate.getLanguage() === Language.English; + if (isEnglish) { + return [ + { + imageUrl: '/images/landing/governance_icon.png', + type: this.props.translate.get(Key.GamingAndCollectables, Deco.Upper), + description: this.props.translate.get(Key.GamingAndCollectablesDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', }, - }, - { - imageUrl: '/images/landing/fund_management_icon.png', - type: this.props.translate.get(Key.FundManagement, Deco.Upper), - description: this.props.translate.get(Key.FundManagementDescription, Deco.Cap), - projectIconUrls: ['/images/landing/melonport.png'], - classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6', - style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 }, - }, - ]; - + { + imageUrl: '/images/landing/prediction_market_icon.png', + type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper), + description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/fund_management_icon.png', + type: this.props.translate.get(Key.OrderBooks, Deco.Upper), + description: this.props.translate.get(Key.OrderBooksDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/loans_icon.png', + type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper), + description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap), + classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6', + style: { + width: 291, + float: 'right', + marginTop: !isSmallScreen ? 38 : 0, + }, + }, + { + imageUrl: '/images/landing/stable_tokens_icon.png', + type: this.props.translate.get(Key.StableTokens, Deco.Upper), + description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap), + classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6', + style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 }, + }, + ]; + } else { + return [ + { + imageUrl: '/images/landing/governance_icon.png', + type: this.props.translate.get(Key.DecentralizedGovernance, Deco.Upper), + description: this.props.translate.get(Key.DecentralizedGovernanceDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/prediction_market_icon.png', + type: this.props.translate.get(Key.PredictionMarkets, Deco.Upper), + description: this.props.translate.get(Key.PredictionMarketsDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/stable_tokens_icon.png', + type: this.props.translate.get(Key.StableTokens, Deco.Upper), + description: this.props.translate.get(Key.StableTokensDescription, Deco.Cap), + classNames: 'lg-px2 md-px2', + }, + { + imageUrl: '/images/landing/loans_icon.png', + type: this.props.translate.get(Key.DecentralizedLoans, Deco.Upper), + description: this.props.translate.get(Key.DecentralizedLoansDescription, Deco.Cap), + classNames: 'lg-pr2 md-pr2 lg-col-6 md-col-6', + style: { + width: 291, + float: 'right', + marginTop: !isSmallScreen ? 38 : 0, + }, + }, + { + imageUrl: '/images/landing/fund_management_icon.png', + type: this.props.translate.get(Key.FundManagement, Deco.Upper), + description: this.props.translate.get(Key.FundManagementDescription, Deco.Cap), + classNames: 'lg-pl2 md-pl2 lg-col-6 md-col-6', + style: { width: 291, marginTop: !isSmallScreen ? 38 : 0 }, + }, + ]; + } + } + private _renderUseCases(): React.ReactNode { + const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm; + const useCases = this._getUseCases(); const cases = _.map(useCases, (useCase: UseCase) => { const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style; const useCaseBoxStyle = { @@ -725,7 +575,10 @@ 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="clearfix py4" style={{ backgroundColor: colors.heroGrey }}> + <div className="center h4 pb3 lg-pl0 md-pl3 sm-pl2" style={TITLE_STYLE}> + {this.props.translate.get(Key.UseCasesHeader, Deco.Upper)} + </div> <div className="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" style={{ maxWidth: '67em' }}> {cases} </div> |