New design

README.md

@@ -142,6 +142,7 @@ To convert any image type (`.png`, `.jpg`, etc.) to the `.webp` format, you can
 - Order declaration properties alphabetically, but ignore vendor prefixes (`-webkit`, `-moz`, `-o`, `-ms`). Meaning `-webkit-box-shadow` should be treated as starting with the letter `b`.
 - Order action selectors alphabetically.
 - Place `@media` declarations at the end of properties.
+- Place classes alphabetically after element selector. For example: `a {} p {} .button{} .item {}`.
 - For example:
 
 ```jsx
@@ -152,8 +153,8 @@ const sectionStyled = styled.section`
   -webkit-box-shadow: none;
   box-shadow: none;
   display: inline-block;
-  font-family: ${({ theme }) => theme.font.copy.name}, sans-serif;
-  font-weight: ${({ theme }) => theme.font.copy.regular};
+  font-family: ${({ theme }) => theme.font.name}, sans-serif;
+  font-weight: ${({ theme }) => theme.font.regular};
   text-align: center;
   a {
     text-decoration: none;

components/404/content.js

@@ -24,7 +24,7 @@ const SectionStyled = styled.section`
   }
   p {
     font-size: 2em;
-    font-weight: ${({ theme }) => theme.font.copy.bold};
+    font-weight: ${({ theme }) => theme.font.bold};
     margin: 0 auto 20px auto;
     max-width: 600px;
   }
@@ -36,7 +36,7 @@ const SectionStyled = styled.section`
     text-transform: uppercase;
   }
   .subtitle {
-    font-weight: ${({ theme }) => theme.font.copy.bold};
+    font-weight: ${({ theme }) => theme.font.bold};
     font-size: 2em;
   }
   @media ${({ theme }) => theme.breakpoint.sm} {

components/atom/slides.js

@@ -106,7 +106,7 @@ const SectionStyled = styled.section`
     .link {
       background-color: ${({ theme }) => theme.color.navBarLinksListHover};
       color: ${({ theme }) => theme.color.white};
-      font-weight: ${({ theme }) => theme.font.copy.bold};
+      font-weight: ${({ theme }) => theme.font.bold};
       padding: 15px 30px;
       text-decoration: none;
       text-transform: uppercase;

components/browser-opt-out/content.js

@@ -16,8 +16,8 @@ const SectionStyled = styled.section`
     cursor: pointer;
     border: 2px solid ${({ theme }) => theme.color.black};
     display: inline-block;
-    font-family: ${({ theme }) => theme.font.copy.name}, sans-serif;
-    font-weight: ${({ theme }) => theme.font.copy.medium};
+    font-family: ${({ theme }) => theme.font.name}, sans-serif;
+    font-weight: ${({ theme }) => theme.font.semiBold};
     text-decoration: none;
     text-transform: uppercase;
     transition: all 0.25s ease-out;
@@ -28,7 +28,7 @@ const SectionStyled = styled.section`
     }
   }
   .subtitle {
-    font-weight: ${({ theme }) => theme.font.copy.bold};
+    font-weight: ${({ theme }) => theme.font.bold};
     margin: 20px auto;
   }
 `

components/careers/application-form.js

@@ -20,7 +20,7 @@ const SectionStyled = styled.section`
       background-color: ${({ theme }) => theme.color.white};
       border: 2px solid ${({ theme }) => theme.color.black};
       cursor: pointer;
-      font-weight: ${({ theme }) => theme.font.copy.bold};
+      font-weight: ${({ theme }) => theme.font.bold};
       margin: 0 0 20px 0;
       padding: 10px 20px;
       text-transform: uppercase;

components/contact/contact-info.js

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import styled from 'styled-components'
+
+const SectionStyled = styled.section`
+  background-color: ${({ theme }) => theme.color.greyBackground};
+  margin: ${({ theme }) => theme.spacing[12]}px auto 0 auto;
+  .container {
+    align-items: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 0 auto;
+    max-width: ${({ theme }) => theme.width.page};
+    padding: ${({ theme }) => theme.spacing[6]}px
+      ${({ theme }) => theme.spacing[2]}px;
+    .divider {
+      background-color: ${({ theme }) => theme.color.greyLight};
+      box-sizing: border-box;
+      height: 3px;
+      margin: 0 0 ${({ theme }) => theme.spacing[4]}px 0;
+      max-width: 200px;
+      width: 100%;
+      @media ${({ theme }) => theme.breakpoint.md} {
+        height: 125px;
+        margin: 0 ${({ theme }) => theme.spacing[3]}px 0
+          ${({ theme }) => theme.spacing[2]}px;
+        width: 3px;
+      }
+      @media ${({ theme }) => theme.breakpoint.lg} {
+        margin: 0 ${({ theme }) => theme.spacing[7]}px 0
+          ${({ theme }) => theme.spacing[4]}px;
+      }
+    }
+    .item {
+      text-align: center;
+      margin: 0 0 ${({ theme }) => theme.spacing[5]}px 0;
+      width: 100%;
+      &:last-child {
+        margin: 0;
+      }
+      @media ${({ theme }) => theme.breakpoint.md} {
+        padding: 0 ${({ theme }) => theme.spacing[1]}px;
+        text-align: left;
+        width: 20%;
+      }
+    }
+  }
+`
+
+export default function Section() {
+  return (
+    <SectionStyled>
+      <div className='container'>
+        <div className='item'>
+          <p className='font-weight-bold'>Toronto Office</p>
+          <p>1235 Bay Street, Suite 401</p>
+          <p>Toronto, ON, M5R&nbsp;3K4</p>
+        </div>
+        <div className='divider' />
+        <div className='item'>
+          <p className='font-weight-bold'>Sales</p>
+          <p>sales@eqworks.com</p>
+        </div>
+        <div className='item'>
+          <p className='font-weight-bold'>Media inquiries</p>
+          <p>press@eqworks.com</p>
+        </div>
+        <div className='item'>
+          <p className='font-weight-bold'>Investor relations</p>
+          <p>Peter Kanniah</p>
+          <p>peter.kanniah@eqworks.com</p>
+          <p>416 260 4326</p>
+        </div>
+      </div>
+    </SectionStyled>
+  )
+}