Merge pull request #10 from wswidzinski/get-involved

Get involved

src/hbs/index.hbs

@@ -1,18 +1,6 @@
 ---
 title: 'Home'
 
-introduction:
-  header: 'Introduction —'
-  subheader: 'TrueBit, in collaboration with artist Jessica Angel, are creating an open source, massive public art installation connected to the blockchain in real time.'
-  content:
-    - 'This public structure will be the starting point for creative interactions and collaborations to happen with creatives from different parts of the world using the blockchain as a creative tool.'
-    - 'We are facing exciting times in the history of humanity, and this project will pay tribute to the greatness of this technology, while proposing a holistic approach to knowledge; where music, art, education, economics, mathematics and philosophy take place under the same roof.'
-
-  button:
-    label: 'Signup for newsletter'
-
-  nextSectionLink: 'Learn more about the project'
-
 hero:
   header:
     upper: '#Art'
@@ -27,9 +15,21 @@ hero:
     label: 'Telegram Community'
     icon: 'images/telegram-logo.svg'
   nextSectionLink: 'Scroll Down'
+  counterText: '01 - 06'
+
+introduction:
+  header: 'Introduction —'
+  subheader: '<a class="underline" href="https://truebit.io" rel="noopener" target="_blank">TrueBit</a>, in collaboration with artist <a class="underline" href="http://www.jessicaangelarts.com" rel="noopener" target="_blank">Jessica Angel</a>, are creating an open source, massive public art installation connected to the blockchain in real time.'
+  content:
+    - 'This public structure will be the starting point for creative interactions and collaborations to happen with creatives from different parts of the world using the blockchain as a creative tool.'
+    - 'We are facing exciting times in the history of humanity, and this project will pay tribute to the greatness of this technology, while proposing a holistic approach to knowledge; where music, art, education, economics, mathematics and philosophy take place under the same roof.'
+  button:
+    label: 'Signup for newsletter'
+  nextSectionLink: 'Learn more about the project ↓'
+  counterText: '02 - 06'
 
 project:
-  header: 'Project -'
+  header: 'Project —'
   subheader: 'This first art project proposes the visualization and experience of immersion inside the “dogetherium bridge”, an endeavour that TrueBit is undertaking to create a “bridge" between the Dogecoin and Ethereum blockchains.'
   content:
     - 'Using high impact, immersive and interactive art, in conjunction with the underlying coding and computational workings happening in the Doge-ETH bridge, this project aims to foster community, participation and reflections around the pioneering work in the blockchain ecosystem.'
@@ -51,15 +51,42 @@ structure:
   header: 'Structure —'
   button:
     label: 'Floor / Elevation Plans'
-    icon: 'images/telegram-logo.svg'
+    icon: 'images/file.svg'
   content:
     upper:
       - 'The starting point to conceptualize the public art structure is the Mobius bridge, a pedestrian bridge over the Avon, designed by Hakes Associates of Bristol, UK. We found this bridge to be remarkably interesting as it explores the structure of the Mobius strip, providing a connection between point A and B while maintaining a single, unified surface.'
       - 'The Mobius strip leads to the construction of a very interesting solid called the Klein Bottle. Imagine connecting the sides of a paper ring to come up with a donut shape. Similarly, imagine connecting the sides of a Mobius strip, you would end up with a Klein bottle.'
     lower:
       - 'The Klein bottle shares the same characteristics as the Mobius strip of having a unified surface. In addition, the Klein bottle provides an enclosed environment perfect for the development of a public programming schedule to take place inside of it. Hence, The public art structure will be a penetrable Klein bottle that symbolizes the bridge between the Dogecoin and Ethereum blockchains, connecting the outer side with the inner surface through the bottleneck pass way.'
