First Commit
This commit is contained in:
@@ -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>
|
||||
+26
@@ -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 -->
|
||||
+116
@@ -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%]">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>
|
||||
<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 -->
|
||||
+394
@@ -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 -->
|
||||
+64
@@ -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 -->
|
||||
+128
@@ -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 -->
|
||||
+154
@@ -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 -->
|
||||
+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="">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">We’re 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>
|
||||
Reference in New Issue
Block a user