First Commit

This commit is contained in:
cesnimda
2026-03-21 11:55:27 +01:00
commit 2e8a29b4d0
1757 changed files with 166084 additions and 0 deletions
@@ -0,0 +1,62 @@
<!doctype html>
<html lang="en" @@bodySetup>
<!-- [Head] start -->
<head>
@@include('../layouts/head-page-meta.html', {'title': 'About'})@@include('../layouts/head-css.html')
</head>
<!-- [Head] end -->
<!-- [Body] Start -->
<body>
@@include('../layouts/loader.html')
@@include('../layouts/component/component-header.html")
<!-- prettier-ignore -->
@@include('../layouts/component/component-breadcrumb.html', {
'breadcrumb_item': 'offer',
'breadcrumb_item_active': '',
'page_title': 'More Than a Company → A Commitment ✦',
'search_hide':'true'
})
@@include('partials/feature-7.html')
@@include('partials/feature-18.html')
@@include('partials/team-5.html')
@@include('partials/feature-23.html')
@@include('partials/clientele-2.html')
<!-- prettier-ignore -->
@@include('partials/contact-us-4.html', {
'search_hide':'true'
})
@@include('partials/footer-7.html')
@@include('../layouts/scroll-top.html')
@@include('../layouts/footer-js.html')
<script src="../assets/js/plugins/motion.js"></script>
<script type="module">
const { animate, inView, scroll } = Motion;
window.addEventListener('load', function () {
// translate y
var anim = document.querySelectorAll('.animate-y');
var sec = 0;
inView(anim, (element) => {
if(element.classList.contains("delay-reset")){
sec = 0
}else{
sec += 0.1;
}
animate(
element,
{ opacity: [0,1], y: [50, 0] },
{
duration: 1,
delay: sec,
ease: [0.215, 0.61, 0.355, 1]
}
)
})
});
</script>
</body>
</html>
@@ -0,0 +1,26 @@
<!-- [ Clientele ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col items-center justify-center gap-5">
<h6 class="animate-y delay-reset subtitle2 text-theme-textsecondary">4,000+ companies already growing</h6>
<div class="animate-y flex flex-wrap items-center justify-evenly gap-6 *:opacity-40 *:hover:opacity-100 *:transition-all *:duration-500 w-full">
@@include('../../images/clientele/Techlify.html', {
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[22px] sm:h-[25px] md:h-[38px]"'
})
@@include('../../images/clientele/Marketly.html', {
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[22px] sm:h-[25px] md:h-[38px]"'
})
@@include('../../images/clientele/Realtor.html', {
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[22px] sm:h-[25px] md:h-[38px]"'
})
@@include('../../images/clientele/Financely.html',{
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[22px] sm:h-[25px] md:h-[38px]"'
})
@@include('../../images/clientele/Realtor.html', {
'substyle': 'class="w-[84px] sm:w-[100px] md:w-[136px] h-[22px] sm:h-[25px] md:h-[38px]"'
})
</div>
</div>
</div>
</section>
<!-- [ Clientele ] end -->
@@ -0,0 +1,116 @@
<!-- [ Contact Us ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-3">
<div id="contact-form" class="animate-y delay-reset rounded-3xl sm:rounded-[32px] bg-neutral-100 overflow-hidden relative w-full">
<div class="p-4 sm:p-8 lg:p-10 bg-neutral-200 rounded-3xl sm:rounded-[32px] md:rounded-[40px]">
<div class="flex flex-col items-center text-center gap-2 sm:gap-3">
<h2 class="max-w-[85%] sm:max-w-[80%]">Wed love to hear from you</h2>
<p class="h6 max-w-[60%]">
Explore key statistics and trends shaping our understanding of the current landscape.
</p>
</div>
</div>
<div class="p-4 sm:p-6 lg:p-10 lg:!px-48">
<form action="#">
<div class="flex flex-col gap-6 sm:gap-8">
<div class="grid grid-cols-12 gap-5">
<div class="col-span-12 sm:col-span-6">
<div class="flex flex-col gap-1">
<h6 class="subtitle1">First Name</h6>
<input type="text" class="form-control !bg-transparent" placeholder="First Name">
</div>
</div>
<div class="col-span-12 sm:col-span-6">
<div class="flex flex-col gap-1">
<h6 class="subtitle1">Last Name</h6>
<input type="text" class="form-control !bg-transparent" placeholder="Last Name">
</div>
</div>
<div class="col-span-12 sm:col-span-6">
<div class="flex flex-col gap-1">
<h6 class="subtitle1">Email</h6>
<input type="email" class="form-control !bg-transparent" placeholder="example@gmail.com">
</div>
</div>
<div class="col-span-12 sm:col-span-6">
<div class="flex flex-col gap-1">
<h6 class="subtitle1">Phone number</h6>
<input type="email" class="form-control !bg-transparent" placeholder="Phone number">
</div>
</div>
<div class="col-span-12">
<div class="flex flex-col gap-1">
<h6 class="subtitle1">Message</h6>
<textarea class="form-control !bg-transparent" rows="4" placeholder="Please type your message here.."></textarea>
</div>
</div>
</div>
<div class="text-center">
<button class="btn btn-primary btn-lg">Send Message</button>
</div>
</div>
</form>
</div>
</div>
<script>
var forms_hide = '@@search_hide';
var contact_form = document.getElementById('contact-form');
if (forms_hide == 'true') {
contact_form.classList.add('hidden');
}
</script>
<div class="flex flex-col sm:flex-row gap-3">
<div class="basis-full sm:basis-4/12">
<div class="animate-y 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="animate-y 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="animate-y 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,394 @@
<!-- [ Feature ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 sm:gap-8">
<div class="animate-y delay-reset flex flex-col gap-2 sm:gap-3 items-center text-center">
<h2>Powerful Admin Interface</h2>
<h6 class="text-theme-textsecondary sm:max-w-[470px] lg:max-w-[615px] mx-auto">
Manage data, users, and workflows effortlessly with intuitive, customizable admin controls and features.
</h6>
</div>
<div class="animate-y 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">Material UI Powered</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-palette text-base leading-none text-theme-text-secondary"></i></div>
<div class="grow">Customizable Themes</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-rocket text-base leading-none text-theme-text-secondary"></i></div>
<div class="grow">Faster Development</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-scale text-base leading-none text-theme-text-secondary"></i></div>
<div class="grow">Scalability</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/default/admin-dashboard.png')] dark:bg-[url('../images/graphics/default/admin-dashboard-dark.png')]"></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">Material UI Powered</div>
</div>
<div class="flex flex-col gap-4 lg:gap-6">
<div class="flex flex-col gap-1">
<h4>Leverage Power of Material UI Components</h4>
<p class="body1 text-theme-textsecondary">The power and flexibility of Material UI components in admin template</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">Nextjs JavaScript/TypeScript</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">Customizable Themes</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">Rich Form and Table Components</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">Responsive Grid System</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>
Docs
</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>
View Dashboard
</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/default/admin-dashboard-2.png')] dark:bg-[url('../images/graphics/default/admin-dashboard-2-dark.png')]"></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-palette text-base leading-none text-theme-text-secondary"></i></div>
<div class="grow">Customizable Themes</div>
</div>
<div class="flex flex-col gap-4 lg:gap-6">
<div class="flex flex-col gap-1">
<h4>Flexible Theming Options</h4>
<p class="body1 text-theme-textsecondary">Tailor themes effortlessly with MUI v6 robust theming system.</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">Easy options for Theming</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">Layout Options</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">Color Presets tailored to your Web Apps</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">Consistency in Design</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>
Docs
</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>
View Dashboard
</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/default/admin-dashboard-3.png')] dark:bg-[url('../images/graphics/default/admin-dashboard-3.png')]"></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-rocket text-base leading-none text-theme-text-secondary"></i></div>
<div class="grow">Faster Development</div>
</div>
<div class="flex flex-col gap-4 lg:gap-6">
<div class="flex flex-col gap-1">
<h4>Rapid Development</h4>
<p class="body1 text-theme-textsecondary">Launch projects quicker with pre-built layouts and components.</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">Time Saving</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">Tested and Reliable</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">Customization Ready</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">Enhanced User Experience</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>
Docs
</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>
View Dashboard
</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/default/admin-dashboard.png')] dark:bg-[url('../images/graphics/default/admin-dashboard-dark.png')]"></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-scale text-base leading-none text-theme-text-secondary"></i></div>
<div class="grow">Scalability</div>
</div>
<div class="flex flex-col gap-4 lg:gap-6">
<div class="flex flex-col gap-1">
<h4>Build to Scale</h4>
<p class="body1 text-theme-textsecondary">Easily scale your app with flexible, modular, and extensible templates.</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">Modular Architecture</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">Performance Optimized</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">Extensible Codebase</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">Future Proof Design</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>
Docs
</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>
View Dashboard
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- [ Feature ] end -->
@@ -0,0 +1,64 @@
<!-- [ Feature ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 sm:gap-8">
<div class="animate-y delay-reset flex flex-col gap-2 sm:gap-3">
<h2>Culture of Innovation</h2>
<h6 class="text-theme-textsecondary">
Join a team that embraces forward-thinking ideas, fosters innovation, and cultivates an environment where your creativity can flourish.
</h6>
</div>
<div class="grid grid-cols-12 gap-3">
<div class="col-span-12 sm:col-span-6">
<div class="animate-y 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 gap-5">
<div class="pt-6 sm:pt-8 md:pt-10 px-6 sm:px-8 md:px-10">
<i class="ti ti-users text-[40px] leading-none"></i>
</div>
<div class="p-6 sm:p-8 md:p-10 flex flex-col gap-2 sm:gap-3 bg-neutral-200 rounded-3xl sm:rounded-[32px] md:rounded-[40px]">
<h4>Teamwork</h4>
<p class="body1 text-theme-textsecondary">We embrace varied perspectives and backgrounds, creating an inclusive environment.</p>
</div>
</div>
</div>
</div>
<div class="col-span-12 sm:col-span-6">
<div class="animate-y 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 gap-5">
<div class="pt-6 sm:pt-8 md:pt-10 px-6 sm:px-8 md:px-10">
<i class="ti ti-star text-[40px] leading-none"></i>
</div>
<div class="p-6 sm:p-8 md:p-10 flex flex-col gap-2 sm:gap-3 bg-neutral-200 rounded-3xl sm:rounded-[32px] md:rounded-[40px]">
<h4>Inclusivity</h4>
<p class="body1 text-theme-textsecondary">We embrace varied perspectives and backgrounds, creating an inclusive environment.</p>
</div>
</div>
</div>
</div>
<div class="col-span-12">
<div class="animate-y rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden">
<div class="flex flex-col lg:flex-row">
<div class="basis-full lg:basis-5/12">
<div class="p-6 sm:p-8 md:p-10 flex flex-col items-start justify-between h-full gap-8 sm:gap-10 md:gap-14">
<div class="flex flex-col gap-2 sm:gap-3">
<h4>Growth</h4>
<p class="body1 text-theme-textsecondary">Our culture prioritizes continuous learning, encouraging personal and professional development.</p>
</div>
<div class="flex flex-row gap-3 flex-wrap">
<button class="btn btn-primary btn-sm !px-4">Join Our Team</button>
</div>
</div>
</div>
<div class="basis-full lg:basis-7/12">
<div class="bg-neutral-200 rounded-3xl sm:rounded-[32px] md:rounded-[40px] h-[187px] sm:h-[271px] lg:h-full overflow-hidden">
<div class="h-full bg-left-top bg-cover bg-[url('../images/graphics/default/feature23-light.png')] dark:bg-[url('../images/graphics/default/feature23-dark.png')]"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- [ Feature ] end -->
@@ -0,0 +1,128 @@
<link rel="stylesheet" href="../assets/css/plugins/tiny-slider.css" />
<!-- [ Feature ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 sm:gap-8">
<div class="animate-y delay-reset flex flex-col gap-2 sm:gap-3 items-center text-center">
<h2>Real-Time Performance Insights</h2>
<h6 class="text-theme-textsecondary max-w-[750px]">
Gain a competitive edge with real-time performance monitoring.
</h6>
</div>
<div class="animate-y rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden flex flex-col h-full relative" dir="ltr">
<div class="p-4 sm:6 md:p-10 customize-tools sm:absolute left-0 top-0 z-10">
<ul class="thumbnails h5 flex-wrap flex items-center flex-row gap-3 *:*:text-neutral-700 *:*:hover:text-theme-text-secondary *:*:transition-all *:inline-flex *:items-center *:gap-3" id="customize-thumbnails">
<li class="group"><a href="#" class="group-[.tns-nav-active]:text-theme-text-primary">Core Value</a><div class="w-[5px] h-[5px] rounded-full bg-neutral-700"></div></li>
<li class="group"><a href="#" class="group-[.tns-nav-active]:text-theme-text-primary">Culture</a><div class="w-[5px] h-[5px] rounded-full bg-neutral-700"></div></li>
<li class="group"><a href="#" class="group-[.tns-nav-active]:text-theme-text-primary">Story</a></li>
</ul>
</div>
<div class="customize" id="feature-7-slider">
<div>
<div class="flex flex-col sm:flex-row gap-3 items-end">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full basis-full sm:basis-1/2 md:basis-5/12">
<div class="p-4 sm:6 md:p-10 flex flex-col items-start justify-between h-full gap-10">
<div class="flex flex-col items-start justify-end h-full gap-4 sm:gap-6 md:gap-8">
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-2xl flex items-center justify-center">
<i class="ti ti-star text-2xl leading-none text-primary-500"></i>
</div>
<div class="flex flex-col gap-6 grow">
<div class="flex flex-col gap-2">
<h4>Core Value</h4>
<p class="body1 text-theme-textsecondary">Unlock growth potential through continuous monitoring, enabling proactive strategies in a competitive landscape.</p>
</div>
<div class="w-full bg-neutral-300 rounded-lg h-[6px]">
<div class="bg-primary-200 h-full rounded-lg" style="width: 33%"></div>
</div>
</div>
</div>
</div>
</div>
<div class="overflow-hidden max-sm:w-full basis-full sm:basis-1/2 md:basis-7/12">
<div class="w-full h-[380px] sm:h-[529px] bg-neutral-200 rounded-3xl sm:rounded-[32px] md:rounded-[40px] overflow-hidden relative">
<div class="absolute inset-0 z-0 bg-[radial-gradient(74.06%_74.06%_at_28.46%_49.93%,_transparent_0%,_var(--neutral-100)_100%)] opacity-40"></div>
<div class="h-full ltr:rounded-l-xl rtl:rounded-r-xl bg-[100%_50%] bg-contain bg-no-repeat bg-[url('../images/graphics/ai/graphics6-light.svg')] dark:bg-[url('../images/graphics/ai/graphics6-dark.svg')]"></div>
</div>
</div>
</div>
</div>
<div>
<div class="flex flex-col sm:flex-row gap-3 items-end">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full basis-full sm:basis-1/2 md:basis-5/12">
<div class="p-4 sm:6 md:p-10 flex flex-col items-start justify-between h-full gap-10">
<div class="flex flex-col items-start justify-end h-full gap-4 sm:gap-6 md:gap-8">
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-2xl 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-6 gro w">
<div class="flex flex-col gap-2">
<h4>Multi-Cloud Orchestration</h4>
<p class="body1 text-theme-textsecondary">Enhances flexibility and resilience in a multi-cloud environment.</p>
</div>
<div class="w-full bg-neutral-300 rounded-lg h-[6px]">
<div class="bg-primary-200 h-full rounded-lg" style="width: 67%"></div>
</div>
</div>
</div>
</div>
</div>
<div class="overflow-hidden max-sm:w-full basis-full sm:basis-1/2 md:basis-7/12">
<div class="w-full h-[380px] sm:h-[529px] bg-neutral-200 rounded-3xl sm:rounded-[32px] md:rounded-[40px] overflow-hidden relative">
<div class="absolute inset-0 z-0 bg-[radial-gradient(74.06%_74.06%_at_28.46%_49.93%,_transparent_0%,_var(--neutral-100)_100%)] opacity-40"></div>
<div class="h-full ltr:rounded-l-xl rtl:rounded-r-xl bg-[100%_50%] bg-contain bg-no-repeat bg-[url('../images/graphics/ai/graphics8-light.svg')] dark:bg-[url('../images/graphics/ai/graphics8-dark.svg')]"></div>
</div>
</div>
</div>
</div>
<div>
<div class="flex flex-col sm:flex-row gap-3 items-end">
<div class="rounded-3xl sm:rounded-[32px] md:rounded-[40px] bg-neutral-100 overflow-hidden h-full basis-full sm:basis-1/2 md:basis-5/12">
<div class="p-4 sm:6 md:p-10 flex flex-col items-start justify-between h-full gap-10">
<div class="flex flex-col items-start justify-end h-full gap-4 sm:gap-6 md:gap-8">
<div class="w-[60px] h-[60px] bg-neutral-300 rounded-2xl flex items-center justify-center">
<i class="ti ti-history text-2xl leading-none text-primary-500"></i>
</div>
<div class="flex flex-col gap-6 grow">
<div class="flex flex-col gap-2">
<h4>Story</h4>
<p class="body1 text-theme-textsecondary">Real-time performance insights empower teams to respond swiftly, optimizing operations and driving growth.</p>
</div>
<div class="w-full bg-neutral-300 rounded-lg h-[6px]">
<div class="bg-primary-200 h-full rounded-lg" style="width: 100%"></div>
</div>
</div>
</div>
</div>
</div>
<div class="overflow-hidden max-sm:w-full basis-full sm:basis-1/2 md:basis-7/12">
<div class="w-full h-[380px] sm:h-[529px] bg-neutral-200 rounded-3xl sm:rounded-[32px] md:rounded-[40px] overflow-hidden relative">
<div class="absolute inset-0 z-0 bg-[radial-gradient(74.06%_74.06%_at_28.46%_49.93%,_transparent_0%,_var(--neutral-100)_100%)] opacity-40"></div>
<div class="h-full ltr:rounded-l-xl rtl:rounded-r-xl bg-[100%_50%] bg-contain bg-no-repeat bg-[url('../images/graphics/ai/graphics3-light.svg')] dark:bg-[url('../images/graphics/ai/graphics3-dark.svg')]"></div>
</div>
</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: '#feature-7-slider',
items: 1,
speed:1000,
mode:"gallery",
nav:true,
navContainer: '#customize-thumbnails',
navAsThumbnails: true,
controls: false,
autoplay: true,
autoplayButtonOutput: false,
autoplayButton: false,
});
});
</script>
<!-- [ Feature ] end -->
@@ -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="animate-y delay-reset 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="animate-y 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,154 @@
<!-- [ small hero ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 md:gap-8 lg:gap-10">
<div class="grid grid-cols-12 gap-4 md:gap-6">
<div class="col-span-12 md:col-span-3 sm:col-span-4">
<ul id="privacy_policy_menu"
class="sticky top-5 flex flex-col gap-1.5 *:*:py-2.5 *:*:px-3 *:*:rounded-xl *:*:block *:*:hover:bg-neutral-50 *:*:open:text-primary-500 *:*:open:bg-neutral-100">
<li><a href="#acceptance-of-terms" open>Acceptance of Terms</a></li>
<li><a href="#changes-to-terms">Changes to Terms</a></li>
<li><a href="#user-conduct">User Conduct</a></li>
<li><a href="#intellectual-property">Intellectual Property</a></li>
<li><a href="#privacy-policy">Privacy Policy</a></li>
<li><a href="#user-generated-content">User-Generated Content</a></li>
<li><a href="#limitation-of-liability">Limitation of Liability</a></li>
<li><a href="#indemnity">Indemnity</a></li>
<li><a href="#governing-law">Governing Law</a></li>
</ul>
<hr class="sm:hidden">
</div>
<div
class="col-span-12 md:col-span-9 sm:col-span-8 *:flex *:flex-col *:gap-2 md:*:px-6 *:first:pt-0 *:py-2 sm:*:py-3 md:*:py-6">
<div id="acceptance-of-terms" class="content-block">
<h4>Acceptance of Terms</h4>
<p class="body1 text-theme-textsecondary mb-0">
By accessing and using this website, you agree to be bound by these Terms and Conditions of Use. If you do
not agree with
any part of these terms, you must not use the website. shares information about you when you use our
website or services.
By accessing or using our website, you consent to the practices described in this policy.
</p>
</div>
<div id="changes-to-terms" class="content-block">
<h4>Changes to Terms</h4>
<p class="body1 text-theme-textsecondary mb-0">
We reserve the right to modify or replace these terms at our sole discretion. It is your responsibility to
check these
terms periodically for changes. Your continued use of the website after the posting of any changes
constitutes acceptance
of those changes.
</p>
</div>
<div id="user-conduct" class="content-block">
<h4>User Conduct</h4>
<p class="body1 text-theme-textsecondary mb-0">
You agree to use this website only for lawful purposes and in a manner consistent with all applicable
local, national, and
international laws and regulations.
</p>
</div>
<div id="intellectual-property" class="content-block">
<h4>Intellectual Property</h4>
<p class="body1 text-theme-textsecondary mb-0">
All content on this website, including but not limited to text, graphics, logos, images, audio clips,
video clips, digital
downloads, and data compilations, is the property of [Your Company Name] or its content suppliers and
protected by
international copyright laws.
</p>
</div>
<div id="privacy-policy" class="content-block">
<h4>Privacy Policy</h4>
<p class="body1 text-theme-textsecondary mb-0">
We do not sell, trade, or otherwise transfer your personal information to third parties. We may share
information with
trusted service providers who assist us in operating our website, conducting our business, or servicing
you.
</p>
</div>
<div id="user-generated-content" class="content-block">
<h4>User-Generated Content</h4>
<p class="body1 text-theme-textsecondary mb-0">
If you submit any material to this website, you grant [Your Company Name] a perpetual, royalty-free,
worldwide license to
use, reproduce, modify, adapt, publish, translate, create derivative works from, distribute, and display
such material.
</p>
</div>
<div id="limitation-of-liability" class="content-block">
<h4>Limitation of Liability</h4>
<p class="body1 text-theme-textsecondary mb-0">
In no event shall [Your Company Name] or its affiliates be liable for any direct, indirect, incidental,
special, or
consequential damages resulting from the use or inability to use this website.
</p>
</div>
<div id="indemnity" class="content-block">
<h4>Indemnity</h4>
<p class="body1 text-theme-textsecondary mb-0">
You agree to indemnify and hold harmless [Your Company Name] and its affiliates from any claims, actions,
demands,
damages, liabilities, costs, or expenses, including reasonable attorneys' fees, arising out of or related
to your use of
the website or any violation of these terms.
</p>
</div>
<div id="governing-law" class="content-block">
<h4>Governing Law</h4>
<p class="body1 text-theme-textsecondary mb-0">
These terms are governed by and construed in accordance with the laws of [Your Country/State], without
regard to its
conflict of law principles.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
// Wait for the document to load completely
document.addEventListener('DOMContentLoaded', function () {
// Select all the menu links and content blocks
const links = document.querySelectorAll('#privacy_policy_menu a');
const sections = document.querySelectorAll('.content-block');
// Function to check which section is in view and highlight corresponding menu link
function onScroll() {
let currentSection = '';
// Loop through each section and find the one that is in view
sections.forEach(section => {
const rect = section.getBoundingClientRect();
if (rect.top <= 0 && rect.bottom > 0) {
// if (rect.top <= window.innerHeight && rect.bottom >= 0) {
currentSection = section.id;
}
});
// Remove 'active' class from all links
links.forEach(link => {
link.removeAttribute('open');
if (link.getAttribute('href').substring(1) === currentSection) {
link.setAttribute('open', '');
}
});
}
// Listen for the scroll event and execute the onScroll function
window.addEventListener('scroll', onScroll);
// Call onScroll to highlight the current section on page load
onScroll();
});
</script>
<!-- [ small hero ] end -->
@@ -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="">Privacy Policy</h1>
<h6 class="text-theme-textsecondary md:w-[85%]">
This Privacy Policy describes how SaasAble we collects, uses, and shares information about you when you use our website or services.
</h6>
</div>
<div class="flex flex-row items-end min-w-fit">
<button class="btn btn-outline-primary btn-lg">Contact Us</button>
</div>
</div>
</div>
</div>
</section>
<!-- [ small hero ] end -->
@@ -0,0 +1,322 @@
<link rel="stylesheet" href="../assets/css/plugins/tiny-slider.css" />
<!-- [ Team ] start -->
<section class="common-section">
<div class="container">
<div class="flex flex-col gap-6 sm:gap-8 lg:gap-20">
<div class="animate-y delay-reset flex flex-col sm:flex-row gap-x-6 gap-y-4 lg:gap-y-6">
<div class="basis-full sm:basis-6/12">
<div class="flex flex-col items-start justify-between gap-8 h-full">
<div class="flex flex-col gap-2 sm:gap-3">
<h2>Empowered Team, Empowered Results</h2>
<h6>Learn about the empowered individuals who make up our team. Discover how their unique strengths contribute to our collective success.</h6>
</div>
<button class="btn btn-outline-primary btn-lg">Were Hiring</button>
</div>
</div>
<div class="basis-full sm:basis-6/12">
<div class="animate-y flex flex-col gap-2">
<div class="w-full h-[308px] sm:h-[339px] lg:h-[435px] rounded-3xl lg:rounded-[32px] overflow-hidden">
<div class="h-full bg-center bg-cover bg-[url('../images/team/team-member-1.png')]"></div>
</div>
<p class="body2">Linear co-founders Jori Lallo, Karri Saarinen, and Tuomas Artman.</p>
</div>
</div>
</div>
<div class="flex flex-col gap-6 lg:gap-8">
<div class="animate-y team-5-slider">
<div class="item">
<div class="flex flex-col gap-4 sm:gap-6 lg:gap-8 overflow-hidden">
<div class="flex flex-row gap-4 sm:gap-6 lg:gap-8">
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar1.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Tricia Yundt</h4>
<div class="body1 truncate text-theme-text-secondary">Chief Executive Officer</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar2.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Henrietta Bayer</h4>
<div class="body1 truncate text-theme-text-secondary">Chief Technology Officer</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar3.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Elmer Heller</h4>
<div class="body1 truncate text-theme-text-secondary">Chief Financial Officer</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar4.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Melissa Altenwerth</h4>
<div class="body1 truncate text-theme-text-secondary">Chief Executive Officer</div>
</div>
</div>
</div>
</div>
<div class="flex flex-row gap-4 sm:gap-6 lg:gap-8">
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar5.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Josefina Murray</h4>
<div class="body1 truncate text-theme-text-secondary">Product Managers</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar6.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Dave Mayer</h4>
<div class="body1 truncate text-theme-text-secondary">Marketing Managers</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar7.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Marlene Stehr</h4>
<div class="body1 truncate text-theme-text-secondary">Customer Success Managers</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar8.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Benny Bailey</h4>
<div class="body1 truncate text-theme-text-secondary">IT Manager</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="flex flex-col gap-4 sm:gap-6 lg:gap-8 overflow-hidden">
<div class="flex flex-row gap-4 sm:gap-6 lg:gap-8">
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar9.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Tricia Yundt</h4>
<div class="body1 truncate text-theme-text-secondary">Chief Executive Officer</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar10.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Henrietta Bayer</h4>
<div class="body1 truncate text-theme-text-secondary">Chief Technology Officer</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar11.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Elmer Heller</h4>
<div class="body1 truncate text-theme-text-secondary">Chief Financial Office</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar12.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Melissa Altenwerth</h4>
<div class="body1 truncate text-theme-text-secondary">Chief Executive Officer</div>
</div>
</div>
</div>
</div>
<div class="flex flex-row gap-4 sm:gap-6 lg:gap-8">
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar13.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Josefina Murray</h4>
<div class="body1 truncate text-theme-text-secondary">Product Managers</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar14.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Dave Mayer</h4>
<div class="body1 truncate text-theme-text-secondary">Marketing Managers</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar4.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Marlene Stehr</h4>
<div class="body1 truncate text-theme-text-secondary">Customer Success Managers</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar5.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Benny Bailey</h4>
<div class="body1 truncate text-theme-text-secondary">IT Manager</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="flex flex-col gap-4 sm:gap-6 lg:gap-8 overflow-hidden">
<div class="flex flex-row gap-4 sm:gap-6 lg:gap-8">
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar9.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Tricia Yundt</h4>
<div class="body1 truncate text-theme-text-secondary">Chief Executive Officer</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar10.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Henrietta Bayer</h4>
<div class="body1 truncate text-theme-text-secondary">Chief Technology Officer</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar11.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Elmer Heller</h4>
<div class="body1 truncate text-theme-text-secondary">Chief Financial Office</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar12.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Melissa Altenwerth</h4>
<div class="body1 truncate text-theme-text-secondary">Chief Executive Officer</div>
</div>
</div>
</div>
</div>
<div class="flex flex-row gap-4 sm:gap-6 lg:gap-8">
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar5.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Josefina Murray</h4>
<div class="body1 truncate text-theme-text-secondary">Product Managers</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar6.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Dave Mayer</h4>
<div class="body1 truncate text-theme-text-secondary">Marketing Managers</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar7.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Marlene Stehr</h4>
<div class="body1 truncate text-theme-text-secondary">Customer Success Managers</div>
</div>
</div>
</div>
<div class="basis-6/12 sm:basis-4/12 lg:basis-3/12 shrink-0">
<div class="flex flex-row justify-start items-center gap-2">
<img src="../assets/images/user/avatar8.png" alt="images" class="w-[55px] h-[55px] rounded-full" />
<div class="flex gap-1 flex-col justify-center max-w-[65%] sm:max-w-[70%] lg:max-w-[80%]">
<h4 class="truncate">Benny Bailey</h4>
<div class="body1 truncate text-theme-text-secondary">IT Manager</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="block">
<div class="flex flex-row items-end justify-center gap-3">
<button class="slide-prev flex items-center justify-center hover:bg-black/[.04] w-16 h-16 rounded-full border border-neutral-600">
<i class="ti ti-arrow-left text-primary-500 text-2xl leading-none"></i>
</button>
<button class="slide-next flex items-center justify-center hover:bg-black/[.04] w-16 h-16 rounded-full border border-neutral-600">
<i class="ti ti-arrow-right text-primary-500 text-2xl leading-none"></i>
</button>
</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: '.team-5-slider',
items: 1,
center:false,
nav: false,
autoHeight: false,
speed: 500,
gutter: 0,
autoplayTimeout: 6000,
slideBy: 1,
loop: true,
controls: false,
autoplay: true,
autoplayButtonOutput: false,
autoplayButton: false,
edgePadding:0,
mouseDrag:true,
});
// Select all previous and next buttons
const prevButtons = document.querySelectorAll('.slide-prev');
const nextButtons = document.querySelectorAll('.slide-next');
// Add event listener to each 'prev' button
prevButtons.forEach(function (button) {
button.onclick = function () {
slider.goTo('prev');
};
});
// Add event listener to each 'next' button
nextButtons.forEach(function (button) {
button.onclick = function () {
slider.goTo('next');
};
});
});
</script>
<!-- [ Team ] end -->
@@ -0,0 +1,66 @@
<!doctype html>
<html lang="en" @@bodySetup>
<!-- [Head] start -->
<head>
@@include('../layouts/head-page-meta.html', {'title': 'Privacy Policy'})@@include('../layouts/head-css.html')
</head>
<!-- [Head] end -->
<!-- [Body] Start -->
<body>
@@include('../layouts/loader.html')
@@include('../layouts/component/component-header.html")
@@include('partials/small-hero-3.html')
@@include('partials/privacy-policy.html')
@@include('partials/footer-7.html')
@@include('../layouts/scroll-top.html')
@@include('../layouts/footer-js.html')
<script src="../assets/js/plugins/motion.js"></script>
<script type="module">
const { animate, inView, scroll } = Motion;
window.addEventListener('load', function () {
// translate y
var anim = document.querySelectorAll('.animate-y');
var sec = 0;
inView(anim, (element) => {
if (element.classList.contains("delay-reset")) {
sec = 0
} else {
sec += 0.1;
}
animate(
element,
{ opacity: [0, 1], y: [50, 0] },
{
duration: 1,
delay: sec,
ease: [0.215, 0.61, 0.355, 1]
}
)
})
// translate y down
var anim = document.querySelector('.animate-y-down');
inView(anim, (element) => {
if(element.classList.contains("delay-reset")){
sec = 0
}else{
sec += 0.1;
}
animate(
element,
{ opacity: [0,1], y: [-50, 0] },
{
duration: 1,
delay: 0.4,
ease: [0.215, 0.61, 0.355, 1]
}
)
})
});
</script>
</body>
</html>