-  nextSectionLink: 'Learn more about the team'
+  nextSectionLink: 'Learn more about the team ↓'
-  counter: '04 - 06'
+  counterText: '04 - 06'
+
+getInvolved:
+  header: 'Get Involved —'
+  description:
+  - 'We are looking to hear about your ideas, skills and passions. This project is about fostering collaborations with creators, thinkers, burners, makers, and people excited about technology and art. Get involved by communicating with the team (<a href="mailto:artproject@truebit.com">artproject@truebit.io</a>), sharing your vision and affiliation to these ideas. Anything counts as long as there is passion, rigor and commitment!'
+  buttons:
+    - label: 'Collaborator Guidelines'
+      icon: 'images/file.svg'
+    - label: 'Faq'
+      icon: 'images/file.svg'
+  details:
+    title: 'Some of the ideas gravitating around the project are (but not limited) to:'
+    list:
+      - 'Software development'
+      - 'People interested in connecting the art piece to the blockchain'
+      - 'Sound & light interactivity, based on transactions / blocks being created on blockchains'
+      - 'Free Form Architecture'
+      - 'Video-mapping'
+      - 'Artificial Intelligence'
+      - 'Interactive and generative art'
+      - 'Mathematics/ Geometric Computing'
+      - 'Cosmology'
+      - 'Art DAO'
+      - 'Network Topology'
+      - 'Art and culture in the blockchain space'
+  nextSectionLink: 'Learn more about our process →'
+  counterText: '06 - 06'
 
 ---
 
@@ -75,8 +102,8 @@ structure:
     {{> components/structure structure=frontMatter.structure}}
 
     {{> components/team}}
-    
+
-    {{> components/get-involved}}
+    {{> components/get-involved getInvolved=frontMatter.getInvolved}}
 
  {{/content}}
 {{/extend}}

src/hbs/partials/components/get-involved.hbs

@@ -1,3 +1,50 @@
 <section class="section get-involved">
+  <div class="get-involved__container">
 
