Icon Blocks

Component #1

SVG

Responsive

Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.

SVG

Customizable

Front template can be easily customized with its cutting-edge components and features.

SVG

Premium

Front is not only for developers but also for designers, and includes a Sketch file.

SVG

Documentation

Every component and plugin is well documented with live examples.

<!-- Icon Blocks Section -->
<div class="container space-2">
  <div class="row justify-content-lg-center">
    <div class="col-md-6 col-lg-5 mb-3 mb-md-7">
      <!-- Icon Blocks -->
      <div class="media pr-lg-5">
        <figure class="w-100 max-w-8rem mr-4">
          <img class="img-fluid" src="../assets/svg/icons/icon-9.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4>Responsive</h4>
          <p>Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-md-6 col-lg-5 mb-3 mb-md-7">
      <!-- Icon Blocks -->
      <div class="media pl-lg-5">
        <figure class="w-100 max-w-8rem mr-4">
          <img class="img-fluid" src="../assets/svg/icons/icon-3.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4>Customizable</h4>
          <p>Front template can be easily customized with its cutting-edge components and features.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="w-100"></div>

    <div class="col-md-6 col-lg-5 mb-3 mb-md-7 mb-lg-0">
      <!-- Icon Blocks -->
      <div class="media pr-lg-5">
        <figure class="w-100 max-w-8rem mr-4">
          <img class="img-fluid" src="../assets/svg/icons/icon-5.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4>Premium</h4>
          <p>Front is not only for developers but also for designers, and includes a Sketch file.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-md-6 col-lg-5">
      <!-- Icon Blocks -->
      <div class="media pl-lg-5">
        <figure class="w-100 max-w-8rem mr-4">
          <img class="img-fluid" src="../assets/svg/icons/icon-2.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4>Documentation</h4>
          <p>Every component and plugin is well documented with live examples.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>
  </div>
</div>
<!-- End Icon Blocks Section -->
Copy

Component #2

Benefits

What our 37,500+ clients love about Front

SVG

Less routine
– more creativity

Automate best strategies and focus more on generating hq creatives.

SVG

Scale
budgets efficiently

Scale your budgets fast and increase ROI at the same time.

SVG

Hundreds
of thousands saved

Stop inefficient budget spend or pour more into a winning ad when needed.

<!-- Icon Blocks 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">Benefits</span>
    <h2 class="h1">What our 37,500+ clients love about Front</h2>
  </div>
  <!-- End Title -->

  <div class="row">
    <div class="col-md-4 mb-5 mb-md-0">
      <!-- Icon Blocks -->
      <div class="text-center px-lg-3">
        <figure class="max-w-10rem mx-auto mb-4">
          <img class="img-fluid" src="../../assets/svg/icons/icon-45.svg" alt="SVG">
        </figure>
        <h3>Less routine<br>– more creativity</h3>
        <p>Automate best strategies and focus more on generating hq creatives.</p>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-md-4 mb-5 mb-md-0">
      <!-- Icon Blocks -->
      <div class="text-center px-lg-3">
        <figure class="max-w-10rem mx-auto mb-4">
          <img class="img-fluid" src="../../assets/svg/icons/icon-29.svg" alt="SVG">
        </figure>
        <h3>Scale<br>budgets efficiently</h3>
        <p>Scale your budgets fast and increase ROI at the same time.</p>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-md-4">
      <!-- Icon Blocks -->
      <div class="text-center px-lg-3">
        <figure class="max-w-10rem mx-auto mb-4">
          <img class="img-fluid" src="../../assets/svg/icons/icon-31.svg" alt="SVG">
        </figure>
        <h3>Hundreds<br>of thousands saved</h3>
        <p>Stop inefficient budget spend or pour more into a winning ad when needed.</p>
      </div>
      <!-- End Icon Blocks -->
    </div>
  </div>
</div>
<!-- End Icon Blocks Section -->
Copy

Component #3

What we do?

Front makes designing easy and performance fast

SVG

More creativity

This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.

SVG

Scale budgets efficiently

Now that we've aligned the details, it's time to get things mapped out and organized.

SVG

Smart Dashboards

This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.

SVG

Control Center

