Merge pull request #383 from 0xProject/fix/website/addMoreRelayersLanding

Add relayers section to landing page

17 files changed, 124 insertions, 71 deletions

diff --git a/packages/website/public/images/landing/project_logos/amadeus.png b/packages/website/public/images/landing/project_logos/amadeus.png
new file mode 100644
index 000000000..e3926b79f
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/amadeus.png
diff --git a/packages/website/public/images/landing/project_logos/ddex.png b/packages/website/public/images/landing/project_logos/ddex.png
new file mode 100644
index 000000000..a1a8def26
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/ddex.png
diff --git a/packages/website/public/images/landing/project_logos/decent_ex.png b/packages/website/public/images/landing/project_logos/decent_ex.png
new file mode 100644
index 000000000..1fac76947
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/decent_ex.png
diff --git a/packages/website/public/images/landing/project_logos/dextroid.png b/packages/website/public/images/landing/project_logos/dextroid.png
new file mode 100644
index 000000000..5fdcd7f8e
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/dextroid.png
diff --git a/packages/website/public/images/landing/project_logos/ercdex.png b/packages/website/public/images/landing/project_logos/ercdex.png
new file mode 100644
index 000000000..1367837e0
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/ercdex.png
diff --git a/packages/website/public/images/landing/project_logos/ethfinex-top.png b/packages/website/public/images/landing/project_logos/ethfinex-top.png
deleted file mode 100644
index 5eda914ca..000000000
--- a/packages/website/public/images/landing/project_logos/ethfinex-top.png
+++ /dev/null
diff --git a/packages/website/public/images/landing/project_logos/ethfinex.png b/packages/website/public/images/landing/project_logos/ethfinex.png
new file mode 100644
index 000000000..5aa0c556f
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/ethfinex.png
diff --git a/packages/website/public/images/landing/project_logos/idt.png b/packages/website/public/images/landing/project_logos/idt.png
new file mode 100644
index 000000000..859c289d2
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/idt.png
diff --git a/packages/website/public/images/landing/project_logos/open_relay.png b/packages/website/public/images/landing/project_logos/open_relay.png
new file mode 100644
index 000000000..fa1853df6
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/open_relay.png
diff --git a/packages/website/public/images/landing/project_logos/paradex.png b/packages/website/public/images/landing/project_logos/paradex.png
new file mode 100644
index 000000000..7948eb938
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/paradex.png
diff --git a/packages/website/public/images/landing/project_logos/paradex_top.png b/packages/website/public/images/landing/project_logos/paradex_top.png
deleted file mode 100644
index 3fe9472b9..000000000
--- a/packages/website/public/images/landing/project_logos/paradex_top.png
+++ /dev/null
diff --git a/packages/website/public/images/landing/project_logos/radar_relay.png b/packages/website/public/images/landing/project_logos/radar_relay.png
new file mode 100644
index 000000000..af0e610f8
--- /dev/null
+++ b/packages/website/public/images/landing/project_logos/radar_relay.png
diff --git a/packages/website/public/images/landing/project_logos/radar_relay_top.png b/packages/website/public/images/landing/project_logos/radar_relay_top.png
deleted file mode 100644
index 737159959..000000000
--- a/packages/website/public/images/landing/project_logos/radar_relay_top.png
+++ /dev/null
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 1a0691e83..b1367be4f 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -169,12 +169,21 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                                     path={`${WebsitePaths.Wiki}`}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
+                                    isExternal={false}
+                                />
+                                <TopBarMenuItem
+                                    title="Blog"
+                                    path={constants.URL_BLOG}
+                                    style={styles.menuItem}
+                                    isNightVersion={isNightVersion}
+                                    isExternal={true}
                                 />
                                 <TopBarMenuItem
                                     title="About"
                                     path={`${WebsitePaths.About}`}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
+                                    isExternal={false}
                                 />
                                 <TopBarMenuItem
                                     title="Portal DApp"
