Merge branch 'landing' into component/heading

src/hbs/data.json

@@ -1,17 +1,5 @@
 {
   "rootUrl": "/",
-  "heroSection": {
-    "events": [
-      {
-        "text": "DEC 17 - 3359 26th Street",
-        "city": "SAN FRANSISCO CA"
-      },
-      {
-        "text": "DeC 21 -  111 RICHMOND ST WEST",
-        "city": "TORONTO ON"
-      }
-    ]
-  },
   "header": {
     "links": [
       {

src/hbs/index.hbs

@@ -10,15 +10,29 @@ introduction:
 
   button:
     label: 'Signup for newsletter'
-    icon: 'images/telegram-logo.svg'
 
   nextSectionLink: 'Learn more about the project'
+
+hero:
+  header:
+    upper: '#Art'
+    lower: 'Project.'
+  eventsLabel: 'UPCOMING EVENTS'
+  events:
+    - text: 'DEC 17 - 3359 26th Street'
+      city: 'SAN FRANSISCO CA'
+    - text: 'DeC 21 -  111 RICHMOND ST WEST'
+      city: 'TORONTO ON'
+  button:
+    label: 'Telegram Community'
+    icon: 'images/telegram-logo.svg'
+  nextSectionLink: 'Scroll Down'
 ---
 
 {{#extend "base"}}
   {{#content "main"}}
 
-    {{> components/hero}}
+    {{> components/hero hero=frontMatter.hero}}
 
     {{> components/introduction introduction=frontMatter.introduction}}
 

src/hbs/partials/components/hero.hbs

@@ -1,17 +1,16 @@
 <section class="section hero">
   <div class="hero__canvas"></div>
-
-  <h1 class="hero__title">
-    <div class="hero__title--upper">#ART</div>
-    <div class="hero__title--lower">PROJECT.</div>
+  <h1 class="hero__header">
+    <div class="hero__header--upper">{{ hero.header.upper }}</div>
+    <div class="hero__header--lower">{{ hero.header.lower }}</div>
   </h1>
 
   <div class="hero__counter">01 - 06</div>
 
   <div class="hero__bottom">
     <div class="hero__detail">
-      <h3 class="hero__detail__title">UPCOMING EVENTS</h3>
-      {{#each data.heroSection.events as |event|}}
+      <h3 class="hero__detail__title">{{ hero.eventsLabel }}</h3>
+      {{#each hero.events as |event|}}
         <p class="hero__detail__event">
           {{ event.text }},
           <strong class="hero__detail__city">{{ event.city }}</strong>
@@ -20,15 +19,17 @@
     </div>
 
     {{> components/button
-      label="Telegram Community"
+      label=hero.button.label
       outlineColor="#FFF"
       class="hero__button"
-      icon=(svg 'images/telegram-logo.svg' width="24px" height="24px")
+      icon=(svg hero.button.icon width="24px" height="24px")
     }}
+
+    <a href="#" class="hero__scroll">
+      {{svg 'images/arrow-down.svg' class="hero__scroll__icon"}}
+      <div class="hero__scroll__text">{{ hero.nextSectionLink }}</div>
+    </a>
+
   </div>
 
-  <!-- scroll down component -->
-
-  <!-- page counter component -->
-
 </section>

src/images/arrow-down.svg

@@ -0,0 +1,7 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="20px" height="47px">
+<path fill-rule="evenodd"  fill="currentColor"
+ d="M6.625,41.339 C7.922,43.005 8.888,44.577 9.524,46.055 L10.709,46.055 C11.516,44.354 12.560,42.705 13.840,41.107 C15.120,39.510 16.997,37.603 19.470,35.387 L19.470,33.402 C16.017,35.017 13.363,36.709 11.508,38.479 L11.508,0.495 L8.905,0.495 L8.905,38.479 C7.256,37.173 6.028,36.263 5.220,35.747 C4.413,35.232 2.987,34.468 0.943,33.454 L0.943,35.412 C3.433,37.697 5.327,39.673 6.625,41.339 Z"/>
+</svg>

src/styles/components/_hero.scss

@@ -11,24 +11,27 @@ body {
   background-color: $color-navy;
 
   &__canvas {
+    position: relative;
+    z-index: 1;
     width: 100%;
     height: 65vh;
     background-color: $color-orange;
   }
 
-  &__title {
+  &__header {
     @include heading;
     
     position: absolute;
     top: 45%;
     left: 50%;
+    z-index: 1;
     font-family: $title-font-family;
     font-size: 36px;
     transform: translate(-50%, -50%);
 
     &--lower {
       margin-top: -10px;
-      margin-left: 28px;
+      padding-left: 50px;
     }
   }
 
@@ -36,18 +39,20 @@ body {
     position: absolute;
     top: 25%;
     right: -20px;
+    z-index: 1;
     font-size: 24px;
     transform: rotate(-90deg);
   }
 
   &__button {
-    margin: 20px 0;
+    margin-top: 20px;
   }
 
   &__bottom {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
+    padding-bottom: 20px;
   }
 
   &__detail {
@@ -62,6 +67,19 @@ body {
       margin: 10px 0 0;
     }
   }
+
+  &__scroll {
+    margin: 20px auto 0;
+    font-size: 12px;
+    font-weight: 700;
+    text-align: center;
+    text-transform: uppercase;
+    cursor: pointer;
+
+    &__text {
+      margin-top: 15px;
+    }
+  }
 }
 
 @media #{$screen-sm} {
@@ -71,15 +89,19 @@ body {
       height: calc(100vh - #{$header-height--desktop * 2});
     }
 
-    &__title {
+    &__header {
       font-size: 80px;
 
       &--lower {
         margin-top: -40px;
-        margin-left: 100px;
+        padding-left: 110px;
       }
     }
 
+    &__button {
+      order: 2;
+    }
+
     &__bottom {
       align-items: center;
     }
@@ -87,7 +109,7 @@ body {
     &__detail {
       padding: 0;
 
-      &__title {
+      &__header {
         margin-bottom: 5px;
       }
 
@@ -110,8 +132,12 @@ body {
       width: 60%;
     }
 
-    &__title {
+    &__header {
       font-size: 130px;
+
+      &--lower {
+        margin-top: -60px;
+      }
     }
 
     &__bottom {
@@ -131,17 +157,37 @@ body {
       left: 70%;
       float: initial;
     }
+
+    &__scroll {
+      position: absolute;
+      bottom: 25px;
+      left: 50%;
+    }
   }
 }
 
 @media #{$screen-lg} {
   .hero {
-    &__title {
+    &__header {
+      top: 50%;
       font-size: 160px;
 
       &--lower {
-        margin-top: -60px;
-        margin-left: 8%;
+        margin-top: -80px;
+        padding-left: 8%;
+      }
+    }
+  }
+}
+
+@media #{$screen-xlg} {
+  .hero {
+    &__header {
+      font-size: 170px;
+
+      &--lower {
+        margin-top: -80px;
+        padding-left: 18%;
       }
     }
   }