From 04931886e3863897908a4744d1531195beeb05e1 Mon Sep 17 00:00:00 2001
From: wswidzinski <swidzinskiw@gmail.com>
Date: Wed, 10 Jan 2018 01:18:16 +0100
Subject: [PATCH] Add introduction section for tablet

---
 src/hbs/partials/components/introduction.hbs | 13 ++++--
 src/images/introduction.svg                  | 17 ++++++++
 src/styles/components/_introduction.scss     | 42 +++++++++++++++-----
 3 files changed, 59 insertions(+), 13 deletions(-)
 create mode 100644 src/images/introduction.svg

diff --git a/src/hbs/partials/components/introduction.hbs b/src/hbs/partials/components/introduction.hbs
index bd7efde..f0ba913 100644
--- a/src/hbs/partials/components/introduction.hbs
+++ b/src/hbs/partials/components/introduction.hbs
@@ -9,9 +9,15 @@
     </div>
 
     <div class="introduction__content">
-      {{#each introduction.content as |paragraph|}}
-        <p>{{paragraph}}</p>
-      {{/each}}
+      <div class="introduction__paragraph">
+        {{#each introduction.content as |paragraph|}}
+          <p>{{paragraph}}</p>
+        {{/each}}
+      </div>
+
+      <div class="introduction__img">
+        {{svg 'images/introduction.svg' }}
+      </div>
     </div>
 
     <div class="introduction__button">
@@ -28,6 +34,5 @@
         {{introduction.nextSectionLink}}
       </a>
     </div>
-
   </div>
 </section>
diff --git a/src/images/introduction.svg b/src/images/introduction.svg
new file mode 100644
index 0000000..bba3457
--- /dev/null
+++ b/src/images/introduction.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="362" height="380" viewBox="0 0 362 380">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: blue;
+        fill-rule: evenodd;
+        filter: url(#filter);
+      }
+    </style>
+    <filter id="filter" x="1042" y="929" width="362" height="380" filterUnits="userSpaceOnUse">
+      <feImage preserveAspectRatio="none" x="1042" y="929" width="362" height="380" result="image" xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzYyIiBoZWlnaHQ9IjM4MCIgdmlld0JveD0iMCAwIDM2MiAzODAiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6IHVybCgjcmFkaWFsLWdyYWRpZW50KTsKICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0icmFkaWFsLWdyYWRpZW50IiBjeD0iMTgxIiBjeT0iMTkwIiByPSIyNDMuNTYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSJyZWQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIwLjIyNSIgc3RvcC1jb2xvcj0iI2YwZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjAuNDk1IiBzdG9wLWNvbG9yPSJibHVlIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMC43MzUiIHN0b3AtY29sb3I9ImFxdWEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxLjAwNSIgc3RvcC1jb2xvcj0ibGltZSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEuMjYiIHN0b3AtY29sb3I9IiNmZjAiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxLjUiIHN0b3AtY29sb3I9InJlZCIvPgogICAgPC9yYWRpYWxHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iMzYyIiBoZWlnaHQ9IjM4MCIvPgo8L3N2Zz4K"/>
+      <feComposite result="composite" operator="in" in2="SourceGraphic"/>
+      <feBlend result="blend" in2="SourceGraphic"/>
+    </filter>
+  </defs>
+  <path id="Polygon_1" data-name="Polygon 1" class="cls-1" d="M1340.57,1185.03l-205.25,123.98-93.33-165.98,93.74-144.576,144.64-69.462,123.64,123.578Z" transform="translate(-1042 -929)"/>
+</svg>
diff --git a/src/styles/components/_introduction.scss b/src/styles/components/_introduction.scss
index b10e677..2b55d06 100644
--- a/src/styles/components/_introduction.scss
+++ b/src/styles/components/_introduction.scss
@@ -1,4 +1,6 @@
 .introduction {
+  display: flex;
+  align-items: center;
   color: white;
   background-color: $color-black;
 
@@ -6,36 +8,58 @@
     @include container;
   }
 
+  &__img {
+    display: none;
+
+    @media #{$screen-sm} {
+      display: block;
+    }
+  }
+
   &__header {
     margin: 30px 0;
     font-family: 'Rubik Mono One', sans-serif;
     font-size: 26px;
     font-weight: 400;
+
+    @media #{$screen-sm} {
+      font-size: 52px;
+    }
   }
 
-  &__subheader,
-  &__content,
-  &__link {
-    font-family: $base-font-family;
+  &__content {
+    display: flex;
   }
 
-  &__subheader,
-  &__content,
-  &__button,
-  &__link {
+  &__button {
     margin-bottom: 30px;
   }
 
   &__subheader {
     font-size: 22px;
+
+    @media #{$screen-sm} {
+      font-size: 26px;
+    }
   }
 
-  &__content {
+  &__paragraph {
     font-size: 18px;
+
+    @media #{$screen-sm} {
+      font-size: 20px;
+    }
   }
 
   &__link {
     font-size: 12px;
     text-transform: uppercase;
   }
+
+  &__subheader,
+  &__paragraph,
+  &__link {
+    margin-bottom: 30px;
+    font-family: $base-font-family;
+  }
 }