Now that we've aligned the details, it's time to get things mapped out and organized.

SVG

Email Reports

We strive to embrace and drive change in our industry which allows us to keep our clients relevant.

SVG

Forecasting

Staying focused allows us to turn every project we complete into something we love.

<!-- Icon Blocks Section -->
<div class="overflow-hidden">
  <div class="container space-2 space-top-lg-3 position-relative">
    <!-- 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">What we do?</span>
      <h2>Front makes designing easy and performance fast</h2>
    </div>
    <!-- End Title -->

    <div class="row">
      <div class="col-sm-4 mb-3 mb-sm-5">
        <!-- Icon Blocks -->
        <div class="pr-lg-6">
          <figure class="max-w-6rem w-100 mb-3">
            <img class="img-fluid" src="../../assets/svg/icons/icon-45.svg" alt="SVG">
          </figure>
          <h4>More creativity</h4>
          <p>This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
        </div>
        <!-- End Icon Blocks -->
      </div>

      <div class="col-sm-4 mb-3 mb-sm-5">
        <!-- Icon Blocks -->
        <div class="pr-lg-6">
          <figure class="max-w-6rem w-100 mb-3">
            <img class="img-fluid" src="../../assets/svg/icons/icon-5.svg" alt="SVG">
          </figure>
          <h4>Scale budgets efficiently</h4>
          <p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
        </div>
        <!-- End Icon Blocks -->
      </div>

      <div class="col-sm-4 mb-3 mb-sm-5">
        <!-- Icon Blocks -->
        <div class="pr-lg-6">
          <figure class="max-w-6rem w-100 mb-3">
            <img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
          </figure>
          <h4>Smart Dashboards</h4>
          <p>This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
        </div>
        <!-- End Icon Blocks -->
      </div>

      <div class="col-sm-4 mb-3 mb-sm-5 mb-sm-0">
        <!-- Icon Blocks -->
        <div class="pr-lg-6">
          <figure class="max-w-6rem w-100 mb-3">
            <img class="img-fluid" src="../../assets/svg/icons/icon-1.svg" alt="SVG">
          </figure>
          <h4>Control Center</h4>
          <p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
        </div>
        <!-- End Icon Blocks -->
      </div>

      <div class="col-sm-4 mb-3 mb-sm-0">
        <!-- Icon Blocks -->
        <div class="pr-lg-6">
          <figure class="max-w-6rem w-100 mb-3">
            <img class="img-fluid" src="../../assets/svg/icons/icon-15.svg" alt="SVG">
          </figure>
          <h4>Email Reports</h4>
          <p>We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
        </div>
        <!-- End Icon Blocks -->
      </div>

      <div class="col-sm-4">
        <!-- Icon Blocks -->
        <div class="pr-lg-6">
          <figure class="max-w-6rem w-100 mb-3">
            <img class="img-fluid" src="../../assets/svg/icons/icon-26.svg" alt="SVG">
          </figure>
          <h4>Forecasting</h4>
          <p>Staying focused allows us to turn every project we complete into something we love.</p>
        </div>
        <!-- End Icon Blocks -->
      </div>
    </div>

    <!-- SVG Shapes -->
    <figure class="position-absolute z-index-n1" style="top: -35rem; left: 50rem; width: 62rem; height: 62rem;">
      <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 260 260">
        <circle fill="#e7eaf3" opacity=".7" cx="130" cy="130" r="130"/>
      </svg>
    </figure>
    <!-- End SVG Shapes -->
  </div>
</div>
<!-- End Icon Blocks Section -->
Copy

Component #4

Features built for scale

Get insights to dig down into what's powering your growth the most.

SVG

Smart Dashboards

This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.

SVG

Control Center

Now that we've aligned the details, it's time to get things mapped out and organized.

SVG

Email Reports

We strive to embrace and drive change in our industry which allows us to keep our clients relevant.

SVG

Forecasting

Staying focused allows us to turn every project we complete into something we love.

