Add title header to use cases section

3 files changed, 13 insertions, 14 deletions

diff --git a/packages/website/translations/english.json b/packages/website/translations/english.json
index 042af251d..6864462c5 100644
--- a/packages/website/translations/english.json
+++ b/packages/website/translations/english.json
@@ -19,6 +19,7 @@
         "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",
     "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.",
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index bd861670a..b32526bba 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -42,6 +42,12 @@ interface Project {
 const THROTTLE_TIMEOUT = 100;
 const WHATS_NEW_TITLE = 'V2 of the 0x Protocol is now live!';
 const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f';
+const TITLE_STYLE: React.CSSProperties = {
+    fontFamily: 'Roboto Mono',
+    color: colors.grey,
+    fontWeight: 300,
+    letterSpacing: 3,
+};
 
 const relayerProjects: Project[] = [
     {
@@ -276,16 +282,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>
@@ -517,15 +517,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' }}>
@@ -665,6 +659,9 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         });
         return (
             <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>
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index c8789c274..6ab17e261 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -415,6 +415,7 @@ export enum Key {
     OffChainOnChainDescription = 'OFFCHAIN_ONCHAIN_DESCRIPTION',
     RelayersHeader = 'RELAYERS_HEADER',
     BenefitsHeader = 'BENEFITS_HEADER',
+    UseCasesHeader = 'USE_CASES_HEADER',
     BenefitOneTitle = 'BENEFIT_ONE_TITLE',
     BenefitOneDescription = 'BENEFIT_ONE_DESCRIPTION',
     BenefitTwoTitle = 'BENEFIT_TWO_TITLE',