---
layout: default
title: Product
---

<div class="hero product-hero is-fullheight is-default is-bold">
  {{> navbar-fade-commerce}}

  <!-- Hero image -->
  <div id="main-hero" class="hero-body">
    <div class="container has-text-centered">
      <div class="columns is-vcentered">
        <div class="column is-5 is-offset-1 signup-column has-text-left">
          <h1 class="title dark-text text-bold is-bigger">
            Meet the New Sound Killer.
          </h1>
          <h2 class="subtitle is-5 no-margin-bottom body-color">
            Beats' first on-ear headphones with active noise cancellation. The
            Solo Pros analyze ambient noise with their built-in microphones and
            cancel out the clamor of city streets and the low rumble of a subway
            or plane.
          </h2>
          <div class="buttons mt-20">
            <a
              href="#"
              class="button button-cta btn-align is-bold primary-btn"
            >
              Buy Now
            </a>
            <a href="#" class="button button-cta btn-align is-bold light-btn">
              Features
            </a>
          </div>
        </div>
        <div class="column is-7">
          <!-- Hero mockup -->
          <img
            class="product-mockup"
            src="http://via.placeholder.com/438x585"
            data-demo-src="assets/img/demo/products/headphones-white.jpg"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>

  <!-- Clients -->
  <div class="hero-foot">
    <div class="container">
      <div class="tabs partner-tabs is-centered">
        <ul>
          <li>
            <a
              ><img
                class="partner-logo"
                src="assets/img/logos/custom/covenant.svg"
                alt=""
            /></a>
          </li>
          <li>
            <a
              ><img
                class="partner-logo"
                src="assets/img/logos/custom//infinite.svg"
                alt=""
            /></a>
          </li>
          <li>
            <a
              ><img
                class="partner-logo"
                src="assets/img/logos/custom/phasekit.svg"
                alt=""
            /></a>
          </li>
          <li>
            <a
              ><img
                class="partner-logo"
                src="assets/img/logos/custom/grubspot.svg"
                alt=""
            /></a>
          </li>
          <li>
            <a
              ><img
                class="partner-logo"
                src="assets/img/logos/custom/gutwork.svg"
                alt=""
            /></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Features section -->