<!-- Features Section -->
<div class="overflow-hidden">
  <div class="container space-2">
    <!-- Title -->
    <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
      <h2>Features built for scale</h2>
      <p>Get insights to dig down into what's powering your growth the most.</p>
    </div>
    <!-- End Title -->

    <div class="row">
      <div class="col-lg-8 mb-7 mb-lg-0">
        <div class="row">
          <div class="col-sm-6 mb-3 mb-sm-7">
            <!-- Icon Blocks -->
            <div class="pr-lg-6">
              <figure class="max-w-6rem w-100 mb-4">
                <img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
              </figure>
              <h3 class="h4">Smart Dashboards</h3>
              <p class="text-body">This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
            </div>
            <!-- End Icon Blocks -->
          </div>

          <div class="col-sm-6 mb-3 mb-sm-7">
            <!-- Icon Blocks -->
            <div class="pr-lg-6">
              <figure class="max-w-6rem w-100 mb-4">
                <img class="img-fluid" src="../../assets/svg/icons/icon-1.svg" alt="SVG">
              </figure>
              <h4>Control Center</h4>
              <p class="text-body">Now that we've aligned the details, it's time to get things mapped out and organized.</p>
            </div>
            <!-- End Icon Blocks -->
          </div>

          <div class="col-sm-6 mb-3 mb-sm-0">
            <!-- Icon Blocks -->
            <div class="pr-lg-6">
              <figure class="max-w-6rem w-100 mb-4">
                <img class="img-fluid" src="../../assets/svg/icons/icon-15.svg" alt="SVG">
              </figure>
              <h4>Email Reports</h4>
              <p class="text-body">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
            </div>
            <!-- End Icon Blocks -->
          </div>

          <div class="col-sm-6 mb-sm-0">
            <!-- Icon Blocks -->
            <div class="pr-lg-6">
              <figure class="max-w-6rem w-100 mb-4">
                <img class="img-fluid" src="../../assets/svg/icons/icon-26.svg" alt="SVG">
              </figure>
              <h4>Forecasting</h4>
              <p class="text-body">Staying focused allows us to turn every project we complete into something we love.</p>
            </div>
            <!-- End Icon Blocks -->
          </div>
        </div>
      </div>

      <div class="col-sm-8 col-md-6 col-lg-4">
        <!-- Article -->
        <article class="position-relative">
          <a class="card shadow-none bg-img-hero w-100 min-h-450rem transition-3d-hover" href="#" style="background-image: url(../../assets/img/400x500/img26.jpg);">
            <div class="card-body">
              <h4>Adobe Ai</h4>
              <p class="text-body">Access to the Adobe Illustrator techniques</p>
            </div>
            <div class="card-footer border-0 bg-transparent pt-0">
              <span class="font-weight-bold">Browse tools <i class="fas fa-angle-right fa-sm ml-1"></i></span>
            </div>
          </a>

          <!-- SVG Elements -->
          <figure class="max-w-19rem w-100 position-absolute bottom-0 right-0 z-index-n1">
            <div class="mb-n7 mr-n7">
              <img class="img-fluid" src="../../assets/svg/components/dots-2.svg" alt="Image Description">
            </div>
          </figure>
          <!-- End SVG Elements -->
        </article>
        <!-- End Article -->
      </div>
    </div>
  </div>
</div>
<!-- End Features Section -->
Copy

Component #5

Meet Front UI/UX kit
SVG

300+

UI elements

SVG

270+

in 3 categories

SVG

450+

Organized sheets

This UI kit has all you need to manage your hypothetical customer's smart devices like thermostats, lights, and other appliances that make for a connected modern home.

Bootstrap 4 Grid

992px

Google Fonts
Poppins
Free Icons
FA Icon Set
Symbol overrides

Easily customizable

