diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index 47dfb4e22c675ee76470cbdf2546c6530f47bcd6..6c0b2187a09bf674464b05350284413998034c79 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -11,6 +11,7 @@ $o-line-height-base: 1.5; // This is BS default
 // Colors
 $o-community-color: #7C7BAD;
 $o-enterprise-color: #875A7B;
+$o-enterprise-primary-color: #00A09D;
 
 $o-brand-odoo: $o-community-color;
 $o-brand-primary: $o-community-color;
diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js
index 4cd15d4c3d743d4579c0ba9f9d018282e434fb82..e450874b95d4cdaa3cd25e1626d4b3df07976dc3 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -286,6 +286,7 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
 
             $container.find('button[data-event="imageShape"][data-value="fa-spin"]').toggleClass("active", $(oStyle.image).hasClass("fa-spin"));
             $container.find('button[data-event="imageShape"][data-value="shadow"]').toggleClass("active", $(oStyle.image).hasClass("shadow"));
+            $container.find('.btn-group:has(button[data-event="imageShape"])').removeClass("d-none");
 
         } else {
             $container.find('.d-none:not(.only_fa, .note-recent-color)').removeClass('d-none');
@@ -1034,6 +1035,7 @@ $.summernote.lang.odoo = {
       normal: _t('Normal'),
       blockquote: _t('Quote'),
       pre: _t('Code'),
+      small: _t('Small'),
       h1: _t('Header 1'),
       h2: _t('Header 2'),
       h3: _t('Header 3'),
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index e3a8803619a388bdb659f4c72a6ecafbc97a75ea..f5cbb34c802948898a53ed5bb9a023f00bacac4d 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -288,7 +288,6 @@ var SnippetEditor = Widget.extend({
             option.__order = i++;
             return option.attachTo($el);
         });
-        $ul.append($('<div/>', {class: 'dropdown-divider'}));
 
         var $parents = this.$target.parents();
         _.each($parents, function (parent) {
diff --git a/addons/web_editor/static/src/js/editor/summernote.js b/addons/web_editor/static/src/js/editor/summernote.js
index 0ef7881b9201ef7ad958994f009d0951f07a017c..f420f9516337aa1f6324d9205e16c3533fec247c 100644
--- a/addons/web_editor/static/src/js/editor/summernote.js
+++ b/addons/web_editor/static/src/js/editor/summernote.js
@@ -1033,7 +1033,7 @@ options.keyMap.mac['ESCAPE'] = 'cancel';
 options.keyMap.mac['UP'] = 'up';
 options.keyMap.mac['DOWN'] = 'down';
 
-options.styleTags = ['p', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote'];
+options.styleTags = ['p', 'pre', 'small', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote'];
 
 $.summernote.pluginEvents.insertTable = function (event, editor, layoutInfo, sDim) {
   var $editable = layoutInfo.editable();
diff --git a/addons/web_editor/static/src/js/tours/rte.js b/addons/web_editor/static/src/js/tours/rte.js
index 0bd1440e4879e196da0cb15d5cea9255b986656f..b997944a98b16ce5ec282f63cf31df8bacc7cee0 100644
--- a/addons/web_editor/static/src/js/tours/rte.js
+++ b/addons/web_editor/static/src/js/tours/rte.js
@@ -314,7 +314,7 @@ tour.register('rte_inline', {
     trigger: '#wrapwrap img:first[width][height][style*="-radius"][style*="1px"][style*="padding"]',
 }, {
     content: "check the font image src",
-    trigger: '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(0,123,255)/32"]',
+    trigger: '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(0,160,157)/32"]',
 }, {
     content: "check the font class to css",
     trigger: '#wrapwrap img:eq(1)[height]:not([class*="fa"])',
diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js
index 74fbfe18f01979861ec10c9a30c30f3bf83785da..3103dc915051e0c1879ddbd3b138412c7c817e15 100644
--- a/addons/web_editor/static/src/js/widgets/widgets.js
+++ b/addons/web_editor/static/src/js/widgets/widgets.js
@@ -1525,10 +1525,15 @@ var LinkDialog = Dialog.extend({
         }
 
         var style = this.$('input[name="link_style_color"]:checked').val() || '';
+        var shape = this.$('select[name="link_style_shape"]').val() || '';
         var size = this.$('select[name="link_style_size"]').val() || '';
+        var shapes = shape.split(',');
+        var outline = shapes[0] === 'outline';
+        shape = shapes.slice(outline ? 1 : 0).join(' ');
         var classes = (this.data.className || '')
-            + ((style && style.length) ? (' btn btn-' + style) : '')
-            + ((size && size.length) ? (' btn-' + size) : '');
+            + (style ? (' btn btn-' + (outline ? 'outline-' : '') + style) : '')
+            + (shape ? (' ' + shape) : '')
+            + (size ? (' btn-' + size) : '');
         var isNewWindow = this.$('input[name="is_new_window"]').prop('checked');
 
         if (url.indexOf('@') >= 0 && url.indexOf('mailto:') < 0 && !url.match(/^http[s]?/i)) {
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index d0c0f312b9394c5f6f64def02a456dc37c99a242..eff996bea20a8b2e6e741953de8f90bf1cd3d1c6 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -222,7 +222,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default;
 // Colors
 $o-color-palettes: (
     (
-        
+
     ),
 ) !default;
 $o-color-palette-number: 1;
@@ -230,11 +230,11 @@ $o-color-palette-number: 1;
 // Theme colors
 $o-theme-color-palettes: (
     (
-        primary: #007bff, // BS default here but needed for compatibility (see bootstrap_overridden)
-        secondary: #6c757d, // BS default here but needed for compatibility (see bootstrap_overridden)
-        gamma: #BA3C3D,
-        delta: #0D6759,
-        epsilon: #0B2E59,
+        primary: $o-enterprise-primary-color,
+        secondary: $o-enterprise-color,
+        gamma: #5C5B80,
+        delta: #5B899E,
+        epsilon: #E46F78,
     ),
 ) !default;
 $o-theme-color-palette-number: 1;
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index b265e375f3b66c61cad81f00899679b5770e6d68..b3d1763ca71cd448d7fe5e26230df898531425ac 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -257,6 +257,18 @@
                         </select>
                     </div>
                 </div>
+                <div class="form-group row">
+                    <label class="col-form-label col-md-3">Style</label>
+                    <div class="col-md-9">
+                        <select name="link_style_shape" class="form-control col-md-3 link-shape">
+                            <option value="" selected="selected">Default</option>
+                            <option value="outline">Outline</option>
+                            <option value="rounded-circle">Rounded</option>
+                            <option value="outline,rounded-circle">Outline-Rounded</option>
+                            <option value="flat">Flat</option>
+                        </select>
+                    </div>
+                </div>
                 <div class="form-group row">
                     <label class="col-form-label col-md-3">Color</label>
                     <div class="col-md-9">
@@ -266,7 +278,7 @@
                                 <input class="d-none link-style" name="link_style_color" type="radio" value=""/>
                                 <i class="fa"/>
                             </label>
-                            <t t-foreach="['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'alpha', 'beta', 'gamma', 'delta', 'epsilon']" t-as="color">
+                            <t t-foreach="['primary', 'secondary', 'gamma', 'delta', 'epsilon', 'success', 'info', 'warning', 'danger']" t-as="color">
                                 <label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-#{color}" t-attf-aria-label="Color for #{color}" t-attf-title="Color for #{color}">
                                     <input type="radio" name="link_style_color" class="d-none link-style" t-att-value="color"/>
                                     <i class="fa"/>
diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index cfb8ed730f82d51f5270ebd46ccbc5456f76bba8..c9a3ddfccd0c5a87c92190091070438c8b6b1046 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -154,8 +154,8 @@
 <template id="web_editor.colorpicker" name="Color-Picker">
     <colorpicker>
         <div class="o_colorpicker_section" data-name="theme" data-display="Theme Colors" data-icon-class="fa fa-flask">
-            <button data-color="alpha"></button>
-            <button data-color="beta"></button>
+            <button data-color="primary"></button>
+            <button data-color="secondary"></button>
             <button data-color="gamma"></button>
             <button data-color="delta"></button>
             <button data-color="epsilon"></button>
diff --git a/addons/website/data/website_data.xml b/addons/website/data/website_data.xml
index f338a58e51b0721290434b83bb8e7983098d8200..cc82e1d40eee6494b37e8e7af78fd8b0e4fa43c9 100644
--- a/addons/website/data/website_data.xml
+++ b/addons/website/data/website_data.xml
@@ -422,49 +422,98 @@
             <field name="name">Cover Snippet - Default Image</field>
             <field name="datas_fname">s_cover_default_image.jpg</field>
             <field name="type">url</field>
-            <field name="url">/web/image/website.s_background_image_03</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_cover.jpg</field>
         </record>
-        <record id="website.s_parallax_slider_default_image" model="ir.attachment">
+        <record id="website.s_quotes_carousel_demo_image_1" model="ir.attachment">
             <field name="public" eval="True"/>
-            <field name="name">Parallax Slider Snippet - Default Image</field>
-            <field name="datas_fname">s_parallax_slider_default_image.png</field>
+            <field name="name">Quotes Carousel Snippet - Demo Image 1</field>
+            <field name="datas_fname">s_quotes_carousel_image_01.jpg</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/snippets_demo/s_parallax_slider.png</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_quotes_carousel_1.jpg</field>
+        </record>
+        <record id="website.s_quotes_carousel_demo_image_2" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Quotes Carousel Snippet - Demo Image 2</field>
+            <field name="datas_fname">s_quotes_carousel_image_02.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_quotes_carousel_2.jpg</field>
+        </record>
+        <record id="website.s_quotes_carousel_demo_image_3" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Quotes Carousel Snippet - Demo Image 3</field>
+            <field name="datas_fname">s_quotes_carousel_image_3.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_team_member_3.png</field>
+        </record>
+        <record id="website.s_quotes_carousel_demo_image_4" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Quotes Carousel Snippet - Demo Image 4</field>
+            <field name="datas_fname">s_quotes_carousel_image_4.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_team_member_2.png</field>
+        </record>
+        <record id="website.s_quotes_carousel_demo_image_5" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Quotes Carousel Snippet - Demo Image 5</field>
+            <field name="datas_fname">s_quotes_carousel_image_5.png</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_team_member_4.png</field>
         </record>
         <record id="website.s_image_text_default_image" model="ir.attachment">
             <field name="public" eval="True"/>
             <field name="name">Image Text Snippet - Default Image</field>
-            <field name="datas_fname">s_image_text_default_image.png</field>
+            <field name="datas_fname">s_image_text_default_image.jpg</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/snippets_demo/s_image_text.png</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_image_text.jpg</field>
         </record>
         <record id="website.s_text_image_default_image" model="ir.attachment">
             <field name="public" eval="True"/>
             <field name="name">Text Image Snippet - Default Image</field>
-            <field name="datas_fname">s_text_image_default_image.png</field>
+            <field name="datas_fname">s_text_image_default_image.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_text_image.jpg</field>
+        </record>
+        <record id="website.s_carousel_default_image_1" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Carousel Snippet - Default Image 1</field>
+            <field name="datas_fname">s_carousel_default_image_1.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_carousel_1.jpg</field>
+        </record>
+        <record id="website.s_carousel_default_image_2" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Carousel Snippet - Default Image 2</field>
+            <field name="datas_fname">s_carousel_default_image_2.jpg</field>
+            <field name="type">url</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_carousel_2.jpg</field>
+        </record>
+        <record id="website.s_carousel_default_image_3" model="ir.attachment">
+            <field name="public" eval="True"/>
+            <field name="name">Carousel Snippet - Default Image 3</field>
+            <field name="datas_fname">s_carousel_default_image_3.jpg</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/snippets_demo/s_text_image.png</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_carousel_3.jpg</field>
         </record>
-        <record id="website.s_image_floating_default_image" model="ir.attachment">
+        <record id="website.s_picture_default_image" model="ir.attachment">
             <field name="public" eval="True"/>
-            <field name="name">Image Floating Snippet - Default Image</field>
-            <field name="datas_fname">s_image_floating_default_image.png</field>
+            <field name="name">Picture Snippet - Default Image</field>
+            <field name="datas_fname">s_picture_default_image.jpg</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/snippets_demo/s_image_floating.png</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_picture.jpg</field>
         </record>
         <record id="website.s_banner_default_image" model="ir.attachment">
             <field name="public" eval="True"/>
-            <field name="name">Slider Snippet - Default Image</field>
-            <field name="datas_fname">s_banner_default_image.png</field>
+            <field name="name">Banner Snippet - Default Image</field>
+            <field name="datas_fname">s_banner_default_image.jpg</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/snippets_demo/s_banner.png</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_banner.jpg</field>
         </record>
-        <record id="website.s_big_picture_default_image" model="ir.attachment">
+        <record id="website.s_parallax_default_image" model="ir.attachment">
             <field name="public" eval="True"/>
-            <field name="name">Big Image Snippet - Default Image</field>
-            <field name="datas_fname">s_big_picture_default_image.png</field>
+            <field name="name">Parallax Snippet - Default Image</field>
+            <field name="datas_fname">s_parallax_default_image.jpg</field>
             <field name="type">url</field>
-            <field name="url">/website/static/src/img/snippets_demo/s_big_picture.png</field>
+            <field name="url">/website/static/src/img/snippets_demo/s_parallax.jpg</field>
         </record>
         <record id="website.s_reference_demo_image_1" model="ir.attachment">
             <field name="public" eval="True"/>
diff --git a/addons/website/static/src/img/blocks/block_banner.png b/addons/website/static/src/img/blocks/block_banner.png
deleted file mode 100644
index b9b188d144af80ee5128918e4a7a8d0cabc85150..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_banner.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_big_picture.png b/addons/website/static/src/img/blocks/block_big_picture.png
deleted file mode 100644
index 633d1e5326d6f0735d77a848208e2ffc4ea93993..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_big_picture.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_button.png b/addons/website/static/src/img/blocks/block_button.png
deleted file mode 100644
index 69b7d72275b77dec81dc28aa4cbaaccc7f2079fe..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_button.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_column.png b/addons/website/static/src/img/blocks/block_column.png
deleted file mode 100644
index c739ea7cdb96ef5fd7a070eb3c187caa37a88e1a..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_column.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_company_team.png b/addons/website/static/src/img/blocks/block_company_team.png
deleted file mode 100644
index cb21ff00357217fb45bfa8d2f9d17e82cd8ca9a1..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_company_team.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_comparison.png b/addons/website/static/src/img/blocks/block_comparison.png
deleted file mode 100644
index 6bfc5fa85dc8fad689528ba75981cb9c7e140a2e..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_comparison.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_faq.png b/addons/website/static/src/img/blocks/block_faq.png
deleted file mode 100644
index a8106012c5397c99e74b4a7c5a6df8d69abbd318..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_faq.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_feature_grid.png b/addons/website/static/src/img/blocks/block_feature_grid.png
deleted file mode 100644
index fd4da482cc4f766ed6f7e292317a720660167a24..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_feature_grid.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_features.png b/addons/website/static/src/img/blocks/block_features.png
deleted file mode 100644
index cf74f2ec8d9e12e4935dd9dcbb0bf15dcf82b054..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_features.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_image_gallery.png b/addons/website/static/src/img/blocks/block_image_gallery.png
deleted file mode 100644
index 0db13b1653a902ca43ce7bacaf5f1a279f16dbe5..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_image_gallery.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_image_text.png b/addons/website/static/src/img/blocks/block_image_text.png
deleted file mode 100644
index ac4c9504781b4fcd22fee62b8e7ce9ee3b7d2dca..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_image_text.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_jumbotron.png b/addons/website/static/src/img/blocks/block_jumbotron.png
deleted file mode 100644
index 532de528e7de86d662794905c9ed17ee2856a582..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_jumbotron.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_local_event.png b/addons/website/static/src/img/blocks/block_local_event.png
deleted file mode 100644
index a620d532344d175bfe48563d4265a55844215de2..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_local_event.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_panel.png b/addons/website/static/src/img/blocks/block_panel.png
deleted file mode 100644
index 1551672003b93f80d4115026f2409fc8cb4dad6a..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_panel.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_parallax.png b/addons/website/static/src/img/blocks/block_parallax.png
deleted file mode 100644
index 82326ba60b3a19dca763094b98bee002266ec63f..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_parallax.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_portfolio.png b/addons/website/static/src/img/blocks/block_portfolio.png
deleted file mode 100644
index 6c75c38afc80a53c303bc7d980a98532217c02c9..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_portfolio.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_quote.png b/addons/website/static/src/img/blocks/block_quote.png
deleted file mode 100644
index c2ba69f9c9393a5b0b5611e36158d0942a768c8a..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_quote.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_quotes_slider.png b/addons/website/static/src/img/blocks/block_quotes_slider.png
deleted file mode 100644
index fce35ba87e1fac1782d489e8e04ca34689f091c4..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_quotes_slider.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_references.png b/addons/website/static/src/img/blocks/block_references.png
deleted file mode 100644
index 19b3ec663fae8a2f5cb73bb9c274c90d6d174e07..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_references.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_share.png b/addons/website/static/src/img/blocks/block_share.png
deleted file mode 100644
index 6fd9f8856dbec759dfe6c1bb43846e90081ee577..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_share.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_slider.png b/addons/website/static/src/img/blocks/block_slider.png
deleted file mode 100644
index 24d62fb4560ed673d5400d177e6446e32c4be847..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_slider.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_surprise.png b/addons/website/static/src/img/blocks/block_surprise.png
deleted file mode 100644
index c7029bf953d268b1791224224bd95b9dee043638..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_surprise.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_table.png b/addons/website/static/src/img/blocks/block_table.png
deleted file mode 100644
index d7123e6086edc7c16393091ca7bfb8d846d33b82..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_table.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_text_block.png b/addons/website/static/src/img/blocks/block_text_block.png
deleted file mode 100644
index b12b7d305754a889a9e0d973b305e3df57c13f98..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_text_block.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_text_image.png b/addons/website/static/src/img/blocks/block_text_image.png
deleted file mode 100644
index 12ec385ae51cec3d84e8fdd7892b565e28347a5c..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_text_image.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_three_columns.png b/addons/website/static/src/img/blocks/block_three_columns.png
deleted file mode 100644
index 86d92234472df776d5b87f0cb97cae302fcb7f69..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_three_columns.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_title.png b/addons/website/static/src/img/blocks/block_title.png
deleted file mode 100644
index 652c067594e712cb6fe1b9069862c49b1647aab0..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_title.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/block_well.png b/addons/website/static/src/img/blocks/block_well.png
deleted file mode 100644
index a3f85239937bb52db6c8113630cc1a084866e83f..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/block_well.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/blocks-icons.png b/addons/website/static/src/img/blocks/blocks-icons.png
deleted file mode 100644
index f0840c7cef34cb9b9f49e26591338f0674690f4c..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/blocks-icons.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/button_channel_subscribe.png b/addons/website/static/src/img/blocks/button_channel_subscribe.png
deleted file mode 100644
index 204239a8e0c50a79c13c4accc0f12e769dd2a31a..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/button_channel_subscribe.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/facebook_page.png b/addons/website/static/src/img/blocks/facebook_page.png
deleted file mode 100644
index e5d22e8c035a279887d92ce876ebdff1cf0f4eaf..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/facebook_page.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/newsletter_subscribe_form.png b/addons/website/static/src/img/blocks/newsletter_subscribe_form.png
deleted file mode 100644
index 46a63ef9b0021b83e9c25c575f2cb621e09c39e1..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/newsletter_subscribe_form.png and /dev/null differ
diff --git a/addons/website/static/src/img/blocks/twitter_scroll.png b/addons/website/static/src/img/blocks/twitter_scroll.png
deleted file mode 100644
index b8d602d519a4d823ed10d2df68e6edba5e81b24a..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/blocks/twitter_scroll.png and /dev/null differ
diff --git a/addons/website/static/src/img/odoo.jpg b/addons/website/static/src/img/odoo.jpg
deleted file mode 100644
index e9c5ac231b11c17dd26dc96bffe82a90031cb46b..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/odoo.jpg and /dev/null differ
diff --git a/addons/website/static/src/img/snippets_demo/s_banner.jpg b/addons/website/static/src/img/snippets_demo/s_banner.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e71228e9ae5e564c8c38b29cfe8b2ddfebbd1d5b
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_banner.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_banner.png b/addons/website/static/src/img/snippets_demo/s_banner.png
deleted file mode 100644
index f06ccd60a51e59725c0b3e342eea4a978e3e4baa..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/snippets_demo/s_banner.png and /dev/null differ
diff --git a/addons/website/static/src/img/snippets_demo/s_big_picture.png b/addons/website/static/src/img/snippets_demo/s_big_picture.png
deleted file mode 100644
index befa6839d11e966f60f0b140c3e0586e1d622f9f..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/snippets_demo/s_big_picture.png and /dev/null differ
diff --git a/addons/website/static/src/img/snippets_demo/s_carousel_1.jpg b/addons/website/static/src/img/snippets_demo/s_carousel_1.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..18675e7fc9b813031b8ab11a42b6a90726c60025
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_carousel_1.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_carousel_2.jpg b/addons/website/static/src/img/snippets_demo/s_carousel_2.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..b342689041a08c9fab1f565fdcb4c90d82c5c376
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_carousel_2.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_carousel_3.jpg b/addons/website/static/src/img/snippets_demo/s_carousel_3.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..82c7b99c424b1794cbb3bcc8c2913ca89ee93bfd
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_carousel_3.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_cover.jpg b/addons/website/static/src/img/snippets_demo/s_cover.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..6b6934e4453fd2207bbb5dc0793231394db45598
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_cover.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_image_floating.png b/addons/website/static/src/img/snippets_demo/s_image_floating.png
deleted file mode 100644
index bacae2e67218782fd75aa982063fa1b57f503953..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/snippets_demo/s_image_floating.png and /dev/null differ
diff --git a/addons/website/static/src/img/snippets_demo/s_image_text.jpg b/addons/website/static/src/img/snippets_demo/s_image_text.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..bca5e194359c267819f65928b5a1b036b0fd4ae2
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_image_text.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_image_text.png b/addons/website/static/src/img/snippets_demo/s_image_text.png
deleted file mode 100644
index 3e73973d550c177cb6838060f58d92de2eb0dd7b..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/snippets_demo/s_image_text.png and /dev/null differ
diff --git a/addons/website/static/src/img/snippets_demo/s_parallax.jpg b/addons/website/static/src/img/snippets_demo/s_parallax.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..4e8419aed5a6a85784c927712f8b14b3024b5c4f
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_parallax.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_parallax_slider.png b/addons/website/static/src/img/snippets_demo/s_parallax_slider.png
deleted file mode 100644
index 696b8680bb6d519d9e1ac6af13210ef786fd3070..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/snippets_demo/s_parallax_slider.png and /dev/null differ
diff --git a/addons/website/static/src/img/snippets_demo/s_picture.jpg b/addons/website/static/src/img/snippets_demo/s_picture.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..eb58ef41511cd5e32fad5867ee1bff49e6319b32
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_picture.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_quotes_carousel_1.jpg b/addons/website/static/src/img/snippets_demo/s_quotes_carousel_1.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..17d82a52df10bf6351538c0e47b883a9c34afe6d
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_quotes_carousel_1.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_quotes_carousel_2.jpg b/addons/website/static/src/img/snippets_demo/s_quotes_carousel_2.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..2b7dc05da02d77fe443672204e94fcb1ccffe1d6
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_quotes_carousel_2.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_text_image.jpg b/addons/website/static/src/img/snippets_demo/s_text_image.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..09721c7317f3d596845037e3a23e6d933567571d
Binary files /dev/null and b/addons/website/static/src/img/snippets_demo/s_text_image.jpg differ
diff --git a/addons/website/static/src/img/snippets_demo/s_text_image.png b/addons/website/static/src/img/snippets_demo/s_text_image.png
deleted file mode 100644
index 02a6049db1ae9b5996138d2f0551f235580f46f7..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/snippets_demo/s_text_image.png and /dev/null differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_alert.png b/addons/website/static/src/img/snippets_thumbs/s_alert.png
new file mode 100755
index 0000000000000000000000000000000000000000..b7286f714f4e12f11e4e3e8b427a67526ebdc78a
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_alert.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_banner.png b/addons/website/static/src/img/snippets_thumbs/s_banner.png
new file mode 100644
index 0000000000000000000000000000000000000000..f48f8347cac83c46e6098e711fabfd4b28bc83e5
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_banner.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_big_message.png b/addons/website/static/src/img/snippets_thumbs/s_big_message.png
new file mode 100644
index 0000000000000000000000000000000000000000..62ba39cb150ae1416c768eb140a0c877ea37f035
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_big_message.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_button.png b/addons/website/static/src/img/snippets_thumbs/s_button.png
new file mode 100755
index 0000000000000000000000000000000000000000..3fb1b920a9b07862bf5bfe6796fcab7a500feab2
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_button.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_button_channel_subscribe.png b/addons/website/static/src/img/snippets_thumbs/s_button_channel_subscribe.png
new file mode 100644
index 0000000000000000000000000000000000000000..a427f66ab3d5519f49244f446026ce7f94c784e4
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_button_channel_subscribe.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_call_to_action.png b/addons/website/static/src/img/snippets_thumbs/s_call_to_action.png
new file mode 100755
index 0000000000000000000000000000000000000000..2c62e3717db237da16df8a0eb3f262b45fa59e97
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_call_to_action.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_card.png b/addons/website/static/src/img/snippets_thumbs/s_card.png
new file mode 100755
index 0000000000000000000000000000000000000000..b577fdc8b69608b85f75aa5c235872748c852890
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_card.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_carousel.png b/addons/website/static/src/img/snippets_thumbs/s_carousel.png
new file mode 100644
index 0000000000000000000000000000000000000000..8180c838a85bbd2fa1b86b7308ecf73011ed0990
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_carousel.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_company_team.png b/addons/website/static/src/img/snippets_thumbs/s_company_team.png
new file mode 100755
index 0000000000000000000000000000000000000000..e534125a672f2ed8fdeb3f0c76ed6ccab4c4b8fe
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_company_team.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_comparison.png b/addons/website/static/src/img/snippets_thumbs/s_comparison.png
new file mode 100755
index 0000000000000000000000000000000000000000..86b49006c7c1556a3b15b5478210c93bfaa6617d
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_comparison.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_cover.png b/addons/website/static/src/img/snippets_thumbs/s_cover.png
new file mode 100644
index 0000000000000000000000000000000000000000..07e03e8becd14209de4054a4a156627edf795c5d
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_cover.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_facebook_page.png b/addons/website/static/src/img/snippets_thumbs/s_facebook_page.png
new file mode 100755
index 0000000000000000000000000000000000000000..b96111a56675bbdc826de8d7c20d631d30df1470
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_facebook_page.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_faq.png b/addons/website/static/src/img/snippets_thumbs/s_faq.png
new file mode 100755
index 0000000000000000000000000000000000000000..626d2a1f966b33a3b18724e575694d60a263ef7e
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_faq.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_features.png b/addons/website/static/src/img/snippets_thumbs/s_features.png
new file mode 100755
index 0000000000000000000000000000000000000000..379234bf0b897ff147ad40adc8a3ee26c2c5b7cb
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_features.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_features_grid.png b/addons/website/static/src/img/snippets_thumbs/s_features_grid.png
new file mode 100755
index 0000000000000000000000000000000000000000..bdb87ebaafab35595fc922ef5bf9468355c28a63
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_features_grid.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_image_gallery.png b/addons/website/static/src/img/snippets_thumbs/s_image_gallery.png
new file mode 100755
index 0000000000000000000000000000000000000000..114038bfc4689e40dd6da219e3a2619a495ccfb5
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_image_gallery.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_image_text.png b/addons/website/static/src/img/snippets_thumbs/s_image_text.png
new file mode 100755
index 0000000000000000000000000000000000000000..70a8342cf5cbd6e5ba5730b13870ee2ce2a59cd6
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_image_text.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_local_events.png b/addons/website/static/src/img/snippets_thumbs/s_local_events.png
new file mode 100644
index 0000000000000000000000000000000000000000..9b5a57ef49bdccb6cc434f547375fa4fe7469ff3
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_local_events.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.png b/addons/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.png
new file mode 100644
index 0000000000000000000000000000000000000000..5dbb236d000c644b62ba29c6345906b452d34bce
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_parallax.png b/addons/website/static/src/img/snippets_thumbs/s_parallax.png
new file mode 100644
index 0000000000000000000000000000000000000000..a38411c60208a31204ab9cf96550be60211e8b14
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_parallax.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_picture.png b/addons/website/static/src/img/snippets_thumbs/s_picture.png
new file mode 100755
index 0000000000000000000000000000000000000000..867ac877241556140b18dd70e45dde127543d2c6
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_picture.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_quotes_carousel.png b/addons/website/static/src/img/snippets_thumbs/s_quotes_carousel.png
new file mode 100644
index 0000000000000000000000000000000000000000..61a2d439c58829548f961a0a1ff5411bd9dfce99
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_quotes_carousel.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_rating.png b/addons/website/static/src/img/snippets_thumbs/s_rating.png
new file mode 100755
index 0000000000000000000000000000000000000000..0ff60dc182ef64004b50b5bd9333a40d0559e949
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_rating.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_references.png b/addons/website/static/src/img/snippets_thumbs/s_references.png
new file mode 100755
index 0000000000000000000000000000000000000000..522cfc0135e2937a284abadfea0013a17fa05397
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_references.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_separator.png b/addons/website/static/src/img/snippets_thumbs/s_separator.png
new file mode 100755
index 0000000000000000000000000000000000000000..03e69f2352a35ecf8bedcbaa09ed724e626c36a2
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_separator.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_share.png b/addons/website/static/src/img/snippets_thumbs/s_share.png
new file mode 100755
index 0000000000000000000000000000000000000000..b1a7431d0b1a815e26e46369f2f348ede5542679
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_share.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_tabs.png b/addons/website/static/src/img/snippets_thumbs/s_tabs.png
new file mode 100755
index 0000000000000000000000000000000000000000..fd4f5e31951790f5b80a454407523d64f826a378
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_tabs.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_text_block.png b/addons/website/static/src/img/snippets_thumbs/s_text_block.png
new file mode 100755
index 0000000000000000000000000000000000000000..1c1bd07ef0e72b3a8ede236fb82eb4d230209c11
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_text_block.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_text_image.png b/addons/website/static/src/img/snippets_thumbs/s_text_image.png
new file mode 100755
index 0000000000000000000000000000000000000000..accbf428310df155e5c30c71a81c91cd22e9501f
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_text_image.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_three_columns.png b/addons/website/static/src/img/snippets_thumbs/s_three_columns.png
new file mode 100755
index 0000000000000000000000000000000000000000..72ec60a8dfe217ba74be16025740aa502e8022ae
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_three_columns.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_title.png b/addons/website/static/src/img/snippets_thumbs/s_title.png
new file mode 100755
index 0000000000000000000000000000000000000000..c9ef38ecd37ce5790eeddd5bff0834cf108a82a5
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_title.png differ
diff --git a/addons/website/static/src/img/snippets_thumbs/s_twitter_scroll.png b/addons/website/static/src/img/snippets_thumbs/s_twitter_scroll.png
new file mode 100644
index 0000000000000000000000000000000000000000..26ab0370793ada1b63bae973084808504ad6aace
Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_twitter_scroll.png differ
diff --git a/addons/website/static/src/img/website_planner_clean.png b/addons/website/static/src/img/website_planner_clean.png
deleted file mode 100644
index 53a9b266fb88e084e70815e31a8c0e78a8536b49..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/website_planner_clean.png and /dev/null differ
diff --git a/addons/website/static/src/img/website_planner_footer.png b/addons/website/static/src/img/website_planner_footer.png
deleted file mode 100644
index 4d46a672d30e36c43b75352052ef0a4400579047..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/website_planner_footer.png and /dev/null differ
diff --git a/addons/website/static/src/img/website_planner_menu.png b/addons/website/static/src/img/website_planner_menu.png
deleted file mode 100644
index 6ba402262f6de1c74251e44c8847833bb575c00f..0000000000000000000000000000000000000000
Binary files a/addons/website/static/src/img/website_planner_menu.png and /dev/null differ
diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index 5a31ff943db73e955a0185f5149dbc9f2e01d4b6..f084ecb11fc42964208d157bf950253c2de909f0 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -573,7 +573,7 @@ registry.parallax = Animation.extend({
 });
 
 registry.share = Animation.extend({
-    selector: '.oe_share',
+    selector: '.s_share, .oe_share', // oe_share for compatibility
 
     /**
      * @override
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index f9004b421e173a166a5ea71f6f93a295b2d75384..a53c402dbb12de6e04fd00a7fd2062c071f9f6ef 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -125,7 +125,7 @@ options.registry.carousel = options.Class.extend({
             self.trigger_up('option_update', {
                 optionNames: ['background', 'background_position', 'colorpicker', 'sizing_y'],
                 name: 'target',
-                data: self.$target.find('.item.active'),
+                data: self.$target.find('.carousel-item.active'),
             });
         });
 
@@ -167,7 +167,7 @@ options.registry.carousel = options.Class.extend({
      */
     cleanForSave: function () {
         this._super.apply(this, arguments);
-        this.$target.find('.item').removeClass('next prev left right active')
+        this.$target.find('.carousel-item').removeClass('next prev left right active')
             .first().addClass('active');
         this.$target.find('.carousel-indicators').find('li').removeClass('active').html('')
             .first().addClass('active');
@@ -185,12 +185,12 @@ options.registry.carousel = options.Class.extend({
      */
     addSlide: function (previewMode) {
         var self = this;
-        var cycle = this.$inner.find('.item').length;
-        var $active = this.$inner.find('.item.active, .item.prev, .item.next').first();
+        var cycle = this.$inner.find('.carousel-item').length;
+        var $active = this.$inner.find('.carousel-item.active, .carousel-item.prev, .carousel-item.next').first();
         var index = $active.index();
         this.$('.carousel-control-prev, .carousel-control-next, .carousel-indicators').removeClass('d-none');
         this.$indicators.append('<li data-target="#' + this.id + '" data-slide-to="' + cycle + '"></li>');
-        var $clone = this.$('.item:first').clone(true);
+        var $clone = this.$('.carousel-item:first').clone(true);
         $clone.removeClass('active').insertAfter($active);
         _.defer(function () {
             self.$target.carousel().carousel(++index);
@@ -209,7 +209,7 @@ options.registry.carousel = options.Class.extend({
 
         var self = this;
 
-        var $items = this.$inner.find('.item');
+        var $items = this.$inner.find('.carousel-item');
         var cycle = $items.length - 1;
         var $active = $items.filter('.active');
         var index = $active.index();
@@ -801,7 +801,7 @@ options.registry.collapse = options.Class.extend({
         $tab.data('parent', '#'+tablist_id);
 
         // link to the collapse
-        var $panel = this.$target.find('.panel-collapse');
+        var $panel = this.$target.find('.collapse');
         var panel_id = $panel.attr('id');
         if (!panel_id) {
             while ($('#'+(panel_id = 'myCollapseTab' + time)).length) {
@@ -829,7 +829,7 @@ options.registry.gallery = options.Class.extend({
         // Make sure image previews are updated if images are changed
         this.$target.on('save', 'img', function (ev) {
             var $img = $(ev.currentTarget);
-            var index = self.$target.find('.item.active').index();
+            var index = self.$target.find('.carousel-item.active').index();
             self.$('.carousel:first li[data-target]:eq(' + index + ')')
                 .css('background-image', 'url(' + $img.attr('src') + ')');
         });
diff --git a/addons/website/static/src/js/tours/banner.js b/addons/website/static/src/js/tours/banner.js
index a0926a721f31786799131dca26b638c3f52d4d21..8cd65066baf073550a558292821d204e10f87a7d 100644
--- a/addons/website/static/src/js/tours/banner.js
+++ b/addons/website/static/src/js/tours/banner.js
@@ -21,18 +21,18 @@ tour.register("banner", {
     position: "bottom",
     run: "drag_and_drop #wrap",
 }, {
-    trigger: "#wrapwrap .s_text_block_image_fw h2",
+    trigger: "#wrapwrap .s_cover h1",
     content: _t("<b>Click on a text</b> to start editing it. <i>It's that easy to edit your content!</i>"),
     position: "left",
     width: 150,
     run: "text",
 }, {
     trigger: ".oe_overlay_options .oe_options",
-    extra_trigger: "#wrapwrap .s_text_block_image_fw h2:not(:containsExact(\"Headline\"))",
+    extra_trigger: "#wrapwrap .s_cover h1:not(:containsExact(\"Catchy Headline\"))",
     content: _t("Customize any block through this menu. Try to change the background of the banner."),
     position: "bottom",
 }, {
-    trigger: "#snippet_structure .oe_snippet:eq(3) .oe_snippet_thumbnail",
+    trigger: "#snippet_structure .oe_snippet:eq(6) .oe_snippet_thumbnail",
     content: _t("Drag another block in your page, below the cover."),
     position: "bottom",
     run: "drag_and_drop #wrap",
diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss
index bb22156ce9e767ed4591da496af0cb85a7d209d0..0e28e5aa1faf831abdb778dfc8d960c456464a09 100644
--- a/addons/website/static/src/scss/bootstrap_overridden.scss
+++ b/addons/website/static/src/scss/bootstrap_overridden.scss
@@ -7,3 +7,5 @@ $headings-color: color('h1');
 
 $font-family-sans-serif: nth($o-theme-fonts, $o-theme-font-number);
 $headings-font-family: nth($o-theme-fonts, $o-theme-headings-font-number);
+
+$input-btn-border-width: 2px;
\ No newline at end of file
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 7bf2000be77a69a5b2f3fb3ea85535f35b48ffac..edbf49157f15ae8e9ffd1491e81dddfb899f0030 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -20,10 +20,6 @@ $-theme-font: nth($o-theme-font-urls, $o-theme-font-number);
     background-attachment: fixed;
 }
 
-font[style*='background'], font[class*='bg-'] {
-    padding: 0 2px;
-}
-
 .navbar {
     @include o-bg-color(color('menu'));
 }
@@ -46,11 +42,84 @@ h6 {
     color: color('h6');
 }
 
-// Odoo image background classes
+// Texts
+font[style*='background'],
+font[class*='bg-'] {
+    padding: 2px 6px 4px;
+}
+
+// Icons
+.fa {
+    $size: 3rem;
+
+    &.rounded-circle,
+    &.rounded,
+    &.rounded-0,
+    &.rounded-leaf,
+    &.img-thumbnail,
+    &.shadow {
+        display: inline-block;
+        vertical-align: middle;
+        text-align: center;
+        // fa-1x is not ouput
+        @include size($size);
+        line-height: $size;
+        @for $i from 2 through 5 {
+            &.fa-#{$i}x {
+                @include size($size + $i);
+                line-height: $size + $i;
+            }
+        }
+        // Default, if no background-color already selected
+        background-color: $gray-100;
+    }
+    &.img-thumbnail {
+        padding: 0;
+    }
+    &.rounded-leaf {
+        border-top-left-radius: $size;
+        border-bottom-right-radius: $size;
+    }
+}
+
+// Buttons
+.btn {
+    &.flat {
+        border: 0;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        @include button-size(0.75rem, 1.5rem, ($font-size-base * .75), $btn-line-height, 0);
+        &.btn-lg { @include button-size(1rem, 2rem, ($font-size-lg * .75), $btn-line-height-lg, 0); }
+        &.btn-sm { @include button-size(.5rem, 1rem, ($font-size-sm * .75), $btn-line-height-sm, 0); }
+        &.btn-xs { @include button-size(.25rem, .5rem, ($font-size-base * .5), $btn-line-height-sm, 0); }
+    }
+    &.rounded-circle {
+        border-radius: 100px !important;
+        @include button-size(0.45rem, 1.35rem, $font-size-base, $btn-line-height, 30px);
+        &.btn-lg { @include button-size(.6rem, 1.8rem, $font-size-lg, $btn-line-height-lg, 30px); }
+        &.btn-sm { @include button-size(.3rem, .9rem, $font-size-sm, $btn-line-height-sm, 30px); }
+        &.btn-xs { @include button-size(.15rem, .45rem, ($font-size-base * .75), $btn-line-height-sm, 30px); }
+    }
+}
+
+.s_btn {
+    .btn + .btn {
+        margin-left: .75rem;
+    }
+}
+
+// Blockquotes
+.blockquote {
+    font-size: 1rem;
+    footer {
+        background-color: inherit;
+    }
+}
+
+// Background Images
 .oe_img_bg {
     background-size: cover;
     background-repeat: no-repeat;
-
     &.o_bg_img_opt_contain {
         background-size: contain;
         background-position: center center;
@@ -69,15 +138,19 @@ h6 {
     }
 }
 
-// O_UL
-.o_ul_toggle_self, .o_ul_toggle_next {
+// Probably outdated
+// Lists
+.o_ul_toggle_self,
+.o_ul_toggle_next {
     display: none;
 }
+
 .o_ul_folded {
     .o_close {
         display: none!important;
     }
-    .o_ul_toggle_self, .o_ul_toggle_next {
+    .o_ul_toggle_self,
+    .o_ul_toggle_next {
         display: inline-block;
         line-height: inherit;
         float: left;
@@ -96,27 +169,20 @@ h6 {
     }
 }
 
-.carousel, .parallax, .blockquote {
-    overflow: hidden;
-}
+// Probably outdated
+// Disable fixed height
 @media (max-width: 400px) {
-    section, .parallax, .row, .hr, .blockquote {
+    section,
+    .parallax,
+    .row,
+    .hr,
+    .blockquote {
         height: auto !important;
     }
 }
 
-// "Cover" snippet
-$s-text-block-image-fw-padding: 0 30px;
-.s_text_block_image_fw {
-    .container {
-        padding: $s-text-block-image-fw-padding;
-        > .row > div {
-            padding: 30px;
-        }
-    }
-}
-
-// Table Snippet
+// Probably outdated
+// Table
 .table_desc {
     margin: 0 0 20px 0;
     width: 100%;
@@ -146,123 +212,313 @@ table.table_desc tr td {
     }
 }
 
-// Other snippet styles
-// To prevent paragraph text coming below the feature grid icon / image
-.s_feature_grid p {
-    overflow: auto;
-}
 
-.s_comparisons .card .list-group-item:not(.active) {
-    color: #666;
-}
-.s_comparisons {
-    .card small {
-        color: inherit;
+//
+// Snippets
+//
+
+// Title
+.s_title {
+    .s_title_boxed {
+        display: inline-block;
+        padding: $grid-gutter-width;
+        border: 1px solid;
+    }
+    .s_title_lines {
+        overflow: hidden;
+        &:before,
+        &:after {
+            content: "";
+            display: inline-block;
+            vertical-align: middle;
+            width: 100%;
+            border-top: 1px solid;
+            border-top-color: inherit;
+        }
+        &:before { margin: 0 $grid-gutter-width/2 0 -100%; }
+        &:after  { margin: 0 -100% 0 $grid-gutter-width/2; }
     }
-    .text-muted {
-        color: $text-muted;
+    .s_title_underlined {
+        padding-bottom: $grid-gutter-width/3;
+        border-bottom: 1px solid;
     }
-}
-
-.s_faq_collapse .container .card {
-    background-color: inherit;
-    border : 1px solid rgba(0, 0, 0, 0.15);
-    .card-body {
-        border-top: none;
-        border-bottom-left-radius: ($card-border-radius - 1);
-        border-bottom-right-radius: ($card-border-radius - 1);
+    .s_title_small_caps {
+        font-variant: small-caps;
+    }
+    .s_title_transparent {
+        opacity: .5;
+    }
+    .s_title_thin {
+        font-weight: 300;
     }
 }
 
-.s_references .img-thumbnail {
-    border: none;
-}
 
-// o_image_floating
-.o_image_floating {
-    width: 40%;
-    margin: 4px;
-    div.o_container {
-        position: relative;
+// Features Grid
+.s_features_grid {
+    &_content {
+        overflow: hidden;
+        p {
+            margin-bottom: 0;
+        }
     }
-
-    &.o_margin_s {
-        margin-bottom: 4px;
+    &_icon {
+        float: left;
+        margin-right: $grid-gutter-width/2;
     }
-    &.o_margin_s.float-right {
-        margin-left: 8px;
+}
+
+
+// Alert
+.s_alert {
+    margin: $grid-gutter-width/2 0;
+    border: 1px solid;
+    border-radius: 0.25rem;
+    p, ul, ol {
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
-    &.o_margin_s.float-left {
-        margin-right: 8px;
+    &_sm {
+        padding: $grid-gutter-width/3;
+        font-size: $font-size-sm;
     }
-    &.o_margin_m {
-        margin-bottom: 8px;
+    &_md {
+        padding: $grid-gutter-width/2;
+        font-size: $font-size-base;
     }
-    &.o_margin_m.float-right {
-        margin-left: 12px;
+    &_lg {
+        padding: $grid-gutter-width;
+        font-size: $font-size-lg;
     }
-    &.o_margin_m.float-left {
-        margin-right: 12px;
+    &_icon {
+        float: left;
+        margin-right: 10px;
     }
-    &.o_margin_l {
-        margin-bottom: 12px;
+    &_content {
+        overflow: hidden;
     }
-    &.o_margin_l.float-right {
-        margin-left: 16px;
+}
+
+// Three columns
+
+.s_three_columns {
+    .align-items-stretch .card {
+        height: 100%;
     }
-    &.o_margin_l.float-left {
-        margin-right: 16px;
+}
+
+
+// Comparisons
+.s_comparisons {
+    .card-body {
+        .card-title {
+            margin: 0;
+        }
+        .s_comparisons_currency,
+        .s_comparisons_price,
+        .s_comparisons_decimal {
+            display: inline-block;
+            vertical-align: middle;
+        }
+        .s_comparisons_currency,
+        .s_comparisons_decimal {
+            font-size: 80%;
+        }
+        .s_comparisons_price {
+            font-size: 200%;
+        }
     }
-    &.o_margin_xl {
-        margin-bottom: 24px;
+    .list-group-item {
+        color: $body-color;
     }
-    &.o_margin_xl.float-right {
-        margin-left: 32px;
+}
+
+
+// FAQ
+.s_faq_collapse {
+    .accordion .card {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+        margin: 5px 0;
+        .card-header {
+            cursor: pointer;
+            display: inline-block;
+            width: 100%;
+            padding: .5em 0;
+            border-radius: 0;
+            outline: none;
+            &:before {
+                content:'\f056';
+                font-family: 'FontAwesome';
+                display: inline-block;
+                margin: 0 .5em 0 .75em;
+                color: $gray-600;
+            }
+            &.collapsed:before {
+                content:'\f055';
+                font-family: 'FontAwesome';
+            }
+            &:hover,
+            &:focus {
+                text-decoration: none;
+            }
+        }
+        .card-body {
+            padding: 1em 2.25em;
+        }
     }
-    &.o_margin_xl.float-left {
-        margin-right: 32px;
+    .card-body p:last-child,
+    .card-body ul:last-child {
+        margin-bottom: 0;
     }
 }
 
-// carousel
-.carousel-inner {
-    height: 100%;
-    .item {
-        height: 100%;
-    }
-    .carousel-control-prev, .carousel-control-next {
+
+// References
+.s_references .img-thumbnail {
+    border: none;
+}
+
+// Carousel
+.s_carousel,
+.s_quotes_carousel {
+
+    // Controls
+    .carousel-control-prev,
+    .carousel-control-next {
         cursor: pointer;
-        span {
-            top: 50%;
-            position: absolute;
-            margin-top: -8px;
+        width: 8%;
+        opacity: 1;
+    }
+    .carousel-control-prev { justify-content: flex-start; }
+    .carousel-control-next { justify-content: flex-end; }
+    .carousel-control-prev-icon,
+    .carousel-control-next-icon {
+        @include size(auto);
+        background-image: none;
+        color: $body-color;
+        &:before {
+            font-family: "FontAwesome";
+            display: inline-block;
+            background-color: #fff;
         }
     }
-}
-.carousel {
-    .carousel-control-prev {
-        left: -10px;
-        * {
-            position: absolute;
-            top: 50%;
-            z-index: 5;
-            right: 50%;
+    // Content
+    .carousel-inner {
+        overflow: hidden;
+        height: 100%;
+        .carousel-item {
+            height: 100%;
         }
     }
-    .carousel-control-next {
-        right: -10px;
-        * {
-            position: absolute;
-            top: 50%;
-            z-index: 5;
-            left: 50%;
+    // Indicators
+    .carousel-indicators li:hover:not(.active) {
+        background-color: rgba(255,255,255,.8);
+    }
+
+    // Default
+    &.s_carousel_default {
+        // Controls - chevron
+        .carousel-control-prev-icon:before { content: "\f053"; margin-left: 1.5rem; }
+        .carousel-control-next-icon:before { content: "\f054"; margin-right: 1.5rem; }
+        .carousel-control-prev-icon:before,
+        .carousel-control-next-icon:before {
+            background-color: rgba(0,0,0,0);
+            font-size: 2rem;
+            color: #fff;
+            text-shadow: $box-shadow-sm;
+        }
+        // Indicators
+        .carousel-indicators li {
+            height: .5rem;
+            box-shadow: $box-shadow-sm;
+            border-radius: 2px;
+        }
+    }
+
+    // Border
+    &.s_carousel_bordered {
+        border: 2rem solid rgba(0,0,0,0);
+        // Controls - caret
+        .carousel-control-prev-icon:before { content: "\f0d9"; }
+        .carousel-control-next-icon:before { content: "\f0da"; }
+        .carousel-control-prev-icon:before,
+        .carousel-control-next-icon:before {
+            @include size(2rem, 6rem);
+            line-height: 6rem;
+            font-size: 1.5rem;
+        }
+        // Indicators
+        .carousel-indicators li {
+            @include size(3rem, 1rem);
+        }
+    }
+
+    // Circle
+    &.s_carousel_rounded {
+        // Container
+        // .carousel-inner {
+            // border-top-left-radius: 10rem;
+            // border-bottom-right-radius: 10rem;
+        // }
+        // Controls - arrow
+        .carousel-control-prev { margin-left: 1.5rem; }
+        .carousel-control-next { margin-right: 1.5rem; }
+        .carousel-control-prev-icon:before { content: "\f060"; }
+        .carousel-control-next-icon:before { content: "\f061"; }
+        .carousel-control-prev-icon:before,
+        .carousel-control-next-icon:before {
+            @include size(4rem);
+            line-height: 4rem;
+            border-radius: 50%;
+            font-size: 1.25rem;
+        }
+        // Indicators
+        .carousel-indicators li {
+            @include size(1rem);
+            border-radius: 50%;
+        }
+    }
+
+    // Boxed
+    &.s_carousel_boxed {
+        @include make-container();
+        @include make-container-max-widths();
+        .carousel-item {
+            padding: 0 1rem;
+        }
+        // Controls - angle
+        .carousel-control-prev,
+        .carousel-control-next {
+            align-items: flex-end;
+            margin-bottom: 1.25rem;
+        }
+        .carousel-control-prev { margin-left: 3rem; }
+        .carousel-control-next { margin-right: 3rem; }
+        .carousel-control-prev-icon:before { content: "\f104"; }
+        .carousel-control-next-icon:before { content: "\f105"; }
+        .carousel-control-prev-icon:before,
+        .carousel-control-next-icon:before {
+            @include size(2rem);
+            line-height: 2rem;
+            font-size: 1.25rem;
+        }
+        // Indicators
+        .carousel-indicators li {
+            @include size(1rem);
+            &:hover:not(.active) {
+                background-color: rgba(255,255,255,.8);
+            }
         }
     }
 }
-.quotecarousel {
-    padding-bottom: 16px;
-}
-div.carousel .container {
+
+
+.carousel .container {
+    .carousel-img img {
+        max-height: 95%;
+        padding: 10px;
+    }
     > .carousel-caption {
         @include o-position-absolute($right: 50%, $left: 50%);
         bottom: 20px;
@@ -279,7 +535,7 @@ div.carousel .container {
         max-height: 90%;
         margin: 0 auto;
     }
-    .item.text_image .container {
+    .carousel-item.text_image .container {
         > .carousel-caption {
             left: 10%;
             > div {
@@ -293,7 +549,7 @@ div.carousel .container {
             left: 50%;
         }
     }
-    .item.image_text .container {
+    .carousel-item.image_text .container {
         > .carousel-caption {
             right: 10%;
             > div {
@@ -307,7 +563,7 @@ div.carousel .container {
             left: 10%;
         }
     }
-    .item.text_only .container {
+    .carousel-item.text_only .container {
         > .carousel-caption {
             left: 10%;
             right: 10%;
@@ -326,6 +582,41 @@ div.carousel .container {
     }
 }
 
+
+// Quotes Slider
+.s_quotes_carousel {
+    blockquote {
+        padding: $grid-gutter-width;
+        margin-bottom: 0;
+        .s_quotes_carousel_icon {
+            position: absolute;
+            top: 0;
+            left: -3rem;
+        }
+        img {
+            max-width: 40px;
+            margin-right: 5px;
+            border-radius: 50%;
+        }
+        footer {
+            background-color: transparent;
+            &:before {
+                content:"";
+            }
+        }
+    }
+}
+
+// Company Team
+.s_company_team {
+    @include media-breakpoint-down(md) {
+        img {
+            max-width: 50%;
+        }
+    }
+}
+
+
 // Gallery
 .o_gallery {
     &.o_grid, &.o_masonry {
@@ -358,7 +649,6 @@ div.carousel .container {
                 padding: 0 15px;
             }
         }
-
         &.size-auto .row {
             height: auto;
         }
@@ -429,21 +719,19 @@ div.carousel .container {
         max-width: none;
     }
 }
-.o_gallery, .modal-body {
+.o_gallery,
+.modal-body {
     &.o_slideshow {
         .carousel {
             height: 100%;
-
             .item {
                 padding-bottom: 64px;
             }
-
             img {
                 max-height: 100%;
                 max-width: 100%;
                 margin: auto;
             }
-
             ul.carousel-indicators {
                 display: block;
                 height: auto;
@@ -451,7 +739,6 @@ div.carousel .container {
                 border-width: 0;
                 position: absolute;
                 bottom: 0;
-
                 > * {
                     list-style-image: none;
                     display: inline-block;
@@ -464,7 +751,6 @@ div.carousel .container {
                     background-size: cover;
                     background-color: #fff;
                     border-radius: 0;
-
                     &:not(.active) {
                         opacity: 0.8;
                         -webkit-filter: grayscale(100%);
@@ -472,53 +758,31 @@ div.carousel .container {
                         filter: gray;
                         filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
                     }
-
                     &:first-child {
                         margin-left: 0;
                     }
                 }
             }
-
-            .carousel-control-next, .carousel-control-prev {
-                background-image: none;
-                background-color: transparent;
+            .carousel-control {
+                &.right, &.left {
+                    background-image: none;
+                    background-color: transparent;
+                }
             }
         }
     }
 }
 
-div.carousel {
-    .carousel-indicators li {
-        box-shadow: 0 0 0 1px grey;
-        &:hover:not(.active) {
-            background-color: gray('white-50');
-        }
-    }
-    span.carousel-img img,
-    div.carousel-content {
-        max-height: 95%;
-        padding: 10px;
-    }
-    .carousel-control-prev, .carousel-control-next {
-        cursor: pointer;
-    }
-}
 
-// Parallax Theme
+// Parallax
 .parallax {
     position: relative;
+    overflow: hidden;
     z-index: 0;
-
-    .oe_structure {
-        > :first-child {
-            margin-top: 32px;
-        }
-        > :last-child {
-            margin-bottom: 32px;
-        }
+    > * {
+        position: relative;
     }
-
-    > .s_parallax_bg {
+    > .s_parallax_bg, > .s_parallax_filter {
         @include o-position-absolute(0, 0, 0, 0);
         background-size: cover;
         background-attachment: scroll;
@@ -529,24 +793,142 @@ div.carousel {
     }
 }
 
-// Company Team
-.s_company_team {
-    @include media-breakpoint-down(md) {
-        img {
-            max-width: 50%;
+
+// HR
+.s_hr {
+    line-height: 0;
+    hr {
+        padding: 0;
+        border: 0;
+        border-top-color: inherit;
+        margin: 0;
+    }
+    // Style
+    .s_hr_dashed { border-top-style: dashed; }
+    .s_hr_double { border-top-style: double; }
+    .s_hr_dotted { border-top-style: dotted; }
+    .s_hr_solid  { border-top-style: solid;  }
+    // Thickness
+    $count: 5;
+    $base-width: 1px;
+    @while $count > 0 {
+        .s_hr_#{$base-width * $count} {
+            border-top-width: $base-width * $count;
+        }
+        $count: $count - 1;
+    }
+}
+
+
+// Card
+.s_card {
+    margin: $grid-gutter-width/2 0;
+    .card-body {
+        // color: initial;
+        p, ul, ol {
+            &:last-child {
+                margin-bottom: 0;
+            }
         }
     }
 }
 
+
+// Share
+.s_share {
+    > * {
+        display: inline-block;
+        vertical-align: middle;
+    }
+    .s_share_title {
+        margin: 0 .4rem 0 0;
+    }
+    > a + a {
+        margin-left: .4rem;
+    }
+    .s_share_facebook {
+        &, &:hover, &:focus { color: #3b5998; }
+    }
+    .s_share_twitter {
+        &, &:hover, &:focus { color: #1da1f2; }
+    }
+    .s_share_linkedin {
+        &, &:hover, &:focus { color: #0077b5; }
+    }
+    .s_share_google {
+        &, &:hover, &:focus { color: #db4437; }
+    }
+}
+
+
+// Rating
+.s_rating {
+    $star: "\f005";
+    $star-o: "\f006";
+    $circle: "\f111";
+    $circle-o: "\f10c";
+    $heart: "\f004";
+    $heart-o: "\f08a";
+    @mixin s_rating_generate_icons($off, $on) {
+        .fa:before {
+            content: $off;
+        }
+        @for $counter from 5 to 0 {
+            &.s_rating_#{$counter} {
+                .fa:nth-of-type(-n+#{$counter}):before {
+                    content: $on;
+                }
+            }
+        }
+    }
+    > .s_rating_stars   { @include s_rating_generate_icons($star-o, $star);     }
+    > .s_rating_squares { @include s_rating_generate_icons($circle-o, $circle); }
+    > .s_rating_hearts  { @include s_rating_generate_icons($heart-o, $heart);   }
+    > .s_rating_bar {
+        .fa {
+            display: none;
+        }
+        .s_rating_bar {
+            display: flex;
+            height: $progress-height;
+            background-color: $gray-300;
+            &:before {
+                content: "";
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                @include transition($progress-bar-transition);
+                @include gradient-striped();
+                background-size: $progress-height $progress-height;
+                background-color: theme-color('primary');
+                animation: progress-bar-stripes $progress-bar-animation-timing;
+            }
+        }
+        @for $counter from 5 to 0 {
+            &.s_rating_#{$counter} {
+                .s_rating_bar:before {
+                    width: percentage($counter/5);
+                }
+            }
+        }
+    }
+    > .s_rating_1x { .fa { font-size: 1em; }; }
+    > .s_rating_2x { .fa { font-size: 2em; }; }
+    > .s_rating_3x { .fa { font-size: 3em; }; }
+}
+
+//
+// Layout
+//
+
+// Header
 #wrapwrap .o_header_affix {
     @include o-position-absolute(0, 0, auto, 0);
     position: fixed;
     z-index: $zindex-modal - 20;
     background: $light;
-
     margin-top: -200px;
     transition: margin-top 500ms ease 0s;
-
     &.affixed {
         margin-top: 0px;
     }
@@ -555,6 +937,7 @@ div.carousel {
     top: $o-navbar-height;
 }
 
+// Navbar
 .navbar .o_extra_menu_items.show > ul {
     > li {
         + li {
@@ -578,7 +961,7 @@ div.carousel {
     }
 }
 
-// COPYRIGHT
+// Copyright
 .o_footer_copyright {
     padding: 8px;
     .js_language_selector {
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 7dd59e3499dd5c28d092c2b393fef25a111f5a3b..3935a81fc1a6e1809d66f6dc1f45069074042ba6 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -1,171 +1,170 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-<template id="s_cover" name="Cover">
-    <section class="s_text_block_image_fw oe_img_bg oe_custom_bg pt64 pb64" style="background-image: url(/web/image/website.s_cover_default_image); background-position: 50% 100%">
+
+<template id="s_title" name="Title">
+    <section class="pt32 pb32">
         <div class="container">
-            <div class="row">
-                <div class="col-lg-6 bg-black-25 pt32 pb32">
-                    <h2 style="font-size:62px">Headline</h2>
-                    <h4>With a great subtitle</h4>
-                    <p>Write one or two paragraphs describing your product, services or a specific feature. To be successful your content needs to be useful to your readers.</p>
+            <div class="row s_nb_column_fixed">
+                <div class="col-lg-12 s_title pt16 pb16" style="text-align: center;">
+                    <h1 class="s_title_default"><font style="font-size: 62px;">Your Site Title</font></h1>
                 </div>
             </div>
         </div>
     </section>
 </template>
 
-<template id="s_banner" name="Slider">
-    <div id="myCarousel" class="carousel slide s_banner" data-interval="10000">
-        <!-- Indicators -->
-        <ol class="carousel-indicators d-none">
-            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-        </ol>
-        <div class="carousel-inner">
-            <div class="carousel-item oe_img_bg active bg-alpha pt48 pb48">
-                <div class="container">
-                    <div class="row content">
-                        <div class="carousel-content col-lg-4 offset-lg-1 mt64">
-                            <h2>Your Slide Title</h2>
-                            <h4>Click to customize this text</h4>
-                            <p><a role="button" href="/contactus" class="btn btn-warning btn-large">Contact us</a></p>
-                        </div>
-                        <div class="carousel-img col-lg-6 offset-lg-1 d-none d-lg-block">
-                            <img class="img-fluid" src="/web/image/website.s_banner_default_image" alt="Slider Odoo Image"/>
-                        </div>
-                    </div>
+<template id="s_cover" name="Cover">
+    <section class="s_cover parallax oe_img_bg oe_custom_bg pt96 pb96" data-scroll-background-ratio="1">
+        <span class="s_parallax_bg" style="background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;"/>
+        <span class="s_parallax_filter"/>
+        <div class="container">
+            <div class="row s_nb_column_fixed">
+                <div class="col-lg-12 s_title" data-name="Title">
+                    <h1 class="s_title_thin" style="font-size: 62px; text-align: center;">Catchy Headline</h1>
+                </div>
+                <div class="col-lg-12 s_text pt16 pb16" data-name="Text">
+                    <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>
+                </div>
+                <div class="col-lg-12 s_btn text-center pt16 pb16" data-name="Buttons">
+                    <a href="/aboutus" class="btn btn-delta rounded-circle">About us</a>
+                    <a href="/contactus" class="btn btn-primary rounded-circle">Contact us</a>
                 </div>
             </div>
         </div>
-        <div class="carousel-control-prev d-none" data-target="#myCarousel" data-slide="prev" style="width: 10%" role="img" aria-label="Previous" title="Previous"><i class="fa fa-chevron-left"></i></div>
-        <div class="carousel-control-next d-none" data-target="#myCarousel" data-slide="next" style="width: 10%" role="img" aria-label="Next" title="Next"><i class="fa fa-chevron-right"></i></div>
-    </div>
+    </section>
 </template>
 
-<template id="s_text_image" name="Text-Image">
+<template id="s_text_image" name="Text - Image">
     <section class="s_text_image pt32 pb32">
         <div class="container">
-            <div class="row">
-                <div class="col-lg-6 mt32">
-                    <h3 style="text-align: right;">A Section Subtitle</h3>
-                    <p style="text-align: right;">
-                        Write one or two paragraphs describing your product or
-                        services.<br/>To be successful your content needs to be
-                        useful to your readers.
-                    </p><p style="text-align: right;">
-                        Start with the customer – find out what they want
-                        and give it to them.
-                    </p>
+            <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. <br/>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>
+                    <div class="s_btn text-left pt16 pb16" data-name="Buttons">
+                        <a href="#" class="btn btn-primary">Learn more</a>
+                    </div>
                 </div>
-                <div class="col-lg-6">
-                  <img class="img img-fluid float-left mb16" src="/web/image/website.s_text_image_default_image" alt="Odoo text and image block"/>
+                <div class="col-lg-6 pt16 pb16">
+                    <img src="/web/image/website.s_text_image_default_image" class="img img-fluid mx-auto" alt="Odoo • Text and Image"/>
                 </div>
             </div>
         </div>
     </section>
 </template>
 
-<template id="s_image_text" name="Image-Text">
-    <section class="s_image_text pt32 pb32">
+<template id="s_image_text" name="Image - Text">
+    <section class="s_text_image pt32 pb32">
         <div class="container">
-            <div class="row">
-                <div class="col-lg-6">
-                  <img class="img img-fluid d-block mx-auto mb16" src="/web/image/website.s_image_text_default_image"  alt="Odoo image and text block"/>
+            <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="Odoo • Image and Text"/>
                 </div>
-                <div class="col-lg-6 mt32">
-                    <h3>A Section Subtitle</h3>
-                    <p>
-                        Write one or two paragraphs describing your product,
-                        services or a specific feature. 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>
+                <div class="col-lg-6 pt16 pb16">
+                    <h2>Section Subtitle</h2>
+                    <p>Write one or two paragraphs describing your product or services. <br/>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>
+                    <div class="s_btn text-left pt16 pb16">
+                        <a href="#" class="btn btn-outline-primary">Discover more</a>
+                    </div>
                 </div>
             </div>
         </div>
     </section>
 </template>
 
-<template id="s_big_message" name="Big Message">
-    <section class="jumbotron s_big_message oe_img_bg oe_custom_bg pb32" style="background-image: url('/web/image/website.s_background_image_01');">
+<template id="s_banner" name="Banner">
+    <section class="s_banner parallax s_parallax_is_fixed oe_img_bg pt96 pb96" data-scroll-background-ratio="1">
+        <span class="s_parallax_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 0;"/>
+        <span class="s_parallax_filter"/>
         <div class="container">
-            <div class="row">
-                <div class="offset-lg-1 col-lg-8">
-                    <h1>Sell Online. Easily.</h1>
-                    <p>Write one sentence to convince visitor about your message.</p>
-                    <a role="button" class="btn btn-warning btn-lg" href="/contactus">Contact us</a>
-                </div>
-            </div>
-        </div>
+           <div class="row s_nb_column_fixed">
+               <div class="col-lg-7 jumbotron pt32 pb32" style="background-color: rgb(255, 255, 255);" data-name="Box">
+                   <div class="row">
+                       <div class="col-lg-12 s_title s_col_no_bgcolor" data-name="Title">
+                           <h1 class="s_title_thin"><font style="font-size: 62px;"><b>Sell Online.</b> Easily.</font></h1>
+                       </div>
+                       <div class="col-lg-12 pt8 pb32 s_col_no_bgcolor" data-name="Text">
+                           <p class="lead">This is a simple hero unit, a simple jumbotron-style component <br/>for calling extra attention to featured content or information.</p>
+                       </div>
+                       <div class="col-lg-12 s_btn text-left pt16 pb16" data-name="Button">
+                           <a href="#" class="btn btn-epsilon rounded-circle">Do something</a>
+                       </div>
+                   </div>
+               </div>
+           </div>
+       </div>
     </section>
 </template>
 
-<template id="s_text_block" name="Text Block">
-    <section class="s_text_block pt16 pb16">
+<template id="s_text_block" name="Text block">
+    <section class="s_text_block pt32 pb32">
         <div class="container">
-            <h2 class="text-center">A Great Headline</h2>
-            <h3 class="text-center text-muted">A good subtitle</h3>
             <div class="row">
-                <div class="col-lg-12">
-                    <p>
-                        A great way to catch your reader's attention is to tell a story.
-                        Everything you consider writing can be told as a story.
-                    </p><p>
-                        <b>Great stories have personality.</b> Consider telling
-                        a great story that provides personality. Writing a story
-                        with personality for potential clients will assists 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>
-                        <b>Great stories are for everyone even when only written for
-                        just one person.</b> If you try to write with a wide general
-                        audience in mind, your story will ring false and be bland.
-                        No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.
-                    </p>
+                <div class="col-lg-10 offset-lg-1 pt32 pb32">
+                    <p class="lead">A great way to catch your reader's attention is to tell a story. <br/>Everything you consider writing can be told as a story.</p>
+                    <p><b>Great stories have personality.</b> Consider telling a great story that provides personality. Writing a story with personality for potential clients will assists 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><b>Great stories are for everyone even when only written for just one person.</b> If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
                 </div>
             </div>
         </div>
     </section>
 </template>
 
-<template id="s_title" name="Title">
-    <section class="s_title">
+<template id="s_features" name="Features">
+    <section class="s_features pt32 pb32">
         <div class="container">
             <div class="row">
-                <div class="col-lg-12">
-                    <h1 class="text-center">Your Website Title</h1>
-                    <h3 class="text-center text-muted">And a great subtitle too</h3>
+                <div class="col-lg-4 pt32 pb32 text-center">
+                    <i class="fa fa-3x fa-gear rounded-circle bg-gamma 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-epsilon 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-leaf bg-primary m-3"/>
+                    <h3>Third Feature</h3>
+                    <p>A small explanation of this great <br/>feature, in clear words.</p>
                 </div>
             </div>
         </div>
     </section>
 </template>
 
-<template id="s_features" name="Features">
-    <section class="s_features pt16 pb16">
+<template id="s_three_columns" name="Three Columns">
+    <section class="s_three_columns pt32 pb32" style="background-color: rgb(239, 239, 239);">
         <div class="container">
-            <div class="row">
-                <div class="col-lg-4 text-center">
-                    <span class="fa fa-suitcase fa-5x" role="img" aria-label="Suitcase" title="Suitcase"></span>
-                    <div>
-                        <h3 class="mt8 mb0">First Feature</h3>
-                        <p class="text-muted">Tell what's the value for the<br/>customer for this feature.</p>
+            <div class="row d-flex align-items-stretch">
+                <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
+                    <div class="card">
+                        <img class="card-img-top" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
+                        <div class="card-body">
+                            <h3 class="card-title">Feature One</h3>
+                            <p class="card-text">Adapt these three columns to fit you 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 text-center">
-                    <span class="fa fa-lock fa-5x" role="img" aria-label="Lock" title="Lock"></span>
-                    <div>
-                        <h3 class="mt8 mb0">Second Feature</h3>
-                        <p class="text-muted">Write what the customer would like to know,<br/>not what you want to show.</p>
+                <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
+                    <div class="card">
+                        <img class="card-img-top" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
+                        <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 column to create a new one as a copy.</p>
+                        </div>
                     </div>
                 </div>
-                <div class="col-lg-4 text-center">
-                    <span class="fa fa-heart fa-5x" role="img" aria-label="Heart" title="Heart"></span>
-                    <div>
-                        <h3 class="mt8 mb0">Third Feature</h3>
-                        <p class="text-muted">A small explanation of this great<br/>feature, in clear words.</p>
+                <div class="col-lg-4 s_col_no_bgcolor pt16 pb16">
+                    <div class="card">
+                        <img class="card-img-top" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
+                        <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 it's <em>rounded corner</em> style.</p>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -173,113 +172,178 @@
     </section>
 </template>
 
-<template id="s_big_picture" name="Big Picture">
-    <section class="s_big_picture bg-gray-lighter pb16">
+<template id="s_picture" name="Picture">
+    <section class="s_picture pt48 pb24" style="background-color: rgb(239, 239, 239);">
         <div class="container">
-            <h2 class="text-center">A Punchy Headline</h2>
-            <div class="row">
-                <div class="col-lg-12">
-                  <img class="img img-fluid" src="/web/image/website.s_big_picture_default_image" style="margin: 0 auto;"  alt="Odoo CMS - a big picture"/>
+            <div class="row s_nb_column_fixed">
+                <div class="col-lg-12 s_title pt16 pb16">
+                    <h2 class="s_title_thin" style="text-align: center;"><font style="font-size: 62px;">A punchy Headline</font></h2>
                 </div>
-                <div class="col-lg-6 offset-lg-3 mt16">
-                    <p class="text-center">
-                        <b>A Small Subtitle</b>
-                    </p>
-                    <p class="text-center">
-                        Choose a vibrant image and write an inspiring paragraph
-                        about it. It does not have to be long, but it should
-                        reinforce your image.
-                    </p>
-                    <p class="text-center">
-                        <a href="/contactus">Contact us »</a>
-                    </p>
+                <div class="col-lg-12 pt16 pb16">
+                    <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>
+                </div>
+                <div class="col-lg-8 offset-lg-2 pb24">
+                    <figure class="figure">
+                        <img src="/web/image/website.s_picture_default_image" class="figure-img img-fluid rounded img-thumbnail padding-large" alt="Odoo • A picture with a caption"/>
+                        <figcaption class="figure-caption py-3 text-center"><i class="fa fa-1x fa-picture-o mr-2"/>Add a caption to enhance the meaning of this image.</figcaption>
+                    </figure>
                 </div>
             </div>
         </div>
     </section>
 </template>
 
-<template id="s_three_columns" name="Three Columns">
-    <section class="s_three_columns pt32 pb48">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-4">
-                    <img class="img img-fluid" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
-                    <h4 class="mt16">Feature One</h4>
-                    <p>
-                        Adapt these three columns to fit you design need.
-                        To duplicate, delete or move columns, select the
-                        column and use the top icons to perform your action.
-                    </p>
-                </div>
-                <div class="col-lg-4">
-                    <img class="img img-fluid" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
-                    <h4 class="mt16">Feature Two</h4>
-                    <p>
-                        To add a fourth column, reduce the size of these
-                        three columns using the right icon of each block.
-                        Then, duplicate one of the column to create a new
-                        one as a copy.
-                    </p>
-                </div>
-                <div class="col-lg-4">
-                    <img class="img img-fluid" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
-                    <h4 class="mt16">Feature Three</h4>
-                    <p>
-                        Delete the above image or replace it with a picture
-                        that illustrates your message. Click on the picture to
-                        change it's <em>rounded corner</em> style.
-                    </p>
+<template id="s_carousel" name="Carousel">
+    <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_custom_bg 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-7">
+                            <div class="s_title pb8" data-name="Title">
+                                <h2 class="s_title_default"><font style="font-size: 62px;">Slide Title</font></h2>
+                            </div>
+                            <p class="lead">Use this snippet to presents your content in a slideshow-like format.<br/> Don't write about products or services here, write about solutions.</p>
+                            <div class="s_btn text-left pt16 pb16" data-name="Buttons">
+                                <a href="/aboutus" class="btn btn-secondary flat">About us</a>
+                                <a href="/contactus" class="btn btn-primary flat">Contact us</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- #02 -->
+            <div class="carousel-item oe_custom_bg 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 pb32">
+                                <hr class="s_hr_5px s_hr_dotted border-600 w-25 border-epsilon mx-auto text-center"/>
+                            </div>
+                            <p>Storytelling is powerful.<br/> It draws readers in and engages them..</p>
+                            <div class="s_btn text-center pt16 pb16" data-name="Buttons">
+                                <a href="/start" class="btn btn-epsilon rounded-circle">Start your journey</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- #03 -->
+            <div class="carousel-item oe_custom_bg 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 class="mt24">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 class="s_share pt16 pb16">
+                                <a href="https://www.facebook.com/sharer/sharer.php?u={url}" class="s_share_facebook" target="_blank">
+                                    <i class="fa fa-facebook rounded shadow-sm"/>
+                                </a>
+                                <a href="https://twitter.com/intent/tweet?text={title}&amp;url={url}" class="s_share_twitter" target="_blank">
+                                    <i class="fa fa-twitter rounded shadow-sm"/>
+                                </a>
+                                <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url={url}&amp;title={title}&amp;" class="s_share_linkedin" target="_blank">
+                                    <i class="fa fa-linkedin rounded shadow-sm"/>
+                                </a>
+                                <a href="https://plus.google.com/share?url={url}" class="s_share_google" target="_blank">
+                                    <i class="fa fa-google-plus rounded shadow-sm"/>
+                                </a>
+                                <a href="mailto:?body={url}&amp;subject={title}" class="s_share_email">
+                                    <i class="fa fa-envelope rounded shadow-sm"/>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
-    </section>
+        <!-- Controls -->
+        <div class="carousel-control-prev" data-target="#myCarousel" 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" data-target="#myCarousel" data-slide="next" role="img" aria-label="Next" title="Next">
+            <span class="carousel-control-next-icon"/>
+            <span class="sr-only">Next</span>
+        </div>
+    </div>
 </template>
 
-<template id="s_well" name="Well">
-    <div class="card s_well clearfix">
-        <div class="card-body">
-            <p>
-                Explain the benefits you offer. Don't write about products or
-                services here, write about solutions.
-            </p>
+<template id="s_alert" name="Alert">
+    <div class="s_alert s_alert_md alert-delta 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_panel" name="Panel">
-    <div class="card o_panel s_panel">
-        <h3 class="card-header">Feature Title</h3>
+<template id="s_card" name="Card">
+    <div class="s_card card w-100" style="background-color: rgba(255,255,255);">
+        <h4 class="card-header">Feature Title</h4>
         <div class="card-body">
-            <p>
-                Panels are a great tool to compare offers or to emphasize on
-                key features. To compare products, use the inside columns.
-            </p>
+            <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="s_image_floating" name="Image Floating">
-    <div class="o_image_floating o_margin_l float-right s_image_floating">
-        <div class="o_container">
-            <img class="img rounded img-fluid" src="/web/image/website.s_image_floating_default_image" alt="Odoo CMS- Sample image floating"/>
-        </div>
-        <div class="o_footer">
-            <small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
+<template id="s_share" name="Share">
+    <div class="s_share">
+        <h4 class="s_share_title">Share</h4>
+        <a href="https://www.facebook.com/sharer/sharer.php?u={url}" class="s_share_facebook" target="_blank">
+            <i class="fa fa-1x fa-facebook rounded shadow-sm"/>
+        </a>
+        <a href="https://twitter.com/intent/tweet?text={title}&amp;url={url}" class="s_share_twitter" target="_blank">
+            <i class="fa fa-1x fa-twitter rounded shadow-sm"/>
+        </a>
+        <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url={url}&amp;title={title}&amp;" class="s_share_linkedin" target="_blank">
+            <i class="fa fa-1x fa-linkedin rounded shadow-sm"/>
+        </a>
+        <a href="https://plus.google.com/share?url={url}" class="s_share_google" target="_blank">
+            <i class="fa fa-1x fa-google-plus rounded shadow-sm"/>
+        </a>
+        <a href="mailto:?body={url}&amp;subject={title}" class="s_share_email">
+            <i class="fa fa-1x fa-envelope rounded shadow-sm"/>
+        </a>
+    </div>
+</template>
+
+<template id="s_rating" name="Rating">
+    <div class="s_rating row">
+        <div class="col-lg-12 s_rating_stars s_rating_3 s_rating_1x pt16 pb16">
+            <h4>Quality</h4>
+            <i class="fa fa-1x"/>
+            <i class="fa fa-1x"/>
+            <i class="fa fa-1x"/>
+            <i class="fa fa-1x"/>
+            <i class="fa fa-1x"/>
+            <div class="s_rating_bar"/>
         </div>
     </div>
 </template>
 
-<template id="s_share" name="Share">
-    <div class="oe_share s_share">
-        <h3>
-            <span>Share</span>
-            <a target="_Blank" class="oe_share_facebook" href="https://www.facebook.com/sharer/sharer.php?u={url}" aria-label="Facebook" title="Facebook"><i class="fa fa-facebook-square"></i></a>
-            <a target="_Blank" class="oe_share_twitter" href="https://twitter.com/intent/tweet?text={title}&amp;url={url}" aria-label="Twitter" title="Twitter"><i class="fa fa-twitter"></i></a>
-            <a target="_Blank" class="oe_share_linkedin" href="http://www.linkedin.com/shareArticle?mini=true&amp;url={url}&amp;title={title}&amp;" aria-label="LinkedIn" title="LinkedIn"><i class="fa fa-linkedin"></i></a>
-            <a target="_Blank" class="oe_share_google" href="https://plus.google.com/share?url={url}" aria-label="Google Plus" title="Google Plus"><i class="fa fa-google-plus-square"></i></a>
-            <a href="mailto:?body={url}&amp;subject={title}" aria-label="Email" title="Email"><i class="fa fa-envelope-o"></i></a>
-        </h3>
+<template id="s_btn" name="Button">
+    <div class="s_btn text-center pt16 pb16" data-name="Buttons">
+        <a href="#" class="btn btn-primary">Read more</a>
+    </div>
+</template>
+
+<template id="s_hr" name="Separator">
+    <div class="s_hr text-left pt32 pb32">
+        <hr class="s_hr_1px s_hr_solid border-600 w-100 mx-auto"/>
     </div>
 </template>
 
@@ -302,21 +366,24 @@
 </template>
 
 <template id="s_comparisons" name="Comparisons">
-    <section class="s_comparisons">
+    <section class="s_comparisons pt48 pb24">
         <div class="container">
-            <h2 class="text-center">Our Offers</h2>
+            <div class="row s_nb_column_fixed">
+                <div class="col-lg-12 s_title pt16 pb16" style="text-align: center;">
+                    <h1 class="s_title_thin"><font style="font-size: 62px;">Our offers</font></h1>
+                </div>
+            </div>
             <div class="row">
-                <div class="col-lg-4 col-12">
-                    <div class="card bg-gray-light">
-                        <div class="card-header text-center" style="background-color: rgba(255, 255, 255, 0.1)">
-                            <h3 style="margin: 0">Beginner</h3>
-                            <p style="margin: 0">
-                                Starter package
-                            </p>
-                        </div>
+                <div class="col-lg-4 s_col_no_bgcolor text-center pt16 pb16" data-name="Box">
+                    <div class="card" style="background-color: rgb(239, 239, 239);">
+                        <h4 class="card-header">Beginner</h4>
                         <div class="card-body text-center">
-                            <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">35</b><small>.00</small></h3>
-                            <div>user / month (billed annually)</div>
+                            <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>
@@ -324,23 +391,22 @@
                             <li class="list-group-item">No customization</li>
                             <li class="list-group-item">No support</li>
                         </ul>
-                        <div class="card-footer text-center">
-                            <p class="text-muted">
-                                <i>Instant setup, satisfied or reimbursed.</i>
-                            </p>
-                            <a role="button" href="/contactus" class="btn btn-primary btn-lg">Order now</a>
+                        <div class="card-footer">
+                            <p><i>Instant setup, satisfied or reimbursed.</i></p>
+                            <a href="/contactus" class="btn btn-secondary">Order now</a>
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-4 col-12">
-                    <div class="card bg-beta">
-                        <div class="card-header text-center" style="background-color: rgba(255, 255, 255, 0.1)">
-                            <h3 style="margin: 0">Professional</h3>
-                            <p style="margin: 0">Enterprise package</p>
-                        </div>
-                        <div class="card-body text-center">
-                            <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">65</b><small>.00</small></h3>
-                            <div>user / month (billed annually)</div>
+                <div class="col-lg-4 s_col_no_bgcolor text-center pt16 pb16" data-name="Box">
+                    <div class="card bg-primary">
+                        <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>
@@ -348,21 +414,22 @@
                             <li class="list-group-item">Limited customization</li>
                             <li class="list-group-item">Email support</li>
                         </ul>
-                        <div class="card-footer text-center">
-                            <p class="text-muted"><i>Instant setup, satisfied or reimbursed.</i></p>
-                            <a role="button" href="/contactus" class="btn btn-primary btn-lg">Order now</a>
+                        <div class="card-footer">
+                            <p><i>Instant setup, satisfied or reimbursed.</i></p>
+                            <a href="/contactus" class="btn btn-light">Start now</a>
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-4 col-12">
-                    <div class="card bg-gray-light">
-                        <div class="card-header text-center" style="background-color: rgba(255, 255, 255, 0.1)">
-                            <h3 style="margin: 0">Expert</h3>
-                            <p style="margin: 0">Ultimate package</p>
-                        </div>
+                <div class="col-lg-4 s_col_no_bgcolor text-center pt16 pb16" data-name="Box">
+                    <div class="card bg-secondary">
+                        <h4 class="card-header">Expert</h4>
                         <div class="card-body text-center">
-                            <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">125</b><small>.00</small></h3>
-                            <div>user / month (billed annually)</div>
+                            <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>
@@ -370,9 +437,9 @@
                             <li class="list-group-item">Unlimited customization</li>
                             <li class="list-group-item">24x7 toll-free support</li>
                         </ul>
-                        <div class="card-footer text-center">
-                            <p class="text-muted"><i>Instant setup, satisfied or reimbursed.</i></p>
-                            <a role="button" href="/contactus" class="btn btn-primary btn-lg">Contact us</a>
+                        <div class="card-footer">
+                            <p><i>Instant setup, satisfied or reimbursed.</i></p>
+                            <a href="/contactus" class="btn btn-light">Contact us</a>
                         </div>
                     </div>
                 </div>
@@ -384,13 +451,11 @@
 <template id="s_company_team" name="Company Team">
     <section class="s_company_team">
         <div class="container">
-            <h1 class="text-center mb16">
-                Meet the Executive Team
-            </h1>
-            <div class="row">
+            <h1 style="text-align: center;">Meet the Executive Team</h1>
+            <div class="row s_nb_column_fixed">
                 <div class="col-lg-6 pt16 pb16">
-                    <div class="row s_no_resize_cols">
-                        <div class="col-lg-4">
+                    <div class="row s_col_no_resize s_col_no_bgcolor">
+                        <div class="col-lg-4 ">
                             <img alt="Company team" src="/web/image/website.s_company_team_image_1" class="img-fluid rounded-circle d-block mx-auto shadow"/>
                         </div>
                         <div class="col-lg-8">
@@ -404,7 +469,7 @@
                     </div>
                 </div>
                 <div class="col-lg-6 pt16 pb16">
-                    <div class="row s_no_resize_cols">
+                    <div class="row s_col_no_resize s_col_no_bgcolor">
                         <div class="col-lg-4">
                             <img alt="Company team" src="/web/image/website.s_company_team_image_2" class="img-fluid rounded-circle d-block mx-auto shadow"/>
                         </div>
@@ -419,7 +484,7 @@
                     </div>
                 </div>
                 <div class="col-lg-6 pt16 pb16">
-                    <div class="row s_no_resize_cols">
+                    <div class="row s_col_no_resize s_col_no_bgcolor">
                         <div class="col-lg-4">
                             <img alt="Company team" src="/web/image/website.s_company_team_image_3" class="img-fluid rounded-circle d-block mx-auto shadow"/>
                         </div>
@@ -434,7 +499,7 @@
                     </div>
                 </div>
                 <div class="col-lg-6 pt16 pb16">
-                    <div class="row s_no_resize_cols">
+                    <div class="row s_col_no_resize s_col_no_bgcolor">
                         <div class="col-lg-4">
                             <img alt="Company team" src="/web/image/website.s_company_team_image_4" class="img-fluid rounded-circle d-block mx-auto shadow"/>
                         </div>
@@ -453,21 +518,18 @@
     </section>
 </template>
 
-<template id="s_button" name="Call to Action">
-    <section class="jumbotron s_button bg-gray-lighter">
+<template id="s_call_to_action" name="Call to Action">
+    <section class="s_call_to_action pt48 pb24" style="background-color: rgb(239, 239, 239);">
         <div class="container">
             <div class="row">
-                <div class="col-lg-9">
-                    <p class="mb0">
-                        <strong>50,000+ companies run Odoo to grow their businesses.</strong>
-                    </p><p class="mb0">
-                        Join us and make your company a better place.
-                    </p>
-                </div>
-                <div class="col-lg-3">
-                    <a role="button" href="/contactus" class="btn btn-primary btn-lg float-right mt8" aria-label="Contact Us Now" title="">
-                        <span>Contact Us Now</span>
-                        <i class="fa fa-chevron-right"></i>
+                <div class="col-lg-9 pb24">
+                    <h3><b>50,000+ companies</b> run Odoo to grow their businesses.</h3>
+                    <p class="lead">Join us and make your company a better place.</p>
+                </div>
+                <div class="col-lg-3 s_btn text-right pt8 pb24">
+                    <a href="/contactus" class="btn btn-primary btn-lg">
+                        <span>Contact us</span>
+                        <i class="fa fa-1x fa-fw fa-arrow-circle-right ml-1"/>
                     </a>
                 </div>
             </div>
@@ -475,132 +537,135 @@
     </section>
 </template>
 
-<template id="s_faq_collapse" name="FAQ">
-    <section class="s_faq_collapse">
+<template id="s_references" name="References">
+    <section class="s_references pt16 pb16" style="background-color: rgb(239, 239, 239);">
         <div class="container">
-            <h2 class="page-header"> General Terms and Conditions / Service Policies </h2>
-            <div class="accordion" role="tablist">
-                <div class="card">
-                    <h4 class="card-header bg-gray-lighter" role="tab" data-toggle="collapse">Terms of service</h4>
-                    <div class="collapse" role="tabpanel">
-                        <div class="card-body bg-white-50">
-                            <p>
-                                These terms of service ("Terms", "Agreement") are an agreement between the website
-                                ("Website operator", "us", "we" or "our") and you ("User", "you" or "your").
-                            </p>
-                            <p>
-                                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 class="row">
+                <div class="col-lg-2 pt32">
+                    <h4>References</h4>
                 </div>
-                <div class="card">
-                    <h4 class="card-header bg-gray-lighter" role="tab" data-toggle="collapse">Links to other websites</h4>
-                    <div class="collapse" role="tabpanel">
-                        <div class="card-body bg-white-50">
-                            <p>
-                                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>
-                                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 class="col-lg-2">
+                    <img src="/web/image/website.s_reference_demo_image_1" class="img img-fluid " alt="Demo Logo"/>
                 </div>
-                <div class="card">
-                    <h4 class="card-header bg-gray-lighter" role="tab" data-toggle="collapse">Use Of Cookies</h4>
-                    <div class="collapse" role="tabpanel">
-                        <div class="card-body bg-white-50">
-                            <p>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 class="col-lg-2">
+                    <img src="/web/image/website.s_reference_demo_image_2" class="img img-fluid " alt="Demo Logo"/>
+                </div>
+                <div class="col-lg-2">
+                    <img src="/web/image/website.s_reference_demo_image_3" class="img img-fluid " alt="Demo Logo"/>
+                </div>
+                <div class="col-lg-2">
+                    <img src="/web/image/website.s_reference_demo_image_4" class="img img-fluid " alt="Demo Logo"/>
+                </div>
+                <div class="col-lg-2">
+                    <img src="/web/image/website.s_reference_demo_image_5" class="img img-fluid " alt="Demo Logo"/>
                 </div>
             </div>
         </div>
     </section>
 </template>
 
-<template id="s_references" name="References">
-    <section class="s_references bg-gray-lighter pt16 pb16">
+<template id="s_faq_collapse" name="Accordion">
+    <section class="s_faq_collapse pt48 pb32">
         <div class="container">
-            <div class="row">
-                <div class="col-lg-2 mt32">
-                  <h4 class="text-center">Our References</h4>
-                </div>
-                <div class="col-lg-2 col-md-3 col-6">
-                  <img src="/web/image/website.s_reference_demo_image_1" class="img img-fluid " alt="Demo Logo"/>
+            <div class="row s_nb_column_fixed">
+                <div class="col-lg-12 s_title pt16 pb16">
+                    <h1 class="s_title_thin"><font style="font-size: 62px;">FAQ</font></h1>
                 </div>
-                <div class="col-lg-2 col-md-3 col-6">
-                  <img src="/web/image/website.s_reference_demo_image_2" class="img img-fluid " alt="Demo Logo"/>
-                </div>
-                <div class="col-lg-2 col-md-3 col-6">
-                  <img src="/web/image/website.s_reference_demo_image_3" class="img img-fluid " alt="Demo Logo"/>
-                </div>
-                <div class="col-lg-2 col-md-3 col-6">
-                  <img src="/web/image/website.s_reference_demo_image_4" class="img img-fluid " alt="Demo Logo"/>
-                </div>
-                <div class="col-lg-2 col-md-3 col-6">
-                  <img src="/web/image/website.s_reference_demo_image_5" class="img img-fluid " alt="Demo Logo"/>
+            </div>
+            <div class="row s_col_no_bgcolor">
+                <div class="col-lg-12 pt16 pb16">
+                    <div id="myCollapse" class="accordion" role="tablist">
+                        <div class="card" style="background-color: rgb(255, 255, 255);">
+                            <a href="#" role="tab" data-toggle="collapse" aria-expanded="true" class="card-header text-primary">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" style="background-color: rgb(255, 255, 255);">
+                            <a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header text-primary">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" style="background-color: rgb(255, 255, 255);">
+                            <a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header text-primary">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>
             </div>
         </div>
     </section>
 </template>
 
-<template id="s_feature_grid" name="Feature Grid">
-    <section class="s_feature_grid pt16">
+<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-5 offset-lg-1">
+                <div class="col-lg-6 s_col_no_bgcolor pb24">
                     <div class="row">
-                        <div class="col-lg-12 pb16">
-                            <h3 class="mb0">List of Features</h3>
-                            <h5 class="text-muted">Add a great slogan</h5>
+                        <div class="col-lg-12 pb24" data-name="Box">
+                            <h2>First list of Features</h2>
+                            <h5 class="text-primary">Add a great slogan.</h5>
                         </div>
-                        <div class="col-lg-12">
-                            <span style="min-width: 45px" class="fa fa-2x fa-comment float-left mb16" role="img" aria-label="Change icons" title="Change icons"></span>
-                            <h4 class="mt0 mb0">Change Icons</h4>
-                            <p>Click on the icon to adapt it to your feature</p><br/>
+                        <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">
-                            <span style="min-width: 45px" class="fa fa-2x fa-columns float-left mb16" role="img" aria-label="Duplicate" title="Duplicate"></span>
-                            <h4 class="mt0 mb0">Duplicate</h4>
-                            <p>Duplicate blocks to add more features.</p><br/>
+                        <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">
-                            <span style="min-width: 45px" class="fa fa-2x fa-user float-left mb16" role="img" aria-label="Delete blocks" title="Delete blocks"></span>
-                            <h4 class="mt0 mb0">Delete Blocks</h4>
-                            <p>Select and delete blocks to remove some features.</p><br/>
+                        <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 some features.</p>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="col-lg-5">
+                <div class="col-lg-6 s_col_no_bgcolor pb24">
                     <div class="row">
-                        <div class="col-lg-12 pb16">
-                            <h3 class="mb0">Second List</h3>
-                            <h5 class="text-muted">Add a great slogan</h5>
+                        <div class="col-lg-12 pb24" data-name="Box">
+                            <h2>Second list of Features</h2>
+                            <h5 class="text-secondary">Add a great slogan.</h5>
                         </div>
-                        <div class="col-lg-12">
-                            <span style="min-width: 45px" class="fa fa-2x fa-magic float-left mb16" role="img" aria-label="Great value" title="Great value"></span>
-                            <h4 class="mt0 mb0">Great Value</h4>
-                            <p>Tell features the visitor would like to know, not what you'd like to say.</p>
+                        <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">
-                            <span style="min-width: 45px" class="fa fa-2x fa-bolt float-left mb16" role="img" aria-label="Change background" title="Change background"></span>
-                            <h4 class="mt0 mb0">Change Background</h4>
-                            <p>From the main container, you can change the background to highlight features.</p>
+                        <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 background to highlight features.</p>
+                            </div>
                         </div>
-                        <div class="col-lg-12">
-                            <span style="min-width: 45px" class="fa fa-2x fa-picture-o float-left mb16" role="img" aria-label="Sample images" title="Change background"></span>
-                            <h4 class="mt0 mb0">Sample images</h4>
-                            <p>All these icons are licensed under creative commons so that you can use them.</p>
+                        <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>
@@ -609,86 +674,153 @@
     </section>
 </template>
 
-<template id="s_parallax" name="Parallax">
-    <section class="parallax s_parallax oe_img_bg pt96 pb96"
-        style="background-image: url(/web/image/website.s_background_image_04);"
-        data-scroll-background-ratio="1.6"><div class="oe_structure"/></section>
-</template>
-
-<template id="s_parallax_slider" name="Parallax Slider">
-    <section class="parallax s_parallax_slider oe_custom_bg oe_img_bg"
-             style="background-image: url(/web/image/website.s_parallax_slider_default_image);"
-            data-scroll-background-ratio="1.6">
-        <div><div><div class="oe_structure">
-                <div id="myQuoteCarousel" class="carousel quotecarousel slide mb0" data-interval="10000">
-                    <!-- Indicators -->
-                    <ol class="carousel-indicators mb0">
-                        <li data-target="#myQuoteCarousel" data-slide-to="0" class="active"></li>
-                        <li data-target="#myQuoteCarousel" data-slide-to="1"></li>
-                    </ol>
-                    <div class="carousel-inner">
-
-                        <div class="carousel-item text_only active">
-                            <div class="container">
-                                <div class="content">
-
-                                    <div class="row">
-                                        <blockquote class="mt48 mb16 col-lg-4 offset-lg-4">
-                                            <p>
-                                                Write a quote here from one of your customers. Quotes are a
-                                                great way to build confidence in your products or services.
-                                            </p>
-                                            <small>Author of this quote</small>
-                                        </blockquote>
-                                    </div>
-
-                                </div>
-                            </div>
+<template id="s_tabs" name="Tabs">
+    <section class="s_tabs">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-8 offset-lg-2 pt48 pb48">
+                    <div class="card">
+                        <div class="card-header">
+                            <ul class="nav nav-tabs card-header-tabs">
+                                <li class="nav-item">
+                                    <a class="nav-link text-primary active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link text-primary" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link text-primary" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+                                </li>
+                            </ul>
                         </div>
-
-                        <div class="carousel-item text_only">
-                            <div class="container">
-                                <div class="content">
-
-                                    <div class="row">
-                                        <blockquote class="mt48 mb16 col-lg-4 offset-lg-4">
-                                            <p>
-                                                Odoo provides essential platform for our project management.
-                                                Things are better organized and more visible with it.
-                                            </p>
-                                            <small>John Doe, CEO</small>
-                                        </blockquote>
-                                    </div>
-
-                                </div>
+                        <div class="card-body tab-content" id="nav-tabContent">
+                            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
+                                <h3>Details</h3>
+                                <p><b>Great stories have personality.</b> Consider telling a great story that provides personality. Writing a story with personality for potential clients will assists 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>
                             </div>
+                            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
+                                <h3>Shipping</h3>
+                                <p><b>Great stories are for everyone even when only written for just one person.</b> If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
+                            </div>
+                            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
+                                <h3>Review</h3>
+                                <blockquote>
+                                    <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>— Jane DOE, CEO of <b>MyCompany</b></footer>
+                                </blockquote>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
 
+<template id="s_parallax" name="Parallax">
+    <section class="s_parallax s_parallax_is_fixed parallax pt160 pb160" data-scroll-background-ratio="1">
+        <span class="s_parallax_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 75%;"/>
+        <span class="s_parallax_filter bg-black-50"/>
+        <div class="oe_structure">
+            <section>
+                <div class="container">
+                    <div class="row s_nb_column_fixed">
+                        <div class="col-lg-12 s_title pt16 pb16" style="text-align: center;">
+                            <h1 class="s_title_boxed"><font style="font-size: 62px;">Your Site Title</font></h1>
                         </div>
                     </div>
                 </div>
-        </div></div></div>
+            </section>
+        </div>
     </section>
 </template>
 
+<template id="s_quotes_carousel" name="Quotes">
+    <div id="myQuoteCarousel" class="s_quotes_carousel s_carousel_default carousel slide" 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" style="background-color: rgb(239, 239, 239);" data-name="Slide">
+                <div class="container">
+                    <div class="row content">
+                        <blockquote class="carousel-content col-lg-6 offset-lg-3" style="background-color: rgb(255, 255, 255);">
+                            <i class="fa fa-1x fa-quote-left rounded-0 bg-secondary s_quotes_carousel_icon"/>
+                            <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>
+                                <img class="img" src="/web/image/website.s_quotes_carousel_demo_image_3" alt=""/>
+                                <span>— Jane DOE, CEO of <b>MyCompany</b></span>
+                            </footer>
+                        </blockquote>
+                    </div>
+                </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">
+                    <div class="row content">
+                        <blockquote class="col-lg-6" style="background-color: rgb(255, 255, 255);">
+                            <p>Odoo provides essential platform for our project management. Things are better organized and more visible with it.</p>
+                            <footer>
+                                <img class="img" src="/web/image/website.s_quotes_carousel_demo_image_4" alt=""/>
+                                <span>— John DOE, CEO of <b>MyCompany</b></span>
+                            </footer>
+                        </blockquote>
+                    </div>
+                </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">
+                    <div class="row content">
+                        <blockquote class="col-lg-6 offset-lg-6" style="background-color: rgb(255, 255, 255);">
+                            <p>Odoo provides essential platform for our project management. Things are better organized and more visible with it.</p>
+                            <footer class="blockquote-footer">
+                                <img class="img" src="/web/image/website.s_quotes_carousel_demo_image_5" alt=""/>
+                                <span>— Jane DOE, CEO of <b>MyCompany</b></span>
+                            </footer>
+                        </blockquote>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Controls -->
+        <div class="carousel-control-prev" 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" 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>
+</template>
+
 <!-- Snippets menu -->
 <template id="snippets" inherit_id="web_editor.snippets" primary="True">
     <xpath expr="//div[@id='o_scroll']" position="replace">
         <div id="o_scroll">
+
             <div id="snippet_structure" class="o_panel">
                 <div class="o_panel_header">
                     <i class="fa fa-th-large"/> Structure
                 </div>
                 <div class="o_panel_body">
-                    <t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/blocks/block_title.png"/>
-                    <t t-snippet="website.s_cover" t-thumbnail="/website/static/src/img/blocks/block_banner.png"/>
-                    <t t-snippet="website.s_text_image" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
-                    <t t-snippet="website.s_image_text" t-thumbnail="/website/static/src/img/blocks/block_image_text.png"/>
-                    <t t-snippet="website.s_big_message" t-thumbnail="/website/static/src/img/blocks/block_jumbotron.png"/>
-                    <t t-snippet="website.s_text_block" t-thumbnail="/website/static/src/img/blocks/block_text_block.png"/>
-                    <t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/blocks/block_features.png"/>
-                    <t t-snippet="website.s_big_picture" t-thumbnail="/website/static/src/img/blocks/block_big_picture.png"/>
-                    <t t-snippet="website.s_three_columns" t-thumbnail="/website/static/src/img/blocks/block_three_columns.png"/>
-                    <t t-snippet="website.s_banner" t-thumbnail="/website/static/src/img/blocks/block_slider.png"/>
+                    <t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/snippets_thumbs/s_title.png"/>
+                    <t t-snippet="website.s_cover" t-thumbnail="/website/static/src/img/snippets_thumbs/s_cover.png"/>
+                    <t t-snippet="website.s_text_image" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_image.png"/>
+                    <t t-snippet="website.s_image_text" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_text.png"/>
+                    <t t-snippet="website.s_text_block" t-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png"/>
+                    <t t-snippet="website.s_banner" t-thumbnail="/website/static/src/img/snippets_thumbs/s_banner.png"/>
+                    <t t-snippet="website.s_picture" t-thumbnail="/website/static/src/img/snippets_thumbs/s_picture.png"/>
+                    <t t-snippet="website.s_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_carousel.png"/>
+                    <t t-snippet="website.s_features" t-thumbnail="/website/static/src/img/snippets_thumbs/s_features.png"/>
+                    <t t-snippet="website.s_three_columns" t-thumbnail="/website/static/src/img/snippets_thumbs/s_three_columns.png"/>
                 </div>
             </div>
 
@@ -697,13 +829,14 @@
                     <i class="fa fa-diamond"/> Feature
                 </div>
                 <div class="o_panel_body">
-                    <t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/blocks/block_image_gallery.png"/>
-                    <t t-snippet="website.s_comparisons" t-thumbnail="/website/static/src/img/blocks/block_comparison.png"/>
-                    <t t-snippet="website.s_company_team" t-thumbnail="/website/static/src/img/blocks/block_company_team.png"/>
-                    <t t-snippet="website.s_button" t-thumbnail="/website/static/src/img/blocks/block_button.png"/>
-                    <t t-snippet="website.s_references" t-thumbnail="/website/static/src/img/blocks/block_references.png"/>
-                    <t t-snippet="website.s_faq_collapse" t-thumbnail="/website/static/src/img/blocks/block_faq.png"/>
-                    <t t-snippet="website.s_feature_grid" t-thumbnail="/website/static/src/img/blocks/block_feature_grid.png"/>
+                    <t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_gallery.png"/>
+                    <t t-snippet="website.s_comparisons" t-thumbnail="/website/static/src/img/snippets_thumbs/s_comparison.png"/>
+                    <t t-snippet="website.s_company_team" t-thumbnail="/website/static/src/img/snippets_thumbs/s_company_team.png"/>
+                    <t t-snippet="website.s_call_to_action" t-thumbnail="/website/static/src/img/snippets_thumbs/s_call_to_action.png"/>
+                    <t t-snippet="website.s_references" t-thumbnail="/website/static/src/img/snippets_thumbs/s_references.png"/>
+                    <t t-snippet="website.s_faq_collapse" t-thumbnail="/website/static/src/img/snippets_thumbs/s_faq.png"/>
+                    <t t-snippet="website.s_features_grid" t-thumbnail="/website/static/src/img/snippets_thumbs/s_features_grid.png"/>
+                    <t t-snippet="website.s_tabs" t-thumbnail="/website/static/src/img/snippets_thumbs/s_tabs.png"/>
                 </div>
             </div>
 
@@ -712,8 +845,8 @@
                     <i class="fa fa-magic icon-fix"/> Effect
                 </div>
                 <div class="o_panel_body">
-                    <t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/blocks/block_parallax.png"/>
-                    <t t-snippet="website.s_parallax_slider" t-thumbnail="/website/static/src/img/blocks/block_quotes_slider.png"/>
+                    <t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/snippets_thumbs/s_parallax.png"/>
+                    <t t-snippet="website.s_quotes_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_quotes_carousel.png"/>
                 </div>
             </div>
 
@@ -722,13 +855,16 @@
                     <i class="fa fa-indent"/> Inner content
                 </div>
                 <div class="o_panel_body">
-                    <t t-snippet="website.s_well" t-thumbnail="/website/static/src/img/blocks/block_well.png"/>
-                    <t t-snippet="website.s_panel" t-thumbnail="/website/static/src/img/blocks/block_panel.png"/>
-                    <t t-snippet="website.s_image_floating" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
-                    <t t-snippet="website.s_share" t-thumbnail="/website/static/src/img/blocks/block_share.png"/>
-                    <t t-snippet="website.s_facebook_page" t-thumbnail="/website/static/src/img/blocks/facebook_page.png"/>
+                    <t t-snippet="website.s_btn" t-thumbnail="/website/static/src/img/snippets_thumbs/s_button.png"/>
+                    <t t-snippet="website.s_hr" t-thumbnail="/website/static/src/img/snippets_thumbs/s_separator.png"/>
+                    <t t-snippet="website.s_alert" t-thumbnail="/website/static/src/img/snippets_thumbs/s_alert.png"/>
+                    <t t-snippet="website.s_card" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
+                    <t t-snippet="website.s_share" t-thumbnail="/website/static/src/img/snippets_thumbs/s_share.png"/>
+                    <t t-snippet="website.s_facebook_page" t-thumbnail="/website/static/src/img/snippets_thumbs/s_facebook_page.png"/>
+                    <t t-snippet="website.s_rating" t-thumbnail="/website/static/src/img/snippets_thumbs/s_rating.png"/>
                 </div>
             </div>
+
         </div>
     </xpath>
 
@@ -739,19 +875,245 @@
 
 <template id="external_snippets" inherit_id="website.snippets" priority="8">
     <xpath expr="//div[@id='snippet_feature']//t[@t-snippet][last()]" position="after">
-        <t t-install="website_twitter" string="Twitter Scroller" t-thumbnail="/website/static/src/img/blocks/twitter_scroll.png"/>
+        <t t-install="website_twitter" string="Twitter Scroller" t-thumbnail="/website/static/src/img/snippets_thumbs/s_twitter_scroll.png"/>
     </xpath>
     <xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
-        <t t-install="website_event" string="Local Events" t-thumbnail="/website/static/src/img/blocks/block_local_event.png"/>
-        <t t-install="website_mail_channel" string="Discussion Group" t-thumbnail="/website/static/src/img/blocks/button_channel_subscribe.png"/>
-        <t t-install="mass_mailing" string="Newsletter" t-thumbnail="/website/static/src/img/blocks/newsletter_subscribe_form.png"/>
+        <t t-install="website_event" string="Local Events" t-thumbnail="/website/static/src/img/snippets_thumbs/s_local_events.png"/>
+        <t t-install="website_mail_channel" string="Discussion Group" t-thumbnail="/website/static/src/img/snippets_thumbs/s_button_channel_subscribe.png"/>
+        <t t-install="mass_mailing" string="Newsletter" t-thumbnail="/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.png"/>
     </xpath>
 </template>
 
 <template id="snippet_options">
     <t t-call="web_editor.snippet_options"/>
 
-    <div data-js='gallery' data-selector=".o_gallery">
+    <!-- COLOR | .s_three_columns | .s_comparisons -->
+    <div data-js="colorpicker"
+        data-selector=".s_three_columns [class*='col-lg-'], .s_comparisons [class*='col-lg-']"
+        data-target=".card"
+        data-palette-title="Box Color">
+        <div class="dropdown-submenu">
+            <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Color</a>
+            <div class="dropdown-menu" role="menu"/>
+        </div>
+    </div>
+
+    <!-- COLOR | .s_hr -->
+    <div data-js="colorpicker"
+        data-selector=".s_hr"
+        data-target="hr"
+        data-color-prefix="border-"
+        data-palette-exclude="transparent_grayscale, grayscale"
+        data-palette-title="Separator Color">
+        <div class="dropdown-submenu">
+            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Color</a>
+            <div class="dropdown-menu" role="menu"/>
+        </div>
+    </div>
+
+    <!-- COLOR | .s_cards -->
+    <div data-js="colorpicker"
+        data-selector=".s_card, .accordion .card"
+        data-palette-title="Card Color">
+        <div class="dropdown-submenu">
+            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Color</a>
+            <div class="dropdown-menu" role="menu"/>
+        </div>
+    </div>
+
+    <!-- COLOR | .s_alert -->
+    <div data-js="colorpicker"
+        data-selector=".s_alert"
+        data-color-prefix="alert-"
+        data-palette-title="Box Color">
+        <div class="dropdown-submenu">
+            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Color</a>
+            <div class="dropdown-menu" role="menu"/>
+        </div>
+    </div>
+
+
+    <!-- STYLES | .s_title -->
+    <div data-selector=".s_title" data-target="[class*='s_title_']">
+        <div class="dropdown-submenu">
+            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-font"/>Typography</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" data-select-class="s_title_boxed">Boxed</a>
+                <a href="#" class="dropdown-item" data-select-class="s_title_lines">Line-On-Sides</a>
+                <a href="#" class="dropdown-item" data-select-class="s_title_thin">Thin</a>
+                <a href="#" class="dropdown-item" data-select-class="s_title_transparent">Transparent</a>
+                <a href="#" class="dropdown-item" data-select-class="s_title_underlined">Underlined</a>
+                <a href="#" class="dropdown-item" data-select-class="s_title_small_caps">Small Caps</a>
+                <div class="dropdown-divider"/>
+                <a href="#" class="dropdown-item" data-select-class="s_title_default">Default</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- H-ALIGN | .s_btn -->
+    <div data-selector=".s_btn">
+        <div class="dropdown-submenu">
+            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-align-left"/>Alignment</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" data-select-class="text-left">Left</a>
+                <a href="#" class="dropdown-item" data-select-class="text-center">Center</a>
+                <a href="#" class="dropdown-item" data-select-class="text-right">Right</a>
+            </div>
+        </div>
+    </div>
+
+    <div data-selector=".s_alert">
+        <div class="dropdown-submenu">
+            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-arrows"/>Size</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" data-select-class="s_alert_sm">Small</a>
+                <a href="#" class="dropdown-item" data-select-class="s_alert_md">Medium</a>
+                <a href="#" class="dropdown-item" data-select-class="s_alert_lg">Large</a>
+            </div>
+        </div>
+    </div>
+
+    <div data-selector=".s_alert, .s_card">
+        <div class="dropdown-submenu">
+            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-arrows-h"/>Width</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" data-select-class="w-25">25%</a>
+                <a href="#" class="dropdown-item" data-select-class="w-50">50%</a>
+                <a href="#" class="dropdown-item" data-select-class="w-75">75%</a>
+                <a href="#" class="dropdown-item" data-select-class="w-100">100%</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- STYLES | .s_rating -->
+    <div data-selector=".s_rating [class*='col-lg-']">
+        <div class="dropdown-submenu">
+            <a tabindex="-1" href="#" class="dropdown-item">Icon</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" data-select-class="s_rating_stars"><i class="fa fa-star"/>Stars</a>
+                <a href="#" class="dropdown-item" data-select-class="s_rating_squares"><i class="fa fa-square"/>Squares</a>
+                <a href="#" class="dropdown-item" data-select-class="s_rating_hearts"><i class="fa fa-heart"/>Hearts</a>
+                <a href="#" class="dropdown-item" data-select-class="s_rating_bar"><i class="fa fa-tasks"/>Progress Bar</a>
+            </div>
+        </div>
+        <div class="dropdown-submenu">
+            <a tabindex="-1" href="#" class="dropdown-item">Value</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" data-select-class="">0</a>
+                <a href="#" class="dropdown-item" data-select-class="s_rating_1">1/5</a>
+                <a href="#" class="dropdown-item" data-select-class="s_rating_2">2/5</a>
+                <a href="#" class="dropdown-item" data-select-class="s_rating_3">3/5</a>
+                <a href="#" class="dropdown-item" data-select-class="s_rating_4">4/5</a>
+                <a href="#" class="dropdown-item" data-select-class="s_rating_5">5/5</a>
+            </div>
+        </div>
+        <div class="dropdown-submenu">
+            <a tabindex="-1" href="#" class="dropdown-item">Size</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" data-select-class="s_rating_1x">Small</a>
+                <a href="#" class="dropdown-item" data-select-class="s_rating_2x">Medium</a>
+                <a href="#" class="dropdown-item" data-select-class="s_rating_3x">Big</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- STYLES | .s_hr -->
+    <div data-selector=".s_hr" data-target="hr">
+        <div class="dropdown-submenu">
+            <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-minus"/>Thickness</a>
+            <div class="dropdown-menu" role="menu">
+                <t t-foreach="range(1,6)" t-as="s_hr_thickness">
+                    <a href="#" class="dropdown-item" t-attf-data-select-class="s_hr_{{s_hr_thickness}}px"><t t-esc="s_hr_thickness"/>px</a>
+                </t>
+            </div>
+        </div>
+        <div class="dropdown-submenu">
+            <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-pencil"/>Style</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" data-select-class="s_hr_solid">Solid</a>
+                <a href="#" class="dropdown-item" data-select-class="s_hr_dashed">Dashed</a>
+                <a href="#" class="dropdown-item" data-select-class="s_hr_dotted">Dotted</a>
+                <a href="#" class="dropdown-item" data-select-class="s_hr_double">Double</a>
+            </div>
+        </div>
+        <div class="dropdown-divider"/>
+        <div class="dropdown-submenu">
+            <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-arrows-h"/>Width</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" data-select-class="w-25">25%</a>
+                <a href="#" class="dropdown-item" data-select-class="w-50">50%</a>
+                <a href="#" class="dropdown-item" data-select-class="w-75">75%</a>
+                <a href="#" class="dropdown-item" data-select-class="w-100">100%</a>
+            </div>
+        </div>
+        <div class="dropdown-submenu">
+            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-align-left"/>Alignment</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" data-select-class="mr-auto">Left</a>
+                <a href="#" class="dropdown-item" data-select-class="mx-auto">Center</a>
+                <a href="#" class="dropdown-item" data-select-class="ml-auto">Right</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Carousel | .s_carousel | .s_quotes_carousel -->
+    <div data-selector=":not(.o_gallery > .container) > .carousel">
+        <div class="dropdown-submenu">
+            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-clone"/>Transition</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" role="menuitem" data-select-class="slide">Slide</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-select-class="carousel-fade slide">Fade</a>
+                <div class="dropdown-divider"/>
+                <a href="#" class="dropdown-item" role="menuitem" data-select-class="s_carousel_no_transition">None</a>
+            </div>
+        </div>
+        <div class="dropdown-submenu">
+            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-magic"/>Style</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" role="menuitem" data-select-class="s_carousel_bordered">Bordered</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-select-class="s_carousel_boxed">Boxed</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-select-class="s_carousel_rounded">Rounded</a>
+                <div class="dropdown-divider"/>
+                <a href="#" class="dropdown-item" role="menuitem" data-select-class="s_carousel_default">Default</a>
+            </div>
+        </div>
+    </div>
+
+    <div data-js="carousel"
+        data-selector=":not(.o_gallery > .container) > .carousel">
+        <div class="dropdown-submenu">
+            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-clock-o"/>Speed</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" role="menuitem" data-interval="1000">1s</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-interval="2000">2s</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-interval="3000">3s</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-interval="5000">5s</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-interval="10000">10s</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-interval="0">Disable autoplay</a>
+            </div>
+        </div>
+        <a href="#" class="dropdown-item" data-add-slide="true" data-no-preview="true"><i class="fa fa-plus-circle"/>Add Slide</a>
+        <a href="#" class="dropdown-item" data-remove-slide="true" data-no-preview="true"><i class="fa fa-trash-o"/>Remove Slide</a>
+    </div>
+
+    <!-- Parallax -->
+    <div data-js="parallax" data-selector=".parallax">
+        <div class="dropdown-submenu">
+            <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-clock-o"/>Scroll Speed</a>
+            <div class="dropdown-menu" role="menu" name="parallax-scroll">
+                <a href="#" class="dropdown-item" role="menuitem" data-scroll="0">No-scroll</a>
+                <div class="dropdown-divider" role="separator"/>
+                <a href="#" class="dropdown-item" role="menuitem" data-scroll="1">Fixed</a>
+                <div class="dropdown-divider" role="separator"/>
+                <a href="#" class="dropdown-item" role="menuitem" data-scroll="0.6">Very Slow</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-scroll="1.2">Slow</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-scroll="1.6">Fast</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-scroll="2">Very Fast</a>
+            </div>
+        </div>
+    </div>
+
+    <div data-js="gallery" data-selector=".o_gallery">
         <a href="#" class="dropdown-item" data-add-images="true" data-no-preview="true"><i class="fa fa-plus-circle"/>Add images</a>
         <a href="#" class="dropdown-item" data-remove-all-images="true" data-no-preview="true"><i class="fa fa-trash"/>Remove all images</a>
         <div class="dropdown-divider"/>
@@ -808,36 +1170,7 @@
         <div class="dropdown-divider"/>
     </div>
 
-    <div data-js="background"
-        data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax, .s_banner .carousel-content">
-        <a tabindex="-1" href="#" class="dropdown-item" data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/>Choose Background Image</a>
-    </div>
-
-    <div data-js="background_position"
-        data-selector="section, :not(.o_gallery > .container) > .carousel, .s_banner .carousel-content">
-        <a tabindex="-1" href="#" class="dropdown-item background_position_li" data-background-position="true" data-no-preview="true"><i class="fa fa-arrows"/>Background Image Sizing</a>
-    </div>
-
-    <div data-js="colorpicker"
-        data-selector="section, :not(.o_gallery > .container) > .carousel"
-        data-exclude=".parallax">
-        <div class="dropdown-submenu">
-            <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Background Color</a>
-            <div class="dropdown-menu" role="menu"/>
-        </div>
-    </div>
-    <div data-js="colorpicker"
-        data-selector=".s_text_block_image_fw .row > div, .s_banner .carousel-content"
-        data-palette-exclude="grayscale"
-        data-palette-default="transparent_grayscale"
-        data-palette-title="Overlay Color">
-        <div class="dropdown-submenu">
-            <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Overlay color</a>
-            <div class="dropdown-menu" role="menu"/>
-        </div>
-    </div>
-
-    <div data-js='gallery_img' data-selector=".o_gallery img">
+    <div data-js="gallery_img" data-selector=".o_gallery img">
         <div class="dropdown-submenu">
             <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-refresh"/>Re-order</a>
             <div class="dropdown-menu" role="menu" data-no-preview="true">
@@ -849,35 +1182,20 @@
         </div>
     </div>
 
-    <div data-js='carousel'
-        data-selector=":not(.o_gallery > .container) > .carousel">
-        <div class="dropdown-divider"/>
-        <div class="dropdown-submenu">
-            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-clock-o"/>Slideshow speed</a>
-            <div class="dropdown-menu" role="menu">
-                <a href="#" class="dropdown-item" role="menuitem" data-interval="1000">1s</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-interval="2000">2s</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-interval="3000">3s</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-interval="5000">5s</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-interval="10000">10s</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-interval="0">Disable autoplay</a>
-            </div>
-        </div>
-        <a href="#" class="dropdown-item" data-add-slide="true" data-no-preview="true"><i class="fa fa-plus-circle"/>Add Slide</a>
-        <a href="#"  class="dropdown-item" data-remove-slide="true" data-no-preview="true"><i class="fa fa-trash-o"/>Remove Slide</a>
+    <!-- Facebook Page -->
+    <div data-js="facebookPage" data-selector=".o_facebook_page">
+        <a href="#" class="dropdown-item" data-fb-page-options="true" data-no-preview="true"><i class="fa fa-facebook"/>Options</a>
     </div>
 
-    <div data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax"
-        data-drop-in=":not(p).oe_structure, :not(p)[data-oe-type=html]"/>
-
-    <div data-js="sizing_y"
-        data-selector="section, .row:not(.s_no_resize_cols) > [class*='col-lg-'], :not(.o_gallery > .container) > .carousel, .parallax, hr">
+    <!-- Accordion -->
+    <div data-js="collapse"
+         data-selector='.accordion > .card'
+         data-drop-in='.accordion:has(> .card)'>
     </div>
 
     <div data-js="layout_column"
         data-selector="section"
-        data-target="> * > .row"
-        data-exclude=".s_text_block_image_fw, .s_company_team, .s_big_picture">
+        data-target="> * > .row:not(.s_nb_column_fixed)">
         <div class="dropdown-submenu">
             <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-columns"/>Number of columns</a>
             <div class="dropdown-menu" role="menu" data-no-preview="true">
@@ -891,73 +1209,103 @@
         </div>
     </div>
 
-    <div data-js="sizing_x"
-        data-selector=".row:not(.s_no_resize_cols) > [class*='col-lg-']"
-        data-drop-near=".row:not(.s_no_resize_cols) > [class*='col-lg-']">
+    <!--  V-ALIGN -->
+    <div data-selector=".s_text_image, .s_image_text, .s_three_columns" data-target=".row">
+        <div class="dropdown-submenu">
+            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-arrows-v"/>Alignment</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" data-select-class="align-items-start">Top</a>
+                <a href="#" class="dropdown-item" data-select-class="align-items-center">Middle</a>
+                <a href="#" class="dropdown-item" data-select-class="align-items-end">Bottom</a>
+                <div class="dropdown-divider"/>
+                <a href="#" class="dropdown-item" data-select-class="align-items-stretch">Equal height</a>
+            </div>
+        </div>
     </div>
 
-    <div data-js='content'
-        data-selector="blockquote, .card, .s_panel, .o_facebook_page, .oe_share, .o_image_floating"
-        data-drop-near="p, h1, h2, h3, blockquote, .card, .o_facebook_page, .s_panel, .oe_share"
-        data-drop-in=".content">
+    <!-- Background Image -->
+    <div data-js="background"
+        data-selector="section, .parallax, [class*='s_'] .carousel-item"
+        data-exclude=".s_hr, .s_image_gallery">
+        <div class="dropdown-divider"/>
+        <a tabindex="-1" href="#" class="dropdown-item" data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/>Background Image</a>
     </div>
 
-    <div data-js='separator'
-        data-selector="hr"
-        data-drop-in=".oe_structure, [data-oe-type=html]">
+    <!-- Background Image -->
+    <div data-js="background_position"
+        data-selector="section, [class*='s_'] .carousel-item">
+        <a tabindex="-1" href="#" class="dropdown-item background_position_li" data-background-position="true" data-no-preview="true"><i class="fa fa-arrows"/>Background Image Sizing</a>
     </div>
 
-    <div data-selector=".o_image_floating">
+    <!-- Color | Section -->
+    <div data-js="colorpicker"
+        data-selector="section, [class*='s_'] .carousel-item"
+        data-exclude=".parallax">
         <div class="dropdown-submenu">
-            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-expand"/>Margin</a>
-            <div class="dropdown-menu" role="menu">
-                <a href="#" class="dropdown-item" role="menuitem" data-select-class="o_margin_xl">Extra-Large</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-select-class="o_margin_l">Large</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-select-class="o_margin_m">Medium</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-select-class="o_margin_s">Small</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-select-class="">None</a>
-            </div>
+            <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Background Color</a>
+            <div class="dropdown-menu" role="menu"/>
         </div>
     </div>
 
-    <div data-selector=".o_image_floating">
+    <!-- FILTER | .s_parallax -->
+    <div data-js="colorpicker"
+        data-selector=".parallax" data-target="> .s_parallax_filter"
+        data-palette-exclude="common, theme"
+        data-palette-default="transparent_grayscale"
+        data-palette-title="Overlay Color">
+        <div class="dropdown-divider"/>
         <div class="dropdown-submenu">
-            <a tabindex="-2" href="#" class="dropdown-item"><i class="fa fa-magnet"/>Float</a>
-            <div class="dropdown-menu" role="menu" data-no-preview="true">
-                <a href="#" class="dropdown-item" role="menuitem" data-select-class="float-left">Left</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-select-class="float-right">Right</a>
-            </div>
+            <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Filter</a>
+            <div class="dropdown-menu" role="menu"/>
         </div>
     </div>
 
-    <div data-js="parallax" data-selector=".parallax">
+    <!-- Color | Columns -->
+    <div data-js="colorpicker"
+        data-selector="section [class*='col-lg-']"
+        data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor > [class*='col-lg-'], .o_gallery [class*='col-lg-']">
         <div class="dropdown-submenu">
-            <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-clock-o"/>Scroll Speed</a>
-            <div class="dropdown-menu" role="menu" name="parallax-scroll">
-                <a href="#" class="dropdown-item" role="menuitem" data-scroll="0">No-scroll</a>
-                <div class="dropdown-divider" role="separator"/>
-                <a href="#" class="dropdown-item" role="menuitem" data-scroll="1">Fixed</a>
-                <div class="dropdown-divider" role="separator"/>
-                <a href="#" class="dropdown-item" role="menuitem" data-scroll="0.6">Very Slow</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-scroll="1.2">Slow</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-scroll="1.6">Fast</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-scroll="2">Very Fast</a>
+            <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-eyedropper"/>Background Color</a>
+            <div class="dropdown-menu" role="menu"/>
+        </div>
+    </div>
+
+    <div data-selector="section [class*='col-lg-']"
+        data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor > [class*='col-lg-'], .o_gallery [class*='col-lg-']">
+        <div class="dropdown-submenu">
+            <a tabindex="-1" href="#" class="dropdown-item"><i class="fa fa-magic"/>Styles</a>
+            <div class="dropdown-menu" role="menu">
+                <a href="#" class="dropdown-item" role="menuitem" data-select-class="border">Border</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-select-class="rounded">Rounded</a>
+                <a href="#" class="dropdown-item" role="menuitem" data-select-class="shadow">Shadow</a>
+                <div class="dropdown-divider"/>
+                <a href="#" class="dropdown-item" role="menuitem" data-select-class="">None</a>
             </div>
         </div>
     </div>
 
-    <div data-js='ul'
-         data-selector=":not(li) > ul:has(ul,ol), :not(li) > ol:has(ul,ol)">
-        <a href="#" class="dropdown-item" data-toggle-class="o_ul_folded">Folded list</a>
+    <div data-js="sizing_y"
+        data-selector="section, .row > [class*='col-lg-'], :not(.o_gallery > .container) > .carousel, .parallax, .s_hr, .s_btn">
     </div>
 
-    <div data-js="facebookPage" data-selector=".o_facebook_page">
-        <a href="#" class="dropdown-item" data-fb-page-options="true" data-no-preview="true"><i class="fa fa-facebook"/>Options</a>
+    <div data-js="sizing_x"
+        data-selector=".row > [class*='col-lg-']"
+        data-drop-near=".row > [class*='col-lg-']"
+        data-exclude=".s_col_no_resize > [class*='col-lg-']">
+    </div>
+
+    <div data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax"
+        data-drop-in=":not(p).oe_structure, :not(p)[data-oe-type=html]"/>
+
+    <div data-js="content"
+        data-selector="blockquote, .s_btn, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr"
+        data-drop-near="p, h1, h2, h3, blockquote, .s_btn, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr"
+        data-drop-in=".content">
     </div>
 
-    <div data-js='collapse'
-         data-selector='.accordion > .card:has(> .collapse)'
-         data-drop-in='.accordion:has(> .card > .collapse)'>
+    <div data-js="ul"
+         data-selector=":not(li) > ul:has(ul,ol), :not(li) > ol:has(ul,ol)">
+        <a href="#" class="dropdown-item" data-toggle-class="o_ul_folded">Folded list</a>
     </div>
 
     <div data-js="menu_data"
diff --git a/addons/website_hr_recruitment/__manifest__.py b/addons/website_hr_recruitment/__manifest__.py
index 2dddc307602f4d9ce3c37a1ce9d2f9bd758dfe56..24e0e2d3b75a1ba19bf1c48e20b2d40479f0f972 100644
--- a/addons/website_hr_recruitment/__manifest__.py
+++ b/addons/website_hr_recruitment/__manifest__.py
@@ -13,7 +13,6 @@
         'security/ir.model.access.csv',
         'security/website_hr_recruitment_security.xml',
         'data/config_data.xml',
-        'views/website_hr_recuitment_snippets.xml',
         'views/website_hr_recruitment_templates.xml',
         'views/hr_recruitment_views.xml',
         'views/hr_job_views.xml',
diff --git a/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss b/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss
deleted file mode 100644
index 38eeb6d00b573a1289bbc8549905ec9d6c3d500c..0000000000000000000000000000000000000000
--- a/addons/website_hr_recruitment/static/src/scss/s_hr_rating.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.s_hr_rating {
-    $star: "\f005";
-    $star-o: "\f006";
-    $bolt: "\f0e7";
-    $bolt-o: "_";
-    $heart: "\f004";
-    $heart-o: "\f08a";
-
-    @mixin s-hr-rating-generate-icons($off, $on) {
-        .fa:before {
-            content: $off;
-        }
-        @for $counter from 5 to 0 {
-            &.s_hr_rating_#{$counter} {
-                .fa:nth-of-type(-n+#{$counter}):before {
-                    content: $on;
-                }
-            }
-        }
-    }
-
-    &.s_hr_rating_stars {
-        @include s-hr-rating-generate-icons($star-o, $star);
-    }
-
-    &.s_hr_rating_bolts {
-        @include s-hr-rating-generate-icons($bolt-o, $bolt);
-    }
-
-    &.s_hr_rating_hearts {
-        @include s-hr-rating-generate-icons($heart-o, $heart);
-    }
-
-    &.s_hr_rating_bar {
-        .fa {
-            display: none;
-        }
-
-        .s_hr_rating_bar {
-            height: 15px;
-            padding: 1px;
-            background-color: gray('200');
-            border-radius: 2px;
-            &:before {
-                content: "";
-                border-radius: 2px;
-                background-color: theme-color('primary');
-                display: block;
-                @include size(0, 100%);
-            }
-        }
-
-        @for $counter from 5 to 0 {
-            &.s_hr_rating_#{$counter} {
-                .s_hr_rating_bar:before {
-                    width: percentage($counter/5);
-                }
-            }
-        }
-    }
-}
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index 77f5ca9e4c00f7fa6d79835dc900c15a22426595..0cfdc464ec72b15d2012c47c4d8588801ad9fcef 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -231,50 +231,50 @@
         <div class="container">
             <div class="row">
                 <div class="col-md-6 col-lg-4 mt16 mb16">
-                    <div class="s_hr_rating s_hr_rating_stars s_hr_rating_3">
+                    <div class="s_rating s_rating_stars s_rating_3">
                         <h6 class="mb0">Job Complexity:</h6>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
-                        <div class="s_hr_rating_bar"/>
+                        <div class="s_rating_bar"/>
                     </div>
-                    <div class="s_hr_rating s_hr_rating_stars s_hr_rating_1">
+                    <div class="s_rating s_rating_stars s_rating_1">
                         <h6 class="mb0">Personal Evolution:</h6>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
-                        <div class="s_hr_rating_bar"/>
+                        <div class="s_rating_bar"/>
                     </div>
-                    <div class="s_hr_rating s_hr_rating_stars s_hr_rating_4">
+                    <div class="s_rating s_rating_stars s_rating_4">
                         <h6 class="mb0">Variability of the Job:</h6>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
-                        <div class="s_hr_rating_bar"/>
+                        <div class="s_rating_bar"/>
                     </div>
-                    <div class="s_hr_rating s_hr_rating_stars s_hr_rating_5">
+                    <div class="s_rating s_rating_stars s_rating_5">
                         <h6 class="mb0">Job Security:</h6>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
-                        <div class="s_hr_rating_bar"/>
+                        <div class="s_rating_bar"/>
                     </div>
-                    <div class="s_hr_rating s_hr_rating_stars s_hr_rating_2">
+                    <div class="s_rating s_rating_stars s_rating_2">
                         <h6 class="mb0">Overachieving Possibilities:</h6>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
                         <i class="fa"/>
-                        <div class="s_hr_rating_bar"/>
+                        <div class="s_rating_bar"/>
                     </div>
                 </div>
                 <div class="col-md-6 col-lg-4 mt16 mb16">
diff --git a/addons/website_hr_recruitment/views/website_hr_recuitment_snippets.xml b/addons/website_hr_recruitment/views/website_hr_recuitment_snippets.xml
deleted file mode 100644
index fda2c310a323ca48f30828d6854dc9687a85ae59..0000000000000000000000000000000000000000
--- a/addons/website_hr_recruitment/views/website_hr_recuitment_snippets.xml
+++ /dev/null
@@ -1,61 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-
-<!-- Snippets' Assets  -->
-<template id="website_hr_recuitment_snippets_assets" name="Website HR Recruitment Snippets Assets" inherit_id="website.assets_frontend">
-    <xpath expr="//link[last()]" position="after">
-        <link rel="stylesheet" type="text/scss" href="/website_hr_recruitment/static/src/scss/s_hr_rating.scss"/>
-    </xpath>
-</template>
-
-<!-- Snippets' Templates  -->
-<template id="s_hr_rating" name="HR Rating">
-    <div class="s_hr_rating s_hr_rating_stars s_hr_rating_3">
-        <h6 class="mb0">Job Security:</h6>
-        <i class="fa"/>
-        <i class="fa"/>
-        <i class="fa"/>
-        <i class="fa"/>
-        <i class="fa"/>
-        <div class="s_hr_rating_bar"/>
-    </div>
-</template>
-
-<!-- Add Snippets' into library  -->
-<template id="website_hr_recuitment_snippets_include" inherit_id="website.snippets" name="Website HR Recruitment Snippets Include">
-    <xpath expr="//div[@id='snippet_content']/div[hasclass('o_panel_body')]/*[1]" position="before">
-        <t t-snippet="website_hr_recruitment.s_hr_rating" t-thumbnail="/website_hr_recruitment/static/src/img/ui/s_hr_rating_thumb.jpg"/>
-    </xpath>
-</template>
-
-<!-- Snippets' Options  -->
-<template id="s_hr_rating_options" inherit_id="website.snippet_options" name="Website HR Rectuitment s_hr_rating options">
-  <xpath expr="." position="inside">
-    <div data-js='s_hr_rating_option_type' data-selector=".s_hr_rating" data-drop-in="[class^='col-']">
-        <li class="dropdown-submenu">
-            <a tabindex="-1" href="#">Rating type</a>
-            <div class="dropdown-menu" role="menu">
-                <a href="#" class="dropdown-item" data-select_class="s_hr_rating_stars" role="menuitem"><i class="fa fa-star"/> Stars</a>
-                <a href="#" class="dropdown-item" data-select_class="s_hr_rating_bolts" role="menuitem"><i class="fa fa-bolt"/> Bolts</a>
-                <a href="#" class="dropdown-item" data-select_class="s_hr_rating_hearts" role="menuitem"><i class="fa fa-heart"/> Hearts</a>
-                <a href="#" class="dropdown-item" data-select_class="s_hr_rating_bar" role="menuitem"><i class="fa fa-tasks"/> Bar</a>
-            </div>
-        </li>
-    </div>
-    <div data-js='s_hr_rating_option_value' data-selector=".s_hr_rating">
-        <li class="dropdown-submenu">
-            <a tabindex="-1" href="#">Rating value</a>
-            <div class="dropdown-menu" role="menu">
-                <a href="#" class="dropdown-item" role="menuitem" data-select_class="">0</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-select_class="s_hr_rating_1">1/5</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-select_class="s_hr_rating_2">2/5</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-select_class="s_hr_rating_3">3/5</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-select_class="s_hr_rating_4">4/5</a>
-                <a href="#" class="dropdown-item" role="menuitem" data-select_class="s_hr_rating_5">5/5</a>
-            </div>
-        </li>
-    </div>
-  </xpath>
-</template>
-
-</odoo>
diff --git a/addons/website_mail_channel/views/snippets.xml b/addons/website_mail_channel/views/snippets.xml
index 6f0af554864a5ee0ac5fbc6de0a8c9989ef071d9..a45c7e5f50e70597c9448700885f6855592a9d39 100644
--- a/addons/website_mail_channel/views/snippets.xml
+++ b/addons/website_mail_channel/views/snippets.xml
@@ -9,7 +9,7 @@
     <xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
         <div>
             <div class="oe_snippet_thumbnail">
-                <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/button_channel_subscribe.png" alt="Subscribe"/>
+                <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/snippets_thumbs/s_button_channel_subscribe.png" alt="Subscribe"/>
                 <span class="oe_snippet_thumbnail_title">Discussion Group</span>
             </div>
 
diff --git a/addons/website_mass_mailing/views/snippets_templates.xml b/addons/website_mass_mailing/views/snippets_templates.xml
index 0bb51d36ddab550a955055bf3a97a28cbe73979a..6a2413e9d2062660d70409206b969989c365fc42 100644
--- a/addons/website_mass_mailing/views/snippets_templates.xml
+++ b/addons/website_mass_mailing/views/snippets_templates.xml
@@ -12,7 +12,7 @@
     </xpath>
 
     <xpath expr="//div[@id='snippet_content']//t[@t-snippet][last()]" position="after">
-        <t t-snippet="website_mass_mailing.s_newsletter_subscribe_form" t-thumbnail="/website/static/src/img/blocks/newsletter_subscribe_form.png"/>
+        <t t-snippet="website_mass_mailing.s_newsletter_subscribe_form" t-thumbnail="/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.png"/>
     </xpath>
 </template>