---
layout: landing
title: Features
---

<!-- Hero and Navbar -->
<div
  class="
    hero
    is-app-grey is-fullheight
    has-animated-waves
    waves-bottom waves-primary
  "
>
  {{> animated-waves}}

  <!-- Navbar partial -->
  {{> navbar-double-dark-kit5}}

  <!-- Hero content -->
  <div class="hero-body">
    <div class="container">
      <div class="columns is-vcentered">
        <div class="column is-5 has-text-centered-mobile">
          <h1 class="title is-1 is-medium">Collaborate.</h1>
          <h2 class="subtitle is-4">
            Don't struggle anymore to get things done.
          </h2>
          <p class="">
            <a
              href="#"
              class="button button-cta is-bold btn-align primary-btn raised"
            >
              Get Started
            </a>
          </p>
        </div>
        <div class="column is-7">
          <figure class="hero-app">
            <img src="assets/img/graphics/legacy/project-app.png" alt="" />
          </figure>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Blue Section -->
<div
  class="
    section section-primary
    is-medium
    has-background-image
    is-contain
    has-pseudo-lines
  "
  data-background="assets/img/graphics/legacy/circles-and-shapes-w.png"
>
  <div class="container">
    <!-- Title -->
    <div class="section-title-wrapper has-text-centered">
      <div class="special-divider is-inverted">
        <span></span>
        <span></span>
      </div>
      <h2 class="title is-2 light-text">Multi Platform.</h2>
      <h4 class="subtitle is-4 light-text">All in one Collaboration.</h4>
    </div>
    <!-- Content -->
    <div class="content-wrapper">
      <div class="columns is-vcentered">
        <div class="column is-6 is-offset-3 has-text-centered">
          <img
            class="featured-image"
            src="assets/img/graphics/legacy/platform-cards.svg"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Feature Section -->
<div class="section section-feature-grey is-medium has-pseudo-lines">
  <div class="container">
    <div class="content-wrapper">
      <!-- Feature -->
      <div class="columns is-vcentered">
        <div class="column is-7 has-text-centered">
          <img
            class="featured-svg"
            src="assets/img/graphics/widgets/mini-widget-4-core.png"
            data-base-url="assets/img/graphics/widgets/mini-widget-4"
            data-extension=".png"
            alt=""
          />
        </div>

        <div class="column is-5">
          <h3 class="detailed-feature-subtitle">Accounting</h3>
          <h2 class="title is-3 no-margin">Built in Report Tools</h2>
          <div class="title-divider"></div>
          <span class="section-feature-description"
            >Lorem ipsum dolor sit amet, clita laoreet ne cum. His cu harum
            inermis iudicabit. Ex vidit fierent hendrerit eum, sed stet
            periculis ut. Vis in probo decore labitur.</span
          >
          <div class="pt-10 pb-10">
            <a href="#" class="button btn-align btn-more is-link color-primary">
              Learn more about this <i class="sl sl-icon-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Feature Section -->
<div class="section is-medium has-pseudo-lines">
  <div class="container">
    <div class="content-wrapper">
      <!-- Feature -->
      <div class="columns is-vcentered">
        <div
          class="
            column
            is-7
            has-text-centered
            is-hidden-tablet is-hidden-desktop
          "
        >
          <img
            class="featured-svg"
            src="assets/img/graphics/widgets/mini-widget-5-core.png"
            data-base-url="assets/img/graphics/widgets/mini-widget-5"
            data-extension=".png"
            alt=""
          />
        </div>

        <div class="column is-5 has-text-right">
          <h3 class="detailed-feature-subtitle">Accounting</h3>
          <h2 class="title is-3 no-margin">Live Dashboard</h2>
          <div class="title-divider is-right"></div>
          <span class="section-feature-description"
            >Lorem ipsum dolor sit amet, clita laoreet ne cum. His cu harum
            inermis iudicabit. Ex vidit fierent hendrerit eum, sed stet
            periculis ut. Vis in probo decore labitur.</span
          >
          <div class="pt-10 pb-10">
            <a href="#" class="button btn-align btn-more is-link color-primary">
              Learn more about this <i class="sl sl-icon-arrow-right"></i>
            </a>
          </div>
        </div>

        <div class="column is-7 has-text-centered is-hidden-mobile">
          <img
            class="featured-svg"
            src="assets/img/graphics/widgets/mini-widget-5-core.png"
            data-base-url="assets/img/graphics/widgets/mini-widget-5"
            data-extension=".png"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Feature Section -->
