From 3751379f1e9a4c215fb6eb898b4ccc67659b9ace Mon Sep 17 00:00:00 2001
From: stephanchrst <stephanchrst@gmail.com>
Date: Tue, 10 May 2022 21:51:50 +0700
Subject: initial commit 2

---
 addons/website/views/assets.xml                    |  173 ++
 addons/website/views/ir_actions_views.xml          |   48 +
 addons/website/views/ir_attachment_views.xml       |   23 +
 addons/website/views/res_config_settings_views.xml |  429 ++++
 addons/website/views/res_partner_views.xml         |   13 +
 addons/website/views/snippets/s_alert.xml          |   48 +
 addons/website/views/snippets/s_badge.xml          |   32 +
 addons/website/views/snippets/s_banner.xml         |   19 +
 addons/website/views/snippets/s_blockquote.xml     |   59 +
 addons/website/views/snippets/s_btn.xml            |   10 +
 addons/website/views/snippets/s_call_to_action.xml |   22 +
 addons/website/views/snippets/s_card.xml           |   22 +
 addons/website/views/snippets/s_carousel.xml       |   71 +
 addons/website/views/snippets/s_chart.xml          |   77 +
 addons/website/views/snippets/s_color_blocks_2.xml |   31 +
 addons/website/views/snippets/s_company_team.xml   |   67 +
 addons/website/views/snippets/s_comparisons.xml    |   88 +
 addons/website/views/snippets/s_countdown.xml      |   78 +
 addons/website/views/snippets/s_cover.xml          |   18 +
 .../website/views/snippets/s_dynamic_snippet.xml   |   78 +
 .../views/snippets/s_dynamic_snippet_carousel.xml  |   37 +
 addons/website/views/snippets/s_facebook_page.xml  |   31 +
 addons/website/views/snippets/s_faq_collapse.xml   |   44 +
 addons/website/views/snippets/s_features.xml       |   28 +
 addons/website/views/snippets/s_features_grid.xml  |   77 +
 addons/website/views/snippets/s_google_map.xml     |   69 +
 addons/website/views/snippets/s_hr.xml             |   38 +
 addons/website/views/snippets/s_image_gallery.xml  |  110 +
 addons/website/views/snippets/s_image_text.xml     |   22 +
 addons/website/views/snippets/s_masonry_block.xml  |   56 +
 addons/website/views/snippets/s_media_list.xml     |  138 ++
 .../views/snippets/s_mega_menu_menu_image_menu.xml |   38 +
 .../views/snippets/s_mega_menu_multi_menus.xml     |   30 +
 addons/website/views/snippets/s_numbers.xml        |   33 +
 addons/website/views/snippets/s_parallax.xml       |   12 +
 addons/website/views/snippets/s_picture.xml        |   22 +
 addons/website/views/snippets/s_popup.xml          |  115 +
 addons/website/views/snippets/s_process_steps.xml  |   63 +
 .../website/views/snippets/s_product_catalog.xml   |   87 +
 addons/website/views/snippets/s_product_list.xml   |   72 +
 addons/website/views/snippets/s_progress_bar.xml   |   41 +
 .../website/views/snippets/s_quotes_carousel.xml   |   85 +
 addons/website/views/snippets/s_rating.xml         |   85 +
 addons/website/views/snippets/s_references.xml     |   39 +
 addons/website/views/snippets/s_share.xml          |   65 +
 addons/website/views/snippets/s_showcase.xml       |   76 +
 .../website/views/snippets/s_table_of_content.xml  |   78 +
 addons/website/views/snippets/s_tabs.xml           |  126 +
 addons/website/views/snippets/s_text_block.xml     |   13 +
 addons/website/views/snippets/s_text_highlight.xml |   19 +
 addons/website/views/snippets/s_text_image.xml     |   22 +
 addons/website/views/snippets/s_three_columns.xml  |   46 +
 addons/website/views/snippets/s_timeline.xml       |   73 +
 addons/website/views/snippets/s_title.xml          |   18 +
 addons/website/views/snippets/snippets.xml         | 1225 ++++++++++
 addons/website/views/website_navbar_templates.xml  |  212 ++
 addons/website/views/website_rewrite.xml           |   80 +
 addons/website/views/website_templates.xml         | 2465 ++++++++++++++++++++
 addons/website/views/website_views.xml             |  482 ++++
 addons/website/views/website_visitor_views.xml     |  349 +++
 60 files changed, 8127 insertions(+)
 create mode 100644 addons/website/views/assets.xml
 create mode 100644 addons/website/views/ir_actions_views.xml
 create mode 100644 addons/website/views/ir_attachment_views.xml
 create mode 100644 addons/website/views/res_config_settings_views.xml
 create mode 100644 addons/website/views/res_partner_views.xml
 create mode 100644 addons/website/views/snippets/s_alert.xml
 create mode 100644 addons/website/views/snippets/s_badge.xml
 create mode 100644 addons/website/views/snippets/s_banner.xml
 create mode 100644 addons/website/views/snippets/s_blockquote.xml
 create mode 100644 addons/website/views/snippets/s_btn.xml
 create mode 100644 addons/website/views/snippets/s_call_to_action.xml
 create mode 100644 addons/website/views/snippets/s_card.xml
 create mode 100644 addons/website/views/snippets/s_carousel.xml
 create mode 100644 addons/website/views/snippets/s_chart.xml
 create mode 100644 addons/website/views/snippets/s_color_blocks_2.xml
 create mode 100644 addons/website/views/snippets/s_company_team.xml
 create mode 100644 addons/website/views/snippets/s_comparisons.xml
 create mode 100644 addons/website/views/snippets/s_countdown.xml
 create mode 100644 addons/website/views/snippets/s_cover.xml
 create mode 100644 addons/website/views/snippets/s_dynamic_snippet.xml
 create mode 100644 addons/website/views/snippets/s_dynamic_snippet_carousel.xml
 create mode 100644 addons/website/views/snippets/s_facebook_page.xml
 create mode 100644 addons/website/views/snippets/s_faq_collapse.xml
 create mode 100644 addons/website/views/snippets/s_features.xml
 create mode 100644 addons/website/views/snippets/s_features_grid.xml
 create mode 100644 addons/website/views/snippets/s_google_map.xml
 create mode 100644 addons/website/views/snippets/s_hr.xml
 create mode 100644 addons/website/views/snippets/s_image_gallery.xml
 create mode 100644 addons/website/views/snippets/s_image_text.xml
 create mode 100644 addons/website/views/snippets/s_masonry_block.xml
 create mode 100644 addons/website/views/snippets/s_media_list.xml
 create mode 100644 addons/website/views/snippets/s_mega_menu_menu_image_menu.xml
 create mode 100644 addons/website/views/snippets/s_mega_menu_multi_menus.xml
 create mode 100644 addons/website/views/snippets/s_numbers.xml
 create mode 100644 addons/website/views/snippets/s_parallax.xml
 create mode 100644 addons/website/views/snippets/s_picture.xml
 create mode 100644 addons/website/views/snippets/s_popup.xml
 create mode 100644 addons/website/views/snippets/s_process_steps.xml
 create mode 100644 addons/website/views/snippets/s_product_catalog.xml
 create mode 100644 addons/website/views/snippets/s_product_list.xml
 create mode 100644 addons/website/views/snippets/s_progress_bar.xml
 create mode 100644 addons/website/views/snippets/s_quotes_carousel.xml
 create mode 100644 addons/website/views/snippets/s_rating.xml
 create mode 100644 addons/website/views/snippets/s_references.xml
 create mode 100644 addons/website/views/snippets/s_share.xml
 create mode 100644 addons/website/views/snippets/s_showcase.xml
 create mode 100644 addons/website/views/snippets/s_table_of_content.xml
 create mode 100644 addons/website/views/snippets/s_tabs.xml
 create mode 100644 addons/website/views/snippets/s_text_block.xml
 create mode 100644 addons/website/views/snippets/s_text_highlight.xml
 create mode 100644 addons/website/views/snippets/s_text_image.xml
 create mode 100644 addons/website/views/snippets/s_three_columns.xml
 create mode 100644 addons/website/views/snippets/s_timeline.xml
 create mode 100644 addons/website/views/snippets/s_title.xml
 create mode 100644 addons/website/views/snippets/snippets.xml
 create mode 100644 addons/website/views/website_navbar_templates.xml
 create mode 100644 addons/website/views/website_rewrite.xml
 create mode 100644 addons/website/views/website_templates.xml
 create mode 100644 addons/website/views/website_views.xml
 create mode 100644 addons/website/views/website_visitor_views.xml

(limited to 'addons/website/views')

diff --git a/addons/website/views/assets.xml b/addons/website/views/assets.xml
new file mode 100644
index 00000000..3079a4f8
--- /dev/null
+++ b/addons/website/views/assets.xml
@@ -0,0 +1,173 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="_assets_primary_variables" inherit_id="portal._assets_primary_variables">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/primary_variables.scss"/>
+
+        <!-- Those files will be automatically edited by users -->
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/user_values.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/user_color_palette.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/colors/user_theme_color_palette.scss"/>
+    </xpath>
+</template>
+<template id="_assets_secondary_variables" inherit_id="web_editor._assets_secondary_variables">
+    <xpath expr="//link" position="before">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/secondary_variables.scss"/>
+    </xpath>
+</template>
+
+<template id="assets_tests" name="Website Assets Tests" inherit_id="web.assets_tests">
+    <xpath expr="." position="inside">
+        <script type="text/javascript" src="/website/static/tests/tours/reset_password.js"></script>
+        <script type="text/javascript" src="/website/static/tests/tours/rte.js"/>
+        <script type="text/javascript" src="/website/static/tests/tours/html_editor.js"/>
+        <script type="text/javascript" src="/website/static/tests/tours/restricted_editor.js"/>
+        <script type="text/javascript" src="/website/static/tests/tours/dashboard_tour.js"/>
+        <script type="text/javascript" src="/website/static/tests/tours/specific_website_editor.js"/>
+        <script type="text/javascript" src="/website/static/tests/tours/public_user_editor.js"/>
+        <script type="text/javascript" src="/website/static/tests/tours/website_navbar_menu.js"/>
+        <script type="text/javascript" src="/website/static/tests/tours/snippet_version.js"/>
+        <script type="text/javascript" src="/website/static/tests/tours/website_style_edition.js"/>
+        <script type="text/javascript" src="/website/static/tests/tours/snippet_empty_parent_autoremove.js"/>
+    </xpath>
+</template>
+
+<template id="assets_backend" inherit_id="web.assets_backend" name="Website Backend Assets (used in backend interface)">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.backend.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website_visitor_views.scss"/>
+    </xpath>
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/src/js/backend/button.js"/>
+        <script type="text/javascript" src="/website/static/src/js/backend/dashboard.js"/>
+        <script type="text/javascript" src="/website/static/src/js/backend/res_config_settings.js"/>
+        <script type="text/javascript" src="/website/static/src/js/widget_iframe.js"/>
+        <script type="text/javascript" src="/website/static/src/js/theme_preview_kanban.js"/>
+        <script type="text/javascript" src="/website/static/src/js/theme_preview_form.js"/>
+    </xpath>
+</template>
+
+<template id="qunit_suite" inherit_id="web.qunit_suite_tests">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/tests/dashboard_tests.js"/>
+        <script type="text/javascript" src="/website/static/tests/website_tests.js"/>
+    </xpath>
+</template>
+
+<template id="_assets_frontend_helpers" inherit_id="portal._assets_frontend_helpers">
+    <xpath expr="//link" position="before">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/bootstrap_overridden.scss"/>
+    </xpath>
+</template>
+
+<template id="_assets_frontend_helpers_user_custom" inherit_id="web._assets_frontend_helpers" priority="99">
+    <xpath expr="//link" position="before">
+        <!-- Custom empty file for user custom bootstrap override -->
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/user_custom_bootstrap_overridden.scss"/>
+    </xpath>
+</template>
+
+<template id="assets_frontend" inherit_id="portal.assets_frontend" name="Website Assets">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.ui.scss"/>
+    </xpath>
+    <xpath expr="//script[@src='/web/static/src/js/public/public_root_instance.js']" position="replace">
+        <script type="text/javascript" src="/website/static/src/js/content/website_root_instance.js"/>
+    </xpath>
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/src/js/utils.js"/>
+
+        <script type="text/javascript" src="/website/static/src/js/content/website_root.js"/>
+        <script type="text/javascript" src="/website/static/src/js/content/compatibility.js"/>
+        <script type="text/javascript" src="/website/static/src/js/content/menu.js"/>
+        <script type="text/javascript" src="/website/static/src/js/content/snippets.animation.js"/>
+
+        <script type="text/javascript" src="/website/static/src/js/menu/navbar.js"/>
+
+        <script type="text/javascript" src="/website/static/src/js/show_password.js"/>
+        <script type="text/javascript" src="/website/static/src/js/post_link.js"/>
+        <!-- Custom empty file for user javascript -->
+        <script type="text/javascript" src="/website/static/src/js/user_custom_javascript.js"/>
+    </xpath>
+</template>
+
+<template id="assets_frontend_user_custom" inherit_id="web.assets_frontend" name="Website Assets user custom" priority="99">
+    <xpath expr="//link[last()]" position="after">
+        <!-- Custom empty file for user custom rules -->
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/user_custom_rules.scss"/>
+    </xpath>
+</template>
+
+<template id="assets_frontend_compatibility_for_12_0" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/compatibility/bs3_for_12_0.scss"/>
+    </xpath>
+</template>
+
+<template id="website.compiled_assets_wysiwyg" name="Website Editor Assets (used in website editor)" groups="website.group_website_publisher">
+    <t t-call-assets="website.assets_wysiwyg"/>
+</template>
+
+<template id="website.assets_wysiwyg" name="Website Editor Assets (used in website editor)">
+    <t t-call="web._assets_helpers">
+        <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
+    </t>
+    <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.wysiwyg.scss"/>
+    <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.edit_mode.scss"/>
+
+    <script type="text/javascript" src="/website/static/src/js/editor/editor.js"/>
+    <script type="text/javascript" src="/website/static/src/js/editor/mega_menu.js"/>
+    <script type="text/javascript" src="/website/static/src/js/editor/snippets.editor.js"/>
+    <script type="text/javascript" src="/website/static/src/js/editor/rte.summernote.js"/>
+    <script type="text/javascript" src="/website/static/src/js/editor/snippets.options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_facebook_page/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_image_gallery/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_countdown/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_popup/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_product_catalog/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_chart/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_rating/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_tabs/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_progress_bar/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_blockquote/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_showcase/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_table_of_content/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_timeline/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_media_list/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_google_map/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_dynamic_snippet/options.js"/>
+    <script type="text/javascript" src="/website/static/src/snippets/s_dynamic_snippet_carousel/options.js"/>
+
+    <script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone.js"/>
+    <script type="text/javascript" src="/website/static/src/js/editor/wysiwyg_multizone_translate.js"/>
+    <script type="text/javascript" src="/website/static/src/js/editor/widget_link.js"/>
+
+    <script type="text/javascript" src="/website/static/src/js/widgets/media.js"/>
+</template>
+
+<template id="website.assets_editor" name="Website Editor Assets (used in website editor)">
+    <t t-call="web._assets_helpers"/>
+
+    <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.editor.ui.scss"/>
+
+    <script type="text/javascript" src="/website/static/src/js/set_view_track.js"/>
+    <script type="text/javascript" src="/website/static/src/js/editor/editor_menu.js"/>
+    <script type="text/javascript" src="/website/static/src/js/editor/editor_menu_translate.js"/>
+
+    <script type="text/javascript" src="/website/static/src/js/menu/content.js"/>
+    <script type="text/javascript" src="/website/static/src/js/menu/customize.js"/>
+    <script type="text/javascript" src="/website/static/src/js/menu/debug_manager.js"/>
+    <script type="text/javascript" src="/website/static/src/js/menu/edit.js"/>
+    <script type="text/javascript" src="/website/static/src/js/menu/mobile_view.js"/>
+    <script type="text/javascript" src="/website/static/src/js/menu/new_content.js"/>
+    <script type="text/javascript" src="/website/static/src/js/menu/seo.js"/>
+    <script type="text/javascript" src="/website/static/src/js/menu/translate.js"/>
+    <script type="text/javascript" src="/website/static/src/js/tours/homepage.js"/>
+    <script type="text/javascript" src="/website/static/src/js/tours/tour_utils.js"/>
+
+    <script type="text/javascript" src="/website/static/src/js/widgets/ace.js"/>
+</template>
+
+</odoo>
diff --git a/addons/website/views/ir_actions_views.xml b/addons/website/views/ir_actions_views.xml
new file mode 100644
index 00000000..9f06b044
--- /dev/null
+++ b/addons/website/views/ir_actions_views.xml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <data>
+
+        <record model="ir.ui.view" id="view_server_action_form_website">
+            <field name="name">ir.actions.server.form.website</field>
+            <field name="model">ir.actions.server</field>
+            <field name="inherit_id" ref="base.view_server_action_form"/>
+            <field name="arch" type="xml">
+                <data>
+                    <xpath expr="//field[@name='state']" position="after">
+                        <field name="website_published"
+                            attrs="{'invisible': [('state', '!=', 'code')]}"/>
+                        <field name="xml_id" invisible="1"/>
+                        <field name="website_path"
+                            attrs="{'invisible': ['|', ('website_published', '!=', True), ('state', '!=', 'code')]}"/>
+                        <field name="website_url" readonly="1" widget="url"
+                            attrs="{'invisible': ['|', ('website_published', '!=', True), ('state', '!=', 'code')]}"/>
+                    </xpath>
+                </data>
+            </field>
+        </record>
+
+        <record model="ir.ui.view" id="view_server_action_tree_website">
+            <field name="name">ir.actions.server.tree.website</field>
+            <field name="model">ir.actions.server</field>
+            <field name="inherit_id" ref="base.view_server_action_tree"/>
+            <field name="arch" type="xml">
+                <xpath expr="//field[@name='model_id']" position="after">
+                    <field name="website_url"/>
+                </xpath>
+            </field>
+        </record>
+
+        <record model="ir.ui.view" id="view_server_action_search_website">
+            <field name="name">ir.actions.server.search.website</field>
+            <field name="model">ir.actions.server</field>
+            <field name="inherit_id" ref="base.view_server_action_search"/>
+            <field name="arch" type="xml">
+                <xpath expr="//field[@name='state']" position="after">
+                    <filter string="Website" name="website"
+                        domain="[('website_published', '=', True), ('state', '=', 'code')]"/>
+                </xpath>
+            </field>
+        </record>
+
+    </data>
+</odoo>
diff --git a/addons/website/views/ir_attachment_views.xml b/addons/website/views/ir_attachment_views.xml
new file mode 100644
index 00000000..f2ba6fcc
--- /dev/null
+++ b/addons/website/views/ir_attachment_views.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+     <record id="view_attachment_form_inherit_website" model="ir.ui.view">
+        <field name="name">ir.attachment.form.inherit.website</field>
+        <field name="model">ir.attachment</field>
+        <field name="inherit_id" ref="base.view_attachment_form"/>
+        <field name="arch" type="xml">
+            <field name="mimetype" position="after">
+                <field name="website_id" options="{'no_create': True}" groups="website.group_multi_website"/>
+            </field>
+        </field>
+    </record>
+    <record id="view_attachment_tree_inherit_website" model="ir.ui.view">
+       <field name="name">ir.attachment.tree.inherit.website</field>
+       <field name="model">ir.attachment</field>
+       <field name="inherit_id" ref="base.view_attachment_tree"/>
+       <field name="arch" type="xml">
+           <field name="name" position="after">
+               <field name="website_id" groups="website.group_multi_website"/>
+           </field>
+       </field>
+   </record>
+</odoo>
diff --git a/addons/website/views/res_config_settings_views.xml b/addons/website/views/res_config_settings_views.xml
new file mode 100644
index 00000000..e3bcaa8f
--- /dev/null
+++ b/addons/website/views/res_config_settings_views.xml
@@ -0,0 +1,429 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+        <record id="res_config_settings_view_form" model="ir.ui.view">
+            <field name="name">res.config.settings.view.form.inherit.website</field>
+            <field name="model">res.config.settings</field>
+            <field name="priority" eval="20"/>
+            <field name="inherit_id" ref="base.res_config_settings_view_form"/>
+            <field name="arch" type="xml">
+                <xpath expr="//div[hasclass('settings')]" position="inside">
+                    <div class="app_settings_block" data-string="Website" string="Website" data-key="website" groups="website.group_website_designer">
+                        <h2 groups="website.group_multi_website">Select the Website to Configure</h2>
+                        <div class="row mt16 o_settings_container" id="website_selection_settings" groups="website.group_multi_website">
+                            <div class="col-xs-12 col-md-6 o_setting_box" id="website">
+                                <div class="o_setting_right_pane">
+                                    <label string="Website" for="website_id"/>
+                                    <div class="text-muted">
+                                        Settings on this page will apply to this website
+                                    </div>
+                                    <div class="mt16">
+                                        <field name="website_id" widget="selection"/>
+                                    </div>
+                                    <div>
+                                        <button name="action_website_create_new" type="object" string="Create a New Website" class="btn-secondary" icon="fa-arrow-right"/>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <h2>Website <button name="action_website_create_new" type="object" string="New" class="ml-2 btn btn-link" icon="fa-plus" groups="!website.group_multi_website"/></h2>
+                        <div class="row mt16 o_settings_container" id="website_settings_placeholder" attrs="{'invisible': [('website_id', '!=', False)]}">
+                            <div class="col-12 o_setting_box">
+                                <div class="text-muted" groups="website.group_multi_website">
+                                    Select a website to load its settings.
+                                </div>
+                                <div class="text-muted" groups="!website.group_multi_website">
+                                    There is no website available for this company. You could create a new one.
+                                </div>
+                            </div>
+                        </div>
+                        <!-- !! Every fields inside this container should be website specific (related to website record) !! -->
+                        <div class="row mt16 o_settings_container" id="website_settings" attrs="{'invisible': [('website_id', '=', False)]}">
+                            <div class="col-12 o_setting_box" id="website_action_setting" style="margin-left: 30px; margin-bottom: 16px;">
+                                <button name="website_go_to" type="object" string="Go to Website" class="btn btn-primary" icon="fa-globe"/>
+                                <button name="install_theme_on_current_website" type="object" string="Pick a Theme" class="ml-2 btn btn-primary" icon="fa-paint-brush"/>
+                                <button name="%(website.action_website_add_features)d" type="action" string="Add features" class="ml-2 btn btn-secondary" icon="fa-plus"/>
+                            </div>
+                            <div class="col-12 col-lg-6 o_setting_box" id="domain_setting">
+                                <div class="o_setting_right_pane">
+                                    <label for="website_name" string="Website Title"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        Name and favicon of your website
+                                    </div>
+                                    <div class="content-group">
+                                        <div class="row mt16">
+                                            <label class="col-lg-3 o_light_label" string="Name" for="website_name"/>
+                                            <field name="website_name" attrs="{'required': [('website_id', '!=', False)]}"/>
+                                        </div>
+                                        <div class="row">
+                                            <label class="col-lg-3 o_light_label" for="favicon" />
+                                            <field name="favicon" widget="image" class="float-left oe_avatar"/>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-lg-6 o_setting_box" id="company_settings" groups="base.group_multi_company">
+                                <div class="o_setting_right_pane">
+                                    <label string="Company" for="website_company_id"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        The company this website belongs to
+                                    </div>
+                                    <field name="website_company_id" attrs="{'required': [('website_id', '!=', False)]}" />
+                                </div>
+                            </div>
+                            <div class="col-12 col-lg-6 o_setting_box" id="languages_setting">
+                                <div class="o_setting_right_pane">
+                                    <label for="language_ids"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        Languages available on your website
+                                    </div>
+                                    <div class="content-group">
+                                        <div class="mt16">
+                                            <field name="language_ids" widget="many2many_tags" options="{'no_create': True, 'no_open': True}"
+                                                attrs="{'required': [('website_id', '!=', False)]}"/>
+                                        </div>
+                                        <field name="website_language_count" invisible="1"/>
+                                        <div class="mt8" attrs="{'invisible':[('website_language_count', '&lt;', 2)]}">
+                                            <label class="o_light_label mr8" string="Default" for="website_default_lang_id"/>
+                                            <field name="website_default_lang_id" widget="selection" attrs="{'required': [('website_id', '!=', False)]}"/>
+                                        </div>
+                                    </div>
+                                    <div class="mt8">
+                                        <button type="action" name="%(base.action_view_base_language_install)d" string="Install new language" class="btn-link" icon="fa-arrow-right"/>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-lg-6 o_setting_box" id="domain_settings">
+                                <div class="o_setting_right_pane">
+                                    <label string="Domain" for="website_domain"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        Display this website when users visit this domain
+                                    </div>
+                                    <div class="mt8">
+                                        <field name="website_domain" placeholder="https://www.odoo.com"/>
+                                    </div>
+                                    <div groups="base.group_no_one">
+                                        <div class="mt8 text-muted" title="You can have 2 websites with same domain AND a condition on country group to select wich website use.">
+                                            Once the selection of available websites by domain is done, you can filter by country group.
+                                        </div>
+                                        <div class="mt8">
+                                            <field name="website_country_group_ids" widget="many2many_tags"/>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-lg-6 o_setting_box" id="specific_user_account_setting" groups="website.group_multi_website">
+                                <div class="o_setting_left_pane">
+                                    <field name="specific_user_account"/>
+                                </div>
+                                <div class="o_setting_right_pane">
+                                    <label for="specific_user_account"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        Force your user to create an account per website
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-lg-6 o_setting_box" id="website_cookies_bar_setting">
+                                <div class="o_setting_left_pane">
+                                    <field name="website_cookies_bar" widget="website_cookiesbar_field"/>
+                                </div>
+                                <div class="o_setting_right_pane">
+                                    <label for="website_cookies_bar"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        Display a customizable cookies bar on your website.
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-lg-6 o_setting_box" id="cdn_setting" title="A CDN helps you serve your website’s content with high availability and high performance to any visitor wherever they are located." groups="base.group_no_one">
+                                <div class="o_setting_left_pane">
+                                    <field name="cdn_activated"/>
+                                </div>
+                                <div class="o_setting_right_pane">
+                                    <label for="cdn_activated"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        Use a CDN to optimize the availability of your website's content
+                                    </div>
+                                    <div class="content-group" attrs="{'invisible': [('cdn_activated', '=', False)]}">
+                                        <div class="row mt16">
+                                            <label class="col-lg-3 o_light_label" for="cdn_url"/>
+                                            <field name="cdn_url"
+                                                   attrs="{'required': [('cdn_activated', '=', True)]}"
+                                                   placeholder="//mycompany.mycdn.com/"
+                                                   t-translation="off"/>
+                                        </div>
+                                        <div class="row" >
+                                            <label class="col-lg-3 o_light_label" for="cdn_filters"/>
+                                            <field name="cdn_filters" class="oe_inline"
+                                                   attrs="{'required': [('cdn_activated', '=', True)]}"/>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-lg-6 o_setting_box" id="social_media_settings">
+                                <div class="o_setting_left_pane">
+                                    <field name="has_social_network"/>
+                                </div>
+                                <div class="o_setting_right_pane">
+                                    <label string="Social Media" for="has_social_network"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        Add links to social media on your website
+                                    </div>
+                                    <div class="content-group" attrs="{'invisible': [('has_social_network', '=', False)]}">
+                                        <div class="row">
+                                            <label for="social_twitter" string="Twitter" class="col-md-3 o_light_label"/>
+                                            <field name="social_twitter"/>
+                                        </div>
+                                        <div class="row">
+                                            <label for="social_facebook" string="Facebook" class="col-md-3 o_light_label"/>
+                                            <field name="social_facebook"/>
+                                        </div>
+                                        <div class="row">
+                                            <label for="social_github" string="GitHub" class="col-md-3 o_light_label"/>
+                                            <field name="social_github"/>
+                                        </div>
+                                        <div class="row">
+                                            <label for="social_linkedin" string="LinkedIn" class="col-md-3 o_light_label"/>
+                                            <field name="social_linkedin"/>
+                                        </div>
+                                        <div class="row">
+                                            <label for="social_youtube" string="YouTube" class="col-md-3 o_light_label"/>
+                                            <field name="social_youtube"/>
+                                        </div>
+                                        <div class="row">
+                                            <label for="social_instagram" string="Instagram" class="col-md-3 o_light_label"/>
+                                            <field name="social_instagram"/>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-lg-6 o_setting_box" id="social_default_image_setting">
+                                <div class="o_setting_left_pane">
+                                    <field name="has_default_share_image"/>
+                                </div>
+                                <div class="o_setting_right_pane">
+                                    <label string="Default Social Share Image" for="has_default_share_image"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted" attrs="{'invisible': [('has_default_share_image', '=', False)]}">
+                                        If set, replaces the website logo as the default social share image.
+                                    </div>
+                                    <field name="social_default_image" widget="image" class="w-25 mt-2" attrs="{'invisible': [('has_default_share_image', '=', False)]}"/>
+                                </div>
+                            </div>
+
+                        </div>
+                        <h2>Features</h2>
+                        <div class="row mt16 o_settings_container" id="webmaster_settings">
+                            <div class="col-12 col-lg-6 o_setting_box" id="google_maps_setting">
+                                <div class="o_setting_left_pane">
+                                    <field name="has_google_maps"/>
+                                </div>
+                                <div class="o_setting_right_pane">
+                                    <label for="has_google_maps"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        Use Google Map on your website (<a href="/contactus">Contact Us</a> page, snippets, ...)
+                                    </div>
+                                    <div class="content-group" attrs="{'invisible': [('has_google_maps', '=', False)]}">
+                                        <div class="row mt16">
+                                            <label class="col-lg-3 o_light_label" string="API Key" for="google_maps_api_key"/>
+                                            <field name="google_maps_api_key" attrs="{'required': [('has_google_maps', '=', True)]}" />
+                                        </div>
+                                    </div>
+                                    <div class="mt8" attrs="{'invisible': [('has_google_maps', '=', False)]}">
+                                        <a role="button" class="btn-link" target="_blank"
+                                           href="https://console.developers.google.com/flows/enableapi?apiid=maps_backend,static_maps_backend&amp;keyType=CLIENT_SIDE&amp;reusekey=true">
+                                            <i class="fa fa-arrow-right"/>
+                                            Create a Google Project and Get a Key
+                                        </a>
+                                        <a role="button" class="btn-link" target="_blank"
+                                           href="https://cloud.google.com/maps-platform/pricing">
+                                            <i class="fa fa-arrow-right"/>
+                                            Enable billing on your Google Project
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-lg-6 o_setting_box" id="auth_signup_uninvited_setting"
+                            title=" To send invitations in B2B mode, open a contact or select several ones in list view and click on 'Portal Access Management' option in the dropdown menu *Action*.">
+                                <div class="o_setting_left_pane">
+                                </div>
+                                <div class="o_setting_right_pane">
+                                    <label for="auth_signup_uninvited"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        Let your customers log in to see their documents
+                                    </div>
+                                    <div class="mt8">
+                                        <field name="auth_signup_uninvited" class="o_light_label" widget="radio" required="True"/>
+                                    </div>
+                                    <div class="mt8 content-group">
+                                        <button type="object" name="open_template_user" string="Default Access Rights" icon="fa-arrow-right" class="btn-link"/>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <h2>SEO</h2>
+                        <div class="row mt16 o_settings_container" id="seo_settings">
+                            <div class="col-12 col-lg-offset-6 col-lg-6 o_setting_box" id="google_analytics_setting">
+                                <div class="o_setting_left_pane">
+                                    <field name="has_google_analytics"/>
+                                </div>
+                                <div class="o_setting_right_pane">
+                                    <label for="has_google_analytics"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        Track visits in Google Analytics
+                                    </div>
+                                    <div class="content-group" attrs="{'invisible': [('has_google_analytics', '=', False)]}">
+                                        <div class="row mt16">
+                                            <label class="col-lg-3 o_light_label" string="Tracking ID" for="google_analytics_key"/>
+                                            <field name="google_analytics_key" placeholder="UA-XXXXXXXX-Y"
+                                                attrs="{'required': [('has_google_analytics', '=', True)]}"/>
+                                        </div>
+                                    </div>
+                                    <div attrs="{'invisible': [('has_google_analytics', '=', False)]}">
+                                        <a href="https://www.odoo.com/documentation/14.0/applications/websites/website/optimize/google_analytics.html"
+                                                class="oe_link" target="_blank">
+                                            <i class="fa fa-arrow-right"/>
+                                            How to get my Tracking ID
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-lg-offset-6 col-lg-6 o_setting_box" id="google_console_setting">
+                                <div class="o_setting_left_pane">
+                                    <field name="has_google_search_console"/>
+                                </div>
+                                <div class="o_setting_right_pane">
+                                    <label for="has_google_search_console"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        Monitor Google Search results data
+                                    </div>
+                                    <div class="content-group" attrs="{'invisible': [('has_google_search_console', '=', False)]}">
+                                        <div class="row mt16">
+                                            <label class="col-lg-3 o_light_label" string="Code" for="google_search_console"/>
+                                            <field name="google_search_console" placeholder="google1234567890123456.html"
+                                                attrs="{'required': [('has_google_search_console', '=', True)]}"/>
+                                        </div>
+                                    </div>
+                                    <div attrs="{'invisible': [('has_google_search_console', '=', False)]}">
+                                        <small class='text-muted'>
+                                            <i class="fa fa-info"/>: type some of the first chars after 'google' is enough, we'll guess the rest.
+                                        </small>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-lg-6 o_setting_box" id="google_analytics_dashboard_setting" attrs="{'invisible': [('has_google_analytics', '=', False)]}">
+                                <div class="o_setting_left_pane">
+                                    <field name="has_google_analytics_dashboard"/>
+                                </div>
+                                <div class="o_setting_right_pane">
+                                    <label for="has_google_analytics_dashboard"/>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        Follow your website traffic in Odoo.
+                                    </div>
+                                    <div class="content-group" attrs="{'invisible': [('has_google_analytics_dashboard', '=', False)]}">
+                                        <div class="row mt16">
+                                            <label class="col-lg-3 o_light_label" string="Client ID" for="google_management_client_id"/>
+                                            <field name="google_management_client_id" attrs="{'required': [('has_google_analytics_dashboard', '=', True)]}"/>
+                                        </div>
+                                        <div class="row">
+                                            <label class="col-lg-3 o_light_label" string="Client Secret" for="google_management_client_secret"/>
+                                            <field name="google_management_client_secret" attrs="{'required': [('has_google_analytics_dashboard', '=', True)]}"/>
+                                        </div>
+                                    </div>
+                                    <div attrs="{'invisible': [('has_google_analytics_dashboard', '=', False)]}">
+                                        <a href="https://www.odoo.com/documentation/14.0/applications/websites/website/optimize/google_analytics_dashboard.html"
+                                            class="oe_link" target="_blank">
+                                            <i class="fa fa-arrow-right"/>
+                                            How to get my Client ID
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-lg-6 o_setting_box" id="robots_setting">
+                                <div class="o_setting_right_pane">
+                                    <span class="o_form_label">Robots.txt</span>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted">
+                                        Robots.txt: This file tells to search engine crawlers which pages or files they can or can't request from your site.<br/>
+                                    </div>
+                                    <div class="mt4">
+                                        <button type="object" name="action_open_robots" string="Edit robots.txt" class="btn-link" icon="fa-android"/>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-12 col-lg-6 o_setting_box" id="robots_setting">
+                                <div class="o_setting_right_pane">
+                                    <span class="o_form_label">Sitemap</span>
+                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <div class="text-muted mt8">
+                                        Sitemap.xml: Help search engine crawlers to find out what pages are present and which have recently changed, and to crawl your site accordingly. This file is automatically generated by Odoo.
+                                    </div>
+                                    <div class="mt4">
+                                        <button type="object" name="action_ping_sitemap" string="Submit sitemap to Google" class='btn-link' icon="fa-google"/>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </xpath>
+            </field>
+        </record>
+
+        <record id="action_website_configuration" model="ir.actions.act_window">
+            <field name="name">Settings</field>
+            <field name="type">ir.actions.act_window</field>
+            <field name="res_model">res.config.settings</field>
+            <field name="view_mode">form</field>
+            <field name="target">inline</field>
+            <field name="context">{'module' : 'website', 'bin_size': False}</field>
+        </record>
+
+        <menuitem id="menu_website_global_configuration" parent="menu_website_configuration"
+            sequence="100" name="Configuration" groups="base.group_system"/>
+
+        <menuitem name="Settings"
+            id="menu_website_website_settings"
+            action="action_website_configuration"
+            parent="menu_website_global_configuration"
+            groups="base.group_system"
+            sequence="10"/>
+
+        <menuitem id="menu_website_add_features" parent="website.menu_website_global_configuration"
+            sequence="20" groups="base.group_system" action="action_website_add_features"/>
+
+        <menuitem name="Websites"
+            id="menu_website_websites_list"
+            action="action_website_list"
+            parent="menu_website_global_configuration"
+            groups="base.group_no_one"
+            sequence="10"
+            />
+
+        <menuitem name="Pages"
+            id="menu_website_pages_list"
+            action="action_website_pages_list"
+            parent="menu_website_global_configuration"
+            sequence="30"
+            />
+
+        <menuitem name="Menus"
+            id="menu_website_menu_list"
+            action="action_website_menu"
+            parent="menu_website_global_configuration"
+            sequence="45"
+            groups="base.group_no_one"/>
+
+</odoo>
diff --git a/addons/website/views/res_partner_views.xml b/addons/website/views/res_partner_views.xml
new file mode 100644
index 00000000..138d90f5
--- /dev/null
+++ b/addons/website/views/res_partner_views.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0"?>
+<odoo>
+    <record id="view_partner_form_inherit_website" model="ir.ui.view">
+        <field name="name">res.partner.form.website.inherit</field>
+        <field name="model">res.partner</field>
+        <field name="inherit_id" ref="base.view_partner_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//group[@name='misc']/field[@name='company_id']" position="after">
+                <field name="website_id"/>
+            </xpath>
+        </field>
+    </record>
+</odoo>
diff --git a/addons/website/views/snippets/s_alert.xml b/addons/website/views/snippets/s_alert.xml
new file mode 100644
index 00000000..43cbbc31
--- /dev/null
+++ b/addons/website/views/snippets/s_alert.xml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_alert" name="Alert">
+    <div class="s_alert s_alert_md alert-info w-100 clearfix">
+        <i class="fa fa-2x fa-info-circle s_alert_icon"/>
+        <div class="s_alert_content">
+            <p>Explain the benefits you offer. <br/>Don't write about products or services here, write about solutions.</p>
+        </div>
+    </div>
+</template>
+
+<template id="s_alert_options" inherit_id="website.snippet_options">
+    <xpath expr="//div[@id='so_width']" position="before">
+        <div data-selector=".s_alert" data-js="Alert">
+            <we-select string="Type" data-apply-to=".fa.s_alert_icon" data-trigger="alert_colorpicker_opt">
+                <we-button data-select-class="fa-user-circle" data-trigger-value="primary">Primary</we-button>
+                <we-button data-select-class="fa-user-circle-o" data-trigger-value="secondary">Secondary</we-button>
+                <we-button data-select-class="fa-info-circle" data-trigger-value="info">Info</we-button>
+                <we-button data-select-class="fa-check-circle" data-trigger-value="success">Success</we-button>
+                <we-button data-select-class="fa-exclamation-triangle" data-trigger-value="warning">Warning</we-button>
+                <we-button data-select-class="fa-exclamation-circle" data-trigger-value="danger">Danger</we-button>
+            </we-select>
+        </div>
+    </xpath>
+    <!-- Keep those options in separate xpath for options order -->
+    <xpath expr="//div[@id='so_width']" position="after">
+        <div data-selector=".s_alert">
+            <we-select string="Size">
+                <we-button data-select-class="s_alert_sm">Small</we-button>
+                <we-button data-select-class="s_alert_md">Medium</we-button>
+                <we-button data-select-class="s_alert_lg">Large</we-button>
+            </we-select>
+            <we-colorpicker string="Color" data-name="alert_colorpicker_opt"
+                data-select-style="true"
+                data-css-property="background-color"
+                data-color-prefix="alert-"/>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_alert_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_alert/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_badge.xml b/addons/website/views/snippets/s_badge.xml
new file mode 100644
index 00000000..d5f684e0
--- /dev/null
+++ b/addons/website/views/snippets/s_badge.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Badge" id="s_badge">
+    <span class="s_badge badge badge-secondary o_animable" data-name="Badge">
+        <i class="fa fa-1x fa-fw fa-folder o_not-animable"/>Category
+    </span>
+</template>
+
+<template id="s_badge_options" inherit_id="website.snippet_options">
+    <xpath expr="//div[@data-js='Box']" position="before">
+        <div data-selector=".s_badge">
+            <we-colorpicker string="Color" data-name="badge_colorpicker_opt"
+                data-select-style="true"
+                data-css-property="background-color"
+                data-color-prefix="badge-"/>
+        </div>
+    </xpath>
+</template>
+
+<template id="_assets_snippet_s_badge_css_000_variables" inherit_id="website._assets_primary_variables">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_badge/000_variables.scss"/>
+    </xpath>
+</template>
+<template id="assets_snippet_s_badge_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_badge/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_banner.xml b/addons/website/views/snippets/s_banner.xml
new file mode 100644
index 00000000..a9966682
--- /dev/null
+++ b/addons/website/views/snippets/s_banner.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_banner" name="Banner">
+    <section class="s_banner parallax s_parallax_is_fixed pt96 pb96" data-scroll-background-ratio="1">
+        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
+        <div class="container">
+            <div class="row s_nb_column_fixed">
+                <div class="col-lg-6 jumbotron rounded o_cc o_cc1 pt32 pb32" data-name="Box">
+                    <h1><font style="font-size: 62px;">Sell Online. Easily.</font></h1>
+                    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+                    <a href="#" class="btn btn-primary mb-2">Contact Us</a>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_blockquote.xml b/addons/website/views/snippets/s_blockquote.xml
new file mode 100644
index 00000000..deeef9ad
--- /dev/null
+++ b/addons/website/views/snippets/s_blockquote.xml
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Blockquote" id="s_blockquote">
+    <blockquote class="s_blockquote s_blockquote_classic w-100 mx-auto o_animable blockquote">
+        <i class="s_blockquote_icon fa fa-1x fa-quote-left bg-o-color-2 rounded"/>
+        <div class="s_blockquote_content bg-100">
+            <p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
+            <footer class="blockquote-footer">
+                <img src="/web/image/website.s_blockquote_default_image" class="s_blockquote_avatar img rounded-circle mr-2" alt=""/>
+                <span class="s_blockquote_author"><b>John DOE</b> • CEO of MyCompany</span>
+            </footer>
+        </div>
+    </blockquote>
+</template>
+
+<template id="s_blockquote_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <!-- Layout -->
+        <div data-js="Blockquote" data-selector=".s_blockquote">
+            <we-select string="Display">
+                <we-button data-select-class="s_blockquote_classic" data-display="classic">Classic</we-button>
+                <we-button data-select-class="s_blockquote_cover" data-display="cover" data-name="blockquote_cover_opt">Cover</we-button>
+                <we-button data-select-class="s_blockquote_minimalist" data-display="minimalist" data-name="blockquote_minimalist_opt">Minimalist</we-button>
+            </we-select>
+        </div>
+
+        <!-- Color and images -->
+        <t t-call="web_editor.snippet_options_background_options">
+            <t t-set="selector" t-value="'.s_blockquote'"/>
+            <t t-set="target" t-value="'.s_blockquote_content'"/>
+            <t t-set="with_colors" t-value="True"/>
+            <t t-set="with_images" t-value="True"/>
+            <t t-set="images_dependencies" t-value="'blockquote_cover_opt'"/>
+        </t>
+
+        <!-- Shadow -->
+        <div data-js="Box" data-selector=".s_blockquote" data-target=".s_blockquote_content">
+            <t t-call="website.snippet_options_shadow_widgets"/>
+        </div>
+
+        <!-- Border Color -->
+        <div data-selector="blockquote">
+            <we-colorpicker string="Border Color"
+                data-select-style="true"
+                data-css-property="border-color"
+                data-color-prefix="border-"
+                data-dependencies="blockquote_minimalist_opt"/>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_blockquote_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_blockquote/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_btn.xml b/addons/website/views/snippets/s_btn.xml
new file mode 100644
index 00000000..23b7a902
--- /dev/null
+++ b/addons/website/views/snippets/s_btn.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="assets_snippet_s_btn_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_btn/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_call_to_action.xml b/addons/website/views/snippets/s_call_to_action.xml
new file mode 100644
index 00000000..52476063
--- /dev/null
+++ b/addons/website/views/snippets/s_call_to_action.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_call_to_action" name="Call to Action">
+    <section class="s_call_to_action o_cc o_cc3 pt48 pb24">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-9 pb16">
+                    <h3><b>50,000+ companies</b> run Odoo to grow their businesses.</h3>
+                    <p>Join us and make your company a better place.</p>
+                </div>
+                <div class="col-lg-3 pt8">
+                    <p style="text-align: right;">
+                        <a href="/contactus" class="btn btn-primary btn-lg mb-2">Contact us</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_card.xml b/addons/website/views/snippets/s_card.xml
new file mode 100644
index 00000000..b809d8a2
--- /dev/null
+++ b/addons/website/views/snippets/s_card.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_card" name="Card">
+    <div class="s_card card bg-white w-100">
+        <h4 class="card-header">Feature Title</h4>
+        <div class="card-body">
+            <p class="card-text">A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.</p>
+        </div>
+        <div class="card-footer">
+            <i class="fa fa-1x fa-clock-o mr8"/><small>2 days ago</small>
+        </div>
+    </div>
+</template>
+
+<template id="assets_snippet_s_card_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_card/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_carousel.xml b/addons/website/views/snippets/s_carousel.xml
new file mode 100644
index 00000000..ea6ae95f
--- /dev/null
+++ b/addons/website/views/snippets/s_carousel.xml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_carousel" name="Carousel">
+    <section class="s_carousel_wrapper" data-vxml="001">
+        <div id="myCarousel" class="s_carousel s_carousel_default carousel slide" data-interval="10000">
+            <!-- Indicators -->
+            <ol class="carousel-indicators">
+                <li data-target="#myCarousel" data-slide-to="0" class="active"/>
+                <li data-target="#myCarousel" data-slide-to="1"/>
+                <li data-target="#myCarousel" data-slide-to="2"/>
+            </ol>
+            <!-- Content -->
+            <div class="carousel-inner">
+                <!-- #01 -->
+                <div class="carousel-item active oe_img_bg pt152 pb152" style="background-image: url('/web/image/website.s_carousel_default_image_1');" data-name="Slide">
+                    <div class="container">
+                        <div class="row content">
+                            <div class="carousel-content col-lg-6">
+                                 <h2><font style="font-size: 62px;">Slide Title</font></h2>
+                                <p class="lead">Use this snippet to presents your content in a slideshow-like format. Don't write about products or services here, write about solutions.</p>
+                                <p>
+                                    <a href="/contactus" class="btn btn-primary mb-2">Contact us</a>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- #02 -->
+                <div class="carousel-item oe_img_bg pt96 pb96" style="background-image: url('/web/image/website.s_carousel_default_image_2');" data-name="Slide">
+                    <div class="container">
+                        <div class="row content">
+                            <div class="carousel-content col-lg-8 offset-lg-2 bg-black-50 text-center pt48 pb40">
+                                <h2 style="font-size: 62px;">Clever Slogan</h2>
+                                <div class="s_hr pt8 pb24" data-snippet="s_hr" data-name="Separator">
+                                    <hr class="w-25 mx-auto" style="border-top-width: 1px; border-top-style: solid;"/>
+                                </div>
+                                <p class="lead">Storytelling is powerful.<br/> It draws readers in and engages them.</p>
+                                <p><a href="/" class="btn btn-primary mb-2">Start your journey</a></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- #03 -->
+                <div class="carousel-item oe_img_bg pt128 pb128" style="background-image: url('/web/image/website.s_carousel_default_image_3');" data-name="Slide">
+                    <div class="container">
+                        <div class="row content">
+                            <div class="carousel-content col-lg-6 offset-lg-6">
+                                <h2><font style="font-size: 62px; background-color: rgb(255, 255, 255);">Edit this title</font></h2>
+                                <h4><font style="background-color: rgb(255, 255, 255);">Good writing is simple, but not simplistic.</font></h4>
+                                <p><br/></p>
+                                <p>Good copy starts with understanding how your product or service helps your customers. Simple words communicate better than big words and pompous language.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Controls -->
+            <a class="carousel-control-prev o_not_editable" contenteditable="false" href="#myCarousel" data-slide="prev" role="img" aria-label="Previous" title="Previous">
+                <span class="carousel-control-prev-icon"/>
+                <span class="sr-only">Previous</span>
+            </a>
+            <a class="carousel-control-next o_not_editable" contenteditable="false" href="#myCarousel" data-slide="next" role="img" aria-label="Next" title="Next">
+                <span class="carousel-control-next-icon"/>
+                <span class="sr-only">Next</span>
+            </a>
+        </div>
+    </section>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_chart.xml b/addons/website/views/snippets/s_chart.xml
new file mode 100644
index 00000000..822531bc
--- /dev/null
+++ b/addons/website/views/snippets/s_chart.xml
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_chart" name="Chart">
+    <div class="s_chart" data-type="bar" data-legend-position="top" data-tooltip-display="true" data-stacked="false" data-border-width="2"
+            data-data="{
+                &quot;labels&quot;:[&quot;First&quot;,&quot;Second&quot;,&quot;Third&quot;,&quot;Fourth&quot;,&quot;Fifth&quot;],
+                &quot;datasets&quot;:[
+                    {
+                        &quot;label&quot;:&quot;One&quot;,
+                        &quot;data&quot;:[&quot;12&quot;,&quot;24&quot;,&quot;18&quot;,&quot;17&quot;,&quot;10&quot;],
+                        &quot;backgroundColor&quot;:&quot;o-color-1&quot;,
+                        &quot;borderColor&quot;:&quot;o-color-1&quot;
+                    }
+                ]
+            }">
+        <h2>A Chart Title</h2>
+        <canvas/>
+    </div>
+</template>
+
+<template id="s_chart_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-js="InnerChart" string="Chart"
+            data-selector=".s_chart">
+            <we-row string="Background">
+                <t t-call="web_editor.snippet_options_background_color_widget"/>
+            </we-row>
+            <we-select string="Type" data-attribute-name="type" data-attribute-default-value="bar">
+                <we-button data-select-data-attribute="bar" data-name="bar_chart_opt">Bar Vertical</we-button>
+                <we-button data-select-data-attribute="horizontalBar" data-name="horizontal_bar_chart_opt">Bar Horizontal</we-button>
+                <we-button data-select-data-attribute="line">Line</we-button>
+                <we-button data-select-data-attribute="pie">Pie</we-button>
+                <we-button data-select-data-attribute="doughnut">Doughnut</we-button>
+                <we-button data-select-data-attribute="radar">Radar</we-button>
+            </we-select>
+            <we-checkbox string="Stacked" data-name="stacked_chart_opt" data-dependencies="bar_chart_opt, horizontal_bar_chart_opt"
+                        data-select-data-attribute="false|true" data-attribute-name="stacked" data-no-preview="true"/>
+            <we-select string="Legend" data-attribute-name="legendPosition" data-attribute-default-value="top">
+                <we-button data-select-data-attribute="none">None</we-button>
+                <we-button data-select-data-attribute="top">Top</we-button>
+                <we-button data-select-data-attribute="left">Left</we-button>
+                <we-button data-select-data-attribute="bottom">Bottom</we-button>
+                <we-button data-select-data-attribute="right">Right</we-button>
+            </we-select>
+            <we-checkbox string="Tooltip" data-select-data-attribute="false|true" data-attribute-name="tooltipDisplay" data-no-preview="true"/>
+            <we-matrix>
+                <table>
+                    <tr>
+                        <th/>
+                        <th><we-button class="add_column fa fa-fw fa-plus o_we_link o_we_text_success d-inline-block"/></th>
+                    </tr>
+                    <tr>
+                        <th><we-button class="add_row fa fa-fw fa-plus o_we_link o_we_text_success d-inline-block"/></th>
+                    </tr>
+                </table>
+            </we-matrix>
+            <we-colorpicker string="Background" data-name="chart_bg_color_opt"
+                data-color-change=""
+                data-attribute-name="backgroundColor"
+                data-no-preview="true"/>
+            <we-colorpicker string="Border" data-name="chart_border_color_opt"
+                data-color-change=""
+                data-attribute-name="borderColor"
+                data-no-preview="true"/>
+            <we-input string="Border Width" data-select-data-attribute="2px" data-attribute-name="borderWidth" data-unit="px"/>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_chart_js_000" inherit_id="website.assets_frontend">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/src/snippets/s_chart/000.js"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_color_blocks_2.xml b/addons/website/views/snippets/s_color_blocks_2.xml
new file mode 100644
index 00000000..b48bddc8
--- /dev/null
+++ b/addons/website/views/snippets/s_color_blocks_2.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Big Boxes" id="s_color_blocks_2">
+    <section class="s_color_blocks_2">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-lg-6 o_cc o_cc3 text-center">
+                    <i class="fa fa-shield fa-5x m-3"/>
+                    <h2>A color block</h2>
+                    <p>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">More Details</a>
+                </div>
+                <div class="col-lg-6 o_cc o_cc5 text-center">
+                    <i class="fa fa-cube fa-5x m-3"/>
+                    <h2>Another color block</h2>
+                    <p>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">More Details</a>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="assets_snippet_s_color_blocks_2_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_color_blocks_2/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_company_team.xml b/addons/website/views/snippets/s_company_team.xml
new file mode 100644
index 00000000..80e6c1b0
--- /dev/null
+++ b/addons/website/views/snippets/s_company_team.xml
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_company_team" name="Team">
+    <section class="s_company_team pt48 pb48">
+        <div class="container">
+            <div class="row s_nb_column_fixed">
+                <div class="col-lg-6 pt24 pb24">
+                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                        <div class="col-lg-4 pb16 o_not_editable" contenteditable="false">
+                            <img alt="" src="/web/image/website.s_company_team_image_1" class="img-fluid rounded-circle mx-auto" contenteditable="true"/>
+                        </div>
+                        <div class="col-lg-8">
+                            <h4>Tony Fred, CEO</h4>
+                            <p>
+                                Founder and chief visionary, Tony is the driving force behind the company. He loves
+                                to keep his hands full by participating in the development of the software,
+                                marketing, and customer experience strategies.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6 pt24 pb24">
+                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                        <div class="col-lg-4 pb16 o_not_editable" contenteditable="false">
+                            <img alt="" src="/web/image/website.s_company_team_image_2" class="img-fluid rounded-circle mx-auto" contenteditable="true"/>
+                        </div>
+                        <div class="col-lg-8">
+                            <h4>Mich Stark, COO</h4>
+                            <p>Mich loves taking on challenges. With his multi-year experience as Commercial Director in the software industry, Mich has helped the company to get where it is today. Mich is among the best minds.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6 pt24 pb24">
+                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                        <div class="col-lg-4 pb16 o_not_editable" contenteditable="false">
+                            <img alt="" src="/web/image/website.s_company_team_image_3" class="img-fluid rounded-circle mx-auto" contenteditable="true"/>
+                        </div>
+                        <div class="col-lg-8">
+                            <h4>Aline Turner, CTO</h4>
+                            <p>Aline is one of the iconic people in life who can say they love what they do. She mentors 100+ in-house developers and looks after the community of thousands of developers.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6 pt24 pb24">
+                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                        <div class="col-lg-4 pb16 o_not_editable" contenteditable="false">
+                            <img alt="" src="/web/image/website.s_company_team_image_4" class="img-fluid rounded-circle mx-auto" contenteditable="true"/>
+                        </div>
+                        <div class="col-lg-8">
+                            <h4>Iris Joe, CFO</h4>
+                            <p>Iris, with her international experience, helps us easily understand the numbers and improves them. She is determined to drive success and delivers her professional acumen to bring the company to the next level.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="assets_snippet_s_company_team_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_company_team/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_comparisons.xml b/addons/website/views/snippets/s_comparisons.xml
new file mode 100644
index 00000000..987eaca3
--- /dev/null
+++ b/addons/website/views/snippets/s_comparisons.xml
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_comparisons" name="Comparisons">
+    <section class="s_comparisons pt32 pb32">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-4 s_col_no_bgcolor text-center pt32 pb16" data-name="Box">
+                    <div class="card bg-200">
+                        <h4 class="card-header">Beginner</h4>
+                        <div class="card-body text-center">
+                            <h2 class="card-title">
+                                <span class="s_comparisons_currency">$</span>
+                                <span class="s_comparisons_price"><b>35</b></span>
+                                <span class="s_comparisons_decimal">.00</span>
+                            </h2>
+                            <small>/ month</small>
+                        </div>
+                        <ul class="list-group list-group-flush">
+                            <li class="list-group-item">Basic sales &amp; marketing for up to 2 users</li>
+                            <li class="list-group-item">Account &amp; Sales management</li>
+                            <li class="list-group-item">No customization</li>
+                            <li class="list-group-item">No support</li>
+                        </ul>
+                        <div class="card-footer">
+                            <p><i>Instant setup, satisfied or reimbursed.</i></p>
+                            <a href="/contactus" class="btn btn-primary mb-2">Order now</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-4 s_col_no_bgcolor text-center pt32 pb16" data-name="Box">
+                    <div class="card bg-o-color-5">
+                        <h4 class="card-header">Professional</h4>
+                        <div class="card-body">
+                            <h2 class="card-title">
+                                <span class="s_comparisons_currency">$</span>
+                                <span class="s_comparisons_price"><b>65</b></span>
+                                <span class="s_comparisons_decimal">.00</span>
+                            </h2>
+                            <small>/ month</small>
+                        </div>
+                        <ul class="list-group list-group-flush">
+                            <li class="list-group-item">Complete CRM for any size team</li>
+                            <li class="list-group-item">Get access to all modules</li>
+                            <li class="list-group-item">Limited customization</li>
+                            <li class="list-group-item">Email support</li>
+                        </ul>
+                        <div class="card-footer">
+                            <p><i>Instant setup, satisfied or reimbursed.</i></p>
+                            <a href="/contactus" class="btn btn-primary mb-2">Start now</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-4 s_col_no_bgcolor text-center pt32 pb16" data-name="Box">
+                    <div class="card bg-secondary">
+                        <h4 class="card-header">Expert</h4>
+                        <div class="card-body text-center">
+                            <h2 class="card-title">
+                                <span class="s_comparisons_currency">$</span>
+                                <span class="s_comparisons_price"><b>125</b></span>
+                                <span class="s_comparisons_decimal">.00</span>
+                            </h2>
+                            <small>/ month</small>
+                        </div>
+                        <ul class="list-group list-group-flush">
+                            <li class="list-group-item">Unlimited CRM power and support</li>
+                            <li class="list-group-item">Get access to all modules and features</li>
+                            <li class="list-group-item">Unlimited customization</li>
+                            <li class="list-group-item">24x7 toll-free support</li>
+                        </ul>
+                        <div class="card-footer">
+                            <p><i>Instant setup, satisfied or reimbursed.</i></p>
+                            <a href="/contactus" class="btn btn-primary mb-2">Contact us</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="assets_snippet_s_comparisons_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_comparisons/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_countdown.xml b/addons/website/views/snippets/s_countdown.xml
new file mode 100644
index 00000000..9b366662
--- /dev/null
+++ b/addons/website/views/snippets/s_countdown.xml
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_countdown" name="Countdown">
+    <section class="s_countdown pt48 pb48"
+        data-display="dhms" data-end-action="nothing" data-size="175"
+        t-att-data-end-time="datetime.datetime.now().timestamp() + 228307"
+        data-layout="circle" data-layout-background="none"
+        data-progress-bar-style="surrounded" data-progress-bar-weight="thin"
+        data-text-color="o-color-1" data-layout-background-color="400" data-progress-bar-color="o-color-1">
+        <div class="container">
+            <div class="s_countdown_canvas_wrapper text-center"/>
+        </div>
+    </section>
+</template>
+
+<template id="s_countdown_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-js="countdown" data-selector=".s_countdown">
+            <we-datetimepicker string="Due Date" data-select-data-attribute="" data-attribute-name="endTime"/>
+            <we-row>
+                <we-select string="What should happen at the end?" data-no-preview="true">
+                    <we-button data-end-action="nothing" data-name="no_end_action_opt">Nothing</we-button>
+                    <we-button data-end-action="redirect" data-name="redirect_end_action_opt">Redirect</we-button>
+                    <we-button data-end-action="message">Show Message</we-button>
+                </we-select>
+                <we-button class="align-self-end toggle-edit-message" title="Edit Message"><i class="fa fa-eye fa-fw"/></we-button>
+            </we-row>
+            <we-checkbox string="Hide countdown at the end" data-dependencies="!no_end_action_opt"
+                        data-select-class="hide-countdown"/>
+            <we-urlpicker string="URL" data-dependencies="redirect_end_action_opt"
+                        data-select-data-attribute="" placeholder="e.g. /my-awesome-page" data-attribute-name="redirectUrl"/>
+            <we-select string="Size" data-attribute-name="size">
+                <we-button data-select-data-attribute="80">Small</we-button>
+                <we-button data-select-data-attribute="120">Medium</we-button>
+                <we-button data-select-data-attribute="175">Large</we-button>
+            </we-select>
+            <we-select string="Display" data-attribute-name="display">
+                <we-button data-select-data-attribute="d">D</we-button>
+                <we-button data-select-data-attribute="dhm">D - H - M</we-button>
+                <we-button data-select-data-attribute="dhms">D - H - M - S</we-button>
+            </we-select>
+            <we-colorpicker string="Text Color" data-attribute-name="textColor" data-select-data-attribute=""/>
+            <we-select string="Layout">
+                <we-button data-layout="circle" data-name="circle_layout_opt">Circle</we-button>
+                <we-button data-layout="boxes" data-name="boxes_layout_opt">Boxes</we-button>
+                <we-button data-layout="clean">Clean</we-button>
+                <we-button data-layout="text">Text Inline</we-button>
+            </we-select>
+            <we-select string="Layout Background" data-attribute-name="layoutBackground" data-dependencies="circle_layout_opt, boxes_layout_opt">
+                <we-button data-select-data-attribute="inner">Inner</we-button>
+                <we-button data-select-data-attribute="plain">Plain</we-button>
+                <we-button data-select-data-attribute="none" data-name="no_background_layout_opt">None</we-button>
+            </we-select>
+            <we-colorpicker string="Layout Background Color" data-dependencies="!no_background_layout_opt"
+                            data-attribute-name="layoutBackgroundColor" data-select-data-attribute=""/>
+            <we-select string="Progress Bar Style" data-attribute-name="progressBarStyle" data-dependencies="circle_layout_opt, boxes_layout_opt">
+                <we-button data-select-data-attribute="surrounded">Surrounded</we-button>
+                <we-button data-select-data-attribute="disappear">Disappearing</we-button>
+                <we-button data-select-data-attribute="none" data-name="no_progressbar_style_opt">None</we-button>
+            </we-select>
+            <we-select string="Progress Bar Weight" data-attribute-name="progressBarWeight" data-dependencies="!no_progressbar_style_opt">
+                <we-button data-select-data-attribute="thin">Thin</we-button>
+                <we-button data-select-data-attribute="thick">Thick</we-button>
+            </we-select>
+            <we-colorpicker string="Progress Bar Color" data-dependencies="!no_progressbar_style_opt"
+                            data-attribute-name="progressBarColor" data-select-data-attribute=""/>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_countdown_js_000" inherit_id="website.assets_frontend">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/src/snippets/s_countdown/000.js"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_cover.xml b/addons/website/views/snippets/s_cover.xml
new file mode 100644
index 00000000..caaa0c2a
--- /dev/null
+++ b/addons/website/views/snippets/s_cover.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_cover" name="Cover">
+    <section class="s_cover parallax s_parallax_is_fixed bg-black-50 pt96 pb96" data-scroll-background-ratio="1">
+        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;"/>
+        <div class="o_we_bg_filter bg-black-50"/>
+        <div class="container s_allow_columns">
+            <h1 style="text-align: center;"><font style="font-size: 62px; font-weight: bold;">Catchy Headline</font></h1>
+            <p class="lead" style="text-align: center;">Write one or two paragraphs describing your product, services or a specific feature.<br/> To be successful your content needs to be useful to your readers.</p>
+            <p style="text-align: center;">
+                <a href="/contactus" class="btn btn-primary mb-2">Contact us</a>
+            </p>
+        </div>
+    </section>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_dynamic_snippet.xml b/addons/website/views/snippets/s_dynamic_snippet.xml
new file mode 100644
index 00000000..683274bc
--- /dev/null
+++ b/addons/website/views/snippets/s_dynamic_snippet.xml
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="website.s_dynamic_snippet_template">
+        <section t-attf-class="#{snippet_name} s_dynamic d-none pt24 pb24">
+            <div class="container o_not_editable">
+                <div class="css_non_editable_mode_hidden">
+                    <div class="missing_option_warning alert alert-info rounded-0 fade show d-print-none">
+                        Your Dynamic Snippet will be displayed here... This message is displayed because you did not provided both a filter and a template to use.<br/>
+                    </div>
+                </div>
+                <div class="dynamic_snippet_template"/>
+            </div>
+        </section>
+    </template>
+    <template id="s_dynamic_snippet" name="Dynamic Snippet">
+        <t t-call="website.s_dynamic_snippet_template">
+            <t t-set="snippet_name" t-value="'s_dynamic_snippet'"/>
+        </t>
+    </template>
+    <template id="website.s_dynamic_snippet_options_template">
+        <div t-attf-data-js="#{snippet_name}" t-attf-data-selector="#{snippet_selector}" data-no-preview="true">
+            <we-select string="Filter" data-name="filter_opt" data-attribute-name="filterId">
+            </we-select>
+            <we-select string="Template" data-name="template_opt" data-attribute-name="templateKey" data-no-preview="true">
+            </we-select>
+            <we-select string="Fetched elements" data-name="number_of_records_opt" data-attribute-name="numberOfRecords" data-no-preview="true">
+                <we-button data-select-data-attribute="1">1</we-button>
+                <we-button data-select-data-attribute="2">2</we-button>
+                <we-button data-select-data-attribute="3">3</we-button>
+                <we-button data-select-data-attribute="4">4</we-button>
+                <we-button data-select-data-attribute="6">6</we-button>
+                <we-button data-select-data-attribute="7">7</we-button>
+                <we-button data-select-data-attribute="8">8</we-button>
+                <we-button data-select-data-attribute="9">9</we-button>
+                <we-button data-select-data-attribute="10">10</we-button>
+                <we-button data-select-data-attribute="11">11</we-button>
+                <we-button data-select-data-attribute="12">12</we-button>
+                <we-button data-select-data-attribute="13">13</we-button>
+                <we-button data-select-data-attribute="14">14</we-button>
+                <we-button data-select-data-attribute="15">15</we-button>
+                <we-button data-select-data-attribute="16">16</we-button>
+            </we-select>
+            <we-title class="mt-2"><t t-esc="grouping_message"/></we-title>
+            <we-select string="⌙ Normal devices" data-name="number_of_elements_opt" data-attribute-name="numberOfElements" data-no-preview="true"><!-- &emsp; -->
+                <we-button data-select-data-attribute="1">1</we-button>
+                <we-button data-select-data-attribute="2">2</we-button>
+                <we-button data-select-data-attribute="3">3</we-button>
+                <we-button data-select-data-attribute="4">4</we-button>
+                <we-button data-select-data-attribute="6">6</we-button>
+            </we-select>
+            <we-select string="⌙ Small devices" data-name="number_of_elements_small_devices_opt" data-attribute-name="numberOfElementsSmallDevices" data-no-preview="true"><!-- &emsp; -->
+                <we-button data-select-data-attribute="1">1</we-button>
+                <we-button data-select-data-attribute="2">2</we-button>
+                <we-button data-select-data-attribute="3">3</we-button>
+            </we-select>
+            <t t-raw="0"/>
+        </div>
+    </template>
+    <template id="s_dynamic_snippet_options" inherit_id="website.snippet_options">
+        <xpath expr="." position="inside">
+            <t t-call="website.s_dynamic_snippet_options_template">
+                <t t-set="snippet_name" t-value="'dynamic_snippet'"/>
+                <t t-set="snippet_selector" t-value="'.s_dynamic_snippet'"/>
+                <t t-set="grouping_message">Items per row</t>
+            </t>
+        </xpath>
+    </template>
+    <template id="assets_snippet_s_dynamic_snippet_css_000" inherit_id="website.assets_frontend">
+        <xpath expr="//link[last()]" position="after">
+            <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_dynamic_snippet/000.scss"/>
+        </xpath>
+    </template>
+    <template id="assets_snippet_s_dynamic_snippet_js_000" inherit_id="website.assets_frontend">
+        <xpath expr="//script[last()]" position="after">
+            <script type="text/javascript" src="/website/static/src/snippets/s_dynamic_snippet/000.js"/>
+        </xpath>
+    </template>
+</odoo>
diff --git a/addons/website/views/snippets/s_dynamic_snippet_carousel.xml b/addons/website/views/snippets/s_dynamic_snippet_carousel.xml
new file mode 100644
index 00000000..ea17154f
--- /dev/null
+++ b/addons/website/views/snippets/s_dynamic_snippet_carousel.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <template id="s_dynamic_snippet_carousel" name="Dynamic Carousel">
+        <t t-call="website.s_dynamic_snippet_template">
+            <t t-set="snippet_name" t-value="'s_dynamic_snippet_carousel'"/>
+        </t>
+    </template>
+    <template id="dynamic_snippet_carousel_options_template">
+        <t t-call="website.s_dynamic_snippet_options_template">
+            <t t-set="snippet_name" t-value="snippet_name"/>
+            <t t-set="snippet_selector" t-value="snippet_selector"/>
+            <t t-set="grouping_message">Items per slide</t>
+            <we-input string="Speed"
+                  data-select-data-attribute="1s" data-name="speed_opt" data-attribute-name="carouselInterval" data-no-preview="true"
+                  data-unit="s" data-save-unit="ms" data-step="0.1"/>
+            <t t-raw="0"/>
+        </t>
+    </template>
+    <template id="s_dynamic_snippet_carousel_options"  inherit_id="website.snippet_options">
+        <xpath expr="." position="inside">
+            <t t-call="website.dynamic_snippet_carousel_options_template">
+                <t t-set="snippet_name" t-value="'dynamic_snippet_carousel'"/>
+                <t t-set="snippet_selector" t-value="'.s_dynamic_snippet_carousel'"/>
+            </t>
+        </xpath>
+    </template>
+    <template id="assets_snippet_s_dynamic_snippet_carousel_css_000" inherit_id="website.assets_snippet_s_dynamic_snippet_css_000">
+        <xpath expr="//link[last()]" position="after">
+            <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_dynamic_snippet_carousel/000.scss"/>
+        </xpath>
+    </template>
+    <template id="assets_snippet_s_dynamic_snippet_carousel_js_000" inherit_id="website.assets_snippet_s_dynamic_snippet_js_000">
+        <xpath expr="//script[last()]" position="after">
+            <script type="text/javascript" src="/website/static/src/snippets/s_dynamic_snippet_carousel/000.js"/>
+        </xpath>
+    </template>
+</odoo>
diff --git a/addons/website/views/snippets/s_facebook_page.xml b/addons/website/views/snippets/s_facebook_page.xml
new file mode 100644
index 00000000..c7b772de
--- /dev/null
+++ b/addons/website/views/snippets/s_facebook_page.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<!-- Snippet template -->
+<template id="s_facebook_page" name="Facebook">
+    <div class="o_facebook_page"/>
+</template>
+
+<!-- Snippet options-->
+<template id="s_facebook_page_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div string="Page URL" data-js="facebookPage" data-selector=".o_facebook_page">
+            <we-input class="o_we_large_input" data-page-url="https://www.facebook.com/Odoo" data-no-preview="true"/>
+            <we-checkbox string="Cover Photo" data-option-name="show_cover" data-toggle-option="true" data-no-preview="true"/>
+            <we-checkbox string="Timeline" data-option-name="tab.timeline" data-toggle-option="true" data-no-preview="true"/>
+            <we-checkbox string="Events" data-option-name="tab.events" data-toggle-option="true" data-no-preview="true"/>
+            <we-checkbox string="Messages" data-option-name="tab.messages" data-toggle-option="true" data-no-preview="true"/>
+            <we-checkbox string="Small Header" data-option-name="small_header" data-toggle-option="true" data-no-preview="true"/>
+            <we-checkbox string="Friends' Faces" data-option-name="show_facepile" data-toggle-option="true" data-no-preview="true"/>
+        </div>
+    </xpath>
+</template>
+
+<!-- Snippet assets -->
+<template id="assets_snippet_s_facebook_page_js_000" inherit_id="website.assets_frontend">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/src/snippets/s_facebook_page/000.js"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_faq_collapse.xml b/addons/website/views/snippets/s_faq_collapse.xml
new file mode 100644
index 00000000..2154b51b
--- /dev/null
+++ b/addons/website/views/snippets/s_faq_collapse.xml
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_faq_collapse" name="Accordion">
+    <section class="s_faq_collapse pt32 pb32">
+        <div class="container">
+            <div id="myCollapse" class="accordion" role="tablist">
+                <div class="card bg-white" data-name="Item">
+                    <a href="#" role="tab" data-toggle="collapse" aria-expanded="true" class="card-header">Terms of service</a>
+                    <div class="collapse show" role="tabpanel">
+                        <div class="card-body">
+                            <p class="card-text">These terms of service ("Terms", "Agreement") are an agreement between the website ("Website operator", "us", "we" or "our") and you ("User", "you" or "your"). This Agreement sets forth the general terms and conditions of your use of this website and any of its products or services (collectively, "Website" or "Services").</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="card bg-white" data-name="Item">
+                    <a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header">Links to other Websites</a>
+                    <div class="collapse" role="tabpanel">
+                        <div class="card-body">
+                            <p class="card-text">Although this Website may be linked to other websites, we are not, directly or indirectly, implying any approval, association, sponsorship, endorsement, or affiliation with any linked website, unless specifically stated herein.</p>
+                            <p class="card-text">You should carefully review the legal statements and other conditions of use of any website which you access through a link from this Website. Your linking to any other off-site pages or other websites is at your own risk.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="card bg-white" data-name="Item">
+                    <a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header">Use of Cookies</a>
+                    <div class="collapse" role="tabpanel">
+                        <div class="card-body">
+                            <p class="card-text">Website may use cookies to personalize and facilitate maximum navigation of the User by this site. The User may configure his / her browser to notify and reject the installation of the cookies sent by us.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="assets_snippet_s_faq_collapse_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_faq_collapse/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_features.xml b/addons/website/views/snippets/s_features.xml
new file mode 100644
index 00000000..0fa92f6f
--- /dev/null
+++ b/addons/website/views/snippets/s_features.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_features" name="Features">
+    <section class="s_features pt32 pb32">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-4 pt32 pb32 text-center">
+                    <i class="fa fa-3x fa-gear rounded bg-primary m-3"/>
+                    <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">
+                    <i class="fa fa-3x fa-photo rounded bg-o-color-5 m-3"/>
+                    <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">
+                    <i class="fa fa-3x fa-leaf rounded bg-secondary m-3"/>
+                    <h3>Third Feature</h3>
+                    <p>A small explanation of this great <br/>feature, in clear words.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_features_grid.xml b/addons/website/views/snippets/s_features_grid.xml
new file mode 100644
index 00000000..ecb45fab
--- /dev/null
+++ b/addons/website/views/snippets/s_features_grid.xml
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_features_grid" name="Features Grid">
+    <section class="s_features_grid pt48 pb24">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-6 s_col_no_bgcolor pb24">
+                    <div class="row">
+                        <div class="col-lg-12 pb24" data-name="Box">
+                            <h2>First list of Features</h2>
+                            <h5>Add a great slogan.</h5>
+                        </div>
+                        <div class="col-lg-12 pt16 pb16" data-name="Box">
+                            <i class="fa fa-2x fa-font-awesome rounded-circle bg-primary s_features_grid_icon"/>
+                            <div class="s_features_grid_content">
+                                <h4>Change Icons</h4>
+                                <p>Double click an icon to replace it with one of your choice.</p>
+                            </div>
+                        </div>
+                        <div class="col-lg-12 pt16 pb16" data-name="Box">
+                            <i class="fa fa-2x fa-files-o rounded-circle bg-primary s_features_grid_icon"/>
+                            <div class="s_features_grid_content">
+                                <h4>Duplicate</h4>
+                                <p>Duplicate blocks and columns to add more features.</p>
+                            </div>
+                        </div>
+                        <div class="col-lg-12 pt16 pb16" data-name="Box">
+                            <i class="fa fa-2x fa-trash rounded-circle bg-primary s_features_grid_icon"/>
+                            <div class="s_features_grid_content">
+                                <h4>Delete Blocks</h4>
+                                <p>Select and delete blocks to remove features.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6 s_col_no_bgcolor pb24">
+                    <div class="row">
+                        <div class="col-lg-12 pb24" data-name="Box">
+                            <h2>Second list of Features</h2>
+                            <h5>Add a great slogan.</h5>
+                        </div>
+                        <div class="col-lg-12 pt16 pb16" data-name="Box">
+                            <i class="fa fa-2x fa-magic rounded bg-secondary s_features_grid_icon"/>
+                            <div class="s_features_grid_content">
+                                <h4>Great Value</h4>
+                                <p>Turn every feature into a benefit for your reader.</p>
+                            </div>
+                        </div>
+                        <div class="col-lg-12 pt16 pb16" data-name="Box">
+                            <i class="fa fa-2x fa-eyedropper rounded bg-secondary s_features_grid_icon"/>
+                            <div class="s_features_grid_content">
+                                <h4>Edit Styles</h4>
+                                <p>You can edit colors and backgrounds to highlight features.</p>
+                            </div>
+                        </div>
+                        <div class="col-lg-12 pt16 pb16" data-name="Box">
+                            <i class="fa fa-2x fa-picture-o rounded bg-secondary s_features_grid_icon"/>
+                            <div class="s_features_grid_content">
+                                <h4>Sample Icons</h4>
+                                <p>All these icons are completely free for commercial use.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="assets_snippet_s_features_grid_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_features_grid/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_google_map.xml b/addons/website/views/snippets/s_google_map.xml
new file mode 100644
index 00000000..47f2e795
--- /dev/null
+++ b/addons/website/views/snippets/s_google_map.xml
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Google Map" id="s_google_map">
+    <section class="s_google_map pt256 pb256" data-map-type="ROADMAP" data-map-color="" data-map-zoom="12" data-map-gps="(50.854975,4.3753899)" data-pin-style="flat">
+        <div class="map_container"/>
+    </section>
+</template>
+
+<!-- Snippet's Options -->
+<template id="s_google_map_options" inherit_id="website.snippet_options">
+    <xpath expr="//div[@data-js='Box']" position="before">
+        <div data-js="GoogleMap" data-selector=".s_google_map">
+            <we-gpspicker string="Address"
+                          data-select-data-attribute="" data-attribute-name="mapGps"
+                          data-set-formatted-address=""
+                          placeholder="e.g. De Brouckere, Brussels, Belgium"
+                          data-no-preview="true"/>
+            <we-select string="Marker style" data-attribute-name="pinStyle">
+                <we-button data-select-data-attribute="">Default</we-button>
+                <we-button data-select-data-attribute="flat">Flat</we-button>
+            </we-select>
+            <we-select string="Type" data-no-preview="true" data-reset-map-color="" data-attribute-name="mapType">
+                <we-button data-name="roadmap_opt" data-select-data-attribute="ROADMAP">RoadMap</we-button>
+                <we-button data-select-data-attribute="TERRAIN">Terrain</we-button>
+                <we-button data-select-data-attribute="SATELLITE">Satellite</we-button>
+                <we-button data-select-data-attribute="HYBRID">Hybrid</we-button>
+            </we-select>
+            <we-select string="⌙ Style" data-dependencies="roadmap_opt" data-no-preview="true" data-attribute-name="mapColor">
+                <we-button data-select-data-attribute=""
+                           data-img="/website/static/src/snippets/s_google_map/img/thumbs/map-default.jpg"/>
+                <we-button data-select-data-attribute="lightMonoMap"
+                           data-img="/website/static/src/snippets/s_google_map/img/thumbs/map-lightMono.jpg"/>
+                <we-button data-select-data-attribute="cupertinoMap"
+                           data-img="/website/static/src/snippets/s_google_map/img/thumbs/map-cupertino.jpg"/>
+                <we-button data-select-data-attribute="retroMap"
+                           data-img="/website/static/src/snippets/s_google_map/img/thumbs/map-retro.jpg"/>
+                <we-button data-select-data-attribute="cobaltMap"
+                           data-img="/website/static/src/snippets/s_google_map/img/thumbs/map-cobalt.jpg"/>
+                <we-button data-select-data-attribute="flatMap"
+                           data-img="/website/static/src/snippets/s_google_map/img/thumbs/map-flat.jpg"/>
+                <we-button data-select-data-attribute="blueMap"
+                           data-img="/website/static/src/snippets/s_google_map/img/thumbs/map-blue.jpg"/>
+                <we-button data-select-data-attribute="lillaMap"
+                           data-img="/website/static/src/snippets/s_google_map/img/thumbs/map-lilla.jpg"/>
+                <we-button data-select-data-attribute="carMap"
+                           data-img="/website/static/src/snippets/s_google_map/img/thumbs/map-caramello.jpg"/>
+                <we-button data-select-data-attribute="bwMap"
+                           data-img="/website/static/src/snippets/s_google_map/img/thumbs/map-bw.jpg"/>
+            </we-select>
+            <we-input string="Zoom" data-select-data-attribute="12" data-no-preview="true" data-attribute-name="mapZoom" data-step="1"/>
+            <we-checkbox string="Description" data-no-preview="true" data-show-description="true"/>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_google_map_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_google_map/000.scss"/>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_google_map_js_000" inherit_id="website.assets_frontend">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/src/snippets/s_google_map/000.js"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_hr.xml b/addons/website/views/snippets/s_hr.xml
new file mode 100644
index 00000000..9e5cb555
--- /dev/null
+++ b/addons/website/views/snippets/s_hr.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_hr" name="Separator">
+    <div class="s_hr text-left pt32 pb32">
+        <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid;"/>
+    </div>
+</template>
+
+<template id="s_hr_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-selector=".s_hr" data-target="hr">
+            <t t-call="website.snippet_options_border_line_widgets">
+                <t t-set="label">Border</t>
+                <t t-set="direction" t-value="'top'"/>
+            </t>
+            <we-select string="Width">
+                <we-button data-select-class="w-25">25%</we-button>
+                <we-button data-select-class="w-50">50%</we-button>
+                <we-button data-select-class="w-75">75%</we-button>
+                <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
+            </we-select>
+            <we-button-group string="Alignment" data-dependencies="!so_width_100">
+                <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
+                <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
+                <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
+            </we-button-group>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_hr_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_hr/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_image_gallery.xml b/addons/website/views/snippets/s_image_gallery.xml
new file mode 100644
index 00000000..06e91519
--- /dev/null
+++ b/addons/website/views/snippets/s_image_gallery.xml
@@ -0,0 +1,110 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_image_gallery" name="Image Gallery">
+    <section class="s_image_gallery o_slideshow s_image_gallery_show_indicators s_image_gallery_indicators_rounded pt24"
+             data-vcss="001"
+             data-columns="3" style="height: 500px; overflow: hidden;">
+        <div class="container">
+            <div class="alert alert-info css_non_editable_mode_hidden text-center" role="status"><span class="o_add_images" style="cursor: pointer;"><i class="fa fa-plus-circle"/> Add Images</span></div>
+        </div>
+    </section>
+</template>
+
+<template id="s_images_wall" name="Images Wall">
+    <section class="s_image_gallery o_spc-small o_masonry pt24 pb24"
+             data-vcss="001"
+             data-columns="3" style="height: 500px; overflow: hidden;">
+        <div class="container">
+            <div class="alert alert-info css_non_editable_mode_hidden text-center" role="status"><span class="o_add_images" style="cursor: pointer;"><i class="fa fa-plus-circle"/> Add Images</span></div>
+        </div>
+    </section>
+</template>
+
+<template id="s_image_gallery_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-js="gallery" data-selector=".s_image_gallery">
+            <we-select string="Mode" data-dependencies="!slideshow_mode_opt">
+                <we-button data-mode="grid" data-name="grid_mode_opt">Grid</we-button>
+                <we-button data-mode="masonry" data-name="masonry_mode_opt">Masonry</we-button>
+                <we-button data-mode="nomode">Float</we-button>
+
+                <!-- Hidden option -->
+                <we-button data-mode="slideshow" data-name="slideshow_mode_opt">Slideshow</we-button>
+            </we-select>
+            <we-input string="Speed"
+                  data-dependencies="slideshow_mode_opt"
+                  data-apply-to=".carousel:first"
+                  data-select-data-attribute="0s" data-attribute-name="interval"
+                  data-unit="s" data-save-unit="ms" data-step="0.1"/>
+            <we-select string="Columns" data-dependencies="masonry_mode_opt, grid_mode_opt">
+                <we-button data-columns="1">1</we-button>
+                <we-button data-columns="2">2</we-button>
+                <we-button data-columns="3">3</we-button>
+                <we-button data-columns="4">4</we-button>
+                <we-button data-columns="6">6</we-button>
+                <we-button data-columns="12">12</we-button>
+            </we-select>
+            <we-select string="Images spacing" data-dependencies="!slideshow_mode_opt">
+                <we-button data-select-class="o_spc-none">None</we-button>
+                <we-button data-select-class="o_spc-small">Small</we-button>
+                <we-button data-select-class="o_spc-medium">Medium</we-button>
+                <we-button data-select-class="o_spc-big">Big</we-button>
+            </we-select>
+            <we-select string="Styling" data-apply-to="img">
+                <we-button data-select-class="">Standard</we-button>
+                <we-button data-select-class="img-thumbnail">Thumbnails</we-button>
+                <we-button data-select-class="rounded-pill">Circle</we-button>
+                <we-button data-select-class="shadow">Shadows</we-button>
+            </we-select>
+            <we-select string="Arrows" data-dependencies="slideshow_mode_opt">
+                <we-button data-select-class="">Standard</we-button>
+                <we-button data-select-class="s_image_gallery_indicators_arrows_boxed">Boxed</we-button>
+                <we-button data-select-class="s_image_gallery_indicators_arrows_rounded">Rounded</we-button>
+            </we-select>
+            <we-checkbox string="Image Cover" data-select-class="s_image_gallery_cover" data-dependencies="slideshow_mode_opt"/>
+            <we-select string="Indicators" data-dependencies="slideshow_mode_opt">
+                <we-button data-select-class="">None</we-button>
+                <we-button data-select-class="s_image_gallery_show_indicators s_image_gallery_indicators_dots">Dots</we-button>
+                <we-button data-select-class="s_image_gallery_show_indicators">Squared Miniatures</we-button>
+                <we-button data-select-class="s_image_gallery_show_indicators s_image_gallery_indicators_rounded">Rounded Miniatures</we-button>
+            </we-select>
+            <t t-call="website.snippet_options_border_widgets">
+                <t t-set="apply_to" t-valuef="img"/>
+                <t t-set="so_rounded_no_dependencies" t-value="true"/>
+            </t>
+            <we-row string="Images">
+                <we-button data-add-images="true" data-no-preview="true">Add</we-button>
+                <we-button data-remove-all-images="true" data-no-preview="true">Remove all</we-button>
+            </we-row>
+        </div>
+        <div data-js="gallery_img" data-selector=".s_image_gallery img">
+            <we-row string="Re-order" data-no-preview="true">
+                <we-button title="Move to first" data-position="first"><i class="fa fa-fw fa-angle-double-left"/></we-button>
+                <we-button title="Move to previous" data-position="prev"><i class="fa fa-fw fa-angle-left"/></we-button>
+                <we-button title="Move to next" data-position="next"><i class="fa fa-fw fa-angle-right"/></we-button>
+                <we-button title="Move to last" data-position="last"><i class="fa fa-fw fa-angle-double-right"/></we-button>
+            </we-row>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_image_gallery_css_000" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_image_gallery/000.scss"/>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_image_gallery_css_001" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_image_gallery/001.scss"/>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_image_gallery_js_000" inherit_id="website.assets_frontend">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/src/snippets/s_image_gallery/000.js"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_image_text.xml b/addons/website/views/snippets/s_image_text.xml
new file mode 100644
index 00000000..ee8dedf8
--- /dev/null
+++ b/addons/website/views/snippets/s_image_text.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_image_text" name="Image - Text">
+    <section class="s_text_image pt32 pb32">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-6 pt16 pb16">
+                    <img src="/web/image/website.s_image_text_default_image" class="img img-fluid mx-auto" alt=""/>
+                </div>
+                <div class="col-lg-6 pt16 pb16">
+                    <h2>Section Subtitle</h2>
+                    <p>Write one or two paragraphs describing your product or services. To be successful your content needs to be useful to your readers.</p>
+                    <p>Start with the customer – find out what they want and give it to them.</p>
+                    <p><a href="#" class="btn btn-primary mb-2">Discover more</a></p>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_masonry_block.xml b/addons/website/views/snippets/s_masonry_block.xml
new file mode 100644
index 00000000..b0d5c3cc
--- /dev/null
+++ b/addons/website/views/snippets/s_masonry_block.xml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<!-- Template -->
+<template id="s_masonry_block" name="Masonry">
+    <section class="s_masonry_block" data-vcss="001">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-lg-6 oe_img_bg text-center pb224 pt224" data-name="Block"
+                     style="background-image: url(/web/image/website.s_masonry_block_default_image_1);">
+                    <p><br/></p>
+                </div>
+                <div class="col-lg-6">
+                    <div class="row h-100">
+                        <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc3" data-name="Block">
+                            <h3>A great title</h3>
+                            <p>And a great subtitle</p>
+                        </div>
+                        <div class="col-lg-6 pt24 pb8 text-center bg-200" data-name="Block">
+                            <h3>A great title</h3>
+                            <p>And a great subtitle</p>
+                        </div>
+                        <div class="col-lg-6 pt24 pb8 text-center bg-200" data-name="Block">
+                            <h3>A great title</h3>
+                            <p>And a great subtitle</p>
+                        </div>
+                        <div class="col-lg-6 pt24 pb8 text-center o_cc o_cc4" data-name="Block">
+                            <h3>A great title</h3>
+                            <p>And a great subtitle</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<!-- Assets -->
+<template id="_assets_snippet_s_masonry_block_css_000_variables" inherit_id="website._assets_primary_variables" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_masonry_block/000_variables.scss"/>
+    </xpath>
+</template>
+<template id="assets_snippet_s_masonry_block_css_000" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_masonry_block/000.scss"/>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_masonry_block_css_001" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_masonry_block/001.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml
new file mode 100644
index 00000000..f1470e65
--- /dev/null
+++ b/addons/website/views/snippets/s_media_list.xml
@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Media List" id="s_media_list">
+    <section class="s_media_list bg-200 pt32 pb32" data-vcss="001">
+        <div class="container">
+            <div class="row s_nb_column_fixed s_col_no_bgcolor">
+                <div class="col-lg-12 s_media_list_item pt16 pb16" data-name="Media item">
+                    <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                        <div class="col-lg-4 align-self-stretch s_media_list_img_wrapper">
+                            <img src="/web/image/website.s_media_list_default_image_1" class="s_media_list_img h-100 w-100" alt=""/>
+                        </div>
+                        <div class="col-lg-8 s_media_list_body">
+                            <h3>Media heading</h3>
+                            <p>Use this snippet to build various types of components that feature a left- or right-aligned image alongside textual content. Duplicate the element to create a list that fits your needs.</p>
+                            <a href="#" class="btn btn-primary mb-2">Discover</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-12 s_media_list_item pt16 pb16" data-name="Media item">
+                    <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                        <div class="col-lg-4 align-self-stretch s_media_list_img_wrapper">
+                            <img src="/web/image/website.s_media_list_default_image_2" class="s_media_list_img h-100 w-100" alt=""/>
+                        </div>
+                        <div class="col-lg-8 s_media_list_body">
+                            <h3>Event heading</h3>
+                            <p>Speakers from all over the world will join our experts to give inspiring talks on various topics. Stay on top of the latest business management trends &amp; technologies</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-12 s_media_list_item pt16 pb16" data-name="Media item">
+                    <div class="row s_col_no_resize s_col_no_bgcolor no-gutters align-items-center o_cc o_cc1">
+                        <div class="col-lg-4 align-self-stretch s_media_list_img_wrapper">
+                            <img src="/web/image/website.s_media_list_default_image_3" class="s_media_list_img h-100 w-100" alt=""/>
+                        </div>
+                        <div class="col-lg-8 s_media_list_body">
+                            <h3>Post heading</h3>
+                            <p>Use this component for creating a list of featured elements to which you want to bring attention.</p>
+                            <a href="#">Continue reading <i class="fa fa-long-arrow-right align-middle ml-1"/></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_media_list_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <t t-call="web_editor.snippet_options_background_options">
+            <t t-set="selector" t-value="'.s_media_list_item'"/>
+            <t t-set="target" t-value="'> .row'"/>
+            <t t-set="with_colors" t-value="True"/>
+            <t t-set="with_images" t-value="False"/>
+            <t t-set="with_color_combinations" t-value="True"/>
+        </t>
+        <div data-js="Box" data-selector=".s_media_list_item" data-target="> .row">
+            <t t-call="website.snippet_options_border_widgets"/>
+            <t t-call="website.snippet_options_shadow_widgets"/>
+        </div>
+        <div data-selector=".s_media_list_item" data-target="> .row">
+            <we-button-group string="Layout">
+                <we-button title="Left"
+                           data-name="media_left_opt"
+                           data-select-class=""
+                           data-img="/website/static/src/img/snippets_options/image_left.svg"/>
+                <we-button title="Right"
+                           data-select-class="flex-row-reverse"
+                           data-img="/website/static/src/img/snippets_options/image_right.svg"/>
+            </we-button-group>
+        </div>
+        <div data-js="MediaItemLayout" data-selector=".s_media_list_item">
+            <we-button-group string="Image Size" data-dependencies="media_left_opt">
+                <we-button data-layout="3"
+                           data-img="/website/static/src/img/snippets_options/media_layout_1_4.svg"
+                           title="1/4 - 3/4"/>
+                <we-button data-layout="4"
+                           data-img="/website/static/src/img/snippets_options/media_layout_1_3.svg"
+                           title="1/3 - 2/3"/>
+                <we-button data-layout="6"
+                           data-img="/website/static/src/img/snippets_options/media_layout_1_2.svg"
+                           title="1/2 - 1/2"/>
+            </we-button-group>
+            <we-button-group string="Image Size" data-dependencies="!media_left_opt">
+                <we-button data-layout="3"
+                           data-img="/website/static/src/img/snippets_options/media_layout_1_4_right.svg"
+                           title="1/4 - 3/4"/>
+                <we-button data-layout="4"
+                           data-img="/website/static/src/img/snippets_options/media_layout_1_3_right.svg"
+                           title="1/3 - 2/3"/>
+                <we-button data-layout="6"
+                           data-img="/website/static/src/img/snippets_options/media_layout_1_2_right.svg"
+                           title="1/2 - 1/2"/>
+            </we-button-group>
+        </div>
+
+        <div data-selector=".s_media_list_item" data-target="> .row">
+            <!-- Don't use the standard Vert. Alignement option to not suggest
+                 Equal Height, which is useless for this snippet. -->
+            <we-button-group string="Text Position" title="Text Position" data-dependencies="media_left_opt">
+                <we-button title="Align Top"
+                           data-select-class="align-items-start"
+                           data-img="/website/static/src/img/snippets_options/align_top_right.svg"/>
+                <we-button title="Align Middle"
+                           data-select-class="align-items-center"
+                           data-img="/website/static/src/img/snippets_options/align_middle_right.svg"/>
+                <we-button title="Align Bottom"
+                           data-select-class="align-items-end"
+                           data-img="/website/static/src/img/snippets_options/align_bottom_right.svg"/>
+            </we-button-group>
+            <we-button-group string="Text Position" title="Text Position" data-dependencies="!media_left_opt">
+                <we-button title="Align Top"
+                           data-select-class="align-items-start"
+                           data-img="/website/static/src/img/snippets_options/align_top.svg"/>
+                <we-button title="Align Middle"
+                           data-select-class="align-items-center"
+                           data-img="/website/static/src/img/snippets_options/align_middle.svg"/>
+                <we-button title="Align Bottom"
+                           data-select-class="align-items-end"
+                           data-img="/website/static/src/img/snippets_options/align_bottom.svg"/>
+            </we-button-group>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_media_list_css_000" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_media_list/000.scss"/>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_media_list_css_001" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_media_list/001.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_mega_menu_menu_image_menu.xml b/addons/website/views/snippets/s_mega_menu_menu_image_menu.xml
new file mode 100644
index 00000000..061b30a2
--- /dev/null
+++ b/addons/website/views/snippets/s_mega_menu_menu_image_menu.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_mega_menu_menu_image_menu" name="Menu - Image - Menu">
+    <section class="s_mega_menu_menu_image_menu py-4">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-4 py-2 text-center">
+                    <h4 class="o_default_snippet_text" >Left Menu</h4>
+                    <nav class="nav flex-column">
+                        <t t-foreach="3" t-as="i">
+                            <t t-set="text">Menu Item %s</t>
+                            <t t-set="text" t-value="text % (i + 1)"/>
+                            <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item"
+                                t-esc="text"/>
+                        </t>
+                    </nav>
+                </div>
+                <div class="col-lg-4 py-2 text-center">
+                    <img class="img-fluid" src="/web/image/website.s_mega_menu_menu_image_menu_default_image"/>
+                </div>
+                <div class="col-lg-4 py-2 text-center">
+                    <h4 class="o_default_snippet_text">Right Menu</h4>
+                    <nav class="nav flex-column">
+                        <t t-foreach="3" t-as="i">
+                            <t t-set="text">Menu Item %s</t>
+                            <t t-set="text" t-value="text % (i + 1)"/>
+                            <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item"
+                                t-esc="text"/>
+                        </t>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_mega_menu_multi_menus.xml b/addons/website/views/snippets/s_mega_menu_multi_menus.xml
new file mode 100644
index 00000000..5672fb0c
--- /dev/null
+++ b/addons/website/views/snippets/s_mega_menu_multi_menus.xml
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_mega_menu_multi_menus" name="Multi-Menus">
+    <section class="s_mega_menu_multi_menus py-4">
+        <div class="container">
+            <div class="row">
+                <t t-set="menu1_title">First Menu</t>
+                <t t-set="menu2_title">Second Menu</t>
+                <t t-set="menu3_title">Third Menu</t>
+                <t t-set="menu4_title">Last Menu</t>
+                <t t-foreach="[menu1_title, menu2_title, menu3_title, menu4_title]" t-as="menu_title">
+                    <div class="col-lg-3 py-2 text-center">
+                        <h4 class="o_default_snippet_text" t-esc="menu_title"/>
+                        <nav class="nav flex-column">
+                            <t t-foreach="3" t-as="i">
+                                <t t-set="text">Menu Item %s</t>
+                                <t t-set="text" t-value="text % (i + 1)"/>
+                                <a href="#" class="nav-link o_default_snippet_text" data-name="Menu Item"
+                                   t-esc="text"/>
+                            </t>
+                        </nav>
+                    </div>
+                </t>
+            </div>
+        </div>
+    </section>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_numbers.xml b/addons/website/views/snippets/s_numbers.xml
new file mode 100644
index 00000000..4e7c01de
--- /dev/null
+++ b/addons/website/views/snippets/s_numbers.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Numbers" id="s_numbers">
+    <section class="s_numbers o_cc o_cc2 pt24 pb24">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-3 text-center pt24 pb24">
+                    <span class="s_number display-4">12</span>
+                    <h6>Useful options</h6>
+                </div>
+                <div class="col-lg-3 text-center pt24 pb24">
+                    <span class="s_number display-4">45</span>
+                    <h6>Beautiful snippets</h6>
+                </div>
+                <div class="col-lg-3 text-center pt24 pb24">
+                    <span class="s_number display-4">8</span>
+                    <h6>Amazing pages</h6>
+                </div>
+                <div class="col-lg-3 text-center pt24 pb24">
+                    <span class="s_number display-4">37</span>
+                    <h6>Outstanding images</h6>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<!-- No associated CSS but there is some in theme overrides -->
+<template id="assets_snippet_s_numbers_css_000" inherit_id="website.assets_frontend">
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_parallax.xml b/addons/website/views/snippets/s_parallax.xml
new file mode 100644
index 00000000..0cc06cc3
--- /dev/null
+++ b/addons/website/views/snippets/s_parallax.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_parallax" name="Parallax">
+    <section class="s_parallax parallax s_parallax_is_fixed bg-black-50 o_half_screen_height" data-scroll-background-ratio="1">
+        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 75%;"/>
+        <div class="o_we_bg_filter bg-black-50"/>
+        <div class="oe_structure oe_empty"/>
+    </section>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_picture.xml b/addons/website/views/snippets/s_picture.xml
new file mode 100644
index 00000000..9fe4d252
--- /dev/null
+++ b/addons/website/views/snippets/s_picture.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_picture" name="Picture">
+    <section class="s_picture bg-200 pt48 pb24">
+        <div class="container">
+            <h2 style="text-align: center;"><font style="font-size: 62px;">A punchy Headline</font></h2>
+            <p style="text-align: center;">Choose a vibrant image and write an inspiring paragraph about it.<br/> It does not have to be long, but it should reinforce your image.</p>
+            <p style="text-align: center;"><br/></p>
+            <div class="row s_nb_column_fixed">
+                <div class="col-lg-10 offset-lg-1 pb24" style="text-align: center;">
+                    <figure class="figure">
+                        <img src="/web/image/website.s_picture_default_image" class="figure-img img-thumbnail padding-large" alt=""/>
+                        <figcaption class="figure-caption text-muted py-3">Add a caption to enhance the meaning of this image.</figcaption>
+                    </figure>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_popup.xml b/addons/website/views/snippets/s_popup.xml
new file mode 100644
index 00000000..6dd329f4
--- /dev/null
+++ b/addons/website/views/snippets/s_popup.xml
@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_popup" name="Popup">
+    <div class="s_popup o_snippet_invisible" data-vcss="001">
+        <div class="modal fade s_popup_middle"
+             style="background-color: var(--black-50) !important;"
+             data-show-after="5000"
+             data-display="afterDelay"
+             data-consents-duration="7"
+             data-focus="false"
+             data-backdrop="false"
+             tabindex="-1"
+             role="dialog">
+            <div class="modal-dialog d-flex">
+                <div class="modal-content oe_structure">
+                    <div class="s_popup_close js_close_popup o_we_no_overlay o_not_editable" aria-label="Close">×</div>
+                    <section class="s_banner oe_img_bg pt96 pb96"
+                             data-snippet="s_banner"
+                             style="background-image: url('/web/image/website.s_popup_default_image');">
+                        <div class="container">
+                            <div class="row s_nb_column_fixed">
+                                <div class="col-lg-10 offset-lg-1 text-center o_cc o_cc1 jumbotron pt48 pb48">
+                                    <h2><font style="font-size: 62px;">Win $20</font></h2>
+                                    <p class="lead">Check out now and get $20 off your first order.</p>
+                                    <a href="#" class="btn btn-primary mb-2">New customer</a>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<template id="s_popup_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <t t-set="base_popup_options">
+            <we-select string="Position" data-dependencies="layout_popup_opt"> <!-- When cookie configuration only display this for popup mode -->
+                <we-button data-select-class="s_popup_top" data-name="position_top">Top</we-button>
+                <we-button data-select-class="s_popup_middle" data-name="position_middle">Middle</we-button>
+                <we-button data-select-class="s_popup_bottom" data-name="position_bottom">Bottom</we-button>
+            </we-select>
+            <we-select string="Size" data-apply-to=".modal-dialog" data-name="s_popup_size_opt">
+                <we-button data-select-class="modal-sm">Small</we-button>
+                <we-button data-select-class="" data-name="s_popup_size_md">Medium</we-button>
+                <we-button data-select-class="modal-lg">Large</we-button>
+                <we-button data-select-class="modal-xl">Extra Large</we-button>
+                <we-button data-select-class="s_popup_size_full" data-name="s_popup_size_full">Full</we-button>
+            </we-select>
+            <we-row string="Backdrop">
+                <we-checkbox data-name="popup_backdrop_opt"
+                             data-select-class="s_popup_no_backdrop|"
+                             data-set-backdrop="true"
+                             data-no-preview="true"/>
+                <we-colorpicker data-dependencies="popup_backdrop_opt"
+                                data-select-style="true"
+                                data-css-property="background-color"
+                                data-color-prefix="bg-"
+                                data-css-compatible="true"/>
+            </we-row>
+        </t>
+        <t t-set="extra_popup_options">
+            <we-colorpicker string="Close Button Color"
+                            data-select-style="true"
+                            data-css-property="color"
+                            data-color-prefix="text-"
+                            data-apply-to=".s_popup_close"/>
+            <we-select string="Display" data-attribute-name="display" data-attribute-default-value="always">
+                <we-button data-select-data-attribute="afterDelay" data-name="show_delay">Delay</we-button>
+                <we-button data-select-data-attribute="mouseExit">On Exit</we-button>
+            </we-select>
+            <we-input string="⌙ Delay"
+                      title="Automatically opens the pop-up if the user stays on a page longer than the specified time."
+                      data-select-data-attribute=""
+                      data-attribute-name="showAfter"
+                      data-unit="s"
+                      data-save-unit="ms"
+                      data-dependencies="show_delay"/>
+            <t t-set="unit_popup_duration">days</t>
+            <we-input string="Hide For" title="Once the user closes the popup, it won't be shown again for that period of time." t-attf-data-select-data-attribute="7#{unit_popup_duration}" data-attribute-name="consentsDuration" t-att-data-unit="unit_popup_duration"/>
+            <we-select string="Show on" data-no-preview="true">
+                <we-button data-move-block="moveToBody">This page</we-button>
+                <we-button data-move-block="moveToFooter">All pages</we-button>
+            </we-select>
+        </t>
+        <div data-js="SnippetPopup" data-selector=".s_popup" data-exclude="#website_cookies_bar" data-target=".modal">
+            <t t-raw="base_popup_options"/>
+            <t t-raw="extra_popup_options"/>
+        </div>
+        <div data-js="SnippetPopup" data-selector=".s_popup#website_cookies_bar" data-target=".modal">
+            <t t-raw="base_popup_options"/>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_popup_css_000" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_popup/000.scss"/>
+    </xpath>
+</template>
+<template id="assets_snippet_s_popup_css_001" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_popup/001.scss"/>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_popup_js_000" inherit_id="website.assets_frontend">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/src/snippets/s_popup/000.js"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_process_steps.xml b/addons/website/views/snippets/s_process_steps.xml
new file mode 100644
index 00000000..62dee97b
--- /dev/null
+++ b/addons/website/views/snippets/s_process_steps.xml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Steps" id="s_process_steps">
+    <section class="s_process_steps pt24 pb24">
+        <div class="container">
+            <div class="row no-gutters">
+                <div class="col-lg-3 s_process_step pt24 pb24">
+                    <div class="s_process_step_icon">
+                        <span>
+                            <i class="fa fa-shopping-basket fa-2x mx-auto rounded-circle bg-primary"/>
+                        </span>
+                    </div>
+                    <div class="s_process_step_content text-center">
+                        <h2>Add to cart</h2>
+                        <p>Let your customers follow <br/>and understand your process.</p>
+                    </div>
+                </div>
+                <div class="col-lg-3 s_process_step pt24 pb24">
+                    <div class="s_process_step_icon">
+                        <span>
+                            <i class="fa fa-unlock-alt fa-2x mx-auto rounded-circle bg-o-color-5"/>
+                        </span>
+                    </div>
+                    <div class="s_process_step_content text-center">
+                        <h2>Sign in</h2>
+                        <p>Click on the icon to adapt it <br/>to your purpose.</p>
+                    </div>
+                </div>
+                <div class="col-lg-3 s_process_step pt24 pb24">
+                    <div class="s_process_step_icon">
+                        <span>
+                            <i class="fa fa-paypal fa-2x mx-auto rounded-circle bg-secondary"/>
+                        </span>
+                    </div>
+                    <div class="s_process_step_content text-center">
+                        <h2>Pay</h2>
+                        <p>Duplicate blocks <br/>to add more steps.</p>
+                    </div>
+                </div>
+                <div class="col-lg-3 s_process_step pt24 pb24">
+                    <div class="s_process_step_icon">
+                        <span>
+                            <i class="fa fa-plane fa-2x mx-auto rounded-circle bg-o-color-3"/>
+                        </span>
+                    </div>
+                    <div class="s_process_step_content text-center">
+                        <h2>Get Delivered</h2>
+                        <p>Select and delete blocks <br/>to remove some steps.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="assets_snippet_s_process_steps_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_process_steps/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_product_catalog.xml b/addons/website/views/snippets/s_product_catalog.xml
new file mode 100644
index 00000000..91821f7c
--- /dev/null
+++ b/addons/website/views/snippets/s_product_catalog.xml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_product_catalog" name="Pricelist">
+    <section class="s_product_catalog oe_img_bg oe_custom_bg pt48 pb32"
+             style="background-image: url('/web/image/website.s_product_catalog_default_image');"
+             data-vcss="001">
+        <div class="container">
+            <h2>Menu</h2>
+            <p>Add a menu description.</p>
+            <div class="row">
+                <div class="col-lg-6 pt16 pb16">
+                    <h3>Starter</h3>
+                    <ul class="list-unstyled my-3">
+                        <t t-call="website.s_product_catalog_dish">
+                            <t t-set="name">Cheese Onion Rings</t>
+                            <t t-set="price">$9.00</t>
+                        </t>
+                        <t t-call="website.s_product_catalog_dish">
+                            <t t-set="name">Chefs Fresh Soup of the Day</t>
+                            <t t-set="price">$7.50</t>
+                        </t>
+                        <t t-call="website.s_product_catalog_dish">
+                            <t t-set="name">Beef Carpaccio</t>
+                            <t t-set="price">$10.50</t>
+                        </t>
+                    </ul>
+                </div>
+                <div class="col-lg-6 pt16 pb16">
+                    <h3>Main Course</h3>
+                    <ul class="list-unstyled my-3">
+                        <t t-call="website.s_product_catalog_dish">
+                            <t t-set="name">Filet Mignon 8oz</t>
+                            <t t-set="price">$15.50</t>
+                        </t>
+                        <t t-call="website.s_product_catalog_dish">
+                            <t t-set="name">Farm Friendly Chicken Supreme</t>
+                            <t t-set="price">$15.50</t>
+                        </t>
+                        <t t-call="website.s_product_catalog_dish">
+                            <t t-set="name">Tuna and Salmon Burger</t>
+                            <t t-set="price">$12.00</t>
+                        </t>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_product_catalog_dish">
+    <li class="s_product_catalog_dish" data-name="Product">
+        <p class="s_product_catalog_dish_title d-flex align-items-baseline pb-2">
+            <span t-esc="name" class="s_product_catalog_dish_name"/>
+            <span t-esc="price" class="s_product_catalog_dish_price ml-auto pl-2"/>
+        </p>
+        <p class="s_product_catalog_dish_description border-top text-muted pt-1"><i>Add a description here</i></p>
+    </li>
+</template>
+
+<template id="s_product_catalog_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-js="ProductCatalog" data-selector=".s_product_catalog">
+            <we-checkbox string="Descriptions" data-toggle-description="true"
+                         data-no-preview="true"/>
+            <t t-call="website.snippet_options_border_line_widgets">
+                <t t-set="label">⌙ Separator</t>
+                <t t-set="direction" t-value="'top'"/>
+                <t t-set="apply_to" t-value="'.s_product_catalog_dish_description'"/>
+                <!-- Note: no need of extra dependency thanks to the apply-to -->
+            </t>
+        </div>
+        <div data-selector=".s_product_catalog_dish"/>
+    </xpath>
+    <xpath expr="//div[@data-js='SnippetMove']" position="attributes">
+        <attribute name="data-selector" add=".s_product_catalog_dish" separator=","/>
+        <attribute name="data-drop-near" add=".s_product_catalog_dish" separator=","/>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_product_catalog_css_001" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_product_catalog/001.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_product_list.xml b/addons/website/views/snippets/s_product_list.xml
new file mode 100644
index 00000000..3d451aa4
--- /dev/null
+++ b/addons/website/views/snippets/s_product_list.xml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Items" id="s_product_list">
+    <section class="s_product_list" >
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-lg-2 col-md-4 col-6">
+                    <a href="http://www.odoo.com">
+                        <img src="/web/image/website.s_product_list_default_image_1" alt="" class="img img-fluid"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="http://www.odoo.com" class="btn btn-primary">View item</a>
+                    </div>
+                </div>
+                <div class="col-lg-2 col-md-4 col-6">
+                    <a href="http://www.odoo.com">
+                        <img src="/web/image/website.s_product_list_default_image_2" alt="" class="img img-fluid"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="http://www.odoo.com" class="btn btn-primary">View item</a>
+                    </div>
+                </div>
+                <div class="col-lg-2 col-md-4 col-6">
+                    <a href="http://www.odoo.com">
+                        <img src="/web/image/website.s_product_list_default_image_3" alt="" class="img img-fluid"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="http://www.odoo.com" class="btn btn-primary">View item</a>
+                    </div>
+                </div>
+                <div class="col-lg-2 col-md-4 col-6">
+                    <a href="http://www.odoo.com">
+                        <img src="/web/image/website.s_product_list_default_image_4" alt="" class="img img-fluid"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="http://www.odoo.com" class="btn btn-primary">View item</a>
+                    </div>
+                </div>
+                <div class="col-lg-2 col-md-4 col-6">
+                    <a href="http://www.odoo.com">
+                        <img src="/web/image/website.s_product_list_default_image_5" alt="" class="img img-fluid"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="http://www.odoo.com" class="btn btn-primary">View item</a>
+                    </div>
+                </div>
+                <div class="col-lg-2 col-md-4 col-6">
+                    <a href="http://www.odoo.com">
+                        <img src="/web/image/website.s_product_list_default_image_6" alt="" class="img img-fluid"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="http://www.odoo.com" class="btn btn-primary">View item</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="_assets_snippet_s_product_list_css_000_variables" inherit_id="website._assets_primary_variables">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_product_list/000_variables.scss"/>
+    </xpath>
+</template>
+<template id="assets_snippet_s_product_list_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_product_list/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_progress_bar.xml b/addons/website/views/snippets/s_progress_bar.xml
new file mode 100644
index 00000000..a6fcaa73
--- /dev/null
+++ b/addons/website/views/snippets/s_progress_bar.xml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Progress Bar" id="s_progress_bar">
+    <div class="s_progress_bar" data-display="inline">
+        <h4>We are almost done!</h4>
+        <div class="progress">
+            <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%; min-width: 3%">
+                <span class="s_progress_bar_text">80% Development</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<template id="s_progress_bar_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-js="progress" data-selector=".s_progress_bar" >
+            <we-input string="Value" data-progress-bar-value="" data-unit="%"/>
+            <we-select string="Display">
+                <we-button data-display="inline">Inline</we-button>
+                <we-button data-display="below">Below Each Other</we-button>
+            </we-select>
+            <we-colorpicker string="Colors" data-apply-to=".progress-bar"
+                data-select-style="true"
+                data-css-property="background-color"
+                data-color-prefix="bg-"/>
+            <we-checkbox string="Striped" data-select-class="progress-bar-striped" data-apply-to=".progress-bar"/>
+            <we-checkbox string="Animated" data-select-class="progress-bar-animated" data-apply-to=".progress-bar"/>
+        </div>
+    </xpath>
+    <xpath expr="//div[@id='so_content_addition']" position="attributes">
+        <attribute name="data-selector" add=".s_progress_bar" separator=","/>
+        <attribute name="data-drop-near" add=".s_progress_bar" separator=","/>
+    </xpath>
+</template>
+
+<!-- No related CSS but there is some in theme overrides -->
+<template id="assets_snippet_s_progress_bar_css_000" inherit_id="website.assets_frontend">
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_quotes_carousel.xml b/addons/website/views/snippets/s_quotes_carousel.xml
new file mode 100644
index 00000000..54ed481c
--- /dev/null
+++ b/addons/website/views/snippets/s_quotes_carousel.xml
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_quotes_carousel" name="Quotes">
+    <section class="s_quotes_carousel_wrapper" data-vxml="001" data-vcss="001">
+        <div id="myQuoteCarousel" class="s_quotes_carousel s_carousel_default carousel slide bg-200" data-interval="10000">
+            <!-- Indicators -->
+            <ol class="carousel-indicators">
+                <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
+                <li data-target="#myQuoteCarousel" data-slide-to="1"></li>
+                <li data-target="#myQuoteCarousel" data-slide-to="2"></li>
+            </ol>
+            <!-- Content -->
+            <div class="carousel-inner">
+                <!-- #01 -->
+                <div class="carousel-item active pt80 pb80" data-name="Slide">
+                    <div class="container">
+                        <blockquote class="s_blockquote s_blockquote_classic blockquote mx-auto w-50" data-name="Blockquote">
+                            <i class="fa fa-1x fa-quote-left rounded float-left bg-o-color-2 s_blockquote_icon"/>
+                            <div class="s_blockquote_content o_cc1">
+                                <p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
+                                <footer class="blockquote-footer">
+                                    <img src="/web/image/website.s_quotes_carousel_demo_image_3" class="s_blockquote_avatar img rounded-circle mr-2" alt=""/>
+                                    <span class="s_blockquote_author"><b>Jane DOE</b> • CEO of MyCompany</span>
+                                </footer>
+                            </div>
+                        </blockquote>
+                    </div>
+                </div>
+                <!-- #02 -->
+                <div class="carousel-item oe_img_bg pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_1'); background-position: 50% 50%;" data-name="Slide">
+                    <div class="container">
+                        <blockquote class="s_blockquote s_blockquote_classic blockquote mr-auto w-50" data-name="Blockquote">
+                            <i class="fa fa-1x fa-quote-left rounded float-left bg-o-color-2 s_blockquote_icon"/>
+                            <div class="s_blockquote_content o_cc1">
+                                <p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
+                                <footer class="blockquote-footer">
+                                    <img src="/web/image/website.s_quotes_carousel_demo_image_4" class="s_blockquote_avatar img rounded-circle mr-2" alt=""/>
+                                    <span class="s_blockquote_author"><b>John DOE</b> • CEO of MyCompany</span>
+                                </footer>
+                            </div>
+                        </blockquote>
+                    </div>
+                </div>
+                <!-- #03 -->
+                <div class="carousel-item oe_img_bg pt80 pb80" style="background-image: url('/web/image/website.s_quotes_carousel_demo_image_2'); background-position: 50% 50%;" data-name="Slide">
+                    <div class="container">
+                        <blockquote class="s_blockquote s_blockquote_classic blockquote ml-auto w-50" data-name="Blockquote">
+                            <i class="fa fa-1x fa-quote-left rounded float-left bg-o-color-2 s_blockquote_icon"/>
+                            <div class="s_blockquote_content o_cc1">
+                                <p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
+                                <footer class="blockquote-footer">
+                                    <img src="/web/image/website.s_quotes_carousel_demo_image_5" class="s_blockquote_avatar img rounded-circle mr-2" alt=""/>
+                                    <span class="s_blockquote_author"><b>Iris DOE</b> • CEO of MyCompany</span>
+                                </footer>
+                            </div>
+                        </blockquote>
+                    </div>
+                </div>
+            </div>
+            <!-- Controls -->
+            <div class="carousel-control-prev o_not_editable" data-target="#myQuoteCarousel" data-slide="prev" role="img" aria-label="Previous" title="Previous">
+                <span class="carousel-control-prev-icon"/>
+                <span class="sr-only">Previous</span>
+            </div>
+            <div class="carousel-control-next o_not_editable" data-target="#myQuoteCarousel" data-slide="next" role="img" aria-label="Next" title="Next">
+                <span class="carousel-control-next-icon"/>
+                <span class="sr-only">Next</span>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="assets_snippet_s_quotes_carousel_css_000" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_quotes_carousel/000.scss"/>
+    </xpath>
+</template>
+<template id="assets_snippet_s_quotes_carousel_css_001" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_quotes_carousel/001.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_rating.xml b/addons/website/views/snippets/s_rating.xml
new file mode 100644
index 00000000..3a8d84e9
--- /dev/null
+++ b/addons/website/views/snippets/s_rating.xml
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_rating" name="Rating">
+    <div class="s_rating pt16 pb16" data-vcss="001" data-icon="fa-star">
+        <h4 class="s_rating_title">Quality</h4>
+        <div class="s_rating_icons o_not_editable">
+            <span class="s_rating_active_icons">
+                <i class="fa fa-star"/>
+                <i class="fa fa-star"/>
+                <i class="fa fa-star"/>
+            </span>
+            <span class="s_rating_inactive_icons">
+                <i class="fa fa-star-o"/>
+                <i class="fa fa-star-o"/>
+            </span>
+        </div>
+    </div>
+</template>
+
+<template id="s_rating_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-js="Rating" data-selector=".s_rating">
+            <we-select string="Icon">
+                <we-button data-set-icons="fa-star"><i class="fa fa-fw fa-star"/> Stars</we-button>
+                <we-button data-set-icons="fa-thumbs-up"><i class="fa fa-fw fa-thumbs-up"/> Thumbs</we-button>
+                <we-button data-set-icons="fa-circle"><i class="fa fa-fw fa-circle"/> Circles</we-button>
+                <we-button data-set-icons="fa-square"><i class="fa fa-fw fa-square"/> Squares</we-button>
+                <we-button data-set-icons="fa-heart"><i class="fa fa-fw fa-heart"/> Hearts</we-button>
+                <we-button data-set-icons="custom" class="d-none">Custom</we-button>
+            </we-select>
+            <we-row string="⌙ Active">
+                <we-colorpicker
+                    data-select-style=""
+                    data-apply-to=".s_rating_active_icons"
+                    data-css-property="color"
+                    data-color-prefix="text-"/>
+                <we-button data-custom-icon="true" data-custom-active-icon="true" data-no-preview="true">
+                    <i class="fa fa-fw fa-refresh mr-1"/> Replace Icon
+                </we-button>
+            </we-row>
+            <we-row string="⌙ Inactive">
+                <we-colorpicker
+                    data-select-style=""
+                    data-apply-to=".s_rating_inactive_icons"
+                    data-css-property="color"
+                    data-color-prefix="text-"/>
+                <we-button data-custom-icon="true" data-custom-active-icon="false" data-no-preview="true">
+                    <i class="fa fa-fw fa-refresh mr-1"/> Replace Icon
+                </we-button>
+            </we-row>
+            <we-row string="Score">
+                <we-input data-active-icons-number="true" data-step="1"/>
+                <span class="mx-2">/</span>
+                <we-input data-total-icons-number="true" data-step="1"/>
+            </we-row>
+            <we-button-group string="Size" data-apply-to=".s_rating_icons">
+                <we-button data-select-class=""
+                           title="Small"
+                           data-img="/website/static/src/img/snippets_options/size_small.svg"/>
+                <we-button data-select-class="fa-2x"
+                           title="Medium"
+                           data-img="/website/static/src/img/snippets_options/size_medium.svg"/>
+                <we-button data-select-class="fa-3x"
+                           title="Large"
+                           data-img="/website/static/src/img/snippets_options/size_large.svg"/>
+            </we-button-group>
+            <we-checkbox string="Display Inline" data-select-class="s_rating_inline" data-no-preview="true"/>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_rating_css_000" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_rating/000.scss"/>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_rating_css_001" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_rating/001.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_references.xml b/addons/website/views/snippets/s_references.xml
new file mode 100644
index 00000000..9c70e432
--- /dev/null
+++ b/addons/website/views/snippets/s_references.xml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_references" name="References">
+    <section class="s_references pt48 pb32">
+        <div class="container">
+            <h2 style="text-align: center;">Our References</h2>
+            <p style="text-align: center;">We are in good company.</p>
+            <div class="row">
+                <div class="col-lg-2 pt16 pb16">
+                    <img src="/web/image/website.s_reference_demo_image_1" class="img img-fluid mx-auto" alt=""/>
+                </div>
+                <div class="col-lg-2 pt16 pb16">
+                    <img src="/web/image/website.s_reference_demo_image_2" class="img img-fluid mx-auto" alt=""/>
+                </div>
+                <div class="col-lg-2 pt16 pb16">
+                    <img src="/web/image/website.s_reference_demo_image_3" class="img img-fluid mx-auto" alt=""/>
+                </div>
+                <div class="col-lg-2 pt16 pb16">
+                    <img src="/web/image/website.s_reference_demo_image_4" class="img img-fluid mx-auto" alt=""/>
+                </div>
+                <div class="col-lg-2 pt16 pb16">
+                    <img src="/web/image/website.s_reference_demo_image_5" class="img img-fluid mx-auto" alt=""/>
+                </div>
+                <div class="col-lg-2 pt16 pb16">
+                    <img src="/web/image/website.s_reference_default_image_6" class="img img-fluid mx-auto" alt=""/>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="assets_snippet_s_references_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_references/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_share.xml b/addons/website/views/snippets/s_share.xml
new file mode 100644
index 00000000..bbd7ac70
--- /dev/null
+++ b/addons/website/views/snippets/s_share.xml
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_share" name="Share">
+    <div t-attf-class="s_share text-left #{_classes}">
+        <h4 t-if="not _no_title" class="s_share_title d-none">Share</h4>
+        <a href="https://www.facebook.com/sharer/sharer.php?u={url}" t-attf-class="s_share_facebook #{_link_classes}" target="_blank">
+            <i t-attf-class="fa fa-facebook #{not _link_classes and 'rounded shadow-sm'}"/>
+        </a>
+        <a href="https://twitter.com/intent/tweet?text={title}&amp;url={url}" t-attf-class="s_share_twitter #{_link_classes}" target="_blank">
+            <i t-attf-class="fa fa-twitter #{not _link_classes and 'rounded shadow-sm'}"/>
+        </a>
+        <a href="http://www.linkedin.com/sharing/share-offsite/?url={url}" t-attf-class="s_share_linkedin #{_link_classes}" target="_blank">
+            <i t-attf-class="fa fa-linkedin #{not _link_classes and 'rounded shadow-sm'}"/>
+        </a>
+        <a href="https://wa.me/?text={title}" t-attf-class="s_share_whatsapp #{_link_classes}" target="_blank">
+            <i t-attf-class="fa fa-whatsapp #{not _link_classes and 'rounded shadow-sm'}"/>
+        </a>
+        <a href="http://pinterest.com/pin/create/button/?url={url}&amp;description={title}" t-attf-class="s_share_pinterest #{_link_classes}" target="_blank">
+            <i t-attf-class="fa fa-pinterest #{not _link_classes and 'rounded shadow-sm'}"/>
+        </a>
+        <a href="mailto:?body={url}&amp;subject={title}" t-attf-class="s_share_email #{_link_classes}">
+            <i t-attf-class="fa fa-envelope #{not _link_classes and 'rounded shadow-sm'}"/>
+        </a>
+    </div>
+</template>
+
+<template id="s_share_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-selector=".s_share">
+            <we-select string="Title Position" data-apply-to=".s_share_title">
+                <we-button data-select-class="d-block">Top</we-button>
+                <we-button data-select-class="">Left</we-button>
+                <we-button data-select-class="d-none">None</we-button>
+            </we-select>
+            <we-select string="Layout" data-apply-to=".fa">
+                <we-button data-select-class="rounded shadow-sm">Square</we-button>
+                <we-button data-select-class="rounded-empty-circle shadow-sm">Circle</we-button>
+                <we-button data-select-class="rounded-circle shadow-sm">Disk</we-button>
+                <we-button data-select-class="m-1">None</we-button>
+            </we-select>
+            <we-select string="Size" data-apply-to=".fa">
+                <we-button data-select-class="">Small</we-button>
+                <we-button data-select-class="fa-2x">Medium</we-button>
+                <we-button data-select-class="fa-3x">Big</we-button>
+            </we-select>
+            <!-- Compatibility, keep reverse logical, don't use `icon_color` -->
+            <we-checkbox string="Color" data-select-class="no_icon_color|"/>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_share_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_share/000.scss"/>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_share_js_000" inherit_id="website.assets_frontend">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/src/snippets/s_share/000.js"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_showcase.xml b/addons/website/views/snippets/s_showcase.xml
new file mode 100644
index 00000000..1b1ea7de
--- /dev/null
+++ b/addons/website/views/snippets/s_showcase.xml
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<!-- Template -->
+<template name="Showcase" id="s_showcase">
+    <section class="s_showcase 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-lg-right">
+                    <div class="row">
+                        <div class="col-lg-12 pt24 pb24" data-name="Block">
+                            <div class="s_showcase_title d-flex flex-lg-row-reverse mb-2">
+                                <i class="s_showcase_icon fa fa-2x fa-desktop text-secondary mr-3 mr-lg-0 ml-lg-3"/>
+                                <h3>First feature</h3>
+                            </div>
+                            <p>A short description of this great feature.</p>
+                        </div>
+                        <div class="col-lg-12 pt24 pb24" data-name="Block">
+                            <div class="s_showcase_title d-flex flex-lg-row-reverse mb-2">
+                                <i class="s_showcase_icon fa fa-2x fa-paint-brush text-secondary mr-3 mr-lg-0 ml-lg-3"/>
+                                <h3>Second feature</h3>
+                            </div>
+                            <p>A short description of this great feature.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-1">
+                    <div class="w-50 h-100 border-right"/>
+                </div>
+                <div class="col-lg">
+                    <div class="row">
+                        <div class="col-lg-12 pt24 pb24" data-name="Block">
+                            <div class="s_showcase_title d-flex mb-2">
+                                <i class="s_showcase_icon fa fa-2x fa-heart text-secondary mr-3"/>
+                                <h3>Another feature</h3>
+                            </div>
+                            <p>A short description of this great feature.</p>
+                        </div>
+                        <div class="col-lg-12 pt24 pb24" data-name="Block">
+                            <div class="s_showcase_title d-flex mb-2">
+                                <i class="s_showcase_icon fa fa-2x fa-gift text-secondary mr-3"/>
+                                <h3>Last Feature</h3>
+                            </div>
+                            <p>A short description of this great feature.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container text-lg-center">
+            <p><br/></p>
+            <a href="#" class="btn btn-primary mb-2">Discover all the features</a>
+        </div>
+    </section>
+</template>
+
+<!-- Options -->
+<template id="s_showcase_options" inherit_id="website.snippet_options">
+    <xpath expr="//div[@data-js='Box']" position="before">
+        <div data-js="Showcase" data-selector=".s_showcase .row > div:has(> .s_showcase_title)"/>
+    </xpath>
+</template>
+
+<!-- Assets -->
+<template id="assets_snippet_s_showcase_css_000" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_showcase/000.scss"/>
+    </xpath>
+</template>
+<template id="assets_snippet_s_showcase_css_001" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_showcase/001.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_table_of_content.xml b/addons/website/views/snippets/s_table_of_content.xml
new file mode 100644
index 00000000..a0dfa8fc
--- /dev/null
+++ b/addons/website/views/snippets/s_table_of_content.xml
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_table_of_content" name="Table of Content">
+    <section class="s_table_of_content pt24 pb24 o_cc o_cc1">
+        <div class="container">
+            <div class="row s_nb_column_fixed">
+                <div class="col-lg-3 s_table_of_content_navbar_wrap s_table_of_content_navbar_sticky
+                        s_table_of_content_vertical_navbar d-print-none d-none d-lg-block o_not_editable o_cc o_cc1"
+                        data-name="Navbar">
+                    <div class="s_table_of_content_navbar list-group"/>
+                </div>
+                <div class="col-lg-9 s_table_of_content_main oe_structure oe_empty" data-name="Content">
+                    <section class="pb16">
+                        <h1 data-anchor="true">Intuitive system</h1>
+                        <h4>What you see is what you get</h4>
+                        <p>
+                            Insert text styles like headers, bold, italic, lists, and fonts with
+                            a simple WYSIWYG editor. Flexible and easy to use.
+                        </p>
+                        <h4>Customization tool</h4>
+                        <p>
+                            Click and change content directly from the front-end: no complex back
+                            end to deal with.
+                        </p>
+                        <h4>Building blocks system</h4>
+                        <p>
+                            Create your page from scratch by dragging and dropping pre-made,
+                            fully customizable building blocks.
+                        </p>
+                    </section>
+                    <section class="pb16">
+                        <h1 data-anchor="true">Design features</h1>
+                        <h4>Bootstrap-based templates</h4>
+                        <p>
+                            Easily design your own Odoo templates thanks to clean HTML
+                            structure and bootstrap CSS.
+                        </p>
+                        <h4>Professional themes</h4>
+                        <p>
+                            Change theme in a few clicks, and browse through Odoo's catalog of
+                            ready-to-use themes available in our app store.
+                        </p>
+                    </section>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_table_of_content_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-js="TableOfContent" data-selector=".s_table_of_content"/>
+        <div data-js="TableOfContentNavbar" data-selector=".s_table_of_content_navbar_wrap">
+            <we-button-group string="Position">
+                <we-button title="Left" data-navbar-position="left"><i class="fa fa-fw fa-long-arrow-left"/></we-button>
+                <we-button title="Top" data-navbar-position="top"><i class="fa fa-fw fa-long-arrow-up"/></we-button>
+                <we-button title="Right" data-navbar-position="right"><i class="fa fa-fw fa-long-arrow-right"/></we-button>
+            </we-button-group>
+            <we-checkbox string="Sticky" data-select-class="s_table_of_content_navbar_sticky" data-no-preview="true"/>
+        </div>
+        <div data-js="TableOfContentMainColumns" data-selector=".s_table_of_content_navbar_wrap, .s_table_of_content_main"/>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_table_of_content_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_table_of_content/000.scss"/>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_table_of_content_js_000" inherit_id="website.assets_frontend">
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/src/snippets/s_table_of_content/000.js"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_tabs.xml b/addons/website/views/snippets/s_tabs.xml
new file mode 100644
index 00000000..9d428170
--- /dev/null
+++ b/addons/website/views/snippets/s_tabs.xml
@@ -0,0 +1,126 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_tabs" name="Tabs">
+    <section class="s_tabs pt48 pb48" data-vcss="001">
+        <div class="container">
+            <div class="s_tabs_main">
+                <div class="s_tabs_nav mb-3">
+                    <ul class="nav nav-pills justify-content-center" role="tablist">
+                        <li class="nav-item">
+                            <a class="nav-link active"
+                                id="nav_tabs_link_1"
+                                data-toggle="tab"
+                                href="#nav_tabs_content_1"
+                                role="tab"
+                                aria-controls="nav_tabs_content_1"
+                                aria-selected="true">Home</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link"
+                                id="nav_tabs_link_2"
+                                data-toggle="tab"
+                                href="#nav_tabs_content_2"
+                                role="tab"
+                                aria-controls="nav_tabs_content_2"
+                                aria-selected="false">Profile</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link"
+                                id="nav_tabs_link_3"
+                                data-toggle="tab"
+                                href="#nav_tabs_content_3"
+                                role="tab"
+                                aria-controls="nav_tabs_content_3"
+                                aria-selected="false">Contact</a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="s_tabs_content tab-content">
+                    <div class="tab-pane fade show active"
+                        id="nav_tabs_content_1"
+                        role="tabpanel"
+                        aria-labelledby="nav_tabs_link_1">
+                        <div class="oe_structure oe_empty"/>
+                    </div>
+                    <div class="tab-pane fade"
+                        id="nav_tabs_content_2"
+                        role="tabpanel"
+                        aria-labelledby="nav_tabs_link_2">
+                        <div class="oe_structure oe_empty"/>
+                    </div>
+                    <div class="tab-pane fade"
+                        id="nav_tabs_content_3"
+                        role="tabpanel"
+                        aria-labelledby="nav_tabs_link_3">
+                        <div class="oe_structure oe_empty"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_tabs_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-js="NavTabs" data-selector="section.s_tabs">
+            <we-button data-add-tab=""
+                       data-no-preview="true"
+                       class="o_we_text_success ml-0"
+                       title="Add Tab"
+                       aria-label="Add Tab">
+                <i class="fa fa-fw fa-plus"/>
+            </we-button>
+            <we-button data-remove-tab=""
+                       data-name="remove_tab_opt"
+                       data-no-preview="true"
+                       class="o_we_text_danger mr-3"
+                       title="Remove Tab"
+                       aria-label="Remove Tab">
+                <i class="fa fa-fw fa-minus"/>
+            </we-button>
+        </div>
+        <div data-js="NavTabsStyle" data-selector="section" data-target=".s_tabs_main">
+            <we-select string="Style">
+                <we-button data-set-style="tabs" data-name="tabs_opt" data-trigger="horizontal_opt">Tabs</we-button>
+                <we-button data-set-style="pills" data-name="pills_opt" data-trigger="tabs_color_opt" data-trigger-value="">Buttons</we-button>
+            </we-select>
+            <we-colorpicker string="Tabs color"
+                data-dependencies="tabs_opt"
+                data-name="tabs_color_opt"
+                data-select-style="true"
+                data-css-property="background-color"
+                data-color-prefix="bg-"/>
+            <we-select string="Direction" data-dependencies="pills_opt">
+                <we-button data-set-direction="horizontal" data-name="horizontal_opt">Horizontal</we-button>
+                <we-button data-set-direction="vertical" data-trigger="left_alignment_opt">Vertical</we-button>
+            </we-select>
+            <we-select string="Alignment" data-apply-to=".s_tabs_nav:first .nav" data-dependencies="horizontal_opt">
+                <we-button data-select-class="" data-name="left_alignment_opt">Left</we-button>
+                <we-button data-select-class="justify-content-center">Center</we-button>
+                <we-button data-select-class="justify-content-end">Right</we-button>
+            </we-select>
+            <we-select string="Fill and justify" data-apply-to=".s_tabs_nav:first .nav" data-dependencies="horizontal_opt">
+                <we-button data-select-class="">Regular</we-button>
+                <we-button data-select-class="nav-fill">Full Width</we-button>
+                <we-button data-select-class="nav-justified">Equal Widths</we-button>
+            </we-select>
+            <we-divider/>
+            <we-button-group string="Slide" data-apply-to=".s_tabs_content:first">
+                <we-button title="Slide Left" data-select-class="s_tabs_slide_left"><i class="fa fa-fw fa-long-arrow-left"/></we-button>
+                <we-button title="Slide Up" data-select-class="s_tabs_slide_up"><i class="fa fa-fw fa-long-arrow-up"/></we-button>
+                <we-button title="Slide Down" data-select-class="s_tabs_slide_down"><i class="fa fa-fw fa-long-arrow-down"/></we-button>
+                <we-button title="Slide Right" data-select-class="s_tabs_slide_right"><i class="fa fa-fw fa-long-arrow-right"/></we-button>
+                <we-button title="No Slide Effect" data-select-class=""><i class="fa fa-fw fa-ban"/></we-button>
+            </we-button-group>
+        </div>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_tabs_css_001" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_tabs/001.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_text_block.xml b/addons/website/views/snippets/s_text_block.xml
new file mode 100644
index 00000000..677f8b8f
--- /dev/null
+++ b/addons/website/views/snippets/s_text_block.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_text_block" name="Text">
+    <section class="s_text_block pt32 pb32">
+        <div class="container s_allow_columns">
+            <p>Great stories have a <b>personality</b>. Consider telling a great story that provides personality. Writing a story with personality for potential clients will assist with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.</p>
+            <p>Great stories are <b>for everyone</b> even when only written <b>for just one person</b>. If you try to write with a wide, general audience in mind, your story will sound fake and lack emotion. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
+        </div>
+    </section>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_text_highlight.xml b/addons/website/views/snippets/s_text_highlight.xml
new file mode 100644
index 00000000..3afd4f93
--- /dev/null
+++ b/addons/website/views/snippets/s_text_highlight.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Text Highlight" id="s_text_highlight">
+    <div class="s_text_highlight bg-secondary my-3 text-center w-100">
+        <div class="container">
+            <h3>Text Highlight</h3>
+            <p>Put the focus on what you have to say!</p>
+        </div>
+    </div>
+</template>
+
+<template id="assets_snippet_s_text_highlight_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_text_highlight/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_text_image.xml b/addons/website/views/snippets/s_text_image.xml
new file mode 100644
index 00000000..779a747d
--- /dev/null
+++ b/addons/website/views/snippets/s_text_image.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_text_image" name="Text - Image">
+    <section class="s_text_image pt32 pb32">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-6 pt16 pb16">
+                    <h2>A Section Subtitle</h2>
+                    <p>Write one or two paragraphs describing your product or services. To be successful your content needs to be useful to your readers.</p>
+                    <p>Start with the customer – find out what they want and give it to them.</p>
+                    <p><a href="#" class="btn btn-primary mb-2">Learn more</a></p>
+                </div>
+                <div class="col-lg-6 pt16 pb16">
+                    <img src="/web/image/website.s_text_image_default_image" class="img img-fluid mx-auto" alt=""/>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_three_columns.xml b/addons/website/views/snippets/s_three_columns.xml
new file mode 100644
index 00000000..01988d25
--- /dev/null
+++ b/addons/website/views/snippets/s_three_columns.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_three_columns" name="Columns">
+    <section class="s_three_columns bg-200 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 bg-white h-100">
+                        <img class="card-img-top" src="/web/image/website.s_three_columns_default_image_1" alt=""/>
+                        <div class="card-body">
+                            <h3 class="card-title">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 bg-white h-100">
+                        <img class="card-img-top" src="/web/image/website.s_three_columns_default_image_2" alt=""/>
+                        <div class="card-body">
+                            <h3 class="card-title">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 bg-white h-100">
+                        <img class="card-img-top" src="/web/image/website.s_three_columns_default_image_3" alt=""/>
+                        <div class="card-body">
+                            <h3 class="card-title">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>
+
+<template id="assets_snippet_s_three_columns_css_000" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_three_columns/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_timeline.xml b/addons/website/views/snippets/s_timeline.xml
new file mode 100644
index 00000000..52f531a7
--- /dev/null
+++ b/addons/website/views/snippets/s_timeline.xml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template name="Timeline" id="s_timeline">
+    <section class="s_timeline pt24 pb48">
+        <div class="container s_timeline_line">
+            <div class="s_timeline_row d-block d-md-flex flex-row" data-name="Row">
+                <div class="s_timeline_date"><span class="bg-white"><b>2019</b></span></div>
+                <div class="s_timeline_content d-flex">
+                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
+                        <div class="card-body">
+                            <h5 class="card-title">Your title</h5>
+                            <p class="card-text">A timeline is a graphical representation on which important events are marked.</p>
+                        </div>
+                    </div>
+                    <i class="fa fa-1x fa-child bg-secondary rounded-circle s_timeline_icon"/>
+                </div>
+                <div class="s_timeline_content"/>
+            </div>
+            <div class="s_timeline_row d-block d-md-flex flex-row" data-name="Row">
+                <div class="s_timeline_date"><span class="bg-white"><b>2018</b></span></div>
+                <div class="s_timeline_content d-flex">
+                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
+                        <div class="card-body">
+                            <p class="card-text">You can edit, duplicate...</p>
+                        </div>
+                    </div>
+                    <i class="fa fa-1x fa-graduation-cap bg-secondary rounded-circle s_timeline_icon"/>
+                </div>
+                <div class="s_timeline_content d-flex">
+                    <i class="fa fa-1x fa-asterisk bg-secondary rounded-circle s_timeline_icon"/>
+                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
+                        <div class="card-body">
+                            <p class="card-text">...and switch the timeline contents to fit your needs.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="s_timeline_row d-block d-md-flex flex-row-reverse" data-name="Row">
+                <div class="s_timeline_date"><span class="bg-white"><b>2015</b></span></div>
+                <div class="s_timeline_content d-flex">
+                    <div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card">
+                        <div class="card-body">
+                            <p class="card-text">Use this timeline as a part of your resume, to show your visitors what you've done in the past.</p>
+                        </div>
+                    </div>
+                    <i class="fa fa-1x fa-bolt bg-secondary rounded-circle s_timeline_icon"/>
+                </div>
+                <div class="s_timeline_content"/>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_timeline_options" inherit_id="website.snippet_options">
+    <xpath expr="." position="inside">
+        <div data-selector=".s_timeline_row" data-drop-near=".s_timeline_row"/>
+        <div data-js="Timeline" data-selector=".s_timeline_card">
+            <we-button data-timeline-card="" data-no-preview="true"><i class="fa fa-fw fa-angle-left"/><i class="fa fa-fw fa-angle-right"/></we-button>
+        </div>
+    </xpath>
+    <xpath expr="//div[@data-js='SnippetMove'][contains(@data-selector,'section')]" position="attributes">
+        <attribute name="data-selector" add=".s_timeline_row" separator=","/>
+    </xpath>
+</template>
+
+<template id="assets_snippet_s_timeline_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_timeline/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/s_title.xml b/addons/website/views/snippets/s_title.xml
new file mode 100644
index 00000000..11645c3a
--- /dev/null
+++ b/addons/website/views/snippets/s_title.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_title" name="Title">
+    <section class="s_title pt32 pb32" data-vcss="001">
+        <div class="container s_allow_columns">
+            <h1 style="text-align: center;"><font style="font-size: 62px;">Your Site Title</font></h1>
+        </div>
+    </section>
+</template>
+
+<template id="assets_snippet_s_title_css_000" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_title/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
new file mode 100644
index 00000000..4edbdc08
--- /dev/null
+++ b/addons/website/views/snippets/snippets.xml
@@ -0,0 +1,1225 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<!-- Snippets menu -->
+<template id="snippets" inherit_id="web_editor.snippets" primary="True" groups="base.group_user">
+    <xpath expr="//div[@id='snippets_menu']" position="inside">
+        <button type="button" tabindex="3" class="o_we_customize_theme_btn text-uppercase"
+                data-title="Customize your theme"
+                groups="website.group_website_designer" accesskey="2">
+            <span>Options</span>
+        </button>
+    </xpath>
+    <xpath expr="//t[@id='default_snippets']" position="replace">
+        <t id="default_snippets">
+            <div id="snippet_mega_menu" class="o_panel d-none">
+                <div class="o_panel_header">Mega Menu</div>
+                <div class="o_panel_body">
+                    <t t-snippet="website.s_mega_menu_multi_menus" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_multi_menus.svg"/>
+                    <t t-snippet="website.s_mega_menu_menu_image_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_menu_image_menu.svg"/>
+                </div>
+            </div>
+
+            <div id="snippet_structure" class="o_panel">
+                <div class="o_panel_header">Structure</div>
+                <div class="o_panel_body">
+                    <t t-snippet="website.s_banner" t-thumbnail="/website/static/src/img/snippets_thumbs/s_banner.svg">
+                        <keywords>hero, jumbotron</keywords>
+                    </t>
+                    <t t-snippet="website.s_cover" t-thumbnail="/website/static/src/img/snippets_thumbs/s_cover.svg">
+                        <keywords>hero, jumbotron</keywords>
+                    </t>
+                    <t t-snippet="website.s_text_image" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_image.svg">
+                        <keywords>content</keywords>
+                    </t>
+                    <t t-snippet="website.s_image_text" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_text.svg">
+                        <keywords>content</keywords>
+                    </t>
+                    <t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/snippets_thumbs/s_title.svg">
+                        <keywords>heading, h1</keywords>
+                    </t>
+                    <t t-snippet="website.s_text_block" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.svg">
+                        <keywords>content</keywords>
+                    </t>
+                    <t t-snippet="website.s_numbers" t-thumbnail="/website/static/src/img/snippets_thumbs/s_numbers.svg">
+                        <keywords>statistics, stats, KPI</keywords>
+                    </t>
+                    <t t-snippet="website.s_picture" t-thumbnail="/website/static/src/img/snippets_thumbs/s_picture.svg">
+                        <keywords>image, media, illustration</keywords>
+                    </t>
+                    <t t-snippet="website.s_three_columns" t-thumbnail="/website/static/src/img/snippets_thumbs/s_three_columns.svg">
+                        <keywords>columns, description</keywords>
+                    </t>
+                    <t t-snippet="website.s_color_blocks_2" t-thumbnail="/website/static/src/img/snippets_thumbs/s_color_blocks_2.svg">
+                        <keywords>big</keywords>
+                    </t>
+                    <t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/snippets_thumbs/s_features.svg">
+                        <keywords>promotion, characteristic, quality</keywords>
+                    </t>
+                    <t t-snippet="website.s_masonry_block" t-thumbnail="/website/static/src/img/snippets_thumbs/s_masonry_block.svg">
+                        <keywords>masonry, grid</keywords>
+                    </t>
+                    <t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_gallery.svg">
+                        <keywords>gallery, carousel</keywords>
+                    </t>
+                    <t t-snippet="website.s_images_wall" t-thumbnail="/website/static/src/img/snippets_thumbs/s_images_wall.svg"/>
+                    <t t-snippet="website.s_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_carousel.svg">
+                        <keywords>gallery, carousel</keywords>
+                    </t>
+                    <t t-snippet="website.s_media_list" t-thumbnail="/website/static/src/img/snippets_thumbs/s_media_list.svg"/>
+                    <t t-snippet="website.s_showcase" t-thumbnail="/website/static/src/img/snippets_thumbs/s_showcase.svg"/>
+                    <t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/snippets_thumbs/s_parallax.svg"/>
+                </div>
+            </div>
+
+            <div id="snippet_feature" class="o_panel">
+                <div class="o_panel_header">Features</div>
+                <div class="o_panel_body">
+                    <t t-snippet="website.s_comparisons" t-thumbnail="/website/static/src/img/snippets_thumbs/s_comparisons.svg">
+                        <keywords>pricing</keywords>
+                    </t>
+                    <t t-snippet="website.s_company_team" t-thumbnail="/website/static/src/img/snippets_thumbs/s_company_team.svg">
+                        <keywords>organization, structure</keywords>
+                    </t>
+                    <t t-snippet="website.s_call_to_action" t-thumbnail="/website/static/src/img/snippets_thumbs/s_call_to_action.svg">
+                        <keywords>CTA</keywords>
+                    </t>
+                    <t t-snippet="website.s_references" t-thumbnail="/website/static/src/img/snippets_thumbs/s_references.svg">
+                        <keywords>customers, clients</keywords>
+                    </t>
+                    <t t-snippet="website.s_faq_collapse" t-thumbnail="/website/static/src/img/snippets_thumbs/s_faq_collapse.svg">
+                        <keywords>common answers, common questions</keywords>
+                    </t>
+                    <t t-snippet="website.s_features_grid" t-thumbnail="/website/static/src/img/snippets_thumbs/s_features_grid.svg"/>
+                    <t t-snippet="website.s_table_of_content" t-thumbnail="/website/static/src/img/snippets_thumbs/s_table_of_content.svg"/>
+                    <t t-snippet="website.s_product_catalog" t-thumbnail="/website/static/src/img/snippets_thumbs/s_product_catalog.svg">
+                        <keywords>menu, pricing</keywords>
+                    </t>
+                    <t t-snippet="website.s_product_list" t-thumbnail="/website/static/src/img/snippets_thumbs/s_product_list.svg"/>
+                    <t t-snippet="website.s_tabs" t-thumbnail="/website/static/src/img/snippets_thumbs/s_tabs.svg"/>
+                    <t t-snippet="website.s_timeline" t-thumbnail="/website/static/src/img/snippets_thumbs/s_timeline.svg"/>
+                    <t t-snippet="website.s_process_steps" t-thumbnail="/website/static/src/img/snippets_thumbs/s_process_steps.svg"/>
+                    <t t-snippet="website.s_quotes_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_quotes_carousel.svg">
+                        <keywords>testimonials</keywords>
+                    </t>
+                </div>
+            </div>
+
+            <div id="snippet_effect" class="o_panel">
+                <div class="o_panel_header">Dynamic Content</div>
+                <div class="o_panel_body">
+                    <t id="form_form_hook"/>
+                    <t t-snippet="website.s_google_map" t-thumbnail="/website/static/src/img/snippets_thumbs/s_google_map.svg"/>
+                    <t t-if="debug" t-snippet="website.s_dynamic_snippet" t-thumbnail="/website/static/src/img/snippets_thumbs/s_dynamic_snippet.svg"/>
+                    <t t-if="debug" t-snippet="website.s_dynamic_snippet_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_dynamic_carousel.svg"/>
+                    <t id="sale_products_hook"/>
+                    <t id="sale_recently_viewed_product_hook"/>
+                    <t id="sale_product_search_section_hook"/>
+                    <t id="blog_posts_hook"/>
+                    <t id="event_local_events_hook"/>
+                    <t id="snippet_google_map_hook"/>
+                    <t id="mass_mailing_newsletter_block_hook"/>
+                    <t id="mass_mailing_newsletter_popup_hook"/>
+                    <t t-snippet="website.s_popup" t-thumbnail="/website/static/src/img/snippets_thumbs/s_popup.svg"/>
+                    <t t-snippet="website.s_facebook_page" t-thumbnail="/website/static/src/img/snippets_thumbs/s_facebook_page.svg"/>
+                    <t t-snippet="website.s_countdown" t-thumbnail="/website/static/src/img/snippets_thumbs/s_countdown.svg">
+                        <keywords>celebration, launch</keywords>
+                    </t>
+                    <t id="mail_channel_discussion_group_hook"/>
+                    <t id="twitter_favorite_tweets_hook"/>
+                </div>
+            </div>
+
+            <div id="snippet_content" class="o_panel">
+                <div class="o_panel_header">Inner content</div>
+                <div class="o_panel_body">
+                    <t t-snippet="website.s_hr" t-thumbnail="/website/static/src/img/snippets_thumbs/s_hr.svg">
+                        <keywords>separator, divider</keywords>
+                    </t>
+                    <t t-snippet="website.s_alert" t-thumbnail="/website/static/src/img/snippets_thumbs/s_alert.svg"/>
+                    <t t-snippet="website.s_rating" t-thumbnail="/website/static/src/img/snippets_thumbs/s_rating.svg">
+                        <keywords>valuation, rank</keywords>
+                    </t>
+                    <t t-snippet="website.s_card" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.svg"/>
+                    <t t-snippet="website.s_share" t-thumbnail="/website/static/src/img/snippets_thumbs/s_share.svg"/>
+                    <t id="sale_product_search_input_hook"/>
+                    <t id="mass_mailing_newsletter_hook"/>
+                    <t t-snippet="website.s_text_highlight" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_highlight.svg"/>
+                    <t t-snippet="website.s_chart" t-thumbnail="/website/static/src/img/snippets_thumbs/s_chart.svg">
+                        <keywords>chart, table, diagram, pie</keywords>
+                    </t>
+                    <t t-snippet="website.s_progress_bar" t-thumbnail="/website/static/src/img/snippets_thumbs/s_progress_bar.svg">
+                        <keywords>evolution, growth</keywords>
+                    </t>
+                    <t t-snippet="website.s_badge" t-thumbnail="/website/static/src/img/snippets_thumbs/s_badge.svg"/>
+                    <t t-snippet="website.s_blockquote" t-thumbnail="/website/static/src/img/snippets_thumbs/s_blockquote.svg">
+                        <keywords>cite</keywords>
+                    </t>
+                    <t id="event_speaker_bio_hook"/>
+                </div>
+            </div>
+        </t>
+    </xpath>
+
+    <xpath expr="//div[@id='snippet_options']/t" position="attributes">
+        <attribute name="t-call">website.snippet_options</attribute>
+    </xpath>
+</template>
+
+<template id="external_snippets" inherit_id="website.snippets" priority="8">
+    <xpath expr="//div[@id='snippet_effect']//t[@t-snippet][last()]" position="after">
+        <t t-install="website_form" string="Form Builder" t-thumbnail="/website/static/src/img/snippets_thumbs/s_website_form.svg"/>
+        <t id="newsletter_popup_snippet" t-install="mass_mailing" string="Newsletter Popup" t-thumbnail="/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.svg"/>
+        <t t-install="website_mail_channel" string="Discussion Group" t-thumbnail="/website/static/src/img/snippets_thumbs/s_channel.svg"/>
+        <t t-install="website_twitter" string="Twitter Scroller" t-thumbnail="/website/static/src/img/snippets_thumbs/s_twitter_scroll.svg"/>
+    </xpath>
+    <xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
+        <t id="newsletter_snippet" t-install="mass_mailing" string="Newsletter" t-thumbnail="/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.svg"/>
+    </xpath>
+</template>
+
+<template id="snippet_options_background_options" inherit_id="web_editor.snippet_options_background_options">
+    <xpath expr="//we-button[@data-toggle-bg-image]" position="after">
+        <we-button title="Video"
+                   data-name="bg_video_toggler_opt"
+                   t-att-data-dependencies="images_dependencies"
+                   data-toggle-bg-video="true"
+                   data-no-preview="true">
+            <i class="fa fa-fw fa-film"/>
+        </we-button>
+    </xpath>
+    <xpath expr="//we-button[@data-toggle-bg-filter]" position="attributes">
+        <attribute name="data-dependencies" add="bg_video_toggler_opt" separator=","/>
+    </xpath>
+    <xpath expr="//div[@data-js='BackgroundOptimize']" position="after">
+        <!-- Parallax -->
+        <div data-js="Parallax"
+             t-att-data-selector="selector"
+             t-att-data-exclude="exclude"
+             t-att-data-target="target">
+            <!-- &emsp; -->
+            <we-select string=" ⌙ Parallax"
+                       data-attribute-name="scrollBackgroundRatio"
+                       data-attribute-default-value="0"
+                       data-parallax-type-opt="true"
+                       data-no-preview="true"
+                       data-dependencies="bg_image_opt">
+                <we-button data-name="parallax_none_opt" data-select-data-attribute="0">None</we-button>
+                <we-button data-select-data-attribute="1">Fixed</we-button>
+                <we-button data-name="parallax_top_opt" data-select-data-attribute="1.5">Bottom to Top</we-button>
+                <we-button data-name="parallax_bottom_opt" data-select-data-attribute="-1.5">Top to Bottom</we-button>
+            </we-select>
+            <we-range string="  ⌙ Intensity"
+                      data-dependencies="parallax_top_opt"
+                      data-select-data-attribute=""
+                      data-attribute-name="scrollBackgroundRatio"
+                      data-attribute-default-value="0"
+                      data-no-preview="true"
+                      data-min="0"
+                      data-max="3"
+                      data-step="0.15"/> <!-- Make sure this cannot land on 1 -->
+            <we-range string="  ⌙ Intensity"
+                      data-dependencies="parallax_bottom_opt"
+                      data-select-data-attribute=""
+                      data-attribute-name="scrollBackgroundRatio"
+                      data-attribute-default-value="0"
+                      data-no-preview="true"
+                      data-min="0"
+                      data-max="-3"
+                      data-step="0.15"/> <!-- Make sure this cannot land on 1 -->
+        </div>
+        <div data-js="BackgroundVideo"
+             t-att-data-selector="selector"
+             t-att-data-exclude="exclude"
+             t-att-data-target="target">
+            <we-row string="⌙ Video">
+                <we-videopicker title="Edit video"
+                                data-background=""
+                                data-name="bg_video_opt"
+                                data-dependencies="bg_video_opt"/>
+            </we-row>
+        </div>
+    </xpath>
+</template>
+
+<template id="snippet_options_border_line_widgets">
+    <we-row t-att-string="label">
+        <we-input data-name="border_width_opt"
+                  t-att-data-apply-to="apply_to"
+                  data-select-style="0"
+                  t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}width"
+                  data-unit="px"
+                  t-att-data-extra-class="with_bs_class and 'border'"
+                  t-att-data-variable="width_variable"/>
+        <we-select t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}style"
+                   data-dependencies="border_width_opt"
+                   t-att-data-apply-to="apply_to"
+                   t-att-data-variable="style_variable">
+            <we-button title="Solid" data-select-style="solid"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></we-button>
+            <we-button title="Dashed" data-select-style="dashed"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></we-button>
+            <we-button title="Dotted" data-select-style="dotted"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></we-button>
+            <we-button title="Double" data-select-style="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></we-button>
+        </we-select>
+        <we-colorpicker data-dependencies="border_width_opt"
+                        t-att-data-apply-to="apply_to"
+                        data-select-style="true"
+                        t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}color"
+                        data-color-prefix="border-"
+                        t-att-data-color="color_variable"/>
+    </we-row>
+</template>
+
+<template id="snippet_options_border_widgets">
+    <t t-call="website.snippet_options_border_line_widgets">
+        <t t-set="label">Border</t>
+        <t t-set="with_bs_class" t-value="True"/>
+    </t>
+    <we-input string="Round Corners"
+              t-att-data-apply-to="apply_to"
+              t-att-data-dependencies="not so_rounded_no_dependencies and 'border_width_opt,bg_color_opt'"
+              data-select-style="0" data-css-property="border-radius"
+              data-unit="px" data-extra-class="rounded"
+              t-att-data-variable="radius_variable"/>
+</template>
+
+<template id="snippet_options_shadow_widgets">
+    <we-button-group string="Shadow" data-shadow-class="shadow" t-att-data-variable="shadow_variable">
+        <we-button data-set-shadow="">None</we-button>
+        <we-button data-set-shadow="outset"
+                   data-img="/website/static/src/img/snippets_options/shadow_out.svg"
+                   data-name="shadow_active_opt"
+                   title="Outset"/>
+        <we-button data-set-shadow="inset"
+                   data-img="/website/static/src/img/snippets_options/shadow_in.svg"
+                   data-name="shadow_inset_opt"
+                   title="Inset"/>
+    </we-button-group>
+    <we-multi data-css-property="box-shadow" data-dependencies="shadow_active_opt, shadow_inset_opt" t-att-data-variable="shadow_variable">
+        <we-colorpicker string="⌙ Color" data-select-style="" data-css-compatible=""/>
+        <we-row string="⌙ Offset (X, Y)">
+            <we-input data-select-style="" data-unit="px"/>
+            <we-input data-select-style="" data-unit="px"/>
+        </we-row>
+        <we-input string="⌙ Blur" data-select-style="" data-unit="px"/>
+        <we-input string="⌙ Spread" data-select-style="" data-unit="px"/>
+        <!-- Inset parameter always hidden (as controlled above) but needed -->
+        <!-- for the we-multi widget to work properly. -->
+        <we-checkbox data-name="fake_inset_shadow_opt" data-select-style="inset"/>
+    </we-multi>
+</template>
+
+<template id="snippet_options">
+    <t t-call="web_editor.snippet_options"/>
+
+    <!-- COLOR, BORDER, SHADOW | .s_three_columns | .s_comparisons -->
+    <div data-js="Box"
+         data-selector=".s_three_columns .row > div, .s_comparisons .row > div"
+         data-target=".card">
+        <we-colorpicker string="Colors"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"/>
+        <t t-call="website.snippet_options_border_widgets">
+            <t t-set="so_rounded_no_dependencies" t-value="True"/>
+        </t>
+        <t t-call="website.snippet_options_shadow_widgets"/>
+    </div>
+
+    <!-- COLOR | .s_cards -->
+    <div data-selector=".s_card, .accordion .card">
+        <we-colorpicker string="Color"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"/>
+    </div>
+
+    <!-- H-ALIGN -->
+    <div id="so_text_align" data-selector=".s_share, .s_text_highlight">
+        <we-button-group string="Alignment">
+            <we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
+            <we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
+            <we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
+        </we-button-group>
+    </div>
+
+    <div id="so_width" data-selector=".s_alert, .s_card, .s_blockquote, .s_text_highlight">
+        <we-select string="Width">
+            <we-button data-select-class="w-25">25%</we-button>
+            <we-button data-select-class="w-50">50%</we-button>
+            <we-button data-select-class="w-75">75%</we-button>
+            <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
+        </we-select>
+    </div>
+
+    <div id="so_block_align" data-selector=".s_alert, .s_card, .s_blockquote, .s_text_highlight">
+        <we-button-group string="Alignment" data-dependencies="!so_width_100">
+            <we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
+            <we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
+            <we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
+        </we-button-group>
+    </div>
+
+    <!-- Carousel | .s_carousel | .s_quotes_carousel -->
+    <!-- Dedicated colorpicker so that there is not 3 level of
+         o_colored_level. Use inline-style color for the same reason. -->
+    <t t-call="web_editor.snippet_options_background_options">
+        <t t-set="selector" t-value="'section'"/>
+        <t t-set="target" t-value="'> .carousel'"/>
+        <t t-set="with_colors" t-value="True"/>
+        <t t-set="with_images" t-value="True"/>
+        <t t-set="css_compatible" t-value="True"/>
+    </t>
+    <div data-js="Carousel"
+         data-selector="section"
+         data-target="> .carousel">
+        <we-select string="Style">
+            <we-button data-select-class="s_carousel_bordered">Bordered</we-button>
+            <we-button data-select-class="s_carousel_boxed">Boxed</we-button>
+            <we-button data-select-class="s_carousel_rounded">Rounded</we-button>
+            <we-divider/>
+            <we-button data-select-class="s_carousel_default">Default</we-button>
+        </we-select>
+        <we-select string="Transition">
+            <we-button data-select-class="slide">Slide</we-button>
+            <we-button data-select-class="carousel-fade slide">Fade</we-button>
+            <we-divider/>
+            <we-button data-select-class="">None</we-button>
+        </we-select>
+        <we-input string="Speed"
+                  data-select-data-attribute="0s" data-attribute-name="interval"
+                  data-unit="s" data-save-unit="ms" data-step="0.1"/>
+    </div>
+
+    <div data-js="CarouselItem"
+         data-selector=".s_carousel .carousel-item, .s_quotes_carousel .carousel-item">
+        <we-button data-slide="left" data-no-preview="true">
+            <i class="fa fa-fw fa-angle-left"/>
+        </we-button>
+        <we-button data-slide="right" data-no-preview="true" class="mr-2">
+            <i class="fa fa-fw fa-angle-right"/>
+        </we-button>
+        <we-button data-add-slide="true" data-no-preview="true" class="o_we_text_success">
+            <i class="fa fa-fw fa-plus"/>
+        </we-button>
+        <we-button data-remove-slide="true" data-no-preview="true" class="o_we_text_danger">
+            <i class="fa fa-fw fa-minus"/>
+        </we-button>
+    </div>
+
+    <!-- Accordion -->
+    <div data-js="collapse"
+         data-selector='.accordion > .card'
+         data-drop-in='.accordion:has(> .card)'/>
+
+    <div data-js="layout_column"
+        data-selector="section"
+        data-target="> *:has(> .row:not(.s_nb_column_fixed)), > .s_allow_columns">
+        <we-select string="Columns" data-no-preview="true">
+            <we-button data-select-count="0" data-name="zero_cols_opt">None</we-button>
+            <we-button data-select-count="1">1</we-button>
+            <we-button data-select-count="2">2</we-button>
+            <we-button data-select-count="3">3</we-button>
+            <we-button data-select-count="4">4</we-button>
+            <we-button data-select-count="5">5</we-button>
+            <we-button data-select-count="6">6</we-button>
+        </we-select>
+    </div>
+
+    <!-- Move snippets around -->
+    <div data-js="SnippetMove"
+         data-selector="section, .accordion > .card, .s_showcase .row:not(.s_col_no_resize) > div">
+        <we-button class="fa fa-fw fa-angle-up" data-move-snippet="prev" data-no-preview="true" data-name="move_up_opt"/>
+        <we-button class="fa fa-fw fa-angle-down" data-move-snippet="next" data-no-preview="true" data-name="move_down_opt"/>
+    </div>
+    <div data-js="SnippetMove"
+         data-selector=".row:not(.s_col_no_resize) > div, .nav-item"
+         data-exclude=".s_showcase .row > div"
+         data-name="move_horizontally_opt">
+        <we-button class="fa fa-fw fa-angle-left" data-move-snippet="prev" data-no-preview="true" data-name="move_left_opt"/>
+        <we-button class="fa fa-fw fa-angle-right" data-move-snippet="next" data-no-preview="true" data-name="move_right_opt"/>
+    </div>
+
+    <!-- Background -->
+    <t t-set="only_bg_color_selector" t-value="'section .row > div, .s_text_highlight'"/>
+    <t t-set="only_bg_color_exclude" t-value="'.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .o_mega_menu .row > div, .s_image_gallery .row > div'"/>
+
+    <t t-set="base_only_bg_image_selector" t-value="'.s_tabs .oe_structure > *, footer .oe_structure > *'"/>
+    <t t-set="only_bg_image_selector" t-value="base_only_bg_image_selector"/>
+    <t t-set="only_bg_image_exclude" t-value="''"/>
+
+    <t t-set="both_bg_color_image_selector" t-value="'section, .carousel-item, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .parallax'"/>
+    <t t-set="both_bg_color_image_exclude" t-value="base_only_bg_image_selector + ', .s_carousel_wrapper, .s_color_blocks_2, .s_image_gallery .carousel-item, .s_google_map'"/>
+
+    <t t-call="web_editor.snippet_options_background_options">
+        <t t-set="selector" t-value="both_bg_color_image_selector"/>
+        <t t-set="exclude" t-value="both_bg_color_image_exclude"/>
+        <t t-set="with_colors" t-value="True"/>
+        <t t-set="with_images" t-value="True"/>
+        <t t-set="with_color_combinations" t-value="True"/>
+    </t>
+
+    <t t-call="web_editor.snippet_options_background_options">
+        <t t-set="selector" t-value="only_bg_color_selector"/>
+        <t t-set="exclude" t-value="only_bg_color_exclude"/>
+        <t t-set="with_colors" t-value="True"/>
+        <t t-set="with_images" t-value="False"/>
+        <t t-set="with_color_combinations" t-value="True"/>
+    </t>
+
+    <t t-call="web_editor.snippet_options_background_options">
+        <t t-set="selector" t-value="only_bg_image_selector"/>
+        <t t-set="exclude" t-value="only_bg_image_exclude"/>
+        <t t-set="with_colors" t-value="False"/>
+        <t t-set="with_images" t-value="True"/>
+    </t>
+
+    <!-- Border | Columns -->
+    <div data-js="Box"
+         data-selector="section .row > div"
+         data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_image_gallery .row > div">
+        <t t-call="website.snippet_options_border_widgets"/>
+        <t t-call="website.snippet_options_shadow_widgets"/>
+    </div>
+
+    <!-- Mobile display options -->
+    <div data-js="MobileVisibility" data-option-name="showMobile" data-selector="section .row > div"
+         data-exclude=".s_col_no_resize.row > div">
+        <we-checkbox string="Shown On Mobile" data-show-on-mobile="true" data-no-preview="true"/>
+    </div>
+
+    <div data-js="sizing_y"
+        data-selector="section, .row > div, .parallax, .s_hr, .carousel-item, .s_rating"
+        data-exclude="section:has(> .carousel), .s_image_gallery .carousel-item, .s_col_no_resize.row > div"/>
+
+    <div data-js="sizing_x"
+        data-selector=".row > div"
+        data-drop-near=".row:not(.s_col_no_resize) > div"
+        data-exclude=".s_col_no_resize.row > div"/>
+
+    <t t-set="so_snippet_addition_selector" t-translation="off">section, .parallax, .s_popup</t>
+    <div id="so_snippet_addition"
+        t-att-data-selector="so_snippet_addition_selector"
+        data-drop-in=":not(p).oe_structure:not(.oe_structure_solo), :not(p)[data-oe-type=html], :not(p).oe_structure.oe_structure_solo:not(:has(> section, > div))"/>
+
+    <t t-set="so_content_addition_selector" t-translation="off">blockquote, .s_card:not(.s_timeline_card), .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_google_map, .s_countdown, .s_chart, .s_text_highlight, .s_progress_bar, .s_badge</t>
+    <div id="so_content_addition"
+        t-att-data-selector="so_content_addition_selector"
+        t-attf-data-drop-near="p, h1, h2, h3, .row > div > img, #{so_content_addition_selector}"
+        data-drop-in=".content, nav"/>
+
+    <div data-js="SnippetSave"
+        t-attf-data-selector="#{so_snippet_addition_selector}, #{so_content_addition_selector}"
+        data-exclude=".o_no_save">
+        <we-button class="fa fa-fw fa-save o_we_link o_we_hover_warning"
+                   title="Save the block to use it elsewhere"
+                   data-save-snippet=""
+                   data-no-preview="true"/>
+    </div>
+
+    <div data-js="menu_data"
+         data-selector="#top_menu li > a"
+         data-exclude=".dropdown-toggle, li.o_header_menu_button a, [data-toggle], .o_offcanvas_logo"
+         data-no-check="true"/>
+
+    <div data-js="company_data"
+         data-selector="[data-oe-expression='res_company.partner_id']"
+         data-no-check="true"/>
+
+    <div data-selector="#wrapwrap > header"
+         data-no-check="true"
+         groups="website.group_website_designer">
+        <we-select string="Template" data-variable="header-template" data-reload="/">
+            <we-button title="Default"
+                       data-name="header_default_opt"
+                       data-customize-website-views="website.template_header_default"
+                       data-customize-website-variable="'default'"
+                       data-img="/website/static/src/img/snippets_options/header_template_default.svg"/>
+            <we-button title="Hamburger menu"
+                       data-name="header_hamburger_opt"
+                       data-customize-website-views="website.template_header_hamburger"
+                       data-customize-website-variable="'hamburger'"
+                       data-img="/website/static/src/img/snippets_options/header_template_hamburger.svg"/>
+            <we-button title="Vertical"
+                       data-name="header_vertical_opt"
+                       data-customize-website-views="website.template_header_vertical"
+                       data-customize-website-variable="'vertical'"
+                       data-img="/website/static/src/img/snippets_options/header_template_vertical.svg"/>
+            <we-button title="Sidebar"
+                       data-name="header_sidebar_opt"
+                       data-customize-website-views="website.template_header_sidebar, website.no_autohide_menu"
+                       data-customize-website-variable="'sidebar'"
+                       data-img="/website/static/src/img/snippets_options/header_template_sidebar.svg"/>
+            <we-button title="Slogan"
+                       data-name="header_slogan_opt"
+                       data-customize-website-views="website.template_header_slogan"
+                       data-customize-website-variable="'slogan'"
+                       data-img="/website/static/src/img/snippets_options/header_template_slogan.svg"/>
+            <we-button title="Contact"
+                       data-name="header_contact_opt"
+                       data-customize-website-views="website.template_header_contact"
+                       data-customize-website-variable="'Contact'"
+                       data-img="/website/static/src/img/snippets_options/header_template_contact.svg"/>
+            <we-button title="Minimalist"
+                       data-name="header_minimalist_opt"
+                       data-customize-website-views="website.template_header_minimalist"
+                       data-customize-website-variable="'minimalist'"
+                       data-img="/website/static/src/img/snippets_options/header_template_minimalist.svg"/>
+            <we-button title="Boxed"
+                       data-name="header_boxed_opt"
+                       data-customize-website-views="website.template_header_boxed"
+                       data-customize-website-variable="'boxed'"
+                       data-img="/website/static/src/img/snippets_options/header_template_boxed.svg"/>
+            <we-button title="Centered Logo"
+                       data-name="header_centered_logo_opt"
+                       data-customize-website-views="website.template_header_centered_logo"
+                       data-customize-website-variable="'centered_logo'"
+                       data-img="/website/static/src/img/snippets_options/header_template_centered_logo.svg"/>
+            <we-button title="Image"
+                       data-name="header_image_opt"
+                       data-customize-website-views="website.template_header_image"
+                       data-customize-website-variable="'image'"
+                       data-img="/website/static/src/img/snippets_options/header_template_image.svg"/>
+            <we-button title="Hamburger Full"
+                       data-name="header_hamburger_full_opt"
+                       data-customize-website-views="website.template_header_hamburger_full"
+                       data-customize-website-variable="'hamburger-full'"
+                       data-img="/website/static/src/img/snippets_options/header_template_hamburger_full.svg"/>
+            <we-button title="Magazine"
+                       data-name="header_magazine_opt"
+                       data-customize-website-views="website.template_header_magazine"
+                       data-customize-website-variable="'magazine'"
+                       data-img="/website/static/src/img/snippets_options/header_template_magazine.svg"/>
+        </we-select>
+
+        <!-- Header Sidebar Template - Options -->
+        <we-input string="⌙ Width"
+                  data-dependencies="header_sidebar_opt"
+                  data-customize-website-variable="null"
+                  data-variable="sidebar-width"
+                  data-unit="px"
+                  data-save-unit="rem"/>
+
+        <we-row string="Colors">
+            <we-colorpicker data-customize-website-color="" data-color="menu"
+                            data-with-combinations="true"/>
+            <we-colorpicker data-dependencies="header_boxed_opt"
+                            data-customize-website-color="" data-color="header-boxed"
+                            data-with-combinations="true"/>
+        </we-row>
+    </div>
+
+    <!-- Header - Borders & Shadows -->
+    <div data-js="HeaderBox"
+         id="option_header_shadow"
+         data-selector="#wrapwrap > header"
+         data-target="nav"
+         data-no-check="true"
+         groups="website.group_website_designer">
+        <t t-call="website.snippet_options_border_widgets">
+            <t t-set="so_rounded_no_dependencies" t-value="True"/>
+            <t t-set="width_variable" t-value="'menu-border-width'"/>
+            <t t-set="style_variable" t-value="'menu-border-style'"/>
+            <t t-set="color_variable" t-value="'menu-border-color'"/>
+            <t t-set="radius_variable" t-value="'menu-border-radius'"/>
+        </t>
+        <t t-call="website.snippet_options_shadow_widgets">
+            <t t-set="shadow_variable" t-value="'menu-box-shadow'"/>
+        </t>
+    </div>
+
+    <div data-selector="#wrapwrap > header"
+         data-no-check="true"
+         groups="website.group_website_designer">
+
+        <we-select string="Scroll Effect" data-dependencies="!header_sidebar_opt" class="o_scroll_effects_selector">
+            <t t-set="header_effect_standard_label">Standard</t>
+            <t t-set="header_effect_scroll_label">Scroll</t>
+            <t t-set="header_effect_fixed_label">Fixed</t>
+            <t t-set="header_effect_disappears_label">Disappears</t>
+            <t t-set="header_effect_fadeout_label">Fade Out</t>
+            <we-button id="option_header_visibility_standard"
+                       t-att-data-select-label="header_effect_standard_label"
+                       class="o_we_img_animate"
+                       data-name="header_visibility_standard_opt"
+                       data-select-class="o_header_standard"
+                       data-customize-website-views="website.header_visibility_standard"
+                       data-img="/website/static/src/img/snippets_options/header_effect_standard.png">
+                <span t-esc='header_effect_standard_label'/>
+            </we-button>
+            <we-button id="option_header_effect_scroll"
+                       t-att-data-select-label="header_effect_scroll_label"
+                       class="o_we_img_animate"
+                       data-name="header_effect_scroll_opt"
+                       data-select-class=""
+                       data-customize-website-views=""
+                       data-img="/website/static/src/img/snippets_options/header_effect_scroll.png">
+                <span t-esc='header_effect_scroll_label'/>
+            </we-button>
+            <we-button id="option_header_effect_fixed"
+                       t-att-data-select-label="header_effect_fixed_label"
+                       class="o_we_img_animate"
+                       data-name="header_effect_fixed_opt"
+                       data-select-class="o_header_fixed"
+                       data-customize-website-views="website.header_visibility_fixed"
+                       data-img="/website/static/src/img/snippets_options/header_effect_fixed.png">
+                <span t-esc='header_effect_fixed_label'/>
+            </we-button>
+            <we-button id="option_header_effect_disappears"
+                       t-att-data-select-label="header_effect_disappears_label"
+                       class="o_we_img_animate"
+                       data-name="header_effect_disappears_opt"
+                       data-select-class="o_header_disappears"
+                       data-customize-website-views="website.header_visibility_disappears"
+                       data-img="/website/static/src/img/snippets_options/header_effect_disappears.png">
+                <span t-esc="header_effect_disappears_label" />
+            </we-button>
+            <we-button id="option_header_effect_fade_out"
+                       t-att-data-select-label="header_effect_fadeout_label"
+                       class="o_we_img_animate"
+                       data-name="header_effect_fade_out_opt"
+                       data-select-class="o_header_fade_out"
+                       data-customize-website-views="website.header_visibility_fade_out"
+                       data-img="/website/static/src/img/snippets_options/header_effect_fade_out.png">
+               <span t-esc='header_effect_fadeout_label'/>
+            </we-button>
+        </we-select>
+    </div>
+
+    <div data-js="TopMenuVisibility"
+         data-selector="[data-main-object^='website.page('] #wrapwrap > header"
+         data-no-check="true">
+        <we-select string="Header Position" id="option_header_visibility" data-no-preview="true">
+            <we-button data-visibility="transparent">Over The Content</we-button>
+            <we-button data-name="regular_header_visibility_opt"
+                       data-visibility="regular">Regular</we-button>
+            <we-button data-visibility="hidden">Hidden</we-button>
+        </we-select>
+    </div>
+
+    <div data-js="topMenuColor"
+         data-selector="[data-main-object^='website.page('] #wrapwrap > header"
+         data-no-check="true">
+        <we-colorpicker string="⌙ Background"
+            id="option_header_transparent_color"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"
+            data-excluded="theme, common, custom"/>
+    </div>
+
+    <!-- Header > Navbar Options -->
+    <div data-js="HeaderNavbar"
+         data-selector="#wrapwrap > header nav.navbar"
+         data-no-check="true"
+         groups="website.group_website_designer">
+        <!-- Generic alignment option controling all the template at once. -->
+        <!-- Currently needed to be this way as the SCSS variable controls -->
+        <!-- the mobile alignement which is the same for all templates. -->
+        <we-select string="Alignment"
+                   data-name="header_alignment_opt"
+                   data-variable="hamburger-position"
+                   data-reload="/">
+            <we-button data-customize-website-views="" data-customize-website-variable="'left'">Left</we-button>
+            <we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_hamburger_align_center" data-customize-website-variable="'center'">Center</we-button>
+            <we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right" data-customize-website-variable="'right'">Right</we-button>
+        </we-select>
+
+        <!-- Generic Hamburger Options (mobile or not) -->
+        <we-select string="Hamburger Type"
+                   data-name="header_hamburger_type_opt"
+                   data-variable="hamburger-type"
+                   data-reload="/">
+            <we-button data-customize-website-variable="'default'"
+                       data-customize-website-views="">Default</we-button>
+            <we-button data-name="off_canvas_menu_opt"
+                       data-customize-website-variable="'off-canvas'"
+                       data-customize-website-views="website.option_header_off_canvas, website.option_header_off_canvas_template_header_hamburger, website.option_header_off_canvas_template_header_sidebar, website.option_header_off_canvas_template_header_hamburger_full">Off-Canvas</we-button>
+        </we-select>
+
+        <we-select string="⌙ Off-Canvas Logo" data-dependencies="off_canvas_menu_opt" data-reload="/">
+            <we-button data-customize-website-views="">Text</we-button>
+            <we-button data-customize-website-views="website.option_header_off_canvas_logo_show">Image</we-button>
+        </we-select>
+
+        <we-row string="Font">
+            <we-fontfamilypicker data-variable="navbar-font"/>
+            <we-input data-customize-website-variable="null" data-variable="header-font-size" data-unit="px" data-save-unit="rem"/>
+        </we-row>
+
+        <we-select string="Links Style" data-variable="header-links-style" data-reload="/">
+            <we-button data-name="option_header_navbar_links_default"
+                       data-customize-website-views=""
+                       data-customize-website-variable="'default'">Default</we-button>
+            <we-button data-name="option_header_navbar_links_fill"
+                       data-customize-website-views="website.header_navbar_pills_style"
+                       data-customize-website-variable="'fill'">Fill</we-button>
+            <we-button data-name="option_header_navbar_links_outline"
+                       data-customize-website-views=""
+                       data-customize-website-variable="'outline'">Outline</we-button>
+            <we-button data-name="option_header_navbar_links_pills"
+                       data-customize-website-views="website.header_navbar_pills_style"
+                       data-customize-website-variable="'pills'">Pills</we-button>
+            <we-button data-name="option_header_navbar_block"
+                       data-customize-website-views="website.header_navbar_pills_style"
+                       data-customize-website-variable="'block'">Block</we-button>
+            <we-button data-name="option_header_navbar_border_bottom"
+                       data-customize-website-views=""
+                       data-customize-website-variable="'border-bottom'">Border Bottom</we-button>
+        </we-select>
+
+        <we-select id="option_header_dropdown" string="Sub Menus" data-dependencies="!header_hamburger_opt" data-no-preview="true">
+            <we-button data-select-class="o_hoverable_dropdown"
+                       data-customize-website-views="website.header_hoverable_dropdown">On Hover</we-button>
+            <we-button data-select-class="" data-name="header_dropdown_on_click_opt">On Click</we-button>
+        </we-select>
+
+        <we-select string="Logo type" data-reload="/">
+            <we-button data-customize-website-views="" data-name="option_header_brand_none">None</we-button>
+            <we-button data-customize-website-views="website.option_header_brand_name">Text</we-button>
+            <we-button data-customize-website-views="website.option_header_brand_logo">Image</we-button>
+        </we-select>
+        <we-input string="⌙ Height"
+                  data-dependencies="!option_header_brand_none"
+                  data-customize-website-variable="null"
+                  data-variable="logo-height"
+                  data-unit="px"
+                  data-save-unit="rem"/>
+        <we-input string="⌙ Height (Scrolled)"
+                  data-name="option_logo_height_scrolled"
+                  data-customize-website-variable="null"
+                  data-variable="fixed-logo-height"
+                  data-unit="px"
+                  data-save-unit="rem"
+                  data-dependencies="!header_effect_scroll_opt"/>
+
+        <we-checkbox string="Show Sign In" data-customize-website-views="portal.user_sign_in" data-reload="/"/>
+        <we-select string="Language Selector" data-reload="/">
+            <we-button data-name="header_language_selector_none_opt"
+                       data-customize-website-views="">None</we-button>
+            <we-button data-customize-website-views="website.header_language_selector">Dropdown</we-button>
+            <we-button data-customize-website-views="website.header_language_selector, website.header_language_selector_inline">Inline</we-button>
+        </we-select>
+        <we-select string="⌙ Label" data-dependencies="!header_language_selector_none_opt" data-reload="/">
+            <we-button data-customize-website-views="">Text</we-button>
+            <we-button data-customize-website-views="website.header_language_selector_flag, website.header_language_selector_no_text">Flag</we-button>
+            <we-button data-customize-website-views="website.header_language_selector_flag">Flag and Text</we-button>
+        </we-select>
+    </div>
+
+    <!-- Footer - Colors & Layouts -->
+    <div data-selector="#wrapwrap > footer"
+         data-no-check="true"
+         groups="website.group_website_designer">
+
+        <!-- Layouts -->
+        <we-select string="Template"
+            data-variable="footer-template"
+            data-reload="/">
+            <we-button title="Default"
+                       data-customize-website-views="website.footer_custom"
+                       data-customize-website-variable="'default'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_default.svg"/>
+            <we-button title="Descriptive"
+                       data-customize-website-views="website.template_footer_descriptive"
+                       data-customize-website-variable="'descriptive'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_descriptive.svg"/>
+            <we-button title="Centered"
+                       data-customize-website-views="website.template_footer_centered"
+                       data-customize-website-variable="'centered'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_centered.svg"/>
+            <we-button title="Links"
+                       data-customize-website-views="website.template_footer_links"
+                       data-customize-website-variable="'links'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_links.svg"/>
+            <we-button title="Minimalist"
+                       data-customize-website-views="website.template_footer_minimalist"
+                       data-customize-website-variable="'minimalist'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_minimalist.svg"/>
+            <we-button title="Contact"
+                       data-customize-website-views="website.template_footer_contact"
+                       data-customize-website-variable="'contact'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_contact.svg"/>
+            <we-button title="Call-to-action"
+                       data-customize-website-views="website.template_footer_call_to_action"
+                       data-customize-website-variable="'call_to_action'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_call_to_action.svg"/>
+            <we-button title="Headline"
+                       data-customize-website-views="website.template_footer_headline"
+                       data-customize-website-variable="'headline'"
+                       data-img="/website/static/src/img/snippets_options/footer_template_headline.svg"/>
+        </we-select>
+        <!-- Colors -->
+        <we-colorpicker string="Colors"
+                        data-customize-website-color="" data-color="footer"
+                        data-with-combinations="true"/>
+        <we-select string="Slideout Effect" data-variable="footer-effect" data-reload="/">
+            <we-button string="Regular"
+                       data-customize-website-views=""
+                       data-customize-website-variable=""/>
+            <we-button string="Slide Hover"
+                       data-customize-website-views="website.template_footer_slideout"
+                       data-customize-website-variable="'slideout_slide_hover'"/>
+            <we-button string="Shadow"
+                       data-customize-website-views="website.template_footer_slideout"
+                       data-customize-website-variable="'slideout_shadow'"/>
+        </we-select>
+        <we-checkbox string="Copyright"
+                data-name="footer_copyright_opt"
+                data-customize-website-views="website.footer_no_copyright|"
+                data-no-preview="true"
+                data-reload="/"/>
+        <we-checkbox string="Language Selector"
+                data-dependencies="!footer_copyright_opt"
+                data-customize-website-views="website.footer_no_copyright|portal.footer_language_selector"
+                data-no-preview="true"
+                data-reload="/"/>
+    </div>
+
+    <!-- Footer - Borders & Shadows -->
+    <div data-js="Box"
+         data-selector="#wrapwrap > footer"
+         data-target="#footer"
+         data-no-check="true"
+         groups="website.group_website_designer">
+        <t t-call="website.snippet_options_border_widgets"/>
+        <t t-call="website.snippet_options_shadow_widgets"/>
+    </div>
+
+    <!-- Scroll to Top -->
+    <div data-selector="#wrapwrap > footer"
+         data-no-check="true"
+         groups="website.group_website_designer">
+        <we-row string="Scroll Top Button">
+            <we-checkbox data-name="footer_scrolltop_opt"
+                         data-customize-website-views="website.option_footer_scrolltop"
+                         data-customize-website-variable="false|true"
+                         data-variable="footer-scrolltop"
+                         data-reload="/"/>
+            <we-select data-dependencies="footer_scrolltop_opt" data-apply-to="#o_footer_scrolltop_wrapper">
+                <we-button string="Left" data-select-class="justify-content-start"/>
+                <we-button string="Center" data-select-class="justify-content-center"/>
+                <we-button string="Right" data-select-class="justify-content-end"/>
+            </we-select>
+        </we-row>
+    </div>
+
+    <div data-js="HideFooter"
+        data-selector="[data-main-object^='website.page('] #wrapwrap > footer"
+        data-no-check="true"
+        groups="website.group_website_designer">
+        <we-checkbox string="Page Visibility"
+                     data-name="hide_footer_page_opt"
+                     data-visibility="hidden|shown"
+                     data-no-preview="true"/>
+    </div>
+
+    <!-- Copyright -->
+    <div data-selector=".o_footer_copyright"
+         data-no-check="true"
+         groups="website.group_website_designer">
+        <we-colorpicker string="Colors"
+                        data-customize-website-color="" data-color="copyright"
+                        data-with-combinations="true"/>
+        <we-select string="Language Selector" data-reload="/">
+            <we-button data-name="language_selector_none_opt"
+                       data-customize-website-views="">None</we-button>
+            <we-button data-customize-website-views="portal.footer_language_selector">Dropdown</we-button>
+            <we-button data-customize-website-views="portal.footer_language_selector, website.footer_language_selector_inline">Inline</we-button>
+        </we-select>
+        <we-select string="⌙ Label" data-dependencies="!language_selector_none_opt" data-reload="/">
+            <we-button data-customize-website-views="">Text</we-button>
+            <we-button data-customize-website-views="website.footer_language_selector_flag, website.footer_language_selector_no_text">Flag</we-button>
+            <we-button data-customize-website-views="website.footer_language_selector_flag">Flag and Text</we-button>
+        </we-select>
+    </div>
+
+    <!-- Anchor Name -->
+    <div data-js="anchor"
+        data-selector=":not(p).oe_structure > *, :not(p)[data-oe-type=html] > *"
+        data-exclude=".modal *, .oe_structure .oe_structure *, [data-oe-type=html] .oe_structure *, .s_popup">
+        <we-button class="fa fa-fw fa-link o_we_link"
+                   title="Create a link to target this section"
+                   data-no-preview="true"/>
+    </div>
+
+    <!-- Mega Menu settings -->
+    <div data-selector=".o_mega_menu">
+        <we-select string="Size">
+            <we-button data-select-class="">Full-Width</we-button>
+            <we-button data-select-class="o_mega_menu_container_size">Narrow</we-button>
+        </we-select>
+    </div>
+
+    <div data-selector=".o_mega_menu .nav-link"
+         data-drop-in=".o_mega_menu nav"
+         data-drop-near=".o_mega_menu .nav-link"/>
+
+    <div data-js="CoverProperties" data-selector=".o_record_cover_container" data-no-check="true">
+        <we-row string="Background" class="o_we_full_row">
+            <t t-call="web_editor.snippet_options_background_color_widget">
+                <t t-set="with_color_combinations" t-value="True"/>
+            </t>
+            <we-button-group class="ml-auto">
+                <we-imagepicker title="Image" data-background="" data-button-style="true"/>
+                <we-button title="None" data-background="">
+                    <i class="fa fa-fw fa-ban"/>
+                </we-button>
+            </we-button-group>
+        </we-row>
+        <we-select string="Size" data-cover-opt-name="size">
+            <we-button data-select-class="o_full_screen_height">Full Screen</we-button>
+            <we-button class="o_record_cover_opt_size_default" data-select-class="o_half_screen_height">Half Screen</we-button>
+            <we-button data-select-class="cover_auto">Fit text</we-button>
+        </we-select>
+        <we-select string="Filter Intensity" data-cover-opt-name="filters">
+            <we-button data-filter-value="0.0">None</we-button>
+            <we-button data-filter-value="0.2">Low</we-button>
+            <we-button data-filter-value="0.4">Medium</we-button>
+            <we-button data-filter-value="0.6">High</we-button>
+        </we-select>
+        <we-select string="Text Alignment" data-cover-opt-name="text_align">
+            <we-button data-select-class="">Left</we-button>
+            <we-button data-select-class="text-center">Centered</we-button>
+            <we-button data-select-class="text-right">Right</we-button>
+        </we-select>
+    </div>
+
+    <!-- Stretch section -->
+    <div data-js="ContainerWidth" data-selector="section, .s_carousel .carousel-item, s_quotes_carousel .carousel-item"
+        data-target="> .container, > .container-fluid, > .o_container_small">
+        <we-button-group string="Content Width">
+            <we-button data-select-class="o_container_small"
+                       data-img="/website/static/src/img/snippets_options/content_width_small.svg"
+                       title="Small"/>
+            <we-button data-select-class="container"
+                       data-img="/website/static/src/img/snippets_options/content_width_normal.svg"
+                       title="Regular"/>
+            <we-button data-select-class="container-fluid"
+                       data-img="/website/static/src/img/snippets_options/content_width_full.svg"
+                       title="Full"/>
+        </we-button-group>
+    </div>
+
+    <!-- Min height of section -->
+    <div data-option-name="minHeight" data-selector="section">
+        <we-button-group string="Height">
+            <we-button data-select-class="" title="Fit content">Auto</we-button>
+            <we-button data-select-class="o_half_screen_height" title="Half screen">50%</we-button>
+            <we-button data-select-class="o_full_screen_height" title="Full screen">100%</we-button>
+        </we-button-group>
+    </div>
+
+    <!-- Scroll to next section button (only for full height) -->
+    <div data-js="ScrollButton" data-selector="section">
+        <we-checkbox string="Scroll down button"
+                     data-toggle-button="true"
+                     data-no-preview="true"
+                     data-name="scroll_button_opt"/>
+        <!-- &emsp; -->
+        <we-row string=" ⌙ Colors">
+            <we-colorpicker
+                data-select-style="true"
+                data-css-property="background-color"
+                data-color-prefix="bg-"
+                data-apply-to=".o_scroll_button"
+                data-dependencies="scroll_button_opt"/>
+            <we-colorpicker data-select-style="true"
+                data-css-property="color"
+                data-color-prefix="text-"
+                data-apply-to=".o_scroll_button"
+                data-dependencies="scroll_button_opt"/>
+        </we-row>
+        <we-select string=" ⌙ Spacing"
+                   data-apply-to=".o_scroll_button"
+                   data-dependencies="scroll_button_opt">
+            <we-button data-select-class="">None</we-button>
+            <we-button data-select-class="mb-1">Extra-Small</we-button>
+            <we-button data-select-class="mb-2">Small</we-button>
+            <we-button data-select-class="mb-3">Medium</we-button>
+            <we-button data-select-class="mb-4">Large</we-button>
+            <we-button data-select-class="mb-5">Extra-Large</we-button>
+        </we-select>
+    </div>
+
+    <!--  Vertical Alignment -->
+    <div data-option-name="vAlignment" id="row_valign_snippet_option" data-selector=".s_text_image, .s_image_text, .s_three_columns" data-target=".row">
+        <we-button-group string="Vert. Alignment" title="Vertical Alignment">
+            <we-button title="Align Top"
+                       data-select-class="align-items-start"
+                       data-img="/website/static/src/img/snippets_options/align_top.svg"/>
+            <we-button title="Align Middle"
+                       data-select-class="align-items-center"
+                       data-img="/website/static/src/img/snippets_options/align_middle.svg"/>
+            <we-button title="Align Bottom"
+                       data-select-class="align-items-end"
+                       data-img="/website/static/src/img/snippets_options/align_bottom.svg"/>
+            <we-button title="Stretch to Equal Height"
+                       data-select-class="align-items-stretch"
+                       data-img="/website/static/src/img/snippets_options/align_stretch.svg"/>
+        </we-button-group>
+    </div>
+
+    <!-- Cookies Bar -->
+    <div data-selector="#website_cookies_bar" data-js="CookiesBar" data-target=".modal">
+        <we-select string="Layout" class="o_we_inline">
+            <we-button data-select-class="o_cookies_discrete" data-select-layout="discrete" data-trigger="position_bottom,s_popup_size_full">Discrete</we-button>
+            <we-button data-select-class="o_cookies_classic" data-select-layout="classic" data-trigger="position_bottom,s_popup_size_full">Classic</we-button>
+            <we-button data-name="layout_popup_opt" data-select-class="o_cookies_popup" data-select-layout="popup" data-trigger="position_middle,s_popup_size_md">Popup</we-button>
+        </we-select>
+    </div>
+
+    <!-- Theme options -->
+    <div data-js="ThemeColors" data-selector="theme-colors" data-no-check="true">
+        <we-alert class="o_old_color_system_warning d-none">
+            It appears your website is still using the old color system of
+            Odoo 13.0 in some places. We made sure it is still working but
+            we recommend you to try to use the new color system, which is
+            still customizable.
+        </we-alert>
+        <we-row class="o_we_theme_colors_selector">
+            <we-colorpicker data-name="color_1_opt" title="Primary"
+                            data-customize-website-color="" data-color="o-color-1"
+                            data-use-css-color="true"/>
+            <we-colorpicker data-name="color_2_opt" title="Secondary"
+                            data-customize-website-color="" data-color="o-color-2"
+                            data-use-css-color="true"/>
+            <we-colorpicker data-customize-website-color="" data-color="o-color-3"
+                            data-use-css-color="true"/>
+            <we-colorpicker data-customize-website-color="" data-color="o-color-4"
+                            data-use-css-color="true"/>
+            <we-colorpicker data-customize-website-color="" data-color="o-color-5"
+                            data-use-css-color="true"/>
+            <we-select data-icon="fa-lightbulb-o" class="o_we_theme_colors_select" data-variable="color-palettes-number"/>
+        </we-row>
+    </div>
+    <div data-js="OptionsTab" data-selector="theme-options" data-no-check="true">
+        <we-checkbox string="Show Header"
+                     data-customize-website-views="website.option_layout_hide_header|"
+                     data-reload="/"/>
+        <we-select string="Page Layout" data-variable="layout">
+            <we-button data-customize-website-variable="'full'" data-name="layout_full_opt">Full</we-button>
+            <we-button data-customize-website-variable="'boxed'">Boxed</we-button>
+            <we-button data-customize-website-variable="'framed'">Framed</we-button>
+            <we-button data-customize-website-variable="'postcard'">Postcard</we-button>
+        </we-select>
+        <we-row string="⌙ Background" data-no-preview="true">
+            <we-colorpicker data-dependencies="!layout_full_opt"
+                            data-customize-website-color=""
+                            data-color="body"/>
+            <we-button-group data-imagepicker="body_bg_image_opt">
+                <we-button title="Image"
+                           data-customize-body-bg-type="'image'"><i class="fa fa-fw fa-camera"/></we-button>
+                <we-button title="Pattern"
+                           data-customize-body-bg-type="'pattern'"><i class="fa fa-fw fa-th"/></we-button>
+                <we-button title="None"
+                           data-customize-body-bg-type="NONE"><i class="fa fa-fw fa-ban"/></we-button>
+            </we-button-group>
+            <!-- Hidden imagepicker enabled by above button-group -->
+            <we-imagepicker data-name="body_bg_image_opt"
+                            data-customize-body-bg=""/>
+        </we-row>
+        <we-input string="Font size"
+                  data-customize-website-variable="null"
+                  data-variable="font-size-base"
+                  data-unit="px"
+                  data-save-unit="rem"/>
+        <we-collapse>
+            <we-fontfamilypicker string="Font family" data-variable="font"/>
+            <we-fontfamilypicker string="⌙ Headings" data-variable="headings-font"/>
+            <we-fontfamilypicker string="⌙ Buttons" data-variable="buttons-font"/>
+        </we-collapse>
+
+        <!-- Buttons & Links -->
+        <we-title>Buttons</we-title>
+        <we-select string="Primary Style" data-variable="btn-primary-outline" class="">
+            <we-button data-customize-website-variable="false">Fill</we-button>
+            <we-button data-customize-website-variable="true">Outline</we-button>
+        </we-select>
+        <we-select string="Secondary Style" data-variable="btn-secondary-outline">
+            <we-button data-customize-website-variable="false">Fill</we-button>
+            <we-button data-customize-website-variable="true">Outline</we-button>
+        </we-select>
+        <we-collapse>
+            <we-row string="Paddings">
+                <we-input title="Y" data-customize-website-variable="" data-variable="btn-padding-y" data-unit="px" data-save-unit="rem"/>
+                <we-input title="X" data-customize-website-variable="" data-variable="btn-padding-x" data-unit="px" data-save-unit="rem"/>
+            </we-row>
+            <we-row string="⌙ Small">
+                <we-input title="Y" data-customize-website-variable="" data-variable="btn-padding-y-sm" data-unit="px" data-save-unit="rem"/>
+                <we-input title="X" data-customize-website-variable="" data-variable="btn-padding-x-sm" data-unit="px" data-save-unit="rem"/>
+            </we-row>
+            <we-row string="⌙ Large">
+                <we-input title="Y" data-customize-website-variable="" data-variable="btn-padding-y-lg" data-unit="px" data-save-unit="rem"/>
+                <we-input title="X" data-customize-website-variable="" data-variable="btn-padding-x-lg" data-unit="px" data-save-unit="rem"/>
+            </we-row>
+        </we-collapse>
+        <we-collapse>
+            <we-input string="Font Size" data-customize-website-variable="" data-variable="btn-font-size" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Small" data-customize-website-variable="" data-variable="btn-font-size-sm" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Large" data-customize-website-variable="" data-variable="btn-font-size-lg" data-unit="px" data-save-unit="rem"/>
+        </we-collapse>
+        <we-input string="Border Width" data-customize-website-variable="" data-variable="btn-border-width" data-unit="px" data-save-unit="rem"/>>
+        <we-collapse>
+            <we-input string="Border Radius" data-customize-website-variable="" data-variable="btn-border-radius" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Small" data-customize-website-variable="" data-variable="btn-border-radius-sm" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Large" data-customize-website-variable="" data-variable="btn-border-radius-lg" data-unit="px" data-save-unit="rem"/>
+        </we-collapse>
+        <we-checkbox string="Ripple Effect"
+                     data-customize-website-views="website.option_ripple_effect"
+                     data-customize-website-variable="false|true"
+                     data-variable="btn-ripple"/>
+        <we-select string="Link Style" data-variable="link-underline">
+            <we-button data-customize-website-variable="'never'">Normal</we-button>
+            <we-button data-customize-website-variable="'hover'">Underline On Hover</we-button>
+            <we-button data-customize-website-variable="'always'">Always Underlined</we-button>
+        </we-select>
+
+        <!-- Inputs -->
+        <we-title>Inputs</we-title>
+        <we-collapse>
+            <we-row string="Paddings">
+                <we-input title="Y" data-customize-website-variable="" data-variable="input-padding-y" data-unit="px" data-save-unit="rem"/>
+                <we-input title="X" data-customize-website-variable="" data-variable="input-padding-x" data-unit="px" data-save-unit="rem"/>
+            </we-row>
+            <we-row string="⌙ Small">
+                <we-input title="Y" data-customize-website-variable="" data-variable="input-padding-y-sm" data-unit="px" data-save-unit="rem"/>
+                <we-input title="X" data-customize-website-variable="" data-variable="input-padding-x-sm" data-unit="px" data-save-unit="rem"/>
+            </we-row>
+            <we-row string="⌙ Large">
+                <we-input title="Y" data-customize-website-variable="" data-variable="input-padding-y-lg" data-unit="px" data-save-unit="rem"/>
+                <we-input title="X" data-customize-website-variable="" data-variable="input-padding-x-lg" data-unit="px" data-save-unit="rem"/>
+            </we-row>
+        </we-collapse>
+        <we-collapse>
+            <we-input string="Font Size" data-customize-website-variable="" data-variable="input-font-size" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Small" data-customize-website-variable="" data-variable="input-font-size-sm" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Large" data-customize-website-variable="" data-variable="input-font-size-lg" data-unit="px" data-save-unit="rem"/>
+        </we-collapse>
+        <we-input string="Border Width" data-customize-website-variable="" data-variable="input-border-width" data-unit="px" data-save-unit="rem"/>>
+        <we-collapse>
+            <we-input string="Border Radius" data-customize-website-variable="" data-variable="input-border-radius" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Small" data-customize-website-variable="" data-variable="input-border-radius-sm" data-unit="px" data-save-unit="rem"/>
+            <we-input string="⌙ Large" data-customize-website-variable="" data-variable="input-border-radius-lg" data-unit="px" data-save-unit="rem"/>
+        </we-collapse>
+
+        <we-row string="Status Colors">
+            <we-colorpicker title="Success" data-customize-website-color="" data-color-type="theme" data-color="success"/>
+            <we-colorpicker title="Info" data-customize-website-color="" data-color-type="theme" data-color="info"/>
+            <we-colorpicker title="Warning" data-customize-website-color="" data-color-type="theme" data-color="warning"/>
+            <we-colorpicker title="Error" data-customize-website-color="" data-color-type="theme" data-color="danger"/>
+        </we-row>
+    </div>
+    <div data-js="OptionsTab" data-selector="website-settings" data-no-check="true">
+        <we-row string="Theme">
+            <we-button data-switch-theme="" data-no-preview="true">Switch Theme</we-button>
+        </we-row>
+        <we-row string="Code Injection" title="Enter code that will be added into every page of your site">
+            <we-button data-no-preview="true" data-open-custom-code-dialog="head">&amp;lt;head&amp;gt;</we-button>
+            <we-button data-no-preview="true" data-open-custom-code-dialog="footer">&amp;lt;/body&amp;gt;</we-button>
+        </we-row>
+        <we-row string="Google Map">
+            <we-button data-configure-api-key="" data-no-preview="true">Custom Key</we-button>
+        </we-row>
+    </div>
+</template>
+</odoo>
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
new file mode 100644
index 00000000..6a5eb24e
--- /dev/null
+++ b/addons/website/views/website_navbar_templates.xml
@@ -0,0 +1,212 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <!-- publish/unpublish button -->
+    <template id="website_publisher" name="Website Publisher">
+        <t groups="website.group_website_publisher" t-if="'website_published' in main_object.fields_get() and ('can_publish' not in main_object.fields_get() or main_object.can_publish)">
+            <li t-attf-class="js_publish_management #{extra_classes} #{main_object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-description="env['ir.model']._get(main_object._name).display_name" t-att-data-id="main_object.id" t-att-data-object="main_object._name" t-att-data-controller="publish_controller">
+                <label class="o_switch o_switch_danger js_publish_btn" t-att-accesskey="desktop_navbar and 'p'">
+                    <input type="checkbox" t-att-checked="main_object.website_published"/>
+                    <span/>
+                    <span class="css_publish">Unpublished</span>
+                    <span class="css_unpublish">Published</span>
+                </label>
+            </li>
+        </t>
+    </template>
+
+    <!-- Front-end/Back-end integration -->
+    <template id="user_navbar" inherit_id="website.layout" name="User Navbar">
+        <xpath expr="//t[@t-set='html_data']" position="after">
+            <t t-set="body_classname" t-value="(body_classname if body_classname else '') + (' o_connected_user' if env['ir.ui.view'].user_has_groups('base.group_user') else '')"/>
+        </xpath>
+        <xpath expr="//div[@id='wrapwrap']" position="before">
+            <div t-if="'enable_new_content' in request.params" id="o_website_page_loader"/>
+            <nav groups="base.group_user" t-if="website" id="oe_main_menu_navbar" class="o_main_navbar">
+                <ul id="oe_applications">
+                    <li class="dropdown active">
+                        <a class="dropdown-toggle full" data-toggle="dropdown" href="#" accesskey="h">
+                            <i class="fa fa-th-large"/> WEBSITE
+                        </a>
+                        <div class="dropdown-menu" role="menu">
+                            <!-- This will be populated on hover in JS -->
+                        </div>
+                    </li>
+                </ul>
+
+                <button type="button" class="fa fa-bars float-right d-block d-md-none o_mobile_menu_toggle" aria-label="Menu" title="Menu"/>
+
+                <ul class="o_menu_sections" groups="website.group_website_designer">
+                    <!-- Content -->
+                    <li t-if="editable" class="dropdown" id="content-menu">
+                        <a id="content-menu-button" class="dropdown-toggle o-no-caret waves" data-toggle="dropdown" data-display="static" href="#">Pages</a>
+                        <div class="dropdown-menu" role="menu">
+                            <a role="menuitem" data-action="edit_menu" href="#" title="Edit Top Menu" class="dropdown-item">Edit Menu</a>
+                            <a role="menuitem" href="/website/pages" title="Manage Your Website Pages" class="dropdown-item">Manage Pages</a>
+                            <div t-if="deletable" role="separator" class="dropdown-divider"/>
+                            <a role="menuitem" href="#" data-action="page_properties" class="dropdown-item" t-if="deletable">Page Properties</a>
+                        </div>
+                    </li>
+                    <!-- Customize -->
+                    <li class="dropdown" id="customize-menu">
+                        <a class="dropdown-toggle o-no-caret waves" data-toggle="dropdown" data-display="static" href="#">Customize</a>
+                        <div class="dropdown-menu" role="menu">
+                            <a role="menuitem" href="#" data-action="ace" class="dropdown-item" id="html_editor">HTML/CSS/JS Editor</a>
+                            <a role="menuitem" href="/web#action=website.action_website_add_features" class="dropdown-item" id="install_apps">Add Features</a>
+                        </div>
+                    </li>
+                    <!-- Promote -->
+                    <li class="dropdown" id="promote-menu">
+                        <a class="dropdown-toggle o-no-caret waves" data-toggle="dropdown" data-display="static" href="#">Promote</a>
+                        <div class="dropdown-menu oe_promote_menu" role="menu">
+                            <a role="menuitem" data-action="promote-current-page" href="#" title="Promote page on the web" class="dropdown-item">Optimize SEO</a>
+                        </div>
+                    </li>
+                    <t t-call="website.website_publisher">
+                        <t t-set="extra_classes" t-translation="off">d-block d-sm-block d-md-none</t>
+                    </t>
+                </ul>
+
+                <ul class="o_menu_systray d-none d-md-block" groups="website.group_website_publisher">
+                    <t t-call="website.website_publisher">
+                        <t t-set="extra_classes" t-value=""/>
+                        <t t-set="desktop_navbar" t-value="true"/>
+                    </t>
+                    <!-- Mobile preview -->
+                    <li class="o_mobile_preview" id="mobile-menu">
+                        <a data-action="show-mobile-preview" href="#" accesskey="v"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-mobile"/></a>
+                    </li>
+                    <li groups="website.group_multi_website" t-if="multi_website_websites" id="website_switcher">
+                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" accesskey="w">
+                            <i class="fa fa-globe d-lg-none"/>
+                            <span class="d-none d-lg-inline-block">
+                                <t t-esc="multi_website_websites_current['name']"/>
+                            </span>
+                        </a>
+                        <div class="dropdown-menu" role="menu">
+                            <div class="d-lg-none dropdown-item active">
+                                <span t-esc="multi_website_websites_current['name']"/>
+                            </div>
+                            <t t-foreach="multi_website_websites" t-as="multi_website_website">
+                                <a role="menuitem" href="#"
+                                    t-att-domain="multi_website_website['domain']"
+                                    class="dropdown-item oe_menu_text js_multi_website_switch"
+                                    t-att-website-id="str(multi_website_website['website_id'])"
+                                >
+                                    <span t-esc="multi_website_website['name']" />
+                                </a>
+                            </t>
+                        </div>
+                    </li>
+
+                    <!-- Page Edition -->
+                    <li class="o_new_content_menu" id="new-content-menu">
+                        <a href="#" accesskey="c"><span class="fa fa-plus mr-2"/>New</a>
+                        <div id="o_new_content_menu_choices" class="o_hidden">
+                            <div class="container pt32 pb32">
+                                <div class="row">
+                                    <div groups="website.group_website_designer" class="col-md-4 mb8 o_new_content_element">
+                                        <a href="#" data-action="new_page" aria-label="New page" title="New page">
+                                            <i class="fa fa-file-o"/>
+                                            <p>Page</p>
+                                        </a>
+                                    </div>
+                                    <t>
+                                        <t t-set="mod" t-value="env.ref('base.module_website_blog')"/>
+                                        <div name="module_website_blog" groups="base.group_system"
+                                             t-att-data-module-id="mod.id"
+                                             t-att-data-module-shortdesc="mod.shortdesc"
+                                             class="col-md-4 mb8 o_new_content_element">
+                                            <a href="#" data-action="new_blog_post">
+                                                <i class="fa fa-rss"/>
+                                                <p>Blog Post</p>
+                                            </a>
+                                        </div>
+                                        <t t-set="mod" t-value="env.ref('base.module_website_event')"/>
+                                        <div name="module_website_event" groups="base.group_system"
+                                             t-att-data-module-id="mod.id"
+                                             t-att-data-module-shortdesc="mod.shortdesc"
+                                             class="col-md-4 mb8 o_new_content_element">
+                                            <a href="#" data-action="new_event">
+                                                <i class="fa fa-ticket"/>
+                                                <p>Event</p>
+                                            </a>
+                                        </div>
+                                        <t t-set="mod" t-value="env.ref('base.module_website_forum')"/>
+                                        <div name="module_website_forum" groups="base.group_system"
+                                             t-att-data-module-id="mod.id"
+                                             t-att-data-module-shortdesc="mod.shortdesc"
+                                             class="col-md-4 mb8 o_new_content_element o_new_content_element_once">
+                                            <a href="#" data-url="/forum" data-action="new_forum">
+                                                <i class="fa fa-comment"/>
+                                                <p>Forum</p>
+                                            </a>
+                                        </div>
+                                        <t t-set="mod" t-value="env.ref('base.module_website_hr_recruitment')"/>
+                                        <div name="module_website_hr_recruitment" groups="base.group_system"
+                                             t-att-data-module-id="mod.id"
+                                             t-att-data-module-shortdesc="mod.shortdesc"
+                                             class="col-md-4 mb8 o_new_content_element">
+                                            <a href="#">
+                                                <i class="fa fa-briefcase"/>
+                                                <p>Job Offer</p>
+                                            </a>
+                                        </div>
+                                        <t t-set="mod" t-value="env.ref('base.module_website_sale')"/>
+                                        <div name="module_website_sale" groups="base.group_system"
+                                             t-att-data-module-id="mod.id"
+                                             t-att-data-module-shortdesc="mod.shortdesc"
+                                             class="col-md-4 mb8 o_new_content_element">
+                                            <a href="#" data-action="new_product">
+                                                <i class="fa fa-shopping-cart"/>
+                                                <p>Product</p>
+                                            </a>
+                                        </div>
+                                        <t t-set="mod" t-value="env.ref('base.module_website_slides')"/>
+                                        <div name="module_website_slides" groups="base.group_system"
+                                             t-att-data-module-id="mod.id"
+                                             t-att-data-module-shortdesc="mod.shortdesc"
+                                             class="col-md-4 mb8 o_new_content_element">
+                                            <a href="#" data-action="new_slide_channel">
+                                                <i class="fa module_icon" style="background-image: url('/website/static/src/img/apps_thumbs/website_slide.svg');
+                                                    background-repeat: no-repeat; background-position: center;"/>
+                                                <p>Course</p>
+                                            </a>
+                                        </div>
+                                        <t t-set="mod" t-value="env.ref('base.module_website_livechat')"/>
+                                        <div name="module_website_livechat" groups="base.group_system"
+                                             t-att-data-module-id="mod.id"
+                                             t-att-data-module-shortdesc="mod.shortdesc"
+                                             class="col-md-4 mb8 o_new_content_element o_new_content_element_once">
+                                            <a href="#" data-url="/livechat" data-action="new_channel">
+                                                <i class="fa fa-comments"/>
+                                                <p>Livechat Widget</p>
+                                            </a>
+                                        </div>
+                                    </t>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li t-if="not translatable" id="edit-page-menu">
+                        <a data-action="edit" href="#" accesskey="a"><span class="fa fa-pencil mr-2"/>Edit</a>
+                    </li>
+                    <li t-if="edit_in_backend or ('website_published' in main_object.fields_get() and main_object._name != 'website.page')">
+                        <a role="button" class="btn btn-primary btn-sm dropdown-toggle css_edit_dynamic" data-toggle="dropdown">
+                            <span class="sr-only">Toggle Dropdown</span>
+                        </a>
+                        <div class="dropdown-menu" role="menu">
+                            <a role="menuitem" style="text-align: left;" t-attf-href="/web#view_type=form&amp;model=#{main_object._name}&amp;id=#{main_object.id}&amp;action=#{action}&amp;menu_id=#{backend_menu_id}"
+                                   class="dropdown-item" title='Edit in backend' id="edit-in-backend">Edit in backend</a>
+                        </div>
+                    </li>
+                    <li t-if="translatable">
+                        <a data-action="translate" href="#">TRANSLATE</a>
+                    </li>
+                    <li t-if="translatable">
+                        <a data-action="edit_master" href="#">or Edit Master</a>
+                    </li>
+                </ul>
+            </nav>
+        </xpath>
+    </template>
+</odoo>
diff --git a/addons/website/views/website_rewrite.xml b/addons/website/views/website_rewrite.xml
new file mode 100644
index 00000000..a378062b
--- /dev/null
+++ b/addons/website/views/website_rewrite.xml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+        <!-- Attachment -->
+        <record id="view_website_rewrite_form" model="ir.ui.view">
+            <field name="model">website.rewrite</field>
+            <field name="arch" type="xml">
+                <form string="Website rewrite Settings">
+                    <header>
+                        <button name="refresh_routes" string="Refresh route's list" type="object"
+                                class="btn-primary"
+                                attrs="{'invisible':[('redirect_type', '!=', '308')]}"
+                        />
+                    </header>
+                    <sheet>
+                        <group>
+                            <group>
+                                <field name="name"/>
+                                <field name="redirect_type"/>
+                                <field name="url_from" attrs="{'invisible': [('redirect_type', '=', '308')]}"/>
+                                <field name="route_id" string="URL from" options="{'no_create': True, 'no_open': True}" attrs="{'invisible': [('redirect_type', '!=', '308')]}"/>
+                                <field name="url_to" attrs="{'invisible': [('redirect_type', '=', '404')]}"/>
+                            </group>
+                            <group>
+                                <field name="website_id" options="{'no_create': True}" groups="website.group_multi_website"/>
+                                <field name="active" widget="boolean_toggle"/>
+                                <field name="sequence" groups="base.group_no_one"/>
+                            </group>
+                        </group>
+                    </sheet>
+                </form>
+            </field>
+        </record>
+
+        <record id="action_website_rewrite_tree" model="ir.ui.view">
+            <field name="name">website.rewrite.list</field>
+            <field name="model">website.rewrite</field>
+            <field name="arch" type="xml">
+                <tree string="Website rewrites">
+                    <field name="sequence" widget="handle" />
+                    <field name="redirect_type"/>
+                    <field name="name"/>
+                    <field name="url_from"/>
+                    <field name="url_to"/>
+                    <field name="website_id" options="{'no_create': True}" groups="website.group_multi_website"/>
+                    <field name="active"/>
+                </tree>
+            </field>
+        </record>
+
+
+        <record id="action_website_rewrite_list" model="ir.actions.act_window">
+            <field name="name">Rewrite</field>
+            <field name="type">ir.actions.act_window</field>
+            <field name="res_model">website.rewrite</field>
+            <field name="view_id" eval="False"/>
+        </record>
+
+        <menuitem name="Redirects"
+            id="menu_website_rewrite"
+            action="action_website_rewrite_list"
+            parent="menu_website_global_configuration"
+            sequence="30"
+            groups="base.group_no_one"/>
+
+        <record id="view_rewrite_search" model="ir.ui.view">
+            <field name="name">website.rewrite.search</field>
+            <field name="model">website.rewrite</field>
+            <field name="arch" type="xml">
+                <search string="Search Redirect">
+                    <field name="url_from"/>
+                    <field name="url_to"/>
+                    <separator/>
+                    <filter string="Archived" name="inactive" domain="[('active', '=', False)]"/>
+                    <group string="Group By">
+                        <filter string="Redirection Type" name="group_by_type" domain="[]" context="{'group_by': 'redirect_type'}"/>
+                    </group>
+                </search>
+            </field>
+        </record>
+</odoo>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
new file mode 100644
index 00000000..cffc7539
--- /dev/null
+++ b/addons/website/views/website_templates.xml
@@ -0,0 +1,2465 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="submenu" name="Submenu">
+    <t t-set="has_visible_submenu" t-value="(submenu.is_mega_menu and submenu.is_visible) or submenu.child_id.filtered(lambda menu: menu.is_visible)"/>
+    <li t-if="submenu.is_visible and not has_visible_submenu" t-attf-class="#{item_class or ''}">
+        <a t-att-href="submenu.clean_url()"
+            t-attf-class="#{link_class or ''} #{'active' if submenu.clean_url() and unslug_url(request.httprequest.path) == unslug_url(submenu.clean_url()) else ''}"
+            role="menuitem"
+            t-ignore="true"
+            t-att-target="'_blank' if submenu.new_window else None">
+            <span t-field="submenu.name"/>
+        </a>
+    </li>
+    <li t-if="has_visible_submenu" t-attf-class="#{item_class or ''} dropdown #{
+        (submenu.clean_url() and submenu.clean_url() != '/' and any(request.httprequest.path == child.url for child in submenu.child_id if child.url) or
+         (submenu.clean_url() and request.httprequest.path == submenu.clean_url())) and 'active'
+        } #{submenu.is_mega_menu and 'position-static'}">
+        <a t-attf-class="#{link_class or ''} dropdown-toggle #{submenu.is_mega_menu and 'o_mega_menu_toggle'}" data-toggle="dropdown" href="#">
+            <span t-field="submenu.name"/>
+        </a>
+        <div t-if="submenu.is_mega_menu"
+             t-attf-class="dropdown-menu o_mega_menu #{submenu.mega_menu_classes}"
+             data-name="Mega Menu"
+             t-field="submenu.mega_menu_content"/>
+        <ul t-else="" class="dropdown-menu" role="menu">
+            <t t-foreach="submenu.child_id" t-as="submenu">
+                <t t-call="website.submenu">
+                    <t t-set="item_class" t-value="None"/>
+                    <t t-set="link_class" t-value="'dropdown-item'"/>
+                </t>
+            </t>
+        </ul>
+    </li>
+</template>
+
+<template id="layout" name="Main layout" inherit_id="portal.frontend_layout">
+    <xpath expr="//html" position="before">
+        <t t-set="html_data" t-value="{
+            'lang': lang and lang.replace('_', '-'),
+            'data-website-id': website.id if website else None,
+            'data-editable': '1' if editable else None,
+            'data-translatable': '1' if translatable else None,
+            'data-edit_translations': '1' if edit_translations else None,
+            'data-view-xmlid': xmlid if editable or translatable else None,
+            'data-viewid': viewid if editable or translatable else None,
+            'data-main-object': repr(main_object) if editable or translatable else None,
+            'data-seo-object': repr(seo_object) if seo_object else None,
+            'data-oe-company-name': res_company.name,
+        }"/>
+    </xpath>
+    <xpath expr="//head" position="before">
+        <t t-if="not title">
+            <t t-if="not additional_title and main_object and 'name' in main_object">
+                <t t-set="additional_title" t-value="main_object.name"/>
+            </t>
+            <t t-set="default_title"> <t t-if="additional_title"><t t-raw="additional_title"/> | </t><t t-raw="(website or res_company).name"/> </t>
+            <t t-set="seo_object" t-value="seo_object or main_object"/>
+            <t t-if="seo_object and 'website_meta_title' in seo_object and seo_object.website_meta_title">
+                <t t-set="title" t-value="seo_object.website_meta_title"/>
+            </t>
+            <t t-else="">
+                <t t-set="title" t-value="default_title"></t>
+            </t>
+        </t>
+        <t t-set="x_icon" t-value="website.image_url(website, 'favicon')"/>
+    </xpath>
+    <xpath expr="//head/meta[last()]" position="after">
+        <meta name="generator" content="Odoo"/>
+        <t t-set="website_meta" t-value="seo_object and seo_object.get_website_meta() or {}"/>
+        <meta name="default_title" t-att-content="default_title" groups="website.group_website_designer"/>
+        <meta t-if="main_object and 'website_indexed' in main_object
+            and not main_object.website_indexed" name="robots" content="noindex"/>
+            <t t-set="seo_object" t-value="seo_object or main_object"/>
+            <t t-set="meta_description" t-value="seo_object and 'website_meta_description' in seo_object
+                and seo_object.website_meta_description or website_meta_description or website_meta.get('meta_description', '')"/>
+            <t t-set="meta_keywords" t-value="seo_object and 'website_meta_keywords' in seo_object
+                and seo_object.website_meta_keywords or website_meta_keywords"/>
+        <meta t-if="meta_description or editable" name="description" t-att-content="meta_description"/>
+        <meta t-if="meta_keywords or editable" name="keywords" t-att-content="meta_keywords"/>
+        <t t-if="seo_object">
+            <meta name="default_description" t-att-content="website_meta_description or website_meta.get('meta_description')" groups="website.group_website_designer"/>
+            <!-- OpenGraph tags for Facebook sharing -->
+            <t t-set="opengraph_meta" t-value="website_meta.get('opengraph_meta')"/>
+            <t t-if="opengraph_meta">
+                <t t-foreach="opengraph_meta" t-as="property">
+                    <t t-if="isinstance(opengraph_meta[property], list)">
+                        <t t-foreach="opengraph_meta[property]" t-as="meta_content">
+                            <meta t-att-property="property" t-att-content="meta_content"/>
+                        </t>
+                    </t>
+                    <t t-else="">
+                        <meta t-att-property="property" t-att-content="opengraph_meta[property]"/>
+                    </t>
+                </t>
+            </t>
+            <!-- Twitter tags for sharing -->
+            <t t-set="twitter_meta" t-value="website_meta.get('twitter_meta')"/>
+            <t t-if="opengraph_meta">
+                <t t-foreach="twitter_meta" t-as="t_meta">
+                    <meta t-att-name="t_meta" t-att-content="twitter_meta[t_meta]"/>
+                </t>
+            </t>
+        </t>
+
+        <t t-if="request and request.is_frontend_multilang and website">
+            <t t-set="alternate_languages" t-value="website._get_alternate_languages(canonical_params=canonical_params)"/>
+            <t t-foreach="alternate_languages" t-as="lg">
+                <link rel="alternate" t-att-hreflang="lg['hreflang']" t-att-href="lg['href']"/>
+            </t>
+        </t>
+        <link t-if="request and website" rel="canonical" t-att-href="website._get_canonical_url(canonical_params=canonical_params)"/>
+
+        <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin=""/>
+    </xpath>
+
+    <xpath expr="//head/t[@t-js='false'][last()]" position="after">
+        <t t-call-assets="website.assets_editor" t-js="false" groups="website.group_website_publisher"/>
+    </xpath>
+    <xpath expr="//head/t[@t-css='false'][last()]" position="after">
+        <t t-call-assets="website.assets_editor" t-css="false" groups="website.group_website_publisher" lazy_load="True"/>
+    </xpath>
+
+    <xpath expr="//header" position="attributes">
+        <attribute name="data-name">Header</attribute>
+    </xpath>
+
+    <xpath expr="//footer" position="attributes">
+        <attribute name="data-name">Footer</attribute>
+        <!-- Background now controlled by css configuration, using color combinations -->
+        <attribute name="t-attf-class" add="o_colored_level o_cc" remove="bg-light" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('o_footer_copyright')]" position="attributes">
+        <attribute name="data-name">Copyright</attribute>
+        <!-- Background now controlled by css configuration, using color combinations -->
+        <attribute name="class" add="o_colored_level o_cc" separator=" "/>
+    </xpath>
+    <xpath expr="//t[@t-call='web.brand_promotion']/.." position="attributes">
+        <attribute name="class" add="o_not_editable" separator=" "/>
+        <attribute name="t-if">not editable</attribute>
+    </xpath>
+
+    <xpath expr="//div[@id='wrapwrap']" position="after">
+        <script id='tracking_code' t-if="website and website.google_analytics_key and not editable">
+            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+            ga('create', '<t t-esc="website.google_analytics_key"/>'.trim(), 'auto');
+            ga('send','pageview');
+        </script>
+    </xpath>
+
+    <!-- Page options -->
+    <xpath expr="//div[@id='wrapwrap']" position="before">
+        <t groups="website.group_website_publisher">
+            <t t-foreach="['header_overlay', 'header_color', 'header_visible', 'footer_visible']" t-as="optionName">
+                <input t-if="optionName in main_object" type="hidden" class="o_page_option_data" t-att-name="optionName" t-att-value="main_object[optionName]"/>
+            </t>
+        </t>
+    </xpath>
+    <xpath expr="//div[@id='wrapwrap']" position="attributes">
+        <attribute name="t-attf-class" add="#{'o_header_overlay' if 'header_overlay' in main_object and main_object.header_overlay else ''}" separator=" "/>
+    </xpath>
+    <xpath expr="//header" position="attributes">
+        <attribute name="t-attf-class" add="#{main_object.header_color if 'header_color' in main_object else ''}" separator=" "/>
+    </xpath>
+    <xpath expr="//header" position="attributes">
+        <attribute name="t-attf-class" add="#{'d-none o_snippet_invisible' if 'header_visible' in main_object and not main_object.header_visible else ''}" separator=" "/>
+    </xpath>
+    <xpath expr="//footer[@id='bottom']" position="attributes">
+        <attribute name="t-attf-class" add="#{'d-none o_snippet_invisible' if 'footer_visible' in main_object and not main_object.footer_visible else ''}" separator=" "/>
+    </xpath>
+    <xpath expr="//footer//span[hasclass('o_footer_copyright_name')]" position="replace">
+        <span class="o_footer_copyright_name mr-2">Copyright &amp;copy; Company name</span>
+    </xpath>
+</template>
+
+<template id="custom_code_layout" name="Custom Code Layout" inherit_id="website.layout" priority="55">
+    <xpath expr="//head" position="inside">
+        <t t-raw="website.custom_code_head"/>
+    </xpath>
+    <xpath expr="//body" position="inside">
+        <t t-raw="website.custom_code_footer"/>
+    </xpath>
+</template>
+
+<template id="user_dropdown" inherit_id="portal.user_dropdown">
+    <xpath expr="//t[@t-set='is_connected']" position="replace">
+        <t t-set="is_connected" t-value="False"/>
+        <t t-if="website">
+            <t t-set="is_connected" t-value="website.user_id != user_id"/>
+        </t>
+        <t t-else="">$0</t>
+    </xpath>
+</template>
+
+<template id="brand_promotion" inherit_id="web.brand_promotion" name="Brand Promotion">
+    <xpath expr="//t[@t-call='web.brand_promotion_message']" position="replace">
+        <t t-call="web.brand_promotion_message">
+            <t t-set="_message">
+                Create a <a target="_blank" href="http://www.odoo.com/page/website-builder?utm_source=db&amp;utm_medium=website">free website</a>
+            </t>
+            <t t-set="_utm_medium" t-valuef="website"/>
+        </t>
+    </xpath>
+</template>
+
+<!-- Navbar -->
+<template id="navbar_toggler" name="Navbar Toggler">
+    <button type="button" t-attf-class="navbar-toggler #{_toggler_class}" data-toggle="collapse" data-target="#top_menu_collapse">
+        <span class="navbar-toggler-icon o_not_editable"/>
+    </button>
+</template>
+
+<!-- Navbar Nav -->
+<template id="navbar_nav" name="Navbar Nav">
+    <ul id="top_menu" t-attf-class="nav navbar-nav o_menu_loading #{_nav_class}">
+        <t t-raw="0"/>
+    </ul>
+</template>
+
+<!-- Header templates -->
+
+<!-- "Default" template -->
+<template id="template_header_default" inherit_id="website.layout" name="Template Header Default" active="True">
+    <xpath expr="//header//nav" position="replace">
+        <nav data-name="Navbar" class="navbar navbar-expand-lg navbar-light o_colored_level o_cc shadow-sm">
+            <div id="top_menu_container" class="container justify-content-start justify-content-lg-between">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand">
+                    <t t-set="_link_class" t-value="'mr-4'"/>
+                </t>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler">
+                    <t t-set="_toggler_class" t-value="'ml-auto'"/>
+                </t>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse order-last order-lg-0">
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-value="'flex-grow-1'"/>
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                        <!-- Sign In -->
+                        <t t-call="portal.placeholder_user_sign_in">
+                            <t t-set="_item_class" t-value="'nav-item ml-lg-auto'"/>
+                            <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                        </t>
+                        <!-- User Dropdown -->
+                        <t t-call="portal.user_dropdown">
+                            <t t-set="_user_name" t-value="true"/>
+                            <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-auto'"/>
+                            <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                        </t>
+                    </t>
+                </div>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
+                <!-- Button -->
+                <div class="oe_structure oe_structure_solo" id="oe_structure_header_default_1"/>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_default_oe_structure_header_default_1" inherit_id="website.template_header_default" name="Template Header Default (oe_structure_header_default_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_default_1']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_default_1">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <a href="/contactus" class="btn btn-primary ml-4">Contact Us</a>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_default_align_center" inherit_id="website.template_header_default" active="False">
+    <xpath expr="//t[@t-set='_nav_class']" position="replace">
+        <t t-set="_nav_class" t-value="'mx-auto'"/>
+    </xpath>
+</template>
+
+<template id="template_header_default_align_right" inherit_id="website.template_header_default" active="False">
+    <xpath expr="//t[@t-set='_nav_class']" position="replace">
+        <t t-set="_nav_class" t-value="'ml-auto'"/>
+    </xpath>
+</template>
+
+<!-- "Hamburger" template -->
+<template id="template_header_hamburger" inherit_id="website.layout" name="Template Header Hamburger" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <nav data-name="Navbar" class="navbar navbar-light o_colored_level o_cc">
+            <div id="top_menu_container" class="container">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand">
+                    <t t-set="_link_class" t-value="'mr-auto'"/>
+                </t>
+                <ul class="nav navbar-nav navbar-expand">
+                    <!-- Sign In -->
+                    <t t-call="portal.placeholder_user_sign_in">
+                        <t t-set="_item_class" t-value="'nav-item'"/>
+                        <t t-set="_link_class" t-value="'nav-link'"/>
+                    </t>
+                    <!-- User Dropdown -->
+                    <t t-call="portal.user_dropdown">
+                        <t t-set="_icon" t-value="true"/>
+                        <t t-set="_item_class" t-value="'nav-item dropdown'"/>
+                        <t t-set="_link_class" t-value="'nav-link'"/>
+                        <t t-set="_dropdown_menu_class" t-value="'position-absolute dropdown-menu-right'"/>
+                    </t>
+                </ul>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler">
+                    <t t-set="_toggler_class" t-value="'order-first mr-auto'"/>
+                </t>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
+                <!-- Button -->
+                <div class="oe_structure oe_structure_solo" id="oe_structure_header_hamburger_1"/>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse">
+                    <div class="oe_structure oe_structure_solo" id="oe_structure_header_hamburger_2"/>
+                    <t t-call="website.navbar_nav">
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                    </t>
+                    <div class="oe_structure oe_structure_solo" id="oe_structure_header_hamburger_3"/>
+                </div>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_hamburger_oe_structure_header_hamburger_1" inherit_id="website.template_header_hamburger" name="Template Header Hamburger (oe_structure_header_hamburger_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_hamburger_1']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_hamburger_1">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <a href="/contactus" class="btn btn-primary ml-4">Contact Us</a>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_hamburger_oe_structure_header_hamburger_2" inherit_id="website.template_header_hamburger" name="Template Header Hamburger (oe_structure_header_hamburger_2)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_hamburger_2']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_hamburger_2">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="s_hr text-left pt16 pb16" data-name="Separator">
+                        <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--300);"/>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_hamburger_oe_structure_header_hamburger_3" inherit_id="website.template_header_hamburger" name="Template Header Hamburger (oe_structure_header_hamburger_3)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_hamburger_3']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_hamburger_3">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="row align-items-center">
+                        <!-- Separator -->
+                        <div class="col-lg-12">
+                            <div class="s_hr text-left pt16 pb16" data-name="Separator">
+                                <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--300);"/>
+                            </div>
+                        </div>
+                        <!-- Social -->
+                        <div class="col-lg-6 pb16">
+                            <div class="s_share text-left no_icon_color" data-name="Social Media">
+                                <h5 class="s_share_title d-none">Follow us</h5>
+                                <a href="/website/social/facebook" class="s_share_facebook" target="_blank">
+                                    <i class="fa fa-facebook m-1"/>
+                                </a>
+                                <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                                    <i class="fa fa-twitter m-1"/>
+                                </a>
+                                <a href="/website/social/linkedin" class="s_share_linkedin" target="_blank">
+                                    <i class="fa fa-linkedin m-1"/>
+                                </a>
+                                <a href="/website/social/instagram" class="s_share_instagram" target="_blank">
+                                    <i class="fa fa-instagram m-1"/>
+                                </a>
+                            </div>
+                        </div>
+                        <!-- Contact -->
+                        <div class="col-lg-4 text-lg-right pb16">
+                            <i class="fa fa-1x fa-fw fa-envelope mr-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span>
+                        </div>
+                        <div class="col-lg-2 text-lg-right pb16">
+                            <i class="fa fa-1x fa-fw fa-phone mr-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_hamburger_align_center" inherit_id="website.template_header_hamburger" active="False">
+    <xpath expr="//t[@t-set='_toggler_class']" position="replace">
+        <t t-set="_toggler_class" t-value="'ml-4 mr-auto'"/>
+    </xpath>
+</template>
+
+<template id="template_header_hamburger_align_right" inherit_id="website.template_header_hamburger" active="False">
+    <xpath expr="//t[@t-set='_toggler_class']" position="replace">
+        <t t-set="_toggler_class" t-value="'ml-4'"/>
+    </xpath>
+</template>
+
+<!-- "Vertical" template -->
+<template id="template_header_vertical" inherit_id="website.layout" name="Template Header Vertical" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <nav data-name="Navbar" class="navbar navbar-expand-lg navbar-light flex-lg-column o_colored_level o_cc shadow-sm py-0">
+            <div id="top_menu_container" class="container align-items-center flex-row flex-wrap">
+                <!-- Left -->
+                <div class="o_header_centered_logo">
+                    <div class="oe_structure oe_structure_solo" id="oe_structure_header_vertical_1"/>
+                </div>
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand">
+                    <t t-set="_link_class" t-value="'m-0'"/>
+                </t>
+                <!-- Right -->
+                <div class="o_header_centered_logo text-right">
+                    <div class="oe_structure oe_structure_solo" id="oe_structure_header_vertical_2"/>
+                </div>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler">
+                    <t t-set="_toggler_class" t-value="'my-3'"/>
+                </t>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse flex-wrap">
+                    <div class="oe_structure oe_structure_solo w-100" id="oe_structure_header_vertical_3"/>
+                    <!-- Nav -->
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-value="'mx-auto'"/>
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                        <!-- Sign In -->
+                        <t t-call="portal.placeholder_user_sign_in">
+                            <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                        </t>
+                        <!-- User Dropdown -->
+                        <t t-call="portal.user_dropdown">
+                            <t t-set="_user_name" t-value="True"/>
+                            <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-3'"/>
+                            <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                        </t>
+                    </t>
+                </div>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_vertical_oe_structure_header_vertical_1" inherit_id="website.template_header_vertical" name="Template Header Vertical (oe_structure_header_vertical_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_vertical_1']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_vertical_1">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="s_share no_icon_color" data-name="Social Media">
+                        <h6 class="s_share_title d-none">Follow us</h6>
+                        <a href="/website/social/facebook" class="s_share_facebook" target="_blank">
+                            <i class="fa fa-facebook m-1"/>
+                        </a>
+                        <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                            <i class="fa fa-twitter m-1"/>
+                        </a>
+                        <a href="/website/social/linkedin" class="s_share_linkedin" target="_blank">
+                            <i class="fa fa-linkedin m-1"/>
+                        </a>
+                        <a href="/website/social/instagram" class="s_share_instagram" target="_blank">
+                            <i class="fa fa-instagram m-1"/>
+                        </a>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_vertical_oe_structure_header_vertical_2" inherit_id="website.template_header_vertical" name="Template Header Vertical (oe_structure_header_vertical_2)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_vertical_2']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_vertical_2">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <small><i class="fa fa-1x fa-fw fa-phone mr-2"/><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></small>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_vertical_oe_structure_header_vertical_3" inherit_id="website.template_header_vertical" name="Template Header Vertical (oe_structure_header_vertical_3)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_vertical_3']" position="replace">
+        <div class="oe_structure oe_structure_solo w-100" id="oe_structure_header_vertical_3">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="s_hr w-100 text-left pt0 pb0" data-name="Separator">
+                        <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--300);"/>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_sidebar" inherit_id="website.layout" name="Template Header Sidebar" active="False">
+    <xpath expr="//header" position="attributes">
+        <attribute name="t-attf-class" add="o_header_sidebar" separator=" "/>
+    </xpath>
+    <xpath expr="//header//nav" position="replace">
+        <nav data-name="Navbar" class="navbar navbar-expand-lg navbar-light o_colored_level o_cc shadow pb-3">
+            <div id="top_menu_container" class="container h-100">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand"/>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler"/>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse flex-column align-self-stretch align-items-stretch">
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-value="'mb-auto'"/>
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                    </t>
+                    <div class="oe_structure oe_structure_solo" id="oe_structure_header_sidebar_1"/>
+                    <ul class="nav navbar-nav">
+                        <!-- Sign In -->
+                        <t t-call="portal.placeholder_user_sign_in">
+                            <t t-set="_item_class" t-value="'nav-item'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                        </t>
+                        <!-- User Dropdown -->
+                        <t t-call="portal.user_dropdown">
+                            <t t-set="_icon" t-value="true"/>
+                            <t t-set="_user_name" t-value="true"/>
+                            <t t-set="_item_class" t-value="'nav-item dropup mr-auto'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                            <t t-set="_dropdown_menu_class" t-value="'position-absolute'"/>
+                        </t>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_sidebar_oe_structure_header_sidebar_1" inherit_id="website.template_header_sidebar" name="Template Header Sidebar (oe_structure_header_sidebar_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_sidebar_1']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_sidebar_1">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <!-- Social -->
+                    <div class="s_share mt-3" data-name="Social Media">
+                        <h5 class="s_share_title d-none">Follow us</h5>
+                        <a href="/website/social/facebook" class="s_share_facebook" target="_blank">
+                            <i class="fa fa-facebook rounded-circle shadow-sm"/>
+                        </a>
+                        <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                            <i class="fa fa-twitter rounded-circle shadow-sm"/>
+                        </a>
+                        <a href="/website/social/linkedin" class="s_share_linkedin" target="_blank">
+                            <i class="fa fa-linkedin rounded-circle shadow-sm"/>
+                        </a>
+                        <a href="/website/social/instagram" class="s_share_instagram" target="_blank">
+                            <i class="fa fa-instagram rounded-circle shadow-sm"/>
+                        </a>
+                    </div>
+                    <!-- Separator -->
+                    <div class="s_hr text-left pt16 pb16" data-name="Separator">
+                        <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--400);"/>
+                    </div>
+                    <!-- Contact -->
+                    <small><i class="fa fa-envelope fa-fw mr-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></small><br/>
+                    <small><i class="fa fa-phone fa-fw mr-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span></small>
+                    <!-- Separator -->
+                    <div class="s_hr text-left pt16 pb16" data-name="Separator">
+                        <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--400);"/>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_slogan" inherit_id="website.layout" name="Template Header Slogan" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <nav data-name="Navbar" class="navbar navbar-expand-lg navbar-light o_colored_level o_cc shadow-sm">
+            <div id="top_menu_container" class="container flex-row flex-wrap">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand">
+                    <t t-set="_link_class" t-value="'mr-4'"/>
+                </t>
+                <!-- Slogan -->
+                <div class="ml-3 mr-auto">
+                    <div class="oe_structure oe_structure_solo" id="oe_structure_header_slogan_1"/>
+                </div>
+                <ul class="nav navbar-nav navbar-expand ml-auto order-last order-lg-0">
+                    <!-- Sign In -->
+                    <t t-call="portal.placeholder_user_sign_in">
+                        <t t-set="_item_class" t-value="'nav-item ml-3'"/>
+                        <t t-set="_link_class" t-value="'btn btn-outline-primary'"/>
+                    </t>
+                    <!-- User Dropdown -->
+                    <t t-call="portal.user_dropdown">
+                        <t t-set="_user_name" t-value="True"/>
+                        <t t-set="_user_name_class" t-value="'font-weight-bold'"/>
+                        <t t-set="_item_class" t-value="'nav-item dropdown ml-3'"/>
+                        <t t-set="_link_class" t-value="'nav-link'"/>
+                        <t t-set="_dropdown_menu_class" t-value="'dropdown-menu-right'"/>
+                    </t>
+                    <!-- Button -->
+                    <li class="nav-item">
+                        <div class="oe_structure oe_structure_solo" id="oe_structure_header_slogan_2"/>
+                    </li>
+                </ul>
+                <!-- Separator -->
+                <div class="w-100">
+                    <div class="oe_structure oe_structure_solo" id="oe_structure_header_slogan_3"/>
+                </div>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler"/>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
+                 <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse">
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-value="'flex-grow-1'"/>
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                    </t>
+                </div>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_slogan_oe_structure_header_slogan_1" inherit_id="website.template_header_slogan" name="Template Header Slogan (oe_structure_header_slogan_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_slogan_1']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_slogan_1">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <h5 class="m-0" data-name="Slogan">We help <b>you</b> grow your business</h5>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_slogan_oe_structure_header_slogan_2" inherit_id="website.template_header_slogan" name="Template Header Slogan (oe_structure_header_slogan_2)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_slogan_2']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_slogan_2">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <a href="/contactus" class="btn btn-primary ml-4">Contact Us</a>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_slogan_oe_structure_header_slogan_3" inherit_id="website.template_header_slogan" name="Template Header Slogan (oe_structure_header_slogan_3)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_slogan_3']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_slogan_3">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="s_hr w-100 pt8 pb8" data-name="Separator">
+                        <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--200);"/>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_contact" inherit_id="website.layout" name="Template Header Contact" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_contact_1"/>
+        <nav data-name="Navbar" class="navbar navbar-light navbar-expand-lg o_colored_level o_cc shadow-sm">
+            <div id="top_menu_container" class="container">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand"/>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler"/>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse ml-lg-3">
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-value="'flex-grow-1'"/>
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                        <!-- Sign In -->
+                        <t t-call="portal.placeholder_user_sign_in">
+                            <t t-set="_item_class" t-value="'nav-item ml-lg-auto'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                        </t>
+                        <!-- User Dropdown -->
+                        <t t-call="portal.user_dropdown">
+                            <t t-set="_user_name" t-value="True"/>
+                            <t t-set="_user_name_class" t-value="'font-weight-bold'"/>
+                            <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-auto'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                        </t>
+                    </t>
+                </div>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_contact_oe_structure_header_contact_1" inherit_id="website.template_header_contact" name="Template Header Contact (oe_structure_header_contact_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_contact_1']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_contact_1">
+            <section class="s_text_block pt8 pb8 o_cc o_cc2" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="row align-items-center">
+                        <div class="col-lg-8">
+                            <small>
+                                <span class="text-muted"><b>Contact us</b></span>
+                                <i class="fa fa-1x fa-fw fa-phone ml-3 mr-2"/><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a>
+                                <i class="fa fa-1x fa-fw fa-envelope ml-3 mr-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span>
+                            </small>
+                        </div>
+                        <div class="col-lg-4 text-lg-right">
+                            <div class="s_share no_icon_color" data-name="Social Media">
+                                <small class="s_share_title text-muted"><b>Follow us</b></small>
+                                <a href="/website/social/facebook" class="s_share_facebook" target="_blank">
+                                    <i class="fa fa-facebook m-1"/>
+                                </a>
+                                <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                                    <i class="fa fa-twitter m-1"/>
+                                </a>
+                                <a href="/website/social/linkedin" class="s_share_linkedin" target="_blank">
+                                    <i class="fa fa-linkedin m-1"/>
+                                </a>
+                                <a href="/website/social/github" class="s_share_github" target="_blank">
+                                    <i class="fa fa-github m-1"/>
+                                </a>
+                                <a href="/website/social/youtube" class="s_share_youtube" target="_blank">
+                                    <i class="fa fa-youtube m-1"/>
+                                </a>
+                                <a href="/website/social/instagram" class="s_share_instagram" target="_blank">
+                                    <i class="fa fa-instagram m-1"/>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_minimalist" inherit_id="website.layout" name="Template Header Minimalist" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <nav data-name="Navbar" class="navbar navbar-light navbar-expand-md o_colored_level o_cc">
+            <div id="top_menu_container" class="container flex-wrap">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand"/>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler"/>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse ml-lg-3">
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-value="'flex-grow-1'"/>
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                        <!-- Sign In -->
+                        <t t-call="portal.placeholder_user_sign_in">
+                            <t t-set="_item_class" t-value="'nav-item ml-auto'"/>
+                            <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                        </t>
+                        <!-- User Dropdown -->
+                        <t t-call="portal.user_dropdown">
+                            <t t-set="_avatar" t-value="True"/>
+                            <t t-set="_item_class" t-value="'nav-item dropdown ml-auto'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                        </t>
+                    </t>
+                </div>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_boxed" inherit_id="website.layout" name="Template Header Boxed" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <div class="o_header_boxed_background o_colored_level o_cc pt8 pb8">
+            <div class="container d-flex align-items-center pb-4">
+                <!-- Social Icons -->
+                <div class="flex-grow-1">
+                    <div class="oe_structure oe_structure_solo" id="oe_structure_header_boxed_1"/>
+                </div>
+                <ul class="nav ml-auto" contenteditable="false">
+                    <!-- Sign In -->
+                    <t t-call="portal.placeholder_user_sign_in">
+                        <t t-set="_item_class" t-value="'nav-item ml-lg-3'"/>
+                        <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                    </t>
+                    <!-- User Dropdown -->
+                    <t t-call="portal.user_dropdown">
+                        <t t-set="_avatar" t-value="true"/>
+                        <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-3'"/>
+                        <t t-set="_link_class" t-value="'nav-link'"/>
+                        <t t-set="_dropdown_menu_class" t-value="'dropdown-menu-right'"/>
+                    </t>
+                </ul>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
+            </div>
+        </div>
+        <div id="top_menu_container" class="container mt-n4">
+            <nav data-name="Navbar" class="navbar navbar-light navbar-expand-lg o_colored_level o_cc shadow-sm rounded pr-2">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand"/>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler"/>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse">
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-value="'mx-auto'"/>
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                    </t>
+                    <!-- Button -->
+                    <div class="oe_structure oe_structure_solo" id="oe_structure_header_boxed_2"/>
+                </div>
+            </nav>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_boxed_oe_structure_header_boxed_1" inherit_id="website.template_header_boxed" name="Template Header Boxed (oe_structure_header_boxed_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_boxed_1']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_boxed_1">
+            <section class="s_text_block" data-snippet="s_text_block" name="Text">
+                <div class="container">
+                    <div class="s_share text-left" data-name="Social Media">
+                        <h6 class="s_share_title d-none">Follow us</h6>
+                        <a href="/website/social/facebook" class="s_share_facebook" target="_blank">
+                            <i class="fa fa-facebook m-1"/>
+                        </a>
+                        <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                            <i class="fa fa-twitter m-1"/>
+                        </a>
+                        <a href="/website/social/instagram" class="s_share_linkedin" target="_blank">
+                            <i class="fa fa-instagram m-1"/>
+                        </a>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_boxed_oe_structure_header_boxed_2" inherit_id="website.template_header_boxed" name="Template Header Boxed (oe_structure_header_boxed_2)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_boxed_2']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_boxed_2">
+            <section class="s_text_block" data-snippet="s_text_block" name="Text">
+                <div class="container">
+                     <a href="/contactus" class="btn btn-primary ml-lg-4">Contact Us</a>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_centered_logo" inherit_id="website.layout" name="Template Header Centered Logo" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <nav data-name="Navbar" class="navbar navbar-light navbar-expand-lg o_colored_level o_cc">
+            <div id="top_menu_container" class="container">
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler"/>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse o_header_centered_logo order-last order-lg-first">
+                    <t t-call="website.navbar_nav">
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                    </t>
+                </div>
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand">
+                    <t t-set="_link_class" t-value="'m-0'"/>
+                </t>
+                <!-- Right -->
+                <ul class="nav navbar-nav o_header_centered_logo justify-content-end">
+                    <!-- Sign In -->
+                    <t t-call="portal.placeholder_user_sign_in">
+                        <t t-set="_item_class" t-value="'nav-item ml-3'"/>
+                        <t t-set="_link_class" t-value="'nav-link'"/>
+                    </t>
+                    <!-- User Dropdown -->
+                    <t t-call="portal.user_dropdown">
+                        <t t-set="_icon" t-value="true"/>
+                        <t t-set="_item_class" t-value="'nav-item dropdown ml-3'"/>
+                        <t t-set="_link_class" t-value="'nav-link'"/>
+                    </t>
+                </ul>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_image" inherit_id="website.layout" name="Template Header Image" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_image_1"/>
+        <nav data-name="Navbar" class="navbar navbar-light navbar-expand-lg o_colored_level o_cc shadow-sm">
+            <div id="top_menu_container" class="container">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand"/>
+                <!-- Navbar Toggler -->
+                <t t-call="website.navbar_toggler"/>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse">
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-value="'ml-3 flex-grow-1'"/>
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                        <!-- Sign In -->
+                        <t t-call="portal.placeholder_user_sign_in">
+                            <t t-set="_item_class" t-value="'nav-item ml-lg-auto'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                        </t>
+                        <!-- User Dropdown -->
+                        <t t-call="portal.user_dropdown">
+                            <t t-set="_icon" t-value="True"/>
+                            <t t-set="_user_name" t-value="True"/>
+                            <t t-set="_item_class" t-value="'nav-item dropdown ml-lg-auto'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                        </t>
+                        <!-- Button -->
+                        <li class="nav-item">
+                            <div class="oe_structure oe_structure_solo" id="oe_structure_header_image_2"/>
+                        </li>
+                    </t>
+                </div>
+                <!-- Language Selector -->
+                <t t-call="website.placeholder_header_language_selector">
+                    <t t-set="_div_classes" t-value="'ml-2'"/>
+                </t>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_image_oe_structure_header_image_1" inherit_id="website.template_header_image" name="Template Header image (oe_structure_header_image_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_image_1']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_image_1">
+            <section class="s_cover oe_img_bg pt8 pb8" data-snippet="s_cover" data-name="Cover"
+                     style="background-image: url('/web/image/website.header_image_1_default_image');">
+                <div class="container s_allow_columns">
+                    <p class="mb-0"><br/></p>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_image_oe_structure_header_image_2" inherit_id="website.template_header_image" name="Template Header image (oe_structure_header_image_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_image_2']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_image_2">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <a href="/contactus" class="btn btn-primary mt-3 mt-lg-0 ml-lg-3">Contact Us</a>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_hamburger_full" inherit_id="website.layout" name="Template Header Hambuger Full" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <nav data-name="Navbar" class="navbar navbar-light o_colored_level o_cc">
+            <div id="top_menu_container" class="container">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand"/>
+                <div class="d-flex align-items-center ml-auto">
+                    <!-- Language Selector -->
+                    <t t-call="website.placeholder_header_language_selector"/>
+                    <!-- Navbar Toggler -->
+                    <t t-call="website.navbar_toggler">
+                        <t t-set="_toggler_class" t-value="'o_header_hamburger_full_toggler ml-2'"/>
+                    </t>
+                </div>
+            </div>
+            <!-- Navbar Collapse -->
+            <div id="top_menu_collapse" class="collapse navbar-collapse">
+                <div class="o_header_collapsed_content_wrapper container d-flex flex-column align-items-lg-center justify-content-lg-center">
+                    <!-- Menu -->
+                    <t t-call="website.navbar_nav">
+                        <t t-set="_nav_class" t-value="'navbar-expand flex-column flex-lg-row text-center'"/>
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                        <!-- Sign In -->
+                        <t t-call="portal.placeholder_user_sign_in">
+                            <t t-set="_item_class" t-value="'nav-item'"/>
+                            <t t-set="_link_class" t-value="'nav-link font-weight-bold'"/>
+                        </t>
+                        <!-- User Dropdown -->
+                        <t t-call="portal.user_dropdown">
+                            <t t-set="_user_name" t-value="true"/>
+                            <t t-set="_item_class" t-value="'nav-item dropdown'"/>
+                            <t t-set="_link_class" t-value="'nav-link font-weight-bold ml-lg-3'"/>
+                        </t>
+                    </t>
+                    <!-- Social Icons -->
+                    <div class="oe_structure oe_structure_solo w-100" id="oe_structure_header_hamburger_full_1"/>
+                </div>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_hamburger_full_oe_structure_header_hamburger_full_1" inherit_id="website.template_header_hamburger_full" name="Template Header Hamburger Full (oe_structure_header_hamburger_full_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_hamburger_full_1']" position="replace">
+        <div class="oe_structure oe_structure_solo w-100" id="oe_structure_header_hamburger_full_1">
+            <div class="s_hr pt32 pb32" data-name="Separator">
+                <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--400);"/>
+            </div>
+            <div class="s_share text-center" data-name="Social Media">
+                <h5 class="s_share_title d-none">Follow us</h5>
+                <a href="/website/social/facebook" class="s_share_facebook" target="_blank">
+                    <i class="fa fa-facebook rounded-circle shadow-sm"/>
+                </a>
+                <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                    <i class="fa fa-twitter rounded-circle shadow-sm"/>
+                </a>
+                <a href="/website/social/linkedin" class="s_share_linkedin" target="_blank">
+                    <i class="fa fa-linkedin rounded-circle shadow-sm"/>
+                </a>
+                <a href="/website/social/github" class="s_share_github" target="_blank">
+                    <i class="fa fa-github rounded-circle shadow-sm"/>
+                </a>
+                <a href="/website/social/youtube" class="s_share_youtube" target="_blank">
+                    <i class="fa fa-youtube rounded-circle shadow-sm"/>
+                </a>
+                <a href="/website/social/instagram" class="s_share_instagram" target="_blank">
+                    <i class="fa fa-instagram rounded-circle shadow-sm"/>
+                </a>
+            </div>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_header_magazine" inherit_id="website.layout" name="Template Header Magazine" active="False">
+    <xpath expr="//header//nav" position="replace">
+        <!-- Topbar -->
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_magazine_1"/>
+        <nav data-name="Navbar" class="navbar navbar-light o_colored_level o_cc">
+            <div id="top_menu_container" class="container">
+                <!-- Brand -->
+                <t t-call="website.placeholder_header_brand"/>
+                <div class="d-flex align-items-center ml-auto">
+                    <!-- Language Selector -->
+                    <t t-call="website.placeholder_header_language_selector"/>
+                    <!-- Navbar Toggler -->
+                    <t t-call="website.navbar_toggler">
+                        <t t-set="_toggler_class" t-value="'ml-2'"/>
+                    </t>
+                </div>
+                <!-- Navbar Collapse -->
+                <div id="top_menu_collapse" class="collapse navbar-collapse">
+                    <t t-set="_nav_class" t-value="'text-right'"/>
+                    <t t-call="website.navbar_nav">
+                        <!-- Menu -->
+                        <t t-foreach="website.menu_id.child_id" t-as="submenu">
+                            <t t-call="website.submenu">
+                                <t t-set="item_class" t-value="'nav-item'"/>
+                                <t t-set="link_class" t-value="'nav-link'"/>
+                            </t>
+                        </t>
+                        <!-- Sign In -->
+                        <t t-call="portal.placeholder_user_sign_in">
+                            <t t-set="_item_class" t-value="'nav-item'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                        </t>
+                        <!-- User Dropdown -->
+                        <t t-call="portal.user_dropdown">
+                            <t t-set="_user_name" t-value="true"/>
+                            <t t-set="_item_class" t-value="'nav-item dropdown'"/>
+                            <t t-set="_link_class" t-value="'nav-link'"/>
+                        </t>
+                    </t>
+                </div>
+            </div>
+        </nav>
+    </xpath>
+</template>
+
+<template id="template_header_magazine_oe_structure_header_magazine_1" inherit_id="website.template_header_magazine" name="Template Header Magazine (oe_structure_header_magazine_1)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_header_magazine_1']" position="replace">
+        <div class="oe_structure oe_structure_solo" id="oe_structure_header_magazine_1">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="row align-items-center">
+                        <div class="col-lg-8 pt16">
+                            <p class="mb-0"><small>We help you grow your business</small></p>
+                        </div>
+                        <div class="col-lg-4 text-lg-right pt16">
+                            <div class="s_share no_icon_color" data-name="Social Media">
+                                <small class="s_share_title d-none"><b>Follow us</b></small>
+                                <a href="/website/social/facebook" class="s_share_facebook" target="_blank">
+                                    <i class="fa fa-facebook m-1"/>
+                                </a>
+                                <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                                    <i class="fa fa-twitter m-1"/>
+                                </a>
+                                <a href="/website/social/linkedin" class="s_share_linkedin" target="_blank">
+                                    <i class="fa fa-linkedin m-1"/>
+                                </a>
+                                <a href="/website/social/github" class="s_share_github" target="_blank">
+                                    <i class="fa fa-github m-1"/>
+                                </a>
+                                <a href="/website/social/youtube" class="s_share_youtube" target="_blank">
+                                    <i class="fa fa-youtube m-1"/>
+                                </a>
+                                <a href="/website/social/instagram" class="s_share_instagram" target="_blank">
+                                    <i class="fa fa-instagram m-1"/>
+                                </a>
+                                <a href="mailto:info@yourcompany.example.com" class="ml-3" target="_blank">
+                                    <i class="fa fa-1x fa-envelope"/>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="col-lg-12">
+                            <div class="s_hr pt16 pb16" data-name="Separator">
+                                <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--300);"/>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<!-- Navbar Hamburger Options -->
+<template id="option_header_off_canvas" inherit_id="website.navbar_nav" name="Off-Canvas Header" active="False">
+    <xpath expr="//ul[@id='top_menu']" position="attributes">
+        <attribute name="class" separator=" " add="position-relative"/>
+    </xpath>
+    <xpath expr="//ul[@id='top_menu']" position="before">
+        <div class="o_offcanvas_menu_backdrop" data-toggle="collapse" data-target="#top_menu_collapse" aria-label="Toggle navigation"/>
+    </xpath>
+    <xpath expr="//ul[@id='top_menu']/t" position="before">
+        <li class="o_offcanvas_menu_toggler order-first navbar-toggler text-right border-0 o_not_editable">
+            <a href="#top_menu_collapse" class="nav-link px-3" data-toggle="collapse">
+                <span class="fa-2x">&#215;</span>
+            </a>
+        </li>
+    </xpath>
+    <xpath expr="//ul[@id='top_menu']/t" position="after">
+        <li class="o_offcanvas_logo_container order-last navbar-toggler py-4 order-1 mt-auto text-center border-0">
+            <a href="/" class="o_offcanvas_logo text-center">My Website</a>
+        </li>
+    </xpath>
+</template>
+
+<template id="option_header_off_canvas_logo_show" inherit_id="website.option_header_off_canvas" name="Show Logo (Off-Canvas)">
+    <xpath expr="//a[hasclass('o_offcanvas_logo')]" position="replace">
+        <a href="/" class="o_offcanvas_logo logo">
+            <span t-field="website.logo" t-options="{'widget': 'image', 'style': 'max-width: 200px'}" role="img" t-att-aria-label="'Logo of %s' % website.name" t-att-title="website.name" />
+        </a>
+    </xpath>
+</template>
+
+<template id="option_header_off_canvas_template_header_hamburger" inherit_id="website.template_header_hamburger" active="False" priority="32">
+    <xpath expr="//div[@id='oe_structure_header_hamburger_2']" position="replace"/>
+    <xpath expr="//div[@id='oe_structure_header_hamburger_3']" position="replace"/>
+</template>
+
+<template id="option_header_off_canvas_template_header_sidebar" inherit_id="website.template_header_sidebar" active="False" priority="32">
+    <xpath expr="//div[@id='oe_structure_header_sidebar_1']" position="attributes">
+        <attribute name="class" add="d-none d-lg-block" separator=" "/>
+    </xpath>
+</template>
+
+<template id="option_header_off_canvas_template_header_hamburger_full" inherit_id="website.template_header_hamburger_full" active="False" priority="32">
+    <xpath expr="//div[@id='oe_structure_header_hamburger_full_1']" position="replace"/>
+</template>
+
+<!-- Header options -->
+<template id="option_layout_hide_header" inherit_id="website.layout" active="False">
+    <xpath expr="//header" position="before">
+        <t t-set="no_header" t-value="True"/>
+    </xpath>
+</template>
+
+<template id="placeholder_header_brand" name="Placeholder Header Brand">
+    <span id="o_fake_navbar_brand"/><!-- Need a fake element so that the menu is still placed correctly -->
+</template>
+
+<template id="option_header_brand_logo" inherit_id="website.placeholder_header_brand" name="Header Brand Logo" active="True">
+    <xpath expr="//*[@id='o_fake_navbar_brand']" position="replace">
+        <a href="/" t-attf-class="navbar-brand logo #{_link_class}">
+            <span t-field="website.logo" t-options="{'widget': 'image'}" role="img" t-att-aria-label="'Logo of %s' % website.name" t-att-title="website.name"/>
+        </a>
+    </xpath>
+</template>
+
+<template id="option_header_brand_name" inherit_id="website.placeholder_header_brand" name="Header Brand Name" active="False">
+    <xpath expr="//*[@id='o_fake_navbar_brand']" position="replace">
+        <a href="/" t-attf-class="navbar-brand #{_link_class}">My Website</a>
+    </xpath>
+</template>
+
+<template id="header_visibility_standard" inherit_id="website.layout" name="Header Visibility Standard">
+    <xpath expr="//header" position="attributes">
+        <attribute name="t-attf-class" add="o_header_standard" separator=" "/>
+    </xpath>
+</template>
+
+<template id="header_visibility_fixed" inherit_id="website.layout" name="Header Effect Fixed" active="False">
+    <xpath expr="//header" position="attributes">
+        <attribute name="t-attf-class" add="o_header_fixed" separator=" "/>
+    </xpath>
+</template>
+
+<template id="header_visibility_disappears" inherit_id="website.layout" name="Header Effect Disappears" active="False">
+    <xpath expr="//header" position="attributes">
+        <attribute name="t-attf-class" add="o_header_disappears" separator=" "/>
+    </xpath>
+</template>
+
+<template id="header_visibility_fade_out" inherit_id="website.layout" name="Header Effect Fade Out" active="False">
+    <xpath expr="//header" position="attributes">
+        <attribute name="t-attf-class" add="o_header_fade_out" separator=" "/>
+    </xpath>
+</template>
+
+<template id="no_autohide_menu" inherit_id="website.layout" active="False">
+    <xpath expr="//header" position="attributes">
+        <attribute name="t-attf-class" add="#{'o_no_autohide_menu'}" separator=" "/>
+    </xpath>
+</template>
+
+<template id="header_navbar_pills_style" inherit_id="website.navbar_nav" name="Navbar Links Style" active="False">
+    <xpath expr="//ul[@id='top_menu']" position="attributes">
+        <attribute name="t-attf-class" add="nav-pills" separator=" "/>
+    </xpath>
+</template>
+
+<template id="header_hoverable_dropdown" inherit_id="website.layout" name="Header Hoverable Dropdown" active="False">
+    <xpath expr="//header" position="attributes">
+        <attribute name="t-attf-class" add="o_hoverable_dropdown" separator=" "/>
+    </xpath>
+</template>
+
+<!-- Features template -->
+<template id="login_layout" inherit_id="web.login_layout" name="Website Login Layout" priority="20">
+    <xpath expr="t" position="replace">
+        <t t-call="website.layout">
+            <div class="oe_website_login_container" t-raw="0"/>
+        </t>
+    </xpath>
+</template>
+
+<!-- Footer templates -->
+<template id="footer_custom" inherit_id="website.layout" name="Default" active="True">
+    <xpath expr="//div[@id='footer']" position="replace">
+        <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
+            <section class="s_text_block pt40 pb16" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-lg-2 pt24 pb24">
+                            <h5 class="mb-3">Useful Links</h5>
+                            <ul class="list-unstyled">
+                                <li><a href="/">Home</a></li>
+                                <li><a href="#">About us</a></li>
+                                <li><a href="#">Products</a></li>
+                                <li><a href="#">Services</a></li>
+                                <li><a href="#">Legal</a></li>
+                                <li><a href="/contactus">Contact us</a></li>
+                            </ul>
+                        </div>
+                        <div class="col-lg-5 pt24 pb24">
+                            <h5 class="mb-3">About us</h5>
+                            <p>We are a team of passionate people whose goal is to improve everyone's life through disruptive products. We build great products to solve your business problems.
+                            <br/><br/>Our products are designed for small to medium size companies willing to optimize their performance.</p>
+                        </div>
+                        <div id="connect" class="col-lg-4 offset-lg-1 pt24 pb24">
+                            <h5 class="mb-3">Connect with us</h5>
+                            <ul class="list-unstyled">
+                                <li><i class="fa fa-comment fa-fw mr-2"/><span><a href="/contactus">Contact us</a></span></li>
+                                <li><i class="fa fa-envelope fa-fw mr-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></li>
+                                <li><i class="fa fa-phone fa-fw mr-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
+                            </ul>
+                            <div class="s_share text-left" data-name="Social Media">
+                                <h5 class="s_share_title d-none">Follow us</h5>
+                                <a href="/website/social/facebook" class="s_share_facebook" target="_blank">
+                                    <i class="fa fa-facebook rounded-circle shadow-sm"/>
+                                </a>
+                                <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                                    <i class="fa fa-twitter rounded-circle shadow-sm"/>
+                                </a>
+                                <a href="/website/social/linkedin" class="s_share_linkedin" target="_blank">
+                                    <i class="fa fa-linkedin rounded-circle shadow-sm"/>
+                                </a>
+                                <a href="/" class="text-800 float-right">
+                                    <i class="fa fa-home rounded-circle shadow-sm"/>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_footer_descriptive" inherit_id="website.layout" name="Descriptive" active="False">
+    <xpath expr="//div[@id='footer']" position="replace">
+        <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
+            <section class="s_title pt48 pb24">
+                <div class="container s_allow_columns">
+                    <h4><b>Designed</b> for companies</h4>
+                </div>
+            </section>
+            <section class="s_text_block pb32" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-lg-5">
+                            <p>We are a team of passionate people whose goal is to improve everyone's life through disruptive products. We build great products to solve your business problems. Our products are designed for small to medium size companies willing to optimize their performance.</p>
+                        </div>
+                        <div class="col-lg-3 offset-lg-1">
+                            <p class="text-muted"><b>My Company</b><br/>250 Executive Park Blvd, Suite 3400 <br/> San Francisco CA 94134 <br/>United States</p>
+                        </div>
+                        <div class="col-lg-3">
+                            <ul class="list-unstyled mb-2">
+                                <li><i class="fa fa-phone fa-fw mr-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
+                                <li><i class="fa fa-envelope fa-fw mr-2"/><span><a href="mailto:hello@mycompany.com">hello@mycompany.com</a></span></li>
+                            </ul>
+                            <div class="s_share text-left no_icon_color" data-name="Social Media">
+                                <h5 class="s_share_title d-none">Follow us</h5>
+                                <a href="/website/social/github" class="s_share_github" target="_blank">
+                                    <i class="fa fa-2x fa-github m-1"/>
+                                </a>
+                                <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                                    <i class="fa fa-2x fa-twitter m-1"/>
+                                </a>
+                                <a href="/website/social/instagram" class="s_share_instagram" target="_blank">
+                                    <i class="fa fa-2x fa-instagram m-1"/>
+                                </a>
+                                <a href="/website/social/linkedin" class="s_share_linkedin" target="_blank">
+                                    <i class="fa fa-2x fa-linkedin m-1"/>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_footer_centered" inherit_id="website.layout" name="Centered" active="False">
+    <xpath expr="//div[@id='footer']" position="replace">
+        <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
+            <section class="s_text_block pt32" data-snippet="s_text_block" data-name="Text">
+                <div class="container s_allow_columns">
+                    <div class="s_share text-center mb-4" data-name="Social Media">
+                        <h5 class="s_share_title d-none">Follow us</h5>
+                        <a href="/website/social/facebook" class="s_share_facebook" target="_blank">
+                            <i class="fa fa-facebook rounded-circle rounded shadow-sm"/>
+                        </a>
+                        <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                            <i class="fa fa-twitter rounded-circle rounded shadow-sm"/>
+                        </a>
+                        <a href="/website/social/linkedin" class="s_share_linkedin" target="_blank">
+                            <i class="fa fa-linkedin rounded-circle rounded shadow-sm"/>
+                        </a>
+                    </div>
+                    <p class="text-center mb-1">250 Executive Park Blvd, Suite 3400 • San Francisco CA 94134 • United States</p>
+                    <ul class="list-inline text-center">
+                        <li class="list-inline-item mx-3"><i class="fa fa-1x fa-fw fa-phone mr-2"/><span class="o_force_ltr"><a href="tel:1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
+                        <li class="list-inline-item mx-3"><i class="fa fa-1x fa-fw fa-envelope mr-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></li>
+                    </ul>
+                </div>
+            </section>
+            <section class="s_text_block pt16 pb16" data-snippet="s_text_block" data-name="Logo">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-lg-2 offset-lg-5">
+                            <a href="/" class="o_footer_logo logo">
+                                <img src="/website/static/src/img/website_logo.png" class="img-fluid mx-auto" aria-label="Logo of MyCompany" title="MyCompany" role="img"/>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_footer_links" inherit_id="website.layout" name="Links" active="False">
+    <xpath expr="//div[@id='footer']" position="replace">
+        <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
+            <section class="s_text_block pt48 pb16" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-lg-2 pb16">
+                            <h5>Explore</h5>
+                            <ul class="list-unstyled">
+                                <li class="list-item py-1"><a href="/">Home</a></li>
+                                <li class="list-item py-1"><a href="#">Our Company</a></li>
+                                <li class="list-item py-1"><a href="#">Case Studies</a></li>
+                                <li class="list-item py-1"><a href="#">Blog</a></li>
+                            </ul>
+                        </div>
+                        <div class="col-lg-2 pb16">
+                            <h5>Services</h5>
+                            <ul class="list-unstyled">
+                                <li class="py-1"><a href="#">Documentation</a></li>
+                                <li class="py-1"><a href="#">Marketplace</a></li>
+                                <li class="py-1"><a href="#">Design</a></li>
+                                <li class="py-1"><a href="#">Resources</a></li>
+                            </ul>
+                        </div>
+                        <div class="col-lg-2 pb16">
+                            <h5>Follow us</h5>
+                            <ul class="list-unstyled">
+                                <li class="py-1"><i class="fa fa-1x fa-fw fa-facebook-square mr-2"/><a href="/website/social/facebook" target="_blank">Facebook</a></li>
+                                <li class="py-1"><i class="fa fa-1x fa-fw fa-twitter-square mr-2"/><a href="/website/social/twitter" target="_blank">Twitter</a></li>
+                                <li class="py-1"><i class="fa fa-1x fa-fw fa-linkedin-square mr-2"/><a href="/website/social/linkedin" target="_blank">Linkedin</a></li>
+                                <li class="py-1"><i class="fa fa-1x fa-fw fa-instagram mr-2"/><a href="/website/social/instagram" target="_blank">Instagram</a></li>
+                            </ul>
+                        </div>
+                        <div class="col-lg-3 pb16">
+                            <h5>Get in touch</h5>
+                            <ul class="list-unstyled">
+                                <li class="py-1"><i class="fa fa-1x fa-fw fa-envelope mr-2"/><a href="mailto:info@yourcompany.com">info@yourcompany.com</a></li>
+                                <li class="py-1"><i class="fa fa-1x fa-fw fa-phone mr-2"/><span class="o_force_ltr"><a href="tel:1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
+                            </ul>
+                        </div>
+                        <div class="col-lg-3 pb16">
+                            <h5>MyCompany</h5>
+                            <p class="text-muted">250 Executive Park Blvd, Suite 3400 <br/> San Francisco CA 94134 <br/>United States</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_footer_minimalist" inherit_id="website.layout" name="Minimalist" active="False">
+    <xpath expr="//div[@id='footer']" position="replace">
+        <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="row align-items-center">
+                        <div class="col-lg-2 pt16 pb16">
+                            <a href="/" class="o_footer_logo logo">
+                                <img src="/website/static/src/img/website_logo.png" class="img-fluid mx-auto" aria-label="Logo of MyCompany" title="MyCompany" role="img"/>
+                            </a>
+                        </div>
+                        <div class="col-lg-5 d-flex align-items-center justify-content-center justify-content-lg-start pt16 pb16">
+                            <ul class="list-inline mb-0 ml-3">
+                                <li class="list-inline-item"><a href="/">Home</a></li>
+                                <li class="list-inline-item"><a href="#">About us</a></li>
+                                <li class="list-inline-item"><a href="#">Products</a></li>
+                                <li class="list-inline-item"><a href="#">Services</a></li>
+                            </ul>
+                        </div>
+                        <div class="col-lg-3 pt16 pb16">
+                            <div class="s_share text-right no_icon_color" data-name="Social Media">
+                                <h5 class="s_share_title d-none">Follow us</h5>
+                                <a href="/website/social/github" class="s_share_github" target="_blank">
+                                    <i class="fa fa-2x fa-github m-1"/>
+                                </a>
+                                <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                                    <i class="fa fa-2x fa-twitter m-1"/>
+                                </a>
+                                <a href="/website/social/instagram" class="s_share_instagram" target="_blank">
+                                    <i class="fa fa-2x fa-instagram m-1"/>
+                                </a>
+                            </div>
+                        </div>
+                        <div class="col-lg-2 pt16 pb16">
+                            <a href="/contactus" class="btn btn-block btn-primary">Get in touch</a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="template_footer_contact" inherit_id="website.layout" name="Contact" active="False">
+    <xpath expr="//div[@id='footer']" position="replace">
+        <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
+            <section class="s_text_block pt32 pb16" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="row align-items-end">
+                        <div class="col-lg-3 pt16 pb16">
+                            <p class="mb-2">How can we help?</p>
+                            <h4>Contact us anytime</h4>
+                        </div>
+                        <div class="col-lg-3 pt16 pb16">
+                            <p class="mb-2">Call us</p>
+                            <h5><span class="o_force_ltr"><a href="tel:1 (650) 555-0111">+1 (650) 555-0111</a></span></h5>
+                        </div>
+                        <div class="col-lg-3 pt16 pb16">
+                            <p class="mb-2">Send us a message</p>
+                            <h5><a href="mailto:hello@mycompany.com">hello@mycompany.com</a></h5>
+                        </div>
+                        <div class="col-lg-3 pt16 pb16">
+                            <div class="s_share text-right no_icon_color" data-name="Social Media">
+                                <p class="s_share_title d-block mb-2">Follow us</p>
+                                <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                                    <i class="fa fa-twitter m-1"/>
+                                </a>
+                                <a href="/website/social/linkedin" class="s_share_linkedin" target="_blank">
+                                    <i class="fa fa-linkedin m-1"/>
+                                </a>
+                                <a href="/website/social/instagram" class="s_share_instagram" target="_blank">
+                                    <i class="fa fa-instagram m-1"/>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container allow_columns">
+                    <div class="s_hr pt16 pb16">
+                        <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--600);"/>
+                    </div>
+                </div>
+            </section>
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="row align-items-center">
+                        <div class="col-lg-2 pb16">
+                            <a href="/" class="o_footer_logo logo">
+                                <img src="/website/static/src/img/website_logo.png" class="img-fluid" aria-label="Logo of MyCompany" title="MyCompany" role="img"/>
+                            </a>
+                        </div>
+                        <div class="col-lg-10 pb16 text-right">
+                            <ul class="list-inline mb-0">
+                                <li class="list-inline-item"><a href="/">Home</a></li>
+                                <li class="list-inline-item">•</li>
+                                <li class="list-inline-item"><a href="#">About us</a></li>
+                                <li class="list-inline-item">•</li>
+                                <li class="list-inline-item"><a href="#">Products</a></li>
+                                <li class="list-inline-item">•</li>
+                                <li class="list-inline-item"><a href="#">Terms of Services</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<!-- Call-to-Action -->
+<template id="template_footer_call_to_action" inherit_id="website.layout" name="Call-to-Action" active="False">
+    <xpath expr="//div[@id='footer']" position="replace">
+        <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
+            <section class="s_call_to_action pt48">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-lg-9 pb24">
+                            <h3>50,000+ companies run Odoo to grow their businesses.</h3>
+                            <p class="lead">Join us and make your company a better place.</p>
+                        </div>
+                        <div class="col-lg-3 pb24">
+                            <a href="/contactus" class="btn btn-primary btn-lg btn-block">Start Button</a>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container s_allow_columns">
+                    <div class="s_hr pt16 pb16">
+                        <hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-color: var(--600);"/>
+                    </div>
+                </div>
+            </section>
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-lg-9">
+                            <p><i class="fa fa-1x fa-fw fa-map-marker mr-2"/>250 Executive Park Blvd, Suite 3400 • San Francisco CA 94134 • United States</p>
+                        </div>
+                        <div class="col-lg-3">
+                            <p><i class="fa fa-1x fa-fw fa-envelope mr-2"/><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<!-- Headline -->
+<template id="template_footer_headline" inherit_id="website.layout" name="Headline" active="False">
+    <xpath expr="//div[@id='footer']" position="replace">
+        <div id="footer" class="oe_structure oe_structure_solo" t-ignore="true" t-if="not no_footer">
+            <section class="s_text_block pt48" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-lg-3 pb24">
+                            <h4><b>Designed</b> <br/>for Companies</h4>
+                        </div>
+                        <div class="col-lg-9 pb24">
+                            <p class="lead">We are a team of passionate people whose goal is to improve everyone's life.<br/>Our services are designed for small to medium size companies.</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
+                <div class="container">
+                    <div class="row align-items-center">
+                        <div class="col-lg-3 pb24">
+                            <ul class="pl-3 mb-0">
+                                <li><a href="/">Home</a></li>
+                                <li><a href="/contactus">Contact us</a></li>
+                            </ul>
+                        </div>
+                        <div class="col-lg-6 pb24">
+                            <ul class="list-unstyled mb-0">
+                                <li><i class="fa fa-phone fa-fw mr-2"/><span class="o_force_ltr"><a href="tel:+1 (650) 555-0111">+1 (650) 555-0111</a></span></li>
+                                <li><i class="fa fa-envelope fa-fw mr-2"/><span><a href="mailto:info@yourcompany.example.com">info@yourcompany.example.com</a></span></li>
+                            </ul>
+                        </div>
+                        <div class="col-lg-3 pb24">
+                            <div class="s_share text-right" data-name="Social Media">
+                                <h5 class="s_share_title d-none">Share</h5>
+                                <a href="/website/social/facebook" class="s_share_facebook" target="_blank">
+                                    <i class="fa fa-1x fa-facebook rounded-circle shadow-sm"/>
+                                </a>
+                                <a href="/website/social/twitter" class="s_share_twitter" target="_blank">
+                                    <i class="fa fa-1x fa-twitter rounded-circle shadow-sm"/>
+                                </a>
+                                <a href="/website/social/instagram" class="s_share_instagram" target="_blank">
+                                    <i class="fa fa-1x fa-instagram rounded-circle shadow-sm"/>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<!-- slideout effect -->
+<template id="template_footer_slideout" inherit_id="website.layout" name="Template Footer Slideout" active="False">
+    <xpath expr="//footer[@id='bottom']" position="attributes">
+        <attribute name="t-attf-class" add="o_footer_slideout" separator=" "/>
+    </xpath>
+</template>
+
+<!-- Hide Copyright -->
+<template id="footer_no_copyright" inherit_id="website.layout" name="Footer No Copyright" active="False">
+    <xpath expr="//div[hasclass('o_footer_copyright')]" position="before">
+        <t t-set="no_copyright" t-value="True"/>
+    </xpath>
+</template>
+
+<!-- Scroll to Top option -->
+<template id="option_footer_scrolltop" inherit_id="website.layout" active="False">
+    <xpath expr="//div[@id='footer']" position="after">
+        <div id="o_footer_scrolltop_wrapper" class="container h-0 d-flex align-items-center justify-content-center">
+            <a id="o_footer_scrolltop"
+               role="button"
+               href="#top"
+               title="Scroll To Top"
+               class="btn btn-primary rounded-circle d-flex align-items-center justify-content-center">
+                <span class="fa fa-1x fa-chevron-up"/>
+            </a>
+        </div>
+    </xpath>
+</template>
+
+<!-- Cookie Bar -->
+<template id="cookies_bar" inherit_id="website.layout" name="Cookies Bar">
+    <xpath expr="//footer" position="after">
+        <div id="website_cookies_bar" t-if="website.cookies_bar" class="s_popup o_snippet_invisible o_no_save" data-name="Cookies Bar" data-vcss="001" data-invisible="1">
+            <div class="modal s_popup_bottom s_popup_no_backdrop o_cookies_discrete"
+                 data-show-after="500"
+                 data-display="afterDelay"
+                 data-consents-duration="999"
+                 data-focus="false"
+                 data-backdrop="false"
+                 data-keyboard="false"
+                 tabindex="-1"
+                 role="dialog">
+                <div class="modal-dialog d-flex s_popup_size_full">
+                    <div class="modal-content oe_structure">
+                        <section class="o_colored_level o_cc o_cc1">
+                            <div class="container">
+                                <div class="row">
+                                    <div class="col-lg-8 pt16">
+                                        <p>We use cookies to provide you a better user experience.</p>
+                                    </div>
+                                    <div class="col-lg-4 pt16 text-right">
+                                        <a href="/cookie-policy" class="o_cookies_bar_text_policy btn btn-link btn-sm">Cookie Policy</a>
+                                        <a href="#" role="button" class="js_close_popup o_cookies_bar_text_button btn btn-primary btn-sm">I agree</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </xpath>
+</template>
+
+<!-- Language selector templates -->
+<template id="lang_flag" name="Language Flag">
+    <img class="o_lang_flag" t-attf-src="#{flag_image_src}?height=25"/>
+</template>
+
+<template id="language_selector_add_language">
+    <a t-attf-class="o_add_language d-none #{dropdown and 'd-sm-block dropdown-item' or 'd-sm-inline-block list-inline-item'}"
+       groups="website.group_website_publisher"
+       t-attf-href="/web#action=base.action_view_base_language_install&amp;website_id=#{website.id if website else ''}&amp;url_return=#{url_return}">
+        <t t-set="url_return" t-value="quote_plus(url_for('', '[lang]') + '?' + keep_query())"/>
+        <i class="fa fa-plus-circle"/>
+        Add a language...
+    </a>
+</template>
+
+<template id="language_selector" inherit_id="portal.language_selector">
+    <xpath expr="//t[@t-set='active_lang']" position="before">
+        <t t-if="lang not in (lg[0] for lg in languages)">
+            <t t-set="lang" t-value="website.default_lang_id.code"/>
+        </t>
+    </xpath>
+
+    <!-- Always show the language selector on editable websites -->
+    <xpath expr="//t[@t-set='language_selector_visible']" position="after">
+        <t t-set="language_selector_visible" t-value="language_selector_visible or (website and (editable or translatable))"/>
+    </xpath>
+
+    <!-- Add the button to add a language -->
+    <xpath expr="//t[@t-foreach='languages']" position="after">
+        <t t-call="website.language_selector_add_language">
+            <t t-set="dropdown" t-value="True"/>
+        </t>
+    </xpath>
+
+    <!-- Add the 'flags' possibility -->
+    <xpath expr="//button[hasclass('dropdown-toggle')]/span" position="before">
+        <t t-if="flags" t-call="website.lang_flag">
+            <t t-set="flag_image_src" t-value="active_lang[4]"/>
+        </t>
+    </xpath>
+    <xpath expr="//*[hasclass('js_change_lang')]/span" position="before">
+        <t t-if="flags" t-call="website.lang_flag">
+            <t t-set="flag_image_src" t-value="lg[4]"/>
+        </t>
+    </xpath>
+</template>
+
+<!-- Alternative extension of the language_selector to make it look like an -->
+<!-- inline list instead of a dropdown -->
+<template id="language_selector_inline" inherit_id="website.language_selector" primary="True">
+    <xpath expr="//*[contains(@t-attf-class, 'js_language_selector')]" position="attributes">
+        <attribute name="t-attf-class" remove="dropup" separator=" "/>
+    </xpath>
+    <xpath expr="//*[hasclass('dropdown-toggle')]" position="replace"/>
+    <xpath expr="//*[hasclass('dropdown-menu')]" position="attributes">
+        <attribute name="class" remove="dropdown-menu" add="list-inline" separator=" "/>
+    </xpath>
+    <xpath expr="//*[hasclass('dropdown-item')]" position="attributes">
+        <attribute name="class" remove="dropdown-item" add="list-inline-item" separator=" "/>
+    </xpath>
+    <xpath expr="//t[@t-foreach='languages']" position="inside">
+        <t t-if="not lg_last and not no_text">
+            <span class="list-inline-item">|</span>
+        </t>
+    </xpath>
+    <xpath expr="//t[@t-call='website.language_selector_add_language']" position="replace">
+        <span class="o_add_language list-inline-item">|</span>
+        <t t-call="website.language_selector_add_language">
+            <t t-set="dropdown" t-value="False"/>
+        </t>
+    </xpath>
+</template>
+
+<template id="placeholder_header_language_selector" name="Placeholder Header Language Selector"/>
+
+<template id="header_language_selector" inherit_id="website.placeholder_header_language_selector" name="Header Language Selector" active="False">
+    <xpath expr="." position="inside">
+        <t id="header_language_selector_call" t-call="portal.language_selector">
+            <t t-set="_div_classes" t-value="(_div_classes or '') + ' dropdown'"/>
+        </t>
+    </xpath>
+</template>
+
+<template id="header_language_selector_inline" name="Header Language Selector Inline" inherit_id="website.header_language_selector" active="False">
+    <xpath expr="//t[@id='header_language_selector_call']" position="replace">
+        <t id="header_language_selector_call" t-call="website.language_selector_inline"/>
+    </xpath>
+</template>
+
+<template id="header_language_selector_flag" name="Header Language Selector Flag" inherit_id="website.header_language_selector" active="True">
+    <xpath expr="//t[@id='header_language_selector_call']" position="before">
+        <t t-set="flags" t-value="True"/>
+    </xpath>
+</template>
+
+<template id="header_language_selector_no_text" name="Header Language Selector No Text" inherit_id="website.header_language_selector" active="False">
+    <xpath expr="//t[@id='header_language_selector_call']" position="before">
+        <t t-set="no_text" t-value="True"/>
+    </xpath>
+</template>
+
+<template id="footer_language_selector_inline" name="Footer Language Selector Inline" inherit_id="portal.footer_language_selector" active="False">
+    <xpath expr="//t[@id='language_selector_call']" position="replace">
+        <t id="language_selector_call" t-call="website.language_selector_inline"/>
+    </xpath>
+</template>
+
+<template id="footer_language_selector_flag" name="Footer Language Selector Flag" inherit_id="portal.footer_language_selector" active="True">
+    <xpath expr="//t[@id='language_selector_call']" position="before">
+        <t t-set="flags" t-value="True"/>
+    </xpath>
+</template>
+
+<template id="footer_language_selector_no_text" name="Footer Language Selector No Text" inherit_id="portal.footer_language_selector" active="False">
+    <xpath expr="//t[@id='language_selector_call']" position="before">
+        <t t-set="no_text" t-value="True"/>
+    </xpath>
+</template>
+
+<template id="record_cover">
+    <t t-set="_cp" t-value="_cp or json.loads(_record.cover_properties)"/>
+    <t t-set="default_cover_name">Cover</t>
+    <div t-att-data-name="display_opt_name or default_cover_name"
+         t-att-style="_cp.get('background_color_style')"
+         t-att-data-use_size="use_size"
+         t-att-data-use_filters="use_filters"
+         t-att-data-use_text_align="use_text_align"
+         t-att-data-res-model="request.env.user.has_group('website.group_website_publisher') and _record._name"
+         t-att-data-res-id="request.env.user.has_group('website.group_website_publisher') and _record.id"
+         t-attf-class="o_record_cover_container d-flex flex-column h-100 o_colored_level o_cc #{_cp.get('background_color_class')} #{use_size and _cp.get('resize_class')} #{use_text_align and _cp.get('text_align_class')} #{additionnal_classes}">
+        <div t-attf-class="o_record_cover_component o_record_cover_image #{snippet_autofocus and 'o_we_snippet_autofocus'}" t-attf-style="background-image: #{_cp.get('background-image')};"/>
+        <div t-if="use_filters" t-attf-class="o_record_cover_component o_record_cover_filter oe_black" t-attf-style="opacity: #{_cp.get('opacity', 0.0)};"/>
+        <t t-raw="0"/>
+    </div>
+</template>
+
+<!-- Util template -->
+<template id="publish_management">
+    <div groups="website.group_website_publisher" t-ignore="true" class="float-right css_editable_mode_hidden" t-att-style="style or None">
+        <div t-attf-class="btn-group #{btn_class} js_publish_management #{object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-id="object.id" t-att-data-object="object._name" t-att-data-description="env['ir.model']._get(object._name).display_name" t-att-data-controller="publish_controller">
+            <button class="btn btn-danger js_publish_btn">Unpublished</button>
+            <button class="btn btn-success js_publish_btn">Published</button>
+            <button type="button" t-attf-class="btn btn-default dropdown-toggle dropdown-toggle-split" t-att-id="'dopprod-%s' % object.id" data-toggle="dropdown"/>
+            <div class="dropdown-menu" role="menu" t-att-aria-labelledby="'dopprod-%s' % object.id">
+                <t t-raw="0"/>
+                <a role="menuitem" t-attf-href="/web#view_type=form&amp;model=#{object._name}&amp;id=#{object.id}&amp;action=#{action}&amp;menu_id=#{menu or object.env['ir.model.data'].xmlid_to_res_id('website.menu_website_configuration')}"
+                    title='Edit in backend' class="dropdown-item" t-if="publish_edit">Edit</a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<template id="publish_short">
+    <t groups="website.group_website_publisher" t-ignore="true">
+        <div t-attf-class="float-right js_publish_management #{object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-id="object.id" t-att-data-object="object._name" t-att-data-description="env['ir.model']._get(object._name).display_name" t-att-data-controller="publish_controller">
+            <button t-attf-class="btn btn-danger js_publish_btn #{additionnal_btn_classes or ''}">Unpublished</button>
+            <button t-attf-class="btn btn-success js_publish_btn #{additionnal_btn_classes or ''}">Published</button>
+        </div>
+    </t>
+</template>
+
+<template id="pager" name="Pager" inherit_id="portal.pager">
+</template>
+
+<!-- Effect options -->
+<template id="option_ripple_effect" inherit_id="website.assets_frontend" active="False">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/options/ripple_effect.scss"/>
+    </xpath>
+    <xpath expr="//script[last()]" position="after">
+        <script type="text/javascript" src="/website/static/src/js/content/ripple_effect.js"/>
+    </xpath>
+</template>
+
+<template id="kanban">
+    <t t-set="step"><t t-esc="step or 0"/></t>
+    <t t-set="scope"><t t-esc="scope or 0"/></t>
+    <t t-set="orderby"><t t-esc="orderby or 'name'"/></t>
+    <t t-raw="website.kanban(model, domain, column, template, step=step, scope=scope, orderby=orderby)"/>
+</template>
+
+<template id="kanban_contain">
+    <table class="table js_kanban">
+        <thead>
+            <tr>
+                <t t-set="width" t-valuef="{{ round(100.0 / (len(objects) if objects else 1), 2) }}%"/>
+                <t t-foreach="objects" t-as="obj">
+                    <th t-att-width="width">
+                        <div t-field="obj['column_id'].name" class="text-center"></div>
+                    </th>
+                </t>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <t t-foreach="objects" t-as="obj">
+                    <td class="js_kanban_col" t-att-data-template="template"
+                            t-att-data-domain="obj['domain']"
+                            t-att-data-page_count="obj['page_count']"
+                            t-att-data-model="obj['model']"
+                            t-att-data-step="obj['step']"
+                            t-att-data-orderby="obj['orderby']">
+                        <t t-foreach="obj['object_ids']" t-as="object_id">
+                            <t t-call="#{ template }"></t>
+                        </t>
+                        <!-- pager -->
+                        <div t-if="1 != obj['page_end']" class="pagination pagination-centered"><!-- FIXME -->
+                            <ul>
+                                <li t-attf-class="prev #{'active' if obj['page'] == 1 else '' }">
+                                    <a t-att-href=" '%s,%s-%s' % (obj['kanban_url'], obj['column_id'].id, (obj['page'] &gt; 1 and obj['page']-1 or 1)) ">Prev</a></li>
+                                <t t-foreach="range(obj['page_start'], obj['page_end']+1)" t-as="p">
+                                    <li t-att-class=" 'active' if obj['page'] == p else None ">
+                                        <a t-att-href=" '%s,%s-%s' % (obj['kanban_url'], obj['column_id'].id, p)" t-esc="p"></a></li>
+                                </t>
+                                <li t-attf-class="next #{'active' if obj['page'] == obj['page_end'] else '' }">
+                                    <a t-att-href=" '%s,%s-%s' % (obj['kanban_url'], obj['column_id'].id, (obj['page'] &lt; obj['page_end'] and obj['page']+1 or obj['page_end']) )">Next</a></li>
+                            </ul>
+                        </div>
+                    </td>
+                </t>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<!-- Error and special pages -->
+<template id="website_info" name="Odoo Information">
+    <t t-call="website.layout">
+        <div id="wrap"/>
+    </t>
+</template>
+
+<template id="show_website_info" inherit_id="website.website_info" customize_show="True" name="Show Odoo Information">
+    <xpath expr="//div[@id='wrap']" position="inside">
+        <div class="oe_structure">
+            <section class="container">
+              <t t-if="not version">
+                <meta http-equiv="refresh" content="0;URL='/website/info'" />
+              </t>
+              <t t-if="version">
+                <h1><t t-esc="res_company.name"/>
+                    <small>Odoo Version <t t-raw="version.get('server_version')"/></small>
+                </h1>
+                <p>
+                    Information about the <t t-esc="res_company.name"/> instance of Odoo, the <a target="_blank" href="https://www.odoo.com">Open Source ERP</a>.
+                </p>
+
+                <div class="alert alert-warning alert-dismissable mt16" groups="website.group_website_publisher" role="status">
+                   <button type="button" class="close" data-dismiss="alert" aria-label="Close">×</button>
+                   <p>
+                     Note: To hide this page, uncheck it from the top Customize menu.
+                   </p>
+                </div>
+                <h2>Installed Applications</h2>
+                <dl class="dl-horizontal" t-foreach="apps" t-as="app">
+                    <dt>
+                        <a t-att-href="app.website" t-if="app.website">
+                            <t t-raw="app.shortdesc"/>
+                        </a>
+                        <span t-raw="app.shortdesc" t-if="not app.website"/>
+                    </dt>
+                    <dd>
+                        <span t-raw="app.summary"/>
+                    </dd><dd class="text-muted" groups='base.group_no_one'>
+                        Technical name: <span t-field="app.name"/>, author: <span t-field="app.author"/>
+                    </dd>
+                </dl>
+
+                <div t-if="l10n">
+                    <h2 class='mt32'>Installed Localizations / Account Charts</h2>
+                    <dl class="dl-horizontal" t-foreach="l10n" t-as="app">
+                        <dt>
+                            <a t-attf-href="https://www.odoo.com/page/accounting/#{app.name}">
+                                <t t-raw="app.shortdesc"/>
+                            </a>
+                        </dt>
+                        <dd>
+                            <span t-raw="app.summary"/>
+                        </dd><dd class="text-muted" groups='base.group_no_one'>
+                            Technical name: <span t-field="app.name"/>, author: <span t-field="app.author"/>
+                        </dd>
+                    </dl>
+                </div>
+              </t>
+            </section>
+        </div>
+    </xpath>
+</template>
+
+<template id="default_page">
+    <t t-call="website.layout">
+        <div id="wrap" class="oe_structure oe_empty"/>
+    </t>
+</template>
+
+<template id="default_js">
+    <script type="text/javascript">
+        if (0 &gt; 1) {
+            let it_cant_be = false;
+        }
+    </script>
+</template>
+<template id="default_xml">
+    &lt;?xml version="1.0" encoding="utf-8"?&gt;
+</template>
+<template id="default_css">
+    <style type="text/css">
+        div#wrap div &gt; h1{
+            color: #875A7B;
+        }
+    </style>
+</template>
+<template id="default_less">
+    <style type="text/less">
+        div#wrap div &gt; h1 {
+            color: @o-brand-odoo;
+        }
+    </style>
+</template>
+<template id="default_scss">
+    <style type="text/scss">
+        div#wrap div &gt; h1 {
+            color: $o-brand-odoo;
+        }
+    </style>
+</template>
+<template id="default_csv">
+    1,2,3
+</template>
+
+<template id="page_404" name="Page Not Found">
+    <t t-call="http_routing.404">
+        <div class="container o_not_editable">
+            <div class="alert alert-info mt32">
+                <p>This page does not exist, but you can create it as you are administrator of this site.</p>
+                <a role="button" class="btn btn-primary js_disable_on_click post_link" t-attf-href="/website/add/#{ path }#{ from_template and '?template=%s' % from_template }">Create Page</a>
+            </div>
+            <div class="text-center text-muted">Edit the content below this line to adapt the default "page not found" page.</div>
+        </div>
+        <hr/>
+    </t>
+</template>
+
+<template id="protected_403" name="Page Protected">
+    <t t-call="website.login_layout">
+        <div class="container">
+            <div class='row'>
+                <form class="offset-md-3 col-md-6" method="POST">
+                    <div class="alert alert-info mt32" t-if="not request.params.get('visibility_password')">
+                        <div class="h5 text-center">
+                            <i class="fa fa-lock fa-2x"/><br/>
+                            <span class="mt-1">A password is required to access this page.</span>
+                        </div>
+                    </div>
+                    <div class="alert alert-warning mt32" t-else="">
+                        <div class="h5 text-center">
+                            <i class="fa fa-lock fa-2x"/><br/>
+                            <span class="mt-1">Wrong password</span>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="input-group">
+                            <input type="hidden" name="url" t-att-value="path" />
+                            <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
+                            <input type="password" id="password" class="form-control" required="required" name="visibility_password" />
+                            <div class="input-group-append">
+                              <button class="btn btn-secondary" type="button" id="showPass">
+                                <i class="fa fa-eye"></i>
+                              </button>
+                          </div>
+                        </div>
+                    </div>
+                    <button type="submit" class="h4 btn btn-primary btn-block">Access to this page</button>
+                </form>
+            </div>
+        </div>
+    </t>
+</template>
+
+<template id="qweb_500" inherit_id="http_routing.500">
+    <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
+    <!-- This template should not use any variable except those provided by website.ir_http._handle_exception  -->
+    <!--    no request.crsf_token, no theme style, no assets, ... cursor can be broken during rendering !      -->
+    <!--    see test_05_reset_specific_view_controller_broken_request                                          -->
+    <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
+    <xpath expr="//script[last()]" position="before">
+        <script type="text/javascript" src="/web/static/lib/bootstrap/js/modal.js"/>
+    </xpath>
+    <xpath expr="//style" position="after">
+        <t t-if='view'>
+            <script>
+                $(document).ready(function() {
+                    var button = $('.reset_templates_button');
+                    button.click(function() {
+                        $('#reset_templates_mode').val($(this).data('mode'));
+                        var dialog = $('#reset_template_confirmation').modal('show');
+                        var input = dialog.find('input[type="text"]').val('').focus();
+                        var dialog_form = dialog.find('form');
+                        dialog_form.submit(function() {
+                            if (input.val() == dialog.find('.confirm_word').text()) {
+                                dialog.modal('hide');
+                                button.prop('disabled', true).text('Working...');
+                                $('#reset_templates_form').attr('action', '/website/reset_template');
+                                $('#reset_templates_form').trigger('submit');
+                            } else {
+                                input.val('').focus();
+                            }
+                            return false;
+                        });
+                        return false;
+                    });
+                });
+            </script>
+        </t>
+    </xpath>
+    <xpath expr="//div[@id='wrapwrap']" position="before">
+        <div t-if="view" role="dialog" id="reset_template_confirmation" class="modal" tabindex="-1" t-ignore="true">
+            <div class="modal-dialog">
+                <form role="form">
+                    <div class="modal-content">
+                        <header class="modal-header">
+                            <h4 class="modal-title">Reset templates</h4>
+                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
+                        </header>
+                        <main class="modal-body">
+                            <div class="form-group row mb0">
+                                <label for="page-name" class="col-md-12 col-form-label">
+                                    <p>The selected templates will be reset to their factory settings.</p>
+                                </label>
+                            </div>
+                            <div class="form-group row mb0">
+                                <label for="page-name" class="col-md-9 col-form-label">
+                                    <p>Type '<i class="confirm_word">yes</i>' in the box below if you want to confirm.</p>
+                                </label>
+                                <div class="col-md-3 mt16">
+                                    <input type="text" id="page-name" class="form-control" required="required" placeholder="yes"/>
+                                </div>
+                            </div>
+                        </main>
+                        <footer class="modal-footer">
+                            <button type="button" class="btn" data-dismiss="modal" aria-label="Cancel">Cancel</button>
+                            <input type="submit" value="Confirm" class="btn btn-primary"/>
+                        </footer>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </xpath>
+    <xpath expr="//div[@id='error_message']" position="after">
+        <div class="container" t-if="view and editable">
+            <div class="alert alert-danger" t-if="debug" role="alert">
+                <h4>Template fallback</h4>
+                <p>An error occured while rendering the template <code t-esc="qweb_exception.name"/>.</p>
+                <p>If this error is caused by a change of yours in the templates, you have the possibility to reset the template to its <strong>factory settings</strong>.</p>
+                <form action="#" method="post" id="reset_templates_form">
+                    <ul>
+                        <li>
+                            <label>
+                                <t t-esc="view.name"/>
+                            </label>
+                        </li>
+                    </ul>
+                    <input type="hidden" name="redirect" t-att-value="request.httprequest.path"/>
+                    <input type="hidden" id="reset_templates_view_id" name="view_id" t-att-value="view.id"/>
+                    <input type="hidden" id="reset_templates_mode" name="mode"/>
+                    <button data-mode="soft" class="reset_templates_button btn btn-info">Restore previous version (soft reset).</button>
+                    <button t-if="view.arch_fs" data-mode="hard" class="reset_templates_button btn btn-outline-danger">Reset to initial version (hard reset).</button>
+                </form>
+            </div>
+        </div>
+    </xpath>
+</template>
+
+<template id="robots">
+<t t-translation="off">
+User-agent: *
+Sitemap: <t t-esc="url_root"/>sitemap.xml
+
+
+##############
+#   custom   #
+##############
+
+<t t-raw="request.website.sudo().robots_txt" />
+</t>
+</template>
+
+<template id="sitemap_locs">
+    <url t-foreach="locs" t-as="page">
+        <loc><t t-esc="url_root"/><t t-esc="page['loc']"/></loc><t t-if="page.get('lastmod', False)">
+        <lastmod t-esc="page['lastmod']"/></t><t t-if="page.get('priority', False)">
+        <priority t-esc="page['priority']"/></t><t t-if="page.get('changefreq', False)">
+        <changefreq t-esc="page['changefreq']"/></t>
+    </url>
+</template>
+
+<template id="sitemap_xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+<urlset t-attf-xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <t t-raw="content"/>
+</urlset>
+</template>
+
+<template id="sitemap_index_xml">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
+<sitemapindex t-attf-xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <sitemap t-translation="off" t-foreach="pages" t-as="page">
+    <loc><t t-esc="url_root"/>sitemap-<t t-esc="page"/>.xml</loc>
+  </sitemap>
+</sitemapindex>
+</template>
+
+<template id="company_description" name="Company Description">
+    <address itemscope="itemscope" itemtype="http://schema.org/Organization">
+        <!-- TODO widget contact must add itemprop attributes -->
+        <div t-field="res_company.partner_id" t-options='{
+                "widget": "contact",
+                "fields": ["name", "address", "phone", "mobile", "email"]}'/>
+        <t t-if="not res_company.google_map_img()">
+            <span class="fa fa-map-marker fa-fw mt16" role="img" aria-label="Address" title="Address"/> <a t-att-href="res_company.google_map_link()" target="_BLANK"> Google Maps</a>
+        </t>
+    </address>
+</template>
+
+<template id="company_description_google_map" inherit_id="website.company_description" name="Google map" customize_show="True">
+    <xpath expr="//address" position="after">
+        <t t-if="res_company.google_map_img()">
+            <a t-att-href="res_company.google_map_link()" target="_BLANK">
+                <img class="img-fluid" t-att-src="res_company.google_map_img()" alt="Google Maps"/>
+            </a>
+        </t>
+        <t t-elif="editable">
+            <div class="alert alert-warning">
+                <i class="fa fa-plus-circle"/>
+                The Google map option is enabled but <a href="/web#action=website.action_website_configuration">not properly configured</a>.
+            </div>
+        </t>
+    </xpath>
+</template>
+
+<template id="website_search_box" name="Website Searchbox">
+    <div t-attf-class="input-group #{_classes}" role="search">
+        <t t-set="search_placeholder">Search...</t>
+        <input type="search" name="search" class="search-query form-control oe_search_box" t-att-placeholder="placeholder if placeholder else search_placeholder" t-att-value="search"/>
+        <div class="input-group-append">
+            <button type="submit" class="btn btn-primary oe_search_button" aria-label="Search" title="Search"><i class="fa fa-search"/></button>
+        </div>
+    </div>
+</template>
+
+<template id="index_management">
+    <t groups="website.group_website_publisher" t-ignore="true">
+        <div t-attf-class="float-right js_index_management #{object.website_indexed and 'css_published' or 'css_unpublished'}" t-att-data-id="object.id" t-att-data-object="object._name">
+            <button class="btn btn-danger js_index_btn">Unindexed</button>
+            <button class="btn btn-success js_index_btn">Indexed</button>
+        </div>
+    </t>
+</template>
+
+<template id="list_website_pages" name="Website Pages Management">
+  <t t-call="website.layout">
+    <div id="wrap">
+      <div class="container" id="list_website_pages">
+          <form class="mt8 float-right" role="search" t-attf-action="/website/pages" method="get">
+              <t t-call="website.website_search_box"/>
+          </form>
+          <div t-if="searchbar_sortings" class="dropdown float-right mt8 mr8">
+              <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
+                  <span class="fa fa-sort fa-lg" role="img" aria-label="Sort" title="Sort"/>
+                  <span class="d-none d-xl-inline" t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/>
+              </button>
+              <div class="dropdown-menu" aria-labelledby="portal_searchbar_sortby" role="menu">
+                  <t t-foreach="searchbar_sortings" t-as="option">
+                      <a role="menuitem"
+                         t-att-href="request.httprequest.path + '?' + keep_query('*', sortby=option)"
+                         t-attf-class="dropdown-item#{sortby == option and ' active' or ''}">
+                          <span t-esc="searchbar_sortings[option].get('label')"/>
+                      </a>
+                  </t>
+              </div>
+          </div>
+          <h3 class="mt16">Manage Your Pages</h3>
+          <t t-if="not pages">
+              <div t-if="search" class="alert alert-warning mt8" role="alert">
+                  Your search '<t t-esc="search" />' did not match any pages.
+              </div>
+              <div t-else="" class="alert alert-warning mt8" role="alert">
+                  There are currently no pages for your website.
+              </div>
+          </t>
+          <div t-if="pages" class="table-responsive">
+              <table class="table table-hover">
+                  <thead>
+                    <tr>
+                      <th>Name</th>
+                      <th>Url</th>
+                      <th class="text-center"><i title="Is the page included in the main menu?" class="fa fa-thumb-tack"></i></th>
+                      <th class="text-center"><i title="Is the page published?" class="fa fa-eye"></i></th>
+                      <th class="text-center"><i title="Is the page indexed by search engines?" class="fa fa-globe"></i></th>
+                      <th class="text-center"><i title="Is the page SEO optimized?" class="fa fa-search"></i></th>
+                      <th></th>
+                    </tr>
+                  </thead>
+                  <t t-set='prev_page' t-value='False' />
+                  <t t-set='page' t-value='pages[0]' />
+                  <t t-foreach="pages[1:]" t-as="next_page">
+                    <t t-call='website.one_page_line'/>
+                    <t t-set='prev_page' t-value='page' />
+                    <t t-set='page' t-value='next_page' />
+                  </t>
+
+                  <t t-set='next_page' t-value='False'/>
+                  <t t-call='website.one_page_line' />
+              </table>
+          </div>
+          <div t-if="pager" class="o_portal_pager text-center">
+              <t t-call="website.pager"/>
+          </div>
+      </div>
+    </div>
+  </t>
+</template>
+
+<template id="one_page_line">
+    <t t-set='specific_page' t-value="page.website_id"/>
+    <t t-set='final_page' t-value="(next_page and page.url != next_page.url) or not next_page or specific_page"/>
+    <tr t-att-style='not final_page and "color:#999"'>
+        <td>
+            <t groups="website.group_multi_website">
+                <i t-if='specific_page and prev_page and prev_page.url == page.url and not prev_page.website_id' class="fa fa-level-up fa-rotate-90 ml32 mr4"/>
+                <i t-else="1" class="fa fa-globe mr4" t-att-style="'visibility:hidden;' if specific_page else ''"/>
+            </t>
+            <i t-if="page.is_homepage" class="fa fa-home" title="Home"/> <span t-esc="page.name"/>
+        </td>
+        <td>
+            <a t-if='final_page' t-att-href="page.url"><t t-esc="page.url"/></a>
+        </td>
+        <td class="text-center">
+            <i t-if="page.menu_ids" class="fa fa-check" title="In main menu"/>
+            <i t-else="" class="fa fa-times text-muted" title="Not in main menu"/>
+        </td>
+        <td class="text-center">
+            <t t-set='date_formatted'><t t-options='{"widget": "date"}' t-esc="page.date_publish"/></t>
+            <i t-if="page.is_visible" class="fa fa-check" title="Published"/>
+            <i t-elif="page.website_published" class="fa fa-eye-slash" t-attf-title="This page will be published on {{ date_formatted }}"/>
+            <i t-else="" class="fa fa-times text-muted" title="Not published"/>
+        </td>
+        <td class="text-center">
+            <i t-if="page.website_indexed" class="fa fa-check" title="Indexed"/>
+            <i t-else="" class="fa fa-times text-muted" title="Not indexed"/>
+        </td>
+        <td class="text-center">
+            <i t-if="page.is_seo_optimized" class="fa fa-check" title="SEO optimized"/>
+            <i t-else="" class="fa fa-times text-muted" title="Not SEO optimized"/>
+        </td>
+        <td class="text-right" style="white-space:nowrap;">
+            <a class="mr4 fa fa-cog js_page_properties" href="#" t-att-data-id="page.id" title="Manage this page"/>
+            <a class="mr4 fa fa-search" t-attf-href="{{ page.url}}?enable_seo" title="Optimize SEO of this page"/>
+            <a groups="base.group_no_one" class="mr4 fa fa-bug" t-attf-href="/web#id=#{page.view_id.id}&amp;view_type=form&amp;model=ir.ui.view" title="Edit code in backend"/>
+            <a class="mr4 fa fa-clone js_clone_page" t-att-data-id="page.id" href="#" title="Clone this page"/>
+            <a class="fa fa-trash js_delete_page" t-att-data-id="page.id" href="#" title="Delete this page"/>
+        </td>
+    </tr>
+</template>
+
+</odoo>
diff --git a/addons/website/views/website_views.xml b/addons/website/views/website_views.xml
new file mode 100644
index 00000000..2cf4a1e2
--- /dev/null
+++ b/addons/website/views/website_views.xml
@@ -0,0 +1,482 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <data>
+        <!-- Menu items -->
+        <menuitem name="Website"
+            id="menu_website_configuration"
+            sequence="9"
+            groups="base.group_user"
+            web_icon="website,static/description/icon.png"/>
+
+        <record id="action_website_add_features" model="ir.actions.act_window">
+            <field name="name">Apps</field>
+            <field name="type">ir.actions.act_window</field>
+            <field name="res_model">ir.module.module</field>
+            <field name="view_mode">kanban,tree,form</field>
+            <field name="domain">['!', ('name', '=like', 'theme_%')]</field>
+            <field name="context" eval="{'search_default_category_id': ref('base.module_category_website_website'), 'searchpanel_default_category_id': ref('base.module_category_website')}"/>
+        </record>
+
+
+        <!-- website views -->
+        <record id="view_website_form" model="ir.ui.view">
+            <field name="name">website.form</field>
+            <field name="model">website</field>
+            <field name="arch" type="xml">
+                <form string="Website Settings">
+                    <sheet>
+                        <div name="domain">
+                            <group name="domain">
+                                <field name="name"/>
+                                <field name="domain"/>
+                            </group>
+                        </div>
+                        <div name="logo">
+                            <group name="logo">
+                                <field name="logo" widget="image" class="oe_avatar float-left"/>
+                            </group>
+                        </div>
+                        <div name="other">
+                            <group name="other">
+                                <field name="company_id" widget="selection" groups="base.group_multi_company"/>
+                                <field name="default_lang_id" widget="selection" groups="base.group_no_one"/>
+                            </group>
+                        </div>
+                        <notebook>
+                            <page string="Custom Code" groups="base.group_no_one">
+                                <label for="custom_code_head"/>
+                                <field name="custom_code_head" widget="ace" options="{'mode': 'xml'}"/>
+
+                                <label for="custom_code_footer"/>
+                                <field name="custom_code_footer" widget="ace" options="{'mode': 'xml'}"/>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>
+            </field>
+        </record>
+
+        <record id="view_arch_only" model="ir.ui.view">
+            <field name="name">website.ir_ui_view.arch_only</field>
+            <field name="model">ir.ui.view</field>
+            <field name="arch" type="xml">
+                <form>
+                    <sheet>
+                        <field name="arch"/>
+                    </sheet>
+                </form>
+            </field>
+        </record>
+
+        <record id="view_website_form_view_themes_modal" model="ir.ui.view">
+            <field name="name">website.modal.form</field>
+            <field name="model">website</field>
+            <field name="inherit_id" ref="website.view_website_form"/>
+            <field name="mode">primary</field>
+            <field name="arch" type="xml">
+                <xpath expr="//form" position="inside">
+                    <footer>
+                        <button name="create_and_redirect_to_theme" type="object" string="Pick a Theme" class="btn btn-primary" icon="fa-paint-brush"/>
+                        <button string="Cancel" class="btn btn-secondary" special="cancel"/>
+                    </footer>
+                </xpath>
+                <xpath expr="//notebook" position="replace"/>
+            </field>
+        </record>
+
+        <record id="view_website_tree" model="ir.ui.view">
+            <field name="name">website.tree</field>
+            <field name="model">website</field>
+            <field name="arch" type="xml">
+                <tree string="Websites">
+                    <field name="name"/>
+                    <field name="domain"/>
+                    <field name="country_group_ids" widget="many2many_tags"/>
+                    <field name="company_id" groups="base.group_multi_company"/>
+                    <field name="default_lang_id"/>
+                    <field name="theme_id" groups="base.group_no_one"/>
+                </tree>
+            </field>
+        </record>
+
+        <record id="action_website_list" model="ir.actions.act_window">
+            <field name="name">Websites</field>
+            <field name="res_model">website</field>
+            <field name="view_mode">tree,form</field>
+            <field name="view_id" ref="view_website_tree"/>
+            <field name="target">current</field>
+        </record>
+
+
+        <!-- website.page views -->
+        <record id="website_pages_form_view" model="ir.ui.view">
+            <field name="name">website.page.form</field>
+            <field name="model">website.page</field>
+            <field name="arch" type="xml">
+                <form string="Website Page Settings">
+                    <sheet>
+                        <group>
+                            <group>
+                                <field name="name"/>
+                                <field name="url"/>
+                                <field name="view_id" context="{'display_website': True}"/>
+                                <field name="website_id" options="{'no_create': True}" groups="website.group_multi_website"/>
+                                <field name="track"/>
+                            </group>
+                            <group>
+                                <field name="website_indexed"/>
+                                <field name="is_published"/>
+                                <field name="date_publish"/>
+                                <field name="cache_time" groups="base.group_no_one"/>
+                                <field name="cache_key_expr" groups="base.group_no_one"/>
+                            </group>
+                        </group>
+                        <label for="menu_ids" string="Related Menu Items"/>
+                        <field name="menu_ids"/>
+                    </sheet>
+                </form>
+            </field>
+        </record>
+
+        <record id="website_pages_tree_view" model="ir.ui.view">
+            <field name="name">website.page.list</field>
+            <field name="model">website.page</field>
+            <field name="arch" type="xml">
+                <tree string="Website Pages" default_order="name" multi_edit="1">
+                    <field name="name"/>
+                    <field name="url"/>
+                    <field name="website_id" groups="website.group_multi_website"/>
+                    <field name="website_indexed"/>
+                    <field name="is_published" string="Is Published"/>
+                    <field name="create_uid" invisible="1"/>
+                    <field name="write_uid"/>
+                    <field name="write_date"/>
+                    <field name="track"/>
+                </tree>
+            </field>
+        </record>
+
+        <record id="website_pages_view_search" model="ir.ui.view">
+            <field name="name">website.page.view.search</field>
+            <field name="model">website.page</field>
+            <field name="arch" type="xml">
+                <search string="Website Pages" >
+                    <field name="url"/>
+                    <filter string="Published" name="published" domain="[('website_published', '=', True)]"/>
+                    <filter string="Not published" name="not_published" domain="[('website_published', '=', False)]"/>
+                    <separator/>
+                    <filter string="Tracked" name="tracked" domain="[('track', '=', True)]"/>
+                    <filter string="Not tracked" name="not_tracked" domain="[('track', '=', False)]"/>
+                </search>
+            </field>
+        </record>
+
+        <record id="action_website_pages_list" model="ir.actions.act_window">
+            <field name="name">Website Pages</field>
+            <field name="res_model">website.page</field>
+            <field name="view_mode">tree,form</field>
+            <field name="view_id" ref="website_pages_tree_view"/>
+            <field name="target">current</field>
+        </record>
+
+        <!-- website.menu views -->
+        <record id="website_menus_form_view" model="ir.ui.view">
+            <field name="name">website.menu.form</field>
+            <field name="model">website.menu</field>
+            <field name="arch" type="xml">
+                <form string="Website Menus Settings">
+                    <sheet>
+                        <group>
+                            <group>
+                                <field name="name"/>
+                                <field name="url"/>
+                                <field name="page_id"/>
+                                <field name="is_mega_menu"/>
+                            </group>
+                            <group>
+                                <field name="new_window"/>
+                                <field name="sequence"/>
+                                <field name="website_id" options="{'no_create': True}" groups="website.group_multi_website"/>
+                            </group>
+                            <group>
+                                <field name="parent_id" context="{'display_website': True}"/>
+                                <field name="group_ids"/>
+                            </group>
+                        </group>
+                        <label for="child_id" string="Child Menus"/>
+                        <field name="child_id">
+                            <tree>
+                                <field name="sequence" widget="handle"/>
+                                <field name="name"/>
+                                <field name="url"/>
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>
+            </field>
+        </record>
+
+        <record id="menu_tree" model="ir.ui.view">
+            <field name="name">website.menu.tree</field>
+            <field name="model">website.menu</field>
+            <field name="field_parent">child_id</field>
+            <field name="arch" type="xml">
+                <tree string="Website menu" editable="bottom">
+                    <field name="sequence" widget="handle"/>
+                    <field name="website_id" options="{'no_create': True}" groups="website.group_multi_website"/>
+                    <field name="name"/>
+                    <field name="url"/>
+                    <field name="is_mega_menu"/>
+                    <field name="new_window"/>
+                    <field name="parent_id" context="{'display_website': True}"/>
+                    <field name="group_ids" widget="many2many_tags"/>
+                </tree>
+            </field>
+        </record>
+
+        <record id="menu_search" model="ir.ui.view">
+            <field name="name">website.menu.search</field>
+            <field name="model">website.menu</field>
+            <field name="arch" type="xml">
+                <search string="Search Menus">
+                    <field name="name"/>
+                    <field name="url"/>
+                    <field name="website_id" groups="website.group_multi_website"/>
+                    <group string="Group By">
+                        <filter string="Name" name="group_by_name" domain="[]" context="{'group_by':'name'}"/>
+                        <filter string="Url" name="group_by_url" domain="[]" context="{'group_by':'url'}"/>
+                        <filter string="Website"  name="group_by_website_id" domain="[]" context="{'group_by':'website_id'}"/>
+                    </group>
+                </search>
+            </field>
+        </record>
+
+        <record id="action_website_menu" model="ir.actions.act_window">
+            <field name="name">Website Menu</field>
+            <field name="res_model">website.menu</field>
+            <field name="view_mode">tree,form</field>
+            <field name="context">{'search_default_group_by_website_id':1}</field>
+            <field name="view_id" ref="menu_tree"/>
+            <field name="target">current</field>
+        </record>
+
+        <!-- ir.ui.view views -->
+        <record model="ir.ui.view" id="view_view_form_extend">
+            <field name="model">ir.ui.view</field>
+            <field name="inherit_id" ref="base.view_view_form"/>
+            <field name="arch" type="xml">
+                <field name="inherit_id" position="attributes">
+                    <attribute name="context">{'display_website': True}</attribute>
+                </field>
+                <field name="type" position="after">
+                    <field name="website_id" options="{'no_create': True}" groups="website.group_multi_website"/>
+                    <field name="key"/>
+                    <field name="page_ids" invisible="1" />
+                    <field name="first_page_id" attrs="{'invisible': [('page_ids', '=', [])]}" />
+                    <field name="visibility" attrs="{'invisible': [('type', '!=', 'qweb')]}" />
+                    <field name="visibility_password_display" attrs="{'invisible': [('visibility', '!=', 'password')]}" password="True" string="Visibility Password" />
+                </field>
+                <sheet position="before">
+                    <header>
+                        <button name="redirect_to_page_manager" string="Go to Page Manager"
+                            type="object" attrs="{'invisible': [('page_ids', '=', [])]}"/>
+                    </header>
+                </sheet>
+            </field>
+        </record>
+
+        <record id="view_view_tree_inherit_website" model="ir.ui.view">
+            <field name="model">ir.ui.view</field>
+            <field name="inherit_id" ref="base.view_view_tree"/>
+            <field name="arch" type="xml">
+                <field name="name" position="after">
+                    <field name="website_id" groups="website.group_multi_website"/>
+                </field>
+                <field name="xml_id" position="before">
+                    <field name="key" groups="website.group_multi_website"/>
+                </field>
+            </field>
+        </record>
+
+        <record id="reset_view_arch_wizard_view" model="ir.ui.view">
+            <field name="model">reset.view.arch.wizard</field>
+            <field name="inherit_id" ref="base.reset_view_arch_wizard_view"/>
+            <field name="arch" type="xml">
+                <field name="compare_view_id" position="attributes">
+                    <attribute name="context">{'display_website': True}</attribute>
+                </field>
+            </field>
+        </record>
+
+        <!-- Dashboard -->
+        <record id="backend_dashboard" model="ir.actions.client">
+            <field name="name">Analytics</field>
+            <field name="tag">backend_dashboard</field>
+        </record>
+
+        <record id="ir_actions_server_website_dashboard" model="ir.actions.server">
+            <field name="name">Website: Dashboard</field>
+            <field name="model_id" ref="website.model_website"/>
+            <field name="state">code</field>
+            <field name="code">action = model.action_dashboard_redirect()</field>
+            <field name="groups_id" eval="[(4, ref('base.group_user'))]"/>
+        </record>
+
+        <record id="ir_actions_server_website_google_analytics" model="ir.actions.server">
+            <field name="name">Website: Analytics</field>
+            <field name="model_id" ref="website.model_website"/>
+            <field name="state">code</field>
+            <field name="code">action = model.env.ref('website.backend_dashboard').sudo().read()[0]</field>
+            <field name="groups_id" eval="[(4, ref('base.group_user'))]"/>
+        </record>
+
+        <!-- Custom module kanban : install button (even if already installed) which -->
+        <!-- redirects to website after (fake or not) installation + live preview button -->
+        <record model="ir.ui.view" id="theme_view_kanban">
+            <field name="name">Themes Kanban</field>
+            <field name="model">ir.module.module</field>
+            <field name="arch" type="xml">
+                <kanban create="false" class="o_theme_kanban" default_order="state,sequence,name" js_class="theme_preview_kanban">
+                    <field name="icon"/>
+                    <field name="name"/>
+                    <field name="state"/>
+                    <field name="url"/>
+                    <field name="image_ids"/>
+                    <field name="category_id"/>
+                    <field name="display_name"/>
+                    <field name="is_installed_on_current_website"/>
+                    <templates>
+                        <div t-name="kanban-box" t-attf-class="o_theme_preview mb16 mt16 #{record.is_installed_on_current_website.raw_value? 'o_theme_installed' : ''}">
+                            <t t-set="has_image" t-value="record.image_ids.raw_value.length > 0"/>
+                            <t t-set="has_screenshot" t-value="record.image_ids.raw_value.length > 1"/>
+                            <t t-set="image_url" t-value="has_image ? '/web/image/' + record.image_ids.raw_value[0] : record.icon.value"/>
+
+                            <div class="o_theme_preview_top bg-white mb4">
+                                <div t-attf-class="bg-gray-lighter #{has_screenshot? 'o_theme_screenshot' : (has_image ? 'o_theme_cover' : 'o_theme_logo')}" t-attf-style="background-image: url(#{image_url});"/>
+                                <div t-if="record.is_installed_on_current_website.raw_value" class="o_button_area">
+                                    <button type="object" name="button_refresh_theme" class="btn btn-primary">Update theme</button>
+                                    <hr />
+                                    <button type="object" name="button_remove_theme" class="btn btn-secondary">Remove theme</button>
+                                </div>
+                                <div t-else="" class="o_button_area">
+                                    <button type="object" name="button_choose_theme" class="btn btn-primary">Use this theme</button>
+                                    <hr t-if="record.url.value"/>
+                                    <button role="button" type="edit" t-if="record.url.value" class="btn btn-secondary">Live Preview</button>
+                                </div>
+                                <i states="installed" t-if="record.is_installed_on_current_website.raw_value"
+                                    class="fa fa-check position-absolute p-1 m-2 rounded-circle bg-primary shadow"
+                                    style="top: 0; right: 0;"
+                                    role="img" aria-label="Installed" title="Installed"/>
+                            </div>
+                            <div class="o_theme_preview_bottom clearfix">
+                                <h5 t-if="record.display_name.value" class="text-uppercase float-left">
+                                    <img class="float-left mr4"  t-att-src="record.icon.value" height="16" width="16" alt="Theme preview"/>
+                                    <b><t t-esc="record.display_name.value.replace(('Theme'), '').replace(('theme'), '')"/></b>
+                                </h5>
+                                <h6 t-if="record.category_id.value" class="text-muted float-right">
+                                    <b><t t-esc="record.category_id.value"/></b>
+                                </h6>
+                            </div>
+                        </div>
+                    </templates>
+                </kanban>
+            </field>
+        </record>
+        <record model="ir.ui.view" id="theme_view_search">
+            <field name="name">Themes Search</field>
+            <field name="model">ir.module.module</field>
+            <field name="priority">50</field>
+            <field name="arch" type="xml">
+                <search>
+                    <field name="name" filter_domain="['|', '|', ('summary', 'ilike', self), ('shortdesc', 'ilike', self), ('name', 'ilike', self)]" string="Theme"/>
+                    <field name="category_id" filter_domain="['|', '|', ('summary', 'ilike', self), ('shortdesc', 'ilike', self), ('category_id', 'ilike', self)]" string="Category"/>
+                    <group>
+                        <filter string="Author" name="author" domain="[]" context="{'group_by':'author'}"/>
+                        <filter string="Category" name="category" domain="[]" context="{'group_by':'category_id'}"/>
+                    </group>
+                </search>
+            </field>
+        </record>
+
+        <!-- themes should be installed through website settings -->
+        <record id="base.open_module_tree" model="ir.actions.act_window">
+            <field name="domain">['!', ('name', '=like', 'theme_%')]</field>
+        </record>
+
+        <!-- Actions to list themes with custom kanban (launched on module installation) -->
+        <record id="theme_view_form_preview" model="ir.ui.view">
+            <field name="name">website.form</field>
+            <field name="model">ir.module.module</field>
+            <field name="mode">primary</field>
+            <field name="arch" type="xml">
+                <form create="false" edit="false" delete="0" js_class="theme_preview_form">
+                  <div class="o_preview_frame h-100">
+                        <field name='url' widget='iframe'/>
+                        <img alt='phone' class='img_mobile' style='display:none' src="/website/static/src/img/phone.png"/>
+                  </div>
+
+                </form>
+            </field>
+        </record>
+
+        <record id="theme_install_kanban_action" model="ir.actions.act_window">
+            <field name="name">Pick a Theme</field>
+            <field name="res_model">ir.module.module</field>
+            <field name="view_mode">kanban,form</field>
+            <field name="view_id" ref="website.theme_view_kanban" />
+            <field name="target">fullscreen</field>
+            <field name="view_ids"
+                   eval="[(5, 0, 0),
+                          (0, 0, {'view_mode': 'kanban', 'view_id': ref('website.theme_view_kanban')}),
+                          (0, 0, {'view_mode': 'form', 'view_id': ref('website.theme_view_form_preview')})]"/>
+            <field name="search_view_id" ref="theme_view_search"/>
+            <field name="domain" eval="[
+                ('category_id', 'not in', [ref('base.module_category_hidden', False), ref('base.module_category_theme_hidden', False)]),
+                '|', ('category_id', '=', ref('base.module_category_theme', False)), ('category_id.parent_id', '=', ref('base.module_category_theme', False))
+            ]"/>
+        </record>
+
+        <record id="theme_install_act_url" model="ir.actions.act_url">
+            <field name="name">Website</field>
+            <field name="url">/web?reload#action=website.theme_install_kanban_action</field>
+            <field name="target">self</field>
+        </record>
+
+        <record id="theme_install_todo" model="ir.actions.todo">
+            <field name="name">Go to theme</field>
+            <field name="action_id" ref="theme_install_act_url"/>
+            <field name="sequence">0</field>
+        </record>
+
+        <!-- ONBOARDING -->
+        <template id="onboarding_website_theme_step">
+            <t t-call="base.onboarding_step">
+                <t t-set="title">Website Theme</t>
+                <t t-set="description">Select a theme for your website.</t>
+                <t t-set="btn_text">Let's start!</t>
+                <t t-set="method" t-value="'action_open_website_theme_selector'" />
+                <t t-set="model" t-value="'res.company'" />
+                <t t-set="done" t-value="company.website_theme_onboarding_done" />
+            </t>
+        </template>
+
+        <menuitem id="menu_dashboard"
+            name="Dashboard"
+            sequence="1"
+            parent="website.menu_website_configuration"/>
+
+        <!-- Force empty action, to ease upgrade -->
+        <record id="menu_dashboard" model="ir.ui.menu">
+            <field name="action" eval="False"/>
+        </record>
+
+        <menuitem id="menu_website_dashboard" parent="menu_dashboard"
+            sequence="10" name="eCommerce Dashboard"
+            action="website.ir_actions_server_website_dashboard" active="0"/>
+
+        <menuitem id="menu_website_google_analytics" parent="menu_dashboard"
+            sequence="20" name="Analytics"
+            action="website.ir_actions_server_website_google_analytics"/>
+
+    </data>
+</odoo>
diff --git a/addons/website/views/website_visitor_views.xml b/addons/website/views/website_visitor_views.xml
new file mode 100644
index 00000000..235f32ca
--- /dev/null
+++ b/addons/website/views/website_visitor_views.xml
@@ -0,0 +1,349 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo><data>
+    <!--page history-->
+    <record id="website_visitor_page_view_tree" model="ir.ui.view">
+        <field name="name">website.track.view.tree</field>
+        <field name="model">website.track</field>
+        <field name="arch" type="xml">
+            <tree string="Visitor Page Views History" create="0">
+                <field name="visitor_id"/>
+                <field name="page_id"/>
+                <field name="url"/>
+                <field name="visit_datetime"/>
+            </tree>
+        </field>
+    </record>
+
+    <record id="website_visitor_page_view_graph" model="ir.ui.view">
+        <field name="name">website.track.view.graph</field>
+        <field name="model">website.track</field>
+        <field name="arch" type="xml">
+            <graph string="Visitor Page Views" sample="1">
+                <field name="url"/>
+            </graph>
+        </field>
+    </record>
+
+    <record id="website_visitor_page_view_search" model="ir.ui.view">
+        <field name="name">website.track.view.search</field>
+        <field name="model">website.track</field>
+        <field name="arch" type="xml">
+            <search string="Search Visitor">
+                <field name="visitor_id"/>
+                <field name="page_id"/>
+                <field name="url"/>
+                <field name="visit_datetime"/>
+                <filter string="Pages" name="type_page" domain="[('page_id', '!=', False)]"/>
+                <filter string="Urls &amp; Pages" name="type_url" domain="[('url', '!=', False)]"/>
+                <group string="Group By">
+                    <filter string="Visitor" name="group_by_visitor" domain="[]" context="{'group_by': 'visitor_id'}"/>
+                    <filter string="Page" name="group_by_page" domain="[]" context="{'group_by': 'page_id'}"/>
+                    <filter string="Url" name="group_by_url" domain="[]" context="{'group_by': 'url'}"/>
+                    <filter string="Date" name="group_by_date" domain="[]" context="{'group_by': 'visit_datetime'}"/>
+                </group>
+            </search>
+        </field>
+    </record>
+
+    <record id="website_visitor_page_action" model="ir.actions.act_window">
+        <field name="name">Page Views History</field>
+        <field name="res_model">website.track</field>
+        <field name="view_mode">tree</field>
+        <field name="view_ids" eval="[(5, 0, 0),
+            (0, 0, {'view_mode': 'tree', 'view_id': ref('website_visitor_page_view_tree')}),
+            (0, 0, {'view_mode': 'graph', 'view_id': ref('website_visitor_page_view_graph')}),
+        ]"/>
+        <field name="domain">[('visitor_id', '=', active_id), ('url', '!=', False)]</field>
+        <field name="help" type="html">
+            <p class="o_view_nocontent_empty_folder">
+              No page views yet for this visitor
+            </p>
+        </field>
+    </record>
+
+    <!--Website visitor actions-->
+    <record id="website.visitor_partner_action" model="ir.actions.act_window">
+        <field name="name">Partners</field>
+        <field name="res_model">res.partner</field>
+        <field name="view_mode">tree,form</field>
+        <field name="domain">[('visitor_ids', 'in', [active_id])]</field>
+        <field name="help" type="html">
+            <p class="o_view_nocontent_empty_folder">
+              No partner linked for this visitor
+            </p>
+        </field>
+    </record>
+
+    <!-- website visitor views -->
+    <record id="website_visitor_view_kanban" model="ir.ui.view">
+        <field name="name">website.visitor.view.kanban</field>
+        <field name="model">website.visitor</field>
+        <field name="arch" type="xml">
+            <kanban class="o_wvisitor_kanban" sample="1">
+                <field name="id"/>
+                <field name="country_id"/>
+                <field name="country_flag"/>
+                <field name="email"/>
+                <field name="is_connected"/>
+                <field name="display_name"/>
+                <field name="last_visited_page_id"/>
+                <field name="page_ids"/>
+                <field name="partner_id"/>
+                <field name="partner_image"/>
+                <templates>
+                    <t t-name="kanban-box">
+                        <div class="oe_kanban_global_click o_wvisitor_kanban_card">
+                            <!-- displayed in ungrouped mode -->
+                            <div class="o_kanban_detail_ungrouped row mx-0">
+                                <div class="o_wvisitor_kanban_image">
+                                     <img t-if="record.partner_image.raw_value"
+                                        t-att-src="kanban_image('res.partner', 'image_128', record.partner_id.raw_value)"
+                                        width="54px" height="54px" alt="Visitor"/>
+                                     <img t-else=""
+                                        t-attf-src="/base/static/img/avatar_grey.png"
+                                        width="54px" height="54px" alt="Visitor"/>
+                                </div>
+                                <div class="col o_wvisitor_name">
+                                    <div>
+                                        <b><field name="display_name"/></b>
+                                        <div class="float-right">
+                                            <span class="fa fa-circle text-success" t-if="record.is_connected.raw_value" aria-label="Online" title="Online"/>
+                                            <span class="fa fa-circle text-danger" t-else="" aria-label="Offline" title="Offline"/>
+                                        </div>
+                                        <!-- Double check is necessary for sample view (or error image are shown) -->
+                                        <div t-if="record.country_id.raw_value and record.country_flag.raw_value">
+                                            <img t-att-src="record.country_flag.raw_value"
+                                               class="o_country_flag" alt="Country"/>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <b><field name="time_since_last_action"/></b>
+                                    <div>Last Action</div>
+                                </div>
+                                <div class="col">
+                                    <b><field name="visit_count"/></b>
+                                    <div>Visits</div>
+                                </div>
+                                <div class="col">
+                                    <b><field name="last_visited_page_id"/></b>
+                                    <div>Last Page</div>
+                                </div>
+                                <div id="wvisitor_visited_page" class="col">
+                                    <b><field name="page_count"/></b>
+                                    <div>Visited Pages</div>
+                                </div>
+                                <div class="col-3 w_visitor_kanban_actions_ungrouped">
+                                    <button name="action_send_mail" type="object"
+                                            class="btn btn-secondary border" attrs="{'invisible': [('email', '=', False)]}">
+                                            Email
+                                    </button>
+                                </div>
+                            </div>
+                            <!-- displayed in grouped mode -->
+                            <div class="oe_kanban_details">
+                                <div class="float-right">
+                                    <span class="fa fa-circle text-success" t-if="record.is_connected.raw_value" aria-label="Online" title="Online"/>
+                                    <span class="fa fa-circle text-danger" t-else="" aria-label="Offline" title="Offline"/>
+                                </div>
+                                <strong>
+                                    <img t-if="record.country_id.raw_value"
+                                       t-att-src="record.country_flag.raw_value"
+                                       class="o_country_flag" alt="Country"/>
+                                    <field name="display_name"/>
+                                </strong>
+                                <div class="mb-2">Active <field name="time_since_last_action"/></div>
+                                <div>Last Page<span class="float-right font-weight-bold"><field name="last_visited_page_id"/></span></div>
+                                <div>Visits<span class="float-right font-weight-bold"><field name="visit_count"/></span></div>
+                                <div id="o_page_count">Visited Pages<span class="float-right font-weight-bold"><field name="page_count"/></span></div>
+                                <div class="w_visitor_kanban_actions">
+                                    <button name="action_send_mail" type="object"
+                                            class="btn btn-secondary" attrs="{'invisible': [('email', '=', False)]}">
+                                            Email
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </t>
+                </templates>
+            </kanban>
+        </field>
+    </record>
+
+    <record id="website_visitor_view_form" model="ir.ui.view">
+        <field name="name">website.visitor.view.form</field>
+        <field name="model">website.visitor</field>
+        <field name="arch" type="xml">
+            <form string="Website Visitor">
+                <header>
+                    <button name="action_send_mail" type="object" class="btn btn-primary"
+                            attrs="{'invisible': [('email', '=', False)]}" string="Send Email"/>
+                </header>
+                <sheet>
+                    <div class="oe_button_box" name="button_box">
+                        <button class="oe_stat_button o_stat_button_info" attrs="{'invisible': [('is_connected', '=', False)]}">
+                            <i class="fa fa-fw o_button_icon fa-circle text-success"/>
+                            <span>Connected</span>
+                        </button>
+                        <button class="oe_stat_button o_stat_button_info" attrs="{'invisible': [('is_connected', '=', True)]}">
+                            <i class="fa fa-fw o_button_icon fa-circle text-danger"/>
+                            <span>Offline</span>
+                        </button>
+                        <button id="w_visitor_visit_counter" class="oe_stat_button o_stat_button_info" icon="fa-globe">
+                            <field name="visit_count" widget="statinfo" string="Visits"/>
+                        </button>
+                        <button name="%(website.website_visitor_page_action)d" type="action"
+                                class="oe_stat_button"
+                                icon="fa-tags">
+                            <field name="visitor_page_count" widget="statinfo" string="Page views"/>
+                        </button>
+                    </div>
+                    <div class="float-right" attrs="{'invisible': [('country_id', '=', False)]}">
+                        <field name="country_flag" widget="image_url" options='{"size": [32, 32]}'/>
+                    </div>
+                    <div class="oe_title">
+                        <h1><field name="display_name"/></h1>
+                    </div>
+                    <group id="general_info">
+                        <group string="Visitor Information">
+                            <field name="active" invisible="1"/>
+                            <field name="is_connected" invisible="1"/>
+                            <field name="partner_id"/>
+                            <field name="email"/>
+                            <field name="mobile" class="o_force_ltr"/>
+                            <field name="country_id" attrs="{'invisible': [('country_id', '=', False)]}"/>
+                            <field name="lang_id"/>
+                        </group>
+                        <group id="visits" string="Visits">
+                            <field name="create_date"/>
+                            <field name="last_connection_datetime"/>
+                            <field name="page_ids" widget="many2many_tags"/>
+                        </group>
+                    </group>
+                </sheet>
+            </form>
+        </field>
+    </record>
+
+    <record id="website_visitor_view_tree" model="ir.ui.view">
+        <field name="name">website.visitor.view.tree</field>
+        <field name="model">website.visitor</field>
+        <field name="arch" type="xml">
+            <tree string="Web Visitors" decoration-success="is_connected" decoration-danger="not is_connected" sample="1">
+                <field name="country_flag" widget="image_url" options='{"size": [20, 20]}' nolabel="1"/>
+                <field name="display_name"/>
+                <field name="create_date"/>
+                <field name="last_connection_datetime"/>
+                <field name="lang_id"/>
+                <field name="visit_count"/>
+                <field name="page_ids" widget="many2many_tags"/>
+                <field name="is_connected" invisible="1"/>
+                <field name="email" invisible="1"/>
+                <button string="Send Email" name="action_send_mail" type="object"
+                    icon="fa-comment" attrs="{'invisible': [('email', '=', False)]}"/>
+            </tree>
+        </field>
+    </record>
+
+    <record id="website_visitor_view_search" model="ir.ui.view">
+        <field name="name">website.visitor.view.search</field>
+        <field name="model">website.visitor</field>
+        <field name="arch" type="xml">
+            <search string="Search Visitor">
+                <field name="name"/>
+                <field name="lang_id"/>
+                <field name="country_id"/>
+                <field name="visit_count"/>
+                <field name="page_ids"/>
+                <filter string="Visitors" name="type_visitor" domain="[('partner_id', '=', False)]"/>
+                <filter string="Customers" name="type_customer" domain="[('partner_id', '!=', False)]"/>
+                <separator/>
+                <filter string="Archived" name="is_archived" domain="[('active', '=', False)]"/>
+                <separator/>
+                <filter string="Is Connected" name="is_connected" domain="[('last_connection_datetime', '&gt;', datetime.datetime.now() - datetime.timedelta(minutes=5))]"/>
+                <filter name="filter_create_date" date="create_date"/>
+                <group string="Group By">
+                    <filter string="Country" name="group_by_country" context="{'group_by': 'country_id'}"/>
+                    <filter string="Language" name="group_by_lang" context="{'group_by': 'lang_id'}"/>
+                </group>
+            </search>
+        </field>
+    </record>
+
+    <record id="website_visitor_view_graph" model="ir.ui.view">
+        <field name="name">website.visitor.view.graph</field>
+        <field name="model">website.visitor</field>
+        <field name="arch" type="xml">
+            <graph string="Visitors" sample="1">
+                <field name="create_date" type="row"/>
+                <field name="visit_count"/>
+            </graph>
+        </field>
+    </record>
+
+    <record id="website_visitors_action" model="ir.actions.act_window">
+        <field name="name">Visitors</field>
+        <field name="type">ir.actions.act_window</field>
+        <field name="res_model">website.visitor</field>
+        <field name="view_mode">kanban,tree,form,graph</field>
+        <field name="help" type="html">
+          <p class="o_view_nocontent_smiling_face">
+            Wait for visitors to come to your website to see their history.
+          </p>
+        </field>
+    </record>
+
+    <record id="website_visitor_track_view_tree" model="ir.ui.view">
+        <field name="name">website.track.view.tree</field>
+        <field name="model">website.track</field>
+        <field name="arch" type="xml">
+            <tree string="Visitor Views History" create="0" edit="0" sample="1">
+                <field name="visitor_id"/>
+                <field name="page_id"/>
+                <field name="url"/>
+                <field name="visit_datetime"/>
+            </tree>
+        </field>
+    </record>
+
+    <record id="website_visitor_track_view_graph" model="ir.ui.view">
+        <field name="name">website.track.view.graph</field>
+        <field name="model">website.track</field>
+        <field name="arch" type="xml">
+            <graph string="Visitor Views" sample="1">
+                <field name="url"/>
+            </graph>
+        </field>
+    </record>
+
+    <record id="website_visitor_view_action" model="ir.actions.act_window">
+        <field name="name">Views</field>
+        <field name="type">ir.actions.act_window</field>
+        <field name="res_model">website.track</field>
+        <field name="view_mode">tree</field>
+        <field name="context">{'search_default_type_url': 1, 'create': False, 'edit': False, 'copy': False}</field>
+        <field name="view_ids" eval="[(5, 0, 0),
+            (0, 0, {'view_mode': 'tree', 'view_id': ref('website_visitor_track_view_tree')}),
+            (0, 0, {'view_mode': 'graph', 'view_id': ref('website_visitor_track_view_graph')}),
+        ]"/>
+        <field name="help" type="html">
+          <p class="o_view_nocontent_smiling_face">
+            Wait for visitors to come to your website to see the pages they viewed.
+          </p>
+        </field>
+    </record>
+
+    <menuitem id="website_visitor_menu"
+        name="Visitors"
+        sequence="80"
+        parent="website.menu_website_configuration"/>
+
+    <menuitem id="menu_visitor_sub_menu" name="Visitors"
+        sequence="1"
+        parent="website_visitor_menu"
+        action="website.website_visitors_action"/>
+    <menuitem id="menu_visitor_view_menu" name="Views"
+        sequence="2"
+        parent="website_visitor_menu"
+        action="website.website_visitor_view_action"/>
+</data></odoo>
-- 
cgit v1.2.3