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.
 
 
 
 
 

1065 lines
64 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odoo App 3 Index</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<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=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
</head>
<body>
<section>
<div class="container"
style="font-family: 'Inter', sans-serif !important;background-color: #fff !important;">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 d-flex justify-content-between flex-wrap align-items-sm-center"
style="border-bottom:1px solid rgba(0, 0, 0, 0.22)">
<div class="my-3">
<img src="assets/misc/Cybrosys R.png"
style="width:auto !important; height:40px !important">
</div>
<div class="my-3 d-flex align-items-center">
<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>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 text-center d-flex align-items-center flex-column"
style="margin: 80px 0px !important;">
<h1 style="font-size: 2.8rem;font-weight: 700; color:
#1A202C;">
Table Reservation On POS And Website</h1>
<p class="my-3 mb-4"
style="max-width: 80%; font-weight: 400 !important; line-height: 32px; color: #718096;">
Reserve POS Tables Through Website And Pos.
</p>
<div style="width: 80%; margin-top: 3rem;">
<img src="assets/screenshots/hero.gif"
class="img-responsive" width="100%" height="auto">
</div>
</div>
</div>
<div class="container mt-5 mb-5">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4">
<p class="m-0"
style="font-weight: 600; font-size: 24px; color:#714b67 !important">
Key Highlights
</p>
</div>
<div class="row py-4">
<div class="col-md-6 col-sm-12 p-3">
<div class="d-flex h-100" style="padding: 30px;border-radius: 12px;
background: #FFF;
box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25); ">
<div style="width: 36px; height: 36px; border-radius: 50%; background: #714B67;
display: flex; justify-content: center; align-items: center;
margin-right: 10px; flex-shrink: 0;">
<i class="fa-solid fa-star "
style="color: #fff;font-size:14px;"></i>
</div>
<div>
<p style="color: #1A202C;font-weight: 600;
font-size: 1.2rem; margin-bottom: 2px;">
Reserve Tables Through Website.</p>
<p class="m-0" style="color:#718096">Users will be
Able to Choose the Tables and Date.
</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 p-3">
<div class="d-flex h-100" style="padding: 30px;border-radius: 12px;
background: #FFF;
box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.25); ">
<div style="width: 36px; height: 36px; border-radius: 50%; background: #714B67;
display: flex; justify-content: center; align-items: center;
margin-right: 10px; flex-shrink: 0;">
<i class="fa-solid fa-star "
style="color: #fff;font-size:14px;"></i>
</div>
<div>
<p style="color: #1A202C;font-weight: 600;
font-size: 1.2rem; margin-bottom: 2px;">
Reserved Tables will be Displayed in POS.</p>
<p class="m-0" style="color:#718096">
Tables Reserved will be Displayed with a
Reserved
Label in POS, so it Makes Easy to Identify
Reserved Tables.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="container rounded">
<ul class="nav nav-tabs d-flex"
style="width: fit-content;margin: 0 auto;gap: 1rem;">
<li class="col text-center py-2 text-nowrap "
style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;">
<a
class="active show" data-toggle="tab" href="#tab1"
style="color: #fff;font-weight: 500; background-color: #714B67; text-decoration: none;">
<i class="fa-regular fa-image pr-2"
style="color: #fff;"></i>
Screenshots</a></li>
<li class="col text-center py-2 text-nowrap "
style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;">
<a
data-toggle="tab" href="#tab2"
style="color: #fff;font-weight: 500; text-decoration: none;"><i
class="fa-solid fa-star pr-2"
style="color: #fff;"></i>Features</a></li>
<li class="col text-center py-2 text-nowrap "
style="color: #fff; background-color: #714B67;border-radius: 6px 6px 0px 0px;">
<a
data-toggle="tab" href="#tab3"
style="color: #fff;font-weight: 500; text-decoration: none; background-color: #714B67;"><i
class="fa-solid fa-book-open pr-2"
style="color: #fff;"></i>Released Notes</a></li>
</ul>
<div class="tab-content"
style="background-color: rgba(121, 113, 119, 0.04);">
<div id="tab1" class="tab-pane fade in active show">
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/1.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Reservation Charge.</h4>
<p class="m-0" style="color:#718096">
Enable the Reservation Charge if Payment is
needed to Reserve Tables, Otherwise there
will be no Payments.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/17.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Lead Time.</h4>
<p class="m-0" style="color:#718096">
Enable the Lead Time if the Table should be
Reserved a Certain Amount of Time before the
Booking Start Time.
You can Edit the Time for Each Reservation
Separately from POS.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/22.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Opening and Closing Hours.</h4>
<p class="m-0" style="color:#718096">
Enable the Set Opening and Closing Hours
option to define the restaurant's operating
hours. Tables can only be reserved within
these specified hours. </p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/2.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/3.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Add Reservation Amount for POS Tables in
Floors.</h4>
<p class="m-0" style="color:#718096">
Go to Configuration -> Floor Plans, Select
Floor and Add Reservation Amount for
Tables.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/4.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Booking Table from Website.</h4>
<p class="m-0" style="color:#718096">Select
Booking Date and Time.</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/5.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Select Floor.</h4>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/6.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Table Reservation.</h4>
<p class="m-0" style="color:#718096">Click the
Button 'Booking Confirm' After Selecting the
Tables.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/18.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Table is Reserved.</h4>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/7.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Table Reservation in Backend.</h4>
<p class="m-0" style="color:#718096">
New Reservation will be created in the
Backend. Go to Configuration -> Table
Reservation.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/8.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Table Reservation Details.</h4>
<p class="m-0" style="color:#718096">
Order Type should be 'Website' if the
Reservation is created from Website and
'POS' if it is created from POS.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/19.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Table Booking with Reservation Amount.</h4>
<p class="m-0" style="color:#718096">
If the Reservation Charge is Enabled then
Booking Amount will be Displayed.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/9.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Cart.</h4>
<p class="m-0" style="color:#718096">
Redirect to Cart page while Clicking the
Button 'Booking Confirm' and Make the
Payment.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/10.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Sale Order.</h4>
<p class="m-0" style="color:#718096">
In Sale Order we can see the Table
Reservation Details.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/15.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Book Table from POS.</h4>
<p class="m-0" style="color:#718096">
Click on 'Book table' to Display the
Reservations.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/11.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Reservation Screen in POS.</h4>
<p class="m-0" style="color:#718096">
Displays Current and Upcoming Reservations
in POS. You can Create and Edit reservations
from here.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/12.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Create New Reservations.</h4>
<p class="m-0" style="color:#718096">
You can Create New Reservations by Clicking
on 'Create' Button and Fill the Details.
Select any Floor to Choose the Available
Tables of Corresponding Floor. If
Reservation Charge is
not enabled, then you can Confirm your
Booking on Clicking 'Confirm' Button.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/20.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Charge for Reservations from POS.</h4>
<p class="m-0" style="color:#718096">
If Reservation Charge is enabled, the Amount
will be visible, and you need to Pay the
Reservation
Amount for Booking by Clicking on 'Pay'.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/21.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Reservation Payment.</h4>
<p class="m-0" style="color:#718096">
Clicking on the Pay Button will create an
Order in th POS for the Product 'Table
Booking' with a
Unit Price equal to the Reservation Amount
of the selected Tables, and you can then
make the Payment.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/13.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Edit the Reservations.</h4>
<p class="m-0" style="color:#718096">
You can Edit Reservations by Clicking on
'Edit' Button and Edit the Details.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/14.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Cancel the Reservations.</h4>
<p class="m-0" style="color:#718096">
Able to Cancel the Reservations by clicking
on 'Cancel' button.
</p>
</div>
</div>
</div>
<div class="col-lg-12 py-2"
style="padding: 1rem 4rem !important;">
<div
style="border: 1px solid #d8d6d6; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="row justify-content-center p-3 w-100 m-0">
<img src="assets/screenshots/16.png"
class="img-responsive" width="100%"
height="auto">
</div>
<div class="px-3">
<h4 class="mt-2"
style=" font-weight:600 !important; color:#282F33 !important; font-size:1.3rem !important">
Displayed Reserved Label on Tables in POS
Floor Screen.</h4>
<p class="m-0" style="color:#718096">
The Label 'Reserved' will be Visible on
Tables in POS Floor Screen During the
Reservation Period.
</p>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane fade">
<div class="col-mg-12" style="padding: 1rem 4rem;">
<ul style="list-style: none; padding: 1rem 0;font-weight: 500;">
<li class="py-3"
style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<span style="margin-right: 12px;"><img
src="assets/misc/star (1) 2.svg"
alt=""
width="16px"></span>Community and
Enterprise Support.
</li>
<li class="py-3"
style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<span style="margin-right: 12px;"><img
src="assets/misc/star (1) 2.svg"
alt=""
width="16px"></span>Able to Reserve
Tables from Website.
</li>
<li class="py-3"
style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<span style="margin-right: 12px;"><img
src="assets/misc/star (1) 2.svg"
alt=""
width="16px"></span>Displays
Reserved Tables in POS.
</li>
<li class="py-3"
style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<span style="margin-right: 12px;"><img
src="assets/misc/star (1) 2.svg"
alt=""
width="16px"></span>Creates Sale
Order for Reservations.
</li>
</ul>
</div>
</div>
<div id="tab3" class="tab-pane fade">
<div class="col-mg-12 active" style="padding: 1rem 4rem;">
<div class="py-3"
style="font-weight: 500;background-color: #fff; border-radius: 4px; padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
<div class="d-flex mb-3"
style="font-size: 0.8rem; font-weight: 500;"><span>Version
17.0.1.0.0</span><span
class="px-2">|</span><span
style="color: #714B67;font-weight: 600;">Released on:17th May 2024</span>
</div>
<p class="m-0"
style=" color:#718096!important; font-size:1rem !important;line-height: 28px;">
Initial Commit for Table Reservation On POS And
Website.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-5">
<p class="m-0"
style="font-weight: 600; font-size: 24px; color:#000 !important">
Related Products</p>
</div>
</div>
<div id="myCarousel" class="carousel slide py-3" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row p-4">
<div class="col">
<div class="p-3">
<a href="https://apps.odoo.com/apps/modules/17.0/pos_lot_expiry_warning/"
style="color: #000; text-decoration: none;">
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
<div style="width: 300px; ">
<img src="assets/modules/pos_lot_expiry_warning.png"
alt="" width="100%"
height="auto">
</div>
<p class="text-center pt-2 text-black font-weight-bold">
POS Lot Expiry Warning</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="p-3">
<a href="https://apps.odoo.com/apps/modules/17.0/custom_receipts_for_pos/"
style="color: #000; text-decoration: none;">
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
<div style="width: 300px; ">
<img src="assets/modules/custom_receipts_for_pos.png"
alt="" width="100%"
height="auto">
</div>
<p class="text-center pt-2 text-black font-weight-bold">
POS Receipt Design</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="p-3">
<a href="https://apps.odoo.com/apps/modules/17.0/pos_receipt_extend/"
style="color: #000; text-decoration: none;">
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
<div style="width: 300px; ">
<img src="assets/modules/pos_receipt_extend.png"
alt="" width="100%"
height="auto">
</div>
<p class="text-center pt-2 text-black font-weight-bold">
Advanced POS Receipt</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row p-4">
<div class="col">
<div class="p-3">
<a href="https://apps.odoo.com/apps/modules/17.0/pos_report_generator/"
style="color: #000; text-decoration: none;">
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
<div style="width: 300px; ">
<img src="assets/modules/pos_report_generator.png"
alt="" width="100%"
height="auto">
</div>
<p class="text-center pt-2 text-black font-weight-bold">
POS All in One Report Generator</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="p-3">
<a href="https://apps.odoo.com/apps/modules/17.0/pos_access_right_hr/"
style="color: #000; text-decoration: none;">
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
<div style="width: 300px;">
<img src="assets/modules/pos_access_right_hr.png"
alt="" width="100%"
height="auto">
</div>
<p class="text-center pt-2 text-black font-weight-bold">
POS Access Right</p>
</div>
</a>
</div>
</div>
<div class="col">
<div class="p-3">
<a href="https://apps.odoo.com/apps/modules/17.0/pos_delete_orderline/"
style="color: #000; text-decoration: none;">
<div style="border:1px solid #CBCBCB !important;border-radius: 4px;">
<div style="width: 300px;">
<img src="assets/modules/pos_delete_orderline.png"
alt="" width="100%"
height="auto">
</div>
<p class="text-center pt-2 text-black font-weight-bold">
Remove Order Line In POS</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel"
data-slide="prev" style="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="#myCarousel"
data-slide="next" style="width: 35px; color: #000;">
<span class="carousel-control-next-icon">
<i class="fa fa-chevron-right"
style="font-size: 24px;"></i>
</span>
</a>
</div>
<div class="container mt-5">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4">
<p class="m-0"
style="font-weight: 600; font-size: 24px; color:#000 !important">
Our Services</p>
</div>
</div>
<div class="container my-5">
<div class="row py-3">
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#13EA36 ; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/cogs.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Customization</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#DBC711; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/wrench.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Implementation</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#FF6B6B ; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/lifebuoy.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Support</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#FFA801 ; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/user.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Hire
Odoo Developer</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative; border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#54A0FF; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/puzzle.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Integration</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#6D7680 ; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/update.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Migration</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#786FA6 ; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/consultation.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Consultancy</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;position: relative;border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#F8A5C2 ; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/training.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Implementation</p>
</div>
</div>
<div class="col-md-4 col-sm-6 px-4 py-4">
<div
style="background-color: #fff; padding: 25px; text-align: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; position: relative;border-radius: 4px;">
<div style="position: absolute; top: 0%; left: 50%; transform: translate(-50%, -50%);">
<div style="background-color:#E6BE26; border-radius: 50%; padding: 15px; width: 68px;
height: 68px; display: inline-block; box-shadow:0px 4px 4px rgba(0, 0, 0, 0.25);">
<img src="assets/icons/license.png"
alt="service-icon" width="38px"
height="auto">
</div>
</div>
<p style="margin-top: 20px; font-weight: bold;">Odoo
Licensing Consultancy</p>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-4">
<p class="m-0"
style="font-weight: 600; font-size: 24px; color:#000 !important">
Our Industries</p>
</div>
</div>
<div class="container">
<div class="row my-5 py-4">
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100 "
style="border-right: 1px solid rgb(209, 209, 209); border-bottom: 1px solid rgb(209, 209, 209); padding: 30px; box-shadow: 6px 0 10px rgba(228, 227, 227, 0.373);">
<img src="assets/icons/trading-black.png" width="42px"
height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">Trading</p>
<p>Easily procure and sell your products</p>
</div>
</div>
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100"
style="border-right: 1px solid rgb(209, 209, 209);border-bottom: 1px solid rgb(209, 209, 209); padding: 30px;">
<img src="assets/icons/pos-black.png" width="42px"
height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">POS</p>
<p>Easy configuration and convivial experience</p>
</div>
</div>
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100"
style="border-right: 1px solid rgb(209, 209, 209);border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding: 30px; box-shadow: 0 5px 10px rgba(228, 227, 227, 0.373)">
<img src="assets/icons/education-black.png" width="42px"
height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">
Education</p>
<p>A platform for educational management</p>
</div>
</div>
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100"
style="border-bottom: 1px solid rgb(209, 209, 209); padding: 30px; ">
<img src="assets/icons/manufacturing-black.png"
width="42px" height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">
Manufacturing</p>
<p>Plan, track and schedule your operations</p>
</div>
</div>
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100"
style="border-right: 1px solid rgb(209, 209, 209); padding: 30px;">
<img src="assets/icons/ecom-black.png" width="42px"
height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">E-commerce &
Website</p>
<p>Mobile friendly, awe-inspiring product pages</p>
</div>
</div>
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100"
style="border-right: 1px solid rgb(209, 209, 209); padding: 30px;box-shadow: 0 -5px 10px rgba(228, 227, 227, 0.373);">
<img src="assets/icons/service-black.png" width="42px"
height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">Service
Management</p>
<p>Keep track of services and invoice</p>
</div>
</div>
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100"
style="border-right: 1px solid rgb(209, 209, 209); padding: 30px; ">
<img src="assets/icons/restaurant-black.png"
width="42px" height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">
Restaurant</p>
<p>Run your bar or restaurant methodically</p>
</div>
</div>
<div class="col-md-3 col-sm-6 p-0">
<div class="d-flex flex-column h-100"
style=" padding: 30px;box-shadow: -5px 0 10px rgba(228, 227, 227, 0.373);">
<img src="assets/icons/hotel-black.png" width="42px"
height="auto" alt="">
<p style="color: #714B67;font-weight: 600; margin-top: 10px;
font-size: 1.2rem; margin-bottom: 2px;">Hotel
Management</p>
<p>An all-inclusive hotel management application</p>
</div>
</div>
</div>
</div>
<div class="container mt-5">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center mt-5">
<p class="m-0"
style="font-weight: 600; font-size: 24px; color:#000 !important">
Support</p>
</div>
</div>
<div class="container my-5">
<div class="row" style="background-color: #FFFAFE;">
<div class="col-md-6 pb-4 d-flex align-items-center justify-content-center"
style="border-right: 1px solid #D9D9D9;">
<div style="padding: 30px;">
<div class="d-flex align-items-center">
<img src="assets/misc/support (1) 1.svg" alt=""
width="60px" style="margin-right: 12px;">
<div style="padding: 0px 8px;">
<span
style="color: #714B67;font-size: 24px;font-weight: 600;padding-bottom: 1rem;">Need
Help?</span>
<p class="m-0" style="color:#718096;">Got
questions or need help? Get in touch.</p>
<div style="font-weight: 400;"><span><img
src="assets/misc/support-email.svg"
alt=""
width="18px"
style="filter: invert(1);margin-right: 0.8rem;"></span>odoo@cybrosys.com
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 pb-4 d-flex align-items-center justify-content-center">
<div style="padding: 30px;">
<div class="d-flex align-items-center">
<img src="assets/misc/whatsapp 1.svg" alt=""
width="60px" style="margin-right: 12px;">
<div>
<span style="color: #714B67;font-size: 24px;font-weight: 600;">WhatsApp</span>
<p class="m-0" style="color:#718096;">Say hi to
us on WhatsApp!</p>
<div style="font-weight: 400; font-size: 16px;"><span><img
src="assets/misc/phone.svg"
alt="" width="14px"
style="filter: invert(1); margin-right: 0.8rem;"></span>+91
99456767686
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>