EQ-96: Landing/Create better understand section

components/index/better-understand.js

@@ -0,0 +1,105 @@
+import styled from 'styled-components'
+
+const SectionStyled = styled.section`
+  margin: 0 auto;
+  max-width: ${({ theme }) => theme.width.page};
+  @media ${({ theme }) => theme.breakpoint.md} {
+    padding: ${({ theme }) => theme.spacing[5]}px 0;
+  }
+  .image-bar {
+    background-color: ${({ theme }) => theme.color.greyMedium};
+    height: 200px;
+    @media ${({ theme }) => theme.breakpoint.md} {
+      display: none;
+    }
+  }
+  .content {
+    @media ${({ theme }) => theme.breakpoint.md} {
+      display: flex;
+    }
+    .left {
+      display: none;
+      padding: 0 ${({ theme }) => theme.spacing[4]}px;
+      width: 50%;
+      @media ${({ theme }) => theme.breakpoint.md} {
+        display: block;
+      }
+      @media ${({ theme }) => theme.breakpoint.lg} {
+        padding: 0 ${({ theme }) => theme.spacing[5]}px;
+      }
+      .image {
+        background-color: ${({ theme }) => theme.color.greyMedium};
+        height: 100%;
+        width: 100%;
+      }
+    }
+    .right {
+      padding: ${({ theme }) => theme.spacing[5]}px
+        ${({ theme }) => theme.spacing[3]}px;
+      text-align: center;
+      @media ${({ theme }) => theme.breakpoint.md} {
+        padding: ${({ theme }) => theme.spacing[5]}px
+          ${({ theme }) => theme.spacing[3]}px
+          ${({ theme }) => theme.spacing[5]}px 0;
+        text-align: left;
+      }
+      h2 {
+        margin: 0 auto ${({ theme }) => theme.spacing[3]}px auto;
+        text-transform: uppercase;
+        @media ${({ theme }) => theme.breakpoint.md} {
+          margin: 0 0 ${({ theme }) => theme.spacing[3]}px 0;
+          max-width: 400px;
+        }
+      }
+      p {
+        margin: 0 auto;
+        max-width: 450px;
+        @media ${({ theme }) => theme.breakpoint.md} {
+          margin: 0;
+        }
+      }
+      .divider {
+        background-color: ${({ theme }) => theme.color.blue};
+        height: 5px;
+        margin: 0 auto ${({ theme }) => theme.spacing[3]}px auto;
+        width: 100px;
+        @media ${({ theme }) => theme.breakpoint.md} {
+          margin: 0 0 ${({ theme }) => theme.spacing[3]}px 0;
+        }
+      }
+      .paragraph-1 {
+        margin: 0 auto ${({ theme }) => theme.spacing[3]}px auto;
+        @media ${({ theme }) => theme.breakpoint.md} {
+          margin: 0 0 ${({ theme }) => theme.spacing[3]}px 0;
+        }
+      }
+    }
+  }
+`
+
+export default function BetterUnderstand() {
+  return (
+    <SectionStyled>
+      <div className='image-bar' />
+      <div className='content'>
+        <div className='left'>
+          <div className='image' />
+        </div>
+        <div className='right'>
+          <h2>
+            Better <span className='color-blue'>Understand</span> Your Consumers
+          </h2>
+          <div className='divider' />
+          <p className='paragraph-1'>
+            Where consumers are and where they’ve been not only reveal their day
+            to day habits in the physical world, but also their values and who
+            they aspire to&nbsp;be.
+          </p>
+          <p className='font-weight-bold'>
+            99% of consumers shop in store with their mobile&nbsp;device.
+          </p>
+        </div>
+      </div>
+    </SectionStyled>
+  )
+}

components/index/hero.js

@@ -23,7 +23,6 @@ const SectionStyled = styled.section`
     z-index: ${({ theme }) => theme.zIndex.pageContent};
     h1 {
       font-size: 2em;
-      font-weight: ${({ theme }) => theme.font.regular};
       margin: 0 0 ${({ theme }) => theme.spacing[4]}px 0;
       text-transform: uppercase;
       @media ${({ theme }) => theme.breakpoint.xs} {

pages/index.js

@@ -1,7 +1,9 @@
 import dynamic from 'next/dynamic'
 
 const Hero = dynamic(() => import('../components/index/hero'))
-const Video = dynamic(() => import('../components/index/video'))
+const BetterUnderstand = dynamic(() =>
+  import('../components/index/better-understand')
+)
 const WhyClientsUseUs = dynamic(() =>
   import('../components/index/why-clients-use-us')
 )
@@ -21,7 +23,7 @@ export default function Index() {
   return (
     <>
       <Hero />
-      <Video />
+      <BetterUnderstand />
       <WhyClientsUseUs />
       <LocationBehaviour />
       <ConnectedDevices />

styles/global.js

@@ -12,15 +12,15 @@ const GlobalStyle = createGlobalStyle`
 
   h1 {
     font-family: ${({ theme }) => theme.font.name}, sans-serif;
-    font-weight: ${({ theme }) => theme.font.bold};
+    font-weight: ${({ theme }) => theme.font.regular};
     line-height: 1.25em;
     margin: 0;
     padding: 0;
   }
 
   h2 {
     font-family: ${({ theme }) => theme.font.name}, sans-serif;
-    font-weight: ${({ theme }) => theme.font.bold};
+    font-weight: ${({ theme }) => theme.font.regular};
     font-size: 2em;
     margin: 0;
     padding: 0;
@@ -49,6 +49,10 @@ const GlobalStyle = createGlobalStyle`
     flex-direction: column;
   }
 
+  .color-blue {
+    color: ${({ theme }) => theme.color.blue};
+  }
+
   .font-weight-bold {
     font-weight: ${({ theme }) => theme.font.bold};
   }