Jun 21 : [ADD] Initial Commit 'animated_snippet'

animated_snippet/README.rst

@@ -0,0 +1,47 @@
+.. image:: https://img.shields.io/badge/licence-LGPL--3-blue.svg
+    :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
+    :alt: License: LGPL-3
+
+Animated Snippets
+=================
+* Variety of animated snippets for the website.
+
+Installation
+============
+	- www.odoo.com/documentation/16.0/setup/install.html
+	- Install our custom addon
+
+License
+-------
+General Public License, Version 3 (LGPL v3).
+(https://www.odoo.com/documentation/user/16.0/legal/licenses/licenses.html)
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+Credits
+-------
+* Developer:
+Harshad(v16) @ cybrosys
+
+Contacts
+--------
+* Mail Contact : odoo@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 https://www.cybrosys.com
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__
+

animated_snippet/__init__.py

@@ -0,0 +1,21 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Ahammed Harshad(<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/>.
+#
+#############################################################################

animated_snippet/__manifest__.py

@@ -0,0 +1,76 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Ahammed Harshad(<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/>.
+#
+#############################################################################
+{
+    'name': "Animated Snippets",
+    'version': '16.0.1.0.0',
+    'summary': """Animated Snippets for Websites.""",
+    'description': """Variety of Snippets With Animations to Beautify your Website.""",
+    'author': "Cybrosys Techno Solutions",
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'category': 'Website',
+    'website': "https://www.cybrosys.com",
+    'depends': ['base', 'website', 'web_editor'],
+    'data': [
+        'views/snippets/snippets.xml',
+        'views/snippets/a_features_01_templates.xml',
+        'views/snippets/a_columns_templates.xml',
+        'views/snippets/a_image_gallery_templates.xml',
+        'views/snippets/a_features_02_templates.xml',
+        'views/snippets/a_features_03_templates.xml',
+        'views/snippets/a_features_04_templates.xml',
+        'views/snippets/a_color_blocks_templates.xml',
+        'views/snippets/a_features_05_templates.xml',
+        'views/snippets/a_features_06_templates.xml',
+        'views/snippets/a_features_07_templates.xml',
+        'views/snippets/a_features_templates.xml',
+        'views/snippets/a_showcase_templates.xml',
+        'views/snippets/a_features_08_templates.xml',
+        'views/snippets/a_features_09_templates.xml',
+        'views/snippets/a_numbers_templates.xml',
+        'views/snippets/a_product_list_templates.xml',
+    ],
+    'assets': {
+        'web.assets_frontend': [
+            '/animated_snippet/static/src/css/a_features.css',
+            '/animated_snippet/static/src/css/a_color_blocks.css',
+            '/animated_snippet/static/src/css/a_columns.css',
+            '/animated_snippet/static/src/css/a_features_01.css',
+            '/animated_snippet/static/src/css/a_features_02.css',
+            '/animated_snippet/static/src/css/a_features_03.css',
+            '/animated_snippet/static/src/css/a_features_04.css',
+            '/animated_snippet/static/src/css/a_features_05.css',
+            '/animated_snippet/static/src/css/a_features_06.css',
+            '/animated_snippet/static/src/css/a_features_07.css',
+            '/animated_snippet/static/src/css/a_features_08.css',
+            '/animated_snippet/static/src/css/a_features_09.css',
+            '/animated_snippet/static/src/css/a_image_gallery.css',
+            '/animated_snippet/static/src/css/a_numbers.css',
+            '/animated_snippet/static/src/css/a_product_list.css',
+            '/animated_snippet/static/src/css/a_showcase.css',
+        ]},
+    'images': ['static/description/banner.png'],
+    'license': 'LGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

animated_snippet/doc/RELEASE_NOTES.md

@@ -0,0 +1,7 @@
+## Module <animated_snippet>
+
+#### 12.06.2023
+#### Version 16.0.1.0.0
+#### ADD
+
+- Initial Commit for Animated Snippets

animated_snippet/static/description/index.html

@@ -0,0 +1,542 @@
+<!-- HERO -->
+<div class="container shadow  style=" margin-left:calc(-42vw + 50%); width:84vw"">
+<div class="row"
+     style="padding: 4rem 2.5rem 0 !important; background-color: #fff !important;">
+    <div class="col-lg-12 d-flex flex-column align-items-center">
+        <h1 class="text-center text-uppercase"
+            style="font-family: Montserrat, 'sans-serif' !important; font-size: 67px !important; color: #791d97; font-weight: 900 !important;">
+            <span style="color:#5154a5;">Animated  </span> Snippets <sup>
+        </h1>
+        <p class="my-1 text-center text-uppercase"
+           style="letter-spacing: 4px !important; color: #74788D !important;">
+            Animated Snippets for your Website.</p>
+    </div>
+
+
+    <div class="col-lg-12 d-flex flex-column justify-content-center">
+        <p class="my-1 text-center"
+           style="font-family: Montserrat, 'sans-serif' !important; color: #212121 !important;">
+            This module is useful for making a webpage more beautiful.
+            Make your Website More interactive by adding different animated snippets
+            which can attract user attention and create a better user experience.
+        </p>
+    </div>
+
+
+    <div class="col-lg-12 d-flex justify-content-center align-items-center"
+         style="margin: 2rem 0;">
+        <img src="./assets/cybro-odoo.png" width="100%" height="auto" style="width:50%;"
+             class="img-responsive">
+    </div>
+
+
+    <div class="col-md-12 text-center ">
+        <a href="mailto:odoo@cybrosys.com" target="_blank"
+           style="background-color:#5154a5; border-radius:35px; font-family:Montserrat; display:inline-block; padding:7px 33px; border:1px solid #5154a5"
+           class="mx-1 mb-2 deep-1 deep_hover">
+            <img class="img" style="width:30px" src="assets/misc/support.png">
+            <span class="pl-2" style="color:#fff; font-size:16px; vertical-align:middle">Email Us</span>
+        </a>
+        <a href="https://api.whatsapp.com/send?phone=918606827707" target="_blank"
+           style="background-color:#7f289b; font-family:Montserrat; display:inline-block; padding:7px 33px; border:1px solid #7f289b; border-radius:35px"
+           class="mx-1 mb-2 deep-1 deep_hover">
+            <img class="img" style="width:27px" src="assets/misc/whatsapp.png">
+            <span class="pl-2" style="color:#fff; font-size:16px; vertical-align:middle">What's App</span>
+        </a>
+    </div>
+
+    <div class="pb32 pt-3" style="display:block; margin:0 auto; text-align:center"></div>
+
+</div>
+</div>
+<!-- END OF HERO -->
+
+<!-- Start OF slide -->
+
+
+<div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+    <img src="assets/h2.png" width="100%" height="auto" class="img-responsive">
+</div>
+
+
+<!-- END OF slide -->
+
+
+<!-- New section -->
+
+<div class="container shadow  style=" margin-left:calc(-42vw + 50%); width:84vw"">
+<div class="row"
+     style="background-color: #fff !important;">
+
+
+    <div class="col-md-12  tab-content ui-front shadow"
+         style="border-top-right-radius:15px;border-bottom-right-radius:15px;background-color:#fffafa;height:auto;">
+        <div class="tab-pane fade active show" id="screenshot-1" role="tabpanel" aria-labelledby="screenshot-1">
+
+
+            <div class="row" style="padding:4rem 2.5rem 0 !important; background-color:#fff !important">
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h1 class="text-center text-uppercase"
+                        style="font-family:Montserrat, 'sans-serif' !important; font-size:40px !important; color:#791d97; font-weight:900 !important">
+                        <span style="color:#5154a5">Features </span> <sup>
+                    </sup></h1>
+                    <p class="my-1 text-center text-uppercase"
+                       style="letter-spacing:4px !important; color:#74788D !important">
+                        Variety of Animated
+                        Snippet in Website.</p>
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 01</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_01.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 02</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_02.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 03</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_03.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 04</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_04.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 05</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_05.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 06</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_06.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 07</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_07.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 08</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_08.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 09</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_09.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 10</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_10.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 11</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_11.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 12</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_12.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 13</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_13.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 14</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_14.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 15</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_15.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+                <div class="col-lg-12 d-flex flex-column align-items-center">
+                    <h3 class="mt16 mb0" style="font-family:Roboto; font-weight:500; font-size:22px; color:#781d96">
+                        SNIPPET 16</h3>
+                </div>
+                <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin:2rem 0">
+                    <img src="assets/screenshots/snippet_16.gif"
+                         class="img img-responsive center-block shadow-lg"
+                         style="width: 100%; margin-left: auto; margin-right: auto;">
+                </div>
+            </div>
+
+
+        </div>
+
+
+    </div>
+
+
+</div>
+</div>
+
+
+<!-- New section -->
+
+
+<!--Video Demo-->
+
+
+<section>
+
+    <div class="d-flex align-items-center" style="border-bottom:2px solid #714B67; padding:15px 0px">
+        <div class="d-flex justify-content-center align-items-center mr-2"
+             style="background-color:#F5F5F5; border-radius:0px; width:40px; height:40px">
+            <img src="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/misc/star.png?aedef96">
+        </div>
+        <h2 class="mt-2" style="font-family:'Montserrat', sans-serif; font-size:24px; font-weight:bold">Our Services
+        </h2>
+    </div>
+
+
+    <div class="container my-5">
+        <div class="row">
+            <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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/cogs.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/wrench.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/lifebuoy.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/user.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/puzzle.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/update.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/consultation.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/training.png?aedef96"
+                         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="//apps.odoocdn.com/apps/assets/16.0/export_stockinfo_xls/assets/icons/license.png?aedef96"
+                         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>
+    </div>
+
+
+</section>
+
+
+<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 style="color:#212529 !important">Our Industries</h2>
+            <hr style="border:3px solid #714B67 !important; background-color:#714B67 !important; width:80px !important; margin-bottom:2rem !important">
+        </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="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/trading-black.png?2d98612"
+                     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="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/pos-black.png?2d98612"
+                     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="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/education-black.png?2d98612"
+                     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="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/manufacturing-black.png?2d98612"
+                     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="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/ecom-black.png?2d98612"
+                     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="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/service-black.png?2d98612"
+                     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="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/restaurant-black.png?2d98612"
+                     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="//apps.odoocdn.com/apps/assets/15.0/combo_product_pos/assets/icons/hotel-black.png?2d98612"
+                     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>
+
+
+<!-- FOOTER -->
+<!-- Footer Section -->
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-sm-12 col-md-12-col-lg-2">
+            <h2 style="font-weight:bold; color:#3D3D4E">Support</h2>
+            <p style="color:#777783">Need help? Get in touch.
+            </p>
+            <hr>
+        </div>
+        <div class="col-sm-12 col-md-6">
+            <div class="d-flex align-items-center" style="background-color:#F6F8F9; padding:30px">
+                <div class="mr-4 d-flex justify-content-center align-items-center"
+                     style="background-color:#714B67; height:70px; width:70px">
+                    <img src="assets/misc/support.png" height="48" width="48" style="width:42px; height:42px">
+                </div>
+                <div>
+                    <h4>Need Help?</h4>
+                    <p style="line-height:100%">Got questions or need help? Get in touch.</p>
+                    <a href="mailto:odoo@cybrosys.com">
+                        <p style="font-weight:400; font-size:28px; line-height:80%; color:#714B67">
+                            odoo@cybrosys.com</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-12 col-md-6">
+            <div class="d-flex align-items-center" style="background-color:#F6F8F9; padding:30px">
+                <div class="mr-4 d-flex justify-content-center align-items-center"
+                     style="background-color:#2AC44D; height:70px; width:70px">
+                    <img src="assets/misc/whatsapp.png" height="52" width="52" style="width:52px; height:52px">
+                </div>
+                <div>
+                    <h4>WhatsApp</h4>
+                    <p style="line-height:100%">Say hi to us on WhatsApp!</p>
+                    <span href="https://api.whatsapp.com/send?phone=918606827707">
+                <p style="font-weight:400; font-size:28px; line-height:80%; color:#714B67">+91
+                  86068
+                  27707</p>
+              </span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+<!-- Footer -->
+<section class="oe_container"
+         style="padding: 2rem 3rem 1rem; background-color: #fff !important;">
+    <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>
+</section>
+<!-- END OF FOOTER -->
+</div>

animated_snippet/static/src/css/a_color_blocks.css

@@ -0,0 +1,36 @@
+@keyframes anim_icon_007{
+   0% {transform: rotateY(0deg);}
+   50% {transform: rotateY(180deg) translateY(-25px); scale: 1.5;}
+   100% {transform: rotateY(0deg) translateY(-35px); scale: 1.0;}
+}
+.block_007{padding: 8% 5%;}
+.a_snippet_007{
+    scale: 1.3;
+}
+.a_icon_007, .head_007, .p_007, .btn007{
+    transition: 850ms;
+}
+.block_007:hover > .a_icon_007{
+    animation-name: anim_icon_007;
+    animation-duration: 1200ms;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-out;
+    transform: translateY(-35px);
+}
+.block_007:hover .head_007{
+    position: relative;
+    transform: translateY(-35px);
+    scale: 1.3;
+}
+.btn007{
+    opacity: 0;
+}
+.p_007{
+    text-align: center;
+}
+.block_007:hover .p_007{
+    transform: translateY(-20px);
+    scale: 1.15;
+}.block_007:hover .btn007{
+    opacity: 1;
+}

animated_snippet/static/src/css/a_columns.css

@@ -0,0 +1,22 @@
+.o_text_002{
+      position: absolute;
+      padding: 15px;
+      background: linear-gradient(0deg, #fff0 65%, #000 90%);
+      color: transparent;
+      transition: 850ms
+    }
+.o_text_002:hover{
+      position: absolute;
+      padding: 15px;
+      background: linear-gradient(0deg, #fff0 -3%, #000 70%);
+      color: #fff;
+    }
+.o_img_002{ transition: 850ms;}
+.o_img_002:hover{transform: scale(1.1);}
+.o_img_002:hover+.o_text_002{
+      position: absolute;
+      padding: 15px;
+      background: linear-gradient(0deg, #fff0 -3%, #000 70%);
+      color: #fff;
+      z-index: 2 !important;
+      }

animated_snippet/static/src/css/a_features.css

@@ -0,0 +1,18 @@
+.o_box_011{
+    margin-bottom: 20px;
+    padding: 5px;
+}
+
+.a_snippet_011{
+    float: left;
+}
+.md-7-011{
+    transition: 250ms;
+    padding: 5px;
+    height: 97px;
+    border-radius: 5px;
+}
+.o_box_011:hover > .md-7-011{
+    background: var(--o-color-5);
+    color: var(--o-color-3);
+}

animated_snippet/static/src/css/a_features_01.css

@@ -0,0 +1,12 @@
+.a_snippet_001{
+      transition: 850ms;
+    }
+.o_box_001{
+      transition: 300ms;
+    }
+.o_box_001:hover{
+      box-shadow :1px 1px 22px 14px #d5d5d5 !important;
+}
+.o_box_001:hover .a_snippet_001{
+      opacity: 1;
+    }

animated_snippet/static/src/css/a_features_02.css

@@ -0,0 +1,29 @@
+@keyframes arc_rotate{
+   0% {transform: rotate(0deg);}
+   100% {transform: rotate(360deg);}
+}
+.arc{
+    border: 4px solid var(--o-color-2)  ;
+    display: inline-block;
+    border-radius: 50%;
+    border-right-color: transparent;
+    margin-bottom: 30px;
+    transition: 950ms;
+}
+.o_box_004{
+    margin-top: 35px;
+    transition: 450ms;
+}
+.o_box_004:hover{
+    box-shadow: 0px 0px 25px 0px;
+    border-radius: 5px 90px 5px 90px;
+}
+.o_box_004:hover > .arc{
+    animation-name: arc_rotate;
+    animation-duration: 5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    }
+.p_004{
+    text-align: center;
+}

animated_snippet/static/src/css/a_features_03.css

@@ -0,0 +1,50 @@
+.o_box_005{
+    margin-top: 35px;
+    box-shadow: 0px 0px 0px 1px;
+    border-radius: 5px 5px 5px 5px;
+    transition: 650ms;
+    margin: 10px
+}
+.o_box_005:hover{
+        border-radius: 10px 10px 10px 10px;
+        box-shadow: 0px 3px 0px 0px;
+}
+.a_snippet_005{
+        position: relative;
+        top: 60px;
+        transition: 650ms;
+        }
+.a_header{
+    position: relative;
+    top: 80px;
+    transition: 650ms;
+}
+.line{
+    height: 2px;
+    width: 2px;
+    opacity: 0;
+    transition: 950ms;
+}
+.p_005{
+    position: relative;
+    top: -60px;
+    text-align: center;
+    opacity: 0  ;
+    transition: 550ms;
+}
+.o_box_005:hover .a_snippet_005{
+        transform: translateY(-90px);
+        scale: 0.8;
+        }
+.o_box_005:hover .a_header{
+        transform: translateY(-90px);
+        }
+.o_box_005:hover .line{
+    height: 2px;
+    width: auto;
+    opacity:1;
+}
+.o_box_005:hover .p_005{
+    opacity:1;
+    transform: translateY(65px);
+}

animated_snippet/static/src/css/a_features_04.css

@@ -0,0 +1,32 @@
+@keyframes circle_rotate{
+   0% {transform: rotateY(0deg);}
+   100% {transform: rotateY(360deg);}
+}
+.circle{
+    border: 4px solid var(--o-color-2);
+    display: inline-block;
+    border-radius: 50%;
+    margin-bottom: 30px;
+    transition: 950ms;
+    scale: 0.8;
+}
+.a_snippet_006{
+    scale: 1.3;
+}
+.o_box_006{
+    margin-top: 35px;
+    border-radius: 20px 20px 0px 0px;
+    transition: 450ms;
+}
+.o_box_006:hover{
+    background-image: linear-gradient(180deg, var(--o-color-5) -110%,  transparent);
+}
+.circle{
+    animation-name: circle_rotate;
+    animation-duration: 3s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    }
+.p_006{
+    text-align: center;
+}

animated_snippet/static/src/css/a_features_05.css

@@ -0,0 +1,22 @@
+.a_snippet_008{
+    position: relative;
+    right: 40%;
+    bottom: 40%;
+    transition: 850ms;
+    height: 4rem;
+}
+.o_box_008{
+    margin-top: 5%;
+    margin-bottom: 5%;
+    opacity: 75%;
+    transition: 650ms;
+}
+.o_box_008:hover > .a_snippet_008{
+    transform: translateX(160%);
+}
+.o_box_008:hover{
+    opacity: 100%;
+}
+.p_008{
+    text-align: center;
+}

animated_snippet/static/src/css/a_features_06.css

@@ -0,0 +1,37 @@
+.o_box_009{
+    margin-top: 35px;
+    border-radius: 10px;
+    transition: 650ms;
+    margin: 10px;
+    padding: 0px !important;
+    background-color: var(--o-color-5);
+    color: var(--o-cc2-btn-secondary-text);
+}
+.o_box_009:hover{
+    background-color: var(--o-color-2);
+}
+.corner009{
+    position: relative;
+    width: 2em;
+    border-radius: 0px 0px 10px 0px;
+    height: 2em;
+    opacity: 0;
+    background-color: var(--o-color-5);
+    transition: 650ms;
+}
+.corner009-triangle{
+    position: absolute;
+    width: 0;
+    height: 0;
+    rotate: -90deg;
+    border-style: solid;
+    border-width: 0 2em 2em 0px;
+    border-color: transparent var(--o-color-3) transparent transparent;
+}
+.o_box_009:hover > .corner009{
+    opacity:1;
+}
+.p_009{
+    text-align: center;
+    transition: 550ms;
+}

animated_snippet/static/src/css/a_features_07.css

@@ -0,0 +1,33 @@
+.o_box_010{
+    margin-top: 35px;
+    border-radius: 10px;
+    transition: 650ms;
+    margin: 10px;
+    padding: 0px;
+    color: var(--o-cc2-btn-primary-text);
+}
+.btn010{
+    border-width: 3px;
+}
+.a_icon_010{ color: var(--o-color-2); }
+.circle010{
+    border: 4px solid var(--o-color-2);
+    display: inline-block;
+    border-radius: 50%;
+    margin-bottom: 30px;
+    transition: 350ms;
+}
+.o_box_010:hover > .circle010{
+    background: var(--o-color-2);
+}
+.o_box_010:hover .a_icon_010{
+    color: var(--o-color-3);
+}
+.o_box_010:hover .btn010{
+    background: var(--o-color-3);
+    color: var(--o-cc1-btn-primary);
+}
+.p_010{
+    text-align: center;
+    color: var(--o-color-5);
+}

animated_snippet/static/src/css/a_features_08.css

@@ -0,0 +1,25 @@
+.circle013{
+    border: 25px solid var(--o-color-2);
+    display: inline-block;
+    border-radius: 50%;
+    margin-bottom: 30px;
+    background: var(--o-color-2);
+}
+.a_snippet_013{
+    transition: 650ms;
+}
+.btn013{
+    opacity: 0;
+    transition: 650ms;
+    transform: rotateX(90deg);
+}
+.o_box_013:hover .a_snippet_013{
+    transform: rotateY(180deg);
+}
+.o_box_013:hover .btn013{
+    transform: rotateY(0deg);
+    opacity: 1;
+}
+.o_box_013:hover .header_013{
+    color: var(--o-color-1);
+}

animated_snippet/static/src/css/a_features_09.css

@@ -0,0 +1,30 @@
+.circle014{
+    border: 5px solid var(--o-color-2);
+    display: inline-block;
+    border-radius: 50%;
+    margin-bottom: 10px;
+    background: var(--o-color-2);
+}
+.o_box_014{
+    padding: 10px;
+}
+.a_snippet_014{
+    scale:0.8;
+    transition: 650ms;
+    transition-timing-function: cubic-bezier(0.30, 1.1, 0.77, 1);
+}
+.a_box_014{
+    padding: 25px;
+    box-shadow: 0px 5px 15px -5px var(--o-color-5);
+    border-radius: 15px;
+    transition: 650ms;
+}
+.a_box_014:hover{
+    transform: translateY(-10px);
+    background: var(--o-color-5);
+    color: var(--o-color-4);
+    box-shadow: 0px 0px 0px 0px;
+}
+.a_box_014:hover .a_snippet_014{
+    transform: rotate(360deg);
+}

animated_snippet/static/src/css/a_image_gallery.css

@@ -0,0 +1,21 @@
+.o_img_003{
+      border-radius: 50%;
+      transform: scaleY(1.5);
+      scale: 0.2;
+      margin-left: 100px;
+      transition: 850ms;
+    }
+.o_img_div_003:hover > .o_img_003{
+      border-radius: 0%;
+      margin-left: 0px;
+      scale: 0.5;
+      transform: scale(2.0);
+    }
+.o_img_div_003:hover{
+      background-color: #403e400a;
+}
+.head_003{
+    margin-bottom: -70px;
+    padding: 20px;
+    color
+}

animated_snippet/static/src/css/a_numbers.css

@@ -0,0 +1,17 @@
+@keyframes animate_number{
+    0% {transform:translateY(0px); scale: 1.0;}
+    10% {transform:translateY(0px); scale: 1.0;}
+    20% {transform:translateY(0px); scale: 1.0;}
+    50% {transform:translateY(-15px); scale: 1.3;}
+    70% {transform:translateY(0px); scale: 1.0;}
+    100% {transform:translateY(0px); scale: 1.0;}
+}
+#a_number{
+    animation-name: animate_number;
+    animation-duration: 5s;
+    animation-iteration-count: infinite;
+}
+.a_number1{ animation-delay: 1s; transition: 250ms;}
+.a_number2{ animation-delay: 4s; transition: 250ms;}
+.a_number3{ animation-delay: 2s; transition: 250ms;}
+.a_number4{ animation-delay: 3s; transition: 250ms;}

animated_snippet/static/src/css/a_product_list.css

@@ -0,0 +1,20 @@
+.a_img_list, .a_product_btn{
+   transition: 850ms;
+}
+.a_product_list{
+    padding-top: 20px;
+}
+.a_product_list_item_link{
+    top: auto;
+    left: 10%;
+    bottom: 0;
+    right: 10%;
+}
+.a_item:hover .a_img_list{
+    scale: 1.2;
+    box-shadow: 0px 15px 35px -10px;
+}
+.a_item:hover .a_product_btn{
+    background: var(--o-color-2);
+    color: var(--o-color-3);
+}

animated_snippet/static/src/css/a_showcase.css

@@ -0,0 +1,32 @@
+@keyframes anim_icon_012{
+   0% {transform: rotateY(0deg);}
+   50% {transform: translateY(-10px); scale: 1.5;}
+   100% {transform: translateY(0px); scale: 1.0;}
+}
+.b_012{
+    border-right-style: solid;
+    height: 0%;
+    opacity: 0;
+    transition: 350ms;
+    transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
+}
+.a_012_icon-right{
+    margin-left: 5%;
+}
+.a_012_icon-left{
+    margin-right: 5%;
+}
+.p_012{
+    float: right;
+}
+
+.a_012:hover .b_012{
+    opacity:1;
+    height: 100%;
+}
+.a_box_012:hover .a_012{
+    animation-name: anim_icon_012;
+    animation-duration: 550ms;
+    animation-iteration-count: 1;
+    animation-timing-function: cubic-bezier(0.1, -0.3, 0.35, -0.03);
+}

animated_snippet/views/snippets/a_color_blocks_templates.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Big boxes snippet template -->
+    <template id="a_color_blocks" name="Big Boxes">
+        <section class="a_color_blocks">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-lg-6 o_cc o_cc3 text-center block_007">
+                        <i class="fa fa-shield fa-5x m-3 a_icon_007"/>
+                        <h2 class="head_007">A color block</h2>
+                        <p class="p_007">Color blocks are a simple and effective way to <b>present and highlight your
+                            content</b>. Choose an image or a color for the background. You can even resize and
+                            duplicate the blocks to create your own layout. Add images or icons to customize the blocks.
+                        </p>
+                        <a href="#" class="btn btn-primary mb-2 btn007">More Details</a>
+                    </div>
+                    <div class="col-lg-6 o_cc o_cc5 text-center block_007">
+                        <i class="fa fa-cube fa-5x m-3 a_icon_007"/>
+                        <h2 class="head_007">Another color block</h2>
+                        <p class="p_007">Color blocks are a simple and effective way to <b>present and highlight your
+                            content</b>. Choose an image or a color for the background. You can even resize and
+                            duplicate the blocks to create your own layout. Add images or icons to customize the blocks.
+                        </p>
+                        <a href="#" class="btn btn-primary mb-2 btn007">More Details</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_columns_templates.xml

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Columns snippet template -->
+    <template id="a_columns" name="Columns">
+        <section class="a_columns o_cc o_cc2 pt32 pb32" data-vcss="001">
+            <div class="container">
+                <div class="row d-flex align-items-stretch">
+                    <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
+                        <div class="card text-bg-white h-100">
+                            <img class="card-img-top o_img_002" src="/web/image/website.s_three_columns_default_image_1"
+                                 alt=""/>
+                            <div class="o_text_002">
+                                <h3 class="card-title head_002">Feature One</h3>
+                                <p class="card-text">Adapt these three columns to fit your design need. To duplicate,
+                                    delete or move columns, select the column and use the top icons to perform your
+                                    action.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
+                        <div class="card text-bg-white h-100">
+                            <img class="card-img-top o_img_002" src="/web/image/website.s_three_columns_default_image_2"
+                                 alt=""/>
+                            <div class="o_text_002">
+                                <h3 class="card-title head_002">Feature Two</h3>
+                                <p class="card-text">To add a fourth column, reduce the size of these three columns
+                                    using the right icon of each block. Then, duplicate one of the columns to create a
+                                    new one as a copy.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
+                        <div class="card text-bg-white h-100">
+                            <img class="card-img-top o_img_002" src="/web/image/website.s_three_columns_default_image_3"
+                                 alt=""/>
+                            <div class="o_text_002">
+                                <h3 class="card-title head_002">Feature Three</h3>
+                                <p class="card-text">Delete the above image or replace it with a picture that
+                                    illustrates your message. Click on the picture to change its <em>rounded corner</em> style.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_features_01_templates.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Features 01 snippet template -->
+    <template id="a_features_01" name="Features 01">
+        <section class="pt32 pb32">
+            <div class="container">
+                <div class="row o_snippet_001">
+                    <div class="col-lg-4 pt32 pb32 text-center o_box_001">
+                        <i class="fa fa-3x fa-gear rounded bg-primary m-3 a_snippet_001"/>
+                        <h3>First Feature</h3>
+                        <p>Tell what's the value for the<br/>customer for this feature.
+                        </p>
+                    </div>
+                    <div class="col-lg-4 pt32 pb32 text-center o_box_001">
+                        <i class="fa fa-3x fa-photo rounded bg-o-color-5 m-3 a_snippet_001"/>
+                        <h3>Second Feature</h3>
+                        <p>Write what the customer would like to know,<br/>not what you want to show.
+                        </p>
+                    </div>
+                    <div class="col-lg-4 pt32 pb32 text-center o_box_001">
+                        <i class="fa fa-3x fa-leaf rounded bg-secondary m-3 a_snippet_001"/>
+                        <h3>Third Feature</h3>
+                        <p>A small explanation of this great<br/>feature, in clear words.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_features_02_templates.xml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Features 02 snippet template -->
+    <template id="a_features_02" name="Features 02">
+        <section class="a_features_02 o_cc2 o_spc-small o_masonry pt24 pb24" style="overflow: hidden;">
+            <div class="container">
+                <h1 class="text-center">
+                    <font style="font-size: 42px;margin-bottom: 25px;">Your Title</font>
+                </h1>
+                <p class="p_004">Tell what's the value for the customer for this feature.</p>
+                <div class="row o_snippet_004">
+                    <div class="col-lg-3 pt32 pb32 text-center o_box_004">
+                        <div class="arc">
+                            <i class="fa fa-2x fa-gear rounded-circle bg-o-color-5 m-3 a_snippet_004"/>
+                        </div>
+                        <h3>First Feature</h3>
+                        <p class="p_004">Tell what's the value for the<br/>customer for this feature.
+                        </p>
+                    </div>
+                    <div class="col-lg-3 pt32 pb32 text-center o_box_004">
+                        <div class="arc">
+                            <i class="fa fa-2x fa-photo rounded-circle bg-o-color-5 m-3 a_snippet_004"/>
+                        </div>
+                        <h3>Second Feature</h3>
+                        <p class="p_004">Write what the customer would like to know,<br/>not what you want to show.
+                        </p>
+                    </div>
+                    <div class="col-lg-3 pt32 pb32 text-center o_box_004">
+                        <div class="arc">
+                            <i class="fa fa-2x fa-leaf rounded-circle bg-o-color-5 m-3 a_snippet_004"/>
+                        </div>
+                        <h3>Third Feature</h3>
+                        <p class="p_004">A small explanation of this great<br/>feature, in clear words.
+                        </p>
+                    </div>
+                    <div class="col-lg-3 pt32 pb32 text-center o_box_004">
+                        <div class="arc">
+                            <i class="fa fa-2x fa-rocket rounded-circle bg-o-color-5 m-3 a_snippet_004"/>
+                        </div>
+                        <h3>Fourth Feature</h3>
+                        <p class="p_004">A small explanation of this great<br/>feature, in clear words.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_features_03_templates.xml

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Features 03 snippet template -->
+    <template id="a_features_03" name="Features 03">
+        <section class="a_features_03 o_spc-small o_masonry o_cc2 pt24 pb24" style="overflow: hidden;">
+            <div class="container">
+                <h1 class="text-center">
+                    <font style="font-size: 42px;">Your Title</font>
+                </h1>
+                <p style="text-align: center;">Tell what's the value for the customer for this feature.</p>
+                <div class="row o_snippet_005">
+                    <div class="col  pb32 text-center o_box_005">
+                        <i class="fa fa-2x fa-gear rounded-circle bg-o-color-5 m-3 a_snippet_005"/>
+                        <div class="a_header">
+                            <h4>First Feature</h4>
+                        </div>
+                        <div class="line bg-o-color-5"/>
+                        <p class="p_005">Tell what's the value for the<br/>customer for this feature.
+                        </p>
+                    </div>
+                    <div class="col pb32 text-center o_box_005">
+                        <i class="fa fa-2x fa-photo rounded-circle bg-o-color-5 m-3 a_snippet_005"/>
+                        <div class="a_header">
+                            <h4>Second Feature</h4>
+                        </div>
+                        <div class="line bg-o-color-5"/>
+                        <p class="p_005">Write what the customer would like to know,<br/>not what you want to show.
+                        </p>
+                    </div>
+                    <div class="col pb32 text-center o_box_005">
+                        <i class="fa fa-2x fa-leaf rounded-circle bg-o-color-5 m-3 a_snippet_005"/>
+                        <div class="a_header">
+                            <h4>Third Feature</h4>
+                        </div>
+                        <div class="line bg-o-color-5"/>
+                        <p class="p_005">A small explanation of this great<br/>feature, in clear words.
+                        </p>
+                    </div>
+                    <div class="col pb32 text-center o_box_005">
+                        <i class="fa fa-2x fa-rocket rounded-circle bg-o-color-5 m-3 a_snippet_005"/>
+                        <div class="a_header">
+                            <h4>Fourth Feature</h4>
+                        </div>
+                        <div class="line bg-o-color-5"/>
+                        <p class="p_005">A small explanation of this great<br/>feature, in clear words.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_features_04_templates.xml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Features 04 snippet template -->
+    <template id="a_features_04" name="Features 04">
+        <section class="a_features_04 o_cc o_spc-small o_masonry pt24 pb24" style="overflow: hidden;">
+            <div class="container">
+                <h1 class="text-center">
+                    <font style="font-size: 42px;margin-bottom: 25px;">Your Title</font>
+                </h1>
+                <p class="p_006">Tell what's the value for the customer for this feature.</p>
+                <div class="row o_snippet_006">
+                    <div class="col-lg-3 pt32 pb32 text-center o_box_006">
+                        <div class="circle">
+                            <i class="fa fa-2x fa-gear rounded-circle m-3 a_snippet_006"/>
+                        </div>
+                        <h3>First Feature</h3>
+                        <p class="p_006">Tell what's the value for the<br/>customer for this feature.
+                        </p>
+                    </div>
+                    <div class="col-lg-3 pt32 pb32 text-center o_box_006">
+                        <div class="circle">
+                            <i class="fa fa-2x fa-photo rounded-circle m-3 a_snippet_006"/>
+                        </div>
+                        <h3>Second Feature</h3>
+                        <p class="p_006">Write what the customer would like to know,<br/>not what you want to show.
+                        </p>
+                    </div>
+                    <div class="col-lg-3 pt32 pb32 text-center o_box_006">
+                        <div class="circle">
+                            <i class="fa fa-2x fa-leaf rounded-circle m-3 a_snippet_006"/>
+                        </div>
+                        <h3>Third Feature</h3>
+                        <p class="p_006">A small explanation of this great<br/>feature, in clear words.
+                        </p>
+                    </div>
+                    <div class="col-lg-3 pt32 pb32 text-center o_box_006">
+                        <div class="circle">
+                            <i class="fa fa-2x fa-rocket rounded-circle m-3 a_snippet_006"/>
+                        </div>
+                        <h3>Fourth Feature</h3>
+                        <p class="p_006">A small explanation of this great<br/>feature, in clear words.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_features_05_templates.xml

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Features 05 snippet template -->
+    <template id="a_features_05" name="Features 05">
+        <section class="pt32 pb32">
+            <div class="container">
+                <h1 class="text-center">
+                    <font style="font-size: 42px;margin-bottom: 25px;">Your Title</font>
+                </h1>
+                <p class="p_008">Tell what's the value for the customer for this feature.</p>
+                <div class="row o_snippet_008">
+                    <div class="col-lg-4 pt32 pb32  bg-primary text-center o_box_008">
+                        <i class="fa fa-3x fa-gear rounded bg-primary a_snippet_008"/>
+                        <h3>First Feature</h3>
+                        <p>Tell what's the value for the<br/>customer for this feature.
+                        </p>
+                    </div>
+                    <div class="col-lg-4 pt32 pb32 bg-o-color-5 text-center o_box_008">
+                        <i class="fa fa-3x fa-photo rounded bg-o-color-5 a_snippet_008"/>
+                        <h3>Second Feature</h3>
+                        <p>Write what the customer would like to know,<br/>not what you want to show.
+                        </p>
+                    </div>
+                    <div class="col-lg-4 pt32 pb32 bg-secondary text-center o_box_008">
+                        <i class="fa fa-3x fa-leaf rounded bg-secondary a_snippet_008"/>
+                        <h3>Third Feature</h3>
+                        <p>A small explanation of this great<br/>feature, in clear words.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_features_06_templates.xml

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Features 06 snippet template -->
+    <template id="a_features_06" name="Features 06">
+        <section class="a_features_06 o_spc-small o_masonry o_cc2 pt24 pb24" style="overflow: hidden;">
+            <div class="container">
+                <h1 class="text-center">
+                    <font style="font-size: 42px;">Your Title Here</font>
+                </h1>
+                <p style="text-align: center;">Tell what's the value for the customer for this feature.</p>
+                <div class="row o_snippet_009">
+                    <div class="col  pb32 text-center o_box_009">
+                        <div class="corner009">
+                            <div class="corner009-triangle"/>
+                        </div>
+                        <i class="fa fa-2x fa-gear rounded-circle bg-o-color-5 m-3 a_snippet_009"/>
+                        <div>
+                            <h4>First Feature</h4>
+                        </div>
+                        <div class="line bg-o-color-5"/>
+                        <p class="p_009">Tell what's the value for the<br/>customer for this feature.
+                        </p>
+                    </div>
+                    <div class="col pb32 text-center o_box_009">
+                        <div class="corner009">
+                            <div class="corner009-triangle"/>
+                        </div>
+                        <i class="fa fa-2x fa-photo rounded-circle bg-o-color-5 m-3 a_snippet_009"/>
+                        <div>
+                            <h4>Second Feature</h4>
+                        </div>
+                        <div class="line bg-o-color-5"/>
+                        <p class="p_009">Write what the customer would like to know,<br/>not what you want to show.
+                        </p>
+                    </div>
+                    <div class="col pb32 text-center o_box_009">
+                        <div class="corner009">
+                            <div class="corner009-triangle"/>
+                        </div>
+                        <i class="fa fa-2x fa-leaf rounded-circle bg-o-color-5 m-3 a_snippet_009"/>
+                        <div>
+                            <h4>Third Feature</h4>
+                        </div>
+                        <div class="line bg-o-color-5"/>
+                        <p class="p_009">A small explanation of this great<br/>feature, in clear words.
+                        </p>
+                    </div>
+                    <div class="col pb32 text-center o_box_009">
+                        <div class="corner009">
+                            <div class="corner009-triangle"/>
+                        </div>
+                        <i class="fa fa-2x fa-rocket rounded-circle bg-o-color-5 m-3 a_snippet_009"/>
+                        <div>
+                            <h4>Fourth Feature</h4>
+                        </div>
+                        <div class="line bg-o-color-5"/>
+                        <p class="p_009">A small explanation of this great<br/>feature, in clear words.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_features_07_templates.xml

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Features 07 snippet template -->
+    <template id="a_features_07" name="Features 07">
+        <section class="a_features_07 o_spc-small o_masonry o_cc2 pt24 pb24" style="overflow: hidden;">
+            <div class="container">
+                <h1 class="text-center">
+                    <font style="font-size: 42px;">Your Title Here</font>
+                </h1>
+                <p style="text-align: center;">Tell what's the value for the customer for this feature.</p>
+                <div class="row o_snippet_010">
+                    <div class="col  pb32 text-center o_box_010">
+                        <div class="circle010">
+                            <i class="fa fa-3x fa-gear m-4 a_icon_010"/>
+                        </div>
+                        <div>
+                            <h4>First Feature</h4>
+                        </div>
+                        <div class="line bg-o-color-5"/>
+                        <p class="p_010">Tell what's the value for the<br/>customer for this feature.
+                        </p>
+                        <a href="#" class="btn btn-primary mb-2 btn010">More Details</a>
+                    </div>
+                    <div class="col pb32 text-center o_box_010">
+                        <div class="circle010">
+                            <i class="fa fa-3x fa-photo m-4 a_icon_010"/>
+                        </div>
+                        <div>
+                            <h4>Second Feature</h4>
+                        </div>
+                        <div class="line bg-o-color-5"/>
+                        <p class="p_010">Write what the customer would like to know,<br/>not what you want to show.
+                        </p>
+                        <a href="#" class="btn btn-primary mb-2 btn010">More Details</a>
+                    </div>
+                    <div class="col pb32 text-center o_box_010">
+                        <div class="circle010">
+                            <i class="fa fa-3x fa-leaf m-4 a_icon_010"/>
+                        </div>
+                        <div>
+                            <h4>Third Feature</h4>
+                        </div>
+                        <div class="line bg-o-color-5"/>
+                        <p class="p_010">A small explanation of this great<br/>feature, in clear words.
+                        </p>
+                        <a href="#" class="btn btn-primary mb-2 btn010">More Details</a>
+                    </div>
+                    <div class="col pb32 text-center o_box_010">
+                        <div class="circle010">
+                            <i class="fa fa-3x fa-leaf m-4 a_icon_010"/>
+                        </div>
+                        <div>
+                            <h4>Fourth Feature</h4>
+                        </div>
+                        <div class="line bg-o-color-5"/>
+                        <p class="p_010">A small explanation of this great<br/>feature, in clear words.
+                        </p>
+                        <a href="#" class="btn btn-primary mb-2 btn010">More Details</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_features_08_templates.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Features 08 snippet template -->
+    <template id="a_features_08" name="Features 08">
+        <section class="a_features_08 pt32 pb32">
+            <div class="container">
+                <div class="row o_snippet_013">
+                    <div class="col-lg-4 pt32 pb32 text-center o_box_013">
+                        <div class="circle013">
+                            <i class="fa fa-2x fa-gear a_snippet_013"/>
+                        </div>
+                        <h3 class="header_013">First Feature</h3>
+                        <p>Tell what's the value for the<br/>customer for this feature.
+                        </p>
+                        <a href="#" class="btn btn-primary mb-2 btn013">More Details</a>
+                    </div>
+                    <div class="col-lg-4 pt32 pb32 text-center o_box_013">
+                        <div class="circle013">
+                            <i class="fa fa-2x fa-photo a_snippet_013"/>
+                        </div>
+                        <h3 class="header_013">Second Feature</h3>
+                        <p>Write what the customer would like to know,<br/>not what you want to show.
+                        </p>
+                        <a href="#" class="btn btn-primary mb-2 btn013">More Details</a>
+                    </div>
+                    <div class="col-lg-4 pt32 pb32 text-center o_box_013">
+                        <div class="circle013">
+                            <i class="fa fa-2x fa-leaf a_snippet_013"/>
+                        </div>
+                        <h3 class="header_013">Third Feature</h3>
+                        <p>A small explanation of this great<br/>feature, in clear words.
+                        </p>
+                        <a href="#" class="btn btn-primary mb-2 btn013">More Details</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_features_09_templates.xml

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Features 09 snippet template -->
+    <template id="a_features_09" name="Features 09">
+        <section class="a_features_09 pt32 pb32">
+            <div class="container">
+                <div class="row o_snippet_014">
+                    <h1 class="text-center">
+                        <font style="font-size: 42px;margin-bottom: 25px;">Your Title</font>
+                    </h1>
+                    <p class="p_008">Tell what's the value for the customer for this feature.</p>
+                    <div class="col-lg-4 text-left o_box_014">
+                        <div class="a_box_014">
+                            <div class="circle014">
+                                <i class="fa fa-2x m-2 fa-gear a_snippet_014"/>
+                            </div>
+                            <h3 class="header_014">First Feature</h3>
+                            <p>Tell what's the value for the<br/>customer for this feature.
+                            </p>
+                            <a href="#" class="link014">Read More</a>
+                        </div>
+                    </div>
+                    <div class="col-lg-4 text-left o_box_014">
+                        <div class="a_box_014">
+                            <div class="circle014">
+                                <i class="fa fa-2x m-2 fa-photo a_snippet_014"/>
+                            </div>
+                            <h3 class="header_014">Second Feature</h3>
+                            <p>Write what the customer would like to know,<br/>not what you want to show.
+                            </p>
+                            <a href="#" class="link014">More Details</a>
+                        </div>
+                    </div>
+                    <div class="col-lg-4 text-left o_box_014">
+                        <div class="a_box_014">
+                            <div class="circle014">
+                                <i class="fa fa-2x m-2 fa-leaf a_snippet_014"/>
+                            </div>
+                            <h3 class="header_014">Third Feature</h3>
+                            <p>A small explanation of this great<br/>feature, in clear words.
+                            </p>
+                            <a href="#" class="link014">More Info</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_features_templates.xml

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Features snippet template -->
+    <template id="a_features" name="Features">
+        <section class="a_features o_spc-small o_masonry o_cc2 pt24 pb24" style="overflow: hidden;">
+            <div class="container">
+                <h1 class="text-center">
+                    <font style="font-size: 42px;">Your Title Here</font>
+                </h1>
+                <p style="text-align: center;">Tell what's the value for the customer for this feature.</p>
+                <div class="row o_snippet_011">
+                    <div class="col-md-6  pb32 text-center o_box_011">
+                        <div class="row o_box_011">
+                            <div class="col-md-7 md-7-011">
+                                <h4>First Feature</h4>
+                                <p class="p_011">Tell what's the value for the<br/>customer for this feature.
+                                </p>
+                            </div>
+                            <div class="col-md-5">
+                                <div class="a-icon-011">
+                                    <i class="fa fa-3x fa-photo rounded bg-o-color-5 a_snippet_011"/>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row o_box_011">
+                            <div class="col-md-7 md-7-011">
+                                <h4>Second Feature</h4>
+                                <p class="p_011">Write what the customer would like to know,<br/>not what you want to
+                                    show.
+                                </p>
+                            </div>
+                            <div class="col-md-5">
+                                <div class="a-icon-011">
+                                    <i class="fa fa-3x fa-leaf rounded bg-o-color-5 a_snippet_011"/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-6 pb32 text-center o_box_011">
+                        <div class="row o_box_011">
+                            <div class="col-md-7 md-7-011">
+                                <h4>Third Feature</h4>
+                                <p class="p_011">A small explanation of this great<br/>feature, in clear words.
+                                </p>
+                            </div>
+                            <div class="col-md-5">
+                                <div class="a-icon-011">
+                                    <i class="fa fa-3x fa-gear rounded bg-o-color-5 a_snippet_011"/>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row o_box_011">
+                            <div class="col-md-7 md-7-011">
+                                <h4>Fourth Feature</h4>
+                                <p class="p_011">A small explanation of this great<br/>feature, in clear words.
+                                </p>
+                            </div>
+                            <div class="col-md-5">
+                                <div class="a-icon-011">
+                                    <i class="fa fa-3x fa-rocket rounded bg-o-color-5 a_snippet_011"/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_image_gallery_templates.xml

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Image Gallery snippet template -->
+    <template id="a_image_gallery" name="Image Gallery">
+        <section class="a_image_gallery o_spc-small o_masonry o_cc2 pt24 pb24" style="overflow: hidden;">
+            <div class="container">
+                <div class="row s_nb_column_fixed">
+                    <div class="o_masonry_col o_snippet_not_selectable col-lg-4">
+                        <div class="o_img_div_003" style="background: var(--o-cc5-link);">
+                            <h4 class="head_003" style="color: var(--o-cc2-btn-secondary-text);">First Feature</h4>
+                            <img class="img img-fluid d-block o_img_003" src="/web/image/website.library_image_03"
+                                 data-index="0"
+                                 data-name="Image"/>
+                        </div>
+                        <div class="o_img_div_003" style="background: var(--o-cc4-bg);">
+                            <h4 class="head_003" style="color: var(--o-cc2-btn-secondary-text);">Second Feature</h4>
+                            <img class="img img-fluid d-block o_img_003" src="/web/image/website.library_image_10"
+                                 data-index="3"
+                                 data-name="Image"/>
+                        </div>
+                    </div>
+                    <div class="o_masonry_col o_snippet_not_selectable col-lg-4">
+                        <div class="o_img_div_003" style="background: var(--o-cc4-bg);">
+                            <h4 class="head_003" style="color: var(--o-cc2-btn-secondary-text);">Third Feature</h4>
+                            <img class="img img-fluid d-block o_img_003" src="/web/image/website.library_image_13"
+                                 data-index="1"
+                                 data-name="Image"/>
+                        </div>
+                        <div class="o_img_div_003" style="background: var(--o-cc5-link);">
+                            <h4 class="head_003" style="color: var(--o-cc2-btn-secondary-text);">Feature 01</h4>
+                            <img class="img img-fluid d-block o_img_003" src="/web/image/website.library_image_05"
+                                 data-index="4"
+                                 data-name="Image"/>
+                        </div>
+                    </div>
+                    <div class="o_masonry_col o_snippet_not_selectable col-lg-4">
+                        <div class="o_img_div_003" style="background: var(--o-cc5-link);">
+                            <h4 class="head_003" style="color: var(--o-cc2-btn-secondary-text);">Feature 02</h4>
+                            <img class="img img-fluid d-block o_img_003" src="/web/image/website.library_image_14"
+                                 data-index="2"
+                                 data-name="Image"/>
+                        </div>
+                        <div class="o_img_div_003" style="background: var(--o-cc4-bg);">
+                            <h4 class="head_003" style="color: var(--o-cc2-btn-secondary-text);">Feature 03</h4>
+                            <img class="img img-fluid d-block o_img_003" src="/web/image/website.library_image_16"
+                                 data-index="5"
+                                 data-name="Image"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_numbers_templates.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Numbers snippet template -->
+    <template id="a_numbers" name="Numbers">
+        <section class="a_numbers o_cc o_cc2 pt24 pb24">
+            <div class="container">
+                <div class="row">
+                    <div id="a_number" class="col-lg-3 text-center pt24 pb24 a_number1">
+                        <span class="display-4">12</span>
+                        <br/>
+                        <h6>Useful apps</h6>
+                    </div>
+                    <div id="a_number" class="col-lg-3 text-center pt24 pb24 a_number2">
+                        <span class="display-4">45</span>
+                        <br/>
+                        <h6>Beautiful snippets</h6>
+                    </div>
+                    <div id="a_number" class="col-lg-3 text-center pt24 pb24 a_number3">
+                        <span class="display-4">8</span>
+                        <br/>
+                        <h6>Colorful Designs</h6>
+                    </div>
+                    <div id="a_number" class="col-lg-3 text-center pt24 pb24 a_number4">
+                        <span class="display-4">37</span>
+                        <br/>
+                        <h6>Outstanding Pictures</h6>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_product_list_templates.xml

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Items snippet template -->
+    <template id="a_product_list" name="Items">
+        <t t-set="url" value="url or '#'"/>
+        <section class="s_product_list">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-lg-2 col-md-4 col-6 a_item">
+                        <a t-att-href="url">
+                            <img src="/web/image/website.s_product_list_default_image_1" alt=""
+                                 class="img img-fluid a_img_list"/>
+                        </a>
+                        <div class="s_product_list_item_link">
+                            <a t-att-href="url" class="btn btn-primary a_product_btn">Furniture</a>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-4 col-6 a_item">
+                        <a t-att-href="url">
+                            <img src="/web/image/website.s_product_list_default_image_2" alt=""
+                                 class="img img-fluid a_img_list"/>
+                        </a>
+                        <div class="s_product_list_item_link">
+                            <a t-att-href="url" class="btn btn-primary a_product_btn">Clothes</a>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-4 col-6 a_item">
+                        <a t-att-href="url">
+                            <img src="/web/image/website.s_product_list_default_image_3" alt=""
+                                 class="img img-fluid a_img_list"/>
+                        </a>
+                        <div class="s_product_list_item_link">
+                            <a t-att-href="url" class="btn btn-primary a_product_btn">Books</a>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-4 col-6 a_item">
+                        <a t-att-href="url">
+                            <img src="/web/image/website.s_product_list_default_image_4" alt=""
+                                 class="img img-fluid a_img_list"/>
+                        </a>
+                        <div class="s_product_list_item_link">
+                            <a t-att-href="url" class="btn btn-primary a_product_btn">Essential oils</a>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-4 col-6 a_item">
+                        <a t-att-href="url">
+                            <img src="/web/image/website.s_product_list_default_image_5" alt=""
+                                 class="img img-fluid a_img_list"/>
+                        </a>
+                        <div class="s_product_list_item_link">
+                            <a t-att-href="url" class="btn btn-primary a_product_btn">Service</a>
+                        </div>
+                    </div>
+                    <div class="col-lg-2 col-md-4 col-6 a_item">
+                        <a t-att-href="url">
+                            <img src="/web/image/website.s_product_list_default_image_6" alt=""
+                                 class="img img-fluid a_img_list"/>
+                        </a>
+                        <div class="s_product_list_item_link">
+                            <a t-att-href="url" class="btn btn-primary a_product_btn">Multimedia</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>

animated_snippet/views/snippets/a_showcase_templates.xml

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- Showcase snippet template -->
+    <template id="a_showcase" name="Showcase">
+        <section class="a_012 pt48 pb48" data-vcss="002">
+            <div class="container">
+                <div class="row no-gutters s_col_no_resize s_col_no_bgcolor s_nb_column_fixed">
+                    <div class="col-lg text-right">
+                        <div class="row">
+                            <div class="col-lg-12 pt24 pb24 a_box_012" data-name="Block">
+                                <div class="a_012_title d-flex flex-lg-row-reverse mb-2">
+                                    <i class="a_012_icon-right fa fa-2x fa-desktop text-secondary mr-3 mr-lg-0 ml-lg-3 a_012"/>
+                                    <h3>First feature</h3>
+                                </div>
+                                <p class="p_012">A short description of this great feature.</p>
+                            </div>
+                            <div class="col-lg-12 pt24 pb24 a_box_012" data-name="Block">
+                                <div class="a_012_title d-flex flex-lg-row-reverse mb-2">
+                                    <i class="a_012_icon-right fa fa-2x fa-paint-brush text-secondary mr-3 mr-lg-0 ml-lg-3 a_012"/>
+                                    <h3>Second feature</h3>
+                                </div>
+                                <p class="p_012">A short description of this great feature.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-1">
+                        <div class="w-50  border-right b_012"/>
+                    </div>
+                    <div class="col-lg">
+                        <div class="row">
+                            <div class="col-lg-12 pt24 pb24 a_box_012" data-name="Block">
+                                <div class="a_012_title d-flex mb-2">
+                                    <i class="a_012_icon-left fa fa-2x fa-heart text-secondary mr-3 a_012"/>
+                                    <h3>Another feature</h3>
+                                </div>
+                                <p>A short description of this great feature.</p>
+                            </div>
+                            <div class="col-lg-12 pt24 pb24 a_box_012" data-name="Block">
+                                <div class="a_012_title d-flex mb-2">
+                                    <i class="a_012_icon-left fa fa-2x fa-gift text-secondary mr-3 a_012"/>
+                                    <h3>Last Feature</h3>
+                                </div>
+                                <p>A short description of this great feature.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+</odoo>