First Commit

This commit is contained in:
cesnimda
2026-03-21 11:55:27 +01:00
commit 2e8a29b4d0
1757 changed files with 166084 additions and 0 deletions
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,64 @@
<!-- [ Benefit ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 sm:gap-8">
<div class="flex flex-col gap-2 sm:gap-3 items-center text-center">
<h2>Data Processing at its Peak</h2>
<h6 class="text-theme-textsecondary max-w-[750px]">
See the success stories of organizations scaling with SaasAble
</h6>
</div>
<div class="flex flex-col gap-3 lg:flex-row">
<div class="basis-full lg:basis-2/4 flex flex-col sm:flex-row gap-3">
<div class="basis-full md:basis-2/4">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full p-4 sm:p-5 md:p-6">
<div class="flex flex-col h-full gap-1 items-center">
<div class="flex flex-row items-end">
<div class="h1">99</div>
<div class="h3 text-theme-text-secondary mb-0.5 md:mb-1.5">%</div>
</div>
<p class="body1 text-center text-theme-textsecondary">Compression Efficiency Achieved</p>
</div>
</div>
</div>
<div class="basis-full md:basis-2/4">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full p-4 sm:p-5 md:p-6">
<div class="flex flex-col h-full gap-1 items-center">
<div class="flex flex-row items-end">
<div class="h1">40</div>
<div class="h3 text-theme-text-secondary mb-0.5 md:mb-1.5">%</div>
</div>
<p class="body1 text-center text-theme-textsecondary">Reduction in Storage Costs</p>
</div>
</div>
</div>
</div>
<div class="basis-full lg:basis-2/4 flex flex-col sm:flex-row gap-3">
<div class="basis-full md:basis-2/4">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full p-4 sm:p-5 md:p-6">
<div class="flex flex-col h-full gap-1 items-center">
<div class="flex flex-row items-end">
<div class="h1">80</div>
<div class="h3 text-theme-text-secondary mb-0.5 md:mb-1.5">%</div>
</div>
<p class="body1 text-center text-theme-textsecondary">Reduction in Over-Provisioning</p>
</div>
</div>
</div>
<div class="basis-full md:basis-2/4">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full p-4 sm:p-5 md:p-6">
<div class="flex flex-col h-full gap-1 items-center">
<div class="flex flex-row items-end">
<div class="h1">4.5</div>
<div class="h3 text-theme-text-secondary mb-0.5 md:mb-1.5">/5</div>
</div>
<p class="body1 text-center text-theme-textsecondary">Average User Satisfaction Rating</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- [ Benefit ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,55 @@
<!-- [ Clientele ] start -->
<section class="common-section">
<div class="container">
<div class="grid grid-cols-12 gap-5 sm:gap-3">
<div class="col-span-12 sm:col-span-3 self-center">
<h6 class="subtitle2 text-theme-textsecondary">4,000+ companies already growing</h6>
</div>
<div class="col-span-12 sm:col-span-9 self-center">
<div class="clientele-1-marquee overflow-hidden" dir="ltr">
<ul class="list-inline marquee-list flex flex-nowrap items-center justify-center *:px-3 *:sm:px-4 *:md:px-6 *:opacity-40 *:hover:opacity-100 *:transition-all *:duration-500">
<li class="list-inline-item">
@@include('../../images/clientele/Techlify.html', {
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[22px] sm:h-[25px] md:h-[38px]"'
})
</li>
<li class="list-inline-item">
@@include('../../images/clientele/Marketly.html', {
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[22px] sm:h-[25px] md:h-[38px]"'
})
</li>
<li class="list-inline-item">
@@include('../../images/clientele/Realtor.html', {
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[22px] sm:h-[25px] md:h-[38px]"'
})
</li>
<li class="list-inline-item">
@@include('../../images/clientele/Financely.html',{
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[22px] sm:h-[25px] md:h-[38px]"'
})
</li>
<li class="list-inline-item">
@@include('../../images/clientele/Realtor.html', {
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[22px] sm:h-[25px] md:h-[38px]"'
})
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<script type="module">
import marquee from '../assets/js/plugins/vanilla-marquee.min.js';
document.addEventListener('DOMContentLoaded', function () {
new marquee(document.querySelector('.clientele-1-marquee'), {
duplicated: true,
gap: 0,
speed: 50,
pauseOnHover: true,
startVisible: true,
recalcResize: true
});
});
</script>
<!-- [ Clientele ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,109 @@
<!-- [ Contact Us ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-3">
<div class="rounded-3xl sm:rounded-[32px] bg-neutral-100 overflow-hidden relative w-full">
<div class="p-4 sm:p-8 lg:p-10 bg-neutral-200 rounded-3xl sm:rounded-[32px] md:rounded-[40px]">
<div class="flex flex-col items-center text-center gap-2 sm:gap-3">
<h2 class="max-w-[85%] sm:max-w-[80%]">Wed love to hear from you</h2>
<p class="h6 max-w-[60%]">
Explore key statistics and trends shaping our understanding of the current landscape.
</p>
</div>
</div>
<div class="p-4 sm:p-6 lg:p-10 lg:!px-48">
<form action="#">
<div class="flex flex-col gap-6 sm:gap-8">
<div class="grid grid-cols-12 gap-5">
<div class="col-span-12 sm:col-span-6">
<div class="flex flex-col gap-1">
<h6 class="subtitle1">First Name</h6>
<input type="text" class="form-control !bg-transparent" placeholder="First Name">
</div>
</div>
<div class="col-span-12 sm:col-span-6">
<div class="flex flex-col gap-1">
<h6 class="subtitle1">Last Name</h6>
<input type="text" class="form-control !bg-transparent" placeholder="Last Name">
</div>
</div>
<div class="col-span-12 sm:col-span-6">
<div class="flex flex-col gap-1">
<h6 class="subtitle1">Email</h6>
<input type="email" class="form-control !bg-transparent" placeholder="example@gmail.com">
</div>
</div>
<div class="col-span-12 sm:col-span-6">
<div class="flex flex-col gap-1">
<h6 class="subtitle1">Phone number</h6>
<input type="email" class="form-control !bg-transparent" placeholder="Phone number">
</div>
</div>
<div class="col-span-12">
<div class="flex flex-col gap-1">
<h6 class="subtitle1">Message</h6>
<textarea class="form-control !bg-transparent" rows="4" placeholder="Please type your message here.."></textarea>
</div>
</div>
</div>
<div class="text-center">
<button class="btn btn-primary btn-lg">Send Message</button>
</div>
</div>
</form>
</div>
</div>
<div class="flex flex-col sm:flex-row gap-3">
<div class="basis-full sm:basis-4/12">
<div class="rounded-3xl sm:rounded-[32px] bg-neutral-100 overflow-hidden relative w-full h-full">
<div class="flex flex-row sm:flex-col gap-4 sm:gap-8 lg:gap-10 h-full p-4 sm:p-6 lg:p-8">
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center shrink-0">
<i class="ti ti-phone text-2xl leading-none text-primary-500"></i>
</div>
<div class="flex flex-col gap-4 lg:gap-6 h-full items-start justify-between grow">
<div class="flex flex-col gap-2">
<h4>Contact Sale</h4>
<p class="body1">Speak to someone from our sales team.</p>
</div>
<button class="btn btn-md btn-outline-primary">Contact Sales</button>
</div>
</div>
</div>
</div>
<div class="basis-full sm:basis-4/12">
<div class="rounded-3xl sm:rounded-[32px] bg-neutral-100 overflow-hidden relative w-full h-full">
<div class="flex flex-row sm:flex-col gap-4 sm:gap-8 lg:gap-10 h-full p-4 sm:p-6 lg:p-8">
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center shrink-0">
<i class="ti ti-help-circle text-2xl leading-none text-primary-500"></i>
</div>
<div class="flex flex-col gap-4 lg:gap-6 h-full items-start justify-between grow">
<div class="flex flex-col gap-2">
<h4>Have a Question</h4>
<p class="body1">See our frequently asked question</p>
</div>
<button class="btn btn-md btn-outline-primary">Get Answers</button>
</div>
</div>
</div>
</div>
<div class="basis-full sm:basis-4/12">
<div class="rounded-3xl sm:rounded-[32px] bg-neutral-100 overflow-hidden relative w-full h-full">
<div class="flex flex-row sm:flex-col gap-4 sm:gap-8 lg:gap-10 h-full p-4 sm:p-6 lg:p-8">
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center shrink-0">
<i class="ti ti-folder-check text-2xl leading-none text-primary-500"></i>
</div>
<div class="flex flex-col gap-4 lg:gap-6 h-full items-start justify-between grow">
<div class="flex flex-col gap-2">
<h4>Press & Media</h4>
<p class="body1">Get in touch with our PR team</p>
</div>
<button class="btn btn-md btn-outline-primary">Press Contact</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- [ Contact Us ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,55 @@
<!-- [ Call To Action ] start -->
<section class="common-section">
<div class="container">
<div
class="p-6 sm:p-8 md:p-10 rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden flex flex-col gap-6 h-full">
<div class="grid grid-cols-12 gap-y-10 sm:gap-0 md:gap-6">
<div class="col-span-12 sm:col-span-9 lg:col-span-8 self-end">
<div class="flex flex-col gap-10">
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-1">
<div class="flex -space-x-[14px] *:w-[42px] *:h-[42px] *:rounded-full *:border *:border-theme-bg-paper">
<img src="../assets/images/user/avatar1.png" alt="img" class="z-40">
<img src="../assets/images/user/avatar2.png" alt="img" class="z-30">
<img src="../assets/images/user/avatar3.png" alt="img" class="z-20">
<img src="../assets/images/user/avatar4.png" alt="img" class="z-10">
<img src="../assets/images/user/avatar5.png" alt="img" class="z-0">
</div>
<h6 class="subtitle2">10k+ Reviews (4.5 out of 5)</h6>
</div>
<div class="text-primary-500">
@@include('../../images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto"'})
</div>
</div>
<div class="flex flex-col gap-4 sm:gap-10">
<h2 class="text-theme-text-primary">Enhance performance <span class="text-theme-text-secondary">and
efficiency. Dive into SaasAble for a </span>better cloud experience.</h2>
<div class="flex gap-2 flex-col sm:flex-row sm:gap-x-6 flex-wrap">
<div class="flex flex-row items-center gap-2 text-theme-text-secondary">
<i class="ti ti-rosette-discount-check text-2xl leading-none"></i>
<p class="body2">Automated Scaling for Efficiency</p>
</div>
<div class="flex flex-row items-center gap-2 text-theme-text-secondary">
<i class="ti ti-rosette-discount-check text-2xl leading-none"></i>
<p class="body2">Real-time Performance Insights</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-3 lg:col-span-4 self-end relative lg:pl-6 lg:pt-6">
<div class="max-sm:relative max-sm:inline-block">
<div class="absolute -top-9 sm:-top-[98px] lg:-top-[68px] ltr:-right-[70px] ltr:sm:right-10 ltr:lg:right-[100px] rtl:-left-[70px] rtl:sm:left-10 rtl:lg:left-[100px] ltr:rotate-45 ltr:sm:rotate-[320deg] ltr:md:rotate-[0deg] ltr:lg:transform-none rtl:-rotate-45 rtl:-scale-x-100 rtl:sm:-rotate-[320deg] rtl:lg:rotate-[0deg]">
@@include('../../images/arrow.html', {'substyle': 'class="w-[60px] h-[76px] sm:w-[76px] sm:h-[81px] text-primary-500"'})
</div>
<h6 class="subtitle1 text-primary-500 w-[94px] absolute top-[6px] sm:-top-40 lg:-top-[82px] ltr:-right-40 ltr:sm:right-0 rtl:-left-40 rtl:sm:left-0">300+ Client Trust Us</h6>
<div class="ltr:sm:text-right rtl:sm:text-left max-sm:inline-block">
<button class="btn btn-primary btn-lg lg:min-w-[263px]">Get Started</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- [ Call To Action ] end -->
@@ -0,0 +1,73 @@
<!-- [ Call To Action ] start -->
<section class="common-section">
<div class="container">
<div class="grid grid-cols-12 gap-3">
<div class="col-span-12 sm:col-span-8 lg:col-span-9">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden relative">
<div class="flex flex-col items-start gap-11 sm:gap-20 p-6 sm:p-8 lg:p-16 relative z-10">
<div class="flex flex-col gap-10">
<div class="flex flex-row items-center gap-2">
<span class="border border-neutral-600 px-4 py-1.5 rounded-full leading-none">
<span class="caption text-theme-text-secondary">Join Community</span>
</span>
<span class="border-t-2 border-t-theme-divider w-[63px]"></span>
</div>
<div class="flex flex-col gap-2 sm:gap-3">
<h2>SaasAble Community</h2>
<p class="h6 max-w-[478px] text-theme-text-secondary">Collaborate confidently with granular access controls and regulatory compliance.</p>
</div>
</div>
<div class="flex flex-col gap-1.5 max-lg:w-full">
<div class="relative w-full">
<button class="btn btn-primary absolute top-1 ltr:right-1 rtl:left-1 py-[15px] px-8 min-w-[110px] md:min-w-[120px] leading-[1.2]">
Get Started
</button>
<input type="search" class="form-control py-[15.2px] ltr:pl-6 rtl:pr-6 ltr:pr-40 rtl:pl-40 rounded-full bg-neutral-100" placeholder="Enter email" />
</div>
<p class="body2 text-theme-text-secondary">1 email per week. No spam. Ever. Unsubscribe anytime</p>
</div>
</div>
<div class="ltr:-scale-x-100 hidden lg:block absolute ltr:right-[-160px] rtl:left-[-160px] bottom-[-160px]">
@@include('../../images/logo-watermark.html', {
'substyle': 'class="w-[430px] h-[466px] text-primary-500"'
})
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-4 lg:col-span-3">
<div class="flex flex-row sm:flex-col h-full relative">
<div class="basis-2/4 sm:basis-full sm:min-h-[50%]">
<div class="h-full rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden relative">
<div class="flex flex-col items-center gap-2 py-4 sm:py-12 md:py-14 px-4 sm:px-7 text-center">
<div class="h1">10<span class="h2 text-theme-text-secondary">X</span></div>
<p class="body1 text-theme-text-secondary">Achieving faster sales through streamlined</p>
</div>
</div>
</div>
<div class="absolute left-2/4 top-2/4 -translate-x-2/4 -translate-y-2/4 max-sm:rotate-90 z-10">
<div class="text-primary-500">
@@include('../../images/wave.html', {'substyle': 'class="w-[70px] md:w-[122px] h-auto"'})
</div>
</div>
<div class="basis-2/4 sm:basis-full sm:min-h-[50%]">
<div class="h-full rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden relative">
<div class="flex flex-col items-center justify-center gap-2 py-4 sm:py-12 md:py-14 px-4 sm:px-3 text-center h-full">
<div class="flex flex-col gap-1">
<div class="flex -space-x-[14px] *:w-[40px] *:h-[40px] sm:*:w-[58px] sm:*:h-[58px] *:rounded-full *:border *:border-theme-bg-paper">
<img src="../assets/images/user/avatar1.png" alt="img" class="z-40">
<img src="../assets/images/user/avatar2.png" alt="img" class="z-30">
<img src="../assets/images/user/avatar3.png" alt="img" class="z-20">
<img src="../assets/images/user/avatar4.png" alt="img" class="z-10">
<img src="../assets/images/user/avatar5.png" alt="img" class="z-0">
</div>
<h6 class="subtitle2 text-theme-text-secondary">10k+ Reviews (4.5 out of 5)</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- [ Call To Action ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,17 @@
<!-- [ Error 404 ] start -->
<section>
<div class="container">
<div class="flex items-center justify-center w-full h-screen common-section min-h-[450px] sm:min-h-[600px] lg:min-h-[800px]">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden w-full h-full py-6 sm:py-8 lg:py-12">
<div class="flex flex-col justify-center h-full gap-8 sm:gap-2">
@@include('../../images/maintenance/Error404.html', {'substyle': 'class="w-full h-auto"'})
<div class="flex flex-col gap-[18px] items-center -mt-10 lg:mt-[-50px]">
<p class="body1 w-[210px] sm:w-[300px] text-center">Looks like you've taken a wrong turn. Lets get you back on track!</p>
<a href="../index.html" class="btn btn-primary btn-md">Back To Home Page</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- [ Error 404 ] end -->
@@ -0,0 +1,20 @@
<!-- [ Error 500 ] start -->
<section>
<div class="container">
<div class="flex items-center justify-center w-full h-screen common-section min-h-[450px] sm:min-h-[600px] lg:min-h-[800px]">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden w-full h-full relative">
<div class="flex flex-col items-center justify-center h-[70%] gap-[18px]">
<div class="w-full max-w-[340px] sm:max-w-[486px] lg:max-w-[728px] p-4">
@@include('../../images/maintenance/Error500.html', {'substyle': 'class="w-full h-auto"'})
</div>
<p class="body1 w-[248px] sm:w-[340px] lg:w-[448px] text-center">Please try again later or feel free to contact us if the problem persists.</p>
<a href="../index.html" class="btn btn-primary btn-md relative z-20">Back To Home Page</a>
</div>
<div class="w-[95%] lg:w-[90%] absolute -left-0.5 -bottom-1.5">
@@include('../../images/maintenance/Error500Server.html', {'substyle': 'class="w-full h-auto"'})
</div>
</div>
</div>
</div>
</section>
<!-- [ Error 500 ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,485 @@
<link rel="stylesheet" href="../assets/css/plugins/tiny-slider.css" />
<!-- [ Faq ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 sm:gap-8">
<div class="group flex flex-col sm:flex-row items-start sm:items-end gap-8 relative justify-between">
<div class="grow">
<div class="flex flex-col gap-2 sm:gap-3">
<h2>Frequently Asked Questions</h2>
<h6 class="text-theme-textsecondary max-w-[650px]">Answers to common queries about SaasAble.</h6>
</div>
</div>
<div class="leading-none">
<button class="btn btn-primary btn-lg min-w-[215px]">Get in Touch</button>
</div>
</div>
<div class="flex flex-col gap-4 group/faq-flt faq-fiter-wrapper flt-general">
<div class="overflow-hidden relative" dir="ltr">
<div class="faq-slider1 inline-flex items-center gap-2 sm:gap-3 group filter-button flt-all">
<div class="item"><button class="btn btn-md !text-theme-text-primary border-theme-divider hover:bg-neutral-100 hover:!shadow-none !shadow-none group-[.flt-all]/faq-flt:bg-neutral-100" data-filter="all">All</button></div>
<div class="item"><button class="btn btn-md !text-theme-text-primary border-theme-divider hover:bg-neutral-100 hover:!shadow-none !shadow-none group-[.flt-general]/faq-flt:bg-neutral-100 active" data-filter="general">General</button></div>
<div class="item"><button class="btn btn-md !text-theme-text-primary border-theme-divider hover:bg-neutral-100 hover:!shadow-none !shadow-none group-[.flt-pricing]/faq-flt:bg-neutral-100" data-filter="pricing">Pricing & Licenses</button></div>
<div class="item"><button class="btn btn-md !text-theme-text-primary border-theme-divider hover:bg-neutral-100 hover:!shadow-none !shadow-none group-[.flt-support]/faq-flt:bg-neutral-100" data-filter="support">Support & Updates</button></div>
</div>
</div>
<div class="flex flex-col gap-3" id="accordionExample">
<div class="hidden group-[.flt-all]/faq-flt:block group-[.flt-general]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
data-pc-target="#collapse1">
<span class="absolute inset-0"></span>
<div class="grow">
<h4 class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
Is SaasAble only for SaaS web apps?</h4>
</div>
<div class="leading-none">
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
<i
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
<i
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
</div>
</div>
</a>
<div id="collapse1" class="hidden" data-pc-parent="#accordionExample">
<div class="pt-2 sm:pt-3 md:pt-4">
<p class="body1 text-theme-text-secondary">While SaasAble is designed with
SaaS applications in mind, its not limited to SaaS products. SaasAble is multipurpose and can
be used for a variety of websites and applications, whether its for an agency, digital
product, CRM, blog, AI platform, or any other system. SaasAble is versatile and adaptable to
fit any use case, SaaS or not. Its built for all types of projects!</p>
</div>
</div>
</div>
<div class="hidden group-[.flt-all]/faq-flt:block group-[.flt-general]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
data-pc-target="#collapse2">
<span class="absolute inset-0"></span>
<div class="grow">
<h4 class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
What makes SaasAble different from other UI Kits?</h4>
</div>
<div class="leading-none">
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
<i
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
<i
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
</div>
</div>
</a>
<div id="collapse2" class="hidden" data-pc-parent="#accordionExample">
<div class="pt-2 sm:pt-3 md:pt-4">
<p class="body1 text-theme-text-secondary">SaasAble offers industry-specific
templates, a React Material UI Kit, Figma UI Kit, and flexible customization options that
cater to both front-end marketing and admin interfaces.</p>
</div>
</div>
</div>
<div class="hidden group-[.flt-all]/faq-flt:block group-[.flt-general]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
data-pc-target="#collapse3">
<span class="absolute inset-0"></span>
<div class="grow">
<h4 class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
Is SaasAble suitable for both developers and designers?</h4>
</div>
<div class="leading-none">
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
<i
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
<i
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
</div>
</div>
</a>
<div id="collapse3" class="hidden" data-pc-parent="#accordionExample">
<div class="pt-2 sm:pt-3 md:pt-4">
<p class="body1 text-theme-text-secondary">Yes, SaasAble is built for both,
with a Figma UI kit for designers and React code for developers.</p>
<div class="pt-4 md:pt-5">
<ul class="*:py-2 *:last:pb-0 *:first:pt-0 leading-none">
<li>
<div class="flex items-center gap-[10px]">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-textsecondary">Figma UI Kit for Designers.</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-[10px]">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-textsecondary">
React Material UI Code for Developers.
</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-[10px]">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-textsecondary">Seamless Collaboration.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="hidden group-[.flt-all]/faq-flt:block group-[.flt-general]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
data-pc-target="#collapse4">
<span class="absolute inset-0"></span>
<div class="grow">
<h4 class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
What is the difference between the Figma and codebase versions?</h4>
</div>
<div class="leading-none">
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
<i
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
<i
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
</div>
</div>
</a>
<div id="collapse4" class="hidden" data-pc-parent="#accordionExample">
<div class="pt-2 sm:pt-3 md:pt-4">
<p class="body1 text-theme-text-secondary">The Figma version is for design and
prototyping, while the codebase version provides ready-to-use React components for
development.</p>
</div>
</div>
</div>
<div class="hidden group-[.flt-all]/faq-flt:block group-[.flt-general]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
data-pc-target="#collapse5">
<span class="absolute inset-0"></span>
<div class="grow">
<h4 class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
How can I download the template after purchase?</h4>
</div>
<div class="leading-none">
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
<i
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
<i
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
</div>
</div>
</a>
<div id="collapse5" class="hidden" data-pc-parent="#accordionExample">
<div class="pt-2 sm:pt-3 md:pt-4">
<p class="body1 text-theme-text-secondary">You will receive the template in a
.zip format immediately after successfully purchasing the template.</p>
</div>
</div>
</div>
<div class="hidden group-[.flt-all]/faq-flt:block group-[.flt-pricing]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
data-pc-target="#collapse6">
<span class="absolute inset-0"></span>
<div class="grow">
<h4 class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
What's included in the SaasAble license?</h4>
</div>
<div class="leading-none">
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
<i
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
<i
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
</div>
</div>
</a>
<div id="collapse6" class="hidden" data-pc-parent="#accordionExample">
<div class="pt-2 sm:pt-3 md:pt-4">
<p class="body1 text-theme-text-secondary">It includes the Figma UI kit,
React Material UI codebase, regular updates, and customer support.</p>
<div class="pt-4 md:pt-5">
<ul class="*:py-2 *:last:pb-0 *:first:pt-0 leading-none">
<li>
<div class="flex items-center gap-[10px]">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-textsecondary">One License = One End Product</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-[10px]">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-textsecondary">
Separate License for Each Product
</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-[10px]">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-textsecondary">Comply with License Terms</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="hidden group-[.flt-all]/faq-flt:block group-[.flt-pricing]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
data-pc-target="#collapse7">
<span class="absolute inset-0"></span>
<div class="grow">
<h4 class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
Can I use SaasAble for multiple projects?</h4>
</div>
<div class="leading-none">
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
<i
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
<i
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
</div>
</div>
</a>
<div id="collapse7" class="hidden" data-pc-parent="#accordionExample">
<div class="pt-2 sm:pt-3 md:pt-4">
<p class="body1 text-theme-text-secondary">No, one license allows usage in a
single end product. For each new product or project, you are required to purchase a separate
license. This ensures compliance with the licensing terms and provides ongoing support for
each individual product. Make sure to obtain the appropriate license for every new project you
work on.</p>
<div class="pt-4 md:pt-5">
<ul class="*:py-2 *:last:pb-0 *:first:pt-0 leading-none">
<li>
<div class="flex items-center gap-[10px]">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-textsecondary">One License = One End Product</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-[10px]">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-textsecondary">
Separate License for Each Product
</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-[10px]">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-textsecondary">Comply with License Terms</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="hidden group-[.flt-all]/faq-flt:block group-[.flt-pricing]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
data-pc-target="#collapse8">
<span class="absolute inset-0"></span>
<div class="grow">
<h4 class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
Do you offer refunds?</h4>
</div>
<div class="leading-none">
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
<i
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
<i
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
</div>
</div>
</a>
<div id="collapse8" class="hidden" data-pc-parent="#accordionExample">
<div class="pt-2 sm:pt-3 md:pt-4">
<p class="body1 text-theme-text-secondary">Yes, we offer refunds, but only if
you provide a valid reason to support your claim. For more details, please review our MUI
Store Refund Policy.</p>
</div>
</div>
</div>
<div class="hidden group-[.flt-all]/faq-flt:block group-[.flt-support]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
data-pc-target="#collapse9">
<span class="absolute inset-0"></span>
<div class="grow">
<h4 class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
Do I get access to future updates?</h4>
</div>
<div class="leading-none">
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
<i
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
<i
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
</div>
</div>
</a>
<div id="collapse9" class="hidden" data-pc-parent="#accordionExample">
<div class="pt-2 sm:pt-3 md:pt-4">
<p class="body1 text-theme-text-secondary">Yes, you will receive future
updates for 1 year from the date of purchase. If you need updates after 1 year, you will need
to purchase the license again. However, this is not a renewal—your license is valid for a
lifetime, but updates are limited to the 1-year period.</p>
<div class="pt-4 md:pt-5">
<ul class="*:py-2 *:last:pb-0 *:first:pt-0 leading-none">
<li>
<div class="flex items-center gap-[10px]">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-textsecondary">1 Year Free Updates</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-[10px]">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full bg-neutral-100">
<i class="ti ti-check text-[16px] leading-none text-primary-500"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-textsecondary">
License validity is lifetime
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="hidden group-[.flt-all]/faq-flt:block group-[.flt-support]/faq-flt:block px-3 sm:px-4 md:px-6 py-2 sm:py-3 md:py-4 rounded-2xl md:rounded-3xl bg-neutral-100 overflow-hidden">
<a href="#" class="group flex flex-row items-center gap-3 relative" data-pc-toggle="collapse"
data-pc-target="#collapse10">
<span class="absolute inset-0"></span>
<div class="grow">
<h4 class="my-2 group-hover:text-primary-500 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
Is support included with the template purchase?</h4>
</div>
<div class="leading-none">
<div class="group-[.show]:rotate-180 transition duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]">
<i
class="ti ti-plus group-hover:text-primary-500 text-xl leading-none inline-block group-[.show]:hidden"></i>
<i
class="ti ti-minus group-hover:text-primary-500 text-xl leading-none hidden group-[.show]:inline-block"></i>
</div>
</div>
</a>
<div id="collapse10" class="hidden" data-pc-parent="#accordionExample">
<div class="pt-2 sm:pt-3 md:pt-4">
<p class="body1 text-theme-text-secondary">Support is included for 6 months,
but it is limited to resolving issues within the template itself. We do not provide support
for installation, customization queries, or troubleshooting unrelated issues. For ongoing
support beyond 6 months, you will need to extend the support period with an additional
purchase.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="../assets/js/plugins/tiny-slider.js"></script>
<script type="module">
document.addEventListener('DOMContentLoaded', function () {
var slider = tns({
container: '.faq-slider1',
"autoWidth": true,
nav: false,
autoHeight: false,
speed: 500,
gutter: 12,
slideBy: 1,
loop: false,
controls: false,
autoplay: false,
autoplayButtonOutput: false,
autoplayButton: false,
});
});
// Cache elements for repeated use
const filterButtonContainer = document.querySelector('.filter-button');
const filterWrapper = document.querySelector('.faq-fiter-wrapper');
// Check if elements exist to avoid potential errors
if (filterButtonContainer && filterWrapper) {
const buttons = filterButtonContainer.querySelectorAll('button');
// Add event listener to each button
buttons.forEach(button => {
button.addEventListener('click', (event) => {
const filterClass = 'flt-' + event.target.getAttribute('data-filter');
// Remove existing filter classes
removeClassByPrefix(filterButtonContainer, 'flt-');
removeClassByPrefix(filterWrapper, 'flt-');
// Add new filter class
filterButtonContainer.classList.add(filterClass);
filterWrapper.classList.add(filterClass);
});
});
}
</script>
<!-- [ Faq ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,364 @@
<!-- [ Feature ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 sm:gap-8">
<div class="flex flex-col gap-2 sm:gap-3 items-center text-center">
<h2>Dynamic Task Automation</h2>
<h6 class="text-theme-textsecondary sm:max-w-[470px] lg:max-w-[615px] mx-auto">
Gain insights into performance metrics and proactively address issues for uninterrupted operations.
</h6>
</div>
<div class="flex flex-col gap-3 items-center">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 p-2 sm:p-0.5 overflow-hidden">
<ul class="flex flex-row flex-wrap justify-center nav-tabs text-[14px] *:*:flex *:*:p-[9px_16px] *:*:hover:bg-neutral-200 *:*:rounded-full *:*:transition-all *:*:duration-150 *:*:ease-linear">
<li class="group active">
<a href="javascript:void(0);" data-pc-toggle="tab" data-pc-target="feature-18-tab-1" class="group-[.active]:border-neutral-400 group-[.active]:bg-neutral-300 group-[.active]:text-theme-text-primary">
<div class="flex flex-row items-start justify-end gap-2">
<div class="shrink-0"><i class="ti ti-sparkles text-base leading-none text-theme-text-secondary"></i></div>
<div class="grow">AI Assistant</div>
</div>
</a>
</li>
<li class="group">
<a href="javascript:void(0);" data-pc-toggle="tab" data-pc-target="feature-18-tab-2" class="group-[.active]:border-neutral-400 group-[.active]:bg-neutral-300 group-[.active]:text-theme-text-primary">
<div class="flex flex-row items-start justify-end gap-2">
<div class="shrink-0"><i class="ti ti-chart-histogram text-base leading-none text-theme-text-secondary"></i></div>
<div class="grow">Simple Analysis</div>
</div>
</a>
</li>
<li class="group">
<a href="javascript:void(0);" data-pc-toggle="tab" data-pc-target="feature-18-tab-3" class="group-[.active]:border-neutral-400 group-[.active]:bg-neutral-300 group-[.active]:text-theme-text-primary">
<div class="flex flex-row items-start justify-end gap-2">
<div class="shrink-0"><i class="ti ti-users text-base leading-none text-theme-text-secondary"></i></div>
<div class="grow">Easy Collaboration</div>
</div>
</a>
</li>
<li class="group">
<a href="javascript:void(0);" data-pc-toggle="tab" data-pc-target="feature-18-tab-4" class="group-[.active]:border-neutral-400 group-[.active]:bg-neutral-300 group-[.active]:text-theme-text-primary">
<div class="flex flex-row items-start justify-end gap-2">
<div class="shrink-0"><i class="ti ti-settings-up text-base leading-none text-theme-text-secondary"></i></div>
<div class="grow">Smart Automation</div>
</div>
</a>
</li>
</ul>
</div>
<div class="tab-content w-full">
<div class="block tab-pane" id="feature-18-tab-1">
<div class="flex flex-col sm:flex-row gap-3">
<div class="basis-full sm:basis-5/12">
<div class="bg-neutral-100 pt-6 sm:pt-8 md:pt-10 ltr:pl-6 ltr:sm:pl-8 ltr:md:pl-10 rtl:pr-6 rtl:sm:pr-8 rtl:md:pr-10 rounded-3xl sm:rounded-[32px] md:rounded-[40px] h-[260px] sm:h-[396px] md:h-[434px] overflow-hidden">
<div class="h-full border-t-[5px] border-x-[5px] border-neutral-200 ltr:border-r-0 rtl:border-l-0 ltr:rounded-tl-xl rtl:rounded-tr-xl bg-left-top bg-cover bg-[url('../images/graphics/ai/graphics12-light.svg')] dark:bg-[url('../images/graphics/ai/graphics12-dark.svg')]"></div>
</div>
</div>
<div class="basis-full sm:basis-7/12">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full">
<div class="flex flex-col items-start justify-between h-full">
<div class="pt-6 md:pt-10 px-6 md:px-10 sm:h-[calc(100%_-_98px)] lg:h-[calc(100% _-_114px)]">
<div class="flex flex-col justify-between gap-3 sm:gap-4 md:gap-6 pb-6 md:pb-10 h-full">
<div class="flex flex-row items-start justify-end gap-2">
<div class="shrink-0"><i class="ti ti-sparkles text-base leading-none text-theme-text-secondary"></i></div>
<div class="grow">AI Assistant</div>
</div>
<div class="flex flex-col gap-4 lg:gap-6">
<div class="flex flex-col gap-1">
<h4>Advanced AI Integration</h4>
<p class="body1 text-theme-textsecondary">Leverage cutting-edge AI to enhance decision-making and streamline operations.</p>
</div>
<div class="grid grid-cols-12 gap-2">
<div class="col-span-12 lg:col-span-6">
<div class="flex flex-row gap-1 items-center">
<div class="shrink-0 leading-none">
<i class="ti ti-rosette-discount-check text-2xl leading-none text-theme-text-secondary"></i>
</div>
<div class="grow">
<p class="body2 text-theme-text-secondary">Intelligent Decision Support</p>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="flex flex-row gap-1 items-center">
<div class="shrink-0 leading-none">
<i class="ti ti-rosette-discount-check text-2xl leading-none text-theme-text-secondary"></i>
</div>
<div class="grow">
<p class="body2 text-theme-text-secondary">Predictive Analytics</p>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="flex flex-row gap-1 items-center">
<div class="shrink-0 leading-none">
<i class="ti ti-rosette-discount-check text-2xl leading-none text-theme-text-secondary"></i>
</div>
<div class="grow">
<p class="body2 text-theme-text-secondary">Natural Language Processing</p>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="flex flex-row gap-1 items-center">
<div class="shrink-0 leading-none">
<i class="ti ti-rosette-discount-check text-2xl leading-none text-theme-text-secondary"></i>
</div>
<div class="grow">
<p class="body2 text-theme-text-secondary">Real-time Insights</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-6 md:p-8 flex flex-row flex-wrap gap-2 sm:gap-3 bg-neutral-200 rounded-3xl sm:rounded-[32px] md:rounded-[40px] w-full">
<button class="btn btn-outline-primary btn-md capitalize">
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
<i class="ti ti-help text-base leading-none"></i>
Customize
</span>
</button>
<button class="btn btn-primary btn-md capitalize">
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
<i class="ti ti-link text-base leading-none"></i>
Explore all Features
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden tab-pane" id="feature-18-tab-2">
<div class="flex flex-col sm:flex-row gap-3">
<div class="basis-full sm:basis-5/12">
<div class="bg-neutral-100 pt-6 sm:pt-8 md:pt-10 ltr:pl-6 ltr:sm:pl-8 ltr:md:pl-10 rtl:pr-6 rtl:sm:pr-8 rtl:md:pr-10 rounded-3xl sm:rounded-[32px] md:rounded-[40px] h-[260px] sm:h-[396px] md:h-[434px] overflow-hidden">
<div class="h-full border-t-[5px] border-x-[5px] border-neutral-200 ltr:border-r-0 rtl:border-l-0 ltr:rounded-tl-xl rtl:rounded-tr-xl bg-left-top bg-cover bg-[url('../images/graphics/ai/graphics7-light.svg')] dark:bg-[url('../images/graphics/ai/graphics7-dark.svg')]"></div>
</div>
</div>
<div class="basis-full sm:basis-7/12">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full">
<div class="flex flex-col items-start justify-between h-full">
<div class="pt-6 md:pt-10 px-6 md:px-10 sm:h-[calc(100%_-_98px)] lg:h-[calc(100% _-_114px)]">
<div class="flex flex-col justify-between gap-3 sm:gap-4 md:gap-6 pb-6 md:pb-10 h-full">
<div class="flex flex-row items-start justify-end gap-2">
<div class="shrink-0"><i class="ti ti-chart-histogram text-base leading-none text-theme-text-secondary"></i></div>
<div class="grow">Simple Analysis</div>
</div>
<div class="flex flex-col gap-4 lg:gap-6">
<div class="flex flex-col gap-1">
<h4>Data Lifecycle Management</h4>
<p class="body1 text-theme-textsecondary">Process data in parallel, significantly boosting data processing speed.</p>
</div>
<div class="grid grid-cols-12 gap-2">
<div class="col-span-12 lg:col-span-6">
<div class="flex flex-row gap-1 items-center">
<div class="shrink-0 leading-none">
<i class="ti ti-rosette-discount-check text-2xl leading-none text-theme-text-secondary"></i>
</div>
<div class="grow">
<p class="body2 text-theme-text-secondary">Fortress for Your Data</p>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="flex flex-row gap-1 items-center">
<div class="shrink-0 leading-none">
<i class="ti ti-rosette-discount-check text-2xl leading-none text-theme-text-secondary"></i>
</div>
<div class="grow">
<p class="body2 text-theme-text-secondary">Granular Access Controls</p>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="flex flex-row gap-1 items-center">
<div class="shrink-0 leading-none">
<i class="ti ti-rosette-discount-check text-2xl leading-none text-theme-text-secondary"></i>
</div>
<div class="grow">
<p class="body2 text-theme-text-secondary">Automated Backup Solutions</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-6 md:p-8 flex flex-row flex-wrap gap-2 sm:gap-3 bg-neutral-200 rounded-3xl sm:rounded-[32px] md:rounded-[40px] w-full">
<button class="btn btn-outline-primary btn-md capitalize">
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
<i class="ti ti-help text-base leading-none"></i>
Customize
</span>
</button>
<button class="btn btn-primary btn-md capitalize">
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
<i class="ti ti-link text-base leading-none"></i>
Explore all Features
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden tab-pane" id="feature-18-tab-3">
<div class="flex flex-col sm:flex-row gap-3">
<div class="basis-full sm:basis-5/12">
<div class="bg-neutral-100 pt-6 sm:pt-8 md:pt-10 ltr:pl-6 ltr:sm:pl-8 ltr:md:pl-10 rtl:pr-6 rtl:sm:pr-8 rtl:md:pr-10 rounded-3xl sm:rounded-[32px] md:rounded-[40px] h-[260px] sm:h-[396px] md:h-[434px] overflow-hidden">
<div class="h-full border-t-[5px] border-x-[5px] border-neutral-200 ltr:border-r-0 rtl:border-l-0 ltr:rounded-tl-xl rtl:rounded-tr-xl bg-left-top bg-cover bg-[url('../images/graphics/ai/graphics4-light.svg')] dark:bg-[url('../images/graphics/ai/graphics4-dark.svg')]"></div>
</div>
</div>
<div class="basis-full sm:basis-7/12">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full">
<div class="flex flex-col items-start justify-between h-full">
<div class="pt-6 md:pt-10 px-6 md:px-10 sm:h-[calc(100%_-_98px)] lg:h-[calc(100% _-_114px)]">
<div class="flex flex-col justify-between gap-3 sm:gap-4 md:gap-6 pb-6 md:pb-10 h-full">
<div class="flex flex-row items-start justify-end gap-2">
<div class="shrink-0"><i class="ti ti-users text-base leading-none text-theme-text-secondary"></i></div>
<div class="grow">Easy Collaboration</div>
</div>
<div class="flex flex-col gap-4 lg:gap-6">
<div class="flex flex-col gap-1">
<h4>Seamless Teamwork</h4>
<p class="body1 text-theme-textsecondary">Foster collaboration with intuitive tools designed for team success.</p>
</div>
<div class="grid grid-cols-12 gap-2">
<div class="col-span-12 lg:col-span-6">
<div class="flex flex-row gap-1 items-center">
<div class="shrink-0 leading-none">
<i class="ti ti-rosette-discount-check text-2xl leading-none text-theme-text-secondary"></i>
</div>
<div class="grow">
<p class="body2 text-theme-text-secondary">Shared Workspaces</p>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="flex flex-row gap-1 items-center">
<div class="shrink-0 leading-none">
<i class="ti ti-rosette-discount-check text-2xl leading-none text-theme-text-secondary"></i>
</div>
<div class="grow">
<p class="body2 text-theme-text-secondary">Real-time Collaboration</p>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="flex flex-row gap-1 items-center">
<div class="shrink-0 leading-none">
<i class="ti ti-rosette-discount-check text-2xl leading-none text-theme-text-secondary"></i>
</div>
<div class="grow">
<p class="body2 text-theme-text-secondary">Task Assignment and Tracking</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-6 md:p-8 flex flex-row flex-wrap gap-2 sm:gap-3 bg-neutral-200 rounded-3xl sm:rounded-[32px] md:rounded-[40px] w-full">
<button class="btn btn-outline-primary btn-md capitalize">
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
<i class="ti ti-help text-base leading-none"></i>
Customize
</span>
</button>
<button class="btn btn-primary btn-md capitalize">
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
<i class="ti ti-link text-base leading-none"></i>
Explore all Features
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hidden tab-pane" id="feature-18-tab-4">
<div class="flex flex-col sm:flex-row gap-3">
<div class="basis-full sm:basis-5/12">
<div class="bg-neutral-100 pt-6 sm:pt-8 md:pt-10 ltr:pl-6 ltr:sm:pl-8 ltr:md:pl-10 rtl:pr-6 rtl:sm:pr-8 rtl:md:pr-10 rounded-3xl sm:rounded-[32px] md:rounded-[40px] h-[260px] sm:h-[396px] md:h-[434px] overflow-hidden">
<div class="h-full border-t-[5px] border-x-[5px] border-neutral-200 ltr:border-r-0 rtl:border-l-0 ltr:rounded-tl-xl rtl:rounded-tr-xl bg-left-top bg-cover bg-[url('../images/graphics/ai/graphics9-light.svg')] dark:bg-[url('../images/graphics/ai/graphics9-dark.svg')]"></div>
</div>
</div>
<div class="basis-full sm:basis-7/12">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full">
<div class="flex flex-col items-start justify-between h-full">
<div class="pt-6 md:pt-10 px-6 md:px-10 sm:h-[calc(100%_-_98px)] lg:h-[calc(100% _-_114px)]">
<div class="flex flex-col justify-between gap-3 sm:gap-4 md:gap-6 pb-6 md:pb-10 h-full">
<div class="flex flex-row items-start justify-end gap-2">
<div class="shrink-0"><i class="ti ti-settings-up text-base leading-none text-theme-text-secondary"></i></div>
<div class="grow">Smart Automation</div>
</div>
<div class="flex flex-col gap-4 lg:gap-6">
<div class="flex flex-col gap-1">
<h4>Intelligent Task Management</h4>
<p class="body1 text-theme-textsecondary">Automate repetitive tasks and focus on what truly matters with smart solutions.</p>
</div>
<div class="grid grid-cols-12 gap-2">
<div class="col-span-12 lg:col-span-6">
<div class="flex flex-row gap-1 items-center">
<div class="shrink-0 leading-none">
<i class="ti ti-rosette-discount-check text-2xl leading-none text-theme-text-secondary"></i>
</div>
<div class="grow">
<p class="body2 text-theme-text-secondary">Workflow Automation</p>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="flex flex-row gap-1 items-center">
<div class="shrink-0 leading-none">
<i class="ti ti-rosette-discount-check text-2xl leading-none text-theme-text-secondary"></i>
</div>
<div class="grow">
<p class="body2 text-theme-text-secondary">Trigger-based Actions</p>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-6">
<div class="flex flex-row gap-1 items-center">
<div class="shrink-0 leading-none">
<i class="ti ti-rosette-discount-check text-2xl leading-none text-theme-text-secondary"></i>
</div>
<div class="grow">
<p class="body2 text-theme-text-secondary">Scalable Solutions</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-6 md:p-8 flex flex-row flex-wrap gap-2 sm:gap-3 bg-neutral-200 rounded-3xl sm:rounded-[32px] md:rounded-[40px] w-full">
<button class="btn btn-outline-primary btn-md capitalize">
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
<i class="ti ti-help text-base leading-none"></i>
Customize
</span>
</button>
<button class="btn btn-primary btn-md capitalize">
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
<i class="ti ti-link text-base leading-none"></i>
Explore all Features
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- [ Feature ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,100 @@
<!-- [ Feature ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 sm:gap-8 md:gap-10">
<h2 class="md:max-w-[500px]">Intelligent Data Compression</h2>
<div class="p-6 rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 h-full relative">
<div class="hidden lg:block w-[456px] h-[267px] rounded-3xl sm:rounded-[32px] md:rounded-[40px] overflow-hidden absolute -top-[190px] ltr:right-[45px] rtl:left-[45px] -z-[1]">
<div class="absolute inset-0 z-0 bg-[linear-gradient(180deg,_transparent_0%,_var(--neutral-100)_100%)] opacity-60"></div>
<div class="h-full ltr:bg-[100%_0%] rtl:bg-[0%_0%] bg-contain bg-no-repeat bg-[url('../images/graphics/ai/graphics4-light.svg')] dark:bg-[url('../images/graphics/ai/graphics4-dark.svg')]"></div>
</div>
<div class="overflow-hidden">
<div class="flex flex-row flex-wrap items-stretch divide-x divide-y rtl:divide-x-reverse relative -m-px divide-neutral-300">
<div class="basis-full sm:basis-6/12 lg:basis-4/12">
<div class="px-0 py-3 sm:p-6 md:p-8 flex flex-col items-start h-full gap-6 sm:gap-8">
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center">
<i class="ti ti-chart-histogram text-2xl leading-none text-primary-500"></i>
</div>
<div class="flex flex-col gap-1 md:gap-2 grow">
<h4>Parallel Processing</h4>
<p class="body1 text-theme-textsecondary">Process data in parallel, significantly boosting data processing speed.</p>
</div>
</div>
</div>
<div class="basis-full sm:basis-6/12 lg:basis-4/12 relative">
<div class="px-0 py-3 sm:p-6 md:p-8 flex flex-col items-start h-full gap-6 sm:gap-8">
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center">
<i class="ti ti-artboard text-2xl leading-none text-primary-500"></i>
</div>
<div class="flex flex-col gap-1 md:gap-2 grow">
<h4>Scalable Data Pipelines</h4>
<p class="body1 text-theme-textsecondary">Build and manage scalable and efficient data processing pipelines.</p>
</div>
</div>
<div class="text-neutral-300 max-sm:hidden absolute ltr:-left-[9px] rtl:-right-[9px] -bottom-[9px]">
@@include('../../images/star.html', {'substyle': 'class="w-[17px] md:w-[17px] h-auto"'})
</div>
</div>
<div class="basis-full sm:basis-6/12 lg:basis-4/12 relative">
<div class="px-0 py-3 sm:p-6 md:p-8 flex flex-col items-start h-full gap-6 sm:gap-8">
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center">
<i class="ti ti-database text-2xl leading-none text-primary-500"></i>
</div>
<div class="flex flex-col gap-1 md:gap-2 grow">
<h4>Data Quality Assurance</h4>
<p class="body1 text-theme-textsecondary">Tools to ensure and maintain high data quality and integrity.</p>
</div>
</div>
<div class="text-neutral-300 max-sm:hidden absolute ltr:-right-[9px] rtl:-left-[9px] ltr:lg:-left-[9px] rtl:lg:-right-[9px] -bottom-[9px]">
@@include('../../images/star.html', {'substyle': 'class="w-[17px] md:w-[17px] h-auto"'})
</div>
</div>
<div class="basis-full sm:basis-6/12 lg:basis-4/12">
<div class="px-0 py-3 sm:p-6 md:p-8 flex flex-col items-start h-full gap-6 sm:gap-8">
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center">
<i class="ti ti-settings-up text-2xl leading-none text-primary-500"></i>
</div>
<div class="flex flex-col gap-1 md:gap-2 grow">
<h4>Dynamic Task Automation</h4>
<p class="body1 text-theme-textsecondary">Automate dynamic tasks to enhance workflow efficiency.</p>
</div>
</div>
</div>
<div class="basis-full sm:basis-6/12 lg:basis-4/12">
<div class="px-0 py-3 sm:p-6 md:p-8 flex flex-col items-start h-full gap-6 sm:gap-8">
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center">
<i class="ti ti-devices-code text-2xl leading-none text-primary-500"></i>
</div>
<div class="flex flex-col gap-1 md:gap-2 grow">
<h4>Cross-Platform</h4>
<p class="body1 text-theme-textsecondary">Compatibility with various platforms for versatile data processing.</p>
</div>
</div>
</div>
<div class="basis-full sm:basis-6/12 lg:basis-4/12">
<div class="px-0 py-3 sm:p-6 md:p-8 flex flex-col items-start h-full gap-6 sm:gap-8">
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-full flex items-center justify-center">
<i class="ti ti-route text-2xl leading-none text-primary-500"></i>
</div>
<div class="flex flex-col gap-1 md:gap-2 grow">
<h4>Workflow Optimization</h4>
<p class="body1 text-theme-textsecondary">Optimize workflows for increased productivity and efficiency.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col items-center justify-center gap-6 text-center">
<h6 class="text-theme-text-secondary max-w-[75%] sm:max-w-[45%]">Process data faster, enhance system, and gain quicker insights.</h6>
<button class="btn btn-primary btn-md capitalize">
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
<i class="ti ti-sparkles text-base leading-none"></i>
Explore all Features
</span>
</button>
</div>
</div>
</div>
</section>
<!-- [ Feature ] end -->
@@ -0,0 +1,131 @@
<!-- [ Feature ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 sm:gap-8">
<div class="flex flex-col items-center text-center gap-2 sm:gap-3">
<h2>Unlock the Power of SaasAble</h2>
<h6 class="text-theme-textsecondary">
Discover the myriad benefits that come with our innovative platform.
</h6>
</div>
<div class="flex flex-col gap-3">
<div class="bg-neutral-100 pt-6 sm:pt-8 md:pt-10 ltr:pl-6 ltr:sm:pl-8 ltr:md:pl-10 rtl:pr-6 rtl:sm:pr-8 rtl:md:pr-10 rounded-3xl sm:rounded-[32px] md:rounded-[40px] h-[204px] sm:h-[300px] md:h-[360px] overflow-hidden">
<div class="h-full border-t-[5px] border-x-[5px] border-neutral-200 ltr:border-r-0 rtl:border-l-0 ltr:rounded-tl-xl rtl:rounded-tr-xl bg-left-top bg-cover bg-[url('../images/graphics/ai/desktop1-light.svg')] dark:bg-[url('../images/graphics/ai/desktop1-dark.svg')]"></div>
</div>
<div class="grid grid-cols-12 gap-3">
<div class="col-span-12 sm:col-span-6 lg:col-span-3">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full">
<div class="flex flex-col items-start h-full gap-0">
<div class="pt-6 sm:pt-8 md:pt-10 px-6 sm:px-8 md:px-10">
<i class="ti ti-app-window text-[40px] leading-none"></i>
</div>
<div class="p-6 sm:p-8 md:p-10 flex flex-col gap-2 sm:gap-3 rounded-3xl sm:rounded-[32px] md:rounded-[40px]">
<h4>Tested in multiple browsers</h4>
</div>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-3">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full">
<div class="flex flex-col items-start h-full gap-0">
<div class="pt-6 sm:pt-8 md:pt-10 px-6 sm:px-8 md:px-10">
<i class="ti ti-box-model text-[40px] leading-none"></i>
</div>
<div class="p-6 sm:p-8 md:p-10 flex flex-col gap-2 sm:gap-3 rounded-3xl sm:rounded-[32px] md:rounded-[40px]">
<h4>Ready to use template</h4>
</div>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-3">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full">
<div class="flex flex-col items-start h-full gap-0">
<div class="pt-6 sm:pt-8 md:pt-10 px-6 sm:px-8 md:px-10">
<i class="ti ti-folder-check text-[40px] leading-none"></i>
</div>
<div class="p-6 sm:p-8 md:p-10 flex flex-col gap-2 sm:gap-3 rounded-3xl sm:rounded-[32px] md:rounded-[40px]">
<h4>Always updated package</h4>
</div>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-3">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full">
<div class="flex flex-col items-start h-full gap-0">
<div class="pt-6 sm:pt-8 md:pt-10 px-6 sm:px-8 md:px-10">
<i class="ti ti-code text-[40px] leading-none"></i>
</div>
<div class="p-6 sm:p-8 md:p-10 flex flex-col gap-2 sm:gap-3 rounded-3xl sm:rounded-[32px] md:rounded-[40px]">
<h4>Optimised code structure</h4>
</div>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-3">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full">
<div class="flex flex-col items-start h-full gap-0">
<div class="pt-6 sm:pt-8 md:pt-10 px-6 sm:px-8 md:px-10">
<i class="ti ti-lock text-[40px] leading-none"></i>
</div>
<div class="p-6 sm:p-8 md:p-10 flex flex-col gap-2 sm:gap-3 rounded-3xl sm:rounded-[32px] md:rounded-[40px]">
<h4>Pre Define Authentication</h4>
</div>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-3">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full">
<div class="flex flex-col items-start h-full gap-0">
<div class="pt-6 sm:pt-8 md:pt-10 px-6 sm:px-8 md:px-10">
<i class="ti ti-git-branch text-[40px] leading-none"></i>
</div>
<div class="p-6 sm:p-8 md:p-10 flex flex-col gap-2 sm:gap-3 rounded-3xl sm:rounded-[32px] md:rounded-[40px]">
<h4>Clean folder structure to adapt</h4>
</div>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-3">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full">
<div class="flex flex-col items-start h-full gap-0">
<div class="pt-6 sm:pt-8 md:pt-10 px-6 sm:px-8 md:px-10">
<i class="ti ti-toggle-right text-[40px] leading-none"></i>
</div>
<div class="p-6 sm:p-8 md:p-10 flex flex-col gap-2 sm:gap-3 rounded-3xl sm:rounded-[32px] md:rounded-[40px]">
<h4>Easy to switch themes</h4>
</div>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6 lg:col-span-3">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full">
<div class="flex flex-col items-start h-full gap-0">
<div class="pt-6 sm:pt-8 md:pt-10 px-6 sm:px-8 md:px-10">
<i class="ti ti-components text-[40px] leading-none"></i>
</div>
<div class="p-6 sm:p-8 md:p-10 flex flex-col gap-2 sm:gap-3 rounded-3xl sm:rounded-[32px] md:rounded-[40px]">
<h4>Pluggable components</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-row items-center justify-center gap-3">
<button class="btn btn-outline-primary btn-md capitalize">
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
<i class="ti ti-eye text-base leading-none"></i>
Get free figma
</span>
</button>
<button class="btn btn-primary btn-md capitalize">
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
<i class="ti ti-download text-base leading-none"></i>
Buy Now
</span>
</button>
</div>
</div>
</div>
</section>
<!-- [ Feature ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,82 @@
<!-- [ Footer ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 sm:gap-8 lg:gap-10">
<div class="flex flex-col lg:flex-row gap-8 lg:gap-6">
<div class="basis-full lg:basis-6/12">
<div class="flex flex-col sm:flex-row lg:flex-col gap-6 justify-between h-full">
<div class="flex flex-col items-start gap-3 sm:gap-6">
@@include('../../images/logo-main.html', {'substyle': 'class="w-[112px] lg:w-[140px] h-auto text-primary-500"'})
<h6 class="max-w-[280px] -mb-2 sm:-mb-5">v1.0.0</h6>
<p class="body2 max-w-[280px]">Explore the different versions of our SaasAble template.</p>
</div>
<div class="flex flex-col gap-4 sm:gap-5 lg:gap-6">
<div class="flex flex-row gap-2 items-center">
<i class="ti ti-brand-figma text-2xl leading-none"></i>
<a class="body2 text-theme-text-secondary" href="https://www.figma.com/community/file/1425095061180549847">Figma Version 1.0.0</a>
</div>
<div class="flex flex-row gap-2 items-center">
<i class="ti ti-brand-tailwind text-2xl leading-none"></i>
<a class="body2 text-theme-text-secondary" href="https://tailwindcss.com/">Tailwindcss v4.1.2</a>
</div>
<div class="flex flex-row gap-2 items-center">
<i class="ti ti-sparkles text-2xl leading-none"></i>
<a class="body2 text-theme-text-secondary" href="#">Documentation</a>
</div>
</div>
</div>
</div>
<div class="basis-full lg:basis-6/12">
<div class="flex flex-row flex-wrap justify-between gap-5 md:gap-8">
<div class="basis-5/12 sm:basis-auto">
<div class="flex flex-col md:gap-6 items-start">
<h4>Company</h4>
<ul class="*:*:min-h-9 sm:*:*:min-h-10 *:*:py-1.5 *:*:my-0.5 *:*:flex *:*:items-center caption2 py-2 *:*:text-neutral-800 *:*:hover:text-primary-500 *:*:transition-all *:*:duration-500">
<li><a href="https://blog.saasable.io/a-decade-of-expertise-the-phoenixcoded-story-and-why-you-should-trust-us">Why Phoenixcoded?</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div class="basis-5/12 sm:basis-auto">
<div class="flex flex-col md:gap-6 items-start">
<h4>Support</h4>
<ul class="*:*:min-h-9 sm:*:*:min-h-10 *:*:py-1.5 *:*:my-0.5 *:*:flex *:*:items-center caption2 py-2 *:*:text-neutral-800 *:*:hover:text-primary-500 *:*:transition-all *:*:duration-500">
<li><a href="#">Pricing</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">License Terms</a></li>
</ul>
</div>
</div>
<div class="basis-6/12 sm:basis-auto">
<div class="flex flex-col md:gap-6 items-start">
<h4>Resources</h4>
<ul class="*:*:min-h-9 sm:*:*:min-h-10 *:*:py-1.5 *:*:my-0.5 *:*:flex *:*:items-center caption2 py-2 *:*:text-neutral-800 *:*:hover:text-primary-500 *:*:transition-all *:*:duration-500">
<li><a href="https://github.com/phoenixcoded/saasable-ui" target="_blank">Freebies</a>
<li><a href="#">Documentation</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Refund Policy</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="bg-neutral-100 rounded-3xl sm:rounded-[32px]">
<div class="flex flex-col sm:flex-row items-center justify-center sm:justify-between gap-3 p-4 sm:py-3 sm:px-6">
<span class="caption2">Copyright © 2026 <a href="https://phoenixcoded.net" class="caption hover:text-primary-500 hover:underline">Phoenixcoded</a></span>
<div class="flex flex-row flex-wrap gap-1 text-2xl leading-none *:flex *:items-center *:justify-center sm:gap-3 *:w-10 sm:*:w-[52px] md:*:w-14 *:h-10 sm:*:h-[52px] md:*:h-14 *:rounded-xl *:text-primary-500 *:hover:bg-neutral-300 *:transition-all *:duration-300">
<a href="#"><i class="ti ti-brand-linkedin"></i></a>
<a href="#"><i class="ti ti-brand-facebook-filled"></i></a>
<a href="#"><i class="ti ti-brand-youtube-filled"></i></a>
<a href="#"><i class="ti ti-brand-github-filled"></i></a>
<a href="#"><i class="ti ti-brand-dribbble-filled"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- [ Footer ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,74 @@
<!-- [ hero ] start -->
<section class="relative overflow-hidden">
<div class="absolute top-0 z-10 inset-x-0 block bg-neutral-100 h-[592px] sm:h-[738px] lg:h-[878px] overflow-hidden rounded-b-3xl sm:rounded-b-[32px] lg:rounded-b-[40px]">
<div class=" relative z-10 h-full bg-[length:35px_35px] bg-[url('data:image/svg+xml;utf8,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2050%2060%22><text%20x=%220%22%20y=%2225%22%20fill=%22%23E6E8EE%22%20font-size=%2280px%22>.%3C/text%3E</svg>')] dark:bg-[url('data:image/svg+xml;utf8,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2050%2060%22><text%20x=%220%22%20y=%2225%22%20fill=%22%23272A2E%22%20font-size=%2280px%22>.%3C/text%3E</svg>')]">
</div>
</div>
<div class="common-section relative z-20">
<div class="container">
<div class="pb-5 sm:pb-11 lg:pb-12">
<div class="flex flex-col items-center gap-3">
<div class="inline-flex items-center p-1 rounded-full border border-neutral-300 bg-neutral-100">
<span class="px-2 text-[12px] font-semibold font-figtree text-neutral-800">Over 200+</span>
<div class="bg-primary-100 inline-flex items-center py-1 px-2 rounded-full gap-1">
<img src="../assets/images/shared/celebration.svg" alt="celebration" class="w-5 h-5">
<span class="text-primary-500 font-semibold text-xs leading-none">Design Blocks</span>
</div>
</div>
<h1 class="max-w-[800px] text-center">
Real-time Performance Monitoring
</h1>
<div class="text-primary-500 pt-1 pb-1.5">
@@include('../../images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto"'})
</div>
<h6 class="max-w-[650px] text-center text-theme-text-secondary">Identify and resolve issues proactively for uninterrupted operations.</h6>
</div>
<div class="flex flex-col items-center gap-4 mt-6 sm:mt-8 lg:mt-10">
<button class="btn btn-primary btn-md capitalize">
<span class="flex items-center gap-2 ltr:-ml-1 rtl:-mr-1">
<i class="ti ti-sparkles text-base leading-none"></i>
Try Predictive Cost Analytics
</span>
</button>
<div class="flex flex-row gap-2 justify-center flex-wrap">
<div class="inline-flex items-center px-2 rounded-full border border-neutral-300 bg-neutral-100">
<img src="../assets/images/shared/react.svg" alt="celebration" class="w-4 h-4">
<span class="caption2 py-1.5 px-2">React 18</span>
</div>
<div class="inline-flex items-center px-2 rounded-full border border-neutral-300 bg-neutral-100">
<img src="../assets/images/shared/next-js.svg" alt="celebration" class="w-4 h-4">
<span class="caption2 py-1.5 px-2">Next.js</span>
</div>
<div class="inline-flex items-center px-2 rounded-full border border-neutral-300 bg-neutral-100">
<img src="../assets/images/shared/material-ui.svg" alt="celebration" class="w-4 h-4">
<span class="caption2 py-1.5 px-2">Material UI v6</span>
</div>
<div class="inline-flex items-center px-2 rounded-full border border-neutral-300 bg-neutral-100">
<img src="../assets/images/shared/typescript.svg" alt="celebration" class="w-4 h-4">
<span class="caption2 py-1.5 px-2">TypeScript</span>
</div>
<div class="inline-flex items-center px-2 rounded-full border border-neutral-300 bg-neutral-100">
<img src="../assets/images/shared/javascript.svg" alt="celebration" class="w-4 h-4">
<span class="caption2 py-1.5 px-2">JavaScript</span>
</div>
<div class="inline-flex items-center px-2 rounded-full border border-neutral-300 bg-neutral-100">
<img src="../assets/images/shared/m3.svg" alt="celebration" class="w-4 h-4">
<span class="caption2 py-1.5 px-2">Material 3</span>
</div>
<div class="inline-flex items-center px-2 rounded-full border border-neutral-300 bg-neutral-100">
<img src="../assets/images/shared/figma.svg" alt="celebration" class="w-4 h-4">
<span class="caption2 py-1.5 px-2">Figma</span>
</div>
</div>
</div>
</div>
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] overflow-hidden h-auto w-full">
<video autoplay muted playsinline loop width="100%" height="100%" class="flex object-cover w-full h-full">
<source src="https://d2elhhoq00m1pj.cloudfront.net/saasable-intro.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
</section>
<!-- [ hero ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,83 @@
<!-- [ Integration 2 ] start -->
<section class="common-section">
<div class="container">
<div class="bg-neutral-100 p-6 sm:p-8 md:p-10 h-full rounded-3xl sm:rounded-[32px] md:rounded-[40px]">
<div class="flex flex-col items-center justify-center gap-8 sm:gap-10 md:gap-12">
<div class="flex flex-col gap-2 sm:gap-3 text-center">
<h2>Connect with top-tier tools available Interface</h2>
<h6 class="text-theme-textsecondary">Discover the features that will transform your customer relationships</h6>
</div>
<div class="flex flex-wrap items-center justify-center gap-2 w-full">
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-[14px] md:px-6">
<div class="flex items-center gap-[10px]">
<div class="shrink-0"><i class="ti ti-brand-slack text-[32px] md:text-[40px] leading-none"></i></div>
<div class="grow"><h5>Slack</h5></div>
</div>
</div>
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-[14px] md:px-6">
<div class="flex items-center gap-[10px]">
<div class="shrink-0"><i class="ti ti-brand-abstract text-[32px] md:text-[40px] leading-none"></i></div>
<div class="grow"><h5>Abstract</h5></div>
</div>
</div>
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-[14px] md:px-6">
<div class="flex items-center gap-[10px]">
<div class="shrink-0"><i class="ti ti-brand-asana text-[32px] md:text-[40px] leading-none"></i></div>
<div class="grow"><h5>Asana</h5></div>
</div>
</div>
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-[14px] md:px-6">
<div class="flex items-center gap-[10px]">
<div class="shrink-0"><i class="ti ti-brand-backbone text-[32px] md:text-[40px] leading-none"></i></div>
<div class="grow"><h5>Back Bone</h5></div>
</div>
</div>
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-[14px] md:px-6">
<div class="flex items-center gap-[10px]">
<div class="shrink-0"><i class="ti ti-brand-intercom text-[32px] md:text-[40px] leading-none"></i></div>
<div class="grow"><h5>Intercom</h5></div>
</div>
</div>
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-[14px] md:px-6">
<div class="flex items-center gap-[10px]">
<div class="shrink-0"><i class="ti ti-brand-mastercard text-[32px] md:text-[40px] leading-none"></i></div>
<div class="grow"><h5>Master Card</h5></div>
</div>
</div>
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-[14px] md:px-6">
<div class="flex items-center gap-[10px]">
<div class="shrink-0"><i class="ti ti-brand-skype text-[32px] md:text-[40px] leading-none"></i></div>
<div class="grow"><h5>Skype</h5></div>
</div>
</div>
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-[14px] md:px-6">
<div class="flex items-center gap-[10px]">
<div class="shrink-0"><i class="ti ti-brand-google-drive text-[32px] md:text-[40px] leading-none"></i></div>
<div class="grow"><h5>Google Drive</h5></div>
</div>
</div>
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-[14px] md:px-6">
<div class="flex items-center gap-[10px]">
<div class="shrink-0"><i class="ti ti-brand-tripadvisor text-[32px] md:text-[40px] leading-none"></i></div>
<div class="grow"><h5>Tripadvisor</h5></div>
</div>
</div>
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-[14px] md:px-6">
<div class="flex items-center gap-[10px]">
<div class="shrink-0"><i class="ti ti-brand-messenger text-[32px] md:text-[40px] leading-none"></i></div>
<div class="grow"><h5>Facebook Messenger</h5></div>
</div>
</div>
<div class="bg-theme-bg-paper rounded-full py-[10px] px-[18px] md:py-[14px] md:px-6">
<div class="flex items-center gap-[10px]">
<div class="shrink-0"><i class="ti ti-brand-paypal text-[32px] md:text-[40px] leading-none"></i></div>
<div class="grow"><h5>Paypal</h5></div>
</div>
</div>
</div>
<button class="btn btn-primary btn-lg">See All Integration</button>
</div>
</div>
</div>
</section>
<!-- [ Integration 2 ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,107 @@
<!-- [ Nav ] start -->
<nav class="z-50 w-full relative">
<div class="container">
<div class="static flex py-4 items-center justify-between">
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-between">
<div class="flex flex-1 flex-shrink-0 items-center justify-between text-primary-500">
@@include('../../images/logo-main.html', {'substyle': 'class="w-[112px] lg:w-[140px] h-auto"'})
</div>
<div class="nav-collapse grow hidden w-full lg:flex lg:w-full flex-auto justify-center"
id="main-navbar-collapse">
<div class="justify-center flex flex-col lg:flex-row p-0 lg:rounded-full lg:bg-neutral-100">
<a class="inline-block text-neutral-900 hover:bg-primary-500/[.04] dark:text-themedark-bodycolor rounded-full px-[18px] py-3 text-[14px] font-medium transition-all leading-[1.429]"
href="#">
Overview
</a>
<a class="inline-block text-neutral-900 hover:bg-primary-500/[.04] dark:text-themedark-bodycolor rounded-full px-[18px] py-3 text-[14px] font-medium transition-all leading-[1.429]"
href="#">
Products
</a>
<a class="inline-block text-neutral-900 hover:bg-primary-500/[.04] dark:text-themedark-bodycolor rounded-full px-[18px] py-3 text-[14px] font-medium transition-all leading-[1.429]"
href="#">
Pricing
</a>
<div class="btn-group group">
<button
class="inline-flex text-neutral-900 hover:bg-primary-500/[.04] dark:text-themedark-bodycolor rounded-full px-[18px] py-3 text-[14px] font-medium transition-all leading-[1.429] dropdown-toggle arrow-none ltr:text-left rtl:text-right max-lg:w-full justify-between items-center"
type="button" data-pc-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resource
<i class="ti ti-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-center group-[.drp-show]:max-lg:!relative !w-[368px] max-lg:!w-full max-lg:!transform-none !p-0 overflow-hidden shadow-[0px_0px_2px_0px_rgba(0,0,0,0.2),_rgba(26,28,30,0.06)_0px_16px_10px_0px]">
<ul class="p-2">
<li>
<a href="#"
class="px-3 md:px-4 py-[6px] md:py-[10px] hover:bg-neutral-50 focus:bg-neutral-200 rounded-xl transition-all block my-0.5">
<div class="my-[6px]">
<h6 class="subtitle1 mb-1">Blog</h6>
<p class="body2 text-theme-textsecondary">Explore our latest articles and insights.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="bg-neutral-200/80 px-3 md:px-4 py-[6px] md:py-[10px] hover:bg-neutral-50 focus:bg-neutral-200 rounded-xl transition-all block my-0.5">
<div class="my-[6px]">
<h6 class="subtitle1 mb-1">Help Center</h6>
<p class="body2 text-theme-textsecondary">Find answers to common questions and support topics.
</p>
</div>
</a>
</li>
<li>
<a href="#"
class="px-3 md:px-4 py-[6px] md:py-[10px] hover:bg-neutral-50 focus:bg-neutral-200 rounded-xl transition-all block my-0.5">
<div class="my-[6px]">
<h6 class="subtitle1 mb-1">Guides</h6>
<p class="body2 text-theme-textsecondary">Follow our comprehensive guides to get started.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="px-3 md:px-4 py-[6px] md:py-[10px] hover:bg-neutral-50 focus:bg-neutral-200 rounded-xl transition-all block my-0.5">
<div class="my-[6px]">
<h6 class="subtitle1 mb-1">Events</h6>
<p class="body2 text-theme-textsecondary">Stay informed about upcoming events and webinars.</p>
</div>
</a>
</li>
<li>
<a href="#"
class="px-3 md:px-4 py-[6px] md:py-[10px] hover:bg-neutral-50 focus:bg-neutral-200 rounded-xl transition-all block my-0.5">
<div class="my-[6px]">
<h6 class="subtitle1 mb-1">Security</h6>
<p class="body2 text-theme-textsecondary">Learn about our security measures to protect your
data.</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<a class="inline-block text-neutral-900 hover:bg-primary-500/[.04] dark:text-themedark-bodycolor rounded-full px-[18px] py-3 text-[14px] font-medium transition-all leading-[1.429]"
href="#">
Help
</a>
<div class="py-5 px-6 sm:hidden bg-neutral-100">
<div class="flex items-center justify-between gap-2">
<a href="#" class="btn-outline-primary btn">Sign in</a>
<a href="#" class="btn-primary btn">Get Started</a>
</div>
</div>
</div>
</div>
</div>
<div class="flex items-center gap-3">
<a href="#" class="btn-outline-primary btn max-sm:hidden">Sign in</a>
<a href="#" class="btn-primary btn max-sm:hidden">Get Started</a>
</div>
<button data-pc-toggle="nav-collapse" type="button" data-pc-target="#main-navbar-collapse"
class="inline-flex ltr:ml-2 rtl:mr-2 items-center p-2 w-10 h-10 justify-center text-sm text-neutral-900 rounded-full lg:hidden hover:bg-neutral-100 focus:outline-none">
<i class="ti ti-menu-2 text-2xl leading-none"></i>
</button>
</div>
</div>
</nav>
<!-- [ Nav ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,148 @@
<!-- [ other ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 sm:gap-8">
<div class="items-center text-center">
<h2>Customizable Building Blocks</h2>
</div>
<div class="grid grid-cols-12 gap-3">
<div class="col-span-6 md:col-span-4">
<a href="../block/hero.html" class="card overflow-hidden !mb-0 group/child rounded-[40px] block bg-neutral-100 h-full">
<div class="relative group-hover/child:scale-[1.02] transition-all duration-1000">
@@include('../../images/block-bg.html',{'substyle': 'class="absolute z-10"'})
<div class="card-body relative inset-0 z-20 !px-[14.5%] !pt-[16%] !pb-[6%]">
<div class="pb-4 lg:pb-2">
<img src="../assets/images/presentation/hero-light.svg" class="block w-full dark:hidden"
alt="images" />
<img src="../assets/images/presentation/hero-dark.svg" class="hidden w-full dark:block"
alt="images" />
</div>
<div class="text-primary-500 pt-[7px] text-center">
@@include('../../images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto mx-auto"'})
</div>
<div class="text-center mt-6">
<h4 class="text-primary-500 mb-1">Hero</h4>
<p class="text-theme-text-secondary body-2">17 Different Variants</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-span-6 md:col-span-4">
<a href="../block/cta.html" class="card overflow-hidden !mb-0 group/child rounded-[40px] block bg-neutral-100 h-full">
<div class="relative group-hover/child:scale-[1.02] transition-all duration-1000">
@@include('../../images/block-bg.html',{'substyle': 'class="absolute z-10"'})
<div class="card-body relative inset-0 z-20 !px-[14.5%] !pt-[16%] !pb-[6%]">
<div class="pb-4 lg:pb-2">
<img src="../assets/images/presentation/cta-light.svg" class="block w-full dark:hidden"
alt="images" />
<img src="../assets/images/presentation/cta-dark.svg" class="hidden w-full dark:block" alt="images" />
</div>
<div class="text-primary-500 pt-[7px] text-center">
@@include('../../images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto mx-auto"'})
</div>
<div class="text-center mt-6">
<h4 class="text-primary-500 mb-1">Call-To-Action</h4>
<p class="text-theme-text-secondary body-2">12 Different Variants</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-span-6 md:col-span-4">
<a href="../block/feature.html" class="card overflow-hidden !mb-0 group/child rounded-[40px] block bg-neutral-100 h-full">
<div class="relative group-hover/child:scale-[1.02] transition-all duration-1000">
@@include('../../images/block-bg.html',{'substyle': 'class="absolute z-10"'})
<div class="card-body relative inset-0 z-20 !px-[14.5%] !pt-[16%] !pb-[6%]">
<div class="pb-4 lg:pb-2">
<img src="../assets/images/presentation/feature-light.svg" class="block w-full dark:hidden"
alt="images" />
<img src="../assets/images/presentation/feature-dark.svg" class="hidden w-full dark:block"
alt="images" />
</div>
<div class="text-primary-500 pt-[7px] text-center">
@@include('../../images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto mx-auto"'})
</div>
<div class="text-center mt-6">
<h4 class="text-primary-500 mb-1">Feature</h4>
<p class="text-theme-text-secondary body-2">23 Different Variants</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-span-6 md:col-span-4">
<a href="../block/benefit.html" class="card overflow-hidden !mb-0 group/child rounded-[40px] block bg-neutral-100 h-full">
<div class="relative group-hover/child:scale-[1.02] transition-all duration-1000">
@@include('../../images/block-bg.html',{'substyle': 'class="absolute z-10"'})
<div class="card-body relative inset-0 z-20 !px-[14.5%] !pt-[16%] !pb-[6%]">
<div class="pb-4 lg:pb-2">
<img src="../assets/images/presentation/benefits-light.svg" class="block w-full dark:hidden"
alt="images" />
<img src="../assets/images/presentation/benefits-dark.svg" class="hidden w-full dark:block"
alt="images" />
</div>
<div class="text-primary-500 pt-[7px] text-center">
@@include('../../images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto mx-auto"'})
</div>
<div class="text-center mt-6">
<h4 class="text-primary-500 mb-1">Benefits</h4>
<p class="text-theme-text-secondary body-2">9 Different Variants</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-span-6 md:col-span-4">
<a href="../block/process.html" class="card overflow-hidden !mb-0 group/child rounded-[40px] block bg-neutral-100 h-full">
<div class="relative group-hover/child:scale-[1.02] transition-all duration-1000">
@@include('../../images/block-bg.html',{'substyle': 'class="absolute z-10"'})
<div class="card-body relative inset-0 z-20 !px-[14.5%] !pt-[16%] !pb-[6%]">
<div class="pb-4 lg:pb-2">
<img src="../assets/images/presentation/process-light.svg" class="block w-full dark:hidden"
alt="images" />
<img src="../assets/images/presentation/process-dark.svg" class="hidden w-full dark:block"
alt="images" />
</div>
<div class="text-primary-500 pt-[7px] text-center">
@@include('../../images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto mx-auto"'})
</div>
<div class="text-center mt-6">
<h4 class="text-primary-500 mb-1">Process</h4>
<p class="text-theme-text-secondary body-2">7 Different Variants</p>
</div>
</div>
</div>
</a>
</div>
<div class="col-span-6 md:col-span-4">
<a href="../block/integration.html" class="card overflow-hidden !mb-0 group/child rounded-[40px] block bg-neutral-100 h-full">
<div class="relative group-hover/child:scale-[1.02] transition-all duration-1000">
@@include('../../images/block-bg.html',{'substyle': 'class="absolute z-10"'})
<div class="card-body relative inset-0 z-20 !px-[14.5%] !pt-[16%] !pb-[6%]">
<div class="pb-4 lg:pb-2">
<img src="../assets/images/presentation/integration-light.svg" class="block w-full dark:hidden"
alt="images" />
<img src="../assets/images/presentation/integration-dark.svg" class="hidden w-full dark:block"
alt="images" />
</div>
<div class="text-primary-500 pt-[7px] text-center">
@@include('../../images/wave.html', {'substyle': 'class="w-[92px] md:w-[122px] h-auto mx-auto"'})
</div>
<div class="text-center mt-6">
<h4 class="text-primary-500 mb-1">Integration</h4>
<p class="text-theme-text-secondary body-2">8 Different Variants</p>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="flex flex-col items-center text-center gap-4">
<h6 class="w-full sm:w-4/5 lg:w-[65%] text-theme-text-secondary">Kickstart your SaaS landing page design with pre-designed templates featuring versatile components.</h6>
<button class="btn btn-outline-primary">Explore all Blocks</button>
</div>
</div>
</div>
</section>
<!-- [ other ] end -->
@@ -0,0 +1,67 @@
<!-- [ Feature ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 sm:gap-8 md:gap-10">
<div class="flex flex-col items-center gap-5 sm:gap-6">
<div class="bg-secondary-100/40 w-[30%] h-8 animate-pulse rounded-[20px]"></div>
<div class="flex flex-col items-center gap-3 w-full">
<div class="bg-secondary-200/40 w-[70%] h-[57px] animate-pulse rounded-[10px]"></div>
<div class="bg-secondary-200/40 w-[60%] h-[57px] animate-pulse rounded-[10px]"></div>
</div>
<div class="flex flex-col items-center gap-2 w-full">
<div class="bg-secondary-200/30 w-[36%] h-6 animate-pulse rounded-md"></div>
<div class="bg-secondary-200/30 w-[30%] h-6 animate-pulse rounded-md"></div>
</div>
<div class="flex flex-row items-center justify-center gap-2 w-full">
<div class="bg-secondary-200/30 w-[183px] h-[52px] animate-pulse rounded-[20px]"></div>
<div class="bg-secondary-200/60 w-[183px] h-[52px] animate-pulse rounded-[20px]"></div>
</div>
</div>
<div class="div">
<div class="bg-neutral-100 relative px-6 sm:px-12 pt-10 sm:pt-[60px] rounded-3xl sm:rounded-[32px] md:rounded-[40px] overflow-hidden">
<div class="grid grid-cols-12 gap-0">
<div class="col-span-8">
<div class="bg-secondary-200/40 w-full h-[280px] sm:h-[380px] rounded-t-[20px]"></div>
</div>
<div class="col-span-8">
<div class="bg-theme-bg-default/40 w-[61%] h-[80%] rounded-t-[20px] absolute top-[40%] ltr:left-[35%] rtl:right-[35%]"></div>
</div>
</div>
</div>
</div>
<div class="div w-full">
<div class="grid grid-cols-12 gap-3 md:gap-[60px]">
<div class="col-span-6 md:col-span-3">
<div class="flex flex-col gap-3 w-full">
<div class="bg-secondary-200/40 w-[80%] h-9 animate-pulse rounded-xl"></div>
<div class="bg-secondary-200/[.25] w-full h-4 animate-pulse rounded-md"></div>
<div class="bg-secondary-200/[.25] w-[32%] h-4 animate-pulse rounded-md"></div>
</div>
</div>
<div class="col-span-6 md:col-span-3">
<div class="flex flex-col gap-3 w-full">
<div class="bg-secondary-200/40 w-[80%] h-9 animate-pulse rounded-xl"></div>
<div class="bg-secondary-200/[.25] w-full h-4 animate-pulse rounded-md"></div>
<div class="bg-secondary-200/[.25] w-[32%] h-4 animate-pulse rounded-md"></div>
</div>
</div>
<div class="col-span-6 md:col-span-3">
<div class="flex flex-col gap-3 w-full">
<div class="bg-secondary-200/40 w-[80%] h-9 animate-pulse rounded-xl"></div>
<div class="bg-secondary-200/[.25] w-full h-4 animate-pulse rounded-md"></div>
<div class="bg-secondary-200/[.25] w-[32%] h-4 animate-pulse rounded-md"></div>
</div>
</div>
<div class="col-span-6 md:col-span-3">
<div class="flex flex-col gap-3 w-full">
<div class="bg-secondary-200/40 w-[80%] h-9 animate-pulse rounded-xl"></div>
<div class="bg-secondary-200/[.25] w-full h-4 animate-pulse rounded-md"></div>
<div class="bg-secondary-200/[.25] w-[32%] h-4 animate-pulse rounded-md"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- [ Feature ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,375 @@
<!-- [ Pricing ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 sm:gap-8">
<div class="flex flex-col text-center items-center gap-2 sm:gap-3">
<h2>The Affordable Unfair Advantage</h2>
<h6 class="text-theme-textsecondary">Choose the plan that aligns with your cloud management requirements.</h6>
</div>
<div class="flex flex-col sm:flex-row gap-4 h-full">
<div class="basis-full sm:basis-4/12">
<div class="h-full bg-neutral-100 rounded-2xl sm:rounded-3xl relative border border-neutral-100">
<div class="pt-8 sm:pt-10 lg:pt-16 px-4 lg:px-10 pb-4 sm:pb-6 lg:pb-10 h-full">
<div class="flex flex-col gap-10 h-full">
<div class="flex flex-col gap-4 lg:gap-6">
<div class="flex flex-col gap-2 lg:gap-3 text-center">
<h6 class="subtitle1">Standard</h6>
<div class="flex flex-row items-end justify-center">
<div class="h1">$69</div>
</div>
</div>
</div>
<div class="flex flex-col gap-6 sm:gap-8 lg:gap-10 justify-between h-full">
<div class="flex flex-col gap-10">
<div class="relative">
<div aria-hidden="true" class="absolute flex inset-0 items-center">
<div class="w-full border-t border-theme-divider"></div>
</div>
<div class="relative flex justify-center">
<span class="px-4 bg-neutral-100">
<span class="bg-neutral-200 px-3 py-1 rounded-full caption text-theme-text-secondary">Features</span>
</span>
</div>
</div>
<ul class="flex flex-col gap-1.5 lg:gap-2 leading-none h-full">
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
</div>
</div>
<div class="grow">
<p class="subtitle1 text-neutral-900">CRA JavaScript</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-x text-[16px] leading-none text-theme-text-secondary"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-text-secondary">CRA TypeScript</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
</div>
</div>
<div class="grow">
<p class="subtitle1 text-neutral-900">Next.js JavaScript</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-x text-[16px] leading-none text-theme-text-secondary"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-text-secondary">Next.js TypeScript</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-x text-[16px] leading-none text-theme-text-secondary"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-text-secondary">Figma</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-x text-[16px] leading-none text-theme-text-secondary"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-text-secondary">SaaS End Products</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-x text-[16px] leading-none text-theme-text-secondary"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-text-secondary">Subscription Based Product</p>
</div>
</div>
</li>
</ul>
</div>
<div class="flex flex-col gap-1.5">
<button class="btn btn-outline-primary sm:mb-6 lg:mb-7">Get Started with Standard</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="basis-full sm:basis-4/12">
<div class="h-full bg-neutral-100 rounded-2xl sm:rounded-3xl relative border border-neutral-100">
<div class="pt-8 sm:pt-10 lg:pt-16 px-4 lg:px-10 pb-4 sm:pb-6 lg:pb-10 h-full">
<div class="flex flex-col gap-10 h-full">
<div class="flex flex-col gap-4 lg:gap-6">
<div class="flex flex-col gap-2 lg:gap-3 text-center">
<h6 class="subtitle1">Plus</h6>
<div class="flex flex-row items-end justify-center">
<div class="h1">$129</div>
</div>
</div>
</div>
<div class="flex flex-col gap-6 sm:gap-8 lg:gap-10 justify-between h-full">
<div class="flex flex-col gap-10">
<div class="relative">
<div aria-hidden="true" class="absolute flex inset-0 items-center">
<div class="w-full border-t border-theme-divider"></div>
</div>
<div class="relative flex justify-center">
<span class="px-4 bg-neutral-100">
<span class="bg-neutral-200 px-3 py-1 rounded-full caption text-theme-text-secondary">Features</span>
</span>
</div>
</div>
<ul class="flex flex-col gap-1.5 lg:gap-2 leading-none h-full">
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
</div>
</div>
<div class="grow">
<p class="subtitle1 text-neutral-900">CRA JavaScript</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
</div>
</div>
<div class="grow">
<p class="subtitle1 text-neutral-900">CRA TypeScript</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
</div>
</div>
<div class="grow">
<p class="subtitle1 text-neutral-900">Next.js JavaScript</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
</div>
</div>
<div class="grow">
<p class="subtitle1 text-neutral-900">Next.js TypeScript</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
</div>
</div>
<div class="grow">
<p class="subtitle1 text-neutral-900">Figma</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-x text-[16px] leading-none text-theme-text-secondary"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-text-secondary">SaaS End Products</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-x text-[16px] leading-none text-theme-text-secondary"></i>
</div>
</div>
<div class="grow">
<p class="body1 text-theme-text-secondary">Subscription Based Product</p>
</div>
</div>
</li>
</ul>
</div>
<div class="flex flex-col gap-1.5">
<button class="btn btn-primary sm:mb-6 lg:mb-7">Get Started with Plus</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="basis-full sm:basis-4/12">
<div class="h-full bg-neutral-100 rounded-2xl sm:rounded-3xl relative border border-neutral-100">
<div class="pt-8 sm:pt-10 lg:pt-16 px-4 lg:px-10 pb-4 sm:pb-6 lg:pb-10 h-full">
<div class="flex flex-col gap-10 h-full">
<div class="flex flex-col gap-4 lg:gap-6">
<div class="flex flex-col gap-2 lg:gap-3 text-center">
<h6 class="subtitle1">Extended</h6>
<div class="flex flex-row items-end justify-center">
<div class="h1">$599</div>
</div>
</div>
</div>
<div class="flex flex-col gap-6 sm:gap-8 lg:gap-10 justify-between h-full">
<div class="flex flex-col gap-10">
<div class="relative">
<div aria-hidden="true" class="absolute flex inset-0 items-center">
<div class="w-full border-t border-theme-divider"></div>
</div>
<div class="relative flex justify-center">
<span class="px-4 bg-neutral-100">
<span class="bg-neutral-200 px-3 py-1 rounded-full caption text-theme-text-secondary">Features</span>
</span>
</div>
</div>
<ul class="flex flex-col gap-1.5 lg:gap-2 leading-none h-full">
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
</div>
</div>
<div class="grow">
<p class="subtitle1 text-neutral-900">CRA JavaScript</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
</div>
</div>
<div class="grow">
<p class="subtitle1 text-neutral-900">CRA TypeScript</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
</div>
</div>
<div class="grow">
<p class="subtitle1 text-neutral-900">Next.js JavaScript</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
</div>
</div>
<div class="grow">
<p class="subtitle1 text-neutral-900">Next.js TypeScript</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
</div>
</div>
<div class="grow">
<p class="subtitle1 text-neutral-900">Figma</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
</div>
</div>
<div class="grow">
<p class="subtitle1 text-neutral-900">SaaS End Products</p>
</div>
</div>
</li>
<li>
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<div class="w-6 h-6 inline-flex items-center justify-center rounded-full">
<i class="ti ti-check text-[16px] leading-none text-neutral-900"></i>
</div>
</div>
<div class="grow">
<p class="subtitle1 text-neutral-900">Subscription Based Product</p>
</div>
</div>
</li>
</ul>
</div>
<div class="flex flex-col gap-1.5">
<button class="btn btn-outline-primary">Get Started with Extended</button>
<h6 class="subtitle1 text-theme-text-secondary text-center">
or
<a class="subtitle1 text-primary-500 hover:underline ltr:ml-1 rtl:mr-1" href="#">Contact Us</a>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- [ Pricing ] end -->
@@ -0,0 +1,32 @@
<!-- [ section ] start -->
<section class="z-50 w-full relative common-section">
<div class="container">
<div class="bg-theme-bg-default rounded-4xl">
<div class="flex flex-col justify-center items-center">
<img src="../assets/images/free-lock.svg" alt="image" class="w-[75px] lg:w-[150px]">
<h4 class=" font-bold mb-2 mt-8 lg:mt-14 text-center">
Discover the Components Not Available in the Free Version
</h4>
<p class="body1 mb-6 text-neutral-700 text-center">
<a href="#" class="hover:underline" target="_blank">Check out SaasAble PRO</a>
which offers updated components, auto layout, and Figma new variables, complete with dark mode!
</p>
<div class="flex gap-4 justify-center">
<a href="https://www.figma.com/design/mlkXfeqxUKqIo0GQhPBqPb/SaasAble---UI-Kit---Preview-only?node-id=11-1833&t=JBHOIIEuYZpmN6v8-1" target="_blank" class="btn btn-outline-primary w-[215px]" target="_blank">
<span class="flex justify-center items-center gap-2 ltr:-ml-1 rtl:-mr-1">
<img src="../assets/images/shared/figma.svg" class="w-4 h-4"></img>
Preview Pro
</span>
</a>
<a href="https://tailwind.saasable.io/block/block.html" taget="_blank" class="btn btn-primary" target="_blank">
<span class="flex justify-center items-center gap-2 ltr:-ml-1 rtl:-mr-1">
<i class="ti ti-sparkles text-base leading-none"></i>
View Pro Component
</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- [ section ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,22 @@
<!-- [ small hero ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col items-start gap-3 md:gap-8">
<div class="py-3 px-6 text-theme-textsecondary caption bg-neutral-100 rounded-full">
New Beta Version is Release <a href="#" class="text-primary-500 hover:text-primary-800 hover:underline transition-all">explore now</a>
</div>
<div class="flex flex-col lg:flex-row justify-between w-full gap-6">
<div class="flex flex-col gap-3">
<h1 class="">Effortless CRM Management, Seamless Business<img src="../assets/images/graphics/ai/rocket.svg" alt="images" class="inline-block align-sub bg-contain mx-1 sm:mx-2 md:mx-3 h-[32px] sm:h-[45px] md:h-[57px] w-[61px] sm:w-[86px] md:w-[109px]"/>Growth</h1>
<h6 class="text-theme-textsecondary md:w-[85%]">
Empowering Businesses with a Customizable, Data-Driven CRM Solution.
</h6>
</div>
<div class="flex flex-row items-end min-w-fit">
<button class="btn btn-outline-primary btn-lg">Explore More</button>
</div>
</div>
</div>
</div>
</section>
<!-- [ small hero ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')
@@ -0,0 +1,186 @@
<!-- [ Testimonial ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 sm:gap-8">
<div class="flex flex-col items-center text-center gap-2 sm:gap-3">
<h2>Hear From Our Satisfied Users</h2>
<h6 class="text-theme-textsecondary max-w-[550px] lg:max-w-[700px]">Discover why users love our platform and how it's making a positive impact on their work and businesses.</h6>
</div>
<div class="columns-2 sm:columns-3 gap-3 *:mb-3 relative">
<div class="absolute inset-0 !m-0 z-10 bg-[radial-gradient(146.46%_68.12%_at_50%_29.86%,_transparent_0%,_var(--theme-bg-default)_100%)]"></div>
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
<div class="flex flex-row gap-[6px] text-base leading-none">
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
</div>
<div class="flex gap-2 flex-col justify-center">
<h6 class="subtitle1">Strongly endorsed!</h6>
<p class="body1 text-theme-textsecondary">This platform exceeded my expectations! The features are robust, and the user interface is incredibly intuitive.</p>
</div>
<div class="flex gap-1 flex-col justify-center">
<h6 class="subtitle1">Sarah T.</h6>
<div class="body2 text-theme-text-secondary">Business Owner</div>
</div>
</div>
</div>
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
<div class="flex flex-row gap-[6px] text-base leading-none">
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
</div>
<div class="flex gap-2 flex-col justify-center">
<h6 class="subtitle1">Hugely endorsed!</h6>
<p class="body1 text-theme-textsecondary">I've recommended this platform to colleagues, and they've all been impressed. It's versatile, efficient, and simply fantastic.</p>
</div>
<div class="flex gap-1 flex-col justify-center">
<h6 class="subtitle1">Maria S</h6>
<div class="body2 text-theme-text-secondary">Marketing Specialist</div>
</div>
</div>
</div>
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
<div class="flex flex-row gap-[6px] text-base leading-none">
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
</div>
<div class="flex gap-2 flex-col justify-center">
<h6 class="subtitle1">Highly recommended!</h6>
<p class="body1 text-theme-textsecondary">I've used many platforms in my career, and this one is a standout. The functionality is unmatched, making it a joy to work with.</p>
</div>
<div class="flex gap-1 flex-col justify-center">
<h6 class="subtitle1">Jessica W.</h6>
<div class="body2 text-theme-text-secondary">UX/UI Designer</div>
</div>
</div>
</div>
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
<div class="flex flex-row gap-[6px] text-base leading-none">
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-100"></i>
</div>
<div class="flex gap-2 flex-col justify-center">
<h6 class="subtitle1">Top pick!</h6>
<p class="body1 text-theme-textsecondary">I've tried several platforms, and this one stands out for its reliability and user-friendly.</p>
</div>
<div class="flex gap-1 flex-col justify-center">
<h6 class="subtitle1">Alex M.</h6>
<div class="body2 text-theme-text-secondary">Project Manager</div>
</div>
</div>
</div>
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
<div class="flex flex-row gap-[6px] text-base leading-none">
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-100"></i>
<i class="ti ti-star-filled text-primary-100"></i>
<i class="ti ti-star-filled text-primary-100"></i>
</div>
<div class="flex gap-2 flex-col justify-center">
<h6 class="subtitle1">Outstanding choice!</h6>
<p class="body1 text-theme-textsecondary">This platform transformed the way we work. It's flexible, scalable, and adapts seamlessly to our evolving needs.</p>
</div>
<div class="flex gap-1 flex-col justify-center">
<h6 class="subtitle1">James L.</h6>
<div class="body2 text-theme-text-secondary">IT Professional</div>
</div>
</div>
</div>
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
<div class="flex flex-row gap-[6px] text-base leading-none">
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-100"></i>
<i class="ti ti-star-filled text-primary-100"></i>
<i class="ti ti-star-filled text-primary-100"></i>
<i class="ti ti-star-filled text-primary-100"></i>
</div>
<div class="flex gap-2 flex-col justify-center">
<h6 class="subtitle1">Exceptional suggestion!</h6>
<p class="body1 text-theme-textsecondary">Our team's productivity soared after adopting this platform. It's a reliable solution that brings tangible results.</p>
</div>
<div class="flex gap-1 flex-col justify-center">
<h6 class="subtitle1">Eric H.</h6>
<div class="body2 text-theme-text-secondary">Operations Manager</div>
</div>
</div>
</div>
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
<div class="flex flex-row gap-[6px] text-base leading-none">
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-100"></i>
<i class="ti ti-star-filled text-primary-100"></i>
<i class="ti ti-star-filled text-primary-100"></i>
</div>
<div class="flex gap-2 flex-col justify-center">
<h6 class="subtitle1">Widely praised!</h6>
<p class="body1 text-theme-textsecondary">Outstanding customer support! They're responsive and go above and beyond to ensure a smooth experience. Highly satisfied.</p>
</div>
<div class="flex gap-1 flex-col justify-center">
<h6 class="subtitle1">Emily P.</h6>
<div class="body2 text-theme-text-secondary">Freelancer</div>
</div>
</div>
</div>
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
<div class="flex flex-row gap-[6px] text-base leading-none">
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-100"></i>
<i class="ti ti-star-filled text-primary-100"></i>
</div>
<div class="flex gap-2 flex-col justify-center">
<h6 class="subtitle1">A must-consider!</h6>
<p class="body1 text-theme-textsecondary">As a tech enthusiast, I appreciate the innovation behind this platform. It's modern, sleek, and delivers on its promises.</p>
</div>
<div class="flex gap-1 flex-col justify-center">
<h6 class="subtitle1">Kevin R.</h6>
<div class="body2 text-theme-text-secondary">Software Developer</div>
</div>
</div>
</div>
<div class="w-full bg-neutral-100 rounded-2xl sm:rounded-3xl overflow-hidden">
<div class="flex flex-col h-full justify-between gap-6 p-3 lg:p-4">
<div class="flex flex-row gap-[6px] text-base leading-none">
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-500"></i>
<i class="ti ti-star-filled text-primary-100"></i>
<i class="ti ti-star-filled text-primary-100"></i>
</div>
<div class="flex gap-2 flex-col justify-center">
<h6 class="subtitle1">Superbly recommended!</h6>
<p class="body1 text-theme-textsecondary">What I love most is the seamless integration with other tools. It streamlines our workflow and saves us valuable time.</p>
</div>
<div class="flex gap-1 flex-col justify-center">
<h6 class="subtitle1">Brian C.</h6>
<div class="body2 text-theme-text-secondary">Content Creator</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- [ Testimonial ] end -->
@@ -0,0 +1 @@
@@include('../../partials/pro-page/pro-page.html')

Some files were not shown because too many files have changed in this diff Show More