Text and landing

4 files changed, 185 insertions, 148 deletions

diff --git a/packages/website/ts/@next/components/container.tsx b/packages/website/ts/@next/components/container.tsx
index 1e8aae793..58aaa8be9 100644
--- a/packages/website/ts/@next/components/container.tsx
+++ b/packages/website/ts/@next/components/container.tsx
@@ -6,6 +6,10 @@ interface ContainerProps {
   removePadding?: boolean;
 }
 
+
+// are we still using this component? (i think not, so we should delete, but have notes)
+// Also, i dont understand why create a styled comp and then make a stateless component that returns the same thing?
+// should be enough to just export a styled component as it is understood that it takes props and a child
 const StyledContainer = styled.div<ContainerProps>`
     background-color: ${props => props.bgColor || 'transparent'};
     max-width: 111.111111111rem; // 2000px
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index c807ccb36..1eecf0a55 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -2,112 +2,114 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 interface WrapWidths {
-  default: string;
-  full: string;
-  medium: string;
-  narrow: string;
-  [key: string]: string;
+    default: string;
+    full: string;
+    medium: string;
+    narrow: string;
+    [key: string]: string;
 }
 
 interface ColumnWidths {
-  [key: string]: string;
+    [key: string]: string;
 }
 
 interface SectionProps {
-  noPadding?: any;
-  noMargin?: any;
-  bgColor?: string;
-  fullWidth?: any;
+    noPadding?: any;
+    noMargin?: any;
+    bgColor?: string;
+    fullWidth?: any;
 }
 
 interface WrapProps {
-  width?: 'default' | 'full' | 'medium' | 'narrow';
-  bgColor?: string;
+    width?: 'default' | 'full' | 'medium' | 'narrow';
+    bgColor?: string;
 }
 
 interface ColumnProps {
-  colWidth?: '1/4' | '1/3' | '1/2' | '2/3';
-  noPadding?: any;
+    colWidth?: '1/4' | '1/3' | '1/2' | '2/3';
+    noPadding?: any;
+    bgColor?: string;
 }
 
 interface GetColWidthArgs {
-  span?: number;
-  columns: number;
+    span?: number;
+    columns: number;
 }
 
 
 const _getColumnWidth = (args: GetColWidthArgs) => {
-  const { span = 1, columns } = args;
-  const percentWidth = (span / columns) * 100;
-  const gutterDiff = (GUTTER * (columns - 1)) / columns;
-  return `calc(${percentWidth}% - ${gutterDiff}px)`;
+    const { span = 1, columns } = args;
+    const percentWidth = (span / columns) * 100;
+    const gutterDiff = (GUTTER * (columns - 1)) / columns;
+    return `calc(${percentWidth}% - ${gutterDiff}px)`;
 };
 
 const GUTTER = 30 as number;
 const MAX_WIDTH = 1500;
 const BREAKPOINTS = {
-  mobile: '768px',
+    mobile: '768px',
 };
 const WRAPPER_WIDTHS: WrapWidths = {
-  default: `${MAX_WIDTH}px`, // tbd
-  full: '100%',
-  medium: '1136px',
-  narrow: '930px',
+    default: `${MAX_WIDTH}px`, // tbd
+    full: '100%',
+    medium: '1136px',
+    narrow: '930px',
 };
 const COLUMN_WIDTHS: ColumnWidths = {
-  '1/4': _getColumnWidth({ columns: 4 }),
-  '1/3': _getColumnWidth({ columns: 3 }),
-  '1/2': _getColumnWidth({ columns: 2 }),
-  '2/3': _getColumnWidth({ span: 2, columns: 3 }),
+    '1/4': _getColumnWidth({ columns: 4 }),
+    '1/3': _getColumnWidth({ columns: 3 }),
+    '1/2': _getColumnWidth({ columns: 2 }),
+    '2/3': _getColumnWidth({ span: 2, columns: 3 }),
 };
 
 
 export const Main = styled.main`
-  border: 1px dotted rgba(0, 0, 255, 0.3);
-  width: calc(100% - 60px);
-  max-width: ${MAX_WIDTH}px;
-  margin: 0 auto;
+    border: 1px dotted rgba(0, 0, 255, 0.3);
+    width: calc(100% - 60px);
+    max-width: ${MAX_WIDTH}px;
+    margin: 0 auto;
 `;
 
 export const Section = styled.section<SectionProps>`
