Update tokenization section

3 files changed, 15 insertions, 45 deletions

diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json
index 09b118bae..4f3b4aaba 100644
--- a/packages/website/translations/english.json
+++ b/packages/website/translations/english.json
@@ -9,7 +9,7 @@
     "FULL_LIST_LINK": "full list",
     "TOKENIZED_SECTION_HEADER": "the world's value is becoming tokenized",
     "TOKENIZED_SECTION_DESCRIPTION":
-        "the Ethereum blockchain is an open, borderless financial system that represents a wide variety of assets as cryptographic tokens. In the future, most digital assets and goods will be tokenized.",
+        "0x is the critical infrastructure layer in the emerging financial stack built on a foundation of Ethereum token standards. Developers needing exchange functionality for ERC 20 tokens, ERC 721 tokens, or any new asset type can easily integrate the 0x protocol into their application.",
     "CURRENCY": "currency",
     "TRADITIONAL_ASSETS": "traditional assets",
     "DIGITAL_GOODS": "digital goods",
@@ -80,5 +80,6 @@
     "DEVELOPERS": "developers",
     "HOME": "home",
     "ROCKETCHAT": "rocket.chat",
-    "TRADE_CALL_TO_ACTION": "trade on 0x"
+    "TRADE_CALL_TO_ACTION": "trade on 0x",
+    "OUR_MISSION_AND_VALUES": "our mission & values"
 }
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 83484409d..08da4da8f 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -335,7 +335,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()}
@@ -461,48 +461,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;
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index c637171dd..398a8da11 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -468,6 +468,7 @@ export enum Key {
     Home = 'HOME',
     RocketChat = 'ROCKETCHAT',
     TradeCallToAction = 'TRADE_CALL_TO_ACTION',
+    OurMissionAndValues = 'OUR_MISSION_AND_VALUES',
 }
 
 export enum SmartContractDocSections {