You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

1486 lines
98 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title> Cleaning Management</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
<style>
:root {
--primary-color: #7f54b3;
--bg-white: #fff;
--text-color: #121212;
--text-color-light: #64728f;
}
body {
font-family: "Montserrat", sans-serif;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
color: #121212;
font-family: Montserrat;
font-size: 16px !important;
font-weight: 500 !important;
border-radius: 30px;
line-height: normal;
text-transform: capitalize;
background-color: #F5F5F5;
border: none;
margin-bottom: 0;
padding: 12px 24px;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
border-color: transparent;
isolation: isolate;
}
.nav-tabs .nav-link:focus-visible {
border-color: transparent;
box-shadow: none;
}
/* owl-carosel */
.owl-carousel .owl-nav {
position: absolute;
top: 42%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-42%);
}
.owl-carousel .owl-nav button.owl-prev {
position: absolute;
right: -36px;
font-size: 28px;
background-color: #e4e4e4;
border-radius: 20px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.owl-carousel .owl-nav button.owl-next {
position: absolute;
left: -36px;
font-size: 28px;
background-color: #e4e4e4;
border-radius: 20px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<!-- overview -->
<div class="container">
<div class="my-5">
<!-- button tab -->
<!-- -->
<!-- version support -->
<div class="my-3 d-flex align-items-center justify-content-end">
<div class="text-center"
style="background-color:#017E84 !important; font-size:0.8rem !important; color:#fff !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width:120px !important">
Community
</div>
<div class="text-center"
style="background-color:#875A7B !important; color:#fff !important; font-size:0.8rem !important; font-weight:500 !important; padding:4px !important; margin:0 3px !important; border-radius:50px !important; min-width:120px !important">
Enterprise
</div>
</div>
<div class="tab-content" id="myTabContent">
<!-- description -->
<div class="tab-pane fade show active" id="home" role="tabpanel"
aria-labelledby="home-tab">
<div class="position-relative"
style="border-radius: 16px; background: #f8f8f8; padding: 20px 0;">
<div class="row " style="
padding: 2rem 0rem 0 !important;
">
<div class="col-lg-8 mx-auto gap-4 d-flex flex-column align-items-center">
<p class="my-1 text-center text-uppercase"
style="
letter-spacing: 4px !important;
color: #7f54b3;
font-weight: bold;
text-align: center;
font-size: 14px;
font-weight: 600;
line-height: 15.96px;
text-transform: uppercase;
">
This Module Assists with Booking for Cleaning
and Manages Cleaning Processes.
</p>
<h1 class="text-center text-uppercase my-0"
style="
color: #121212;
font-size: 46px;
font-weight: 700;
line-height: normal;
"> Cleaning Management
</h1>
</div>
<div class="col-lg-12 d-flex justify-content-center align-items-center"
style="margin: 3rem 0;">
<img src="./assets/icons/brand-pair.svg"
width="100%"
height="auto"
style="width: 50%"
class="img-responsive"/>
</div>
<div class="col-md-12 text-center">
<a href="mailto:odoo@cybrosys.com"
target="_blank"
style="background-color: transparent;border-radius: 35px;
font-family: Montserrat;
display: inline-block;
padding: 7px 33px;
border: 1px solid #7f54b3;
color: #7f54b3;
text-decoration: none;
"
class="mx-1 mb-2 deep-1 deep_hover">
<img class="img"
style="width: 24px"
src="./assets/icons/mail.svg"/>
<span class="pl-2"
style=" font-size: 16px; vertical-align: middle"
>Email Us</span
>
</a>
<a href="skype:cybroopenerp?chat"
target="_blank"
style="
background-color: #7f289b;
font-family: Montserrat;
display: inline-block;
padding: 7px 33px;
border: 1px solid #7f289b;
border-radius: 35px;
text-decoration: none;
"
class="mx-1 mb-2 deep-1 deep_hover">
<img
class="img"
style="width: 24px"
src="./assets/icons/skype-fill.svg"
/>
<span
class="pl-2"
style="color: #fff; font-size: 16px; vertical-align: middle"
>Skype Us</span
>
</a>
</div>
<div class="d-flex justify-content-center mt-2">
<img src="./assets/icons/hero.gif"
class="w-100"
style="z-index: 3; height: auto;">
</div>
</div>
<div class="position-absolute bottom-0"
style="z-index: 1; width: 100%;">
<img src="./assets/icons/banner-bg.svg"
class="img-fluid w-100">
</div>
<div class="position-absolute bottom-0 end-0"
style=" z-index: 2;">
<img src="./assets/icons/patter.svg">
</div>
</div>
<!-- key-highlight -->
<div class="" style="border-radius: 16px;
padding: 60px 40px;
border: 1px solid #EBEEF2;
background: #F5F5F7;
box-shadow: 0px 5px 20px -11px rgba(0, 0, 0, 0.25); ">
<div class="row">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
<h2 style=" color: #121212;
text-align: center;
font-size: 40px;
font-weight: 700;
text-transform: uppercase; padding-bottom: 50px;">Key
Highlights</h2>
</div>
<div class="col-lg-4">
<div class="mb-4 d-flex flex-column justify-content-center gap-3"
style="border-radius: 12px; border: 1px solid #B6BCCD;
background: #FFF;padding:32px ">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#7847D9 !important; border-radius:8px !important; height:42px; width:42px">
<img src="./assets/icons/feature-icon.svg"
class="img-responsive" height="26px"
width="26px">
</div>
<h5 class="m-0"
style="color:#000 !important; font-weight:bold">
Online Booking Facility
</h5>
</div>
</div>
<div class="col-lg-4">
<div class="mb-4 d-flex flex-column justify-content-center gap-3"
style="border-radius: 12px;
border: 1px solid #B6BCCD;
background: #FFF;padding:32px ">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#7847D9 !important; border-radius:8px !important; height:42px; width:42px">
<img src="./assets/icons/feature-icon.svg"
class="img-responsive" height="26px"
width="26px">
</div>
<h5 class="m-0"
style="color:#000 !important; font-weight:bold">
Different access levels for Users and
Manager
</h5>
</div>
</div>
<div class="col-lg-4">
<div class="mb-4 d-flex flex-column justify-content-center gap-3"
style="border-radius: 12px;
border: 1px solid #B6BCCD;
background: #FFF;padding:32px ">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#7847D9 !important; border-radius:8px !important; height:42px; width:42px">
<img src="./assets/icons/feature-icon.svg"
class="img-responsive" height="26px"
width="26px">
</div>
<h5 class="m-0"
style="color:#000 !important; font-weight:bold">
Activity dashboard is available
</h5>
</div>
</div>
<div class="col-lg-4">
<div class="mb-4 d-flex flex-column justify-content-center gap-3"
style="border-radius: 12px;
border: 1px solid #B6BCCD;
background: #FFF;padding:32px ">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#7847D9; border-radius:8px !important; height:42px; width:42px">
<img src="./assets/icons/feature-icon.svg"
class="img-responsive" height="26px"
width="26px">
</div>
<h5 class="m-0"
style="color:#000 !important; font-weight:bold">
Various shifts are available for Employees
</h5>
</div>
</div>
</div>
</div>
<!--code -->
<div class="my-5">
<div class="position-relative"
style=" padding: 5rem 4rem 5rem 4rem; background-color: #0A1425; border-radius: 12px;">
<div class="d-flex flex-column gap-4">
<span class="wrapper-subtitle"
style="font-size: 40px; font-weight: 700; color: #fff;line-height: 60px; text-transform: capitalize; width: 450px;"> Cleaning Management</span>
<h3 class="wrapper-details"
style="font-size: 20px; font-weight: 400; color: #fff; line-height: 32px; ">
Are you ready to make your business more
organized?
<br> Improve now!
</h3>
<div class="d-flex gap-3">
<a href="mailto:odoo@cybrosys.com"
class="shop-btn" style="cursor: pointer; border-radius: 16px; display: flex; justify-content: center; align-items: center; gap: 7px;
border: 1px solid #ffffff33;
background-color: #ffffff14;
backdrop-filter: blur(10px); color: #fff; padding: 12px 16px 12px 16px; text-decoration: none;">
<span style="border-radius: 12px;
background-color: #ffffff1a;
backdrop-filter: blur(6px);padding: 12px; ">
<img src="./assets/icons/banner-mail.svg">
</span>
<span style="font-weight: 500;font-family: Montserrat;">odoo@cybrosys.com</span>
</a>
<a href="tel:+91 9074270811" class="shop-btn"
style="cursor: pointer; border-radius: 16px; display: flex; justify-content: center; align-items: center; gap: 7px;
border: 1px solid #ffffff33;
background-color: #ffffff14;
backdrop-filter: blur(10px); color: #fff; padding: 12px 22px 12px 18px; text-decoration: none;">
<span style="border-radius: 12px;
background-color: #ffffff1a;
backdrop-filter: blur(6px);padding: 12px;">
<img src="./assets/icons/banner-call.svg">
</span>
<span style="font-weight: 500;font-family: Montserrat;">+91 9074270811</span>
</a>
</div>
</div>
<div class="position-absolute bottom-0 end-0">
<img src="./assets/icons/banner-pattern.svg"
style="width: 540px;">
</div>
</div>
</div>
<!-- end-code -->
<!-- -->
<!-- screenshot and other -->
<div class="mb-4 bg-white"
style=" border: 1px solid #EBEEF2; border-radius: 6px; box-shadow: 0px 8px 20px -4px rgba(0, 0, 0, 0.10); border: 1px solid #EBEEF2;">
<div>
<ul class="nav nav-tabs justify-content-center bg-white py-2"
id="myTab" role="tablist"
style="border-radius: 6px 6px 0 0;">
<li class="nav-item">
<a aria-controls="overview"
aria-bs-selected="true"
class="nav-link active" data-bs-toggle="tab"
href="#overview" id="overview-tab" role="tab"
style="color:#121212; font-weight:500; font-size:16px">
Screenshots</a>
</li>
<li class="nav-item">
<a aria-controls="feature"
aria-bs-selected="false"
class="nav-link py-2" data-bs-toggle="tab"
href="#feature" id="feature-tab" role="tab"
style="color:#121212; font-weight:500; font-size:16px">Features</a>
</li>
<li class="nav-item">
<a aria-controls="faq" aria-bs-selected="false"
class="nav-link" data-bs-toggle="tab"
href="#faq" id="faq-tab" role="tab"
style="color:#121212; font-weight:500; font-size:16px">
FAQs</a>
</li>
<li class="nav-item">
<a aria-controls="releases"
aria-bs-selected="false" class="nav-link"
data-bs-toggle="tab" href="#releases"
id="releases-tab" role="tab"
style="color:#121212; font-weight:500; font-size:16px">Releases</a>
</li>
</ul>
</div>
<div class="tab-content p-md-5 p-2 py-3" id="myTabContent">
<div aria-labelledby="overview-tab"
class="tab-pane fade show active" id="overview"
role="tabpanel">
<div class="position-relative mb-4"
style="border-radius:10px">
<img alt="acc_bg"
class="w-100 h-100 position-absolute img-fluid left_0"
loading="lazy"
src="//apps.odoocdn.com/apps/assets/17.0/ks_dashboard_ninja/ai-img/o3.png?007008f"
style="">
</div>
<!-- screenshots section-->
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)"> App access for User
</span>
<span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)"> or Manager</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
Choose
"Cleaning Manager" or "User" in
the settings.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/1.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
Main Apps
</span>
<span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)">menu.</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
Once access is granted, you will
find the Cleaning Management app
in the Main Apps menu.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/2.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
Website view of Cleaning
</span>
<span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)">Management.</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
When you click on 'Cleaning
Online Request,' a form will
appear, allowing you to book
Cleaning processes by providing
your details.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/3.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
Employee
</span>
<span style="color:#7f54b3; font-size:calc(1.1rem + 1vw)">Details.</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
To access the Employee
Details in the Cleaning
Management module, navigate to
'Cleaning Management,' and then
select 'Employee Details' where
shifts for all employees can be
specified.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/4.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
Cleaning
</span>
<span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)">Team.</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
Cleaning Management ->
Cleaning Team. Where you can
specify the Duty Type, Leader,
and Members of a particular
team.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/5.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
Booking
</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
Cleaning Management ->
Booking. Where all created
bookings are listed, and you can
also create a new booking here.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/6.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
Cleaning Team with corresponding
</span>
<span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)">Cleaning Time.</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
You can get the Team
when they are available on that
day.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/7.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
Confirm
</span>
<span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)">Booking.</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
After verifying the
cleaning process and confirming
its completion, the stage
changes to "BOOKED." At this
stage, you will be presented
with "CANCEL" button.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/8.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
Cleaning Team
</span>
<span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)">Duty.</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
Can track cleaning
process time by clicking 'Start'
button.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/9.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
INSPECTION
</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
To inspect the cleaning
process, click on the
"INSPECTION" button. This will
allow you to verify whether the
cleaning has been performed
successfully or not.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/10.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
Result
</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
You can inspect the
process by clicking the "CLEAN"
or "DIRT" button.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/11.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
When click on 'CLEAN' Button stage changed
</span>
<span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)">to 'CLEANED'.</span>
</h1>
</div>
<div class="col-md-12 mb-4">
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/12.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
Invoice</span>
<span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)">
Creation.</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
You can create invoice by
clicking 'CREATE INVOICE' Button
after defining 'Unit Price'.
</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/13.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
Invoice form of
</span><span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)">
Cleaning Management.</span>
</h1>
</div>
<div class="col-md-12 mb-4">
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/14.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
Invoice Smart
</span>
<span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)">Button.</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
Invoice Smart Button in
Cleaning Booking Form.</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/15.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
<div class="position-relative mb-4"
style="border-radius:10px; background-color:#f4f4f4">
<div class="p-md-5 p-3 position-relative">
<div class="row">
<div class="col-md-12">
<h1 style="font-weight:bold; font-size:calc(1.1rem + 1vw); line-height:120%; text-align:center; text-transform:capitalize; font-size: 40px;
font-weight: 700;">
<span style="color:#121212; font-size:calc(1.1rem + 1vw)">
Dashboard
</span>
<span style="color: #7f54b3; font-size:calc(1.1rem + 1vw)">View.</span>
</h1>
</div>
<div class="col-md-12 mb-4">
<p style="font-weight:400; font-size:16px; line-height:150%; text-align:center; color:#64728f">
Access the dashboard to view
the total number of Bookings,
Cleaning Team data, and Clean
and Dirty counts. The dashboard
will also include two bar graphs
representing Bookings and
Quality of work. Graphs can be
filtered by This Month, This
Quarter, This Year, and This
Week for comprehensive
analysis.</p>
</div>
<div class="col-md-12 text-center">
<div class="d-inline-block p-3 shadow-sm"
style="background-color:#fff; border-radius:10px">
<img alt="" class="img-fluid"
loading="lazy"
src="./assets/screenshots/16.png"
style="min-height: 1px;">
</div>
</div>
</div>
</div>
</div>
</div>
<div aria-labelledby="feature-tab"
class="tab-pane fade show py-1" id="feature"
role="tabpanel">
<div class="row py-4">
<!-- Features Section -->
<div class="col-md-6 col-sm-12 p-3">
<div class="d-flex flex-column align-items-start h-100"
style="padding:30px; border-radius:12px; background-color:#faf8ff">
<div class="d-flex align-items-center justify-content-center">
<div class="d-flex align-items-center justify-content-center "
style="width:36px; height:36px; border-radius:50%; background-color:#7847D9 ; margin-right:10px">
<i class="fa fa-star "
style="color:#fff; font-size:14px"></i>
</div>
<p style="color:#1A202C; font-weight:600; font-size:1.2rem; margin-bottom:2px">
Online Booking Facility</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 p-3">
<div class="d-flex flex-column align-items-start h-100"
style="padding:30px; border-radius:12px; background-color:#faf8ff">
<div class="d-flex align-items-center justify-content-center">
<div class="d-flex align-items-center justify-content-center "
style="width:36px; height:36px; border-radius:50%; background-color:#7847D9 ; margin-right:10px">
<i class="fa fa-star "
style="color:#fff; font-size:14px"></i>
</div>
<p style="color:#1A202C; font-weight:600; font-size:1.2rem; margin-bottom:2px">
We can see a preview of
attachments while downloading
them. .</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 p-3">
<div class="d-flex flex-column align-items-start h-100"
style="padding:30px; border-radius:12px; background-color:#faf8ff">
<div class="d-flex align-items-center justify-content-center">
<div class="d-flex align-items-center justify-content-center "
style="width:36px; height:36px; border-radius:50%; background-color:#7847D9 ; margin-right:10px">
<i class="fa fa-star "
style="color:#fff; font-size:14px"></i>
</div>
<p style="color:#1A202C; font-weight:600; font-size:1.2rem; margin-bottom:2px">
Different access levels for
Users and Manager</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 p-3">
<div class="d-flex flex-column align-items-start h-100"
style="padding:30px; border-radius:12px; background-color:#faf8ff">
<div class="d-flex align-items-center justify-content-center">
<div class="d-flex align-items-center justify-content-center "
style="width:36px; height:36px; border-radius:50%; background-color:#7847D9 ; margin-right:10px">
<i class="fa fa-star "
style="color:#fff; font-size:14px"></i>
</div>
<p style="color:#1A202C; font-weight:600; font-size:1.2rem; margin-bottom:2px">
Activity dashboard is
available</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 p-3">
<div class="d-flex flex-column align-items-start h-100"
style="padding:30px; border-radius:12px; background-color:#faf8ff">
<div class="d-flex align-items-center justify-content-center">
<div class="d-flex align-items-center justify-content-center "
style="width:36px; height:36px; border-radius:50%; background-color:#7847D9 ; margin-right:10px">
<i class="fa fa-star "
style="color:#fff; font-size:14px"></i>
</div>
<p style="color:#1A202C; font-weight:600; font-size:1.2rem; margin-bottom:2px">
Various shifts are available for
Employees</p>
</div>
</div>
</div>
</div>
</div>
<div aria-labelledby="faq-tab"
class="tab-pane fade show" id="faq"
role="tabpanel">
<div class="row"
style=" background-color:#fff !important">
<div class="col-md-12" aria-labelledby="faq-tab"
id="faq" role="tabpanel">
<div class="accordion mb-4" id="accordion6">
<div style="background-color:#fff">
<!-- accordian -->
<div class="accordion"
id="accordion_faq">
<!-- Question 1 -->
<div class=""
style="margin:1rem 0rem">
<div aria-expanded="false"
class=" card-header collapsed"
data-bs-toggle="collapse"
data-bs-target="#collapseFAQOne"
href="#collapseFAQOne"
aria-controls="collapseFAQOne"
style="cursor: pointer; background-color:#f8f8f8; border:none; border-top-right-radius:10px; border-top-left-radius:10px; padding: 12px 24px;">
<a class="card-title text-decoration-none"
style=" font-size:18px; line-height:30px; font-weight:500; color:#040f3a">
What is the Cleaning
Management module?
<img alt=""
class="float-end"
src="//apps.odoocdn.com/apps/assets/16.0/index_test_odoo/assets/icons/down.svg?6ef7fd7"
width="25px">
</a>
</div>
<div class="accordion-collapse collapse"
aria-labelledby="collapseFAQOne"
data-bs-parent="#accordion_faq"
id="collapseFAQOne"
style=" box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px; border: 1px solid #f8f8f8; border-bottom-right-radius:10px; border-bottom-left-radius:10px">
<p style=" padding:0.75rem 1.25rem; font-size:16px; line-height:27px; color:#888; font-weight:normal; border-bottom-right-radius:10px; border-bottom-left-radius:10px">
The Cleaning
Management module in
Odoo 17.0 is
designed to help
businesses manage
their cleaning
operations. It
allows you to
schedule cleaning
tasks, assign them
to staff, track
progress, and
maintain records of
cleaning activities.
</p>
</div>
</div>
<!-- Question 2 -->
<div style="margin:1rem 0rem">
<div aria-expanded="false"
class="cursor-pointer card-header collapsed"
data-bs-toggle="collapse"
aria-controls="collapseFAQThree"
data-bs-target="#collapseFAQThree"
style="cursor: pointer; background-color:#f8f8f8; border:1px solid #f8f8f8; border-top-right-radius:10px; border-top-left-radius:10px; padding: 12px 24px">
<a class="card-title text-decoration-none"
style=" font-size:18px; line-height:30px; font-weight:500; color:#040f3a">
Who can use the
Cleaning Management
module?
<img alt=""
class="float-end"
src="//apps.odoocdn.com/apps/assets/16.0/index_test_odoo/assets/icons/down.svg?6ef7fd7"
width="25px">
</a>
</div>
<div class="accordion-collapse collapse"
aria-labelledby="collapseFAQThree"
data-bs-parent="#accordion_faq"
id="collapseFAQThree"
style="box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px; border: 1px solid #f8f8f8; border-bottom-right-radius:10px; border-bottom-left-radius:10px">
<p style="padding:0.75rem 1.25rem; font-size:16px; line-height:27px; color:#888; font-weight:normal; border-bottom-right-radius:10px; border-bottom-left-radius:10px">
* Facility management companies
* Office administrators
* Residential or commercial cleaning services
* Organizations managing internal cleaning operations
</p>
</div>
</div>
<!-- Question 3 -->
<div style="margin:1rem 0rem">
<div aria-expanded="false"
class="cursor-pointer card-header collapsed"
data-bs-toggle="collapse"
aria-controls="collapseFAQFour"
data-bs-target="#collapseFAQFour"
style="cursor: pointer; background-color:#f8f8f8; border:1px solid #f8f8f8; border-top-right-radius:10px; border-top-left-radius:10px; padding: 12px 24px">
<a class="card-title text-decoration-none"
style=" font-size:18px; line-height:30px; font-weight:500; color:#040f3a">
Can I track the progress of cleaning tasks?
<img alt=""
class="float-end"
src="//apps.odoocdn.com/apps/assets/16.0/index_test_odoo/assets/icons/down.svg?6ef7fd7"
width="25px">
</a>
</div>
<div class="accordion-collapse collapse"
aria-labelledby="collapseFAQFour"
data-bs-parent="#accordion_faq"
id="collapseFAQFour"
style="box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px; border: 1px solid #f8f8f8; border-bottom-right-radius:10px; border-bottom-left-radius:10px">
<p style="padding:0.75rem 1.25rem; font-size:16px; line-height:27px; color:#888; font-weight:normal; border-bottom-right-radius:10px; border-bottom-left-radius:10px">
Yes, the module provides a progress tracker for each task. Managers can see whether a task is pending, in progress, or completed.
</p>
</div>
</div>
</div>
<!-- -->
</div>
</div>
</div>
</div>
</div>
<div aria-labelledby="releases-tab"
class="tab-pane fade show" id="releases"
role="tabpanel">
<!-- Release Notes -->
<div class="row pt-5 m-0">
<div class="col-md-3">
<h4 style="font-size:16px; font-weight:600; color:#514F4F; margin:0; line-height:26px;">
Latest Release 18.0.1.0.0
</h4>
<span style="font-size:14px; color:#7A7979; display:block; margin-bottom:20px;">
24th December, 2024
</span>
</div>
<div class="col-md-8">
<div style="padding:0 0 40px">
<div style="margin:0 0 10px">
<div style="display:inline-block; padding:0px 8px; color:#514F4F; background-color:#FFD8D8; border-radius:20px">
Add
</div>
</div>
<div class="d-flex m-0"
style="color:#7A7979;">
<ul class="pl-3 mb-0">
<li>
Initial Commit
</li>
</ul>
</div>
</div>
<div style="padding:0 0 0; border-bottom:1px solid #E3E3E3">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<!-- related post -->
<!-- -->
<section class="oe_container mt32">
<h2 style="color: #091E42;font-family: &quot;Montserrat&quot;;text-align: center;margin: 25px auto;text-transform: uppercase;"
class="oe_slogan">
<b>Related Products</b>
</h2>
<div id="demo" class="row carousel slide mt64 mb32"
data-bs-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
style="float: left; padding: 10px;">
<a href="https://apps.odoo.com/apps/modules/17.0/base_accounting_kit"
target="_blank"
style="color: #000; text-decoration: none;">
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;"
class="shadow-sm">
<img class="img img-responsive center-block"
style=" max-width: 100%;"
src="./assets/modules/1.gif"/>
<h4 class="mt0 text-truncate"
style="text-align:center;width:100&#37; margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px">
Odoo 17 Full Accounting Kit</h4>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
style="float: left; padding: 10px;">
<a href="https://apps.odoo.com/apps/modules/17.0/ohrms_core"
target="_blank"
style="color: #000; text-decoration: none;">
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;"
class="shadow-sm">
<img class="img img-responsive center-block"
style=" max-width: 100%;"
src="./assets/modules/2.gif"/>
<h4 class="mt0 text-truncate"
style="text-align:center;width:100&#37; margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px">
Open HRMS Core</h4>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
style="float: left; padding: 10px;">
<a href="https://apps.odoo.com/apps/modules/17.0/invoice_format_editor"
target="_blank"
style="color: #000; text-decoration: none;">
<div style="border-radius: 6px;padding: 16px; border: 1px solid #cbcbcb;"
class="shadow-sm">
<img class="img img-responsive center-block"
style=" max-width: 100%;"
src="./assets/modules/3.png"/>
<h4 class="mt0 text-truncate"
style="text-align:center;width:100&#37; margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px">
Odoo17 Invoice Format
Editor </h4>
</div>
</a>
</div>
</div>
<div class="carousel-item">
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
style="float: left; padding: 10px;">
<a href="https://apps.odoo.com/apps/modules/17.0/login_user_detail"
target="_blank"
style="color: #000; text-decoration: none;">
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;"
class="shadow-sm">
<img class="img img-responsive center-block"
style=" max-width: 100%;"
src="./assets/modules/4.png"/>
<h4 class="mt0 text-truncate"
style="text-align:center;width:100&#37; margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px">
User Log Details</h4>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
style="float: left; padding: 10px;">
<a href="https://apps.odoo.com/apps/modules/17.0/product_barcode"
target="_blank"
style="color: #000; text-decoration: none;">
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;"
class="shadow-sm">
<img class="img img-responsive center-block"
style=" max-width: 100%;"
src="./assets/modules/5.png"/>
<h4 class="mt0 text-truncate"
style="text-align:center;width:100&#37; margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px">
Odoo17 Product Barcode
Generator </h4>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16"
style="float: left; padding: 10px;">
<a href="https://apps.odoo.com/apps/modules/17.0/whatsapp_redirect"
target="_blank"
style="color: #000; text-decoration: none;">
<div style="border-radius: 6px; padding: 16px; border: 1px solid #cbcbcb;"
class="shadow-sm">
<img class="img img-responsive center-block"
style=" max-width: 100%;"
src="./assets/modules/6.jpg"/>
<h4 class="mt0 text-truncate"
style="text-align:center;width:100&#37; margin-bottom: 8px; font-weight: 600; padding-top: 16px; text-decoration:none;font-size: 18px; padding-bottom: 8px; margin-bottom: 0px">
Send Whatsapp Message
Odoo17</h4>
</div>
</a>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo"
data-bs-slide="prev"
style="margin-left: -30px;width: 35px;color: #000;">
<span class="carousel-control-prev-icon">
<i class="fa fa-chevron-left"
style="font-size:24px"></i>
</span>
</a>
<a class="carousel-control-next" href="#demo"
data-bs-slide="next"
style="margin-right: -30px;width: 35px;color: #000;">
<span class="carousel-control-next-icon">
<i class="fa fa-chevron-right"
style="font-size:24px"></i>
</span>
</a>
</div>
</section>
<!-- service-section -->
<section id="services" class="mt-5" style="border-radius: 16px;
border: 1px solid #EBEEF2;
background: var(--Neutral-N0, #FFF);
padding: 60px 40px;
box-shadow: 0px 5px 20px -11px rgba(0, 0, 0, 0.25);">
<div class="text-center mt-4"><h3 class="mb-0" style="color: #000;
text-align: center;
font-family: Montserrat;
font-size: 40px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
padding-bottom: 50px;">
Our Services</h3></div>
<div class="row mt-3">
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#FFE2E5; margin:auto; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#FA5A7D; border-radius:50%; height:56px; width:56px">
<img src="./assets/icons/gear.svg"
class="img-responsive"
height="28px" width="28px">
</div>
<span style="font-size: 18px;
color: var(--text-color);
font-weight: 600;"> Odoo Customization</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#FFF4DE; margin:auto; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#FF947A; border-radius:50%; height:56px; width:56px">
<img src="./assets/icons/wrench-icon.svg"
class="img-responsive"
height="28px" width="28px">
</div>
<span style="font-size: 18px;
color: var(--text-color);
font-weight: 600;"> Odoo Implementation</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#DCFCE7; margin:auto; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#3CD856; border-radius:50%; height:56px; width:56px">
<img src="./assets/icons/life-ring-icon.svg"
class="img-responsive"
height="28px" width="28px">
</div>
<span style="font-size: 18px;
color: var(--text-color);
font-weight: 600;">Odoo Support</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#F3E8FF; margin:auto; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#BF83FF; border-radius:50%; height:56px; width:56px">
<img src="./assets/icons/arrows-repeat.svg"
class="img-responsive"
height="28px" width="28px">
</div>
<span style="font-size: 18px;
color: var(--text-color);
font-weight: 600;">Odoo Migration</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#F1F9FF; margin:auto; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#01649C; border-radius:50%; height:56px; width:56px">
<img src="./assets/icons/puzzle-piece-icon.svg"
class="img-responsive"
height="28px" width="28px">
</div>
<span style="font-size: 18px;
color: var(--text-color);
font-weight: 600;">Odoo integration</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#EDF8ED; margin:auto; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#69CC70; border-radius:50%; height:56px; width:56px">
<img src="./assets/icons/odoo-consultancy.svg"
class="img-responsive"
height="28px" width="28px">
</div>
<span style="font-size: 18px;
color: var(--text-color);
font-weight: 600;">Odoo Consultancy</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#F1F6FF; margin:auto; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#2E4556; border-radius:50%; height:56px; width:56px">
<img src="./assets/icons/odoo-licencing.svg"
class="img-responsive"
height="28px" width="28px">
</div>
<span style="font-size: 18px;
color: var(--text-color);
font-weight: 600;">Odoo Licensing</span>
</div>
</a>
</div>
<div class="col-lg-3 col-sm-12 mb-3">
<a href="#" style="text-decoration:none">
<div class="btn-lg btn-block p-4 mb-2 d-flex flex-column justify-content-center align-items-center"
style="font-size:25px; font-weight:bold;background-color:#FAF6EA; margin:auto; gap: 16px; border-radius: 8px;">
<div class="d-flex justify-content-center align-items-center"
style="background-color:#FCD12C; border-radius:50%; height:56px; width:56px">
<img src="./assets/icons/hire-odoo.svg"
class="img-responsive"
height="28px" width="28px">
</div>
<span style="font-size: 18px;
color: var(--text-color);
font-weight: 600;">Hire Odoo Developer</span>
</div>
</a>
</div>
</div>
</section>
</div>
<!-- licence -->
<div class="tab-pane fade" id="profile" role="tabpanel"
aria-labelledby="profile-tab">
<div class="px-5">
....
</div>
</div>
<!-- -->
</div>
<!-- -->
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
rtl: true,
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 3
}
}
})
</script>
</html>