Features Blocks
Component 1
Design in Sketch
Add live animations and 3d elements to your design with our incredibly powerful plugin. Collaborate and share ideas with your team members and export assets for developers Instantly.
<!-- Muse Section -->
<section class="muse-section text-center">
<h2 class="display-4 mb-4">
Design in
<span id="type-captions" style="display: none;">
<span> </span>
<span>Figma</span>
<span>Adobe XD</span>
<span>Sketch</span>
</span>
<span id="muse-type" class="type-line" style="white-space:pre;">Sketch</span>
</h2>
<div class="row">
<div class="col-md-9 col-xl-8 m-auto">
<p class="big pb-0 pb-md-3 text-black-600 lh-lg">Add live animations and 3d elements to your design with our incredibly powerful plugin. Collaborate and share ideas with your team members and export assets for developers Instantly. </p>
</div>
</div>
<div class="mt-1 mt-md-4 overlay-center">
<img src="../assets/img/templates/figma.png" class="img-fluid shadow-dark-80 rounded-6" alt="Figma">
<a href="#" data-toggle="modal" data-target="#staticBackdrop" class="btn btn-lg btn-success rounded-pill">
<svg class="mr-2" data-name="icons/tabler/play-fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Play Fill background" width="16" height="16" fill="none"></rect>
<path d="M0,.687V15.313a.672.672,0,0,0,1.025.584L12.68,8.584a.693.693,0,0,0,0-1.168L1.025.1A.672.672,0,0,0,0,.687Z" transform="translate(3)" fill="#ffffff"></path>
</svg> See it in action</a>
</div>
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-body pt-0">
<button type="button" class="btn-close float-right modal-close" data-dismiss="modal" aria-label="Close">
<img src="../assets/svg/icons/close1.svg" alt="Close">
</button>
<div class="ratio ratio-16x9 mt-4 mb-4">
<iframe class="mt-3" src="https://www.youtube.com/embed/zypUBKsov1k" title="YouTube video" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="../assets/vendor/typed.js/lib/typed.min.js"></script>
<script>
//Muse Typed JavaScript
var typed = new Typed("#muse-type", {
stringsElement: '#type-captions',
typeSpeed: 150,
backSpeed: 50,
backDelay: 1500,
startDelay: 1000,
loop: true,
});
</script>
Component 2
Integrations
Latest and most powerful platforms
Add live animations and 3d elements to your design with our incredibly powerful plugin. Collaborate and share ideas with your team members and export assets for developers Instantly.
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="row">
<div class="col-lg-5">
<h6>Integrations</h6>
<h2 class="mt-2 h1">Latest and most powerful platforms</h2>
<p class="mt-3 lh-lg">Add live animations and 3d elements to your design with our incredibly powerful plugin. Collaborate and share ideas with your team members and export assets for developers Instantly.</p>
<div class="mt-3 mt-md-4 mb-2">
<a href="javascript:void(0);" class="btn btn-lg btn-link link-success">See Integrations <svg class="ml-1" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 10 18">
<path d="M.293.293a1,1,0,0,1,1.3-.1l.112.1,8,8a1,1,0,0,1,.1,1.3l-.1.112-8,8A1,1,0,0,1,.2,16.405l.1-.112L7.585,9,.293,1.707A1,1,0,0,1,.2.405Z" transform="translate(0 0)" fill="#20c997"></path>
</svg></a>
</div>
</div>
<div class="col-lg-7">
<ul class="feature-list">
<li class="aos-init aos-animate">
<a href="javascript:void(0);" class="transition-3d-hover"><img src="../assets/img/templates/airbnb.svg" alt="Airbnb"></a>
</li>
<li class="aos-init aos-animate">
<a href="javascript:void(0);" class="transition-3d-hover"><img src="../assets/img/templates/dropbox-2.svg" alt="Dropbox"></a>
</li>
<li class="aos-init aos-animate">
<a href="javascript:void(0);" class="transition-3d-hover"><img src="../assets/img/templates/figma.svg" alt="Figma"></a>
</li>
<li class="aos-init aos-animate">
<a href="javascript:void(0);" class="transition-3d-hover"><img src="../assets/img/templates/slack.svg" alt="Slack"></a>
</li>
<li class="aos-init aos-animate">
<a href="javascript:void(0);" class="transition-3d-hover"><img src="../assets/img/templates/evernote.svg" alt="Evernote"></a>
</li>
<li class="aos-init aos-animate">
<a href="javascript:void(0);" class="transition-3d-hover"><img src="../assets/img/templates/zeplin.svg" alt="Zeplin"></a>
</li>
</ul>
</div>
</div>
</section>
</div>
Component 3
We care about your wellbeing
-
1Top of the line equipment and tools
-
2Leading doctors and nurses in the industry
-
3Easy Followups and appointment booking
-
424/7 phone support and case assistance
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="row align-items-center">
<div class="col-lg-5">
<div class="pr-lg-4">
<h2 class="h1">We care about your wellbeing</h2>
<ul class="number-list pt-1">
<li>
<div><small class="circle circle-lg">1</small></div>
<span>Top of the line equipment and tools</span>
</li>
<li>
<div><small class="circle circle-lg">2</small></div>
<span>Leading doctors and nurses in the industry</span>
</li>
<li>
<div><small class="circle circle-lg">3</small></div>
<span>Easy Followups and appointment booking</span>
</li>
<li>
<div><small class="circle circle-lg">4</small></div>
<span>24/7 phone support and case assistance</span>
</li>
</ul>
</div>
</div>
<div class="col-lg-7">
<img src="../assets/img/templates/about-clinic.jpg" class="img-fluid w-100 rounded-12" alt="Travel">
</div>
</div>
</section>
</div>
Component 4
Drag and drop
Drag and drop components
The main goal was to further improve Sketch user interface for a non-obstructive workflow while maintaining familiarity.
See Integrations
<div class="bg-black-800 saas-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="row">
<div class="col-md-6">
<h5>Drag and drop</h5>
<h2 class="h1 mb-3">Drag and drop components</h2>
<p class="has-line big lh-lg">The main goal was to further improve Sketch user interface for a non-obstructive workflow while maintaining familiarity.</p>
<a href="#" class="btn btn-link mt-3 link-danger mb-4">See Integrations <svg class="ml-2" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#dc3545"></path>
</svg></a>
</div>
<div class="col-md-6">
<div class="row text-center intigration-element">
<div class="col-4 px-3 px-lg-4">
<div class="rounded-12 bg-gray-800 py-3 h-100">
<a href="#" class="p-4 d-block"><img src="../assets/img/templates/smilies.svg" alt="img"></a>
<a href="#" class="p-4 d-block"><img src="../assets/img/templates/number6.svg" alt="img"></a>
<a href="#" class="p-4 d-block"><img src="../assets/img/templates/placeholder2.svg" alt="img"></a>
<a href="#" class="p-4 d-block"><img src="../assets/img/templates/start-icon.svg" alt="img"></a>
</div>
</div>
<div class="col-4 px-3 px-lg-4">
<div class="rounded-12 bg-gray-800 py-3 h-100">
<a href="#" class="p-4 d-block"><img src="../assets/img/templates/heart.svg" alt="img"></a>
<a href="#" class="p-4 d-block"><img src="../assets/img/templates/active-user.svg" alt="img"></a>
<a href="#" class="p-4 d-block"><img src="../assets/img/templates/fish.svg" alt="img"></a>
<a href="#" class="p-4 d-block"><img src="../assets/img/templates/icon20.svg" alt="img"></a>
</div>
</div>
<div class="col-4 px-3 px-lg-4">
<div class="rounded-12 bg-gray-800 py-3 h-100">
<a href="#" class="p-4 d-block"><img src="../assets/img/templates/revenue.svg" alt="img"></a>
<a href="#" class="p-4 d-block"><img src="../assets/img/templates/hand-wash.svg" alt="img"></a>
<a href="#" class="p-4 d-block"><img src="../assets/img/templates/abacus.svg" alt="img"></a>
<a href="#" class="p-4 d-block"><img src="../assets/img/templates/angry-girl.svg" alt="img"></a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Component 5
Trusted by millions of users.
The main goal was to further improve Sketch user interface for a non-obstructive workflow while maintaining familiarity.
<div class="bg-black-800 saas-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="row">
<div class="col-xl-9">
<h2 class="display-4 mb-3">Trusted by millions of users.</h2>
<p class="has-line big mb-2 lh-lg">The main goal was to further improve Sketch user interface for a non-obstructive workflow while maintaining familiarity.</p>
</div>
</div>
<div class="row align-items-center mt-3 mt-md-5">
<div class="col-xl-4 col-lg-5">
<div class="nav flex-column tabs-has" id="pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="pills-revamped-tab" data-toggle="pill" href="#pills-revamped" role="tab" aria-controls="pills-revamped" aria-selected="true">
<span class="d-block mb-1 h4">Revamped icons</span>
<span class="d-block text-white small lh-lg">Lorem Ipsum is simply dummy text of the printing and typesettingry.</span>
</a>
<a class="nav-link" id="pills-gui-tab" data-toggle="pill" href="#pills-gui" role="tab" aria-controls="pills-gui" aria-selected="false">
<span class="d-block mb-1 h4">New GUI</span>
<span class="d-block text-white small lh-lg">Lorem Ipsum is simply dummy text of the printing and typesettingry.</span>
</a>
<a class="nav-link mb-0" id="pills-collaboration-tab" data-toggle="pill" href="#pills-collaboration" role="tab" aria-controls="pills-collaboration" aria-selected="false">
<span class="d-block mb-1 h4">Collaboration</span>
<span class="d-block text-white small lh-lg">Lorem Ipsum is simply dummy text of the printing and typesettingry.</span>
</a>
</div>
</div>
<div class="col-xl-8 col-lg-7">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-revamped" role="tabpanel" aria-labelledby="pills-revamped-tab">
<div class="overlay-center">
<img src="../assets/img/templates/saas-tab.svg" alt="img" class="rounded-12">
</div>
</div>
<div class="tab-pane fade" id="pills-gui" role="tabpanel" aria-labelledby="pills-gui-tab">
<div class="overlay-center">
<img src="../assets/img/templates/saas-tab.svg" alt="img" class="rounded-12">
</div>
</div>
<div class="tab-pane fade" id="pills-collaboration" role="tabpanel" aria-labelledby="pills-collaboration-tab">
<div class="overlay-center">
<img src="../assets/img/templates/saas-tab.svg" alt="img" class="rounded-12">
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Component 6
COMMITED TO PERFECTION
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled.
-
SUPER FAST SHIPPING
On the other hand, we denounce with righteous indignation and
-
30 DAY MONEY BACK
On the other hand, we denounce with righteous indignation and
-
24/7 SUPPORT
On the other hand, we denounce with righteous indignation and
-
FREE RETURNS
On the other hand, we denounce with righteous indignation and
This order process is provided by Paddle.com, who handle all payment services, invoicing and download links. Need more information? You can always reach us at support@fabrx.co
<div class="bg-black-800 saas-template">
<div class="container">
<!-- Muse Section, Perfection Section -->
<section class="muse-section perfection-section">
<div class="row g-0 border-top">
<div class="col-lg-12 col-xl-4 py-md-5 border-bottom">
<h2 class="mb-2">COMMITED TO PERFECTION</h2>
<p class="lh-lg pr-lg-5 mr-xl-2">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled.</p>
</div>
<div class="col-md-6 col-xl-4 border-left border-right border-bottom">
<ul class="perfection-list">
<li>
<div>
<span class="bg-success circle circle-lg">
<svg data-name="icons/tabler/notification" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Notification background" width="16" height="16" fill="none"></rect>
<path d="M4.108,13.087l0-.164v-.205H.617a.616.616,0,0,1-.3-1.151,2.668,2.668,0,0,0,1.3-1.773l.024-.153V7.151A6.328,6.328,0,0,1,4.861,1.915l.1-.053,0-.012A2.246,2.246,0,0,1,7.043,0L7.18,0A2.252,2.252,0,0,1,9.372,1.715l.03.147.1.053a6.371,6.371,0,0,1,3.2,5.027l.015.237,0,2.388a2.677,2.677,0,0,0,1.334,2,.616.616,0,0,1-.22,1.146l-.084.005H10.257v.205a3.077,3.077,0,0,1-6.15.164Zm1.227-.164a1.846,1.846,0,0,0,3.688.126l0-.126v-.205H5.334ZM6.161,2.152l-.008.158,0,.03-.016.08L6.107,2.5l-.036.071L6.047,2.6,6,2.667l-.024.025-.033.031-.066.049-.073.04A5.131,5.131,0,0,0,2.887,6.973l-.014.206,0,2.535a3.917,3.917,0,0,1-.626,1.694l-.056.079h9.991l0-.008a4,4,0,0,1-.655-1.634l-.029-.2V7.208a5.116,5.116,0,0,0-2.93-4.4.613.613,0,0,1-.346-.468l-.006-.088a1.026,1.026,0,0,0-2.046-.1Z" transform="translate(1)" fill="#ffffff"></path>
</svg>
</span>
</div>
<div class="perfection-right">
<h6 class="mb-2">SUPER FAST SHIPPING</h6>
<p class="small lh-lg text-gray-600 mb-1">On the other hand, we denounce with righteous indignation and</p>
</div>
</li>
<li>
<div>
<span class="bg-success circle circle-lg">
<svg data-name="icons/tabler/notification" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Notification background" width="16" height="16" fill="none"></rect>
<path d="M4.108,13.087l0-.164v-.205H.617a.616.616,0,0,1-.3-1.151,2.668,2.668,0,0,0,1.3-1.773l.024-.153V7.151A6.328,6.328,0,0,1,4.861,1.915l.1-.053,0-.012A2.246,2.246,0,0,1,7.043,0L7.18,0A2.252,2.252,0,0,1,9.372,1.715l.03.147.1.053a6.371,6.371,0,0,1,3.2,5.027l.015.237,0,2.388a2.677,2.677,0,0,0,1.334,2,.616.616,0,0,1-.22,1.146l-.084.005H10.257v.205a3.077,3.077,0,0,1-6.15.164Zm1.227-.164a1.846,1.846,0,0,0,3.688.126l0-.126v-.205H5.334ZM6.161,2.152l-.008.158,0,.03-.016.08L6.107,2.5l-.036.071L6.047,2.6,6,2.667l-.024.025-.033.031-.066.049-.073.04A5.131,5.131,0,0,0,2.887,6.973l-.014.206,0,2.535a3.917,3.917,0,0,1-.626,1.694l-.056.079h9.991l0-.008a4,4,0,0,1-.655-1.634l-.029-.2V7.208a5.116,5.116,0,0,0-2.93-4.4.613.613,0,0,1-.346-.468l-.006-.088a1.026,1.026,0,0,0-2.046-.1Z" transform="translate(1)" fill="#ffffff"></path>
</svg>
</span>
</div>
<div class="perfection-right">
<h6 class="mb-2">30 DAY MONEY BACK</h6>
<p class="small lh-lg text-gray-600 mb-1">On the other hand, we denounce with righteous indignation and</p>
</div>
</li>
</ul>
</div>
<div class="col-md-6 col-xl-4 border-bottom">
<ul class="perfection-list">
<li>
<div>
<span class="bg-success circle circle-lg">
<svg data-name="icons/tabler/notification" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Notification background" width="16" height="16" fill="none"></rect>
<path d="M4.108,13.087l0-.164v-.205H.617a.616.616,0,0,1-.3-1.151,2.668,2.668,0,0,0,1.3-1.773l.024-.153V7.151A6.328,6.328,0,0,1,4.861,1.915l.1-.053,0-.012A2.246,2.246,0,0,1,7.043,0L7.18,0A2.252,2.252,0,0,1,9.372,1.715l.03.147.1.053a6.371,6.371,0,0,1,3.2,5.027l.015.237,0,2.388a2.677,2.677,0,0,0,1.334,2,.616.616,0,0,1-.22,1.146l-.084.005H10.257v.205a3.077,3.077,0,0,1-6.15.164Zm1.227-.164a1.846,1.846,0,0,0,3.688.126l0-.126v-.205H5.334ZM6.161,2.152l-.008.158,0,.03-.016.08L6.107,2.5l-.036.071L6.047,2.6,6,2.667l-.024.025-.033.031-.066.049-.073.04A5.131,5.131,0,0,0,2.887,6.973l-.014.206,0,2.535a3.917,3.917,0,0,1-.626,1.694l-.056.079h9.991l0-.008a4,4,0,0,1-.655-1.634l-.029-.2V7.208a5.116,5.116,0,0,0-2.93-4.4.613.613,0,0,1-.346-.468l-.006-.088a1.026,1.026,0,0,0-2.046-.1Z" transform="translate(1)" fill="#ffffff"></path>
</svg>
</span>
</div>
<div class="perfection-right">
<h6 class="mb-2">24/7 SUPPORT</h6>
<p class="small lh-lg text-gray-600 mb-1">On the other hand, we denounce with righteous indignation and</p>
</div>
</li>
<li>
<div>
<span class="bg-success circle circle-lg">
<svg data-name="icons/tabler/notification" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Notification background" width="16" height="16" fill="none"></rect>
<path d="M4.108,13.087l0-.164v-.205H.617a.616.616,0,0,1-.3-1.151,2.668,2.668,0,0,0,1.3-1.773l.024-.153V7.151A6.328,6.328,0,0,1,4.861,1.915l.1-.053,0-.012A2.246,2.246,0,0,1,7.043,0L7.18,0A2.252,2.252,0,0,1,9.372,1.715l.03.147.1.053a6.371,6.371,0,0,1,3.2,5.027l.015.237,0,2.388a2.677,2.677,0,0,0,1.334,2,.616.616,0,0,1-.22,1.146l-.084.005H10.257v.205a3.077,3.077,0,0,1-6.15.164Zm1.227-.164a1.846,1.846,0,0,0,3.688.126l0-.126v-.205H5.334ZM6.161,2.152l-.008.158,0,.03-.016.08L6.107,2.5l-.036.071L6.047,2.6,6,2.667l-.024.025-.033.031-.066.049-.073.04A5.131,5.131,0,0,0,2.887,6.973l-.014.206,0,2.535a3.917,3.917,0,0,1-.626,1.694l-.056.079h9.991l0-.008a4,4,0,0,1-.655-1.634l-.029-.2V7.208a5.116,5.116,0,0,0-2.93-4.4.613.613,0,0,1-.346-.468l-.006-.088a1.026,1.026,0,0,0-2.046-.1Z" transform="translate(1)" fill="#ffffff"></path>
</svg>
</span>
</div>
<div class="perfection-right">
<h6 class="mb-2">FREE RETURNS</h6>
<p class="small lh-lg text-gray-600 mb-1">On the other hand, we denounce with righteous indignation and</p>
</div>
</li>
</ul>
</div>
</div>
<div class="row pt-4">
<div class="col-xl-7">
<p class="small text-left text-gray-600 lh-lg mb-0">This order process is provided by Paddle.com, who handle all payment services, invoicing and download links. Need more information? You can always reach us at <a href="mailto:support@fabrx.co" class="text-gray-600">support@fabrx.co</a></p>
</div>
</div>
</section>
</div>
</div>
Component 7
Passion and finesse
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
Precison and reach
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="rounded-24 overflow-hidden bg-white shadow-dark-80">
<div class="row g-0 align-items-center bg-teal-50">
<div class="col-lg-6 text-center p-5">
<img src="../assets/img/templates/passion.svg" alt="img">
</div>
<div class="col-lg-6 bg-white">
<div class="p-4 p-lg-5 mx-md-3 mt-2 my-lg-5">
<h3>Passion and finesse</h3>
<p class="big mb-4 lh-lg">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
<h3 class="pt-2">Precison and reach</h3>
<p class="big lh-lg">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
</div>
</div>
</div>
</section>
</div>
Component 8
Integrations
Get going in 3 easy steps
-
1
Add your site
Simply add your domain and verify it.
-
2
Select tool
Copy and paste code to your site
-
You’re done!
Start monitoring
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="row pb-md-5">
<div class="col-lg-12 text-center">
<h5>Integrations</h5>
<h2 class="h1">Get going in 3 easy steps</h2>
</div>
</div>
<ul class="step-list mb-4 mt-3">
<li class="active">
<span class="circle circle-lg bg-cyan-600">1</span>
<h5 class="mb-1 mt-3">Add your site</h5>
<p>Simply add your domain and verify it.</p>
</li>
<li class="active">
<span class="circle circle-lg bg-cyan-600">2</span>
<h5 class="mb-1 mt-3">Select tool</h5>
<p>Copy and paste code to your site</p>
</li>
<li>
<span class="circle circle-lg bg-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="14.914" viewBox="0 0 20 14.914">
<path d="M6.793,14.621l-6.5-6.5a1,1,0,0,1,0-1.414L1.707,5.293a1,1,0,0,1,1.414,0L7.5,9.672,16.879.293a1,1,0,0,1,1.414,0l1.414,1.414a1,1,0,0,1,0,1.414l-11.5,11.5a1,1,0,0,1-1.414,0Z" fill="#6c757d"></path>
</svg>
</span>
<h5 class="mb-1 mt-3">You’re done!</h5>
<p>Start monitoring</p>
</li>
</ul>
<div class="border-0 rounded-12 bg-cyan-600 text-center pt-5">
<img src="../assets/img/templates/step2.jpg" alt="img" class="mt-4">
</div>
</section>
</div>
Component 9
Integrations
Latest and most powerful tech.
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?
Plugins
354
Users
12k
Symbols
89
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="row align-items-center">
<div class="col-lg-6 order-lg-2">
<div class="px-lg-5">
<h5>Integrations</h5>
<h2 class="h1 mb-3">Latest and most powerful tech.</h2>
<p class="lh-lg">Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?</p>
<div class="row">
<div class="col-4">
<small class="text-gray-600">Plugins</small>
<h3 class="text-black-600 counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="354" data-purecounter-duration="0">354</h3>
</div>
<div class="col-4">
<small class="text-gray-600">Users</small>
<h3 class="text-black-600"><span class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="12" data-purecounter-duration="0">12</span>k</h3>
</div>
<div class="col-4">
<small class="text-gray-600">Symbols</small>
<h3 class="text-black-600 counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="89" data-purecounter-duration="0">89</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card border-0 rounded-24 shadow-dark-80 text-center overlay-center p-4 p-md-5 mt-4 mt-lg-0">
<span>
<img src="../assets/img/templates/powerfull.png" alt="img">
</span>
</div>
</div>
</div>
</section>
</div>
<script src="../assets/vendor/purecounterjs/dist/purecounter.js"></script>
Component 10
Integrations
Latest and most powerful tech.
-
Live statistics
Add live animations and 3d elements to your design with our incredibly
-
Live statistics
Add live animations and 3d elements to your design with our incredibly
-
Live statistics
Add live animations and 3d elements to your design with our incredibly
19x
Faster performance
80%
More efficent
56
New plugins
<div class="bg-gray-100 saas3-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="px-lg-5 pb-lg-0 pb-md-4">
<h5>Integrations</h5>
<h2 class="h1 mb-md-3">Latest and most powerful tech.</h2>
<ul class="plan-features mb-4 mb-md-0">
<li>
<small class="shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 10 10">
<rect data-name="Icons/Tabler/Check background" width="10" height="10" fill="none"></rect>
<path d="M9.224.133a.455.455,0,0,1,.687.592L9.867.776,3.806,6.837a.455.455,0,0,1-.592.044l-.051-.044L.133,3.806a.455.455,0,0,1,.592-.687l.051.044L3.485,5.872Z" transform="translate(0 1.25)" fill="#20C997"></path>
</svg>
</small>
<div class="feature-right">
<strong class="mb-1 h5 d-block">Live statistics</strong>
<p>Add live animations and 3d elements to your design with our incredibly</p>
</div>
</li>
<li>
<small class="shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 10 10">
<rect data-name="Icons/Tabler/Check background" width="10" height="10" fill="none"></rect>
<path d="M9.224.133a.455.455,0,0,1,.687.592L9.867.776,3.806,6.837a.455.455,0,0,1-.592.044l-.051-.044L.133,3.806a.455.455,0,0,1,.592-.687l.051.044L3.485,5.872Z" transform="translate(0 1.25)" fill="#20C997"></path>
</svg>
</small>
<div class="feature-right">
<strong class="mb-1 h5 d-block">Live statistics</strong>
<p>Add live animations and 3d elements to your design with our incredibly</p>
</div>
</li>
<li>
<small class="shadow-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 10 10">
<rect data-name="Icons/Tabler/Check background" width="10" height="10" fill="none"></rect>
<path d="M9.224.133a.455.455,0,0,1,.687.592L9.867.776,3.806,6.837a.455.455,0,0,1-.592.044l-.051-.044L.133,3.806a.455.455,0,0,1,.592-.687l.051.044L3.485,5.872Z" transform="translate(0 1.25)" fill="#20C997"></path>
</svg>
</small>
<div class="feature-right">
<strong class="mb-1 h5 d-block">Live statistics</strong>
<p>Add live animations and 3d elements to your design with our incredibly</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-sm-6 col-lg-3 pl-lg-0 pr-lg-3">
<div class="card performance-card border-0 rounded-24 text-center shadow-dark-80 mb-4 mb-md-5">
<span class="circle bg-orange-80"><img src="../assets/img/templates/progress.svg" alt="img"></span>
<h2 class="mb-0 display-3">19x</h2>
<small class="text-gray-600">Faster performance</small>
</div>
<div class="card performance-card border-0 rounded-24 text-center shadow-dark-80">
<span class="circle bg-purple-80"><img src="../assets/img/templates/battery-charge.svg" alt="img"></span>
<h2 class="mb-0 display-3">80%</h2>
<small class="text-gray-600">More efficent</small>
</div>
</div>
<div class="col-sm-6 col-lg-3 pr-lg-0 pl-lg-3">
<div class="card performance-card border-0 rounded-24 text-center shadow-dark-80 my-4">
<span class="circle bg-green-80"><img src="../assets/img/templates/plugin.svg" alt="img"></span>
<h2 class="mb-0 display-3">56</h2>
<small class="text-gray-600">New plugins</small>
</div>
</div>
</div>
</section>
</div>
</div>
Component 11
Integrations
Latest and most powerful tech.
Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?
Learn More
<div class="agency-template bg-dark">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="row pt-0 pt-md-5 align-items-center">
<div class="col-lg-6 pb-5">
<div class="pr-2 pr-md-5 mr-0 mr-md-5">
<h6>Integrations</h6>
<h2 class="h1 mb-3">Latest and most powerful tech.</h2>
<p class="lh-lg big">Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia?</p>
<a href="#" class="btn btn-lg btn-link mt-3">Learn More <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#ffffff"></path>
</svg></a>
</div>
</div>
<div class="col-lg-6 pt-5">
<ul class="tech-list">
<li>
<a href="#" class="avatar avatar-xl bg-black-800 avatar-circle avatar-center"><img src="../assets/img/templates/sass.svg" alt="img"></a>
</li>
<li>
<a href="#" class="avatar avatar-xl bg-black-800 avatar-circle avatar-center"><img src="../assets/img/templates/python.svg" alt="img"></a>
</li>
<li>
<a href="#" class="avatar avatar-xl bg-black-800 avatar-circle avatar-center"><img src="../assets/img/templates/bootstrap.svg" alt="img"></a>
</li>
<li>
<a href="#" class="avatar avatar-xl bg-black-800 avatar-circle avatar-center"><img src="../assets/img/templates/vue.svg" alt="img"></a>
</li>
<li>
<a href="#" class="avatar avatar-xl bg-black-800 avatar-circle avatar-center"><img src="../assets/img/templates/angular.svg" alt="img"></a>
</li>
<li>
<a href="#" class="avatar avatar-xl bg-black-800 avatar-circle avatar-center"><img src="../assets/img/templates/html5.svg" alt="img"></a>
</li>
<li>
<a href="#" class="avatar avatar-xl bg-black-800 avatar-circle avatar-center"><img src="../assets/img/templates/react2.svg" alt="img"></a>
</li>
</ul>
</div>
</div>
</section>
</div>
</div>
Component 12
120+
Countries
3500+
Clients
120
Gadgets
455
Offices
<div class="container">
<hr class="my-0 bg-gray-300">
<!-- Muse Section -->
<section class="muse-section">
<div class="row">
<div class="col-6 col-md-3 text-center my-2">
<h3 class="display-4 mb-0"><span class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="120">120</span>+</h3>
<p class="mb-0">Countries</p>
</div>
<div class="col-6 col-md-3 text-center my-2">
<h3 class="display-4 mb-0"><span class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="3500">3500</span>+</h3>
<p class="mb-0">Clients</p>
</div>
<div class="col-6 col-md-3 text-center my-2">
<h3 class="display-4 mb-0"><span class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="120">120</span></h3>
<p class="mb-0">Gadgets</p>
</div>
<div class="col-6 col-md-3 text-center my-2">
<h3 class="display-4 mb-0"><span class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="455">455</span></h3>
<p class="mb-0">Offices</p>
</div>
</div>
</section>
<hr class="my-md-0 bg-gray-300">
</div>