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.
 
 
 
 
 

662 lines
40 KiB

<!--- OVERVIEW CONTAINER -->
<div class="padding: 1.5rem !important">
<section class="container mt-4">
<div class="row"
style="border-radius: 10px !important; padding: 4rem 1.5rem; background-color: #f6f8f9 !important;">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
<h1 class=""
style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 2.5rem !important;">
Odoo Whatsapp Connector
</h1>
<h4 class="my-4 text-center"
style="font-family: Montserrat, 'sans-serif'; color: #1a1a1a !important; font-weight: 300 !important; font-size: 1.2rem !important;">
Added options for sending Whatsapp messages and Mails in systray bar,sale order, invoices, website portal view and share the access url of
documents using share option available in each records through Whatsapp web.</h4>
<img src="./assets/hero.gif" class="img-responsive" style="height: 429px !important; width: 600px !important">
</div>
</div>
</section>
<!--- FEATURES CONTAINER -->
<section class="container" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="row">
<div class="col-lg-6">
<div class="d-flex flex-column justify-column-center align-items-center"
style="background-color: #f6f8f9 !important; padding: 2rem !important; border-radius: 10px !important; height: 100% !important;">
<img src="./assets/icons/01.png" class="img-responsive"
style="height: 72px !important; width: 72px !important; margin-bottom: 1rem !important; ">
<h4 class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 1.2rem !important; width: 80%;">
Whatsapp/Mail Icon in systray bar</h4>
<p class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #1a1a1a !important; font-weight: 300 !important; font-size: 1rem !important; margin-bottom: 0 !important;">
Using these icons we can send quick messages to any contacts through mail and whatsapp web.</p>
</div>
</div>
<div class="col-lg-6">
<div class="d-flex flex-column justify-column-center align-items-center"
style="background-color: #f6f8f9 !important; padding: 2rem !important; border-radius: 10px !important; height: 100% !important;">
<img src="./assets/icons/03.png" class="img-responsive"
style="height: 72px !important; width: 72px !important; margin-bottom: 1rem !important; ">
<h4 class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 1.2rem !important; width: 80%;">
Whatsapp floating icon in website</h4>
<p class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #1a1a1a !important; font-weight: 300 !important; font-size: 1rem !important; margin-bottom: 0 !important;">
Added a whatsapp icon in website in which the customers can communicate with website through whatsapp.</p>
</div>
</div>
</div>
<div class="row" style="margin-top: 2rem !important">
<div class="col-lg-6">
<div class="d-flex flex-column justify-column-center align-items-center"
style="background-color: #f6f8f9 !important; padding: 2rem !important; border-radius: 10px !important; height: 100% !important;">
<img src="./assets/icons/04.png" class="img-responsive"
style="height: 72px !important; width: 72px !important; margin-bottom: 1rem !important; ">
<h4 class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 1.2rem !important; width: 80%;">
Whatsapp button in Sales and Invoice</h4>
<p class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #1a1a1a !important; font-weight: 300 !important; font-size: 1rem !important; margin-bottom: 0 !important;">
Using this button we can send the order/invoice details to the customer of the
corresponding documents.. </p>
</div>
</div>
<div class="col-lg-6">
<div class="d-flex flex-column justify-column-center align-items-center"
style="background-color: #f6f8f9 !important; padding: 2rem !important; border-radius: 10px !important; height: 100% !important;">
<img src="./assets/icons/02.png" class="img-responsive"
style="height: 72px !important; width: 72px !important; margin-bottom: 1rem !important; ">
<h4 class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 1.2rem !important; width: 80%;">
Added Whatsapp as a share option</h4>
<p class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #1a1a1a !important; font-weight: 300 !important; font-size: 1rem !important; margin-bottom: 0 !important;">
With this we can share the access link of document to customers through whatsapp web. </p>
</div>
</div>
</div>
</section>
<!--- END OF FEATURES CONTAINER -->
<!-- SCREENSHOTS SECTION -->
<section class="container" style="padding: 4rem 1.5rem 0rem;">
<div class="row">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
<h2 class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 2rem !important; width: 80%;">
Screenshots</h2>
</div>
<div class="col-lg-12 my-3" style="background-color: #f6f6f6 !important; padding: 4rem 3rem;">
<div class="d-flex mb-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important; ">
<h6 style="margin-top: 0.5rem; color: #fff !important;">1</h6>
</div>
<h6 class="mt-2 ml-2">Added Whatsapp and Mail icon in the systray bar</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_1.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">2</h6>
</div>
<h6 class="mt-2 ml-2">By clicking on the mail icon we will have a mail composing screen like below
which we can specify the content,customer,subject and attachments.</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_2.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">3</h6>
</div>
<h6 class="mt-2 ml-2">After click on send from the composing wizard the corresponding recipients will receive the mail.</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_3.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">4</h6>
</div>
<h6 class="mt-2 ml-2">We have to specify the mobile field in contact form along with the country code for filling
the mobile number automatically in the whatsapp message composing wizard.</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_4.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">5</h6>
</div>
<h6 class="mt-2 ml-2">After click on the whatsapp icon in systray, we will have a message composing screen like this.</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_5.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">6</h6>
</div>
<h6 class="mt-2 ml-2">After click on send , we will redirected to the whatsapp web along with our message</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_6.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">7</h6>
</div>
<h6 class="mt-2 ml-2">The message we entered in odoo will carried to the corresponding number in our contact.</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_7.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">8</h6>
</div>
<h6 class="mt-2 ml-2">In Invoice form view we will have a button "Send by Whatsapp"</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_8.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">9</h6>
</div>
<h6 class="mt-2 ml-2">By clicking on "Send by Whatsapp" button ,a popup will arrive with auto filled details such as recipient,number and required content,
we can edit those details if required.</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_9.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">10</h6>
</div>
<h6 class="mt-2 ml-2">The message will redirect to the whatsapp web with the details in the popup.</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_10.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">11</h6>
</div>
<h6 class="mt-2 ml-2">In Sale Order form view we will have a button "Send by Whatsapp"</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_11.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">12</h6>
</div>
<h6 class="mt-2 ml-2">By clicking on "Send by Whatsapp" button ,a popup will arrive with auto filled details such as recipient,number and required content,
we can edit those details if required.</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_12.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">13</h6>
</div>
<h6 class="mt-2 ml-2">The message will redirect to the whatsapp web with the details in the popup</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_13.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">14</h6>
</div>
<h6 class="mt-2 ml-2">In the website form view we can define the number along with country code required for communicating with the
website responsible.</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_14.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">15</h6>
</div>
<h6 class="mt-2 ml-2">There will be a whatsapp icon present in the website.</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_15.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">16</h6>
</div>
<h6 class="mt-2 ml-2">By clicking on the whatsapp floating icon it will redirect to whatsapp web with the recipient as the number specified in corresponding website</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_16.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">17</h6>
</div>
<h6 class="mt-2 ml-2">We will have a share menu in documents like sales order, invoices, purchase etc..</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_17.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">18</h6>
</div>
<h6 class="mt-2 ml-2">By clicking on that there will be an additional option 'Whatsapp" in the popup screen where we can add the customer
and additional contents if we need.</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_18.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
<div class="col-lg-12" style="background-color: #ffffff !important; padding: 4rem 3rem;">
<div class="d-flex my-3">
<div class="d-flex justify-content-center align-items-center"
style="background-color: #3498DB !important; border: 4px solid #d6eaf8 !important; box-shadow: 0px 0px 0px 4px #ebf5fb !important; color: #fff !important; height: 35px; width: 35px; border-radius: 50% !important; font-size: 1.1rem !important;">
<h6 style="margin-top: 0.6rem; color: #fff !important;">19</h6>
</div>
<h6 class="mt-2 ml-2">After click on send first it will redirected to then whatsapp web and then to corresponding contact in our whatsapp
along with the custom message and link for accessing the document.</h6>
</div>
<img src="assets/screenshots/whatsapp_mail_messaging_19.png" width="100%" class="img-resposive"
style="border-radius: 10px !important;">
</div>
</div>
</section>
<!-- END OF SCREENSHOTS SECTION -->
<!-- SUGGESTED PRODUCTS-->
<section class="container" style="margin-top: 6rem !important;">
<div class="row">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
<h2 class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 2rem !important; width: 80%;">
Suggested Products</h2>
<p class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #1a1a1a !important; font-weight: 300 !important; font-size: 1.3rem !important;">
Check out our other products</p>
</div>
<div class="col-lg-12 my-4">
<div id="suggestedSlider" class="row carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item" style="min-height: 191px;">
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
<a href="https://apps.odoo.com/apps/modules/14.0/dynamic_accounts_report/" target="_blank">
<div style="border-radius:10px">
<img class="img img-responsive center-block"
style="border-top-left-radius:10px; border-top-right-radius:10px"
src="./assets/modules/dynamic_financial_report.jpg">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
<a href="https://apps.odoo.com/apps/modules/14.0/dashboard_pos/" target="_blank">
<div style="border-radius:10px">
<img class="img img-responsive center-block"
style="border-top-left-radius:10px; border-top-right-radius:10px"
src="./assets/modules/pos_dashboard.png">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
<a href="https://apps.odoo.com/apps/modules/14.0/sale_discount_total/" target="_blank">
<div style="border-radius:10px">
<img class="img img-responsive center-block"
style="border-top-left-radius:10px; border-top-right-radius:10px"
src="./assets/modules/discount.png">
</div>
</a>
</div>
</div>
<div class="carousel-item active" style="min-height: 191px;">
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
<a href="https://apps.odoo.com/apps/modules/14.0/hr_payroll_account_community/" target="_blank">
<div style="border-radius:10px">
<img class="img img-responsive center-block"
style="border-top-left-radius:10px; border-top-right-radius:10px"
src="./assets/modules/payroll_accounting.png">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
<a href="https://apps.odoo.com/apps/modules/14.0/invoice_format_editor/" target="_blank">
<div style="border-radius:10px">
<img class="img img-responsive center-block"
style="border-top-left-radius:10px; border-top-right-radius:10px"
src="./assets/modules/invoice.jpg">
</div>
</a>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
<a href="https://apps.odoo.com/apps/modules/14.0/shopify_odoo_connector/" target="_blank">
<div style="border-radius:10px">
<img class="img img-responsive center-block"
style="border-top-left-radius:10px; border-top-right-radius:10px"
src="./assets/modules/shopify.png">
</div>
</a>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#suggestedSlider" 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="#suggestedSlider" 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>
</div>
</section>
<!-- END OF SUGGESTED PRODUCTS -->
<!-- OUR SERVICES -->
<section class="container" style="margin-top: 6rem !important;">
<div class="row">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
<h2 class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 2rem !important; width: 80%;">
Our Services</h2>
<p class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #1a1a1a !important; font-weight: 300 !important; font-size: 1.3rem !important;">
We provide following services</p>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
<img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
Customization</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
<img src="assets/icons/wrench.png" class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
Implementation</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
<img src="assets/icons/lifebuoy.png" class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
Support</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
<img src="assets/icons/user.png" class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Hire
Odoo
Developer</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color: #54a0ff !important; border-radius: 15px !important; height: 80px; width: 80px;">
<img src="assets/icons/puzzle.png" class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
Integration</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
<img src="assets/icons/update.png" class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
Migration</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
<img src="assets/icons/consultation.png" class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
Consultancy</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
<img src="assets/icons/training.png" class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
Implementation</h6>
</div>
<div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
<div class="d-flex justify-content-center align-items-center mx-3 my-3"
style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
<img src="assets/icons/license.png" class="img-responsive" height="48px" width="48px">
</div>
<h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">Odoo
Licensing Consultancy</h6>
</div>
</div>
</section>
<!-- END OF END OF OUR SERVICES -->
<!-- OUR INDUSTRIES -->
<section class="container" style="margin-top: 6rem !important;">
<div class="row">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
<h2 class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 2rem !important; width: 80%;">
Our Industries</h2>
<p class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #1a1a1a !important; font-weight: 300 !important; font-size: 1.3rem !important;">
Our Industry Specifics And Process Segments To Solve Your Complex Business Barriers.</p>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
<img src="./assets/icons/trading-black.png" class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
Trading
</h5>
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Easily procure
and
sell your products</p>
</div>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
<img src="./assets/icons/pos-black.png" class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
POS
</h5>
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Easy
configuration
and convivial experience</p>
</div>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
<img src="./assets/icons/education-black.png" class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
Education
</h5>
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">A platform for
educational management</p>
</div>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
<img src="./assets/icons/manufacturing-black.png" class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
Manufacturing
</h5>
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Plan, track and
schedule your operations</p>
</div>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
<img src="./assets/icons/ecom-black.png" class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
E-commerce &amp; Website
</h5>
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Mobile
friendly,
awe-inspiring product pages</p>
</div>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
<img src="./assets/icons/service-black.png" class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
Service Management
</h5>
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Keep track of
services and invoice</p>
</div>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
<img src="./assets/icons/restaurant-black.png" class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
Restaurant
</h5>
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">Run your bar or
restaurant methodically</p>
</div>
</div>
<div class="col-lg-3">
<div class="my-4 d-flex flex-column justify-content-center"
style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
<img src="./assets/icons/hotel-black.png" class="img-responsive mb-3" height="48px" width="48px">
<h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
Hotel Management
</h5>
<p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">An
all-inclusive
hotel management application</p>
</div>
</div>
</div>
</section>
<!-- END OF END OF OUR INDUSTRIES -->
<!-- FOOTER -->
<!-- Footer Section -->
<section class="container" style="margin: 5rem auto 2rem;">
<div class="row" style="max-width:1540px;">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
<h2 class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 2rem !important; width: 80%;">
Need Help?</h2>
<p class="text-center"
style="font-family: Montserrat, 'sans-serif'; color: #1a1a1a !important; font-weight: 300 !important; font-size: 1.3rem !important;">
Do you have any queries regarding our products &amp; services? Let us know.</p>
</div>
</div>
<!-- Contact Cards -->
<div class="row d-flex justify-content-center align-items-center" style="max-width:1540px; margin: 0 auto 2rem auto;">
<div class="col-lg-12" style="padding: 0rem 3rem 2rem; border-radius: 10px; margin-right: 3rem; ">
<div class="row mt-4">
<div class="col-lg-4">
<a href="mailto:odoo@cybrosys.com" target="_blank" class="btn btn-block mb-2 deep_hover"
style="text-decoration: none; background-color: #4d4d4d; color: #FFF; border-radius: 4px;"><i
class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a>
</div>
<div class="col-lg-4">
<a href="https://api.whatsapp.com/send?phone=918606827707" target="_blank"
class="btn btn-block mb-2 deep_hover"
style="text-decoration: none; background-color: #25D366; color: #FFF; border-radius: 4px;"><i
class="fa fa-whatsapp mr-2"></i>WhatsApp</a>
</div>
<div class="col-lg-4">
<a href="skype:cybrosystechnologies?chat" target="_blank" class="btn btn-block deep_hover"
style="text-decoration: none; background-color: #4d4d4d; color: #FFF; border-radius: 4px;"><i
class="fa fa-envelope mr-2"></i>cybrosystechnologies</a>
</div>
</div>
</div>
</div>
<!-- End of Contact Cards -->
</section>