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.
 
 
 
 
 

642 lines
45 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Sale Report Graph View</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: var(--text-color);
font-size: 16px;
font-weight: 500;
border-radius: 30px;
background-color: #f5f5f5;
border: none;
padding: 12px 24px;
text-transform: capitalize;
}
.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-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,
.owl-carousel .owl-nav button.owl-next {
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-prev {
right: -36px;
}
.owl-carousel .owl-nav button.owl-next {
left: -36px;
}
.version-badge {
background-color: #017e84;
color: #fff;
font-size: 0.8rem;
font-weight: 500;
padding: 4px;
margin: 0 3px;
border-radius: 50px;
min-width: 120px;
text-align: center;
}
.contact-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 33px;
border-radius: 35px;
text-decoration: none;
font-family: Montserrat;
font-size: 16px;
}
.key-highlight-card {
border-radius: 12px;
border: 1px solid #b6bccd;
background: #fff;
padding: 32px;
display: flex;
flex-direction: column;
gap: 16px;
}
.section-card {
border-radius: 16px;
border: 1px solid #ebeef2;
background: #f5f5f7;
box-shadow: 0px 5px 20px -11px rgba(0, 0, 0, 0.25);
padding: 60px 40px;
}
.screenshot-section {
border-radius: 10px;
background-color: #f4f4f4;
padding: 3rem;
}
</style>
</head>
<body>
<div class="container my-5">
<!-- Version Support -->
<div class="d-flex align-items-center justify-content-end my-3">
<div class="version-badge" style="background-color: #017e84;">Community</div>
<div class="version-badge" style="background-color: #875a7b;">Enterprise</div>
<div class="version-badge" style="background-color: #7c7bad;">Odoo.sh</div>
</div>
<!-- Hero Section -->
<div class="tab-content" id="my_TabContent">
<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 0;">
<div class="col-lg-8 mx-auto d-flex flex-column align-items-center gap-4">
<p class="my-1 text-center text-uppercase" style="letter-spacing: 4px; color: var(--primary-color); font-weight: 600; font-size: 14px;">
Get the sale report of individual products in graph view.
</p>
<h1 class="text-center text-uppercase my-0" style="color: var(--text-color); font-size: 46px; font-weight: 700;">
Product Sale Report Graph View
</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" class="img-responsive" style="width: 50%;" alt="Brand Pair">
</div>
<div class="col-md-12 text-center">
<a href="mailto:odoo@cybrosys.com" class="contact-btn" style="border: 1px solid var(--primary-color); color: var(--primary-color);">
<img src="./assets/icons/mail.svg" style="width: 24px;" alt="Mail">
<span style="vertical-align: middle;">Email Us</span>
</a>
<a href="skype:cybroopenerp?chat" class="contact-btn" style="background-color: #7f289b; border: 1px solid #7f289b; color: #fff;">
<img src="./assets/icons/skype-fill.svg" style="width: 24px;" alt="Skype">
<span style="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;" alt="Hero">
</div>
</div>
<div class="position-absolute bottom-0 w-100" style="z-index: 1;">
<img src="./assets/icons/banner-bg.svg" class="img-fluid w-100" alt="Banner Background">
</div>
<div class="position-absolute bottom-0 end-0" style="z-index: 2;">
<img src="./assets/icons/patter.svg" alt="Pattern">
</div>
</div>
<!-- Key Highlights -->
<div class="section-card">
<div class="row">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
<h2 style="color: var(--text-color); font-size: 40px; font-weight: 700; text-transform: uppercase; padding-bottom: 50px;">
Key Highlights
</h2>
</div>
<div class="col-lg-4">
<div class="key-highlight-card">
<div class="d-flex justify-content-center align-items-center" style="background-color: #7847d9; border-radius: 8px; height: 42px; width: 42px;">
<img src="./assets/icons/feature-icon.svg" class="img-responsive" height="26" width="26" alt="Feature">
</div>
<h5 style="color: #000; font-weight: bold;">Sale Report of Individual Products</h5>
<p style="color: var(--text-color-light); font-size: 16px; font-weight: 400;">
Get the sale report of individual products in graph view.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="key-highlight-card">
<div class="d-flex justify-content-center align-items-center" style="background-color: #7847d9; border-radius: 8px; height: 42px; width: 42px;">
<img src="./assets/icons/feature-icon.svg" class="img-responsive" height="26" width="26" alt="Feature">
</div>
<h5 style="color: #000; font-weight: bold;">Line Chart</h5>
<p style="color: var(--text-color-light); font-size: 16px; font-weight: 400;">
Individual product sale report in Line chart.
</p>
</div>
</div>
<div class="col-lg-4">
<div class="key-highlight-card">
<div class="d-flex justify-content-center align-items-center" style="background-color: #7847d9; border-radius: 8px; height: 42px; width: 42px;">
<img src="./assets/icons/feature-icon.svg" class="img-responsive" height="26" width="26" alt="Feature">
</div>
<h5 style="color: #000; font-weight: bold;">Bar Chart</h5>
<p style="color: var(--text-color-light); font-size: 16px; font-weight: 400;">
Individual product sale report in Bar chart.
</p>
</div>
</div>
</div>
</div>
<!-- Contact Section -->
<div class="my-5">
<div class="position-relative" style="padding: 5rem 4rem; background-color: #0a1425; border-radius: 12px;">
<div class="d-flex flex-column gap-4">
<span style="font-size: 40px; font-weight: 700; color: #fff; line-height: 60px; text-transform: capitalize; width: 450px;">
Product Sale Report Graph View
</span>
<h3 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="border-radius: 16px; border: 1px solid #ffffff33; background-color: #ffffff14; backdrop-filter: blur(10px); color: #fff; padding: 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" alt="Mail">
</span>
<span style="font-weight: 500;">odoo@cybrosys.com</span>
</a>
<a href="tel:+91 9074270811" class="shop-btn" style="border-radius: 16px; 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" alt="Call">
</span>
<span style="font-weight: 500;">+91 9074270811</span>
</a>
</div>
</div>
<div class="position-absolute bottom-0 end-0">
<img src="./assets/icons/banner-pattern.svg" style="width: 540px;" alt="Pattern">
</div>
</div>
</div>
<!-- Tabs Section -->
<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);">
<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 class="nav-link active" id="overview-tab" data-bs-toggle="tab" href="#overview" role="tab" style="color: var(--text-color); font-weight: 500; font-size: 16px;">Screenshots</a>
</li>
<li class="nav-item">
<a class="nav-link" id="feature-tab" data-bs-toggle="tab" href="#feature" role="tab" style="color: var(--text-color); font-weight: 500; font-size: 16px;">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" id="faq-tab" data-bs-toggle="tab" href="#faq" role="tab" style="color: var(--text-color); font-weight: 500; font-size: 16px;">FAQs</a>
</li>
<li class="nav-item">
<a class="nav-link" id="releases-tab" data-bs-toggle="tab" href="#releases" role="tab" style="color: var(--text-color); font-weight: 500; font-size: 16px;">Releases</a>
</li>
</ul>
<div class="tab-content p-md-5 p-2 py-3" id="myTabContent">
<!-- Screenshots Tab -->
<div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
<div class="position-relative mb-4" style="border-radius: 10px;">
<img src="//apps.odoocdn.com/apps/assets/17.0/ks_dashboard_ninja/ai-img/o3.png?007008f" class="w-100 h-100 position-absolute img-fluid" loading="lazy" alt="Background">
</div>
<div class="screenshot-section">
<div class="row">
<div class="col-md-12">
<h1 style="font-size: 40px; font-weight: 700; text-align: center; text-transform: capitalize;">
<span style="color: var(--text-color);">Sales Report </span>
<span style="color: var(--primary-color);">Smart button.</span>
</h1>
</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 src="./assets/screenshots/screenshot1.png" class="img-fluid" loading="lazy" alt="Screenshot 1">
</div>
</div>
</div>
</div>
<div class="screenshot-section">
<div class="row">
<div class="col-md-12">
<h1 style="font-size: 40px; font-weight: 700; text-align: center; text-transform: capitalize;">
<span style="color: var(--text-color);">Product Sale Report in </span>
<span style="color: var(--primary-color);">Line chart.</span>
</h1>
</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 src="./assets/screenshots/screenshot2.png" class="img-fluid" loading="lazy" alt="Screenshot 2">
</div>
</div>
</div>
</div>
<div class="screenshot-section">
<div class="row">
<div class="col-md-12">
<h1 style="font-size: 40px; font-weight: 700; text-align: center; text-transform: capitalize;">
<span style="color: var(--text-color);">Product Sale Report in </span>
<span style="color: var(--primary-color);">Bar chart.</span>
</h1>
</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 src="./assets/screenshots/screenshot3.png" class="img-fluid" loading="lazy" alt="Screenshot 3">
</div>
</div>
</div>
</div>
<div class="screenshot-section">
<div class="row">
<div class="col-md-12">
<h1 style="font-size: 40px; font-weight: 700; text-align: center; text-transform: capitalize;">
<span style="color: var(--text-color);">Product Sale Report in </span>
<span style="color: var(--primary-color);">Pie chart.</span>
</h1>
</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 src="./assets/screenshots/screenshot4.png" class="img-fluid" loading="lazy" alt="Screenshot 4">
</div>
</div>
</div>
</div>
</div>
<!-- Features Tab -->
<div class="tab-pane fade py-1" id="feature" role="tabpanel" aria-labelledby="feature-tab">
<div class="row py-4">
<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">
<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;">
Available in Odoo Community and Enterprise.
</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">
<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;">
This module is used to get the sale report of individual products in graph view.
</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">
<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;">
Can view the report in line, bar, and pie chart.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- FAQs Tab -->
<div class="tab-pane fade" id="faq" role="tabpanel" aria-labelledby="faq-tab">
<div class="row" style="background-color: #fff;">
<div class="col-md-12">
<div class="accordion mb-4" id="accordion_faq">
<div style="margin: 1rem 0;">
<div class="card-header collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFAQOne" aria-expanded="false" 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 does the Individual Product Sale Report module do?
<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 id="collapseFAQOne" class="accordion-collapse collapse" aria-labelledby="collapseFAQOne" data-bs-parent="#accordion_faq" 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;">
This module provides a graphical representation of sales data for each individual product. Users can filter and analyze product-wise sales trends over specific periods using line, bar, or pie charts.
</p>
</div>
</div>
<div style="margin: 1rem 0;">
<div class="card-header collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFAQThree" aria-expanded="false" aria-controls="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;">
Does this report consider cancelled or draft sale orders?
<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 id="collapseFAQThree" class="accordion-collapse collapse" aria-labelledby="collapseFAQThree" data-bs-parent="#accordion_faq" 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;">
No, the report only includes confirmed and done sale orders.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Releases Tab -->
<div class="tab-pane fade" id="releases" role="tabpanel" aria-labelledby="releases-tab">
<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;">
11th July, 2025
</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="border-bottom: 1px solid #e3e3e3;"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Related Products -->
<section class="oe_container mt32">
<h2 style="color: #091e42; font-family: Montserrat; text-align: center; margin: 25px auto; text-transform: uppercase;">
<b>Related Products</b>
</h2>
<div id="demo" class="row carousel slide mt64 mb32" data-bs-ride="carousel">
<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/18.0/sale_discount_total" 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/b1.png" alt="Sale Discount">
<h4 class="mt0 text-truncate" style="text-align: center; font-weight: 600; padding-top: 16px; font-size: 18px; padding-bottom: 8px; margin-bottom: 0;">
Sale Discount on Total Amount
</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/18.0/sale_report_advanced" 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/b2.png" alt="Advanced Sales">
<h4 class="mt0 text-truncate" style="text-align: center; font-weight: 600; padding-top: 16px; font-size: 18px; padding-bottom: 8px; margin-bottom: 0;">
Advanced Sales Reports
</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/18.0/subscription_package" 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/b3.png" alt="Subscription">
<h4 class="mt0 text-truncate" style="text-align: center; font-weight: 600; padding-top: 16px; font-size: 18px; padding-bottom: 8px; margin-bottom: 0;">
Subscription Management
</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/18.0/sale_product_image" 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/b4.png" alt="Product Image">
<h4 class="mt0 text-truncate" style="text-align: center; font-weight: 600; padding-top: 16px; font-size: 18px; padding-bottom: 8px; margin-bottom: 0;">
Sale Order Line Images
</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/18.0/product_multi_uom" 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/b5.png" alt="Multi UoM">
<h4 class="mt0 text-truncate" style="text-align: center; font-weight: 600; padding-top: 16px; font-size: 18px; padding-bottom: 8px; margin-bottom: 0;">
Product Multi UoM
</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/18.0/automatic_invoice_and_post" 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/b6.png" alt="Invoice">
<h4 class="mt0 text-truncate" style="text-align: center; font-weight: 600; padding-top: 16px; font-size: 18px; padding-bottom: 8px; margin-bottom: 0;">
Automatic Invoice And Post
</h4>
</div>
</a>
</div>
</div>
</div>
<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>
<!-- Services Section -->
<section id="services" class="mt-5 section-card">
<div class="text-center mt-4">
<h3 style="color: #000; font-family: Montserrat; font-size: 40px; font-weight: 700; 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="background-color: #ffe2e5; 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="28" width="28" alt="Gear">
</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="background-color: #fff4de; 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="28" width="28" alt="Wrench">
</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="background-color: #dcfce7; 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="28" width="28" alt="Life Ring">
</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="background-color: #f3e8ff; 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="28" width="28" alt="Arrows">
</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="background-color: #f1f9ff; 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="28" width="28" alt="Puzzle">
</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="background-color: #edf8ed; 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="28" width="28" alt="Consultancy">
</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="background-color: #f1f6ff; 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="28" width="28" alt="Licensing">
</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="background-color: #faf6ea; 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="28" width="28" alt="Hire">
</div>
<span style="font-size: 18px; color: var(--text-color); font-weight: 600;">Hire Odoo Developer</span>
</div>
</a>
</div>
</div>
</section>
</div>
</div>
</div>
<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>
</body>
</html>