Adobe Ai
Access to the Adobe Illustrator techniques
Icon Blocks
Component #1
Responsive
Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.
Customizable
Front template can be easily customized with its cutting-edge components and features.
Premium
Front is not only for developers but also for designers, and includes a Sketch file.
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 -->
Component #2
Benefits
What our 37,500+ clients love about Front
Less routine
– more creativity
Automate best strategies and focus more on generating hq creatives.
Scale
budgets efficiently
Scale your budgets fast and increase ROI at the same time.
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 -->
Component #3
What we do?
Front makes designing easy and performance fast
More creativity
This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.
Scale budgets efficiently
Now that we've aligned the details, it's time to get things mapped out and organized.
Smart Dashboards
This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.
Control Center
Now that we've aligned the details, it's time to get things mapped out and organized.
Email Reports
We strive to embrace and drive change in our industry which allows us to keep our clients relevant.
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 -->
Component #4
Features built for scale
Get insights to dig down into what's powering your growth the most.
Smart Dashboards
This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.
Control Center
Now that we've aligned the details, it's time to get things mapped out and organized.
Email Reports
We strive to embrace and drive change in our industry which allows us to keep our clients relevant.
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 -->
Component #5
Meet Front UI/UX kit
300+
UI elements
270+
in 3 categories
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
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-lg 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-lg 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-lg 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 -->
Component #6
Why Front
Do more with an end-to-end solution
Robust libraries
Use Front thoroughly thought and automated libraries to manage your businesses.
Simplified Snippets tools
Quickly Front sample components, copy-paste codes, and start right off.
Comprehensive docs
Whether you're a startup or a global enterprise, learn how to integrate with Front.
Layout options
Apart from 100+ HTML-pages, the theme comes with 6 ready-to-use and stand-alone demo options.
Speed up
Reduce time and effort on building modern look design with Front only.
A full solution for start-ups
Front comes with design layouts from Corporate to Course platform.
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 -->
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.
Start free trial. * No credit card required.
<!-- 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 -->
Component #8
What we do
Since 2007, we have helped 25 companies launch over 1k incredible products
Creative minds
We choose our teams carefully. Our people are the secret to great work.
Conquer the best
We stay lean and help your product do one thing well.
Effortless updates
Benefit from automatic updates to all boards any time you need to make a change to your website.
Designing for people
We actively pursue the right balance between functionality and aesthetics, creating delightful experiences.
Strong empathy
We've user tested our own process by shipping over 1k products for clients.
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 -->
Component #9
24/7 Support
Contact us 24 hours a day, 7 days a week.
30 Days return
We offer you a full refund within 30 days of purchase.
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 -->
Component #10
Featured articles
Most helpful articles
Popular forum topics
<!-- 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 -->