@@ -183,6 +192,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                                     style={styles.menuItem}
                                     className={`${isFullWidthPage && 'md-hide'}`}
                                     isNightVersion={isNightVersion}
+                                    isExternal={false}
                                 />
                             </div>
                         </div>
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
index 96ee86142..983050abc 100644
--- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
@@ -11,6 +11,7 @@ interface TopBarMenuItemProps {
     title: string;
     path?: string;
     isPrimary?: boolean;
+    isExternal: boolean;
     style?: React.CSSProperties;
     className?: string;
     isNightVersion?: boolean;
@@ -43,9 +44,20 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
                 className={`center ${this.props.className}`}
                 style={{ ...this.props.style, ...primaryStyles, color: menuItemColor }}
             >
-                <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}>
-                    {this.props.title}
-                </Link>
+                {this.props.isExternal ? (
+                    <a
+                        className="text-decoration-none"
+                        style={{ color: linkColor }}
+                        target="_blank"
+                        href={this.props.path}
+                    >
+                        {this.props.title}
+                    </a>
+                ) : (
+                    <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}>
+                        {this.props.title}
+                    </Link>
+                )}
             </div>
         );
     }
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index b0c622fb4..d4c934459 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -65,17 +65,17 @@ const boxContents: BoxContent[] = [
     },
 ];
 
-const projects: Project[] = [
+const relayersAndDappProjects: Project[] = [
     {
-        logoFileName: 'ethfinex-top.png',
+        logoFileName: 'ethfinex.png',
         projectUrl: constants.PROJECT_URL_ETHFINEX,
     },
     {
-        logoFileName: 'radar_relay_top.png',
+        logoFileName: 'radar_relay.png',
         projectUrl: constants.PROJECT_URL_RADAR_RELAY,
     },
     {
-        logoFileName: 'paradex_top.png',
+        logoFileName: 'paradex.png',
         projectUrl: constants.PROJECT_URL_PARADEX,
     },
     {
@@ -132,6 +132,57 @@ const projects: Project[] = [
     },
 ];
 
+const relayerProjects: Project[] = [
+    {
+        logoFileName: 'ethfinex.png',
+        projectUrl: constants.PROJECT_URL_ETHFINEX,
+    },
+    {
+        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: 'amadeus.png',
+        projectUrl: constants.PROJECT_URL_AMADEUS,
+    },
+    {
+        logoFileName: 'ddex.png',
+        projectUrl: constants.PROJECT_URL_DDEX,
+    },
+    {
+        logoFileName: 'decent_ex.png',
+        projectUrl: constants.PROJECT_URL_DECENT_EX,
+    },
+    {
+        logoFileName: 'dextroid.png',
+        projectUrl: constants.PROJECT_URL_DEXTROID,
+    },
+    {
+        logoFileName: 'ercdex.png',
+        projectUrl: constants.PROJECT_URL_ERC_DEX,
+    },
+    {
+        logoFileName: 'open_relay.png',
+        projectUrl: constants.PROJECT_URL_OPEN_RELAY,
+    },
+    {
+        logoFileName: 'idt.png',
+        projectUrl: constants.PROJECT_URL_IDT,
+    },
+];
+
 export interface LandingProps {
     location: Location;
 }
@@ -167,9 +218,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                     style={{ backgroundColor: colors.heroGrey, position: 'relative' }}
                 />
                 {this._renderHero()}
-                {this._renderProjects()}
+                {this._renderProjects(relayersAndDappProjects, 'Projects building on 0x', colors.projectsGrey, false)}
                 {this._renderTokenizationSection()}
                 {this._renderProtocolSection()}
+                {this._renderProjects(relayerProjects, 'Relayers building on 0x', colors.heroGrey, true)}
                 {this._renderInfoBoxes()}
                 {this._renderBuildingBlocksSection()}
                 {this._renderUseCases()}
@@ -259,11 +311,25 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             </div>
         );
     }
