First Commit
This commit is contained in:
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+64
@@ -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 -->
|
||||
+1
@@ -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')
|
||||
+55
@@ -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 -->
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+109
@@ -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%]">We’d 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')
|
||||
+17
@@ -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 -->
|
||||
+20
@@ -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, it’s not limited to SaaS products. SaasAble is multipurpose and can
|
||||
be used for a variety of websites and applications, whether it’s 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. It’s 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 -->
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+364
@@ -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 -->
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+100
@@ -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 -->
|
||||
+131
@@ -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 -->
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -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')
|
||||
+82
@@ -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')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+83
@@ -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 -->
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+107
@@ -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')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+375
@@ -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 -->
|
||||
+32
@@ -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 -->
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+22
@@ -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 -->
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+1
@@ -0,0 +1 @@
|
||||
@@include('../../partials/pro-page/pro-page.html')
|
||||
+186
@@ -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 -->
|
||||
+1
@@ -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
Reference in New Issue
Block a user