Update use cases section

3 files changed, 98 insertions, 51 deletions

diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json
index 4f3b4aaba..042af251d 100644
--- 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."
 }
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 08da4da8f..68984896e 100644
--- 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 _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 = {
@@ -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>
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 398a8da11..c8789c274 100644
--- 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',