Refines landingpage

5 files changed, 43 insertions, 33 deletions

diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index bd3b8a2e3..6584f3fa4 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -27,6 +27,7 @@ interface WrapProps extends PaddingInterface {
     bgColor?: string;
     isWrapped?: boolean;
     isCentered?: boolean;
+    isReversed?: boolean;
 }
 
 interface ColumnProps {
@@ -50,7 +51,7 @@ const _getColumnWidth = (args: GetColWidthArgs): string => {
 
 const GUTTER = 30 as number;
 const MAX_WIDTH = 1500;
-const BREAKPOINTS = {
+export const BREAKPOINTS = {
     mobile: '768px',
 };
 const WRAPPER_WIDTHS: WrapWidths = {
@@ -83,19 +84,18 @@ export const Main = styled.main`
 export const Section = styled.section<SectionProps>`
     width: ${props => props.isFullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
     padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')};
-    margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`};
-    margin-left: ${props => props.isFullWidth && `-${GUTTER}px`};
     background-color: ${props => props.bgColor};
     position: ${props => props.isRelative && 'relative'};
     overflow: ${props => props.isRelative && 'hidden'};
 
     @media (min-width: 1560px) {
         width: ${props => props.isFullWidth && '100vw'};
+        margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`};
         margin-left: ${props => props.isFullWidth && `calc(750px - 50vw)`};
     }
 
     @media (max-width: ${BREAKPOINTS.mobile}) {
-        padding: 20px;
+        margin-bottom: ${props => !props.isNoMargin && `${GUTTER / 2}px`};
     }
 `;
 
@@ -104,10 +104,6 @@ const WrapBase = styled.div<WrapProps>`
     padding: ${props => props.padding && getCSSPadding(props.padding)};
     background-color: ${props => props.bgColor};
     margin: 0 auto;
-
-    @media (max-width: ${BREAKPOINTS.mobile}) {
-        padding: 20px 0;
-    }
 `;
 
 export const Wrap = styled(WrapBase)`
@@ -115,6 +111,7 @@ export const Wrap = styled(WrapBase)`
         display: flex;
         justify-content: space-between;
         flex-wrap: wrap;
+        flex-direction: ${props => props.isReversed && 'row-reverse'};
     }
 `;
 
@@ -132,17 +129,17 @@ export const WrapGrid = styled(WrapBase)`
 `;
 
 export const Column = styled.div<ColumnProps>`
-    padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')};
     background-color: ${props => props.bgColor};
 
     @media (min-width: ${BREAKPOINTS.mobile}) {
+        padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')};
         width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
     }
 
     @media (max-width: ${BREAKPOINTS.mobile}) {
-        padding-left: 0;
-        padding-right: 0;
-        margin-bottom: var(--gutterMobile, 20px);
+        padding: ${props => !props.isNoPadding && (props.isPadLarge ? '40px 30px' : '15px')};
+        text-align: center;
+        margin-bottom: 20px;
     }
 `;
 
diff --git a/packages/website/ts/@next/components/sections/landing/about.tsx b/packages/website/ts/@next/components/sections/landing/about.tsx
index 42062a2e1..75c7623e8 100644
--- a/packages/website/ts/@next/components/sections/landing/about.tsx
+++ b/packages/website/ts/@next/components/sections/landing/about.tsx
@@ -38,9 +38,8 @@ export const SectionLandingAbout = () => (
             <hr
                 style={{
                     width: '340px',
-                    margin: '0 auto',
                     borderColor: '#3C4746',
-                    marginTop: '60px auto 0 auto',
+                    margin: '60px auto 0 auto',
                 }}
             />
         </WrapCentered>
diff --git a/packages/website/ts/@next/components/sections/landing/clients.tsx b/packages/website/ts/@next/components/sections/landing/clients.tsx
index c08a4ea48..68d5e384d 100644
--- a/packages/website/ts/@next/components/sections/landing/clients.tsx
+++ b/packages/website/ts/@next/components/sections/landing/clients.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
-import {Section, Wrap, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
+import {BREAKPOINTS, Section, WrapCentered, WrapGrid} from 'ts/@next/components/layout';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
 interface ProjectLogo {
@@ -13,14 +13,17 @@ const projects: ProjectLogo[] = [
     {
         name: 'Radar Relay',
         imageUrl: '/images/@next/relayer-logos/logo_1.png',
+        persistOnMobile: true,
     },
     {
         name: 'Paradex',
         imageUrl: '/images/@next/relayer-logos/logo_5.png',
+        persistOnMobile: true,
     },
     {
         name: 'Amadeus',
         imageUrl: '/images/@next/relayer-logos/logo_3.png',
+        persistOnMobile: true,
     },
     {
         name: 'The Ocean X',
@@ -41,22 +44,29 @@ const projects: ProjectLogo[] = [
     {
         name: 'OpenRelay',
         imageUrl: '/images/@next/relayer-logos/logo_2.3.png',
+        persistOnMobile: true,
     },
     {
         name: 'DDEX',
         imageUrl: '/images/@next/relayer-logos/logo_2.png',
+        persistOnMobile: true,
     },
 ];
 
 export const SectionLandingClients = () => (
     <Section isPadLarge={true}>
         <WrapCentered>
-            <Heading size="small">You're in good company</Heading>
+            <Heading size="small">
+                Join the growing number of projects developing on 0x
+            </Heading>
         </WrapCentered>
 
         <WrapGrid width="narrow" isWrapped={true}>
             {_.map(projects, (item: ProjectLogo, index) => (
-                <StyledProject key={`client-${index}`}>
+                <StyledProject
+                    key={`client-${index}`}
+                    isOnMobile={item.persistOnMobile}
+                >
                     <img src={item.imageUrl} alt={item.name} />
                 </StyledProject>
             ))}
@@ -65,14 +75,24 @@ export const SectionLandingClients = () => (
 );
 
 const StyledProject = styled.div`
-    width: 90px;
-    height: 90px;
     flex-shrink: 0;
-    margin: 30px;
 
     img {
         object-fit: contain;
         width: 100%;
         height: 100%;
     }
+
+    @media (min-width: ${BREAKPOINTS.mobile}) {
+        width: 120px;
+        height: 120px;
+        margin: 30px;
+    }
+
+    @media (max-width: ${BREAKPOINTS.mobile}) {
+        width: 100px;
+        height: 100px;
+        margin: 15px;
+        display: ${props => !props.isOnMobile && 'none'};
+    }
 `;
diff --git a/packages/website/ts/@next/components/sections/landing/hero.tsx b/packages/website/ts/@next/components/sections/landing/hero.tsx
index e43ac41f2..98e111805 100644
--- a/packages/website/ts/@next/components/sections/landing/hero.tsx
+++ b/packages/website/ts/@next/components/sections/landing/hero.tsx
@@ -7,7 +7,13 @@ import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
 
 export const SectionLandingHero = () => (
     <Section>
-        <Wrap>
+        <Wrap isReversed={true}>
+            <Column colWidth="1/2">
+                <WrapCentered>
+                    <LogoOutlined/>
+                </WrapCentered>
+            </Column>
+
             <Column colWidth="1/2">
                 <Heading size="large">
                     Powering Decentralized Exchange
@@ -28,12 +34,6 @@ export const SectionLandingHero = () => (
                     </Button>
                 </ButtonWrap>
             </Column>
-
-            <Column colWidth="1/2">
-                <WrapCentered>
-                    <LogoOutlined/>
-                </WrapCentered>
-            </Column>
         </Wrap>
     </Section>
 );
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 9058fc7c9..96decedba 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -27,14 +27,8 @@ const StyledHeading = styled.h1<HeadingProps>`
     margin-bottom: ${props => !props.isNoMargin && '30px'};
     text-align: ${props => props.isCentered && 'center'};
     font-weight: 300;
-    max-width: var(--desktopMaxWidth, none);
     margin-left: ${props => props.isCentered && 'auto'};
     margin-right: ${props => props.isCentered && 'auto'};
-
-    @media (max-width: 768px) {
-        text-align: center;
-        max-width: var(--mobileMaxWidth, none);
-    }
 `;
 
 export const Heading: React.StatelessComponent<HeadingProps> = props => {