<!-- Features Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-lg-50 text-center mx-lg-auto mb-5">
    <span class="d-block small font-weight-bold text-cap mb-2">Meet Front UI/UX kit</span>
  </div>
  <!-- End Title -->

  <!-- Features -->
  <div class="w-lg-60 mx-lg-auto mb-5">
    <div class="row mx-n2">
      <div class="col-sm-4 px-2 mb-3 mb-sm-0">
        <!-- Icon Block -->
        <div class="border-dashed text-center rounded p-4">
          <figure class="w-100 max-w-8rem mx-auto mb-3">
            <img class="img-fluid" src="../../assets/svg/icons/icon-45.svg" alt="SVG">
          </figure>
          <h2 class="h3 mb-0">300+</h2>
          <p class="font-size-1">UI elements</p>
        </div>
        <!-- End Icon Block -->
      </div>

      <div class="col-sm-4 px-2 mb-3 mb-sm-0">
        <!-- Icon Block -->
        <div class="border-dashed text-center rounded p-4">
          <figure class="w-100 max-w-8rem mx-auto mb-3">
            <img class="img-fluid" src="../../assets/svg/icons/icon-37.svg" alt="SVG">
          </figure>
          <h3 class="mb-0">270+</h3>
          <p class="font-size-1">in 3 categories</p>
        </div>
        <!-- End Icon Block -->
      </div>

      <div class="col-sm-4 px-2">
        <!-- Icon Block -->
        <div class="border-dashed text-center rounded p-4">
          <figure class="w-100 max-w-8rem mx-auto mb-3">
            <img class="img-fluid" src="../../assets/svg/icons/icon-29.svg" alt="SVG">
          </figure>
          <h3 class="mb-0">450+</h3>
          <p class="font-size-1">Organized sheets</p>
        </div>
        <!-- End Icon Block -->
      </div>
    </div>
  </div>
  <!-- End Features -->

  <div class="w-lg-50 text-center mx-lg-auto mb-10">
    <p>This UI kit has all you need to manage your hypothetical customer's smart devices like thermostats, lights, and other appliances that make for a connected modern home.</p>
  </div>

  <div class="w-lg-65 text-center mx-lg-auto">
    <div class="row">
      <div class="col-6 col-md-3 mb-3 mb-md-0">
        <!-- Icon Block -->
        <div class="text-center">
          <span class="icon icon-light bg-white shadow-sm mb-3">
            <i class="fas fa-align-justify"></i>
          </span>
          <h5 class="mb-1">Bootstrap 4 Grid</h5>
          <p class="font-size-1">992px</p>
        </div>
        <!-- End Icon Block -->
      </div>

      <div class="col-6 col-md-3 mb-3 mb-md-0">
        <!-- Icon Block -->
        <div class="text-center">
          <span class="icon icon-light bg-white shadow-sm mb-3">
            <i class="fas fa-font"></i>
          </span>
          <h5 class="mb-1">Google Fonts</h5>
          <a class="text-body font-size-1" href="https://fonts.google.com/specimen/Poppins" target="_blank">
            Poppins
            <i class="fas fa-external-link-alt ml-1"></i>
          </a>
        </div>
        <!-- End Icon Block -->
      </div>

      <div class="col-6 col-md-3">
        <!-- Icon Block -->
        <div class="text-center">
          <span class="icon icon-light bg-white shadow-sm mb-3">
            <i class="fab fa-fonticons-fi"></i>
          </span>
          <h5 class="mb-1">Free Icons</h5>
          <a class="text-body font-size-1" href="https://fontawesome.com/" target="_blank">
            FA Icon Set
            <i class="fas fa-external-link-alt ml-1"></i>
          </a>
        </div>
        <!-- End Icon Block -->
      </div>

      <div class="col-6 col-md-3">
        <!-- Icon Block -->
        <div class="text-center">
          <span class="icon icon-light bg-white shadow-sm mb-3">
            <i class="fas fa-sync-alt"></i>
          </span>
          <h5 class="mb-1">Symbol overrides</h5>
          <p class="font-size-1">Easily customizable</p>
        </div>
        <!-- End Icon Block -->
      </div>
    </div>
  </div>
</div>
<!-- End Features Section -->
Copy

Component #6

Why Front

Do more with an end-to-end solution

SVG

Robust libraries

Use Front thoroughly thought and automated libraries to manage your businesses.

SVG

Simplified Snippets tools

Quickly Front sample components, copy-paste codes, and start right off.

SVG

Comprehensive docs

Whether you're a startup or a global enterprise, learn how to integrate with Front.

SVG

Layout options

Apart from 100+ HTML-pages, the theme comes with 6 ready-to-use and stand-alone demo options.

SVG

Speed up