<div class="section section-feature-grey is-medium has-pseudo-lines">
  <div class="container">
    <div class="content-wrapper">
      <!-- Feature -->
      <div class="columns is-vcentered">
        <div class="column is-7 has-text-centered">
          <img
            class="featured-svg"
            src="assets/img/graphics/legacy/project-app-projects.png"
            alt=""
          />
        </div>

        <div class="column is-5">
          <h3 class="detailed-feature-subtitle">Projects</h3>
          <h2 class="title is-3 no-margin">Manage Projects</h2>
          <div class="title-divider"></div>
          <span class="section-feature-description"
            >Lorem ipsum dolor sit amet, clita laoreet ne cum. His cu harum
            inermis iudicabit. Ex vidit fierent hendrerit eum, sed stet
            periculis ut. Vis in probo decore labitur.</span
          >
          <div class="pt-10 pb-10">
            <a href="#" class="button btn-align btn-more is-link color-primary">
              Learn more about this <i class="sl sl-icon-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Feature Section -->
<div class="section is-medium has-pseudo-lines">
  <div class="container">
    <div class="content-wrapper">
      <!-- Feature -->
      <div class="columns is-vcentered">
        <div
          class="
            column
            is-7
            has-text-centered
            is-hidden-tablet is-hidden-desktop
          "
        >
          <img
            class="featured-svg"
            src="assets/img/graphics/legacy/project-app-feed.png"
            alt=""
          />
        </div>

        <div class="column is-5 has-text-right">
          <h3 class="detailed-feature-subtitle">Collaboration</h3>
          <h2 class="title is-3 no-margin">Manage Team</h2>
          <div class="title-divider is-right"></div>
          <span class="section-feature-description"
            >Lorem ipsum dolor sit amet, clita laoreet ne cum. His cu harum
            inermis iudicabit. Ex vidit fierent hendrerit eum, sed stet
            periculis ut. Vis in probo decore labitur.</span
          >
          <div class="pt-10 pb-10">
            <a href="#" class="button btn-align btn-more is-link color-primary">
              Learn more about this <i class="sl sl-icon-arrow-right"></i>
            </a>
          </div>
        </div>

        <div class="column is-7 has-text-centered is-hidden-mobile">
          <img
            class="featured-svg"
            src="assets/img/graphics/legacy/project-app-feed.png"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Feature Section -->
<div class="section section-feature-grey is-medium has-pseudo-lines">
  <div class="container">
    <div class="content-wrapper">
      <!-- Feature -->
      <div class="columns is-vcentered">
        <div class="column is-7 has-text-centered">
          <img
            class="featured-svg"
            src="assets/img/graphics/legacy/project-app-versions.png"
            alt=""
          />
        </div>

        <div class="column is-5">
          <h3 class="detailed-feature-subtitle">Documents</h3>
          <h2 class="title is-3 no-margin">Version Control</h2>
          <div class="title-divider"></div>
          <span class="section-feature-description"
            >Lorem ipsum dolor sit amet, clita laoreet ne cum. His cu harum
            inermis iudicabit. Ex vidit fierent hendrerit eum, sed stet
            periculis ut. Vis in probo decore labitur.</span
          >
          <div class="pt-10 pb-10">
            <a
              href="#"
              class="button btn-align btn-more is-link color-secondary"
            >
              Learn more about this <i class="sl sl-icon-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Feature Section -->
<div class="section is-medium has-pseudo-lines">
  <div class="container">
    <div class="content-wrapper">
      <!-- Feature -->
      <div class="columns is-vcentered">
        <div
          class="
            column
            is-7
            has-text-centered
            is-hidden-tablet is-hidden-desktop
          "
        >
          <img
            class="featured-svg"
            src="assets/img/graphics/legacy/integrations.svg"
            alt=""
          />
        </div>

        <div class="column is-5 has-text-right">
          <h3 class="detailed-feature-subtitle">Consumer Api</h3>
          <h2 class="title is-3 no-margin">Integration channels</h2>
          <div class="title-divider is-right"></div>
          <span class="section-feature-description"
            >Lorem ipsum dolor sit amet, clita laoreet ne cum. His cu harum
            inermis iudicabit. Ex vidit fierent hendrerit eum, sed stet
            periculis ut. Vis in probo decore labitur.</span
          >
          <div class="pt-10 pb-10">
            <a
              href="#"
              class="button btn-align btn-more is-link color-secondary"
            >
              Learn more about this <i class="sl sl-icon-arrow-right"></i>
            </a>
          </div>
        </div>

        <div class="column is-7 has-text-centered is-hidden-mobile">
          <img
            class="featured-svg"
            src="assets/img/graphics/legacy/integrations.svg"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Clients Section -->
<div
  class="
    section
    is-medium
    no-line-bottom
    has-animated-waves
    waves-bottom waves-primary
    has-pseudo-lines
  "
