feature the new v3 board on landing page

shanteacontrols · Jun 21, 2022 · 707c0b2 · 707c0b2
1 parent a38a81a
commit 707c0b2
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 37 deletions.
diff --git a/_config.yml b/_config.yml
@@ -94,8 +94,8 @@ blog-desc: Shantea Controls Blog
 
 # Focus Buttons
 header-focus-button:
-  title: Sold out!
-  url: https://www.tindie.com/products/paradajz/opendeck-diy-midi-platform/
+  title: Buy now
+  url: https://www.tindie.com/products/paradajz/opendeck-diy-midi-platform-v3/
 
 # Secondary Buttons
 header-secondary-button:
@@ -153,8 +153,8 @@ features:
   description: Easily add support for yours!
   icon: pe-7s-smile
 
-- title: Battle proven
-  description: Running inside custom controllers for world-class musicians.
+- title: BLE MIDI
+  description: Bluetooth Low Energy MIDI available on selected boards.
   icon: pe-7s-smile
 
 - title: Inputs
@@ -354,63 +354,79 @@ boards:
 - title: Nordic Semiconductor nRF52840DK
   image: nRF52840_dk.jpg
 
-#####################################
-##########  Core Features  ##########
-#####################################
-core-title: Official board specifications
-core-description: Loaded with I/O in compact form. 10cm x 10cm. Small, medium or large size project, OpenDeck board has you covered.
-
-#
-# Core Features Left
-#
-core-features-left:
+core-title-od2: OpenDeck board v2 specifications
+core-description-od2: Loaded with I/O in compact form. 10cm x 10cm. Small, medium or large size project, OpenDeck board has you covered.
 
-# Feature
+core-features-left-od2:
 - name: Digital inputs
   description: 64 inputs for buttons or 32 for encoders
   icon: pe-7s-power
 
-# Feature
 - name: Outputs
   description: 48 single color-LEDs or 16 RGB LEDs
   icon: pe-7s-light
 
-# Feature
 - name: DMX output
   description: Open Lighting Architecture compatible
   icon: pe-7s-network
 
-# Feature
 - name: UART
   description: Support for any Nextion and Stone HMI screen
   icon: pe-7s-crop
 
-#
-# Core Features Right
-#
-core-features-right:
-
-# Feature
+core-features-right-od2:
 - name: Analog inputs
   description: 32 inputs with support for buttons
   icon: pe-7s-edit
 
-# Feature
 - name: USB MIDI
   description: Class compliant. No drivers required.
   icon: pe-7s-usb
 
-# Feature
 - name: DIN MIDI
   description: In and out
   icon: pe-7s-musiclist
 
-# Feature
 - name: I2C for OLED display
   description: SSD1306 controller support
   icon: pe-7s-monitor
 
+core-title-od3: OpenDeck board v3 specifications
+core-description-od3: For that extra push over the cliff. Now with Bluetooth support.
+
+core-features-left-od3:
+- name: Digital inputs
+  description: 128 inputs for buttons or 64 for encoders
+  icon: pe-7s-power
+
+- name: Outputs
+  description: 64 single color-LEDs or 21 RGB LEDs
+  icon: pe-7s-light
+
+- name: DMX output
+  description: Open Lighting Architecture compatible
+  icon: pe-7s-network
 
+- name: UART
+  description: Support for any Nextion and Stone HMI screen
+  icon: pe-7s-crop
+
+core-features-right-od3:
+- name: Analog inputs
+  description: 64 inputs with support for buttons
+  icon: pe-7s-edit
+
+- name: USB MIDI
+  description: Class compliant. No drivers required.
+  icon: pe-7s-usb
+
+- name: DIN MIDI
+  description: In and out
+  icon: pe-7s-musiclist
+
+- name: I2C for OLED display
+  description: SSD1306 controller support
+  icon: pe-7s-monitor
 
 
 #####################################

diff --git a/_includes/header-landing.html b/_includes/header-landing.html
@@ -4,7 +4,7 @@
   <!-- Parallax Header Image -->
   <div class="parallax-wrapper">
     <div class="cover" data-scrollax="properties: { 'translateY': '50%' }">
-      <img style="filter: brightness(80%);" src="{{ site.baseurl }}/images/header-image.png"/>
+      <img style="filter: brightness(80%);" src="{{ site.baseurl }}/images/opendeck3-header.png"/>
     </div>
   </div>
 
@@ -64,7 +64,8 @@
 
         <!-- Header Buttons -->
         <div class="row buttons-header">
-          <div class="btn btn-lg btn-default"><a href="{{ site.header-secondary-button.url }}" target="_blank" class="button-cta">{{ site.header-secondary-button.title }}</a></div>
+          <div class="col-lg-3 col-lg-push-3 col-md-4 col-md-push-2 col-sm-8 col-sm-push-2 col-xs-10 col-xs-push-1"><a href="{{ site.header-focus-button.url }}" target="_blank" class="button-cta button-focus">{{ site.header-focus-button.title }}</a></div>
+          <div class="col-lg-3 col-lg-push-3 col-md-4 col-md-push-2 col-sm-8 col-sm-push-2 col-xs-10 col-xs-push-1"><a href="{{ site.header-secondary-button.url }}" target="_blank" class="button-cta">{{ site.header-secondary-button.title }}</a></div>
         </div>
 
       </div>

diff --git a/_includes/sections/about.html b/_includes/sections/about.html
@@ -17,7 +17,7 @@ <h2>{{ site.about-title }}</h2>
       </div>
 
       <div class="cover" >
-        <img src="{{ site.baseurl }}/images/opendeck2.png"/>
+        <img src="{{ site.baseurl }}/images/opendeck3-info.png"/>
       </div>
 
     </div>