Reduce time and effort on building modern look design with Front only.

SVG

A full solution for start-ups

Front comes with design layouts from Corporate to Course platform.

Sign up and Start Building Let's Talk

Start free trial. * No credit card required.

<!-- Features 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">Why Front</span>
    <h2>Do more with an end-to-end solution</h2>
  </div>
  <!-- End Title -->

  <!-- Icon Blocks -->
  <div class="row mb-5 mb-md-9">
    <div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
      <!-- Icon Block -->
      <div class="media align-items-center mb-2">
        <figure class="w-100 max-w-6rem mr-3">
          <img class="img-fluid" src="../../assets/svg/icons/icon-29.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4 class="mb-0">Robust libraries</h4>
        </div>
      </div>
      <p>Use Front thoroughly thought and automated libraries to manage your businesses.</p>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
      <!-- Icon Block -->
      <div class="media align-items-center mb-2">
        <figure class="w-100 max-w-6rem mr-3">
          <img class="img-fluid" src="../../assets/svg/icons/icon-44.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4 class="mb-0">Simplified Snippets tools</h4>
        </div>
      </div>
      <p>Quickly Front sample components, copy-paste codes, and start right off.</p>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-md-4 mb-3 mb-sm-7 mb-md-0">
      <!-- Icon Block -->
      <div class="media align-items-center mb-2">
        <figure class="w-100 max-w-6rem mr-3">
          <img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4 class="mb-0">Comprehensive docs</h4>
        </div>
      </div>
      <p>Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-md-4 mb-3 mb-sm-7 mb-md-0">
      <!-- Icon Block -->
      <div class="media align-items-center mb-2">
        <figure class="w-100 max-w-6rem mr-3">
          <img class="img-fluid" src="../../assets/svg/icons/icon-37.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4 class="mb-0">Layout options</h4>
        </div>
      </div>
      <p>Apart from 100+ HTML-pages, the theme comes with 6 ready-to-use and stand-alone demo options.</p>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-md-4 mb-3 mb-sm-7 mb-md-0">
      <!-- Icon Block -->
      <div class="media align-items-center mb-2">
        <figure class="w-100 max-w-6rem mr-3">
          <img class="img-fluid" src="../../assets/svg/icons/icon-5.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4 class="mb-0">Speed up</h4>
        </div>
      </div>
      <p>Reduce time and effort on building modern look design with Front only.</p>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-md-4">
      <!-- Icon Block -->
      <div class="media align-items-center mb-2">
        <figure class="w-100 max-w-6rem mr-3">
          <img class="img-fluid" src="../../assets/svg/icons/icon-28.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4 class="mb-0">A full solution for start-ups</h4>
        </div>
      </div>
      <p>Front comes with design layouts from Corporate to Course platform.</p>
      <!-- End Icon Block -->
    </div>
  </div>
  <!-- End Icon Blocks -->

  <div class="text-center">
    <div class="mb-3">
      <a class="btn btn-primary btn-wide transition-3d-hover mb-2 mb-sm-0 mx-1" href="#">Sign up and Start Building</a>
      <a class="btn btn-link mb-2 mb-sm-0 mx-1" href="#">Let's Talk <i class="fas fa-angle-right fa-sm ml-1"></i></a>
    </div>

    <p class="small">Start free trial. * No credit card required.</p>
  </div>
</div>
<!-- End Features Section -->
Copy

Component #7

Go Front with ease.

Whether you’re a seasoned agile expert, or just getting started, Jira Software unlocks the power of agile.

Flexible planning

Front Software's rich planning features enable your team to flexibly plan.

Accurate estimations

Use story points, hours, t-shirt sizes, or your own estimation technique.

Value-driven prioritization

Order user stories, issues, and bugs in your product backlog with simple dragging.

Transparent execution

Front Software brings a new level of transparency to your team's work.

Actionable results

Extensive reporting functionality gives your team critical insight into their agile process.

Scalable evolution Coming soon

Front Software is agile project management designed for any teams.

Sign up and Start Building or Talk to our Experts

Start free trial. * No credit card required.

