aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/pages/landing
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/pages/landing')
-rw-r--r--packages/website/ts/pages/landing/landing.tsx532
1 files changed, 192 insertions, 340 deletions
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 78f5fc3c1..211be7bf2 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';
@@ -19,11 +22,7 @@ interface BoxContent {
description: string;
imageUrl: string;
classNames: string;
-}
-interface AssetType {
- title: string;
- imageUrl: string;
- style?: React.CSSProperties;
+ maxWidth: number;
}
interface UseCase {
imageUrl: string;
@@ -31,7 +30,6 @@ interface UseCase {
description: string;
classNames: string;
style?: React.CSSProperties;
- projectIconUrls: string[];
}
interface Project {
logoFileName: string;
@@ -41,72 +39,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',
+ 'futures',
+ 'stocks',
+ 'derivatives',
+ 'loans',
+ 'cats',
+ 'everything',
];
const relayerProjects: Project[] = [
@@ -199,21 +147,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 +162,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 +182,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 +239,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 +301,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 +319,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 +353,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 +361,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 +369,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;
@@ -586,27 +395,34 @@ export class Landing extends React.Component<LandingProps, LandingState> {
description: this.props.translate.get(Key.BenefitOneDescription, Deco.Cap),
imageUrl: '/images/landing/distributed_network.png',
classNames: '',
+ maxWidth: 160,
},
{
title: this.props.translate.get(Key.BenefitTwoTitle, Deco.Cap),
description: this.props.translate.get(Key.BenefitTwoDescription, Deco.Cap),
imageUrl: '/images/landing/liquidity.png',
classNames: 'mx-auto',
+ maxWidth: 160,
},
{
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',
+ maxWidth: 130,
},
];
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>
- <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: boxContent.maxWidth }}
+ />
+ </Container>
<div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}>
{boxContent.title}
</div>
@@ -617,15 +433,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 +444,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 = {
@@ -715,7 +564,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
lineHeight: 1.5,
fontSize: 14,
overflow: 'hidden',
- height: 104,
+ height: 124,
}}
>
{useCase.description}
@@ -725,7 +574,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>