Site Revamp, fixing mobile experience

Add Why page with reasons to use our product and a demo video
Add App Images
Add rawhtml shortcode

config.yml

@@ -47,8 +47,8 @@ params:
       - title: Worldwide Tracking Coverage
         icon: mouse-globe
         text: Based on the FindMy network, without the need for GPS
-        url: /signup
-        buttonText: Get Started
+        url: /blog/why
+        buttonText: Find Out More
       - title: Web Dashboard
         icon: laptop-cloud
         text: Accessible on your phone, tablet, or computer
@@ -62,23 +62,35 @@ params:
   section2:
     title: Pricing
     subtitle: Only the best for your best friend
-    features:
+    Tiles:
       - title: Hardware
-        text: $39.99, just the hardware you need, no more
         icon: hardware
+        text: $39.99, just the hardware you need, no more
+        url: /shop
+        buttonText: Buy Now
       - title: Lite Plan
-        text: $0.99/month, get all the tracking data at an affordable price
         icon: lite
+        text: $0.99/month, get all the tracking data at an affordable price
+        url: /signup
+        buttonText: Get started
       - title: Premium Plan
-        text: $2.99/month, get tracking and health statistics, without breaking the bank
         icon: full
+        text: $2.99/month, get tracking and health statistics, without breaking the bank
+        url: /signup
+        buttonText: Get started
   section3:
     title: Online Dashboard
     subtitle: Incase you don't have your phone handy
     image: dashboardMockup.png
-    buttonText: Get started
-    buttonLink: "/signup"
+    buttonText: Dashboard Guide
+    buttonLink: /docs/dashboard
   section4:
+    title: App
+    subtitle: Built for cross-platform using Flutter
+    image: appMockup.png
+    buttonText: App Guide
+    buttonLink: /docs/app
+  section5:
     title: Reviews
     subtitle: Our users love it!
     clients:
@@ -118,8 +130,8 @@ params:
       column3:
         title: "Blog"
         links:
-          - text: Latest news
-            link: /blog/latest
+          - text: Why Barkr
+            link: /blog/why
           - text: Who we are
             link: /blog/about
           - text: Contact us

content/blog/latest.md

@@ -1,4 +0,0 @@
----
-title: Latest News
-include_footer: true # or false to display the footer
----

content/blog/why.md

@@ -0,0 +1,18 @@
+---
+title: What makes Barkr Unique?
+include_footer: true # or false to display the footer
+---
+
+- Outstanding battery life and lightness
+  - We do not rely on bulky and battery-intensive GPS devices; instead we use Apple’s FindMy Network, reserving battery power for only the on-device sensors. This allows us to increase battery life and make the collar even lighter, taking a literal load off your pet’s shoulders.
+- Increased privacy
+  - All of your data is transmitted over encrypted channels and stored securely using Google’s state-of-the-art services so you can sleep safe at night knowing that no one else can track your pet. Of course, Barkr keeps your data for only as long as its necessary and not a minute more, minimizing the chance of a privacy breach.
+
+{{< rawhtml >}} <!-- markdownlint-disable MD033 -->
+<div>
+  <div style="position:relative;padding-top:56.25%;">
+    <iframe src="https://www.youtube-nocookie.com/embed/yZLlXkdaVFs" frameborder="0" allowfullscreen
+      style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
+  </div>
+</div>
+{{< /rawhtml >}} <!-- markdownlint-enable MD033 -->

content/shop.md

@@ -0,0 +1,12 @@
+---
+title: Shop
+include_footer: true # or false to display the footer
+---
+
+{{< rawhtml >}} <!-- markdownlint-disable MD033 -->
+<img class="pushed-image" src="/images/collar.jpg" alt="Smart Collar" width="400">
+<br>
+<b>Get the Barkr collar for a fixed, low price of $39.99</b>
+<br>
+<a href="/shop/collar" class="button btn-align-md accent-btn raised">Add to Cart</a>
+{{< /rawhtml >}} <!-- markdownlint-enable MD033 -->

layouts/partials/section2.html

@@ -1,33 +1,39 @@
 {{- $section2 := .Site.Params.section2 }} {{- $title := index $section2 "title"
-}} {{- $subtitle := index $section2 "subtitle" }} {{- $features := index
-$section2 "features" }}
-<section id="{{ $title }}" class="section is-medium">
+}} {{- $subtitle := index $section2 "subtitle" }} {{- $tiles := index $section2
+"tiles" }}
+<section id="{{ $title }}" class="section section-feature-grey is-medium">
   <div class="container">
-    <div class="columns">
-      <div class="column is-centered-tablet-portrait">
-        <h1 class="title section-title">{{ $title }}</h1>
+    <div class="title-wrapper has-text-centered">
+      <h2 class="title is-2">{{ $title }}</h2>
       <h3 class="subtitle is-5 is-muted">{{ $subtitle }}</h3>
-        <div class="divider"></div>
+      <div class="divider is-centered"></div>
     </div>