-    private _renderProjects() {
+    private _renderProjects(projects: Project[], title: string, backgroundColor: string, isTitleCenter: boolean) {
         const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         const isMediumScreen = this.state.screenWidth === ScreenWidths.Md;
         const projectList = _.map(projects, (project: Project, i: number) => {
-            const colWidth = isSmallScreen ? 3 : isMediumScreen ? 4 : 2 - i % 2;
+            const isRelayersOnly = projects.length === 12;
+            let colWidth: number;
+            switch (this.state.screenWidth) {
+                case ScreenWidths.Sm:
+                    colWidth = 4;
+                    break;
+
+                case ScreenWidths.Md:
+                    colWidth = 3;
+                    break;
+
+                case ScreenWidths.Lg:
+                    colWidth = isRelayersOnly ? 2 : 2 - i % 2;
+                    break;
+            }
             return (
                 <div key={`project-${project.logoFileName}`} className={`col col-${colWidth} center`}>
                     <div>
@@ -285,10 +351,10 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             letterSpacing: 3,
         };
         return (
-            <div className="clearfix py4" style={{ backgroundColor: colors.projectsGrey }}>
+            <div className={`clearfix py4 ${isTitleCenter && 'center'}`} style={{ backgroundColor }}>
                 <div className="mx-auto max-width-4 clearfix sm-px3">
-                    <div className="h4 pb3 md-pl3 sm-pl2" style={titleStyle}>
-                        Projects building on 0x
+                    <div className="h4 pb3 lg-pl0 md-pl3 sm-pl2" style={titleStyle}>
+                        {title}
                     </div>
                     <div className="clearfix">{projectList}</div>
                     <div
@@ -319,7 +385,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             <div className="clearfix lg-py4 md-py4 sm-pb4 sm-pt2" style={{ backgroundColor: colors.grey100 }}>
                 <div className="mx-auto max-width-4 py4 clearfix">
                     {isSmallScreen && this._renderTokenCloud()}
-                    <div className="col lg-col-6 md-col-6 col-12">
+                    <div className="col lg-col-6 md-col-6 col-12" style={{ color: colors.darkestGrey }}>
                         <div className="mx-auto" style={{ maxWidth: 385, paddingTop: 7 }}>
                             <div className="lg-h1 md-h1 sm-h2 sm-center sm-pt3" style={{ fontFamily: 'Roboto Mono' }}>
                                 The world's value is becoming tokenized
@@ -358,16 +424,15 @@ export class Landing extends React.Component<LandingProps, LandingState> {
     private _renderProtocolSection() {
         const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         return (
-            <div className="clearfix lg-py4 md-py4 sm-pt4" style={{ backgroundColor: colors.heroGrey }}>
-                <div className="mx-auto max-width-4 lg-py4 md-py4 sm-pt4 clearfix">
+            <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"
+                        className="col lg-col-6 md-col-6 col-12 lg-pr3 md-pr3 sm-mx-auto lg-pt4 md-pt4 lg-mt3 md-mt3"
                         style={{
                             color: colors.beigeWhite,
-                            paddingTop: 8,
                             maxWidth: isSmallScreen ? 'none' : 445,
                         }}
                     >
@@ -388,57 +453,6 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                             eliminating blockchain bloat. Relayers help broadcast orders and collect a fee each time
                             they facilitate a trade. Anyone can build a relayer.
                         </div>
-                        <div
-                            className="pt3 sm-mx-auto sm-px3"
-                            style={{
-                                color: colors.landingLinkGrey,
-                                maxWidth: isSmallScreen ? 412 : 'none',
-                            }}
-                        >
-                            <div className="flex" style={{ fontSize: 18 }}>
-                                <div
-                                    className="lg-h4 md-h4 sm-h5"
-                                    style={{
-                                        letterSpacing: isSmallScreen ? 1 : 3,
-                                        fontFamily: 'Roboto Mono',
-                                    }}
-                                >
-                                    RELAYERS BUILDING ON 0X
-                                </div>
-                                <div className="h5" style={{ marginLeft: isSmallScreen ? 26 : 49 }}>
-                                    <Link
-                                        to={`${WebsitePaths.Wiki}#List-of-Projects-Using-0x-Protocol`}
-                                        className="text-decoration-none underline"
-                                        style={{
-                                            color: colors.landingLinkGrey,
-                                            fontFamily: 'Roboto Mono',
-                                        }}
-                                    >
-                                        view all
-                                    </Link>
-                                </div>
-                            </div>
-                            <div className="lg-flex md-flex sm-clearfix pt3" style={{ opacity: 0.4 }}>
-                                <div className="col col-4 sm-center">
-                                    <img
-                                        src="/images/landing/ethfinex.png"
-                                        style={{ height: isSmallScreen ? 85 : 107 }}
-                                    />
-                                </div>
-                                <div className="col col-4 center">
-                                    <img
-                                        src="/images/landing/radar_relay.png"
-                                        style={{ height: isSmallScreen ? 85 : 107 }}
-                                    />
-                                </div>
-                                <div className="col col-4 sm-center" style={{ textAlign: 'right' }}>
-                                    <img
-                                        src="/images/landing/paradex.png"
-                                        style={{ height: isSmallScreen ? 85 : 107 }}
-                                    />
-                                </div>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </div>
@@ -551,7 +565,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                             fontFamily: 'Roboto Mono',
                             fontSize: 13.5,
                             fontWeight: 400,
-                            opacity: 0.75,
+                            color: colors.darkestGrey,
                         }}
                     >
                         {assetType.title}
@@ -587,9 +601,19 @@ export class Landing extends React.Component<LandingProps, LandingState> {
                 </div>
             );
         });
+        const titleStyle: React.CSSProperties = {
+            fontFamily: 'Roboto Mono',
+            color: colors.grey,
+            textTransform: 'uppercase',
+            fontWeight: 300,
+            letterSpacing: 3,
+        };
         return (
             <div className="clearfix" style={{ backgroundColor: colors.heroGrey }}>
-                <div className="mx-auto py4 sm-mt2 clearfix" style={{ maxWidth: '60em' }}>
+                <div className="center pb3 pt4" style={titleStyle}>
+                    Benefits of 0x
+                </div>
+                <div className="mx-auto pb4 sm-mt2 clearfix" style={{ maxWidth: '60em' }}>
                     {boxes}
                 </div>
             </div>
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 3df4c9370..6af821dbe 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -48,6 +48,12 @@ export const constants = {
     TESTNET_NAME: 'Kovan',
     TYPES_SECTION_NAME: 'types',
     PROJECT_URL_ETHFINEX: 'https://www.bitfinex.com/ethfinex',
+    PROJECT_URL_AMADEUS: 'http://amadeusrelay.org',
+    PROJECT_URL_DDEX: 'https://ddex.io',
+    PROJECT_URL_DECENT_EX: 'https://decent.exchange',
+    PROJECT_URL_DEXTROID: 'https://www.dextroid.io',
+    PROJECT_URL_ERC_DEX: 'https://ercdex.com',
+    PROJECT_URL_OPEN_RELAY: 'https://openrelay.xyz',
     PROJECT_URL_RADAR_RELAY: 'https://radarrelay.com',
     PROJECT_URL_PARADEX: 'https://paradex.io',
     PROJECT_URL_DYDX: 'https://dydx.exchange',
@@ -63,6 +69,7 @@ export const constants = {
     PROJECT_URL_AUGUR: 'https://augur.net',
     PROJECT_URL_AUCTUS: 'https://auctus.org',
     PROJECT_URL_OPEN_ANX: 'https://www.openanx.org',
+    PROJECT_URL_IDT: 'https://kinalpha.com',
     URL_ANGELLIST: 'https://angel.co/0xproject/jobs',
     URL_BIGNUMBERJS_GITHUB: 'http://mikemcl.github.io/bignumber.js',
     URL_BITLY_API: 'https://api-ssl.bitly.com',