Site Revamp, fixing mobile experience

Add Why page with reasons to use our product and a demo video
Add App Images
Add rawhtml shortcode
This commit is contained in:
Aadi Desai 2022-03-01 12:49:26 +00:00
parent 2681631e40
commit 1444500b32
No known key found for this signature in database
GPG key ID: CFFFE425830EF4D9
10 changed files with 138 additions and 62 deletions

View file

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

View file

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

18
content/blog/why.md Normal file
View file

@ -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 Apples 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 pets shoulders.
- Increased privacy
- All of your data is transmitted over encrypted channels and stored securely using Googles 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 -->

12
content/shop.md Normal file
View file

@ -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 -->

View file

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

View file

@ -1,31 +1,30 @@
{{- $section4 := .Site.Params.section4 }} {{- $title := index $section4 "title" {{- $section4 := .Site.Params.section4 }} {{- $title := index $section4 "title"
}} {{- $subtitle := index $section4 "subtitle" }} {{- $clients := index }} {{- $subtitle := index $section4 "subtitle" }} {{- $image := index $section4
$section4 "clients" }} "image" }} {{- $buttonText := index $section4 "buttontext" }} {{- $buttonLink :=
<section id="{{ $title }}" class="section is-medium section-secondary"> index $section4 "buttonlink" }}
<section id="{{ $title }}" class="section section-feature-grey is-medium">
<div class="container"> <div class="container">
<div class="title-wrapper has-text-centered"> <div class="columns">
<h2 class="title is-2 light-text is-spaced">{{ $title }}</h2> <div class="column is-10 is-offset-1">
{{- with $subtitle }} <div class="has-text-centered">
<h3 class="subtitle is-5 light-text">{{ . }}</h3> <img class="pushed-image" src="{{ printf "/images/%s" $image | relURL
{{- 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> </div>
{{- end }}
</div> </div>
</div> </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> </div>
</section> </section>

View file

@ -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>

View file

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

BIN
static/images/appMockup.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
static/images/collar.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB