Logo v3.2.2
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v3.2.2
  • Docs
  • Snippets
  • Snippets
  • Introduction
  • Navbar / Heroes
  • Headers (Navbar)
  • Hero Sections
  • Foundations
  • Features
    General Stats Step Navs (Tabs)
  • Icon Blocks
  • Cards
    Grid List
  • Testimonials
  • Pricing
  • Team Sections
  • Call-to-Action (CTA)
  • Gallery
  • Clients
  • FAQ
  • Comments
  • User Profile
  • Sidebar Examples
  • Content Sections
  • Forms
  • Authentication
  • Feedback
  • Filters
  • Search
  • Subscribe
  • Contact / Footer
  • Contact Sections
  • Footer

Features: Step

Component #1

  • Preview
  • HTML
  • CSS
  • JS

A brief
history of Unify

June 2013
Our vision of a better way

We envision sales teams having the tools and talent they need to make remote work.

June 2014
Rolling up our sleeves

Research begins on refining our vision into a platform for communication and remote team management.

May 2015
Breaking ground

We hire our first team members and begin development on making our vision a reality.

March 2016
Early adoption success

Our first clients take advantage of initial features including our CRM and calling tools.

July 2018
Official beta launch

We release the Sales Marketplace, allowing clients to discover and hire directly from Overpass.

June 2020
Themes releases

Sales engagement tools expand to include native email functionality

Today Present
5 releases later...

Continuous feedback, research, and communication drive our vision for a future where remote works.

Loading...
              
                <!-- Step Features -->
                <div class="overflow-hidden">
                  <div class="container content-space-1">
                    <div class="row align-items-md-center mb-7">
                      <div class="col-md mb-3 mb-md-0">
                        <h2>A brief<br>history of Unify</h2>
                      </div>
                      <!-- End Col -->

                      <div class="col-md-auto">
                        <!-- Arrows -->
                        <div class="js-swiper-timeline-button-prev swiper-button-prev swiper-static-button-prev"></div>
                        <div class="js-swiper-timeline-button-next swiper-button-next swiper-static-button-next"></div>
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->

                    <!-- Swiper Slider -->
                    <div class="swiper-center-mode-end">
                      <div class="js-swiper-timeline swiper swiper-step">
                        <div class="swiper-wrapper">
                          <!-- Slide -->
                          <div class="swiper-slide">
                            <span class="h5 fw-normal text-body mb-0">June</span>
                            <span class="display-5 d-block text-primary">2013</span>

                            <div class="swiper-step-divider"></div>
                            
                            <h6>Our vision of a better way</h6>
                            <p>We envision sales teams having the tools and talent they need to make remote work.</p>
                          </div>
                          <!-- End Slide -->

                          <!-- Slide -->
                          <div class="swiper-slide">
                            <span class="h5 fw-normal text-body mb-0">June</span>
                            <span class="display-5 d-block text-primary">2014</span>

                            <div class="swiper-step-divider"></div>
                            
                            <h6>Rolling up our sleeves</h6>
                            <p>Research begins on refining our vision into a platform for communication and remote team management.</p>
                          </div>
                          <!-- End Slide -->

                          <!-- Slide -->
                          <div class="swiper-slide">
                            <span class="h5 fw-normal text-body mb-0">May</span>
                            <span class="display-5 d-block text-primary">2015</span>

                            <div class="swiper-step-divider"></div>
                            
                            <h6>Breaking ground</h6>
                            <p>We hire our first team members and begin development on making our vision a reality.</p>
                          </div>
                          <!-- End Slide -->

                          <!-- Slide -->
                          <div class="swiper-slide">
                            <span class="h5 fw-normal text-body mb-0">March</span>
                            <span class="display-5 d-block text-primary">2016</span>

                            <div class="swiper-step-divider"></div>
                            
                            <h6>Early adoption success</h6>
                            <p>Our first clients take advantage of initial features including our CRM and calling tools.</p>
                          </div>
                          <!-- End Slide -->

                          <!-- Slide -->
                          <div class="swiper-slide">
                            <span class="h5 fw-normal text-body mb-0">July</span>
                            <span class="display-5 d-block text-primary">2018</span>

                            <div class="swiper-step-divider"></div>
                            
                            <h6>Official beta launch</h6>
                            <p>We release the Sales Marketplace, allowing clients to discover and hire directly from Overpass.</p>
                          </div>
                          <!-- End Slide -->

                          <!-- Slide -->
                          <div class="swiper-slide">
                            <span class="h5 fw-normal text-body mb-0">June</span>
                            <span class="display-5 d-block text-primary">2020</span>

                            <div class="swiper-step-divider"></div>
                            
                            <h6>Themes releases</h6>
                            <p>Sales engagement tools expand to include native email functionality</p>
                          </div>
                          <!-- End Slide -->

                          <!-- Slide -->
                          <div class="swiper-slide">
                            <span class="h5 fw-normal text-body mb-0">Today</span>
                            <span class="display-5 d-block text-primary">Present</span>

                            <div class="swiper-step-divider"></div>
                            
                            <h6>5 releases later...</h6>
                            <p>Continuous feedback, research, and communication drive our vision for a future where remote works.</p>
                          </div>
                          <!-- End Slide -->
                        </div>

                        <!-- Preloader -->
                        <div class="js-swiper-preloader swiper-preloader">
                          <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                          </div>
                        </div>
                        <!-- End Preloader -->
                      </div>
                    </div>
                    <!-- End Swiper Slider -->
                  </div>
                </div>
                <!-- End Step Features -->
              
            
              
                <link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">
              
            
              
                <script src="../node_modules/swiper/swiper-bundle.min.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var swiper = new Swiper('.js-swiper-clients',{
                      slidesPerView: 2,
                      breakpoints: {
                        380: {
                          slidesPerView: 3,
                          spaceBetween: 15,
                        },
                        768: {
                          slidesPerView: 4,
                          spaceBetween: 15,
                        },
                        1024: {
                          slidesPerView: 5,
                          spaceBetween: 15,
                        },
                      },
                    });
                  })()
                </script>
              
            

Component #2

  • Preview
  • HTML
  • Step 1

    Find a product and make a plan

    Some product ideas come easily, while others take some work to find.

    You'll learn:
    • How to find a product
    • Understanding target audience
    • Source a product
    Explore this step
    Image Description
  • Step 3

    Test the market

    Learn how to start marketing your products so that it works for you.

    You'll learn:
    • Marketing basics
    • Different method of promotions
    • Unify site marketing setup
    Explore this step
    Image Description
  • Step 2

    Build and brand your site

    Make a good first impression to your customers

    You'll learn:
    • Naming and branding
    • Product, description and pricing
    • Walkthrough to Unify site building
    Explore this step
    Image Description
              
                <!-- Step Features -->
                <div class="container">
                  <!-- List Step -->
                  <ul class="list-unstyled list-step list-py-3 mb-0">
                    <li class="list-step-item">
                      <div class="position-relative rounded-3 py-10 px-4 px-md-10">
                        <div class="row align-items-lg-center">
                          <div class="col-lg-5 mb-7 mb-lg-0">
                            <div class="pe-lg-5">
                              <div class="mb-5">
                                <span class="text-cap text-primary">Step 1</span>
                                <h2>Find a product and make a plan</h2>
                                <p>Some product ideas come easily, while others take some work to find.</p>
                              </div>

                              <h5>You'll learn:</h5>

                              <!-- List Checked -->
                              <ul class="list-checked list-checked-primary mb-7">
                                <li class="list-checked-item">How to <span class="fw-bold">find a product</span></li>
                                <li class="list-checked-item">Understanding target audience</li>
                                <li class="list-checked-item"><span class="fw-bold">Source</span> a product</li>
                              </ul>
                              <!-- End List Checked -->

                              <a class="link link-pointer" href="#">Explore this step</a>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-lg-7">
                            <img class="img-fluid" src="../assets/img/mockups/img1.png" alt="Image Description">
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->

                        <div class="position-absolute top-0 start-0 w-100 w-lg-65 h-65 h-lg-100 bg-light rounded-3 zi-n1 ms-n5"></div>
                      </div>
                    </li>

                    <li class="list-step-item">
                      <div class="position-relative rounded-3 py-10 px-4 px-md-10">
                        <div class="row align-items-lg-center">
                          <div class="col-lg-5 mb-7 mb-lg-0">
                            <div class="pe-lg-5">
                              <div class="mb-5">
                                <span class="text-cap text-primary">Step 3</span>
                                <h2>Test the market</h2>
                                <p>Learn how to start marketing your products so that it works for you.</p>
                              </div>

                              <h5>You'll learn:</h5>

                              <!-- List Checked -->
                              <ul class="list-checked list-checked-primary mb-7">
                                <li class="list-checked-item">Marketing basics</li>
                                <li class="list-checked-item">Different method of <span class="fw-bold">promotions</span></li>
                                <li class="list-checked-item">Unify site <span class="fw-bold">marketing</span> setup</li>
                              </ul>
                              <!-- End List Checked -->

                              <a class="link link-pointer" href="#">Explore this step</a>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-lg-7">
                            <img class="img-fluid" src="../assets/img/mockups/img2.png" alt="Image Description">
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->

                        <div class="position-absolute top-0 start-0 w-100 w-lg-65 h-65 h-lg-100 bg-light rounded-3 zi-n1 ms-n5"></div>
                      </div>
                    </li>

                    <li class="list-step-item">
                      <div class="position-relative rounded-3 py-10 px-4 px-md-10">
                        <div class="row align-items-lg-center">
                          <div class="col-lg-5 mb-7 mb-lg-0">
                            <div class="pe-lg-5">
                              <div class="mb-5">
                                <span class="text-cap text-primary">Step 2</span>
                                <h2>Build and brand your site</h2>
                                <p>Make a good first impression to your customers</p>
                              </div>

                              <h5>You'll learn:</h5>

                              <!-- List Checked -->
                              <ul class="list-checked list-checked-primary mb-7">
                                <li class="list-checked-item">Naming and <span class="fw-bold">branding</span></li>
                                <li class="list-checked-item">Product, description and pricing</li>
                                <li class="list-checked-item">Walkthrough to Unify <span class="fw-bold">site building</span></li>
                              </ul>
                              <!-- End List Checked -->

                              <a class="link link-pointer" href="#">Explore this step</a>
                            </div>
                          </div>
                          <!-- End Col -->

                          <div class="col-lg-7">
                            <img class="img-fluid" src="../assets/img/mockups/img3.png" alt="Image Description">
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->

                        <div class="position-absolute top-0 start-0 w-100 w-lg-65 h-65 h-lg-100 bg-light rounded-3 zi-n1 ms-n5"></div>
                      </div>
                    </li>
                  </ul>
                  <!-- End List Step -->
                </div>
                <!-- End Step Features -->
              
            