<div class="section">
  <div class="container">
    <div class="content-wrapper">
      <div class="columns is-vcentered pb-40 pt-40">
        <div class="column is-4 is-offset-1">
          <!-- Title -->
          <div class="title quick-feature is-bigger text-bold">
            <div>Headphones of the future</div>
          </div>
          <span class="body-text"
            >Lorem ipsum dolor sit amet, clita laoreet ne cum. His cu harum
            inermis iudicabit. Ex vidit fierent hendrerit eum, sed stet
            periculis ut.</span
          >
          <div class="pt-10 pb-10">
            <a href="#" class="button btn-align btn-more is-link color-primary">
              Learn more <i class="sl sl-icon-arrow-right"></i>
            </a>
          </div>
        </div>
        <div class="column is-6 is-offset-1">
          <img
            class="featured-image-medium"
            src="http://via.placeholder.com/480x480"
            data-demo-src="assets/img/demo/products/headphones-float.png"
            alt=""
          />
        </div>
      </div>

      <div class="columns is-vcentered pb-40 pt-40">
        <!-- This column will display only on mobile -->
        <div class="column is-4 is-offset-1 is-hidden-tablet is-hidden-desktop">
          <!-- Title -->
          <div class="title quick-feature is-bigger text-bold">
            <h2>Incredible Earbuds</h2>
          </div>
          <span class="body-text"
            >Lorem ipsum dolor sit amet, clita laoreet ne cum. His cu harum
            inermis iudicabit. Ex vidit fierent hendrerit eum, sed stet
            periculis ut.</span
          >
          <div class="pt-10 pb-10">
            <a href="#" class="button btn-align btn-more is-link color-primary">
              Learn more <i class="sl sl-icon-arrow-right"></i>
            </a>
          </div>
        </div>
        <!-- /so the original floww is kept -->
        <div class="column is-6">
          <img
            class="featured-image-medium"
            src="http://via.placeholder.com/480x480"
            data-demo-src="assets/img/demo/products/buds.png"
            alt=""
          />
        </div>
        <!-- This column will display only on desktop and tablet landscape resolutions -->
        <div class="column is-4 is-offset-1 is-hidden-mobile">
          <!-- Title -->
          <div class="title quick-feature is-bigger text-bold">
            <h2>Incredible Earbuds</h2>
          </div>
          <span class="body-text"
            >Lorem ipsum dolor sit amet, clita laoreet ne cum. His cu harum
            inermis iudicabit. Ex vidit fierent hendrerit eum, sed stet
            periculis ut.</span
          >
          <div class="pt-10 pb-10">
            <a href="#" class="button btn-align btn-more is-link color-primary">
              Learn more <i class="sl sl-icon-arrow-right"></i>
            </a>
          </div>
        </div>
        <!-- /so the original flow is kept -->
      </div>

      <div class="columns is-vcentered pb-40 pt-40">
        <div class="column is-4 is-offset-1">
          <!-- Title -->
          <div class="title quick-feature is-bigger text-bold">
            <h2>Robust and Strong cables</h2>
          </div>
          <span class="body-text"
            >Lorem ipsum dolor sit amet, clita laoreet ne cum. His cu harum
            inermis iudicabit. Ex vidit fierent hendrerit eum, sed stet
            periculis ut.</span
          >
          <div class="pt-10 pb-10">
            <a href="#" class="button btn-align btn-more is-link color-primary">
              Learn more <i class="sl sl-icon-arrow-right"></i>
            </a>
          </div>
        </div>
        <div class="column is-6 is-offset-1">
          <img
            class="featured-image-medium"
            src="http://via.placeholder.com/480x480"
            data-demo-src="assets/img/demo/products/headphone-cables.png"
            alt=""
          />
        </div>
      </div>

      <div class="content-wrapper pb-80">
        <div class="columns is-vcentered is-multiline has-text-centered">
          <!-- Icon block -->
          <div class="column is-3">
            <div class="wavy-icon-box">
              <div class="is-icon-reveal">
                <i class="im im-icon-Hipster-Headphones"></i>
              </div>
              <div class="box-title">Robust Materials</div>
              <p class="box-content is-tablet-padded">
                Lorem ipsum dolor sit amet, eam ex probo tation tractatos. Ut
                vel hinc solet.
              </p>
            </div>
          </div>
          <!-- Icon block -->
          <div class="column is-3">
            <div class="wavy-icon-box">
              <div class="is-icon-reveal">
                <i class="im im-icon-Casette-Tape"></i>
              </div>
              <div class="box-title">Vintage Sound</div>
              <p class="box-content is-tablet-padded">
                Lorem ipsum dolor sit amet, eam ex probo tation tractatos. Ut
                vel hinc solet.
              </p>
            </div>
          </div>
          <!-- Icon block -->
          <div class="column is-3">
            <div class="wavy-icon-box">
              <div class="is-icon-reveal">
                <i class="im im-icon-Earphones-2"></i>
              </div>
              <div class="box-title">Bud Switch</div>
              <p class="box-content is-tablet-padded">
                Lorem ipsum dolor sit amet, eam ex probo tation tractatos. Ut
                vel hinc solet.
              </p>
            </div>
          </div>
          <!-- Icon block -->
          <div class="column is-3">
            <div class="wavy-icon-box">
              <div class="is-icon-reveal">
                <i class="im im-icon-Play-Music"></i>
              </div>
              <div class="box-title">Wireless Controls</div>
              <p class="box-content is-tablet-padded">
                Lorem ipsum dolor sit amet, eam ex probo tation tractatos. Ut
                vel hinc solet.
              </p>
            </div>
          </div>
          <!-- Icon block -->
          <div class="column is-3">
            <div class="wavy-icon-box">
              <div class="is-icon-reveal">
                <i class="im im-icon-Magnet"></i>
              </div>
              <div class="box-title">Sharp Magnet</div>
              <p class="box-content is-tablet-padded">
                Lorem ipsum dolor sit amet, eam ex probo tation tractatos. Ut
                vel hinc solet.
              </p>
            </div>
          </div>
          <!-- Icon block -->
          <div class="column is-3">
            <div class="wavy-icon-box">
              <div class="is-icon-reveal">
                <i class="im im-icon-Sound-Wave"></i>
              </div>
              <div class="box-title">Audio Compression</div>
              <p class="box-content is-tablet-padded">
                Lorem ipsum dolor sit amet, eam ex probo tation tractatos. Ut
                vel hinc solet.
              </p>
            </div>
          </div>
          <!-- Icon block -->
          <div class="column is-3">
            <div class="wavy-icon-box">
              <div class="is-icon-reveal">
                <i class="im im-icon-Microphone-4"></i>
              </div>
              <div class="box-title">Ghost Mic</div>
              <p class="box-content is-tablet-padded">
                Lorem ipsum dolor sit amet, eam ex probo tation tractatos. Ut
                vel hinc solet.
              </p>
            </div>
          </div>
          <!-- Icon block -->
          <div class="column is-3">
            <div class="wavy-icon-box">
              <div class="is-icon-reveal">
                <i class="im im-icon-Mixer"></i>
              </div>
              <div class="box-title">Audio Presets</div>
              <p class="box-content is-tablet-padded">
                Lorem ipsum dolor sit amet, eam ex probo tation tractatos. Ut
                vel hinc solet.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="gallery-wrapper">
  <div class="gallery">
    <a href="#"
      ><img
        src="http://via.placeholder.com/700x700"
        data-demo-src="assets/img/demo/products/gallery-1.jpg"
        alt=""
    /></a>
    <a href="#"
      ><img
        src="http://via.placeholder.com/585x390"
        data-demo-src="assets/img/demo/products/gallery-2.jpg"
        alt=""
    /></a>
    <a href="#"
      ><img
        src="http://via.placeholder.com/850x680"
        data-demo-src="assets/img/demo/products/gallery-3.jpg"
        alt=""
    /></a>
    <a href="#"
      ><img
        src="http://via.placeholder.com/500x500"
        data-demo-src="assets/img/demo/products/gallery-4.jpg"
        alt=""
    /></a>
    <a href="#">
      <img
        src="http://via.placeholder.com/500x500"
        data-demo-src="assets/img/demo/products/gallery-5.jpg"
        alt=""
    /></a>
    <a href="#"
      ><img
        src="http://via.placeholder.com/500x500"
        data-demo-src="assets/img/demo/products/gallery-6.jpg"
        alt=""
    /></a>
  </div>
</section>

<!-- Parallax-->
<div
  class="section is-medium parallax is-cover is-relative"
  data-background="https://via.placeholder.com/1920x1280"
  data-color="#1c242e"
  data-color-opacity="0.7"
  data-demo-background="assets/img/demo/products/product-banner.jpg"
>
  <div class="container">
    <div class="py-6">
      <div class="has-text-centered py-6 max-w-center max-w-740">
        <h1 class="title is-light text-bold is-bigger">People don't Listen.</h1>
        <h2 class="subtitle is-5 no-margin-bottom is-light">
          Beats' first on-ear headphones with active noise cancellation. The
          Solo Pros analyze ambient noise with their built-in microphones and
          cancel out the clamor of city streets and the low rumble of a subway
          or plane.
        </h2>
        <div class="buttons is-centered mt-20">
          <a
            href="#product"
            class="button button-cta btn-align is-bold primary-btn"
          >
            Buy Now
          </a>
          <a href="#" class="button button-cta btn-align is-bold light-btn">
            Features
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!--Footer-->
{{> footer-spaced-light}}