-  width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
-  padding: ${props => !props.noPadding && '30px'};
-  margin-bottom: ${props => !props.noMargin && `${GUTTER}px`};
-  margin-left: ${props => props.fullWidth && `-${GUTTER}px`};
-  background-color: ${props => props.bgColor};
-  border: 1px dotted rgba(0, 255, 0, 0.3);
-
-  @media (min-width: 1560px) {
-    width: ${props => props.fullWidth && '100vw'};
-    margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`};
-  }
+    width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
+    padding: ${props => !props.noPadding && '30px'};
+    margin-bottom: ${props => !props.noMargin && `${GUTTER}px`};
+    margin-left: ${props => props.fullWidth && `-${GUTTER}px`};
+    background-color: ${props => props.bgColor};
+    border: 1px dotted rgba(0, 255, 0, 0.3);
+
+    @media (min-width: 1560px) {
+        width: ${props => props.fullWidth && '100vw'};
+        margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`};
+    }
 `;
 
 const WrapBase = styled.div<WrapProps>`
-  max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
-  background-color: ${props => props.bgColor};
-  margin: 0 auto;
+    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;
-  }
+    @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;
+    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);
+    padding: ${props => !props.noPadding && '30px'};
+    border: 1px dotted rgba(255, 0, 0, 0.3);
+    background-color: ${props => props.bgColor};
 
-  @media (min-width: ${BREAKPOINTS.mobile}) {
-    width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
-  }
+    @media (min-width: ${BREAKPOINTS.mobile}) {
+        width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
+    }
 `;
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index 4c6765cf6..ca2130563 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -1,84 +1,71 @@
 import * as React from 'react';
 import styled from 'styled-components';
-
 import { colors } from 'ts/style/colors';
 
-interface Props {
-    size?: 'normal' | 'medium' | 'large';
-    muted?: any;
+
+interface HeadingProps {
+    asElement?: 'h1'| 'h2'| 'h3'| 'h4';
+    size?: 'default' | 'medium' | 'large';
     center?: boolean;
+    children: Node | string;
+    noMargin?: any;
 }
 
-export const Heading: React.StatelessComponent<Props> = ({ children, ...props }) => (
-    <StyledHeading {...props}>{children}</StyledHeading>
-);
-
-export const Intro: React.StatelessComponent<Props> = ({ children, ...props }) => (
-    <StyledIntro {...props}>{children}</StyledIntro>
-);
-
-export const Text: React.StatelessComponent<Props> = ({ children, ...props }) => (
-    <StyledText {...props}>{children}</StyledText>
-);
+interface ParagraphProps {
+    noMargin?: any;
+    size?: 'default' | 'small' | 'medium' | 'large';
+    muted?: any;
+    center?: any;
+}
 
-Heading.defaultProps = {
-    size: 'normal',
-    center: false,
-};
+interface HeadingSizes {
+    large: string;
+    medium: string;
+    default: string;
+    small: string;
+    [key: string]: string;
+}
 
-Intro.defaultProps = {
-    size: 'normal',
-    center: false,
-};
+interface ParagraphSizes {
+    default: string;
+    [key: string]: string;
+}
 
-Text.defaultProps = {
-    size: 'normal',
-    center: false,
+const HEADING_SIZES: HeadingSizes = {
+    large: '80px',
+    medium: '50px',
+    default: '28px',
+    small: '20px',
 };
 
-const StyledHeading = styled.h1`
-    color: ${colors.white};
-    font-size: 1.111111111rem;
-    line-height: 1.4em;
-
-    ${(props: Props) => props.center && `
-        text-align: center
-    `}
-
-    ${(props: Props) => props.size === 'medium' && `
-        font-size: 3.222222222rem; // 50px
-        line-height: 1.16em;
-    `}
+const PARAGRAPH_SIZES: ParagraphSizes = {
+    default: '18px',
+    medium: '22px',
+    large: '28px',
+}
 
-    ${(props: Props) => props.size === 'large' && `
-        font-size: 4.444444444rem; // 80px
-        line-height: 1em;
-    `}
+const StyledHeading = styled.h1<HeadingProps>`
+    color: ${props => props.color || colors.white};
+    font-size: ${props => HEADING_SIZES[props.size || 'default']};
+    margin-bottom: ${props => !props.noMargin && '30px'};
+    text-align: ${props => props.center && 'center'};
 `;
 