Image Description
Image Description
Image Description 
<!-- Icons Section -->
<div class="position-relative bg-primary overflow-hidden">
  <div class="container space-top-2 space-top-lg-3 position-relative z-index-2">
    <!-- Title -->
    <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
      <h2 class="text-white">Go Front with ease.</h2>
      <p class="text-white-70">Whether you’re a seasoned agile expert, or just getting started, Jira Software unlocks the power of agile.</p>
    </div>
    <!-- End Title -->

    <!-- Icon Blocks -->
    <div class="w-lg-80 mx-lg-auto mb-11">
      <div class="row mb-9">
        <div class="col-6 col-md-4 mb-7">
          <!-- Icon Block -->
          <span class="d-block text-white font-size-2 mb-3">
            <i class="fas fa-align-center"></i>
          </span>
          <h4 class="text-white mb-3">Flexible planning</h4>
          <p class="text-white-70">Front Software's rich planning features enable your team to flexibly plan.</p>
          <!-- End Icon Block -->
        </div>

        <div class="col-6 col-md-4 mb-7">
          <!-- Icon Block -->
          <span class="d-block text-white font-size-2 mb-3">
            <i class="fas fa-code-branch"></i>
          </span>
          <h4 class="text-white mb-3">Accurate estimations</h4>
          <p class="text-white-70">Use story points, hours, t-shirt sizes, or your own estimation technique.</p>
          <!-- End Icon Block -->
        </div>

        <div class="col-6 col-md-4 mb-7">
          <!-- Icon Block -->
          <span class="d-block text-white font-size-2 mb-3">
            <i class="fas fa-shapes"></i>
          </span>
          <h4 class="text-white mb-3">Value-driven prioritization</h4>
          <p class="text-white-70">Order user stories, issues, and bugs in your product backlog with simple dragging.</p>
          <!-- End Icon Block -->
        </div>

        <div class="col-6 col-md-4 mb-7 mb-md-0">
          <!-- Icon Block -->
          <span class="d-block text-white font-size-2 mb-3">
            <i class="fas fa-clone"></i>
          </span>
          <h4 class="text-white mb-3">Transparent execution</h4>
          <p class="text-white-70">Front Software brings a new level of transparency to your team's work.</p>
          <!-- End Icon Block -->
        </div>

        <div class="col-6 col-md-4">
          <!-- Icon Block -->
          <span class="d-block text-white font-size-2 mb-3">
            <i class="fas fa-check-circle"></i>
          </span>
          <h4 class="text-white mb-3">Actionable results</h4>
          <p class="text-white-70">Extensive reporting functionality gives your team critical insight into their agile process.</p>
          <!-- End Icon Block -->
        </div>

        <div class="col-6 col-md-4">
          <!-- Icon Block -->
          <span class="d-block text-white font-size-2 mb-3">
            <i class="fas fa-compress"></i>
          </span>
          <h4 class="text-white mb-3">Scalable evolution <span class="badge badge-warning badge-pill ml-1">Coming soon</span></h4>
          <p class="text-white-70">Front Software is agile project management designed for any teams.</p>
          <!-- End Icon Block -->
        </div>
      </div>

      <!-- Buttons -->
      <div class="text-center">
        <div class="mb-3">
          <a class="btn btn-sm btn-light btn-wide transition-3d-hover" href="#">Sign up and Start Building</a>
          <small class="d-block d-sm-inline-block text-white-70 my-3 my-sm-0 mx-sm-3">or</small>
          <a class="btn btn-sm btn-indigo btn-wide transition-3d-hover" href="#">Talk to our Experts</a>
        </div>
        <p class="small text-white-70">Start free trial. * No credit card required.</p>
      </div>
      <!-- End Buttons -->
    </div>
    <!-- End Icon Blocks -->

    <div class="w-85 w-md-75 w-lg-65 text-center mx-auto">
      <img class="img-fluid" src="../../assets/svg/illustrations/ai-creation.svg" alt="Image Description">
    </div>
  </div>

  <!-- SVG Background Shape -->
  <figure class="w-35 position-absolute top-0 right-0">
    <div class="mt-n11 mr-n11">
      <img class="img-fluid" src="../../assets/svg/components/half-circle-3.svg" alt="Image Description">
    </div>
  </figure>
  <figure class="w-25 position-absolute bottom-0 left-0">
    <div class="mb-n11 ml-n11">
      <img class="img-fluid" src="../../assets/svg/components/half-circle-2.svg" alt="Image Description">
    </div>
  </figure>
  <!-- End SVG Background Shape -->