>
  {{> animated-waves}}

  <div class="container">
    <div class="content-wrapper huge-pb">
      <!-- Clients grid -->
      <div class="grid-clients three-grid">
        <div class="columns is-vcentered">
          <div class="column"></div>
          <!-- Client -->
          <div class="column">
            <a
              ><img
                class="client"
                src="assets/img/logos/custom/phasekit-dark.svg"
                alt=""
            /></a>
          </div>
          <!-- Client -->
          <div class="column">
            <a
              ><img
                class="client"
                src="assets/img/logos/custom/proactive-dark.svg"
                alt=""
            /></a>
          </div>
          <!-- Client -->
          <div class="column">
            <a
              ><img
                class="client"
                src="assets/img/logos/custom/grubspot-dark.svg"
                alt=""
            /></a>
          </div>
          <div class="column"></div>
        </div>
        <div class="columns is-vcentered is-separator">
          <div class="column"></div>
          <!-- Client -->
          <div class="column">
            <a
              ><img
                class="client"
                src="assets/img/logos/custom/tribe-dark.svg"
                alt=""
            /></a>
          </div>
          <!-- Client -->
          <div class="column">
            <a
              ><img
                class="client"
                src="assets/img/logos/custom/kromo-dark.svg"
                alt=""
            /></a>
          </div>
          <!-- Client -->
          <div class="column">
            <a
              ><img
                class="client"
                src="assets/img/logos/custom/covenant-dark.svg"
                alt=""
            /></a>
          </div>
          <div class="column"></div>
        </div>
        <div class="columns is-vcentered is-separator">
          <div class="column"></div>
          <!-- Client -->
          <div class="column">
            <a
              ><img
                class="client"
                src="assets/img/logos/custom/bitbreaker-dark.svg"
                alt=""
            /></a>
          </div>
          <!-- Client -->
          <div class="column">
            <a
              ><img
                class="client"
                src="assets/img/logos/custom/infinite-dark.svg"
                alt=""
            /></a>
          </div>
          <!-- Client -->
          <div class="column">
            <a
              ><img
                class="client"
                src="assets/img/logos/custom/livetalk-dark.svg"
                alt=""
            /></a>
          </div>
          <div class="column"></div>
        </div>
      </div>
      <!-- /Clients grid -->
    </div>
  </div>
</div>

<!-- Free trial Section -->
<div
  class="
    section section-primary
    is-medium
    has-background-image
    is-contain
    has-pseudo-lines
  "
  data-background="assets/img/graphics/legacy/circles-and-shapes-w.png"
>
  <div class="container">
    <!-- Title -->
    <div class="section-title-wrapper has-text-centered">
      <!-- Divider -->
      <div class="special-divider is-inverted">
        <span></span>
        <span></span>
      </div>
      <h2 class="title is-2 light-text">Start your Free Trial.</h2>
      <h4 class="subtitle is-4 light-text">Just create an Account.</h4>
    </div>

    <!-- Content -->
    <div class="content-wrapper">
      <div class="columns is-vcentered">
        <div class="column is-5 is-offset-1">
          <!-- Signup form -->
          <div class="quick-signup is-landing">
            <form>
              <h3 class="title is-4 has-text-centered">Free trial</h3>

              <div class="control-material is-secondary">
                <input class="material-input" type="text" required />
                <span class="material-highlight"></span>
                <span class="bar"></span>
                <label>Email *</label>
              </div>
              <div class="control-material is-secondary">
                <input class="material-input" type="text" required />
                <span class="material-highlight"></span>
                <span class="bar"></span>
                <label>Full name *</label>
              </div>
              <div class="control-material is-secondary">
                <input class="material-input" type="text" required />
                <span class="material-highlight"></span>
                <span class="bar"></span>
                <label>Password *</label>
              </div>

              <div class="submit-wrapper">
                <a
                  href="#"
                  class="
                    button button-cta
                    is-bold is-fullwidth
                    btn-align
                    primary-btn
                    raised
                    no-lh
                  "
                >
                  Start 30 days Trial
                </a>
              </div>
            </form>
          </div>
        </div>
        <!-- Signup info card -->
        <div class="column is-5">
          <div class="trial-features">
            <h3 class="title is-4 has-text-centered">30 days Trial</h3>
            <p class="has-text-centered">
              Lorem ipsum dolor sit amet, cu tritani aliquid pro, in quo simul
              fabellas. Eu vim natum adhuc laoreet. Magna possit alterum pri in,
              ei eum graeci nemore nostro.
            </p>
            <img
              class="featured-svg"
              src="assets/img/graphics/drawings/drawing-5-core.svg"
              data-base-url="assets/img/graphics/drawings/drawing-5"
              data-extension=".svg"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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