+    {{> components/heading
+      text=getInvolved.header
+      class="get-involved__header"
+    }}
+
+    <div class="get-involved__wrapper">
+      <div class="get-involved__content">
+        <div class="get-involved__description text--medium">
+          {{{ getInvolved.description }}}
+        </div>
+
+        <div class="get-involved__buttons">
+          {{#each getInvolved.buttons as |button|}}
+            {{> components/button
+              class="get-involved__button"
+              outlineColor="#fff"
+              label=button.label
+              icon=(svg button.icon)
+            }}
+          {{/each}}
+        </div>
+      </div>
+
+      <div class="get-involved__details">
+        <div class="get-involved__details-title text--small">
+          {{ getInvolved.details.title }}
+        </div>
+
+        <ul class="get-involved__list text-small">
+          {{#each getInvolved.details.list as |listItem|}}
+            <li class="get-involved__list-item">{{ listItem }}</li>
+          {{/each}}
+        </ul>
+      </div>
+    </div>
+
+    <div class="get-involved__counter">
+      {{ getInvolved.counterText }}
+    </div>
+
+    {{> components/next-section-link
+      class="get-involved__link"
+      name=getInvolved.nextSectionLink
+    }}
+
+  </div>
 </section>

src/hbs/partials/components/hero.hbs

@@ -5,7 +5,7 @@
     <div class="hero__header--lower">{{ hero.header.lower }}</div>
   </h1>
 
-  <div class="hero__counter">01 - 06</div>
+  <div class="hero__counter">{{ hero.counterText }}</div>
 
   <div class="hero__bottom">
     <div class="hero__detail">

src/hbs/partials/components/introduction.hbs

@@ -6,34 +6,40 @@
       class="introduction__header"
     }}
 
-    <div class="introduction__subheader text--medium">
+    <div class="introduction__img">
-      {{introduction.subheader}}
+      {{svg 'images/introduction.svg' }}
-    </div>
 
-    <div class="introduction__content">
+      <div class="introduction__counter">
-      <div class="introduction__paragraph text--small">
+        {{ introduction.counterText }}
-        {{#each introduction.content as |paragraph|}}
-          <p>{{paragraph}}</p>
-        {{/each}}
-      </div>
-
-      <div class="introduction__img">
-        {{svg 'images/introduction.svg' }}
       </div>
     </div>
 
-    <div class="introduction__button">
+    <div class="introduction__wrapper">
-      {{> components/button
+      <div class="introduction__subheader text--large">
-        label=introduction.button.label
+        {{{ introduction.subheader }}}
-        outlineColor="#FFF"
+      </div>
-        backgroundColor="#000"
-      }}
-    </div>
 
-    <div class="introduction__link">
+      <div class="introduction__content">
-      <a href="#project">
+        <div class="introduction__paragraph text--small">
-        {{introduction.nextSectionLink}}
+          {{#each introduction.content as |paragraph|}}
-      </a>
+            <p>{{paragraph}}</p>
+          {{/each}}
+        </div>
+      </div>
+
+      <div class="introduction__button">
+        {{> components/button
+          label=introduction.button.label
+          outlineColor="#fff"
+          backgroundColor="#000"
+        }}
+      </div>
+
+      <div class="introduction__link">
+        <a href="#project">
+          {{ introduction.nextSectionLink }}
+        </a>
+      </div>
     </div>
   </div>
 </section>

src/hbs/partials/components/next-section-link.hbs

@@ -0,0 +1,3 @@
+<a href="{{ href }}" class="next-section-link {{class}}">
+  {{ name }}
+</a>

src/hbs/partials/components/project.hbs

@@ -8,7 +8,7 @@
     }}
 
     <div class="project__wrapper">
-      <div class="project__content">
+      <div class="project__content text--medium">
         <div class="project__subheader">{{ project.subheader }}</div>
 
         {{#each project.content as |paragraph|}}
@@ -34,9 +34,10 @@
 
     <div class="project__counter">{{ project.counterText }}</div>
 
-    <a href="#" class="project__link">
+    {{> components/next-section-link
-      {{ project.nextSectionLink }}
+      class="project__link"
-    </a>
+      name=project.nextSectionLink
+    }}
 
   </div>
 

src/hbs/partials/components/structure.hbs

@@ -13,28 +13,31 @@
           label=structure.button.label
           outlineColor="#ff3a00"
           backgroundColor="#000"
+          icon=(svg structure.button.icon)
         }}
       </div>
     </div>
+
     <div class="structure__details">
       <div class="text--small">
         {{#each structure.content.upper as |paragraph|}}
           <p>{{paragraph}}</p>
         {{/each}}
       </div>
-      <div class="text--medium">
+      <div class="text--large">
         {{#each structure.content.lower as |paragraph|}}
           <p>{{paragraph}}</p>
         {{/each}}
       </div>
 
       <div class="structure__counter">
-        {{ structure.counter }}
+        {{ structure.counterText }}
       </div>
 
-      <div class="structure__link">
+      {{> components/next-section-link
-        {{ structure.nextSectionLink }}
+        class="structure__link"
-      </div>
+        name=structure.nextSectionLink
+      }}
     </div>
   </div>
 </section>

src/styles/base/_common.scss

@@ -8,6 +8,14 @@
   }
 
   &--medium {
+    font-size: 18px;
+
+    @media #{$screen-lg} {
+      font-size: 24px;
+    }
+  }
+
+  &--large {
     font-size: 20px;
 
     @media #{$screen-xlg} {
@@ -15,3 +23,7 @@
     }
   }
 }
+
+.underline {
+  text-decoration: underline;
+}

src/styles/components/_get-involved.scss

@@ -1,3 +1,123 @@
 .get-involved {
+  display: flex;
+  align-items: center;
+  min-height: calc(100vh - #{$header-height--desktop});
+  color: $color-white;
   background-color: $color-gray;
+
+  &__container {
+    @include container;
+
+    position: relative;
+  }
+
+  &__wrapper {
+    @media #{$screen-sm} {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  &__content {
+    @media #{$screen-sm} {
+      width: 50%;
+      padding-right: 25px;
+    }
+  }
+
+  &__description {
+    font-weight: 300;
+
+    @media #{$screen-md} {
+      font-size: 24px;
+    }
+  }
+
+  &__buttons {
+    @media #{$screen-sm} {
+      display: flex;
+      flex-direction: column;
+    }
+
+    @media #{$screen-md} {
+      display: block;
+      margin-top: 20px;
+    }
+  }
+
+  &__button + &__button {
+    margin-top: 20px;
+
+    @media #{$screen-md} {
+      margin: 0 0 0 10px;
+    }
+  }
+
+  &__details {
+    max-width: 470px;
+
+    @media #{$screen-sm} {
+      width: 50%;
+    }
+  }
+
+  &__details-title {
+    font-weight: 500;
+  }
+
+  &__list {
+    margin-bottom: 20px;
+    padding-left: 10px;
+    list-style: none;
+  }
+
+  &__list-item {
+    position: relative;
+    margin: 5px 0;
+
+    &::before {
+      position: absolute;
+      top: .5em;
+      left: -.5em;
+      display: block;
+      width: 4px;
+      height: 4px;
+      border: 1px solid $color-white;
+      border-radius: 50%;
+      content: '';
+    }
+
+    @media #{$screen-sm} {
+      font-size: 18px;
+    }
+  }
+
+  &__counter {
+    font-size: 24px;
+
+    @media #{$screen-md} {
+      position: absolute;
+      top: 40px;
+      left: 700px;
+    }
+
+    @media #{$screen-lg} {
+      position: absolute;
+      top: 46px;
+      left: 800px;
+    }
+  }
+
+  &__link {
+    margin: 20px 0;
+  }
+
+  &__content,
+  &__header,
+  &__description,
+  &__button,
+  &__details,
+  &__details-title {
+    margin-top: 24px;
+  }
 }

