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/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 ++++++++++++++++++++
 50 files changed, 3853 insertions(+)
 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

(limited to 'addons/website/views/snippets')

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>
-- 
cgit v1.2.3