diff --git a/whatsapp_mail_messaging/README.rst b/whatsapp_mail_messaging/README.rst
new file mode 100644
index 000000000..49a1903c7
--- /dev/null
+++ b/whatsapp_mail_messaging/README.rst
@@ -0,0 +1,44 @@
+.. image:: https://img.shields.io/badge/licence-AGPL--3-blue.svg
+    :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
+    :alt: License: AGPL-3
+
+Odoo Whatsapp Connector
+=======================
+Odoo Whatsapp Connector For Sales, Invoice and Floating button in Website
+
+Configuration
+=============
+* No additional configurations needed
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+Credits
+-------
+* Developers:	Nishad@cybrosys
+                version 14: Sayooj A O @cybrosys
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+* Website : https://cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
+
+Maintainer
+==========
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com
+
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please visit `Our Website <https://cybrosys.com/>`__
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__
+
+
diff --git a/whatsapp_mail_messaging/__init__.py b/whatsapp_mail_messaging/__init__.py
index dda7ab060..1188422a3 100644
--- a/whatsapp_mail_messaging/__init__.py
+++ b/whatsapp_mail_messaging/__init__.py
@@ -4,7 +4,7 @@
 #    Cybrosys Technologies Pvt. Ltd.
 #
 #    Copyright (C) 2020-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
-#    Author: Sayooj A O(<https://www.cybrosys.com>)
+#    Author: Sayooj A O (<https://www.cybrosys.com>)
 #
 #    You can modify it under the terms of the GNU LESSER
 #    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
@@ -19,4 +19,6 @@
 #    If not, see <http://www.gnu.org/licenses/>.
 #
 #############################################################################
+
+from . import model
 from . import wizard
diff --git a/whatsapp_mail_messaging/__manifest__.py b/whatsapp_mail_messaging/__manifest__.py
index ff1f16f25..fb39e3294 100644
--- a/whatsapp_mail_messaging/__manifest__.py
+++ b/whatsapp_mail_messaging/__manifest__.py
@@ -4,7 +4,7 @@
 #    Cybrosys Technologies Pvt. Ltd.
 #
 #    Copyright (C) 2020-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
-#    Author: Sayooj A O(<https://www.cybrosys.com>)
+#    Author: Sayooj A O (<https://www.cybrosys.com>)
 #
 #    You can modify it under the terms of the GNU LESSER
 #    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
@@ -19,31 +19,37 @@
 #    If not, see <http://www.gnu.org/licenses/>.
 #
 #############################################################################
+
 {
-    'name': 'Whatsapp And Mail Messaging',
-    'version': '14.0.1.0.0',
+    'name': 'Odoo Whatsapp Connector',
+    'version': '14.0.2.1.1',
     'category': 'Extra Tools',
-    'summary': """Module which allows to sent Whatsapp messages and Mails from any view of
-    Odoo""",
-    'description': """Whatsapp Odoo, Whatsapp Odoo Message, Whatsapp, Odoo Whatsapp, Module which allows to sent Whatsapp messages and Mails from any view of
-    Odoo""",
+    'summary': """Odoo Whatsapp Connector For Sales, Invoice, and Floating button in Website""",
+    'description': """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..""",
     'author': 'Cybrosys Techno Solutions',
     'website': "https://www.cybrosys.com",
     'company': 'Cybrosys Techno Solutions',
     'maintainer': 'Cybrosys Techno Solutions',
-    'depends': ['contacts', 'mail'],
+    'depends': ['sale', 'account', 'website'],
     'data': [
         'views/assets.xml',
+        'views/portal_whatsapp_view.xml',
+        'views/sale_order_inherited.xml',
+        'views/account_move_inherited.xml',
+        'views/website_inherited.xml',
         'wizard/wh_message_wizard.xml',
+        'wizard/portal_share_inherited.xml',
         'security/ir.model.access.csv',
     ],
     'qweb': [
         'static/src/xml/whatsapp_button.xml',
         'static/src/xml/mail_button.xml',
     ],
-    'images': ['static/description/banner.png'],
+    'images': ['static/description/banner.gif'],
     'license': 'LGPL-3',
     'installable': True,
     'auto_install': False,
-    'application': True,
+    'application': False,
 }
diff --git a/whatsapp_mail_messaging/doc/changelog.md b/whatsapp_mail_messaging/doc/changelog.md
index 20d230936..c270c2410 100644
--- a/whatsapp_mail_messaging/doc/changelog.md
+++ b/whatsapp_mail_messaging/doc/changelog.md
@@ -5,6 +5,11 @@
 #### ADD
 - Initial commit
 
+#### 25.06.2021
+#### Version 14.0.2.1.1
+#### UPDT
+- New Features added
+
 
 
 
