Merge pull request #1048 from 0xProject/feature/website/patch-v2-landing

[website] Final tweaks for landing page

3 files changed, 14 insertions, 10 deletions

diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json
index 6864462c5..9ce458111 100644
--- a/packages/website/translations/english.json
+++ b/packages/website/translations/english.json
@@ -19,8 +19,8 @@
         "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.",
     "RELAYERS_HEADER": "relayers building on 0x",
     "BENEFITS_HEADER": "benefits of 0x",
-    "USE_CASES_HEADER": "uses of 0x",
-    "BENEFIT_ONE_TITLE": "many assets",
+    "USE_CASES_HEADER": "use cases of 0x",
+    "BENEFIT_ONE_TITLE": "any asset",
     "BENEFIT_ONE_DESCRIPTION":
         "the 0x protocol facilitates the exchange of a growing number of Ethereum-based tokens including currencies, game items, and many more digital assets.",
     "BENEFIT_TWO_TITLE": "networked liquidity",
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 34f124d8c..7dfd9c9df 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -22,6 +22,7 @@ interface BoxContent {
     description: string;
     imageUrl: string;
     classNames: string;
+    maxWidth: number;
 }
 interface AssetType {
     title: string;
@@ -53,7 +54,7 @@ const ROTATING_LIST = [
     'tokens',
     'game items',
     'digital art',
-    'outcomes',
+    'futures',
     'stocks',
     'derivatives',
     'loans',
@@ -399,18 +400,21 @@ 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/exchange_everywhere.png',
                 classNames: 'right',
+                maxWidth: 130,
             },
         ];
         const boxes = _.map(boxContents, (boxContent: BoxContent) => {
@@ -421,7 +425,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                             <img
                                 className="mx-auto"
                                 src={boxContent.imageUrl}
-                                style={{ height: 'auto', maxWidth: 160 }}
+                                style={{ height: 'auto', maxWidth: boxContent.maxWidth }}
                             />
                         </Container>
                         <div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}>
@@ -565,7 +569,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                 lineHeight: 1.5,
                                 fontSize: 14,
                                 overflow: 'hidden',
-                                height: 104,
+                                height: 124,
                             }}
                         >
                             {useCase.description}
diff --git a/yarn.lock b/yarn.lock
index 0b3e99248..cb9b6a76c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1413,7 +1413,7 @@ aes-js@3.0.0:
 
 aes-js@^3.1.1:
   version "3.1.1"
-  resolved "https://registry.npmjs.org/aes-js/-/aes-js-3.1.1.tgz#89fd1f94ae51b4c72d62466adc1a7323ff52f072"
+  resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.1.1.tgz#89fd1f94ae51b4c72d62466adc1a7323ff52f072"
 
 ajv-keywords@^2.1.0:
   version "2.1.1"
@@ -2898,7 +2898,7 @@ bs58@^2.0.1:
 
 bs58check@^2.1.2:
   version "2.1.2"
-  resolved "https://registry.npmjs.org/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc"
+  resolved "https://registry.yarnpkg.com/bs58check/-/bs58check-2.1.2.tgz#53b018291228d82a5aa08e7d796fdafda54aebfc"
   dependencies:
     bs58 "^4.0.0"
     create-hash "^1.1.0"
@@ -5344,7 +5344,7 @@ ethereumjs-vm@^2.0.2, ethereumjs-vm@^2.1.0, ethereumjs-vm@^2.3.4:
 
 ethereumjs-wallet@~0.6.0:
   version "0.6.2"
-  resolved "https://registry.npmjs.org/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda"
+  resolved "https://registry.yarnpkg.com/ethereumjs-wallet/-/ethereumjs-wallet-0.6.2.tgz#67244b6af3e8113b53d709124b25477b64aeccda"
   dependencies:
     aes-js "^3.1.1"
     bs58check "^2.1.2"
@@ -6803,7 +6803,7 @@ hdkey@^0.7.1:
 
 hdkey@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.npmjs.org/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29"
+  resolved "https://registry.yarnpkg.com/hdkey/-/hdkey-1.1.0.tgz#e74e7b01d2c47f797fa65d1d839adb7a44639f29"
   dependencies:
     coinstring "^2.0.0"
     safe-buffer "^5.1.1"
@@ -14313,7 +14313,7 @@ utf8@^2.1.1:
 
 utf8@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
+  resolved "https://registry.yarnpkg.com/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
 
 util-deprecate@~1.0.1:
   version "1.0.2"