src/styles/components/_introduction.scss

@@ -8,23 +8,54 @@
     @include container;
 
     position: relative;
+
+    @media #{$screen-sm} {
+      display: flex;
+      flex-flow: row-reverse wrap;
+    }
+
+    @media #{$screen-lg} {
+      flex-flow: row wrap;
+    }
   }
 
-  &__content {
+  &__header {
-    display: flex;
+    margin: 30px 0;
+
+    @media #{$screen-sm} {
+      flex: 0 1 100%;
+    }
+
+    @media #{$screen-lg} {
+      margin: 80px 0;
+    }
   }
 
   &__img {
-    display: none;
+    margin-bottom: 20px;
+
+    svg {
+      width: 320px;
+    }
 
     @media #{$screen-sm} {
-      display: block;
+      flex: 1 0 50%;
+      max-width: 50%;
+
+      svg {
+        width: 100%;
+      }
+    }
+
+    @media #{$screen-md} {
+      flex: initial;
+      margin-left: auto;
     }
 
     @media #{$screen-lg} {
       position: absolute;
-      top: 60px;
+      top: 10%;
-      right: 0;
+      right: 25px;
     }
 
     @media #{$screen-xlg} {
@@ -33,14 +64,37 @@
     }
   }
 
-  &__header {
+  &__counter {
-    margin: 30px 0;
+    position: absolute;
+    top: 240px;
+    right: 60px;
+    font-size: 24px;
+
+    @media #{$screen-sm} {
+      top: 280px;
+    }
 
     @media #{$screen-lg} {
-      margin: 80px 0;
+      top: 140px;
     }
   }
 
+  &__wrapper {
+    @media #{$screen-sm} {
+      flex: 1 0 50%;
+      max-width: 50%;
+    }
+  }
+
+  &__subheader {
+    position: relative;
+    z-index: 2;
+  }
+
+  &__content {
+    display: flex;
+  }
+
   &__button {
     margin-bottom: 30px;
 
@@ -50,11 +104,6 @@
     }
   }
 
-  &__subheader {
-    position: relative;
-    z-index: 2;
-  }
-
   &__link {
     font-size: 12px;
     text-transform: uppercase;

src/styles/components/_nav.scss

@@ -110,10 +110,6 @@
       transition: 0s all ease;
     }
 
-    &__item:last-child {
-      padding-right: 0;
-    }
-
     &__link::after {
       width: calc(100% - 20px);
     }

src/styles/components/_next-section-link.scss

@@ -0,0 +1,5 @@
+.next-section-link {
+  display: block;
+  font-size: 12px;
+  text-transform: uppercase;
+}

src/styles/components/_project.scss

@@ -31,7 +31,6 @@
 
   &__content {
     margin-top: 20px;
-    font-size: 18px;
     font-weight: 300;
 
     @media #{$screen-sm} {
@@ -43,10 +42,6 @@
       padding-right: 0;
       padding-left: 50px;
     }
-
-    @media #{$screen-lg} {
-      font-size: 24px;
-    }
   }
 
   &__content,
@@ -161,10 +156,7 @@
   }
 
   &__link {
-    display: block;
     margin-top: 20px;
-    font-size: 12px;
-    text-transform: uppercase;
 
     @media #{$screen-md} {
       position: absolute;

src/styles/components/_structure.scss

@@ -41,6 +41,7 @@
   }
 
   &__details {
+    padding-right: 20px;
     font-weight: 300;
     color: $color-black;
 
@@ -65,6 +66,10 @@
     }
   }
 
+  &__link {
+    margin: 20px 0;
+  }
+
   &__image {
     max-width: 100%;
     padding-bottom: 95%;

src/styles/main.scss

@@ -27,3 +27,4 @@
 @import './components/footer';
 @import './components/button';
 @import './components/heading';
+@import './components/next-section-link';