Step

<!-- Step Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
    <span class="d-block small font-weight-bold text-cap mb-2">Always improving</span>
    <h2>Solutions rooted in code and design</h2>
  </div>
  <!-- End Title -->

  <!-- Step -->
  <ul class="step step-md step-centered">
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">1</span>
        <div class="step-content">
          <h3>Industry-leading designs</h3>
          <p>Achieve virtually any design and layout from within the one template.</p>
        </div>
      </div>
    </li>

    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">2</span>
        <div class="step-content">
          <h3>Learn from the docs</h3>
          <p>Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
        </div>
      </div>
    </li>

    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-soft-primary">3</span>
        <div class="step-content">
          <h3>Accelerate your business</h3>
          <p>We help power millions of businesses to built and run smoothly.</p>
        </div>
      </div>
    </li>
  </ul>
  <!-- End Step -->
</div>
<!-- End Step Section -->

<!-- Features Section -->
<div class="overflow-hidden">
  <div class="container space-2">
    <div class="row justify-content-lg-between align-items-lg-center">
      <div class="col-lg-6 mb-9 mb-lg-0">
        <!-- Mockups -->
        <div class="position-relative max-w-40rem mx-auto">
          <div class="device device-iphone-x w-85 mx-auto">
            <img class="device-iphone-x-frame" src="../../assets/svg/components/iphone-x.svg" alt="Image Description">
            <img class="device-iphone-x-screen" src="../../assets/img/407x867/img1.jpg" alt="Image Description">
          </div>

          <div class="position-absolute top-0 right-0 z-index-2 max-w-33rem mr-n11 mt-9">
            <img class="img-fluid shadow-lg rounded" src="../../assets/img/407x115/img1.jpg" alt="Image Description">
          </div>
          <div class="position-absolute bottom-0 left-0 z-index-2 max-w-33rem ml-n10 mb-10">
            <img class="img-fluid shadow-lg rounded" src="../../assets/img/480x320/img26.jpg" alt="Image Description">
          </div>

          <div class="position-absolute bottom-0 right-0 max-w-50rem w-100 z-index-n1 mx-auto">
            <img class="img-fluid" src="../../assets/svg/components/abstract-shapes-3.svg" alt="Image Description">
          </div>
        </div>
        <!-- End Mockups -->
      </div>

      <div class="col-lg-5">
        <div class="mb-5">
          <h2>Advanced analytics easy to understand</h2>
        </div>

        <!-- Icon Block -->
        <ul class="step step-dashed mb-7">
          <li class="step-item">
            <div class="step-content-wrapper">
              <span class="step-icon step-icon-xs step-icon-soft-primary">1</span>
              <div class="step-content">
                <h3 class="h4">Industry-leading documentation</h3>
                <p><a href="../../documentation/index.html">Our documentation</a> and extensive Client libraries contain everything a business needs to build a custom integration in a fraction of the time.</p>
              </div>
             </div>
          </li>
          <li class="step-item mb-0">
            <div class="step-content-wrapper">
              <span class="step-icon step-icon-xs step-icon-soft-primary">2</span>
              <div class="step-content">
                <h4>Support for the developer community</h4>
                <p class="mb-0">We actively contribute to open-source projects—giving back to the community through development, patches, and sponsorships.</p>
              </div>
            </div>
          </li>
        </ul>
        <!-- End Icon Block -->

        <div class="mt-2">
          <a class="btn btn-primary transition-3d-hover px-4" href="#">Request Demo</a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Features Section -->

<!-- Learn Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
    <h2 class="h1">Why Front?</h2>
    <p>Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web – it is the starting point for creative sites.</p>
  </div>
  <!-- End Title -->

  <div class="w-lg-75 mx-md-auto">
    <!-- Step -->
    <ul class="step step-md step-centered">
      <li class="step-item">
        <div class="step-content-wrapper">
          <span class="step-icon step-icon-sm step-icon-soft-primary step-icon-pseudo"></span>
          <div class="step-content">
            <h5>Basic elements</h5>
          </div>
        </div>
      </li>

      <li class="step-item">
        <div class="step-content-wrapper">
          <span class="step-icon step-icon-sm step-icon-soft-primary step-icon-pseudo"></span>
          <div class="step-content">
            <h5>Components</h5>
          </div>
        </div>
      </li>

      <li class="step-item">
        <div class="step-content-wrapper">
          <span class="step-icon step-icon-sm step-icon-soft-primary step-icon-pseudo"></span>
          <div class="step-content">
            <h5>Combined components</h5>
          </div>
        </div>
      </li>

      <li class="step-item">
        <div class="step-content-wrapper">
          <span class="step-icon step-icon-sm step-icon-soft-primary step-icon-pseudo"></span>
          <div class="step-content">
            <h5>Page layouts</h5>
          </div>
        </div>
      </li>
    </ul>
    <!-- End Step -->
  </div>
</div>
<!-- End Learn Section -->