-      <div class="column is-7 mt-60">
-        {{- range $features }}
-        <article class="media icon-box">
-          <figure class="media-left">
-            <p class="image">
+
+    <div class="content-wrapper">
+      <div class="columns">
+        {{- range $tiles }}
+        <div class="column is-one-third">
+          <div
+            class="feature-card is-bordered has-text-centered revealOnScroll delay-1"
+            data-animation="fadeInLeft"
+          >
+            <div class="card-title">
+              <h4>{{ .title }}</h4>
+            </div>
+            <div class="card-icon">
               <img src="{{ printf "/images/illustrations/icons/%s.svg" .icon |
               relURL }}">
-            </p>
-          </figure>
-          <div class="media-content mt-50">
-            <div class="content">
-              <p>
-                <span class="icon-box-title">{{ .title }}</span>
-
-                <span class="icon-box-text">{{ .text | markdownify }}</span>
-              </p>
+            </div>
+            <div class="card-text">
+              <p>{{ .text }}</p>
+            </div>
+            <div class="card-action">
+              <a href="{{ .url }}" class="button btn-align-md accent-btn raised"
+                >{{ .buttonText }}</a
+              >
+            </div>
           </div>
         </div>
-        </article>
         {{- end }}
       </div>
     </div>

layouts/partials/section4.html

@@ -1,31 +1,30 @@
 {{- $section4 := .Site.Params.section4 }} {{- $title := index $section4 "title"
-}} {{- $subtitle := index $section4 "subtitle" }} {{- $clients := index
-$section4 "clients" }}
-<section id="{{ $title }}" class="section is-medium section-secondary">
+}} {{- $subtitle := index $section4 "subtitle" }} {{- $image := index $section4
+"image" }} {{- $buttonText := index $section4 "buttontext" }} {{- $buttonLink :=
+index $section4 "buttonlink" }}
+<section id="{{ $title }}" class="section section-feature-grey is-medium">
   <div class="container">
-    <div class="title-wrapper has-text-centered">
-      <h2 class="title is-2 light-text is-spaced">{{ $title }}</h2>
-      {{- with $subtitle }}
-      <h3 class="subtitle is-5 light-text">{{ . }}</h3>
-      {{- end }}
+    <div class="columns">
+      <div class="column is-10 is-offset-1">
+        <div class="has-text-centered">
+          <img class="pushed-image" src="{{ printf "/images/%s" $image | relURL
+          }}">
+        </div>
+      </div>
     </div>
 
-    <div class="content-wrapper">
-      <div class="columns is-vcentered">
-        {{- range $clients }}
-        <div class="column is-4">
-          <figure class="testimonial">
-            <blockquote>{{ .quote }}</blockquote>
-            <div class="author">
-              <img src="{{ printf "/images/illustrations/faces/%s.png" (string
-              .img) | relURL }}" alt=""/>
-              <h5>{{ .name }}</h5>
-              <span>{{ .job }}</span>
-            </div>
-          </figure>
-        </div>
-        {{- end }}
-      </div>
+    <div class="title-wrapper has-text-centered">
+      <h2 class="title is-2">{{ $title }}</h2>
+      <h3 class="subtitle is-5 is-muted">{{ $subtitle }}</h3>
     </div>
+
+    <p class="has-text-centered mt-20">
+      <a
+        class="button cta is-large rounded secondary-btn raised"
+        href="{{ $buttonLink }}"
+      >
+        {{ $buttonText }}
+      </a>
+    </p>
   </div>
 </section>

layouts/partials/section5.html

@@ -0,0 +1,31 @@
+{{- $section5 := .Site.Params.section5 }} {{- $title := index $section5 "title"
+}} {{- $subtitle := index $section5 "subtitle" }} {{- $clients := index
+$section5 "clients" }}
+<section id="{{ $title }}" class="section is-medium section-secondary">
+  <div class="container">
+    <div class="title-wrapper has-text-centered">
+      <h2 class="title is-2 light-text is-spaced">{{ $title }}</h2>
+      {{- with $subtitle }}
+      <h3 class="subtitle is-5 light-text">{{ . }}</h3>
+      {{- end }}
+    </div>
+
+    <div class="content-wrapper">
+      <div class="columns is-vcentered">
+        {{- range $clients }}
+        <div class="column is-4">
+          <figure class="testimonial">
+            <blockquote>{{ .quote }}</blockquote>
+            <div class="author">
+              <img src="{{ printf "/images/illustrations/faces/%s.png" (string
+              .img) | relURL }}" alt=""/>
+              <h5>{{ .name }}</h5>
+              <span>{{ .job }}</span>
+            </div>
+          </figure>
+        </div>
+        {{- end }}
+      </div>
+    </div>
+  </div>
+</section>

layouts/shortcodes/rawhtml.html

@@ -0,0 +1,2 @@
+<!-- raw html -->
+{{.Inner}}