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 -->
<div class="container content-space-2 content-space-lg-3">
<div class="row justify-content-lg-center">
<div class="col-md-6 col-lg-5 mb-3 mb-md-7">
<!-- Icon Blocks -->
<div class="d-flex pe-lg-5" data-aos="fade-up">
<div class="flex-shrink-0">
<span class="svg-icon text-primary">
@@include("../assets/vendor/duotone-icons/elc/elc002.svg")
</span>
</div>
<div class="flex-grow-1 ms-4">
<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>
<!-- End Col -->
<div class="col-md-6 col-lg-5 mb-3 mb-md-7">
<!-- Icon Blocks -->
<div class="d-flex ps-lg-5" data-aos="fade-up" data-aos-delay="100">
<div class="flex-shrink-0">
<span class="svg-icon text-primary">
@@include("../assets/vendor/duotone-icons/gen/gen019.svg")
</span>
</div>
<div class="flex-grow-1 ms-4">
<h4>Customizable</h4>
<p>Front template can be easily customized with its cutting-edge components and features.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<!-- End Col -->
<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="d-flex pe-lg-5" data-aos="fade-up" data-aos-delay="200">
<div class="flex-shrink-0">
<span class="svg-icon text-primary">
@@include("../assets/vendor/duotone-icons/gen/gen025.svg")
</span>
</div>
<div class="flex-grow-1 ms-4">
<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>
<!-- End Col -->
<div class="col-md-6 col-lg-5">
<!-- Icon Blocks -->
<div class="d-flex ps-lg-5" data-aos="fade-up" data-aos-delay="300">
<div class="flex-shrink-0">
<span class="svg-icon text-primary">
@@include("../assets/vendor/duotone-icons/fil/fil024.svg")
</span>
</div>
<div class="flex-grow-1 ms-4">
<h4>Documentation</h4>
<p>Every component and plugin is well documented with live examples.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Icon Blocks -->
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.
Hundreds
of thousands saved
Stop inefficient budget spend or pour more into a winning ad when needed.
Scale
budgets efficiently
Scale your budgets fast and increase ROI at the same time.
<!-- Icon Blocks -->
<div class="container content-space-1 content-space-lg-3">
<!-- Heading -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<span class="text-cap">Benefits</span>
<h2 class="h1">What our 37,500+ clients love about Front</h2>
</div>
<!-- End Heading -->
<div class="row">
<div class="col-md-4 mb-5 mb-md-0">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<div class="svg-icon text-primary mb-4">
@@include("../assets/vendor/duotone-icons/abs/abs028.svg")
</div>
<h3>Less routine<br>– more creativity</h3>
<p>Automate best strategies and focus more on generating hq creatives.</p>
</div>
<!-- End Icon Blocks -->
</div>
<!-- End Col -->
<div class="col-md-4 mb-5 mb-md-0">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<div class="svg-icon text-primary mb-4">
@@include("../assets/vendor/duotone-icons/fin/fin010.svg")
</div>
<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>
<!-- End Col -->
<div class="col-md-4">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<div class="svg-icon text-primary mb-4">
@@include("../assets/vendor/duotone-icons/gra/gra001.svg")
</div>
<h3>Scale<br>budgets efficiently</h3>
<p>Scale your budgets fast and increase ROI at the same time.</p>
</div>
<!-- End Icon Blocks -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Icon Blocks -->
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 -->
<div class="overflow-hidden">
<div class="container position-relative content-space-2 content-space-t-lg-3">
<!-- Heading -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<span class="text-cap">What we do?</span>
<h2>Front makes designing easy and performance fast</h2>
</div>
<!-- End Heading -->
<div class="row">
<div class="col-sm-6 col-md-4 mb-3 mb-md-5">
<!-- Icon Blocks -->
<div class="pe-lg-6">
<span class="svg-icon text-primary mb-3">
@@include("../assets/vendor/duotone-icons/abs/abs028.svg")
</span>
<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>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-3 mb-md-5">
<!-- Icon Blocks -->
<div class="pe-lg-6">
<span class="svg-icon text-primary mb-3">
@@include("../assets/vendor/duotone-icons/fin/fin010.svg")
</span>
<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>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-3 mb-md-5">
<!-- Icon Blocks -->
<div class="pe-lg-6">
<span class="svg-icon text-primary mb-3">
@@include("../assets/vendor/duotone-icons/gra/gra007.svg")
</span>
<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>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-3 mb-md-5">
<!-- Icon Blocks -->
<div class="pe-lg-6">
<span class="svg-icon text-primary mb-3">
@@include("../assets/vendor/duotone-icons/gen/gen011.svg")
</span>
<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>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
<!-- Icon Blocks -->
<div class="pe-lg-6">
<span class="svg-icon text-primary mb-3">
@@include("../assets/vendor/duotone-icons/com/com010.svg")
</span>
<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>
<!-- End Col -->
<div class="col-sm-6 col-md-4">
<!-- Icon Blocks -->
<div class="pe-lg-6">
<span class="svg-icon text-primary mb-3">
@@include("../assets/vendor/duotone-icons/fin/fin007.svg")
</span>
<h4>Forecasting</h4>
<p>Staying focused allows us to turn every project we complete into something we love.</p>
</div>
<!-- End Icon Blocks -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<!-- SVG Shape -->
<figure class="position-absolute zi-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 Shape -->
</div>
</div>
<!-- End Icon Blocks -->
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.
<!-- Icon Blocks -->
<div class="overflow-hidden">
<div class="container content-space-2 content-space-lg-3">
<!-- Heading -->
<div class="w-md-75 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 Heading -->
<div class="row">
<div class="col-lg-4 d-none d-lg-block">
<!-- Card -->
<div class="position-relative pe-lg-4">
<a class="card card-transition shadow-none bg-img-start" href="#" style="background-image: url(../assets/img/400x500/img26.jpg); min-height: 27rem;">
<div class="card-body">
<h4 class="card-title">Adobe Ai</h4>
<p class="card-text text-body">Access to the Adobe Illustrator techniques</p>
</div>
<div class="card-footer pt-0">
<span class="card-link">Browse tools <i class="bi-chevron-right small ms-1"></i></span>
</div>
</a>
<!-- SVG Shape -->
<div class="position-absolute bottom-0 start-0 zi-n1 mb-n7 ms-n7" style="width: 12rem;">
<img class="w-100" src="../assets/svg/components/dots-lg.svg" alt="SVG">
</div>
<!-- End SVG Shape -->
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-lg-8">
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-7">
<!-- Icon Blocks -->
<div class="pe-lg-6">
<span class="svg-icon text-primary mb-4">
@@include("../assets/vendor/duotone-icons/gra/gra007.svg")
</span>
<h3 class="h4">Smart Dashboards</h3>
<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-6 mb-3 mb-sm-7">
<!-- Icon Blocks -->
<div class="pe-lg-6">
<span class="svg-icon text-primary mb-4">
@@include("../assets/vendor/duotone-icons/gen/gen011.svg")
</span>
<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-6 mb-3 mb-sm-0">
<!-- Icon Blocks -->
<div class="pe-lg-6">
<span class="svg-icon text-primary mb-4">
@@include("../assets/vendor/duotone-icons/com/com010.svg")
</span>
<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-6">
<!-- Icon Blocks -->
<div class="pe-lg-6">
<span class="svg-icon text-primary mb-4">
@@include("../assets/vendor/duotone-icons/gen/gen022.svg")
</span>
<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>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Icon Blocks -->
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 5 Grid
1140px
Google Fonts
Roboto
Free Icons
Bootstrap Icons
Symbol overrides
Easily customizable
<!-- Icon Block -->
<div class="container content-space-2 content-space-lg-3">
<!-- Heading -->
<div class="w-lg-50 text-center mx-lg-auto mb-5">
<span class="text-cap">Meet Front UI/UX kit</span>
</div>
<!-- End Heading -->
<div class="mx-auto mb-5" style="max-width: 40rem;">
<div class="row gx-3">
<div class="col-sm-4 mb-3 mb-sm-0">
<!-- Card -->
<div class="card card-dashed shadow-none text-center rounded-2">
<div class="card-body">
<span class="svg-icon text-primary mb-3">
@@include("../assets/vendor/duotone-icons/abs/abs020.svg")
</span>
<h2 class="card-title h3 mb-0">300+</h2>
<p class="card-text">UI elements</p>
</div>
</div>
<!-- End Card -->
</div>
<div class="col-sm-4 mb-3 mb-sm-0">
<!-- Card -->
<div class="card card-dashed shadow-none text-center rounded-2">
<div class="card-body">
<span class="svg-icon text-primary mb-3">
@@include("../assets/vendor/duotone-icons/abs/abs027.svg")
</span>
<h3 class="card-title mb-0">270+</h3>
<p class="card-text">in 3 categories</p>
</div>
</div>
<!-- End Card -->
</div>
<div class="col-sm-4">
<!-- Card -->
<div class="card card-dashed shadow-none text-center rounded-2">
<div class="card-body">
<span class="svg-icon text-primary mb-3">
@@include("../assets/vendor/duotone-icons/abs/abs028.svg")
</span>
<h3 class="card-title mb-0">450+</h3>
<p class="card-text">Organized sheets</p>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Row -->
</div>
<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-sm-3 mb-3 mb-sm-0">
<!-- Icon Block -->
<div class="text-center">
<span class="icon icon-light bg-white shadow-sm mb-3">
<i class="bi-grid"></i>
</span>
<h5 class="mb-1">Bootstrap 5 Grid</h5>
<p class="small">1140px</p>
</div>
<!-- End Icon Block -->
</div>
<div class="col-6 col-sm-3 mb-3 mb-sm-0">
<!-- Icon Block -->
<div class="text-center">
<span class="icon icon-light bg-white shadow-sm mb-3">
<i class="bi-type"></i>
</span>
<h5 class="mb-1">Google Fonts</h5>
<p class="small">Roboto</p>
</div>
<!-- End Icon Block -->
</div>
<div class="col-6 col-sm-3">
<!-- Icon Block -->
<div class="text-center">
<span class="icon icon-light bg-white shadow-sm mb-3">
<i class="bi-droplet-half"></i>
</span>
<h5 class="mb-1">Free Icons</h5>
<p class="small">Bootstrap Icons</p>
</div>
<!-- End Icon Block -->
</div>
<div class="col-6 col-sm-3">
<!-- Icon Block -->
<div class="text-center">
<span class="icon icon-light bg-white shadow-sm mb-3">
<i class="bi-pencil-square"></i>
</span>
<h5 class="mb-1">Symbol overrides</h5>
<p class="small">Easily customizable</p>
</div>
<!-- End Icon Block -->
</div>
</div>
</div>
</div>
<!-- End Icon Block -->
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.
<!-- Icon Blocks -->
<div class="container">
<!-- Heading -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<span class="text-cap">Why Front</span>
<h2>Do more with an end-to-end solution</h2>
</div>
<!-- End Heading -->
<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="d-flex align-items-center mb-2">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
@@include("../assets/vendor/duotone-icons/abs/abs020.svg")
</span>
</div>
<div class="flex-grow-1 ms-3">
<h4 class="mb-0">Robust libraries</h4>
</div>
</div>
<!-- End Icon Block -->
<p>Use Front thoroughly thought and automated libraries to manage your businesses.</p>
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
<!-- Icon Block -->
<div class="d-flex align-items-center mb-2">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
@@include("../assets/vendor/duotone-icons/cod/cod010.svg")
</span>
</div>
<div class="flex-grow-1 ms-3">
<h4 class="mb-0">Simplified Snippets tools</h4>
</div>
</div>
<!-- End Icon Block -->
<p>Quickly Front sample components, copy-paste codes, and start right off.</p>
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7 mb-md-0">
<!-- Icon Block -->
<div class="d-flex align-items-center mb-2">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
@@include("../assets/vendor/duotone-icons/fil/fil024.svg")
</span>
</div>
<div class="flex-grow-1 ms-3">
<h4 class="mb-0">Comprehensive docs</h4>
</div>
</div>
<!-- End Icon Block -->
<p>Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7 mb-md-0">
<!-- Icon Block -->
<div class="d-flex align-items-center mb-2">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
@@include("../assets/vendor/duotone-icons/abs/abs027.svg")
</span>
</div>
<div class="flex-grow-1 ms-3">
<h4 class="mb-0">Layout options</h4>
</div>
</div>
<!-- End Icon Block -->
<p>Apart from 100+ HTML-pages, the theme comes with 6 ready-to-use and stand-alone demo options.</p>
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7 mb-md-0">
<!-- Icon Block -->
<div class="d-flex align-items-center mb-2">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
@@include("../assets/vendor/duotone-icons/gen/gen022.svg")
</span>
</div>
<div class="flex-grow-1 ms-3">
<h4 class="mb-0">Speed up</h4>
</div>
</div>
<!-- End Icon Block -->
<p>Reduce time and effort on building modern look design with Front only.</p>
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4">
<!-- Icon Block -->
<div class="d-flex align-items-center mb-2">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
@@include("../assets/vendor/duotone-icons/gen/gen017.svg")
</span>
</div>
<div class="flex-grow-1 ms-3">
<h4 class="mb-0">A full solution for start-ups</h4>
</div>
</div>
<!-- End Icon Block -->
<p>Front comes with design layouts from Corporate to Course platform.</p>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="text-center">
<div class="d-grid d-sm-flex justify-content-center gap-2 mb-3">
<a class="btn btn-primary btn-transition" href="#">Sign up and Start Building</a>
<a class="btn btn-link" href="#">Let's Talk <i class="bi-chevron-right small ms-1"></i></a>
</div>
<p class="small">Start free trial. * No credit card required.</p>
</div>
</div>
<!-- End Icon Blocks -->
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.
<!-- Icon Blocks -->
<div class="position-relative bg-dark" style="background-image: url(../assets/svg/components/wave-pattern-light.svg);">
<div class="container content-space-t-2 content-space-t-lg-3 position-relative zi-2">
<!-- Heading -->
<div class="w-md-75 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 Heading -->
<!-- Icon Blocks -->
<div class="row mb-5 mb-sm-9">
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
<span class="svg-icon text-white mb-3">
@@include("../assets/vendor/duotone-icons/gen/gen019.svg")
</span>
<h4 class="text-white">Flexible planning</h4>
<p class="text-white-70">Front Software's rich planning features enable your team to flexibly plan.</p>
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
<span class="svg-icon text-white mb-3">
@@include("../assets/vendor/duotone-icons/fin/fin007.svg")
</span>
<h4 class="text-white">Accurate estimations</h4>
<p class="text-white-70">Use story points, hours, t-shirt sizes, or your own estimation technique.</p>
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
<span class="svg-icon text-white mb-3">
@@include("../assets/vendor/duotone-icons/fin/fin004.svg")
</span>
<h4 class="text-white">Value-driven prioritization</h4>
<p class="text-white-70">Order user stories, issues, and bugs in your product backlog with simple dragging.</p>
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7 mb-md-0">
<span class="svg-icon text-white mb-3">
@@include("../assets/vendor/duotone-icons/abs/abs014.svg")
</span>
<h4 class="text-white">Transparent execution</h4>
<p class="text-white-70">Front Software brings a new level of transparency to your team's work.</p>
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
<span class="svg-icon text-white mb-3">
@@include("../assets/vendor/duotone-icons/abs/abs037.svg")
</span>
<h4 class="text-white">Actionable results</h4>
<p class="text-white-70">Extensive reporting functionality gives your team critical insight into their agile process.</p>
</div>
<!-- End Col -->
<div class="col-sm-6 col-md-4">
<span class="svg-icon text-white mb-3">
@@include("../assets/vendor/duotone-icons/abs/abs026.svg")
</span>
<h4 class="text-white">Scalable evolution <span class="badge bg-warning text-dark rounded-pill ms-1">Coming soon</span></h4>
<p class="text-white-70">Front Software is agile project management designed for any teams.</p>
</div>
<!-- End Col -->
</div>
<!-- End Row -->
<div class="text-center">
<div class="d-grid d-sm-flex justify-content-sm-center align-items-sm-center gap-3 mb-3">
<a class="btn btn-light btn-transition" href="#">Sign up and start building</a>
<small class="text-white-70">or</small>
<a class="btn btn-dark btn-transition" href="#">Talk to our experts</a>
</div>
<p class="text-white-70 small">Start free trial. * No credit card required.</p>
</div>
<!-- End Icon Blocks -->
</div>
</div>
<!-- End Icon Blocks -->
Component #8
What we do?
A flexible theme for modern SaaS businesses
Industry-leading designs
Achieve virtually any design and layout from within the one template.
Learn from the docs
Whether you're a startup or a global enterprise, learn how to integrate with Front.
Accelerate your business
We help power millions of businesses to built and run smoothly.
It is fast and easy. Create your first and ongoing website with Front.
www.htmlstream.com/front/
We are launching soon. Join the priority list for information and early access.
<!-- Icon Blocks -->
<div id="aboutSection" class="container content-space-t-2 content-space-t-lg-3">
<!-- Heading -->
<div class="w-lg-75 text-center mx-auto mb-5 mb-sm-9">
<h2 class="h1">What we do?</h2>
<p>A flexible theme for modern SaaS businesses</p>
</div>
<!-- End Heading -->
<div class="row">
<div class="col-md-4 mb-7">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<span class="svg-icon svg-icon-lg text-primary mb-3">
@@include("../assets/vendor/duotone-icons/abs/abs028.svg")
</span>
<h3>Industry-leading designs</h3>
<p>Achieve virtually any design and layout from within the one template.</p>
</div>
<!-- End Icon Blocks -->
</div>
<!-- End Col -->
<div class="col-md-4 mb-7">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<span class="svg-icon svg-icon-lg text-primary mb-3">
@@include("../assets/vendor/duotone-icons/fil/fil024.svg")
</span>
<h3>Learn from the docs</h3>
<p>Whether you're a startup or a global enterprise, learn how to integrate with Front.</p>
</div>
<!-- End Icon Blocks -->
</div>
<!-- End Col -->
<div class="col-md-4 mb-7">
<!-- Icon Blocks -->
<div class="text-center px-lg-3">
<span class="svg-icon svg-icon-lg text-primary mb-3">
@@include("../assets/vendor/duotone-icons/gen/gen022.svg")
</span>
<h3>Accelerate your business</h3>
<p>We help power millions of businesses to built and run smoothly.</p>
</div>
<!-- End Icon Blocks -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End Icon Blocks -->
<!-- Devices -->
<div class="container">
<div class="w-75 mx-auto mb-7">
<img class="img-fluid" src="../assets/svg/components/three-pointers.svg" alt="SVG Arrow">
</div>
<!-- Heading -->
<div class="w-md-60 w-lg-50 text-center mx-auto mb-7">
<p><span class="text-dark fw-semibold">It is fast and easy.</span> Create your first and ongoing website with Front.</p>
</div>
<!-- End Heading -->
<!-- Devices -->
<div class="devices">
<!-- Mobile Device -->
<figure class="device-mobile rotated-3d-right">
<div class="device-mobile-frame">
<img class="device-mobile-img" src="../assets/img/407x867/img1.jpg" alt="Image Description">
</div>
</figure>
<!-- End Mobile Device -->
<!-- Browser Device -->
<figure class="device-browser">
<div class="device-browser-header">
<div class="device-browser-header-btn-list">
<span class="device-browser-header-btn-list-btn"></span>
<span class="device-browser-header-btn-list-btn"></span>
<span class="device-browser-header-btn-list-btn"></span>
</div>
<div class="device-browser-header-browser-bar">www.htmlstream.com/front/</div>
</div>
<div class="device-browser-frame">
<img class="device-browser-img" src="../assets/img/1618x1010/img1.jpg" alt="Image Description">
</div>
</figure>
<!-- End Browser Device -->
</div>
<!-- End Devices -->
<div class="text-center mx-auto" style="max-width: 20rem;">
<p class="small">We are launching soon. Join the priority list for information and early access.</p>
</div>
</div>
<!-- End Devices -->
Component #9
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.
<!-- Icon Blocks -->
<div class="container content-space-2 content-space-lg-3">
<!-- Heading -->
<div class="w-md-75 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
<span class="text-cap">What we do</span>
<h2>Since 2007, we have helped 25 companies launch over 1k incredible products</h2>
</div>
<!-- End Heading -->
<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="d-flex pe-md-5">
<div class="flex-shrink-0">
<div class="svg-icon text-primary">
@@include("../assets/vendor/duotone-icons/teh/teh003.svg")
</div>
</div>
<div class="flex-grow-1 ms-3">
<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="d-flex ps-md-5">
<div class="flex-shrink-0">
<div class="svg-icon text-primary">
@@include("../assets/vendor//duotone-icons/gen/gen020.svg")
</div>
</div>
<div class="flex-grow-1 ms-3">
<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="d-flex pe-md-5">
<div class="flex-shrink-0">
<div class="svg-icon text-primary">
@@include("../assets/vendor//duotone-icons/gen/gen013.svg")
</div>
</div>
<div class="flex-grow-1 ms-3">
<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="d-flex ps-md-5">
<div class="flex-shrink-0">
<div class="svg-icon text-primary">
@@include("../assets/vendor/duotone-icons/gen/gen017.svg")
</div>
</div>
<div class="flex-grow-1 ms-3">
<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="d-flex pe-md-5">
<div class="flex-shrink-0">
<div class="svg-icon text-primary">
@@include("../assets/vendor/duotone-icons/gen/gen022.svg")
</div>
</div>
<div class="flex-grow-1 ms-3">
<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="d-flex ps-md-5">
<div class="flex-shrink-0">
<div class="svg-icon text-primary">
@@include("../assets/vendor/duotone-icons/cod/cod012.svg")
</div>
</div>
<div class="flex-grow-1 ms-3">
<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 Icon Blocks -->
Component #10
Company values
The Front culture
—
Hit heavy, stay small
Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.
—
Ambition by the boatload
We love people who aim for greatness. They inspire and excite their teammates, raising the bar for all of us.
—
Open communication
We're big fans of transparency for many reasons, but the abridged version is: it makes easier.
—
Autonomy and attitude
We're a team of self-starters who take serious pride in our work – and it shows.
—
Support and win
When we empower others to succeed, we all win. (And we're not talking about participation trophies.)
—
Teamwork makes the dream work
We work together to bring our passions and expertise to make Teachable the best it can be.
<!-- Icon Blocks -->
<div class="container">
<div class="border-bottom content-space-2 content-space-lg-3">
<!-- Heading -->
<div class="w-md-75 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">Company values</span>
<h2>The Front culture</h2>
</div>
<!-- End Heading -->
<div class="row">
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
<!-- Icon Blocks -->
<div class="d-flex">
<div class="flex-shrink-0">
<span>—</span>
</div>
<div class="flex-grow-1 ms-3">
<h4>Hit heavy, stay small</h4>
<p>Tight-knit, dynamic teams work with more agility, communication, and freedom than large-scale companies.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
<!-- Icon Blocks -->
<div class="d-flex">
<div class="flex-shrink-0">
<span>—</span>
</div>
<div class="flex-grow-1 ms-3">
<h4>Ambition by the boatload</h4>
<p>We love people who aim for greatness. They inspire and excite their teammates, raising the bar for all of us.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-md-4 mb-3 mb-sm-7">
<!-- Icon Blocks -->
<div class="d-flex">
<div class="flex-shrink-0">
<span>—</span>
</div>
<div class="flex-grow-1 ms-3">
<h4>Open communication</h4>
<p>We're big fans of transparency for many reasons, but the abridged version is: it makes easier.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
<!-- Icon Blocks -->
<div class="d-flex">
<div class="flex-shrink-0">
<span>—</span>
</div>
<div class="flex-grow-1 ms-3">
<h4>Autonomy and attitude</h4>
<p>We're a team of self-starters who take serious pride in our work – and it shows.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
<!-- Icon Blocks -->
<div class="d-flex">
<div class="flex-shrink-0">
<span>—</span>
</div>
<div class="flex-grow-1 ms-3">
<h4>Support and win</h4>
<p>When we empower others to succeed, we all win. (And we're not talking about participation trophies.)</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
<div class="col-sm-6 col-md-4">
<!-- Icon Blocks -->
<div class="d-flex">
<div class="flex-shrink-0">
<span>—</span>
</div>
<div class="flex-grow-1 ms-3">
<h4>Teamwork makes the dream work</h4>
<p>We work together to bring our passions and expertise to make Teachable the best it can be.</p>
</div>
</div>
<!-- End Icon Blocks -->
</div>
</div>
</div>
</div>
<!-- End Icon Blocks -->
Component #11
Secure checkout
Guaranteed safe checkout
30 Days return
We offer you a full refund within 30 days of purchase.
Free shipping
Automatically receive free standard shipping on every order.
<!-- Icon Blocks -->
<div class="border-bottom">
<div class="container content-space-2">
<div class="row">
<div class="col-md-4 mb-7 mb-md-0">
<!-- Icon Block -->
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-4x3" src="../assets/svg/illustrations/oc-protected-card.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-4">
<h4 class="mb-1">Secure checkout</h4>
<p class="small mb-0">Guaranteed safe checkout</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<!-- End Col -->
<div class="col-md-4 mb-7 mb-md-0">
<!-- Icon Block -->
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-4x3" src="../assets/svg/illustrations/oc-return.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-4">
<h4 class="mb-1">30 Days return</h4>
<p class="small mb-0">We offer you a full refund within 30 days of purchase.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<!-- End Col -->
<div class="col-md-4">
<!-- Icon Block -->
<div class="d-flex">
<div class="flex-shrink-0">
<img class="avatar avatar-4x3" src="../assets/svg/illustrations/oc-truck.svg" alt="Image Description">
</div>
<div class="flex-grow-1 ms-4">
<h4 class="mb-1">Free shipping</h4>
<p class="small mb-0">Automatically receive free standard shipping on every order.</p>
</div>
</div>
<!-- End Icon Block -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
</div>
<!-- End Icon Blocks -->