diff --git a/_includes/sections/parallax-features.html → _includes/sections/opendeck2-features.html b/_includes/sections/parallax-features.html → _includes/sections/opendeck2-features.html
@@ -3,7 +3,7 @@
 
   <!-- Parallax Image -->
   <div class="cover" data-scrollax="properties: { 'translateY': '50%' }">
-    <img style="filter: brightness(50%);" src="{{ site.baseurl }}/images/features-image.png" alt="Parallax Features" />
+    <img style="filter: brightness(30%);" src="{{ site.baseurl }}/images/features-image.png" alt="Parallax Features" />
   </div>
 
   <div class="container">
@@ -13,13 +13,13 @@
 
       <!-- Section Header -->
       <header class="col-md-8 col-md-push-2 col-sm-12 section-header">
-        <h2>{{ site.core-title }}</h2>
+        <h2>{{ site.core-title-od2 }}</h2>
         <hr class="normal">
       </header>
 
       <!-- Section Content -->
       <div class="col-md-8 col-md-push-2 col-sm-12 section-content">
-        <p>{{ site.core-description }}</p>
+        <p>{{ site.core-description-od2 }}</p>
       </div>
 
     </div>
@@ -29,7 +29,7 @@ <h2>{{ site.core-title }}</h2>
 
       <div class="col-md-4 col-sm-6 text-right">
 
-        {% for feature in site.core-features-left %}
+        {% for feature in site.core-features-left-od2 %}
 
         <div class="feature">
           <div class="text-wrap">
@@ -52,7 +52,7 @@ <h3>{{ feature.name }}</h3>
 
       <div class="col-md-4 col-sm-6 text-left">
 
-        {% for feature in site.core-features-right %}
+        {% for feature in site.core-features-right-od2 %}
 
         <div class="feature">
           <div class="text-wrap">

diff --git a/_includes/sections/opendeck3-features.html b/_includes/sections/opendeck3-features.html
@@ -0,0 +1,76 @@
+<!-- Parallax Section -->
+<section class="site-section parallax-features-section parallax" id="parallax-features" data-scrollax-parent="true">
+
+  <!-- Parallax Image -->
+  <div class="cover" data-scrollax="properties: { 'translateY': '50%' }">
+    <img style="filter: brightness(30%);" src="{{ site.baseurl }}/images/opendeck3-header.png" alt="Parallax Features" />
+  </div>
+
+  <div class="container">
+
+    <!-- Section Heading -->
+    <div class="row text-center">
+
+      <!-- Section Header -->
+      <header class="col-md-8 col-md-push-2 col-sm-12 section-header">
+        <h2>{{ site.core-title-od3 }}</h2>
+        <hr class="normal">
+      </header>
+
+      <!-- Section Content -->
+      <div class="col-md-8 col-md-push-2 col-sm-12 section-content">
+        <p>{{ site.core-description-od3 }}</p>
+      </div>
+
+    </div>
+
+    <!-- Section Features -->
+    <div class="row section-features">
+
+      <div class="col-md-4 col-sm-6 text-right">
+
+        {% for feature in site.core-features-left-od3 %}
+
+        <div class="feature">
+          <div class="text-wrap">
+            <h3>{{ feature.name }}</h3>
+            <p>{{ feature.description }}</p>
+          </div>
+          <div class="icon-wrap">
+            <div class="circle parent">
+              <i class="{{ feature.icon }} child-center"></i>
+            </div>
+          </div>
+        </div>
+
+        {% endfor %}
+
+      </div>
+
+      <div class="col-md-4 phone">
+      </div>
+
+      <div class="col-md-4 col-sm-6 text-left">
+
+        {% for feature in site.core-features-right-od3 %}
+
+        <div class="feature">
+          <div class="text-wrap">
+            <h3>{{ feature.name }}</h3>
+            <p>{{ feature.description }}</p>
+          </div>
+          <div class="icon-wrap">
+            <div class="circle parent">
+              <i class="{{ feature.icon }} child-center"></i>
+            </div>
+          </div>
+        </div>
+
+        {% endfor %}
+
+      </div>
+
+    </div>
+
+  </div>
+</section>
diff --git a/_scss/landing/layout/_header.scss b/_scss/landing/layout/_header.scss
@@ -147,6 +147,10 @@ header.site-header {
       .buttons-header {
         margin-top: 50px;
       }
+
+      .button-cta {
+        width: 100%;
+      }
     }
   }
 

diff --git a/images/opendeck3-header.png b/images/opendeck3-header.png
diff --git a/images/opendeck3-info.png b/images/opendeck3-info.png
diff --git a/index.html b/index.html
@@ -12,9 +12,13 @@
 
 {% include sections/features.html %}
 
-{% include sections/parallax-features.html %}
+{% include sections/opendeck2-features.html %}
 
-{% include sections/offer.html offer-text="Official board is sold out!" offer-link="https://www.tindie.com/products/paradajz/opendeck-diy-midi-platform/" button-text="Tindie store" %}
+{% include sections/offer.html offer-text="v2 board is sold out!" offer-link="https://www.tindie.com/products/paradajz/opendeck-diy-midi-platform/" button-text="Tindie store" %}
+
+{% include sections/opendeck3-features.html %}
+
+{% include sections/offer.html offer-text="v3 available on Tindie" offer-link="https://www.tindie.com/products/paradajz/opendeck-diy-midi-platform-v3/" button-text="Tindie store" %}
 
 {% include sections/supported-boards.html %}
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,7 +17,7 @@ <h2>{{ site.about-title }}</h2> @@
           </div>
           <div class="cover" >
-            <img src="{{ site.baseurl }}/images/opendeck2.png"/>
+            <img src="{{ site.baseurl }}/images/opendeck3-info.png"/>
           </div>
         </div>
@@ Expand Down @@