Component #3

  • Preview
  • HTML

How we hire our team

We like to keep things as simple as possible so we can get to what's really important - finding out more about you.

  • 01. Application and recruiter screen

    The start of our application process is the same for all of our roles. We want to learn a bit about you through a casual conversation.

  • 02. First round interview

    We love connecting with people who believe they'll make a difference. At this stage, an interview will help us both decide whether the interest is mutual.

  • 03. Task or challenge

    Now it's time to apply your thinking to some real life situations. Whether it's completing a technical test, engaging in a role play or preparing a presentation to address a challenge - we want to see you in action.

  • 04. Final interview and offer

    Once you've met the team, and we've gotten to know each other, it's time for us to both decide whether we're a match.

              
                <!-- Step Features -->
                <div class="container content-space-1">
                  <!-- Heading -->
                  <div class="w-lg-65 text-center mx-lg-auto mb-5 mb-sm-7 mb-lg-10">
                    <h2>How we hire our team</h2>
                    <p>We like to keep things as simple as possible so we can get to what's really important - finding out more about you.</p>
                  </div>
                  <!-- End Heading -->

                  <div class="w-lg-75 mx-lg-auto">
                    <!-- List Timeline -->
                    <ul class="list-unstyled list-timeline list-py-3">
                      <li class="list-timeline-item">
                        <!-- Card -->
                        <div class="card card-lg">
                          <div class="card-body">
                            <!-- Media -->
                            <div class="d-flex">
                              <div class="flex-shrink-0">
                                <i class="bi-file-earmark-check text-dark fs-2"></i>
                              </div>
                              <div class="flex-grow-1 ms-4">
                                <h4 class="card-title"><span class="fs-2 text-primary">01.</span> Application and recruiter screen</h4>
                                <p class="card-text">The start of our application process is the same for all of our roles. We want to learn a bit about you through a casual conversation.</p>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </li>

                      <li class="list-timeline-item ms-auto">
                        <!-- Card -->
                        <div class="card card-lg">
                          <div class="card-body">
                            <!-- Media -->
                            <div class="d-flex">
                              <div class="flex-shrink-0">
                                <i class="bi-clock-history text-dark fs-2"></i>
                              </div>
                              <div class="flex-grow-1 ms-4">
                                <h4 class="card-title"><span class="fs-2 text-primary">02.</span> First round interview</h4>
                                <p class="card-text">We love connecting with people who believe they'll make a difference. At this stage, an interview will help us both decide whether the interest is mutual.</p>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </li>

                      <li class="list-timeline-item">
                        <!-- Card -->
                        <div class="card card-lg">
                          <div class="card-body">
                            <!-- Media -->
                            <div class="d-flex">
                              <div class="flex-shrink-0">
                                <i class="bi-pencil-square text-dark fs-2"></i>
                              </div>
                              <div class="flex-grow-1 ms-4">
                                <h4 class="card-title"><span class="fs-2 text-primary">03.</span> Task or challenge</h4>
                                <p class="card-text">Now it's time to apply your thinking to some real life situations. Whether it's completing a technical test, engaging in a role play or preparing a presentation to address a challenge - we want to see you in action.</p>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </li>

                      <li class="list-timeline-item ms-auto">
                        <!-- Card -->
                        <div class="card card-lg">
                          <div class="card-body">
                            <!-- Media -->
                            <div class="d-flex">
                              <div class="flex-shrink-0">
                                <i class="bi-hand-thumbs-up text-dark fs-2"></i>
                              </div>
                              <div class="flex-grow-1 ms-4">
                                <h4 class="card-title"><span class="fs-2 text-primary">04.</span> Final interview and offer</h4>
                                <p class="card-text">Once you've met the team, and we've gotten to know each other, it's time for us to both decide whether we're a match.</p>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </li>
                    </ul>
                    <!-- End List Timeline -->
                  </div>
                </div>
                <!-- End Step Features -->