</div>
<!-- End Icons Section -->
Copy

Component #8

What we do

Since 2007, we have helped 25 companies launch over 1k incredible products

SVG

Creative minds

We choose our teams carefully. Our people are the secret to great work.

SVG

Conquer the best

We stay lean and help your product do one thing well.

SVG

Effortless updates

Benefit from automatic updates to all boards any time you need to make a change to your website.

SVG

Designing for people

We actively pursue the right balance between functionality and aesthetics, creating delightful experiences.

SVG

Strong empathy

We've user tested our own process by shipping over 1k products for clients.

SVG

Stay curious

We dedicate time for researching and experimentation to increase creativity and imagine new challenges.

<!-- Services Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-80 w-lg-60 text-center mx-md-auto mb-9">
    <span class="d-block small font-weight-bold text-cap mb-2">What we do</span>
    <h2>Since 2007, we have helped 25 companies launch over 1k incredible products</h2>
  </div>
  <!-- End Title -->

  <div class="row justify-content-lg-center">
    <div class="col-md-6 col-lg-5 mb-3 mb-md-5 mb-lg-7">
      <!-- Icon Blocks -->
      <div class="media pr-lg-5">
        <figure class="w-100 max-w-8rem mr-4">
          <img class="img-fluid" src="../../assets/svg/icons/icon-18.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4>Creative minds</h4>
          <p>We choose our teams carefully. Our people are the secret to great work.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-md-6 col-lg-5 mb-3 mb-md-5 mb-lg-7">
      <!-- Icon Blocks -->
      <div class="media pl-lg-5">
        <figure class="w-100 max-w-8rem mr-4">
          <img class="img-fluid" src="../../assets/svg/icons/icon-27.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4>Conquer the best</h4>
          <p>We stay lean and help your product do one thing well.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="w-100"></div>

    <div class="col-md-6 col-lg-5 mb-3 mb-md-5 mb-lg-7">
      <!-- Icon Blocks -->
      <div class="media pr-lg-5">
        <figure class="w-100 max-w-8rem mr-4">
          <img class="img-fluid" src="../../assets/svg/icons/icon-28.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4>Effortless updates</h4>
          <p>Benefit from automatic updates to all boards any time you need to make a change to your website.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-md-6 col-lg-5 mb-3 mb-md-5 mb-lg-7">
      <!-- Icon Blocks -->
      <div class="media pl-lg-5">
        <figure class="w-100 max-w-8rem mr-4">
          <img class="img-fluid" src="../../assets/svg/icons/icon-45.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4>Designing for people</h4>
          <p>We actively pursue the right balance between functionality and aesthetics, creating delightful experiences.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="w-100"></div>

    <div class="col-md-6 col-lg-5 mb-3 mb-md-5 mb-lg-0">
      <!-- Icon Blocks -->
      <div class="media pr-lg-5">
        <figure class="w-100 max-w-8rem mr-4">
          <img class="img-fluid" src="../../assets/svg/icons/icon-19.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4>Strong empathy</h4>
          <p>We've user tested our own process by shipping over 1k products for clients.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-md-6 col-lg-5">
      <!-- Icon Blocks -->
      <div class="media pl-lg-5">
        <figure class="w-100 max-w-8rem mr-4">
          <img class="img-fluid" src="../../assets/svg/icons/icon-7.svg" alt="SVG">
        </figure>
        <div class="media-body">
          <h4>Stay curious</h4>
          <p>We dedicate time for researching and experimentation to increase creativity and imagine new challenges.</p>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>
  </div>
</div>
<!-- End Services Section -->
Copy

Component #9

SVG

24/7 Support

Contact us 24 hours a day, 7 days a week.

SVG

30 Days return

We offer you a full refund within 30 days of purchase.

SVG

Free shipping

Automatically receive free standard shipping on every order.

