Update use cases section

2018-08-29 12:41:25 -07:00
parent 3bc9b309f6
commit b1c5f6e8f1
3 changed files with 98 additions and 51 deletions
--- a/packages/website/translations/english.json
+++ b/packages/website/translations/english.json
@@ -43,10 +43,10 @@
        "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.",
    "STABLE_TOKENS": "stable tokens",
    "STABLE_TOKENS_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.",
+        "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.",
    "DECENTRALIZED_LOANS": "decentralized loans",
    "DECENTRALIZED_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.",
+        "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.",
    "FUND_MANAGEMENT": "fund management",
    "FUND_MANAGEMENT_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.",
@@ -81,5 +81,11 @@
    "HOME": "home",
    "ROCKETCHAT": "rocket.chat",
    "TRADE_CALL_TO_ACTION": "trade on 0x",
-    "OUR_MISSION_AND_VALUES": "our mission & values"
+    "OUR_MISSION_AND_VALUES": "our mission & values",
+    "GAMING_AND_COLLECTABLES": "gaming & collectables",
+    "GAMING_AND_COLLECTABLES_DESCRIPTION":
+        "artists and game makers are tokenizing digital art and in-game items known as non-fungible tokens (NFTs). 0x enables these creators to add exchange functionality to give access and the ability to build marketplaces for NFT trading.",
+    "ORDER_BOOKS": "order books",
+    "ORDER_BOOKS_DESCRIPTION":
+        "there are thousands of decentralized apps that have native utility tokens. 0x provides market makers and professional exchanges an ability to host order books to facilitate the exchange of these assets."
 }
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -32,7 +32,6 @@ interface UseCase {
    description: string;
    classNames: string;
    style?: React.CSSProperties;
-    projectIconUrls: string[];
 }
 interface Project {
    logoFileName: string;
@@ -140,7 +139,6 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                )}
                {this._renderInfoBoxes()}
                {this._renderTokenizationSection()}
-                {this._renderBuildingBlocksSection()}
                {this._renderUseCases()}
                {this._renderCallToAction()}
                <Footer translate={this.props.translate} dispatcher={this.props.dispatcher} />
@@ -535,53 +533,92 @@ export class Landing extends React.Component<LandingProps, LandingState> {
            </div>
        );
    }
+    private _getUseCases(): UseCase[] {
+        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
+        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/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: 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,
-                },
-            },
-            {
-                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 },
-            },
-        ];
-
+        const useCases = this._getUseCases();
        const cases = _.map(useCases, (useCase: UseCase) => {
            const style = _.isUndefined(useCase.style) || isSmallScreen ? {} : useCase.style;
            const useCaseBoxStyle = {
@@ -626,7 +663,7 @@ 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="mx-auto pb4 pt3 mt1 sm-mt2 clearfix" style={{ maxWidth: '67em' }}>
                    {cases}
                </div>
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -436,6 +436,10 @@ export enum Key {
    DecentralizedLoansDescription = 'DECENTRALIZED_LOANS_DESCRIPTION',
    FundManagement = 'FUND_MANAGEMENT',
    FundManagementDescription = 'FUND_MANAGEMENT_DESCRIPTION',
+    GamingAndCollectables = 'GAMING_AND_COLLECTABLES',
+    GamingAndCollectablesDescription = 'GAMING_AND_COLLECTABLES_DESCRIPTION',
+    OrderBooks = 'ORDER_BOOKS',
+    OrderBooksDescription = 'ORDER_BOOKS_DESCRIPTION',
    FinalCallToAction = 'FINAL_CALL_TO_ACTION',
    Documentation = 'DOCUMENTATION',
    Community = 'COMMUNITY',