Introduces WrapCentered

2 files changed, 18 insertions, 10 deletions

diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index d64bcf74a..c807ccb36 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -83,17 +83,26 @@ export const Section = styled.section<SectionProps>`
   }
 `;
 
-export const Wrap = styled.div<WrapProps>`
+const WrapBase = styled.div<WrapProps>`
   max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
   background-color: ${props => props.bgColor};
   margin: 0 auto;
+`;
 
+export const Wrap = styled(WrapBase)`
   @media (min-width: ${BREAKPOINTS.mobile}) {
     display: flex;
     justify-content: space-between;
   }
 `;
 
+export const WrapCentered = styled(WrapBase)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
 export const Column = styled.div<ColumnProps>`
   padding: ${props => !props.noPadding && '30px'};
   border: 1px dotted rgba(255, 0, 0, 0.3);
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 025a9d47b..ad0639fc7 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -3,16 +3,13 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors'
 import { Button, ButtonTransparent } from 'ts/@next/components/button';
-import { Column, Section, Wrap } from 'ts/@next/components/layout';
+import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
-<<<<<<< Updated upstream
 import { Heading, Intro, Text } from 'ts/@next/components/text';
 
 import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
 import protocol from 'ts/@next/icons/illustrations/protocol.svg';
-=======
-import { Section, Wrap } from 'ts/@next/components/layout';
->>>>>>> Stashed changes
+
 
 const Icon = styled.div`
     flex-shrink: 0;
@@ -37,10 +34,12 @@ export const NextLanding = () => (
       </Wrap>
     </Section>
 
-    <Section bgColor={colors.backgroundDark} noPadding>
-      <Icon as={protocol as 'svg'} />
-      <Text size="medium">0x is the best solution for adding exchange functionality to your business.</Text>
-      <Text size="medium">Discover how developers use 0x (need arrow + line under)</Text>
+    <Section bgColor={colors.backgroundDark}>
+      <WrapCentered>
+        <Icon as={protocol as 'svg'} />
+        <Text size="medium">0x is the best solution for adding exchange functionality to your business.</Text>
+        <Text size="medium">Discover how developers use 0x (need arrow + line under)</Text>
+      </WrapCentered>
     </Section>
 
     <Section>