From b9f7979e91790615c3f1e45c7a3d29d6369e8092 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 28 Aug 2018 21:01:26 -0700
Subject: Replace projects section with relayers

---
 packages/website/ts/pages/landing/landing.tsx | 82 ++-------------------------
 1 file changed, 5 insertions(+), 77 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 78f5fc3c1..5b5bd753c 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -42,73 +42,6 @@ const THROTTLE_TIMEOUT = 100;
 const WHATS_NEW_TITLE = '18 ideas for 0x relayers in 2018';
 const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f';
 
-const relayersAndDappProjects: Project[] = [
-    {
-        logoFileName: 'ercdex.png',
-        projectUrl: constants.PROJECT_URL_ERC_DEX,
-    },
-    {
-        logoFileName: 'radar_relay.png',
-        projectUrl: constants.PROJECT_URL_RADAR_RELAY,
-    },
-    {
-        logoFileName: 'paradex.png',
-        projectUrl: constants.PROJECT_URL_PARADEX,
-    },
-    {
-        logoFileName: 'the_ocean.png',
-        projectUrl: constants.PROJECT_URL_0CEAN,
-    },
-    {
-        logoFileName: 'dydx.png',
-        projectUrl: constants.PROJECT_URL_DYDX,
-    },
-    {
-        logoFileName: 'ethfinex.png',
-        projectUrl: constants.PROJECT_URL_ETHFINEX,
-    },
-    {
-        logoFileName: 'melonport.png',
-        projectUrl: constants.PROJECT_URL_MELONPORT,
-    },
-    {
-        logoFileName: 'maker.png',
-        projectUrl: constants.PROJECT_URL_MAKER,
-    },
-    {
-        logoFileName: 'dharma.png',
-        projectUrl: constants.PROJECT_URL_DHARMA,
-    },
-    {
-        logoFileName: 'lendroid.png',
-        projectUrl: constants.PROJECT_URL_LENDROID,
-    },
-    {
-        logoFileName: 'district0x.png',
-        projectUrl: constants.PROJECT_URL_DISTRICT_0X,
-    },
-    {
-        logoFileName: 'aragon.png',
-        projectUrl: constants.PROJECT_URL_ARAGON,
-    },
-    {
-        logoFileName: 'blocknet.png',
-        projectUrl: constants.PROJECT_URL_BLOCKNET,
-    },
-    {
-        logoFileName: 'imtoken.png',
-        projectUrl: constants.PROJECT_URL_IMTOKEN,
-    },
-    {
-        logoFileName: 'augur.png',
-        projectUrl: constants.PROJECT_URL_AUGUR,
-    },
-    {
-        logoFileName: 'anx.png',
-        projectUrl: constants.PROJECT_URL_OPEN_ANX,
-    },
-];
-
 const relayerProjects: Project[] = [
     {
         logoFileName: 'ethfinex.png',
@@ -198,20 +131,15 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                     translate={this.props.translate}
                 />
                 {this._renderHero()}
-                {this._renderProjects(
-                    relayersAndDappProjects,
-                    this.props.translate.get(Key.ProjectsHeader, Deco.Upper),
-                    colors.projectsGrey,
-                    false,
-                )}
-                {this._renderTokenizationSection()}
-                {this._renderProtocolSection()}
                 {this._renderProjects(
                     relayerProjects,
                     this.props.translate.get(Key.RelayersHeader, Deco.Upper),
-                    colors.heroGrey,
+                    colors.projectsGrey,
                     true,
                 )}
+                {this._renderTokenizationSection()}
+                {this._renderProtocolSection()}
+
                 {this._renderInfoBoxes()}
                 {this._renderBuildingBlocksSection()}
                 {this._renderUseCases()}
@@ -368,7 +296,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                     >
                         {this.props.translate.get(Key.FullListPrompt)}{' '}
                         <Link
-                            to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
+                            to={WebsitePaths.Portal}
                             className="text-decoration-none underline"
                             style={{ color: colors.landingLinkGrey }}
                         >
-- 
cgit v1.2.3


From 557267477e10902e801e18733d551f13c402a6cd Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 28 Aug 2018 22:00:23 -0700
Subject: Add new header image

---
 packages/website/ts/pages/landing/landing.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 5b5bd753c..4833fa8f3 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -151,14 +151,15 @@ export class Landing extends React.Component<LandingProps, LandingState> {
     private _renderHero(): React.ReactNode {
         const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         const left = 'col lg-col-7 md-col-7 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center';
+        const flexClassName = isSmallScreen ? 'flex items-center flex-column' : 'flex items-center';
         return (
             <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}>
                 <div className="mx-auto max-width-4 clearfix">
                     {this._renderWhatsNew()}
-                    <div className="lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-mt4 md-mt4 sm-mt2 sm-mb4 clearfix">
-                        <div className="col lg-col-5 md-col-5 col-12 sm-center">
-                            <img src="/images/landing/hero_chip_image.png" height={isSmallScreen ? 300 : 395} />
-                        </div>
+                    <div className={`${flexClassName} lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-mt4 md-mt4 sm-mt2 sm-mb4`}>
+                        <Container marginTop="30px" marginBottom="30px">
+                            <img src="/images/landing/0x_homepage.svg" height="250px" />
+                        </Container>
                         <div className={left} style={{ color: colors.white, height: 390, lineHeight: '390px' }}>
                             <div
                                 className="inline-block lg-align-middle md-align-middle sm-align-top"
-- 
cgit v1.2.3


From d93d4c34f5372147fc295572a2f0acf3bd9baa55 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 28 Aug 2018 22:34:11 -0700
Subject: Update whats new

---
 packages/website/ts/pages/landing/landing.tsx | 32 ++++++++++++++++-----------
 1 file changed, 19 insertions(+), 13 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 4833fa8f3..1cc2ee5c0 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -8,6 +8,7 @@ import { SubscribeForm } from 'ts/components/forms/subscribe_form';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { CallToAction } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
@@ -39,7 +40,7 @@ interface Project {
 }
 
 const THROTTLE_TIMEOUT = 100;
-const WHATS_NEW_TITLE = '18 ideas for 0x relayers in 2018';
+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 relayerProjects: Project[] = [
@@ -216,19 +217,24 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         return (
             <div className="sm-center sm-px1">
                 <a href={WHATS_NEW_URL} target="_blank" className="inline-block text-decoration-none">
-                    <div className="flex sm-pl0 md-pl2 lg-pl0" style={{ fontFamily: 'Roboto Mono', fontWeight: 600 }}>
-                        <div
-                            className="mr1 px1"
-                            style={{
-                                backgroundColor: colors.white,
-                                borderRadius: 3,
-                                color: colors.heroGrey,
-                                height: 23,
-                            }}
+                    <div className="flex items-center sm-pl0 md-pl2 lg-pl0">
+                        <Container
+                            paddingTop="5px"
+                            paddingLeft="8px"
+                            paddingBottom="5px"
+                            paddingRight="8px"
+                            backgroundColor={colors.white}
+                            borderRadius={6}
                         >
-                            New
-                        </div>
-                        <div style={{ color: colors.darkGrey }}>{WHATS_NEW_TITLE}</div>
+                            <Text fontSize="16px" fontWeight={500} fontColor={colors.heroGrey}>
+                                New
+                            </Text>
+                        </Container>
+                        <Container marginLeft="12px">
+                            <Text fontSize="18px" fontWeight={500} fontColor={colors.white}>
+                                {WHATS_NEW_TITLE}
+                            </Text>
+                        </Container>
                     </div>
                 </a>
             </div>
-- 
cgit v1.2.3


From 6924a2b681b8f6d6c154499f3e5d7879524f89c1 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 29 Aug 2018 10:38:15 -0700
Subject: Update benefits

---
 packages/website/ts/pages/landing/landing.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 1cc2ee5c0..83484409d 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -138,10 +138,8 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                     colors.projectsGrey,
                     true,
                 )}
-                {this._renderTokenizationSection()}
-                {this._renderProtocolSection()}
-
                 {this._renderInfoBoxes()}
+                {this._renderTokenizationSection()}
                 {this._renderBuildingBlocksSection()}
                 {this._renderUseCases()}
                 {this._renderCallToAction()}
-- 
cgit v1.2.3


From 3bc9b309f6ea1889d775da88a06d9ba8b3a67bc9 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 29 Aug 2018 11:26:22 -0700
Subject: Update tokenization section

---
 packages/website/ts/pages/landing/landing.tsx | 54 ++++++---------------------
 1 file changed, 11 insertions(+), 43 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

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;
-- 
cgit v1.2.3


From b1c5f6e8f175aab891b735ed0b4382a787cbbd9b Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Wed, 29 Aug 2018 12:41:25 -0700
Subject: Update use cases section

---
 packages/website/ts/pages/landing/landing.tsx | 133 ++++++++++++++++----------
 1 file changed, 85 insertions(+), 48 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

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>
-- 
cgit v1.2.3


From 5d008ee83ead8207c7aa80b249703660be8f7fad Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 30 Aug 2018 11:19:58 -0700
Subject: Update what's new styling

---
 packages/website/ts/pages/landing/landing.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 68984896e..3d0e6eb62 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -215,19 +215,19 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                 <a href={WHATS_NEW_URL} target="_blank" className="inline-block text-decoration-none">
                     <div className="flex items-center sm-pl0 md-pl2 lg-pl0">
                         <Container
-                            paddingTop="5px"
+                            paddingTop="3px"
                             paddingLeft="8px"
-                            paddingBottom="5px"
+                            paddingBottom="3px"
                             paddingRight="8px"
                             backgroundColor={colors.white}
                             borderRadius={6}
                         >
-                            <Text fontSize="16px" fontWeight={500} fontColor={colors.heroGrey}>
+                            <Text fontSize="14px" fontWeight={500} fontColor={colors.heroGrey}>
                                 New
                             </Text>
                         </Container>
                         <Container marginLeft="12px">
-                            <Text fontSize="18px" fontWeight={500} fontColor={colors.white}>
+                            <Text fontSize="16px" fontWeight={500} fontColor={colors.grey300}>
                                 {WHATS_NEW_TITLE}
                             </Text>
                         </Container>
-- 
cgit v1.2.3


From 038c21324e2ae37f2cd6f1199ee176707cd1fed4 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 30 Aug 2018 11:27:00 -0700
Subject: Make hero image responsive

---
 packages/website/ts/pages/landing/landing.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 3d0e6eb62..bd861670a 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -8,6 +8,7 @@ import { SubscribeForm } from 'ts/components/forms/subscribe_form';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { CallToAction } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
 import { Text } from 'ts/components/ui/text';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
@@ -154,8 +155,8 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                 <div className="mx-auto max-width-4 clearfix">
                     {this._renderWhatsNew()}
                     <div className={`${flexClassName} lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-mt4 md-mt4 sm-mt2 sm-mb4`}>
-                        <Container marginTop="30px" marginBottom="30px">
-                            <img src="/images/landing/0x_homepage.svg" height="250px" />
+                        <Container marginTop="30px" marginBottom="30px" marginLeft="15px" marginRight="15px">
+                            <Image src="/images/landing/0x_homepage.svg" maxWidth="100%" height="auto" />
                         </Container>
                         <div className={left} style={{ color: colors.white, height: 390, lineHeight: '390px' }}>
                             <div
-- 
cgit v1.2.3


From f5e7b7e7e0b1a2121a331c511431360647669a78 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 30 Aug 2018 11:37:33 -0700
Subject: Add title header to use cases section

---
 packages/website/ts/pages/landing/landing.tsx | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

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>
-- 
cgit v1.2.3


From 0368de701fa2443a2537d5ea6cb35bdce1ade638 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 30 Aug 2018 11:44:09 -0700
Subject: Added todo comments for missing items

---
 packages/website/ts/pages/landing/landing.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index b32526bba..0aa9693a4 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -41,6 +41,7 @@ interface Project {
 
 const THROTTLE_TIMEOUT = 100;
 const WHATS_NEW_TITLE = 'V2 of the 0x Protocol is now live!';
+// TODO: Update this url
 const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f';
 const TITLE_STYLE: React.CSSProperties = {
     fontFamily: 'Roboto Mono',
@@ -496,7 +497,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             {
                 title: this.props.translate.get(Key.BenefitThreeTitle, Deco.Cap),
                 description: this.props.translate.get(Key.BenefitThreeDescription, Deco.Cap),
-                imageUrl: '/images/landing/open_source.png',
+                imageUrl: '/images/landing/open_source.png', // TODO: Update this url
                 classNames: 'right',
             },
         ];
-- 
cgit v1.2.3


From 365890291f80a0580c8306c8aa498e64da7f86be Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 29 Aug 2018 15:02:58 -0700
Subject: Add generic title changes

---
 packages/website/ts/pages/landing/landing.tsx | 24 +++++++-----------------
 1 file changed, 7 insertions(+), 17 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 0aa9693a4..72f6bdc9c 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -173,26 +173,16 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                     lineHeight: '36px',
                                 }}
                             >
-                                <div
+                                <Text
                                     className="sm-pb2"
-                                    style={{
-                                        fontFamily: 'Roboto Mono',
-                                        fontSize: isSmallScreen ? 26 : 34,
-                                    }}
+                                    fontFamily="Roboto"
+                                    fontColor={colors.grey300}
+                                    fontWeight={500}
+                                    lineHeight="1.2em"
+                                    fontSize={isSmallScreen ? '28px' : '36px'}
                                 >
                                     {this.props.translate.get(Key.TopHeader, Deco.Cap)}
-                                </div>
-                                <div
-                                    className="pt2 h5 sm-mx-auto"
-                                    style={{
-                                        maxWidth: 446,
-                                        fontFamily: 'Roboto Mono',
-                                        lineHeight: 1.7,
-                                        fontWeight: 300,
-                                    }}
-                                >
-                                    {this.props.translate.get(Key.TopTagline)}
-                                </div>
+                                </Text>
                                 <Container className="pt3 clearfix sm-mx-auto" maxWidth="390px">
                                     <div className="lg-pr2 md-pr2 lg-col lg-col-6 sm-center sm-col sm-col-12 mb2">
                                         <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
-- 
cgit v1.2.3


From 74d5af34ebf1e4d46a3cb13573d0793579454933 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 29 Aug 2018 16:33:08 -0700
Subject: Add TypedText component and use it on landing page

---
 packages/website/ts/pages/landing/landing.tsx | 32 +++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 72f6bdc9c..fc4194849 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -10,6 +10,7 @@ import { CallToAction } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
 import { Image } from 'ts/components/ui/image';
 import { Text } from 'ts/components/ui/text';
+import { TypedText } from 'ts/components/ui/typed_text';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
@@ -43,12 +44,26 @@ const THROTTLE_TIMEOUT = 100;
 const WHATS_NEW_TITLE = 'V2 of the 0x Protocol is now live!';
 // TODO: Update this url
 const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f';
+<<<<<<< HEAD
 const TITLE_STYLE: React.CSSProperties = {
     fontFamily: 'Roboto Mono',
     color: colors.grey,
     fontWeight: 300,
     letterSpacing: 3,
 };
+=======
+const ROTATING_LIST = [
+    'tokens',
+    'game items',
+    'digital art',
+    'outcomes',
+    'stocks',
+    'derivatives',
+    'loans',
+    'cats',
+    'Everything.',
+];
+>>>>>>> Add TypedText component and use it on landing page
 
 const relayerProjects: Project[] = [
     {
@@ -176,12 +191,29 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                 <Text
                                     className="sm-pb2"
                                     fontFamily="Roboto"
+                                    display="inline-block"
                                     fontColor={colors.grey300}
                                     fontWeight={500}
                                     lineHeight="1.2em"
                                     fontSize={isSmallScreen ? '28px' : '36px'}
                                 >
                                     {this.props.translate.get(Key.TopHeader, Deco.Cap)}
+                                    {this.props.translate.getLanguage() === Language.English && (
+                                        <React.Fragment>
+                                            {' '}
+                                            for{' '}
+                                            <TypedText
+                                                fontFamily="Roboto"
+                                                display="inline-block"
+                                                fontColor={colors.white}
+                                                fontWeight={700}
+                                                lineHeight="1.2em"
+                                                fontSize={isSmallScreen ? '28px' : '36px'}
+                                                textList={ROTATING_LIST}
+                                                shouldRepeat={true}
+                                            />
+                                        </React.Fragment>
+                                    )}
                                 </Text>
                                 <Container className="pt3 clearfix sm-mx-auto" maxWidth="390px">
                                     <div className="lg-pr2 md-pr2 lg-col lg-col-6 sm-center sm-col sm-col-12 mb2">
-- 
cgit v1.2.3


From b1f97a27f3b0114ee1d9e648e0365932217c8dc8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 30 Aug 2018 11:37:58 -0700
Subject: Final tweaks

---
 packages/website/ts/pages/landing/landing.tsx | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index fc4194849..5a82576a1 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -61,7 +61,7 @@ const ROTATING_LIST = [
     'derivatives',
     'loans',
     'cats',
-    'Everything.',
+    'everything',
 ];
 >>>>>>> Add TypedText component and use it on landing page
 
@@ -170,8 +170,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
     }
     private _renderHero(): React.ReactNode {
         const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-        const left = 'col lg-col-7 md-col-7 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center';
-        const flexClassName = isSmallScreen ? 'flex items-center flex-column' : 'flex items-center';
+        const left = 'col lg-col-6 md-col-6 col-12 lg-pl4 md-pl4 sm-pl0 sm-px3 sm-center';
+        const flexClassName = isSmallScreen
+            ? 'flex items-center flex-column justify-center'
+            : 'flex items-center justify-center';
         return (
             <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}>
                 <div className="mx-auto max-width-4 clearfix">
@@ -194,7 +196,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                     display="inline-block"
                                     fontColor={colors.grey300}
                                     fontWeight={500}
-                                    lineHeight="1.2em"
+                                    lineHeight="1.3em"
                                     fontSize={isSmallScreen ? '28px' : '36px'}
                                 >
                                     {this.props.translate.get(Key.TopHeader, Deco.Cap)}
@@ -207,7 +209,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                                 display="inline-block"
                                                 fontColor={colors.white}
                                                 fontWeight={700}
-                                                lineHeight="1.2em"
+                                                lineHeight="1.3em"
                                                 fontSize={isSmallScreen ? '28px' : '36px'}
                                                 textList={ROTATING_LIST}
                                                 shouldRepeat={true}
@@ -215,17 +217,19 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                                         </React.Fragment>
                                     )}
                                 </Text>
-                                <Container className="pt3 clearfix sm-mx-auto" maxWidth="390px">
-                                    <div className="lg-pr2 md-pr2 lg-col lg-col-6 sm-center sm-col sm-col-12 mb2">
+                                <Container
+                                    className={`pt3 flex clearfix sm-mx-auto ${isSmallScreen ? 'justify-center' : ''}`}
+                                >
+                                    <Container paddingRight="20px">
                                         <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
-                                            <CallToAction width="175px" type="light">
+                                            <CallToAction type="light">
                                                 {this.props.translate.get(Key.BuildCallToAction, Deco.Cap)}
                                             </CallToAction>
                                         </Link>
-                                    </div>
-                                    <div className="lg-col lg-col-6 sm-center sm-col sm-col-12">
+                                    </Container>
+                                    <div>
                                         <Link to={WebsitePaths.Portal} className="text-decoration-none">
-                                            <CallToAction width="175px">
+                                            <CallToAction>
                                                 {this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
                                             </CallToAction>
                                         </Link>
-- 
cgit v1.2.3


From c3361bb86e4b022c65b7dc657827b78efca9be41 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 30 Aug 2018 11:52:08 -0700
Subject: Remove conflict strings

---
 packages/website/ts/pages/landing/landing.tsx | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 5a82576a1..c8dc2fc74 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -44,14 +44,12 @@ const THROTTLE_TIMEOUT = 100;
 const WHATS_NEW_TITLE = 'V2 of the 0x Protocol is now live!';
 // TODO: Update this url
 const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f';
-<<<<<<< HEAD
 const TITLE_STYLE: React.CSSProperties = {
     fontFamily: 'Roboto Mono',
     color: colors.grey,
     fontWeight: 300,
     letterSpacing: 3,
 };
-=======
 const ROTATING_LIST = [
     'tokens',
     'game items',
@@ -63,7 +61,6 @@ const ROTATING_LIST = [
     'cats',
     'everything',
 ];
->>>>>>> Add TypedText component and use it on landing page
 
 const relayerProjects: Project[] = [
     {
-- 
cgit v1.2.3


From 60f1bcf51f0917607582d6027329fd292c7fc251 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 30 Aug 2018 12:09:54 -0700
Subject: Remove unused render methods in landing page

---
 packages/website/ts/pages/landing/landing.tsx | 110 --------------------------
 1 file changed, 110 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index c8dc2fc74..d29abf835 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -366,116 +366,6 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             </div>
         );
     }
-    private _renderProtocolSection(): React.ReactNode {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-        return (
-            <div className="clearfix pt4" style={{ backgroundColor: colors.heroGrey }}>
-                <div className="mx-auto max-width-4 pt4 clearfix">
-                    <div className="col lg-col-6 md-col-6 col-12 sm-center">
-                        <img src="/images/landing/relayer_diagram.png" height={isSmallScreen ? 326 : 426} />
-                    </div>
-                    <div
-                        className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto"
-                        style={{
-                            color: colors.beigeWhite,
-                            maxWidth: isSmallScreen ? 'none' : 445,
-                            height: 430,
-                            lineHeight: '430px',
-                        }}
-                    >
-                        <div
-                            className="inline-block lg-align-middle md-align-middle sm-align-top"
-                            style={{ lineHeight: '43px' }}
-                        >
-                            <div
-                                className="lg-h1 md-h1 sm-h2 pb1 sm-pt3 sm-center"
-                                style={{ fontFamily: 'Roboto Mono' }}
-                            >
-                                <div>{this.props.translate.get(Key.OffChainOrderRelay, Deco.Cap)}</div>
-                                <div> {this.props.translate.get(Key.OnChainSettlement, Deco.Cap)}</div>
-                            </div>
-                            <div
-                                className="pb2 pt2 h5 sm-center sm-px3 sm-mx-auto"
-                                style={{
-                                    fontFamily: 'Roboto Mono',
-                                    lineHeight: 1.7,
-                                    fontWeight: 300,
-                                    maxWidth: 445,
-                                }}
-                            >
-                                {this.props.translate.get(Key.OffChainOnChainDescription, Deco.Cap)}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-    private _renderBuildingBlocksSection(): React.ReactNode {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-        const descriptionStyle: React.CSSProperties = {
-            fontFamily: 'Roboto Mono',
-            lineHeight: isSmallScreen ? 1.5 : 2,
-            fontWeight: 300,
-            fontSize: 15,
-            maxWidth: isSmallScreen ? 375 : 'none',
-        };
-        const callToActionStyle: React.CSSProperties = {
-            fontFamily: 'Roboto Mono',
-            fontSize: 15,
-            fontWeight: 300,
-            maxWidth: isSmallScreen ? 375 : 441,
-        };
-        return (
-            <div className="clearfix lg-pt4 md-pt4" style={{ backgroundColor: colors.heroGrey }}>
-                <div className="mx-auto max-width-4 lg-pt4 md-pt4 lg-mb4 md-mb4 sm-mb2 clearfix">
-                    {isSmallScreen && this._renderBlockChipImage()}
-                    <div
-                        className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-px3"
-                        style={{ color: colors.beigeWhite }}
-                    >
-                        <div
-                            className="pb1 lg-pt4 md-pt4 sm-pt3 lg-h1 md-h1 sm-h2 sm-px3 sm-center"
-                            style={{ fontFamily: 'Roboto Mono' }}
-                        >
-                            {this.props.translate.get(Key.BuildingBlockSectionHeader, Deco.Cap)}
-                        </div>
-                        <div className="pb3 pt2 sm-mx-auto sm-center" style={descriptionStyle}>
-                            {this.props.translate.get(Key.BuildingBlockSectionDescription, Deco.Cap)}
-                        </div>
-                        <div className="sm-mx-auto sm-center" style={callToActionStyle}>
-                            {this.props.translate.get(Key.DevToolsPrompt, Deco.Cap)}{' '}
-                            <Link
-                                to={WebsitePaths.ZeroExJs}
-                                className="text-decoration-none underline"
-                                style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }}
-                            >
-                                0x.js
-                            </Link>{' '}
-                            {this.props.translate.get(Key.And)}{' '}
-                            <Link
-                                to={WebsitePaths.SmartContracts}
-                                className="text-decoration-none underline"
-                                style={{ color: colors.beigeWhite, fontFamily: 'Roboto Mono' }}
-                            >
-                                {this.props.translate.get(Key.SmartContract)}
-                            </Link>{' '}
-                            {this.props.translate.get(Key.Docs)}
-                        </div>
-                    </div>
-                    {!isSmallScreen && this._renderBlockChipImage()}
-                </div>
-            </div>
-        );
-    }
-    private _renderBlockChipImage(): React.ReactNode {
-        const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
-        return (
-            <div className="col lg-col-6 md-col-6 col-12 sm-center">
-                <img src="/images/landing/0x_chips.png" height={isSmallScreen ? 240 : 368} />
-            </div>
-        );
-    }
     private _renderTokenCloud(): React.ReactNode {
         const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         return (
-- 
cgit v1.2.3


From e90dbf66f33d7d37ec07803df930a3c955eb4e73 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 30 Aug 2018 12:29:47 -0700
Subject: Add new exchange everywhere graphic

---
 packages/website/ts/pages/landing/landing.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index d29abf835..e2b4d8f80 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -410,7 +410,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             {
                 title: this.props.translate.get(Key.BenefitThreeTitle, Deco.Cap),
                 description: this.props.translate.get(Key.BenefitThreeDescription, Deco.Cap),
-                imageUrl: '/images/landing/open_source.png', // TODO: Update this url
+                imageUrl: '/images/landing/exchange_everywhere.png',
                 classNames: 'right',
             },
         ];
@@ -418,9 +418,13 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             return (
                 <div key={`box-${boxContent.title}`} className="col lg-col-4 md-col-4 col-12 sm-pb4">
                     <div className={`center sm-mx-auto ${!isSmallScreen && boxContent.classNames}`} style={boxStyle}>
-                        <div>
-                            <img src={boxContent.imageUrl} style={{ height: 210 }} />
-                        </div>
+                        <Container className="flex items-center" height="210px">
+                            <img
+                                className="mx-auto"
+                                src={boxContent.imageUrl}
+                                style={{ height: 'auto', maxWidth: 160 }}
+                            />
+                        </Container>
                         <div className="h3" style={{ color: 'black', fontFamily: 'Roboto Mono' }}>
                             {boxContent.title}
                         </div>
-- 
cgit v1.2.3


From a224ce347e3ee15b7bb3992a3f59d1576b07b46a Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 30 Aug 2018 13:21:07 -0700
Subject: Revert whats new text

---
 packages/website/ts/pages/landing/landing.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index e2b4d8f80..34f124d8c 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -41,8 +41,7 @@ interface Project {
 }
 
 const THROTTLE_TIMEOUT = 100;
-const WHATS_NEW_TITLE = 'V2 of the 0x Protocol is now live!';
-// TODO: Update this url
+const WHATS_NEW_TITLE = '18 ideas for 0x relayers in 2018';
 const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f';
 const TITLE_STYLE: React.CSSProperties = {
     fontFamily: 'Roboto Mono',
-- 
cgit v1.2.3


From 2cac431c41fdcd7ee44cd9fb36e24bcac6ced40a Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 30 Aug 2018 13:53:30 -0700
Subject: Final tweaks for landing page

---
 packages/website/ts/pages/landing/landing.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 34f124d8c..85e30a9fa 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -53,7 +53,7 @@ const ROTATING_LIST = [
     'tokens',
     'game items',
     'digital art',
-    'outcomes',
+    'futures',
     'stocks',
     'derivatives',
     'loans',
-- 
cgit v1.2.3


From c64f0ba34bfdaccc23cbddb5f21e20f7d2e25668 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Thu, 30 Aug 2018 15:26:03 -0700
Subject: Tweaks to benefits and use cases

---
 packages/website/ts/pages/landing/landing.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/pages/landing/landing.tsx')

diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 85e30a9fa..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;
@@ -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}
-- 
cgit v1.2.3