-const StyledIntro = styled.p`
-    color: ${colors.white};
-    opacity: 0.75;
-    font-size: 22px;
-    line-height: 1.823529412em;
-
-    ${(props: Props) => props.center && `
-        text-align: center
-    `}
-`;
+export const Heading: React.StatelessComponent<HeadingProps> = props => {
+    const {
+    asElement = 'h1',
+    children,
+    } = props;
+    const Component = StyledHeading.withComponent(asElement);
 
-const StyledText = styled.p<Props>`
-    color: ${colors.white};
-    font-size: 1rem;
-    ${(props: Props) => props.size === 'medium' && `
-        font-size: 1.555555556rem;
-        line-height: 1.357142857em;
-    `}
-    ${(props: Props) => props.center && `
-        text-align: center
-    `}
+    return <Component {...props}>{ children }</Component>;
+};
 
-    ${(props: Props) => props.muted && `
-        opacity: ${typeof props.muted === 'string' ? props.muted : '0.8'};
-    `}
+// No need to declare it twice as Styled then rewrap as a stateless comp
+export const Paragraph = styled.p<ParagraphProps>`
+    font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']};
+    margin-bottom: ${props => !props.noMargin && '30px'};
+    line-height: 1.4;
+    color: ${props => `rgba(255, 255, 255, ${props.muted || 0.75})`};
+    text-align: ${props => props.center && 'center'};
 `;
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 9be2ee4da..d207bd9ff 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -5,7 +5,7 @@ import { colors } from 'ts/style/colors'
 import { Button, ButtonWrap } from 'ts/@next/components/button';
 import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
-import { Heading, Intro, Text } from 'ts/@next/components/text';
+import { Heading, Paragraph } from 'ts/@next/components/text';
 
 import LogoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
 import ProtocolIcon from 'ts/@next/icons/illustrations/protocol.svg';
@@ -18,9 +18,14 @@ export const NextLanding = () => (
   <SiteWrap>
     <Section>
       <Wrap>
-        <Column colWidth="2/3">
-          <Heading>Powering Decentralized Exchange</Heading>
-          <Intro>0x is the best solution for adding exchange functionality to your business.</Intro>
+        <Column colWidth="1/2">
+          <Heading size="large">
+            Powering Decentralized Exchange
+          </Heading>
+
+          <Paragraph size="medium">
+            0x is the best solution for adding exchange functionality to your business.
+          </Paragraph>
 
           <ButtonWrap>
             <Button inline>
@@ -33,18 +38,69 @@ export const NextLanding = () => (
           </ButtonWrap>
         </Column>
 
-        <Column colWidth="1/3">
-          <ProtocolIcon />
+        <Column colWidth="1/2">
+          <Icon as={logoOutlined as 'svg'} />
         </Column>
       </Wrap>
     </Section>
 
     <Section bgColor={colors.backgroundDark}>
-      <WrapCentered>
-        <Icon><LogoOutlined /></Icon>
-        <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 width="narrow">
+        <Icon as={protocol as 'svg'} />
+
+        <Paragraph size="large" center>
+            0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based tokens. Anyone in the world can use 0x to service a wide variety of markets ranging from gaming items to financial instruments to assets that could have near existed before.
+        </Paragraph>
+
+        <Button href="#" transparent>
+            Discover how developers use 0x
+        </Button>
       </WrapCentered>
+
+      <Wrap>
+        {/* NOTE: this probably should be withComponent as part of a <dl> */}
+        <Column colWidth="1/3">
+            <Heading size="medium" center>
+                873,435
+            </Heading>
+
+            <Paragraph muted={0.4} center noMargin>
+                Number of transactions
+            </Paragraph>
+        </Column>
+
+        <Column colWidth="1/3">
+            <Heading size="medium" center>
+                $203M
+            </Heading>
+
+            <Paragraph muted={0.4} center noMargin>
+                Total volume
+            </Paragraph>
+        </Column>
+
+        <Column colWidth="1/3">
+            <Heading size="medium" center>
+                227,372
+            </Heading>
+
+            <Paragraph muted={0.4} center noMargin>
+                Number of relayers
+            </Paragraph>
+        </Column>
+      </Wrap>
+    </Section>
+
+    <Section>
+      <Wrap>
+        <Column bgColor="#003831" colWidth="1/2">
+          This is a 2 COLUMN section
+        </Column>
+
+        <Column bgColor="#003831" colWidth="1/2">
+          Again a 2 column section
+        </Column>
+      </Wrap>
     </Section>
 
     <Section>
@@ -95,17 +151,5 @@ export const NextLanding = () => (
         </Column>
       </Wrap>
     </Section>
-
-    <Section>
-      <Wrap>
-        <Column colWidth="1/2">
-          This is a 2 COLUMN section
-        </Column>
-
-        <Column colWidth="1/2">
-          Again a 2 column section
-        </Column>
-      </Wrap>
-    </Section>
   </SiteWrap>
 );