<!-- Features Section -->
<div class="border-bottom">
  <div class="container space-2">
    <div class="row">
      <div class="col-md-4 mb-7 mb-md-0">
        <!-- Contacts -->
        <div class="media">
          <figure class="w-100 max-w-8rem mr-4">
            <img class="img-fluid" src="../assets/svg/icons/icon-4.svg" alt="SVG">
          </figure>
          <div class="media-body">
            <h4 class="mb-1">24/7 Support</h4>
            <p class="font-size-1 mb-0">Contact us 24 hours a day, 7 days a week.</p>
          </div>
        </div>
        <!-- End Contacts -->
      </div>

      <div class="col-md-4 mb-7 mb-md-0">
        <!-- Contacts -->
        <div class="media">
          <figure class="w-100 max-w-8rem mr-4">
            <img class="img-fluid" src="../assets/svg/icons/icon-64.svg" alt="SVG">
          </figure>
          <div class="media-body">
            <h4 class="mb-1">30 Days return</h4>
            <p class="font-size-1 mb-0">We offer you a full refund within 30 days of purchase.</p>
          </div>
        </div>
        <!-- End Contacts -->
      </div>

      <div class="col-md-4">
        <!-- Contacts -->
        <div class="media">
          <figure class="w-100 max-w-8rem mr-4">
            <img class="img-fluid" src="../assets/svg/icons/icon-65.svg" alt="SVG">
          </figure>
          <div class="media-body">
            <h4 class="mb-1">Free shipping</h4>
            <p class="font-size-1 mb-0">Automatically receive free standard shipping on every order.</p>
          </div>
        </div>
        <!-- End Contacts -->
      </div>
    </div>
  </div>
</div>
<!-- End Features Section -->
Copy

Component #10 

<!-- Featured Articles Section -->
<div class="container space-2">
  <div class="row">
    <div class="col-md-4 mb-5 mb-md-0">
      <!-- SVG Icon -->
      <figure class="w-100 max-w-8rem mb-4">
        <img class="img-fluid" src="../../assets/svg/icons/icon-21.svg" alt="SVG">
      </figure>
      <!-- End SVG Icon -->

      <div class="mb-4">
        <h3>Featured articles</h3>
      </div>

      <ul class="list-unstyled list-article">
        <li><a class="link-underline" href="#">What is Front?</a></li>
        <li><a class="link-underline" href="#">Getting started for workspace creators</a></li>
        <li><a class="link-underline" href="#">Edit your profile</a></li>
        <li><a class="link-underline" href="#">View and download invoices</a></li>
        <li><a class="font-weight-bold" href="#">See all</a></li>
      </ul>
    </div>

    <div class="col-md-4 mb-5 mb-md-0">
      <!-- SVG Icon -->
      <figure class="w-100 max-w-8rem mb-4">
        <img class="img-fluid" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
      </figure>
      <!-- End SVG Icon -->

      <div class="mb-4">
        <h3>Most helpful articles</h3>
      </div>

      <ul class="list-unstyled list-article">
        <li><a class="link-underline" href="#">Working in Front</a></li>
        <li><a class="link-underline" href="#">Delete a page</a></li>
        <li><a class="link-underline" href="#">Add an app to your workspace</a></li>
        <li><a class="link-underline" href="#">What is Item Support?</a></li>
        <li><a class="font-weight-bold" href="#">See all</a></li>
      </ul>
    </div>

    <div class="col-md-4">
      <!-- SVG Icon -->
      <figure class="w-100 max-w-8rem mb-4">
        <img class="img-fluid" src="../../assets/svg/icons/icon-4.svg" alt="SVG">
      </figure>
      <!-- End SVG Icon -->

      <div class="mb-4">
        <h3>Popular forum topics</h3>
      </div>

      <ul class="list-unstyled list-article">
        <li><a class="link-underline" href="#">Getting started for new members</a></li>
        <li><a class="link-underline" href="#">Invite new members to your workspace</a></li>
        <li><a class="link-underline" href="#">Bundled Plugins</a></li>
        <li><a class="font-weight-bold" href="#">See all</a></li>
      </ul>
    </div>
  </div>
</div>
<!-- End Featured Articles Section -->
Copy