diff --git a/whatsapp_mail_messaging/model/__init__.py b/whatsapp_mail_messaging/model/__init__.py
new file mode 100644
index 000000000..e590a7e62
--- /dev/null
+++ b/whatsapp_mail_messaging/model/__init__.py
@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2020-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Sayooj A O (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+
+from . import website
+from . import sale_order
+from . import account_move
diff --git a/whatsapp_mail_messaging/model/account_move.py b/whatsapp_mail_messaging/model/account_move.py
new file mode 100644
index 000000000..985f638c0
--- /dev/null
+++ b/whatsapp_mail_messaging/model/account_move.py
@@ -0,0 +1,89 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2020-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Sayooj A O (<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+
+from itertools import groupby
+
+from odoo import models, _
+from odoo.exceptions import UserError
+
+
+class Account(models.Model):
+    _inherit = 'account.move'
+
+    def action_send_whatsapp(self):
+        compose_form_id = self.env.ref('whatsapp_mail_messaging.whatsapp_message_wizard_form').id
+        ctx = dict(self.env.context)
+        message = "Hi" + " " + self.partner_id.name + ',' + '\n' + "Here is your invoice" + ' ' + self.name + ' ' + "amounting" + ' ' + str(
+            self.amount_total) + self.currency_id.symbol + ' ' + "from " + self.company_id.name + ". Please remit payment at your earliest convenience. " + '\n' + \
+                  "Please use the following communication for your payment" + ' ' + self.name
+        ctx.update({
+            'default_message': message,
+            'default_partner_id': self.partner_id.id,
+            'default_mobile': self.partner_id.mobile,
+            'default_image_1920': self.partner_id.image_1920,
+        })
+        return {
+            'type': 'ir.actions.act_window',
+            'view_mode': 'form',
+            'res_model': 'whatsapp.message.wizard',
+            'views': [(compose_form_id, 'form')],
+            'view_id': compose_form_id,
+            'target': 'new',
+            'context': ctx,
+        }
+
+    def check_customers(self, partner_ids):
+        partners = groupby(partner_ids)
+        return next(partners, True) and not next(partners, False)
+
+    def action_whatsapp_multi(self):
+        account_move_ids = self.env['account.move'].browse(self.env.context.get('active_ids'))
+        partner_ids = []
+        for account_move in account_move_ids:
+            partner_ids.append(account_move.partner_id.id)
+        partner_check = self.check_customers(partner_ids)
+        if partner_check:
+            account_move_numbers = account_move_ids.mapped('name')
+            account_move_numbers = "\n".join(account_move_numbers)
+            compose_form_id = self.env.ref('whatsapp_mail_messaging.whatsapp_message_wizard_form').id
+            ctx = dict(self.env.context)
+            message = "Hi" + " " + self.partner_id.name + ',' + '\n' + "Your Orders are" + '\n' + account_move_numbers + \
+                      ' ' + "is ready for review.Do not hesitate to contact us if you have any questions."
+            ctx.update({
+                'default_message': message,
+                'default_partner_id': account_move_ids[0].partner_id.id,
+                'default_mobile': account_move_ids[0].partner_id.mobile,
+                'default_image_1920': account_move_ids[0].partner_id.image_1920,
+            })
+            return {
+                'type': 'ir.actions.act_window',
+                'view_mode': 'form',
+                'res_model': 'whatsapp.message.wizard',
+                'views': [(compose_form_id, 'form')],
+                'view_id': compose_form_id,
+                'target': 'new',
+                'context': ctx,
+            }
+        else:
+            raise UserError(_(
+                'It seems that you have selected Invoices of more than one customer.'
+                'Try select Invoices of an unique customer'))
diff --git a/whatsapp_mail_messaging/model/sale_order.py b/whatsapp_mail_messaging/model/sale_order.py
new file mode 100644
index 000000000..dd5ff52b6
--- /dev/null
+++ b/whatsapp_mail_messaging/model/sale_order.py
@@ -0,0 +1,88 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2020-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Sayooj A O(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+
+from itertools import groupby
+
+from odoo import models, _
+from odoo.exceptions import UserError
+
+
+class Sale(models.Model):
+    _inherit = 'sale.order'
+
+    def action_send_whatsapp(self):
+        compose_form_id = self.env.ref('whatsapp_mail_messaging.whatsapp_message_wizard_form').id
+        ctx = dict(self.env.context)
+        message = "Hi" + " " + self.partner_id.name + ',' + '\n' + "Your quotation" + ' ' + self.name + ' ' + "amounting" + ' ' + str(
+            self.amount_total) + self.currency_id.symbol + ' ' + "is ready for review.Do not hesitate to contact us if you have any questions."
+        ctx.update({
+            'default_message': message,
+            'default_partner_id': self.partner_id.id,
+            'default_mobile': self.partner_id.mobile,
+            'default_image_1920': self.partner_id.image_1920,
+        })
+        return {
+            'type': 'ir.actions.act_window',
+            'view_mode': 'form',
+            'res_model': 'whatsapp.message.wizard',
+            'views': [(compose_form_id, 'form')],
+            'view_id': compose_form_id,
+            'target': 'new',
+            'context': ctx,
+        }
+
+    def check_customers(self, partner_ids):
+        partners = groupby(partner_ids)
+        return next(partners, True) and not next(partners, False)
+
+    def action_whatsapp_multi(self):
+        sale_order_ids = self.env['sale.order'].browse(self.env.context.get('active_ids'))
+        partner_ids = []
+        for sale in sale_order_ids:
+            partner_ids.append(sale.partner_id.id)
+        partner_check = self.check_customers(partner_ids)
+        if partner_check:
+            sale_numbers = sale_order_ids.mapped('name')
+            sale_numbers = "\n".join(sale_numbers)
+            compose_form_id = self.env.ref('whatsapp_mail_messaging.whatsapp_message_wizard_form').id
+            ctx = dict(self.env.context)
+            message = "Hi" + " " + self.partner_id.name + ',' + '\n' + "Your Orders are" + '\n' + sale_numbers + \
+                      ' ' + '\n' + "is ready for review.Do not hesitate to contact us if you have any questions."
+            ctx.update({
+                'default_message': message,
+                'default_partner_id': sale_order_ids[0].partner_id.id,
+                'default_mobile': sale_order_ids[0].partner_id.mobile,
+                'default_image_1920': sale_order_ids[0].partner_id.image_1920,
+            })
+            return {
+                'type': 'ir.actions.act_window',
+                'view_mode': 'form',
+                'res_model': 'whatsapp.message.wizard',
+                'views': [(compose_form_id, 'form')],
+                'view_id': compose_form_id,
+                'target': 'new',
+                'context': ctx,
+            }
+        else:
+            raise UserError(_(
+                'It seems that you have selected orders of more than one customer.'
+                'Try select orders of an unique customer'))
diff --git a/whatsapp_mail_messaging/model/website.py b/whatsapp_mail_messaging/model/website.py
new file mode 100644
index 000000000..158a140f4
--- /dev/null
+++ b/whatsapp_mail_messaging/model/website.py
@@ -0,0 +1,29 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2020-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Sayooj A O(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+
+from odoo import fields, models
+
+
+class Website(models.Model):
+    _inherit = 'website'
+
+    mobile_number = fields.Char(string='Mobile Number')
diff --git a/whatsapp_mail_messaging/static/description/assets/._.DS_Store b/whatsapp_mail_messaging/static/description/assets/._.DS_Store
new file mode 100644
index 000000000..9ad849cdb
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/._.DS_Store differ
diff --git a/whatsapp_mail_messaging/static/description/assets/arrows-transparent.png b/whatsapp_mail_messaging/static/description/assets/arrows-transparent.png
deleted file mode 100644
index f2973bb02..000000000
Binary files a/whatsapp_mail_messaging/static/description/assets/arrows-transparent.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/assets/hero.gif b/whatsapp_mail_messaging/static/description/assets/hero.gif
new file mode 100644
index 000000000..9b03e57e2
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/hero.gif differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._.DS_Store b/whatsapp_mail_messaging/static/description/assets/icons/._.DS_Store
new file mode 100644
index 000000000..9ad849cdb
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._.DS_Store differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._cogs.png b/whatsapp_mail_messaging/static/description/assets/icons/._cogs.png
new file mode 100644
index 000000000..f7148d473
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._cogs.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._consultation.png b/whatsapp_mail_messaging/static/description/assets/icons/._consultation.png
new file mode 100644
index 000000000..aa8a531ac
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._consultation.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._ecom-black.png b/whatsapp_mail_messaging/static/description/assets/icons/._ecom-black.png
new file mode 100644
index 000000000..ff71cac34
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._ecom-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._education-black.png b/whatsapp_mail_messaging/static/description/assets/icons/._education-black.png
new file mode 100644
index 000000000..038789127
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._education-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._hotel-black.png b/whatsapp_mail_messaging/static/description/assets/icons/._hotel-black.png
new file mode 100644
index 000000000..962af8bbc
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._hotel-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._license.png b/whatsapp_mail_messaging/static/description/assets/icons/._license.png
new file mode 100644
index 000000000..26ba90fe5
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._license.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._lifebuoy.png b/whatsapp_mail_messaging/static/description/assets/icons/._lifebuoy.png
new file mode 100644
index 000000000..51bb6606d
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._lifebuoy.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._manufacturing-black.png b/whatsapp_mail_messaging/static/description/assets/icons/._manufacturing-black.png
new file mode 100644
index 000000000..54bc914ea
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._manufacturing-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._pos-black.png b/whatsapp_mail_messaging/static/description/assets/icons/._pos-black.png
new file mode 100644
index 000000000..a11f4cd96
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._pos-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._puzzle.png b/whatsapp_mail_messaging/static/description/assets/icons/._puzzle.png
new file mode 100644
index 000000000..f7e7e7e33
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._puzzle.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._restaurant-black.png b/whatsapp_mail_messaging/static/description/assets/icons/._restaurant-black.png
new file mode 100644
index 000000000..33ea178a3
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._restaurant-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._service-black.png b/whatsapp_mail_messaging/static/description/assets/icons/._service-black.png
new file mode 100644
index 000000000..0ec2cf2a5
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._service-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._trading-black.png b/whatsapp_mail_messaging/static/description/assets/icons/._trading-black.png
new file mode 100644
index 000000000..d6299d375
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._trading-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._training.png b/whatsapp_mail_messaging/static/description/assets/icons/._training.png
new file mode 100644
index 000000000..9bade5f8e
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._training.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._update.png b/whatsapp_mail_messaging/static/description/assets/icons/._update.png
new file mode 100644
index 000000000..48784837e
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._update.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._user.png b/whatsapp_mail_messaging/static/description/assets/icons/._user.png
new file mode 100644
index 000000000..d5b105ad2
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._user.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/._wrench.png b/whatsapp_mail_messaging/static/description/assets/icons/._wrench.png
new file mode 100644
index 000000000..db48ce407
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/._wrench.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/01.png b/whatsapp_mail_messaging/static/description/assets/icons/01.png
new file mode 100644
index 000000000..96116b285
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/01.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/02.png b/whatsapp_mail_messaging/static/description/assets/icons/02.png
new file mode 100644
index 000000000..9dd8a71b4
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/02.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/03.png b/whatsapp_mail_messaging/static/description/assets/icons/03.png
new file mode 100644
index 000000000..efefc08de
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/03.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/04.png b/whatsapp_mail_messaging/static/description/assets/icons/04.png
new file mode 100644
index 000000000..d4697d252
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/04.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/chevron.png b/whatsapp_mail_messaging/static/description/assets/icons/chevron.png
new file mode 100644
index 000000000..2089293d6
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/chevron.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/cogs.png b/whatsapp_mail_messaging/static/description/assets/icons/cogs.png
new file mode 100644
index 000000000..95d0bad62
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/cogs.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/consultation.png b/whatsapp_mail_messaging/static/description/assets/icons/consultation.png
new file mode 100644
index 000000000..8319d4baa
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/consultation.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/ecom-black.png b/whatsapp_mail_messaging/static/description/assets/icons/ecom-black.png
new file mode 100644
index 000000000..a9385ff13
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/ecom-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/ecom.png b/whatsapp_mail_messaging/static/description/assets/icons/ecom.png
deleted file mode 100644
index 6e720d50e..000000000
Binary files a/whatsapp_mail_messaging/static/description/assets/icons/ecom.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/education-black.png b/whatsapp_mail_messaging/static/description/assets/icons/education-black.png
new file mode 100644
index 000000000..3eb09b27b
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/education-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/education.png b/whatsapp_mail_messaging/static/description/assets/icons/education.png
deleted file mode 100644
index f0de98eb0..000000000
Binary files a/whatsapp_mail_messaging/static/description/assets/icons/education.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/feature-icons/._lifebuoy.png b/whatsapp_mail_messaging/static/description/assets/icons/feature-icons/._lifebuoy.png
new file mode 100644
index 000000000..4f178d2ad
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/feature-icons/._lifebuoy.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/feature-icons/document.png b/whatsapp_mail_messaging/static/description/assets/icons/feature-icons/document.png
new file mode 100644
index 000000000..4054e8480
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/feature-icons/document.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/feature-icons/down.png b/whatsapp_mail_messaging/static/description/assets/icons/feature-icons/down.png
new file mode 100644
index 000000000..65a94a23b
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/feature-icons/down.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/feature-icons/lifebuoy.png b/whatsapp_mail_messaging/static/description/assets/icons/feature-icons/lifebuoy.png
new file mode 100644
index 000000000..658d56ccc
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/feature-icons/lifebuoy.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/hotel-black.png b/whatsapp_mail_messaging/static/description/assets/icons/hotel-black.png
new file mode 100644
index 000000000..130f613be
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/hotel-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/hotel.png b/whatsapp_mail_messaging/static/description/assets/icons/hotel.png
deleted file mode 100644
index 917c6a63e..000000000
Binary files a/whatsapp_mail_messaging/static/description/assets/icons/hotel.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/license.png b/whatsapp_mail_messaging/static/description/assets/icons/license.png
new file mode 100644
index 000000000..a5869797e
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/license.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/lifebuoy.png b/whatsapp_mail_messaging/static/description/assets/icons/lifebuoy.png
new file mode 100644
index 000000000..658d56ccc
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/lifebuoy.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/manufacturing-black.png b/whatsapp_mail_messaging/static/description/assets/icons/manufacturing-black.png
new file mode 100644
index 000000000..697eb0e9f
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/manufacturing-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/manufacturing.png b/whatsapp_mail_messaging/static/description/assets/icons/manufacturing.png
deleted file mode 100644
index 68c3722f8..000000000
Binary files a/whatsapp_mail_messaging/static/description/assets/icons/manufacturing.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/pos-black.png b/whatsapp_mail_messaging/static/description/assets/icons/pos-black.png
new file mode 100644
index 000000000..97c0f90c1
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/pos-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/pos.png b/whatsapp_mail_messaging/static/description/assets/icons/pos.png
deleted file mode 100644
index 600bfe4f9..000000000
Binary files a/whatsapp_mail_messaging/static/description/assets/icons/pos.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/puzzle.png b/whatsapp_mail_messaging/static/description/assets/icons/puzzle.png
new file mode 100644
index 000000000..65cf854e7
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/puzzle.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/restaurant-black.png b/whatsapp_mail_messaging/static/description/assets/icons/restaurant-black.png
new file mode 100644
index 000000000..4a35eb939
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/restaurant-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/restaurant.png b/whatsapp_mail_messaging/static/description/assets/icons/restaurant.png
deleted file mode 100644
index 680acf29e..000000000
Binary files a/whatsapp_mail_messaging/static/description/assets/icons/restaurant.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/service-black.png b/whatsapp_mail_messaging/static/description/assets/icons/service-black.png
new file mode 100644
index 000000000..301ab51cb
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/service-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/service.png b/whatsapp_mail_messaging/static/description/assets/icons/service.png
deleted file mode 100644
index bfbe7a6d2..000000000
Binary files a/whatsapp_mail_messaging/static/description/assets/icons/service.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/trading-black.png b/whatsapp_mail_messaging/static/description/assets/icons/trading-black.png
new file mode 100644
index 000000000..9398ba2f1
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/trading-black.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/trading.png b/whatsapp_mail_messaging/static/description/assets/icons/trading.png
deleted file mode 100644
index a741219b5..000000000
Binary files a/whatsapp_mail_messaging/static/description/assets/icons/trading.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/training.png b/whatsapp_mail_messaging/static/description/assets/icons/training.png
new file mode 100644
index 000000000..884ca024d
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/training.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/update.png b/whatsapp_mail_messaging/static/description/assets/icons/update.png
new file mode 100644
index 000000000..ecbc5a01a
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/update.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/user.png b/whatsapp_mail_messaging/static/description/assets/icons/user.png
new file mode 100644
index 000000000..6ffb23d9f
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/user.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/icons/wrench.png b/whatsapp_mail_messaging/static/description/assets/icons/wrench.png
new file mode 100644
index 000000000..6c04dea0f
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/icons/wrench.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/modules/discount.png b/whatsapp_mail_messaging/static/description/assets/modules/discount.png
new file mode 100644
index 000000000..2901d6ef4
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/modules/discount.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/modules/dynamic_financial_report.jpg b/whatsapp_mail_messaging/static/description/assets/modules/dynamic_financial_report.jpg
new file mode 100644
index 000000000..c79986ab0
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/modules/dynamic_financial_report.jpg differ
diff --git a/whatsapp_mail_messaging/static/description/assets/modules/invoice.jpg b/whatsapp_mail_messaging/static/description/assets/modules/invoice.jpg
new file mode 100644
index 000000000..26fb9d33f
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/modules/invoice.jpg differ
diff --git a/whatsapp_mail_messaging/static/description/assets/modules/payroll_accounting.png b/whatsapp_mail_messaging/static/description/assets/modules/payroll_accounting.png
new file mode 100644
index 000000000..488b05c36
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/modules/payroll_accounting.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/modules/pos_dashboard.png b/whatsapp_mail_messaging/static/description/assets/modules/pos_dashboard.png
new file mode 100644
index 000000000..a915fe4c5
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/modules/pos_dashboard.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/modules/shopify.png b/whatsapp_mail_messaging/static/description/assets/modules/shopify.png
new file mode 100644
index 000000000..f2751c663
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/modules/shopify.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_1.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_1.png
new file mode 100644
index 000000000..22932fd5e
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_1.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_10.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_10.png
new file mode 100644
index 000000000..9789c0e94
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_10.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_11.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_11.png
new file mode 100644
index 000000000..a379496df
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_11.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_12.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_12.png
new file mode 100644
index 000000000..abe982ad3
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_12.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_13.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_13.png
new file mode 100644
index 000000000..9adcb9721
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_13.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_14.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_14.png
new file mode 100644
index 000000000..73f78d065
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_14.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_15.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_15.png
new file mode 100644
index 000000000..5f84c9bea
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_15.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_16.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_16.png
new file mode 100644
index 000000000..4f961c5f7
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_16.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_17.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_17.png
new file mode 100644
index 000000000..507317a3f
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_17.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_18.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_18.png
new file mode 100644
index 000000000..4b1d8a968
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_18.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_19.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_19.png
new file mode 100644
index 000000000..54d45f948
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_19.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_2.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_2.png
new file mode 100644
index 000000000..2aa121550
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_2.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_20.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_20.png
new file mode 100644
index 000000000..9b9c6c3a7
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_20.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_21.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_21.png
new file mode 100644
index 000000000..914435374
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_21.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_22.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_22.png
new file mode 100644
index 000000000..8708076a9
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_22.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_3.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_3.png
new file mode 100644
index 000000000..7af8d5608
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_3.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_4.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_4.png
new file mode 100644
index 000000000..54f000798
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_4.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_5.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_5.png
new file mode 100644
index 000000000..1686435d9
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_5.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_6.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_6.png
new file mode 100644
index 000000000..11b2f2fd0
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_6.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_7.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_7.png
new file mode 100644
index 000000000..8a93b4d9e
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_7.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_8.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_8.png
new file mode 100644
index 000000000..630aa4c4c
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_8.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_9.png b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_9.png
new file mode 100644
index 000000000..6a62dd8e9
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/assets/screenshots/whatsapp_mail_messaging_9.png differ
diff --git a/whatsapp_mail_messaging/static/description/assets/trophy.png b/whatsapp_mail_messaging/static/description/assets/trophy.png
deleted file mode 100644
index a5496a866..000000000
Binary files a/whatsapp_mail_messaging/static/description/assets/trophy.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/banner.gif b/whatsapp_mail_messaging/static/description/banner.gif
new file mode 100644
index 000000000..4c0c52982
Binary files /dev/null and b/whatsapp_mail_messaging/static/description/banner.gif differ
diff --git a/whatsapp_mail_messaging/static/description/banner.png b/whatsapp_mail_messaging/static/description/banner.png
deleted file mode 100644
index 57bd267ba..000000000
Binary files a/whatsapp_mail_messaging/static/description/banner.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/icon.png b/whatsapp_mail_messaging/static/description/icon.png
index 8610eb052..c43c5aa28 100644
Binary files a/whatsapp_mail_messaging/static/description/icon.png and b/whatsapp_mail_messaging/static/description/icon.png differ
diff --git a/whatsapp_mail_messaging/static/description/images/mail_1.png b/whatsapp_mail_messaging/static/description/images/mail_1.png
deleted file mode 100644
index 535106a28..000000000
Binary files a/whatsapp_mail_messaging/static/description/images/mail_1.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/images/mail_2.png b/whatsapp_mail_messaging/static/description/images/mail_2.png
deleted file mode 100644
index 49ec2df24..000000000
Binary files a/whatsapp_mail_messaging/static/description/images/mail_2.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/images/mail_3.png b/whatsapp_mail_messaging/static/description/images/mail_3.png
deleted file mode 100644
index 7ca20ab22..000000000
Binary files a/whatsapp_mail_messaging/static/description/images/mail_3.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/images/screen.gif b/whatsapp_mail_messaging/static/description/images/screen.gif
deleted file mode 100644
index 0df84a38a..000000000
Binary files a/whatsapp_mail_messaging/static/description/images/screen.gif and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/images/whatsapp_1.png b/whatsapp_mail_messaging/static/description/images/whatsapp_1.png
deleted file mode 100644
index 8a9848323..000000000
Binary files a/whatsapp_mail_messaging/static/description/images/whatsapp_1.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/images/whatsapp_2.png b/whatsapp_mail_messaging/static/description/images/whatsapp_2.png
deleted file mode 100644
index b49041b46..000000000
Binary files a/whatsapp_mail_messaging/static/description/images/whatsapp_2.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/images/whatsapp_3.png b/whatsapp_mail_messaging/static/description/images/whatsapp_3.png
deleted file mode 100644
index 0424e2604..000000000
Binary files a/whatsapp_mail_messaging/static/description/images/whatsapp_3.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/images/whatsapp_4.png b/whatsapp_mail_messaging/static/description/images/whatsapp_4.png
deleted file mode 100644
index 101c32efa..000000000
Binary files a/whatsapp_mail_messaging/static/description/images/whatsapp_4.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/images/whatsapp_5.png b/whatsapp_mail_messaging/static/description/images/whatsapp_5.png
deleted file mode 100644
index bb2ae1d4f..000000000
Binary files a/whatsapp_mail_messaging/static/description/images/whatsapp_5.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/images/whatsapp_6.png b/whatsapp_mail_messaging/static/description/images/whatsapp_6.png
deleted file mode 100644
index 76d1454ef..000000000
Binary files a/whatsapp_mail_messaging/static/description/images/whatsapp_6.png and /dev/null differ
diff --git a/whatsapp_mail_messaging/static/description/index.html b/whatsapp_mail_messaging/static/description/index.html
index ca41f9869..0568eb845 100644
--- a/whatsapp_mail_messaging/static/description/index.html
+++ b/whatsapp_mail_messaging/static/description/index.html
@@ -1,770 +1,711 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>Invoice Template Editor</title>
-    <link rel="stylesheet"
-          href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"
-          integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA=="
-          crossorigin="anonymous"/>
-    <link rel="stylesheet"
-          href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
-          integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
-          crossorigin="anonymous"/>
-</head>
-
-<body>
-<div class="oe_styling_v8">
-    <section class="oe_container"
-             style="font-family: Roboto, 'sans-serif'; padding:2rem 3rem 1rem">
-        <div class="row shadow-lg"
-             style="max-width:1540px; margin:0 auto; border-radius: 10px;">
-            <!-- LEFT HERO -->
-            <div class="col-lg-7"
-                 style="margin-top: 0rem; padding: 3rem 2.5rem; ">
-                <div style="width: 200px;">
-                    <img src="https://www.cybrosys.com/images/logo.png"
-                         width="150px" height="auto"/>
-                </div>
-                <h1 class="mt-4"
-                    style="font-family: Montserrat, 'sans-serif' ; font-weight: bold;">
-                    Whatsapp Mail Messaging</h1>
-
-                <p class="lead"
-                   style="font-weight: 500; line-height: 1.5; color: #757575">
-                    Send Whatsapp messages and Mails from any view of Odoo
-                </p>
-
-                <span class="badge px-3 py-2 depth-1"
-                      style="background-color: #FFECEF; color: #F66170; font-weight: bold; border-radius: 1rem;"><i
-                        class="fa fa-star mr-2"></i>Key Highlights</span>
-                <!-- FEATURES -->
-                <hr class="mt-4"
-                    style="background: linear-gradient(to right, #e5e5e5, transparent); height: 2px; border-style: none;">
-                <div class="row">
-                    <div class="col-lg-5 no-gutters">
-                        <!-- FEATURE COLUMN LEFT -->
-                        <ul style="list-style: none; padding: 0; font-weight: 500; line-height: 2;">
-                            <li><i class="fa fa-check-circle mr-2"
-                                   style="color: #1abc9c;"></i>Added Whatsapp and Mail icons in Systray for easy access from any views.
-                            </li>
-                            <li><i class="fa fa-check-circle mr-2"
-                                   style="color: #1abc9c;"></i>Can send mails to any valid mail addresses along with attachments.
-                            </li><li><i class="fa fa-check-circle mr-2"
-                                   style="color: #1abc9c;"></i>Can send Whatsapp messages to any valid mobile numbers.
-                                along with country code.
-                            </li>
-                            <li><i class="fa fa-check-circle mr-2"
-                                   style="color: #1abc9c;"></i>After sending message from odoo then automatically
-                                redirected to Whatsapp web with our message.
-                            </li>
-                            <li><i class="fa fa-check-circle mr-2"
-                                   style="color: #1abc9c;"></i>Our module also supporting the emojis along with the whatsapp messages.
-                        </ul>
-                    </div>
-                </div>
-                <hr class="mt-4"
-                    style="background: linear-gradient(to right, #e5e5e5, transparent); height: 2px; border-style: none;">
-                <!-- END OF FEATURES -->
-            </div>
-            <!-- END OF LEFT HERO -->
-            <!-- RIGHT HERO -->
-            <div class="col-lg-5  d-flex align-items-center"
-                 style="border-radius: 0px 10px 10px 0px;  background-repeat: no-repeat; background-size: cover;">
-                <img src='images/screen.gif'
-                     style="width:90%; height: auto; margin: 0 auto;"/>
-
-            </div>
-            <!-- END OF RIGHT HERO -->
-        </div>
-
-        <section class="oe_container" style="margin-top: 4rem;">
-            <div class="row"
-                 style="max-width:1540px; margin:0 auto; padding-bottom:64px;">
-                <div class="col-lg-12">
-                    <!-- TAB LIST -->
-                    <ul class="nav nav-tabs d-flex justify-content-center"
-                        role="tablist"
-                        style="background-color:unset; margin:0 auto;">
-                        <li class="nav-item">
-                            <a class="nav-link active" style="color: #000;"
-                               data-toggle="tab" href="#tabs-1"
-                               role="tab"><i class="fa fa-pie-chart mr-2"></i>Overview</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" style="color: #000;"
-                               data-toggle="tab" href="#tabs-3" role="tab"><i
-                                    class="fa fa-star mr-2"></i>Features</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" style="color: #000;"
-                               data-toggle="tab" href="#tabs-4" role="tab"><i
-                                    class="fa fa-picture-o mr-2"></i>Screenshots</a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="col-lg-12">
-                    <!-- Tab panes -->
-                    <div class="tab-content" style="padding: 2rem;">
-                        <div class="tab-pane active" id="tabs-1"
-                             role="tabpanel">
-                            <h3 class="text-center rounded px-3 py-2 mb-4"
-                                style="background-color:#edf2f7; color: #162635; font-family: Roboto, 'sans-serif'; font-weight: bold;">
-                                Overview</h3>
-
-                            <p class="text-justify">In this module we have added Whatsapp and Mail icon in the systray bar which
-                            the user can send messages through whatsapp and mail from any view using these icons.The mails will be sent from the mail
-                            which we configured as the outgoing mail server and in case of whatsapp message, it will redirected to the whatsapp web.</p>
-                        </div>
-                        <div class="tab-pane" id="tabs-3" role="tabpanel">
-                            <h3 class="text-center rounded px-3 py-2 mb-4"
-                                style="background-color:#edf2f7; color: #162635; font-family: Roboto, 'sans-serif'; font-weight: bold;">
-                                Features</h3>
-                            <ul style="max-width: 1200px; list-style: none;">
-                                <li>
-                                    <h5 style="font-family: Roboto, 'sans-serif';">
-                                        Added Whatsapp and Mail icons in Systray for easy access from any views.</h5>
-                                </li>
-                                <li>
-                                    <h5 style="font-family: Roboto, 'sans-serif';">
-                                        Can send mails to any valid mail addresses along with attachments.</h5>
-                                </li>
-                                <li>
-                                    <h5 style="font-family: Roboto, 'sans-serif';">
-                                        Can send Whatsapp messages to any valid mobile numbers.
-                                along with country code.</h5>
-                                </li>
-                                <li>
-                                    <h5 style="font-family: Roboto, 'sans-serif';">
-                                        After sending message from odoo then automatically
-                                redirected to Whatsapp web with our message.</h5>
-                                </li>
-                                <li>
-                                    <h5 style="font-family: Roboto, 'sans-serif';">
-                                        Our module also supporting the emojis along with the whatsapp messages.</h5>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="tab-pane" id="tabs-4" role="tabpanel">
-                            <h3 class="text-center rounded px-3 py-2 mb-4"
-                                style="background-color:#edf2f7; color: #162635; font-family: Roboto, 'sans-serif'; font-weight: bold;">
-                                Screenshots</h3>
-                            <div>
-                                <section class="oe_container">
-                                    <div id="demo"
-                                         class="row carousel slide  mb32"
-                                         data-ride="carousel">
-                                        <div class="carousel-inner">
-                                            <div class="carousel-item active"
-                                                 style="min-height: 0px;">
-                                                <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16"
-                                                     style="float: left;">
-                                                    <h3 class="alert"
-                                                        style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;">
-                                                        <i class="fa fa-check-circle-o"
-                                                           style="width:40px; color:#07B700"></i>
-                                                        We will have a Mail icon in the systray bar after the installation of our module.
-                                                    </h3>
-
-                                                    <div style=""><img
-                                                            class="img img-responsive center-block"
-                                                            style="border-top-left-radius: 10px;border-top-right-radius: 10px;"
-                                                            src="images/mail_1.png">
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="carousel-item"
-                                                 style="min-height: 0px;">
-                                                <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16"
-                                                     style="float: left;">
-                                                    <h3 class="alert"
-                                                        style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px;">
-                                                        <i class="fa fa-check-circle-o"
-                                                           style="width:40px; color:#07B700"></i>
-                                                        By Clicking on the Mail
-                                                        icon we will have the message
-                                                        composing wizard, from there we can select the recipient and can add the subject,
-                                                    content and attachments.</h3>
-                                                    <div style=""><img
-                                                            class="img img-responsive center-block"
-                                                            style="border-top-left-radius: 10px;border-top-right-radius: 10px;"
-                                                            src="images/mail_2.png">
-                                                    </div>
-                                                </div>
-                                            </div>
-
-                                            <div class="carousel-item"
-                                                 style="min-height: 0px;">
-                                                <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16"
-                                                     style="float: left;">
-                                                    <h3 class="mb32 alert"
-                                                        style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; ">
-                                                        <i class="fa fa-check-circle-o"
-                                                           style="width:40px; color:#07B700"></i>After click on sent the recipient will receive a mail like we composed from odoo.
-                                                    This mail will be sent from the outgoing mail server which we configured in the database.</h3>
-                                                    <div style=""><img
-                                                            class="img img-responsive center-block"
-                                                            style="border-top-left-radius: 10px;border-top-right-radius: 10px;"
-                                                            src="images/mail_3.png">
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="carousel-item"
-                                                 style="min-height: 0px;">
-                                                <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16"
-                                                     style="float: left;">
-                                                    <h3 class="mb32 alert"
-                                                        style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; ">
-                                                        <i class="fa fa-check-circle-o"
-                                                           style="width:40px; color:#07B700"></i>We will have a Whatsapp icon in the case of sending Whatsapp messages to a number.</h3>
-                                                    <div style=""><img
-                                                            class="img img-responsive center-block"
-                                                            style="border-top-left-radius: 10px;border-top-right-radius: 10px;"
-                                                            src="images/whatsapp_1.png">
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="carousel-item"
-                                                 style="min-height: 0px;">
-                                                <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16"
-                                                     style="float: left;">
-                                                    <h3 class="mb32 alert"
-                                                        style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; ">
-                                                        <i class="fa fa-check-circle-o"
-                                                           style="width:40px; color:#07B700"></i>In case of selecting a contact directly for sending message the we have to fill the field
-                                                        mobile in the contact form.</h3>
-                                                    <div style=""><img
-                                                            class="img img-responsive center-block"
-                                                            style="border-top-left-radius: 10px;border-top-right-radius: 10px;"
-                                                            src="images/whatsapp_2.png">
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="carousel-item"
-                                                 style="min-height: 0px;">
-                                                <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16"
-                                                     style="float: left;">
-                                                    <h3 class="mb32 alert"
-                                                        style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; ">
-                                                        <i class="fa fa-check-circle-o"
-                                                           style="width:40px; color:#07B700"></i>After clicking on the whatsapp icon, we will have the message composing
-                                                    wizard from there we can select the contact, enter the mobile number along with the country code and
-                                                    content of the message along with emojis.</h3>
-                                                    <div style=""><img
-                                                            class="img img-responsive center-block"
-                                                            style="border-top-left-radius: 10px;border-top-right-radius: 10px;"
-                                                            src="images/whatsapp_3.png">
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="carousel-item"
-                                                 style="min-height: 0px;">
-                                                <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16"
-                                                     style="float: left;">
-                                                    <h3 class="mb32 alert"
-                                                        style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; ">
-                                                        <i class="fa fa-check-circle-o"
-                                                           style="width:40px; color:#07B700"></i>We can choose any of the emojis to our message listed below.</h3>
-                                                    <div style=""><img
-                                                            class="img img-responsive center-block"
-                                                            style="border-top-left-radius: 10px;border-top-right-radius: 10px;"
-                                                            src="images/whatsapp_4.png">
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="carousel-item"
-                                                 style="min-height: 0px;">
-                                                <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16"
-                                                     style="float: left;">
-                                                    <h3 class="mb32 alert"
-                                                        style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; ">
-                                                        <i class="fa fa-check-circle-o"
-                                                           style="width:40px; color:#07B700"></i>After click on send it will redirected to the whatsapp web with our message.</h3>
-                                                    <div style=""><img
-                                                            class="img img-responsive center-block"
-                                                            style="border-top-left-radius: 10px;border-top-right-radius: 10px;"
-                                                            src="images/whatsapp_5.png">
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div class="carousel-item"
-                                                 style="min-height: 0px;">
-                                                <div class="col-xs-12 col-sm-12 col-md-12 mb16 mt16"
-                                                     style="float: left;">
-                                                    <h3 class="mb32 alert"
-                                                        style="font-weight:400;color: #091E42;background: #fff;text-align: left;border-radius: 0; font-size: 18px; ">
-                                                        <i class="fa fa-check-circle-o"
-                                                           style="width:40px; color:#07B700"></i>The message will available in the chat of the corresponding number in our contact.</h3>
-                                                    <div style=""><img
-                                                            class="img img-responsive center-block"
-                                                            style="border-top-left-radius: 10px;border-top-right-radius: 10px;"
-                                                            src="images/whatsapp_6.png">
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-
-
-                                    <a class="carousel-control-prev"
-                                       href="#demo" data-slide="prev"
-                                       style="left:-25px;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-slide="next"
-                                            style="right:-25px;width: 35px;color: #000;"> <span
-                                        class="carousel-control-next-icon"><i
-                                        class="fa fa-chevron-right"
-                                        style="font-size:24px"></i></span>
-                                </a>
-
-                                </section>
-                            </div>
-                        </div>
-                    </div>
-                    <!-- END OF TAB LIST -->
-                </div>
-            </div>
-        </section>
-        <!-- Suggested Products -->
-        <section class="oe_container"
-                 style="padding:2rem 3rem 1rem; max-width:1540px; margin: 0 auto; ">
-            <h2 style="font-weight:600; text-align:center; margin-bottom:1rem; width:100%">
-                Suggested Products</h2>
-            <hr
-                    style="background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;">
-            <div id="suggestedSlider" class="row carousel slide mt-4"
-                 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/12.0/accounting_dynamic_reports/"
-                               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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/project_task_timer.png?ae168aa">
-                                </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/13.0/project_report_pdf/"
-                               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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/project_repo.png?ae168aa">
-                                </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/export_stockinfo_xls/"
-                               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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/project_gantt.png?ae168aa">
-                                </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/12.0/project_task_timer/"
-                               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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/task_image.png?ae168aa">
-                                </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/base_accounting_kit/"
-                               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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/reminder.png?ae168aa">
-                                </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/12.0/project_report_pdf/"
-                               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="//apps.odoocdn.com/apps/assets/14.0/custom_gantt_view/images/project_report.png?ae168aa">
-                                </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>
-        </section>
-        <!-- End of Suggested Products -->
-        <!-- Our Services -->
-        <section class="oe_container" style="padding:2rem 3rem 1rem">
-            <!-- <h2 style="font-weight:600; text-align:center; margin-bottom:1rem; width:100%">Our Services</h2>
-            <hr
-            style="background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;"> -->
-            <div class="row mt-4 position-relative"
-                 style="max-width:1540px; margin: 0 auto;">
-                <div class="col-lg-12 jumbotron text-white position-relative shadow-sm"
-                     style="background-color: #b22126; background-image: url('./assets/arrows-transparent.png'); background-size: cover; background-position: bottom; border-radius: 10px;">
-                        <span class="badge badge-pill px-3 py-2 text-dark shadow-sm  font-weight-bold"
-                              style="background-color: #f6b93b;"><i
-                                class="fa fa-trophy mr-2"></i>Odoo Gold Partner</span>
-                    <div class="row">
-                        <div class="col-lg-6 mt-4">
-                            <h1 style="font-family: Roboto, 'sans-serif'; color:#FFF;">
-                                Our Services</h1>
-                            <p class="lead">We provide following services</p>
-                            <ul class="mt-4"
-                                style="list-style: none; padding: 0; line-height: 2.8; font-weight: 500;">
-                                <li  style="list-style: none;">
-                                    <a href="https://www.cybrosys.com/odoo-customization-and-installation/"
-                                       style="color: white; text-decoration: none;"
-                                       target="_blank"><i
-                                            class="fa fa-cogs mr-2"
-                                            style="color: #f6b93b; font-size: 1.5rem"></i>Odoo
-                                        Customization</a></li>
-                                <li style="list-style: none;">
-                                    <a href="https://www.cybrosys.com/odoo-erp-implementation/"
-                                       style="color: white; text-decoration: none;"
-                                       target="_blank"><i
-                                            class="fa fa-wrench mr-2"
-                                            style="color: #f6b93b; font-size: 1.5rem"></i>Odoo
-                                        Implementation</a></li>
-                                <li style="list-style: none;"><a href="https://www.cybrosys.com/odoo-erp-support/"
-                                       style="color: white; text-decoration: none;"
-                                       target="_blank"><i
-                                        class="fa fa-life-ring mr-2"
-                                        style="color: #f6b93b; font-size: 1.5rem"></i>Odoo
-                                    Support</a></li>
-                                <li style="list-style: none;">
-                                    <a href="https://www.cybrosys.com/hire-odoo-developer/"
-                                       style="color: white; text-decoration: none;"
-                                       target="_blank"><i
-                                            class="fa fa-user mr-2"
-                                            style="color: #f6b93b; font-size: 1.5rem"></i>
-                                        Hire
-                                        Odoo Developers</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <img src="./assets/trophy.png" width="50%" height="auto"
-                     alt="Odoo Gold Partner"
-                     class="position-absolute" style="right: 0; bottom: 0;">
-            </div>
-        </section>
-        <!-- End of Our Services -->
-        <!-- Our Industries -->
-        <section class="oe_container" style="padding:2rem 3rem 1rem">
-            <div class="row" style="max-width:1540px; margin: 0 auto; ">
-                <div class="col-lg-12">
-                    <h2 style="font-weight:600; text-align:center; margin-bottom:1rem; width:100%">
-                        Our
-                        Industries</h2>
-                    <hr
-                            style="background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;">
-                </div>
-                <div class="row mt-4 position-relative"
-                     style="max-width:1540px; margin: 0 auto;">
-                    <!-- Left Column -->
-                    <div class="col-lg-6">
-
-                        <div class="bg-white shadow px-4 py-3 mb-3"
-                             style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/best-trading-erp/"
-                               target="_blank"
-                               class="text-dark" style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/trading.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            Trading</h4>
-                                        <p style="font-weight: 300;">Easily procure and
-                                            sell your products</p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-
-                        <div class="bg-white shadow px-4 py-3 my-3"
-                             style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/education-erp-software/"
-                               target="_blank" class="text-dark"
-                               style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/education.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            Education</h4>
-                                        <p style="font-weight: 300;">A Collaborative
-                                            platform for educational
-                                            management</p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-
-                        <div class="bg-white shadow px-4 py-3 my-3"
-                             style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/manufacturing-erp-software/"
-                               target="_blank" class="text-dark"
-                               style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/manufacturing.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            Manufacturing</h4>
-                                        <p style="font-weight: 300;">Plan, track and
-                                            schedule your operations</p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-
-                        <div class="bg-white shadow px-4 py-3 my-3"
-                             style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/ecommerce-website/"
-                               target="_blank"
-                               class="text-dark" style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/ecom.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            E-commerce & Website</h4>
-                                        <p style="font-weight: 300;">Mobile friendly,
-                                            awe-inspiring product pages
-                                        </p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- End of Left Column -->
-                    <!-- Right Column -->
-                    <div class="col-lg-6">
-
-                        <div class="bg-white shadow px-4 py-3 mb-3"
-                             style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/pos/"
-                               target="_blank"
-                               class="text-dark" style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/pos.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            POS</h4>
-                                        <p style="font-weight: 300;">Easy configuring
-                                            and convivial selling</p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-
-
-                        <div class="bg-white shadow px-4 py-3 my-3"
-                             style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/service-management/"
-                               target="_blank"
-                               class="text-dark" style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/service.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            Service Management</h4>
-                                        <p style="font-weight: 300;">Keep track of
-                                            services and invoice accordingly
-                                        </p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-
-                        <div class="bg-white shadow px-4 py-3 my-3"
-                             style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/restaurant-management/"
-                               target="_blank" class="text-dark"
-                               style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/restaurant.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            Restaurant</h4>
-                                        <p style="font-weight: 300;">Run your bar or
-                                            restaurant methodica</p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-
-                        <div class="bg-white shadow px-4 py-3 my-3"
-                             style="border-radius: 10px;">
-                            <a href="https://www.cybrosys.com/odoo/industries/hotel-management-erp/"
-                               target="_blank"
-                               class="text-dark" style="text-decoration: none;">
-                                <div class="row">
-                                    <div class="col-lg-3 no-gutters">
-                                        <img src="./assets/icons/hotel.png">
-                                    </div>
-                                    <div class="col-lg-9 no-gutters pt-3">
-                                        <h4 style="font-family: Roboto, 'sans-serif">
-                                            Hotel Management</h4>
-                                        <p style="font-weight: 300;">An all-inclusive
-                                            hotel management application
-                                        </p>
-                                    </div>
-                                </div>
-                            </a>
-                        </div>
-                    </div>
-                    <!-- End of Right Column -->
-                </div>
-            </div>
-        </section>
-        <!-- End of Our Industries-->
-        <!-- Footer Section -->
-        <section class="oe_container" style="padding:2rem 3rem 1rem">
-            <div class="row" style="max-width:1540px; margin: 0 auto; ">
-                <div class="col-lg-12 mb-4">
-                    <h2 style="font-weight:600; text-align:center; margin-bottom:1rem; width:100%">
-                        Need Help?</h2>
-                    <hr
-                            style="background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;">
-                </div>
-            </div>
-
-            <!-- Contact Cards -->
-            <div class="row d-flex justify-content-center align-items-center"
-                 style="max-width:1540px; margin: 0 auto;">
-                <div class="col-lg-3  shadow mt-2"
-                     style="padding: 5rem 2rem 2rem; border-radius: 10px; margin-right: 3rem;  border-top: 7px solid #546E7A; height: 300px;">
-                    <h5 class="font-weight-bold"
-                        style="font-family: Roboto, 'sans-serif';">Visit us</h5>
-                    <p class="mb-4" style="color: #808e9b; font-size: 0.9rem;">Visit our
-                        website for more
-                        information.</p>
-                    <a href="https://cybrosys.com" target="_blank"
-                       class="btn btn-block mb-2 deep_hover"
-                       style="text-decoration: none; background-color: #546E7A; color: #FFF;  border-radius: 4px;">www.cybrosys.com</a>
-                </div>
-
-                <div class="col-lg-3  shadow mt-2"
-                     style="padding: 5rem 2rem 2rem; border-radius: 10px; margin-right: 3rem;  border-top: 7px solid #b22126; height: 330px;">
-                    <h5 class="font-weight-bold"
-                        style="font-family: Roboto, 'sans-serif';">Write to us</h5>
-                    <p class="mb-4" style="color: #808e9b; font-size: 0.9rem;">Do you
-                        have any queries regarding our
-                        products &amp; services? Let us know.</p>
-                    <a href="mailto:odoo@cybrosys.com" target="_blank"
-                       class="btn btn-block mb-2 deep_hover"
-                       style="text-decoration: none;  background-color: #b22126; color: #FFF;  border-radius: 4px;">odoo@cybrosys.com</a>
-                    <a href="mailto:info@cybrosys.com" target="_blank"
-                       class="btn btn-block deep_hover"
-                       style="text-decoration: none; background-color: #b22126; color: #FFF;  border-radius: 4px;">info@cybrosys.com</a>
-                </div>
-                <div class="col-lg-3  shadow mt-2"
-                     style="padding: 5rem 2rem 2rem; border-radius: 10px; margin-right: 3rem;  border-top: 7px solid #546E7A; height: 300px;">
-                    <h5 class="font-weight-bold"
-                        style="font-family: Roboto, 'sans-serif';">Follow Us</h5>
-                    <p class="mb-4" style="color: #808e9b; font-size: 0.9rem;">Follow us
-                        on social media for latest
-                        updates.</p>
-                    <div class="d-flex justify-content-begin align-items-center">
-                        <a href="https://www.facebook.com/cybrosystechnologies"
-                           target="_blank"
-                           class="btn mb-2 mr-2 deep_hover d-flex justify-content-center align-items-center"
-                           style="text-decoration: none; background-color:#3b5998; color: #fff; height: 35px; width: 35px;  border-radius: 4px;"><i
-                                class="fa fa-facebook"></i></a>
-
-                        <a href="https://twitter.com/cybrosys" target="_blank"
-                           class="btn mb-2 mr-2 deep_hover d-flex justify-content-center align-items-center"
-                           style="text-decoration: none; background-color:#00acee ; color: #fff ; height: 35px; width: 35px;  border-radius: 4px;"><i
-                                class="fa fa-twitter"></i></a>
-
-                        <a href="https://www.youtube.com/channel/UCKjWLm7iCyOYINVspCSanjg"
-                           target="_blank"
-                           class="btn mb-2 mr-2 deep_hover d-flex justify-content-center align-items-center"
-                           style="text-decoration: none; background-color:#FF0000 ; color: #fff ; height: 35px; width: 35px;  border-radius: 4px;"><i
-                                class="fa fa-play"></i></a>
-                        <a href="https://medium.com/cybrosys" target="_blank"
-                           class="btn mb-2 deep_hover d-flex justify-content-center align-items-center"
-                           style="text-decoration: none; background-color:#000  ; color: #fff  ; height: 35px; width: 35px;  border-radius: 4px;"><i
-                                class="fa fa-medium"></i></a>
-                    </div>
-
-                </div>
-                <!-- End of Contact Cards -->
-            </div>
-        </section>
-</div>
-<!-- Footer -->
-<section class="oe_container" style="padding:2rem 3rem 1rem;">
-    <div class="row"
-         style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
-        <!-- Logo -->
-        <div class="col-lg-12 d-flex justify-content-center align-items-center"
-             style="margin-top: 4rem;">
-            <img src="https://www.cybrosys.com/images/logo.png" width="200px"
-                 height="auto"/>
-        </div>
-        <!-- End of Logo -->
-        <div class="col-lg-12" style="margin-top: 2rem;">
-            <hr
-                    style="margin-top: 3rem;background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;">
-            <!-- End of Footer Section -->
-        </div>
-    </div>
-</section>
-
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"
-        integrity="sha512-wV7Yj1alIZDqZFCUQJy85VN+qvEIly93fIQAN7iqDFCPEucLCeNFz4r35FCo9s6WrpdDQPi80xbljXB8Bjtvcg=="
-        crossorigin="anonymous"></script>
-</body>
-
+<!--- HERO 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">We can use the below emojis in 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;">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_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;">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_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;">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_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;">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_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;">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_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;">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_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;">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_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;">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_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;">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_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;">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_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;">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_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;">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_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;">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_19.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_20.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">In the sales and invoice list view, we will have an option after selecting the records in the list view.</h6>
+      </div>
+      <img src="assets/screenshots/whatsapp_mail_messaging_21.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">We can send multiple document references to a single customer using this option,
+        we can only send documents of a single customer at a time.</h6>
+      </div>
+      <img src="assets/screenshots/whatsapp_mail_messaging_22.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="mailto:info@cybrosys.com" 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>info@cybrosys.com</a>
+        </div>
+      </div>
+    </div>
+
+  </div>
+  <!-- End of Contact Cards -->
+</section>
+<!-- Footer -->
+<section class="oe_container" style="padding: 2rem 3rem 1rem;">
+  <div class="row" style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
+    <!-- Logo -->
+    <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin-top: 3rem;">
+      <img src="https://www.cybrosys.com/images/logo.png" width="200px" height="auto" />
+    </div>
+    <!-- End of Logo -->
+    <div class="col-lg-12">
+      <hr
+        style="margin-top: 3rem;background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;">
+      <!-- End of Footer Section -->
+    </div>
+  </div>
+</section>
+<!-- END OF FOOTER -->
\ No newline at end of file
diff --git a/whatsapp_mail_messaging/static/src/css/whatsapp.css b/whatsapp_mail_messaging/static/src/css/whatsapp.css
new file mode 100644
index 000000000..91dd355b3
--- /dev/null
+++ b/whatsapp_mail_messaging/static/src/css/whatsapp.css
@@ -0,0 +1,22 @@
+.cy_whatsapp_web{
+	position:fixed;
+	width:60px;
+	height:60px;
+	bottom:40px;
+	right:40px;
+	background-color:#25d366;
+	color:#FFF;
+	border-radius:50px;
+	text-align:center;
+    font-size:30px;
+    z-index:100;
+}
+
+.cy-icon{
+	margin-top:16px;
+	color: white;
+}
+
+.fa-whatsapp {
+    color:#FFF;
+}
\ No newline at end of file
diff --git a/whatsapp_mail_messaging/views/account_move_inherited.xml b/whatsapp_mail_messaging/views/account_move_inherited.xml
new file mode 100644
index 000000000..0b745582e
--- /dev/null
+++ b/whatsapp_mail_messaging/views/account_move_inherited.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <record model="ir.ui.view" id="account_move_form_view_inherited">
+        <field name="name">account.move.form.view.inherited</field>
+        <field name="model">account.move</field>
+        <field name="inherit_id" ref="account.view_move_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//button[@name='preview_invoice']" position="after">
+                <button type="object" class="oe_stat_button" style="background-color: #25D366;color: white;"
+                        name="action_send_whatsapp" icon="fa-whatsapp" string="Send by Whatsapp"/>
+            </xpath>
+        </field>
+    </record>
+    <record model="ir.ui.view" id="account_move_list_view_inherited">
+        <field name="name">account.move.list.view.inherited</field>
+        <field name="model">account.move</field>
+        <field name="inherit_id" ref="account.view_out_invoice_tree"/>
+        <field name="arch" type="xml">
+            <xpath expr="//header" position="inside">
+                <button type="object" class="btn-primary"
+                        name="action_whatsapp_multi" icon="fa-whatsapp" string="Send by Whatsapp"/>
+            </xpath>
+        </field>
+    </record>
+</odoo>
\ No newline at end of file
diff --git a/whatsapp_mail_messaging/views/assets.xml b/whatsapp_mail_messaging/views/assets.xml
index 4edd6b3c4..adb67f750 100644
--- a/whatsapp_mail_messaging/views/assets.xml
+++ b/whatsapp_mail_messaging/views/assets.xml
@@ -7,5 +7,11 @@
                 <script type="text/javascript" src="/whatsapp_mail_messaging/static/src/js/mail_button.js"/>
             </xpath>
         </template>
+        <template id="whatsapp_assets" inherit_id="website.assets_frontend" name="Website Whatsapp">
+            <xpath expr="." position="inside">
+                <link rel="stylesheet" type="text/css"
+                      href="/whatsapp_mail_messaging/static/src/css/whatsapp.css"/>
+            </xpath>
+        </template>
     </data>
 </odoo>
\ No newline at end of file
diff --git a/whatsapp_mail_messaging/views/portal_whatsapp_view.xml b/whatsapp_mail_messaging/views/portal_whatsapp_view.xml
new file mode 100644
index 000000000..4d6264b7c
--- /dev/null
+++ b/whatsapp_mail_messaging/views/portal_whatsapp_view.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="ChatToCompany" name="Chat With Company" inherit_id="website.footer_custom">
+        <xpath expr="//div[hasclass('s_share')]" position="inside">
+            <a t-attf-href="https://api.whatsapp.com/send?phone=#{website.mobile_number}" class="cy_whatsapp_web" target="_blank">
+                <i class="fa fa-whatsapp cy-icon"/>
+            </a>
+        </xpath>
+    </template>
+</odoo>
\ No newline at end of file
diff --git a/whatsapp_mail_messaging/views/sale_order_inherited.xml b/whatsapp_mail_messaging/views/sale_order_inherited.xml
new file mode 100644
index 000000000..e8f11b92d
--- /dev/null
+++ b/whatsapp_mail_messaging/views/sale_order_inherited.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<odoo>
+    <record model="ir.ui.view" id="sale_order_form_view_inherited">
+        <field name="name">sale.order.form.view.inherited</field>
+        <field name="model">sale.order</field>
+        <field name="inherit_id" ref="sale.view_order_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//button[@name='action_quotation_send']" position="after">
+                <button type="object" class="oe_stat_button" style="background-color: #25D366;color: white;"
+                        name="action_send_whatsapp" icon="fa-whatsapp" string="Send by Whatsapp"/>
+            </xpath>
+        </field>
+    </record>
+    <record model="ir.ui.view" id="sale_order_list_view_inherited">
+        <field name="name">sale.order.list.view.inherited</field>
+        <field name="model">sale.order</field>
+        <field name="inherit_id" ref="sale.view_quotation_tree_with_onboarding"/>
+        <field name="arch" type="xml">
+            <xpath expr="//tree" position="inside">
+                <header>
+                    <button type="object" class="btn-primary"
+                            name="action_whatsapp_multi" icon="fa-whatsapp" string="Send by Whatsapp"/>
+                </header>
+            </xpath>
+        </field>
+    </record>
+</odoo>
\ No newline at end of file
diff --git a/whatsapp_mail_messaging/views/website_inherited.xml b/whatsapp_mail_messaging/views/website_inherited.xml
new file mode 100644
index 000000000..e1c00b442
--- /dev/null
+++ b/whatsapp_mail_messaging/views/website_inherited.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <record id="website_form_view" model="ir.ui.view">
+        <field name="name">website.form.inherit</field>
+        <field name="model">website</field>
+        <field name="inherit_id" ref="website.view_website_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='name']" position="after">
+                <field name="mobile_number" widget="phone"/>
+            </xpath>
+        </field>
+    </record>
+</odoo>
\ No newline at end of file
diff --git a/whatsapp_mail_messaging/wizard/__init__.py b/whatsapp_mail_messaging/wizard/__init__.py
index cfc6d34d4..028e338c4 100644
--- a/whatsapp_mail_messaging/wizard/__init__.py
+++ b/whatsapp_mail_messaging/wizard/__init__.py
@@ -19,5 +19,6 @@
 #    If not, see <http://www.gnu.org/licenses/>.
 #
 #############################################################################
-from . import wh_message_wizard
 
+from . import wh_message_wizard
+from . import portal_share
diff --git a/whatsapp_mail_messaging/wizard/portal_share.py b/whatsapp_mail_messaging/wizard/portal_share.py
new file mode 100644
index 000000000..8fcd518b2
--- /dev/null
+++ b/whatsapp_mail_messaging/wizard/portal_share.py
@@ -0,0 +1,65 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2020-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Sayooj A O(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+
+import urllib.parse as urllib
+
+from odoo import models, fields, api
+
+
+class PortalShare(models.TransientModel):
+    _inherit = 'portal.share'
+
+    share_type = fields.Selection([
+        ('mail', 'Mail'),
+        ('whatsapp', 'Whatsapp')], string="Sharing Method", default="mail")
+    mobile_number = fields.Char()
+    partner_id = fields.Many2one('res.partner', string='Customer')
+
+    @api.onchange('partner_id')
+    def _onchange_partner_id(self):
+        self.mobile_number = self.partner_id.mobile
+
+    def action_send_whatsapp(self):
+        """"""
+        """In this function we are redirecting to the whatsapp web
+                with required parameters"""
+        if self.note and self.mobile_number:
+            if self.res_model == 'sale.order':
+                common_message = 'You have been invited to access the following Sale Order.'
+            elif self.res_model == 'account.move':
+                common_message = 'You have been invited to access the following Invoice.'
+            elif self.res_model == 'purchase.order':
+                common_message = 'You have been invited to access the following Purchase.'
+            else:
+                common_message = 'You have been invited to access the following Document.'
+            message_string = self.note + '%0a' + common_message + '%0a' + urllib.quote(self.share_link)
+            related_record = self.env[self.res_model].search([('id', '=', int(self.res_id))])
+            related_record.message_post(body=message_string)
+            return {
+                'type': 'ir.actions.act_url',
+                'url': "https://api.whatsapp.com/send?phone=" + self.mobile_number + "&text=" + message_string,
+                'target': 'new',
+                'res_id': self.id,
+            }
+
+
+
diff --git a/whatsapp_mail_messaging/wizard/portal_share_inherited.xml b/whatsapp_mail_messaging/wizard/portal_share_inherited.xml
new file mode 100644
index 000000000..9672b8c4f
--- /dev/null
+++ b/whatsapp_mail_messaging/wizard/portal_share_inherited.xml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Product Template -->
+    <record id="view_portal_share_form_inherit" model="ir.ui.view">
+        <field name="name">view.portal.share.form.inherit</field>
+        <field name="model">portal.share</field>
+        <field name="inherit_id" ref="portal.portal_share_wizard"/>
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='share_link']" position="before">
+                <field name="share_type" widget="radio"/>
+            </xpath>
+            <xpath expr="//button[@name='action_send_mail']" position="replace">
+                <button string="Send" name="action_send_mail"
+                        attrs="{'invisible': ['|',('access_warning', '!=', ''),('share_type', '=', 'whatsapp')]}"
+                        type="object" class="btn-primary"/>
+            </xpath>
+            <xpath expr="//button[@name='action_send_mail']" position="after">
+                <button string="Send" name="action_send_whatsapp"
+                        attrs="{'invisible': ['|',('access_warning', '!=', ''),('share_type', '=', 'mail')]}"
+                        type="object" class="oe_highlight" icon="fa-whatsapp"/>
+            </xpath>
+            <xpath expr="//field[@name='partner_ids']" position="replace">
+                <field name="partner_ids" widget="many2many_tags_email"
+                       attrs="{'invisible': [('share_type', '=', 'whatsapp')],'required': [('share_type','==','mail')]}"
+                       placeholder="Add contacts to share the document..."/>
+            </xpath>
+            <xpath expr="//field[@name='share_link']" position="after">
+                <field name="partner_id"
+                       attrs="{'invisible': [('share_type', '=', 'mail')],'required': [('share_type','==','whatsapp')]}"/>
+                <field name="mobile_number"
+                       attrs="{'invisible': [('share_type', '=', 'mail')],'required': [('share_type','==','whatsapp')]}"/>
+            </xpath>
+            <xpath expr="//field[@name='note']" position="replace">
+                <field name="note" placeholder="Add a note" widget="text_emojis"
+                       attrs="{'required': [('share_type','==','whatsapp')]}"/>
+            </xpath>
+        </field>
+    </record>
+</odoo>
\ No newline at end of file
diff --git a/whatsapp_mail_messaging/wizard/wh_message_wizard.py b/whatsapp_mail_messaging/wizard/wh_message_wizard.py
index 1777f8130..96cec17c0 100644
--- a/whatsapp_mail_messaging/wizard/wh_message_wizard.py
+++ b/whatsapp_mail_messaging/wizard/wh_message_wizard.py
@@ -47,6 +47,8 @@ class WhatsappSendMessage(models.TransientModel):
             for msg in message:
                 message_string = message_string + msg + '%20'
             message_string = message_string[:(len(message_string) - 3)]
+            message_post_content = message_string
+            self.partner_id.message_post(body=message_post_content)
             return {
                 'type': 'ir.actions.act_url',
                 'url': "https://api.whatsapp.com/send?phone=" + self.mobile + "&text=" + message_string,