<div class="container space-2">
  <!-- Timeline -->
  <ul class="step">
    <!-- Timeline Item -->
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-sm step-icon-soft-primary"><i class="far fa-calendar-alt"></i></span>
        <div class="step-content">
          <span class="timeline-heading text-dark">March 9, 2019</span>
          <h4 class="h5 text-danger">Forms, Meetings and Ads cannot be modified</h4>
          <div class="mb-4">
            <p class="mb-2"><span class="font-weight-bold">Resolved</span> - The Front app is now loading properly for all users. We've identified and addressed the cause of the issue as a problem with the Forms, Meetings and Ads tools, and the incident has now been fully resolved.</p>
            <small class="d-block text-muted">Mar 8, 10:10 EST</small>
          </div>
          <div class="mb-4">
            <p class="mb-2"><span class="font-weight-bold">Investigating</span> - We're currently experiencing an issue that's preventing Forms, Meetings and Ads from being modified. All existing forms on websites continue working and accepting submissions. We're actively investigating the cause of this issue and will update this page when more information is available.</p>
            <small class="d-block text-muted">Mar 8, 01:39 EST</small>
          </div>
        </div>
      </div>
    </li>
    <!-- End Timeline Item -->

    <!-- Timeline Item -->
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-sm step-icon-soft-primary"><i class="far fa-calendar-alt"></i></span>
        <div class="step-content">
          <span class="timeline-heading text-dark">March 8, 2019</span>
          <h4 class="h5 text-warning">Chatflows cannot be modified</h4>
          <div class="mb-4">
            <p class="mb-2"><span class="font-weight-bold">Resolved</span> - Chatflows is now operating properly for all users. We've identified and addressed the cause of the issue and the incident has now been fully resolved.</p>
            <small class="d-block text-muted">Mar 7, 12:24 EST</small>
          </div>
          <div class="mb-4">
            <p class="mb-2"><span class="font-weight-bold">Investigating</span> - Chatflows is now operating properly for all users. We've identified and addressed the cause of the issue and the incident has now been fully resolved.</p>
            <small class="d-block text-muted">Mar 7, 12:01 EST</small>
          </div>
          <div class="mb-4">
            <p class="mb-2"><span class="font-weight-bold">Monitoring</span> - We've identified the issue that's been preventing Chatflows from being modified. We're actively addressing the cause of this issue and will update this page when more information is available.</p>
            <small class="d-block text-muted">Mar 7, 11:24 EST</small>
          </div>
          <div class="mb-4">
            <p class="mb-2"><span class="font-weight-bold">Investigating</span> - We're currently experiencing an issue that's preventing Chatflow settings from being modified. We're actively investigating the cause of this issue and will update this page when more information is available.</p>
            <small class="d-block text-muted">Mar 7, 11:11 EST</small>
          </div>
        </div>
      </div>
    </li>
    <!-- End Timeline Item -->

    <!-- Timeline Item -->
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-sm step-icon-soft-primary"><i class="far fa-calendar-alt"></i></span>
        <div class="step-content">
          <span class="4-timeline-heading">March 7, 2019</span>
          <p class="mb-2">No incidents reported.</p>
        </div>
      </div>
    </li>
    <!-- End Timeline Item -->

    <!-- Timeline Item -->
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-sm step-icon-soft-primary"><i class="far fa-calendar-alt"></i></span>
        <div class="step-content">
          <span class="4-timeline-heading">March 6, 2019</span>
          <p class="mb-2">No incidents reported.</p>
        </div>
      </div>
    </li>
    <!-- End Timeline Item -->

    <!-- Timeline Item -->
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-sm step-icon-soft-primary"><i class="far fa-calendar-alt"></i></span>
        <div class="step-content">
          <span class="timeline-heading text-dark">March 5, 2019</span>
          <h4 class="h5 text-danger">Infrastructure Alerts</h4>
          <div class="mb-4">
            <p class="mb-2"><span class="font-weight-bold">Resolved</span> - Some customers may have experienced delayed Infrastructure alerts. We encourage customers to check the status of their applications and infrastructure during this time frame. Services have returned to their normal operation.</p>
            <small class="d-block text-muted">Mar 8, 19:51 EST</small>
          </div>
          <div class="mb-4">
            <p class="mb-2"><span class="font-weight-bold">Investigating</span> - Some customers may be experiencing an issue with delayed Infrastructure Alerts. Please continue to monitor this page for updates.</p>
            <small class="d-block text-muted">Mar 8, 17:51 EST</small>
          </div>
        </div>
      </div>
    </li>
    <!-- End Timeline Item -->

    <!-- Timeline Item -->
    <li class="step-item">
      <div class="step-content-wrapper">
        <span class="step-icon step-icon-sm step-icon-soft-primary"><i class="far fa-calendar-alt"></i></span>
        <div class="step-content">
          <span class="timeline-heading text-dark">March 4, 2019</span>
          <p class="mb-2">No incidents reported.</p>
        </div>
      </div>
    </li>
    <!-- End Timeline Item -->
  </ul>
  <!-- End Timeline -->
</div>