[REF] website: move s_company_team snippet to dedicated files

5 files changed, 1830 insertions, 0 deletions

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 9dc42a5537b..2687bb7471c 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -47,6 +47,7 @@
         'views/snippets/s_image_gallery.xml',
         'views/snippets/s_countdown.xml',
         'views/snippets/s_comparisons.xml',
+        'views/snippets/s_company_team.xml',
         'views/website_views.xml',
         'views/website_visitor_views.xml',
         'views/res_config_settings_views.xml',
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
new file mode 100644
index 00000000000..b5301ee3b72
--- /dev/null
+++ b/addons/website/static/src/scss/website.scss
@@ -0,0 +1,888 @@
+///
+/// This file regroups the website design rules.
+///
+
+$-seen: ();
+$-font-numbers: (
+    o-website-value('font-number'),
+    o-website-value('headings-font-number'),
+    o-website-value('navbar-font-number'),
+    o-website-value('buttons-font-number'),
+);
+@each $-number in $-font-numbers {
+    @if index($-seen, $-number) == null {
+        $-seen: append($-seen, $-number);
+        $-theme-font: nth($o-theme-font-urls, $-number);
+        @if $-theme-font {
+            @import url("https://fonts.googleapis.com/css?family=#{unquote($-theme-font)}&display=swap");
+        }
+    }
+}
+
+:root {
+    // The theme customize modal JS will need to know the value of some scss
+    // variables used to render the user website, and those may have been
+    // customized by themes, the user or anything else (so there is no file to
+    // parse to get them). Those will be printed here as CSS variables.
+
+    // 1) Handle default values
+    --header-font-size: #{$font-size-base};
+
+    // 2) The values in the $theme-colors map are already printed by Bootstrap.
+
+    // 3) The values in the $colors map are also printed by Bootstrap.
+
+    // 4) The Odoo values map, $o-website-values, must be printed.
+    @each $key, $value in $o-website-values {
+        --#{$key}: #{$value};
+    }
+
+    // 5) Use final value used by the theme
+    $-h1-color: if($headings-color == inherit or not $headings-color, $body-color, $headings-color);
+    $-h2-color: if(color('h2'), color('h2'), $-h1-color);
+    $-h3-color: if(color('h3'), color('h3'), $-h2-color);
+    $-h4-color: if(color('h4'), color('h4'), $-h3-color);
+    $-h5-color: if(color('h5'), color('h5'), $-h4-color);
+    $-h6-color: if(color('h6'), color('h6'), $-h5-color);
+
+    --body: #{$body-bg};
+    --text: #{$body-color};
+    --h1: #{$-h1-color};
+    --h2: #{$-h2-color};
+    --h3: #{$-h3-color};
+    --h4: #{$-h4-color};
+    --h5: #{$-h5-color};
+    --h6: #{$-h6-color};
+
+    --logo-height: #{$o-theme-navbar-logo-height};
+    --number-of-fonts: #{length($o-theme-fonts)};
+}
+
+#wrapwrap {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+
+    @if ($o-theme-layout == 'boxed') {
+        @include media-breakpoint-up(md) {
+            padding: 0 7.5%;
+        }
+
+        #wrap {
+            background-color: $white;
+        }
+    }
+}
+
+.navbar {
+    @if ($o-theme-navbar-font != $o-theme-font) {
+        font-family: $o-theme-navbar-font;
+    }
+
+    .nav-item {
+        transition: opacity 1000ms ease 0s;
+    }
+    .o_menu_loading .nav-item {
+        height: 0 !important;
+        overflow: hidden !important;
+        opacity: 0 !important;
+    }
+}
+
+.navbar-light {
+    // Style only navbar-light which Odoo is only supposed to use in standard
+    // anyway. Automatically mimic navbar-dark if the user's menu color is dark.
+    // Note: this only works because navbar-light is defined before navbar-dark,
+    // we may want to use a safest way when possible.
+    @if color('menu') {
+        background-color: color('menu') !important;
+        @if (color-yiq(color('menu')) != $yiq-text-dark) {
+            @extend .navbar-dark;
+        }
+    }
+}
+
+$-header-nav-link-height: $nav-link-height;
+@if o-website-value('header-font-size') {
+    $-header-nav-link-height: o-website-value('header-font-size') * $line-height-base + $nav-link-padding-y * 2;
+    header {
+        font-size: o-website-value('header-font-size');
+
+        .dropdown-menu {
+            font-size: inherit;
+        }
+    }
+}
+@if $o-theme-navbar-logo-height {
+    // With default values, this makes it slightly bigger than standard
+    // navbar-brand, which is what we want
+    header .navbar-brand {
+        font-size: $o-theme-navbar-logo-height / $line-height-base;
+
+        $-logo-padding-y: max(0, $-header-nav-link-height - $o-theme-navbar-logo-height) / 2;
+        &, &.logo {
+            padding-top: $-logo-padding-y;
+            padding-bottom: $-logo-padding-y;
+        }
+    }
+}
+
+.o_footer {
+    @if color('footer') {
+        @include o-bg-color(color('footer'));
+    }
+
+    > #footer {
+        // FIXME needed to prevent the dropzone at the bottom of the #wrap element
+        // to be at the same place of the dropzone at the top of the #footer element
+        border-top: 1px solid transparent;
+    }
+}
+h2, h3, h4, h5, h6 {
+    color: color('h2');
+}
+h3, h4, h5, h6 {
+    color: color('h3');
+}
+h4, h5, h6 {
+    color: color('h4');
+}
+h5, h6 {
+    color: color('h5');
+}
+h6 {
+    color: color('h6');
+}
+.btn {
+    @if ($o-theme-buttons-font != $o-theme-font) {
+        font-family: $o-theme-buttons-font;
+    }
+}
+
+// Texts
+font[style*='background'],
+font[class*='bg-'] {
+    padding: 2px 6px 4px;
+}
+
+// Icons
+.fa {
+    font-family: "FontAwesome" !important;
+    $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); }
+    }
+}
+
+// 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_repeat {
+        background-size: auto;
+        background-repeat: repeat;
+    }
+
+    // Compatibility <= 13.0, TODO remove?
+    // -----------------------------------
+    &.o_bg_img_opt_contain {
+        background-size: contain;
+        background-position: center center;
+    }
+    &.o_bg_img_opt_custom {
+        background-size: auto;
+    }
+    &.o_bg_img_opt_repeat_x {
+        background-repeat: repeat-x;
+    }
+    &.o_bg_img_opt_repeat_y {
+        background-repeat: repeat-y;
+    }
+}
+
+// Background videos
+.o_background_video {
+    position: relative;
+
+    > * {
+        position: relative;
+    }
+}
+.o_bg_video_container {
+    @include o-position-absolute(0, 0 ,0 ,0);
+    overflow: hidden;
+}
+.o_bg_video_iframe {
+    position: relative;
+    pointer-events: none !important;
+}
+.o_bg_video_loading {
+    @include o-position-absolute(0, 0 ,0 ,0);
+}
+
+// Probably outdated
+// Lists
+.o_ul_toggle {
+    display: none;
+}
+
+.o_ul_folded {
+    .o_close {
+        display: none!important;
+    }
+    .o_ul_toggle_self,
+    .o_ul_toggle_next {
+        display: inline-block;
+        line-height: inherit;
+        float: left;
+        position: relative;
+        margin-left: -1em;
+        top: -0.15em;
+        left: 0.2em;
+        font-size: 1.4em;
+        text-decoration: none;
+        &.o_open:before {
+            content: "";
+        }
+        &:before {
+            content: "";
+        }
+    }
+}
+
+// Probably outdated
+// Disable fixed height
+@media (max-width: 400px) {
+    section,
+    .parallax,
+    .row,
+    .hr,
+    .blockquote {
+        height: auto !important;
+    }
+}
+
+// Probably outdated
+// Table
+.table_desc {
+    margin: 0 0 20px 0;
+    width: 100%;
+    word-break: break-all;
+    border: 1px solid #dddddd;
+}
+.table_heading {
+    background-color: #f5f5f5;
+    border: 1px solid #dddddd;
+    color: #666666;
+    font-size: 14px;
+    padding: 4px;
+}
+table.table_desc tr td {
+    text-align: left;
+    padding: 5px;
+    font-size: 13px;
+    &:first-child {
+        width: 25%;
+        font-weight: bold;
+        border-bottom: 1px solid #c9c9c9;
+        border-right: 1px solid #c9c9c9;
+        border-left: none;
+    }
+    &:last-child {
+        border-bottom: 1px solid #c9c9c9;
+    }
+}
+
+// Jumbotron
+.jumbotron {
+    border-radius: 0;
+}
+
+//
+// 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; }
+    }
+    .s_title_underlined {
+        @extend %o-page-header;
+    }
+    .s_title_small_caps {
+        font-variant: small-caps;
+    }
+    .s_title_transparent {
+        opacity: .5;
+    }
+    .s_title_thin {
+        font-weight: 300;
+    }
+}
+
+
+// Features Grid
+.s_features_grid {
+    &_content {
+        overflow: hidden;
+        p {
+            margin-bottom: 0;
+        }
+    }
+    &_icon {
+        float: left;
+        margin-right: $grid-gutter-width/2;
+    }
+}
+
+// FAQ
+.s_faq_collapse {
+    .accordion .card {
+        .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;
+        }
+    }
+    .card-body p:last-child,
+    .card-body ul:last-child {
+        margin-bottom: 0;
+    }
+}
+
+
+// References
+.s_references .img-thumbnail {
+    border: none;
+}
+
+// Carousel -> TODO: should be versioned in 000.scss file but how ?
+.s_carousel,
+.s_quotes_carousel {
+
+    // Controls
+    .carousel-control-prev,
+    .carousel-control-next {
+        cursor: pointer;
+        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;
+        }
+    }
+    // Content
+    .carousel-inner {
+        overflow: hidden;
+        height: 100%;
+        .carousel-item {
+            height: 100%;
+        }
+    }
+    // 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" #{"/*rtl:'\f054'*/"}; margin-left: 1.5rem; }
+        .carousel-control-next-icon:before { content: "\f054" #{"/*rtl:'\f053'*/"}; 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);
+            }
+        }
+    }
+}
+
+
+.carousel .container {
+    .carousel-img img {
+        max-height: 95%;
+        padding: 10px;
+    }
+    > .carousel-caption {
+        @include o-position-absolute($right: 50%, $left: 50%);
+        bottom: 20px;
+        > div {
+            position: absolute;
+            text-align: left;
+            padding: 20px;
+            background: rgba(0, 0, 0, 0.4);
+            bottom: 20px;
+        }
+    }
+    > .carousel-image {
+        @include o-position-absolute($top: 5%, $bottom: 5%);
+        max-height: 90%;
+        margin: 0 auto;
+    }
+    .carousel-item.text_image .container {
+        > .carousel-caption {
+            left: 10%;
+            > div {
+                right: 50%;
+                margin-right: -20%;
+                max-width: 550px;
+            }
+        }
+        > .carousel-image {
+            right: 10%;
+            left: 50%;
+        }
+    }
+    .carousel-item.image_text .container {
+        > .carousel-caption {
+            right: 10%;
+            > div {
+                left: 50%;
+                margin-left: -20%;
+                max-width: 550px;
+            }
+        }
+        > .carousel-image {
+            right: 50%;
+            left: 10%;
+        }
+    }
+    .carousel-item.text_only .container {
+        > .carousel-caption {
+            left: 10%;
+            right: 10%;
+            top: 10%;
+            bottom: auto;
+            > div {
+                text-align: center;
+                background: transparent;
+                bottom: auto;
+                width: 100%;
+            }
+        }
+        > .carousel-image {
+            display: none !important;
+        }
+    }
+}
+
+
+// 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:"";
+            }
+        }
+    }
+}
+
+// Parallax
+.parallax {
+    position: relative;
+
+    // TODO this introduces a limitation: no dropdown will be able to
+    // overflow. Maybe there is a better way to find.
+    &:not(.s_parallax_no_overflow_hidden) {
+        overflow: hidden;
+    }
+
+    > * {
+        position: relative;
+    }
+    > .s_parallax_bg {
+        @include o-position-absolute(0, 0, 0, 0);
+        display: block;
+        background-color: inherit;
+        background-size: cover;
+        background-attachment: scroll;
+        pointer-events: none;
+
+        &::after {
+            content: "";
+            @include o-position-absolute(0, 0, 0, 0);
+            display: block;
+            background-color: inherit;
+        }
+    }
+    @include media-breakpoint-up(xl) {
+        // Fixed backgrounds are disabled when using a mobile/tablet device,
+        // which is not a big deal but, on some of them (iOS...), defining the
+        // background as fixed breaks the background-size/position props.
+        // So we enable this only for >= XL devices.
+        &.s_parallax_is_fixed > .s_parallax_bg {
+            background-attachment: fixed;
+        }
+    }
+}
+
+
+//
+// Layout
+//
+
+// Header
+.o_header_affix {
+    display: block;
+    @include o-position-absolute(0, 0, auto, 0);
+    position: fixed;
+    z-index: $zindex-modal - 20;
+    background: $light;
+    margin-top: -999px;
+    transition: margin-top 500ms ease 0s;
+    @include media-breakpoint-down(sm) {
+        .navbar-collapse {
+            max-height: 70vh;
+            overflow-y: auto;
+        }
+    }
+    &.affixed {
+        margin-top: 0px !important; // the default margin-top is adapted in JS
+    }
+}
+#oe_main_menu_navbar + #wrapwrap .o_header_affix {
+    top: $o-navbar-height;
+}
+
+// Navbar
+.navbar .o_extra_menu_items.show > ul {
+    > li {
+        + li {
+            border-top: 1px solid gray('200');
+        }
+        > a.dropdown-toggle {
+            background-color: gray('200');
+            color: inherit; // Useful when the toggle is active
+            pointer-events: none; // hack to prevent clicking on it because dropdown always opened
+        }
+        > ul { // remove dropdown-menu default style as it is nested in another one
+            position: static;
+            float: none;
+            display: block;
+            max-height: none;
+            margin-top: 0;
+            padding: 0;
+            border: none;
+            box-shadow: none;
+        }
+    }
+}
+
+// Mega menu
+.o_mega_menu {
+    width: 100%;
+    padding: 0;
+    margin-top: 0;
+    border-radius: 0;
+    background-clip: unset; // Remove the 1px gap introduced by BS4
+
+    .container, .container-fluid {
+        // Need to reforce those because they are removed since its a container
+        // inside another container (the one in the navbar)
+        padding-left: $grid-gutter-width / 2;
+        padding-right: $grid-gutter-width / 2;
+    }
+}
+.o_mega_menu_container_size {
+    @include media-breakpoint-up(md) {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    $-mm-max-widths: ();
+    @each $k, $v in $container-max-widths {
+        $-mm-max-widths: map-merge($-mm-max-widths, (
+            #{$k}: $v - $grid-gutter-width,
+        ));
+    }
+    @include make-container-max-widths($-mm-max-widths);
+}
+
+// Copyright
+.o_footer_copyright {
+    padding: 8px;
+    .js_language_selector {
+        display: inline-block;
+    }
+    @include media-breakpoint-up(md) {
+        .row {
+            display: flex;
+            > div {
+                margin: auto 0;
+            }
+        }
+    }
+}
+
+#wrapwrap.o_header_overlay {
+    > header:not(.o_header_affix) {
+        @include o-position-absolute(0, 0, auto, 0);
+        z-index: 1000;
+
+        > .navbar {
+            background-color: transparent !important;
+            border-color: transparent;
+
+            .nav-item {
+                > .nav-link {
+                    background-color: transparent;
+                    color: inherit;
+                }
+                &.show, &.active {
+                    > .nav-link {
+                        background-color: white;
+                        color: black;
+                    }
+                }
+            }
+        }
+    }
+}
+// Figure with special style
+.o_figure_relative_layout {
+    position: relative;
+
+    .figure-img {
+        margin-bottom: 0;
+    }
+    .figure-caption {
+        @include o-position-absolute(auto, 0, 0, 0);
+        @include o-bg-color(rgba(theme-color('dark'), $o-theme-figcaption-opacity));
+        padding: $tooltip-padding-y $tooltip-padding-x;
+        font-weight: $font-weight-bold;
+        a {
+            color: inherit;
+        }
+    }
+}
+
+@each $color, $value in $theme-colors {
+    .bg-#{$color}-light {
+        background-color: rgba($value, 0.1);
+    }
+}
+
+@each $media, $color in $o-social-colors {
+    @include text-emphasis-variant(".text-#{$media}", $color);
+}
+
+// TODO: Will be handled properly in master/saas-12.2, temp fix for website_event.registration_attendee_details
+.modal-footer > .float-left {
+    margin-right: auto;
+}
+
+// CoverProperties
+.o_record_cover_container {
+    position: relative;
+
+    .o_record_cover_component {
+        @include o-position-absolute(0, 0, 0, 0);
+
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+    }
+}
diff --git a/addons/website/static/src/snippets/s_company_team/000.scss b/addons/website/static/src/snippets/s_company_team/000.scss
new file mode 100644
index 00000000000..7947b831094
--- /dev/null
+++ b/addons/website/static/src/snippets/s_company_team/000.scss
@@ -0,0 +1,8 @@
+
+.s_company_team {
+    @include media-breakpoint-down(md) {
+        img {
+            max-width: 50%;
+        }
+    }
+}
diff --git a/addons/website/views/snippets/s_company_team.xml b/addons/website/views/snippets/s_company_team.xml
new file mode 100644
index 00000000000..b7b57c15fd3
--- /dev/null
+++ b/addons/website/views/snippets/s_company_team.xml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_company_team" name="Company Team">
+    <section class="s_company_team">
+        <div class="container">
+            <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_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">
+                            <h4>Tony Fred, CEO</h4>
+                            <p class="text-muted">
+                                Founder and chief visionary, Tony is the driving force behind Company. He loves
+                                to keep his hands full by participating in the development of the software,
+                                marketing and the Customer Experience strategies.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6 pt16 pb16">
+                    <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>
+                        <div class="col-lg-8">
+                            <h4>Mich Stark, COO</h4>
+                            <p class="text-muted">
+                                Mich loves taking on challenges. With his multi-year experience as Commercial
+                                Director in the software industry, Mich has helped Company to get where it
+                                is today. Mich is among the best minds.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6 pt16 pb16">
+                    <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>
+                        <div class="col-lg-8">
+                            <h4>Aline Turner, CTO</h4>
+                            <p class="text-muted">
+                                Aline is one of the iconic person in life who can say she loves what she does.
+                                She mentors 100+ in-house developers and looks after the community of over
+                                thousands developers.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6 pt16 pb16">
+                    <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>
+                        <div class="col-lg-8">
+                            <h4>Iris Joe, CFO</h4>
+                            <p class="text-muted">
+                                Iris, with her international experience, helps us easily understand the numbers and
+                                improves them. She is determined to drive success and delivers her professional
+                                acumen to bring Company at the next level.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="assets_snippet_s_company_team_css_000" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_company_team/000.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
new file mode 100644
index 00000000000..0ea69fc4bfe
--- /dev/null
+++ b/addons/website/views/snippets/snippets.xml
@@ -0,0 +1,853 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_call_to_action" name="Call to Action">
+    <section class="s_call_to_action bg-200 pt48 pb24">
+        <div class="container">
+            <div class="row">
+                <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>
+        </div>
+    </section>
+</template>
+
+<template id="s_references" name="References">
+    <section class="s_references bg-200 pt16 pb16">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-2 pt32">
+                    <h4>References</h4>
+                </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="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_faq_collapse" name="Accordion">
+    <section class="s_faq_collapse pt48 pb32">
+        <div class="container">
+            <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>
+            <div class="row s_col_no_bgcolor">
+                <div class="col-lg-12 pt16 pb16">
+                    <div id="myCollapse" class="accordion" role="tablist">
+                        <div class="card bg-white">
+                            <a href="#" role="tab" data-toggle="collapse" aria-expanded="true" class="card-header">Terms of service</a>
+                            <div class="collapse show" role="tabpanel">
+                                <div class="card-body">
+                                    <p class="card-text">These terms of service ("Terms", "Agreement") are an agreement between the website ("Website operator", "us", "we" or "our") and you ("User", "you" or "your"). This Agreement sets forth the general terms and conditions of your use of this website and any of its products or services (collectively, "Website" or "Services").</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card bg-white">
+                            <a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header">Links to other Websites</a>
+                            <div class="collapse" role="tabpanel">
+                                <div class="card-body">
+                                    <p class="card-text">Although this Website may be linked to other websites, we are not, directly or indirectly, implying any approval, association, sponsorship, endorsement, or affiliation with any linked website, unless specifically stated herein.</p>
+                                    <p class="card-text">You should carefully review the legal statements and other conditions of use of any website which you access through a link from this Website. Your linking to any other off-site pages or other websites is at your own risk.</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card bg-white">
+                            <a href="#" role="tab" data-toggle="collapse" aria-expanded="false" class="collapsed card-header">Use of Cookies</a>
+                            <div class="collapse" role="tabpanel">
+                                <div class="card-body">
+                                    <p class="card-text">Website may use cookies to personalize and facilitate maximum navigation of the User by this site. The User may configure his / her browser to notify and reject the installation of the cookies sent by us.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_features_grid" name="Features Grid">
+    <section class="s_features_grid pt48 pb24">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-6 s_col_no_bgcolor pb24">
+                    <div class="row">
+                        <div class="col-lg-12 pb24" data-name="Box">
+                            <h2>First list of Features</h2>
+                            <h5 class="text-primary">Add a great slogan.</h5>
+                        </div>
+                        <div class="col-lg-12 pt16 pb16" data-name="Box">
+                            <i class="fa fa-2x fa-font-awesome rounded-circle bg-primary s_features_grid_icon"/>
+                            <div class="s_features_grid_content">
+                                <h4>Change Icons</h4>
+                                <p>Double click an icon to replace it with one of your choice.</p>
+                            </div>
+                        </div>
+                        <div class="col-lg-12 pt16 pb16" data-name="Box">
+                            <i class="fa fa-2x fa-files-o rounded-circle bg-primary s_features_grid_icon"/>
+                            <div class="s_features_grid_content">
+                                <h4>Duplicate</h4>
+                                <p>Duplicate blocks and columns to add more features.</p>
+                            </div>
+                        </div>
+                        <div class="col-lg-12 pt16 pb16" data-name="Box">
+                            <i class="fa fa-2x fa-trash rounded-circle bg-primary s_features_grid_icon"/>
+                            <div class="s_features_grid_content">
+                                <h4>Delete Blocks</h4>
+                                <p>Select and delete blocks to remove some features.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6 s_col_no_bgcolor pb24">
+                    <div class="row">
+                        <div class="col-lg-12 pb24" data-name="Box">
+                            <h2>Second list of Features</h2>
+                            <h5 class="text-secondary">Add a great slogan.</h5>
+                        </div>
+                        <div class="col-lg-12 pt16 pb16" data-name="Box">
+                            <i class="fa fa-2x fa-magic rounded bg-secondary s_features_grid_icon"/>
+                            <div class="s_features_grid_content">
+                                <h4>Great Value</h4>
+                                <p>Turn every feature into a benefit for your reader.</p>
+                            </div>
+                        </div>
+                        <div class="col-lg-12 pt16 pb16" data-name="Box">
+                            <i class="fa fa-2x fa-eyedropper rounded bg-secondary s_features_grid_icon"/>
+                            <div class="s_features_grid_content">
+                                <h4>Edit Styles</h4>
+                                <p>You can edit colors and background to highlight features.</p>
+                            </div>
+                        </div>
+                        <div class="col-lg-12 pt16 pb16" data-name="Box">
+                            <i class="fa fa-2x fa-picture-o rounded bg-secondary s_features_grid_icon"/>
+                            <div class="s_features_grid_content">
+                                <h4>Sample Icons</h4>
+                                <p>All these icons are completely free for commercial use.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_tabs" name="Tabs">
+    <section class="s_tabs">
+        <div class="container">
+            <div class="row s_col_no_bgcolor">
+                <div class="col-lg-8 offset-lg-2 pt48 pb48">
+                    <div class="card bg-white">
+                        <div class="card-header">
+                            <ul class="nav nav-tabs card-header-tabs" role="tablist">
+                                <li class="nav-item">
+                                    <a class="nav-link active"
+                                        id="nav_tabs_link_1"
+                                        data-toggle="tab"
+                                        href="#nav_tabs_content_1"
+                                        role="tab"
+                                        aria-controls="nav_tabs_content_1"
+                                        aria-selected="true">Home</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link"
+                                        id="nav_tabs_link_2"
+                                        data-toggle="tab"
+                                        href="#nav_tabs_content_2"
+                                        role="tab"
+                                        aria-controls="nav_tabs_content_2"
+                                        aria-selected="false">Profile</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a class="nav-link"
+                                        id="nav_tabs_link_3"
+                                        data-toggle="tab"
+                                        href="#nav_tabs_content_3"
+                                        role="tab"
+                                        aria-controls="nav_tabs_content_3"
+                                        aria-selected="false">Contact</a>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="card-body tab-content">
+                            <div class="tab-pane fade show active"
+                                id="nav_tabs_content_1"
+                                role="tabpanel"
+                                aria-labelledby="nav_tabs_link_1">
+                                <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_tabs_content_2"
+                                role="tabpanel"
+                                aria-labelledby="nav_tabs_link_2">
+                                <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_tabs_content_3"
+                                role="tabpanel"
+                                aria-labelledby="nav_tabs_link_3">
+                                <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_chart" name="Chart">
+    <div class="s_chart" data-type="bar" data-legend-position="top" data-tooltip-display="true" data-stacked="false" data-border-width="2"
+            data-data="{
+                &quot;labels&quot;:[&quot;First&quot;,&quot;Second&quot;,&quot;Third&quot;,&quot;Fourth&quot;,&quot;Fifth&quot;],
+                &quot;datasets&quot;:[
+                    {
+                        &quot;label&quot;:&quot;One&quot;,
+                        &quot;data&quot;:[&quot;12&quot;,&quot;24&quot;,&quot;18&quot;,&quot;17&quot;,&quot;10&quot;],
+                        &quot;backgroundColor&quot;:&quot;alpha&quot;,
+                        &quot;borderColor&quot;:&quot;alpha&quot;
+                    }
+                ]
+            }">
+        <h2>A Chart Title</h2>
+        <canvas/>
+    </div>
+</template>
+
+<template id="s_parallax" name="Parallax">
+    <section class="s_parallax parallax s_parallax_is_fixed bg-black-50 pt160 pb160" data-scroll-background-ratio="1">
+        <span class="s_parallax_bg oe_img_bg oe_custom_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 75%;"/>
+        <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>
+            </section>
+        </div>
+    </section>
+</template>
+
+<template id="s_quotes_carousel" name="Quotes">
+    <section class="s_quotes_carousel_wrapper">
+        <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 bg-200 pt80 pb80" data-name="Slide">
+                    <div class="container">
+                        <div class="row content">
+                            <blockquote class="carousel-content col-lg-6 bg-white offset-lg-3">
+                                <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 bg-white">
+                                <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 bg-white">
+                                <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>
+    </section>
+</template>
+
+<!-- Mega menu snippets -->
+
+<template id="s_mega_menu_multi_menus" name="Multi-Menus">
+    <section class="s_mega_menu_multi_menus py-4">
+        <div class="container">
+            <div class="row">
+                <t t-set="menu1_title">First Menu</t>
+                <t t-set="menu2_title">Second Menu</t>
+                <t t-set="menu3_title">Third Menu</t>
+                <t t-set="menu4_title">Last Menu</t>
+                <t t-foreach="[menu1_title, menu2_title, menu3_title, menu4_title]" t-as="menu_title">
+                    <div class="col-lg-3 py-2 text-center">
+                        <h4 t-esc="menu_title"/>
+                        <nav class="nav flex-column">
+                            <t t-foreach="3" t-as="i">
+                                <t t-set="text">Menu Item %s</t>
+                                <t t-set="text" t-value="text % (i + 1)"/>
+                                <a href="#" class="nav-link" data-name="Menu Item"
+                                   t-esc="text"/>
+                            </t>
+                        </nav>
+                    </div>
+                </t>
+            </div>
+        </div>
+    </section>
+</template>
+
+<template id="s_mega_menu_menu_image_menu" name="Menu - Image - Menu">
+    <section class="s_mega_menu_menu_image_menu py-4">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-4 py-2 text-center">
+                    <h4>Left Menu</h4>
+                    <nav class="nav flex-column">
+                        <t t-foreach="3" t-as="i">
+                            <t t-set="text">Menu Item %s</t>
+                            <t t-set="text" t-value="text % (i + 1)"/>
+                            <a href="#" class="nav-link" data-name="Menu Item"
+                                t-esc="text"/>
+                        </t>
+                    </nav>
+                </div>
+                <div class="col-lg-4 py-2 text-center">
+                    <img class="img-fluid" src="/web/image/website.s_mega_menu_menu_image_menu_default_image"/>
+                </div>
+                <div class="col-lg-4 py-2 text-center">
+                    <h4>Right Menu</h4>
+                    <nav class="nav flex-column">
+                        <t t-foreach="3" t-as="i">
+                            <t t-set="text">Menu Item %s</t>
+                            <t t-set="text" t-value="text % (i + 1)"/>
+                            <a href="#" class="nav-link" data-name="Menu Item"
+                                t-esc="text"/>
+                        </t>
+                    </nav>
+                </div>
+            </div>
+        </div>
+    </section>
+</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_mega_menu" class="o_panel d-none">
+                <div class="o_panel_header">
+                    <i class="fa fa-puzzle-piece"/> Mega Menu
+                </div>
+                <div class="o_panel_body">
+                    <t t-snippet="website.s_mega_menu_multi_menus" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_multi_menus.png"/>
+                    <t t-snippet="website.s_mega_menu_menu_image_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_mega_menu_menu_image_menu.png"/>
+                </div>
+            </div>
+
+            <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_banner" t-thumbnail="/website/static/src/img/snippets_thumbs/s_banner.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_title" t-thumbnail="/website/static/src/img/snippets_thumbs/s_title.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_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>
+
+            <div id="snippet_feature" class="o_panel">
+                <div class="o_panel_header">
+                    <i class="fa fa-diamond"/> Features
+                </div>
+                <div class="o_panel_body">
+                    <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"/>
+                    <t t-snippet="website.s_countdown" t-thumbnail="/website/static/src/img/snippets_thumbs/s_countdown.png"/>
+                </div>
+            </div>
+
+            <div id="snippet_effect" class="o_panel">
+                <div class="o_panel_header">
+                    <i class="fa fa-magic icon-fix"/> Effects
+                </div>
+                <div class="o_panel_body">
+                    <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>
+
+            <div id="snippet_content" class="o_panel">
+                <div class="o_panel_header">
+                    <i class="fa fa-indent"/> Inner content
+                </div>
+                <div class="o_panel_body">
+                    <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"/>
+                    <t t-snippet="website.s_chart" t-thumbnail="/website/static/src/img/snippets_thumbs/s_chart.png"/>
+                </div>
+            </div>
+        </div>
+    </xpath>
+
+    <xpath expr="//div[@id='snippet_options']/t" position="attributes">
+        <attribute name="t-call">website.snippet_options</attribute>
+    </xpath>
+</template>
+
+<template id="external_snippets" inherit_id="website.snippets" priority="8">
+    <xpath expr="//div[@id='snippet_feature']//t[@t-snippet][last()]" position="after">
+        <t id="newsletter_popup_snippet" t-install="mass_mailing" string="Newsletter Popup" t-thumbnail="/website/static/src/img/snippets_thumbs/newsletter_subscribe_popup.png"/>
+        <t id="newsletter_block_snippet" t-install="mass_mailing" string="Newsletter Block" t-thumbnail="/website/static/src/img/snippets_thumbs/s_newsletter_block.png"/>
+        <t t-install="website_twitter" string="Twitter Scroller" t-thumbnail="/website/static/src/img/snippets_thumbs/s_twitter_scroll.png"/>
+        <t t-install="website_form" string="Form Builder" t-thumbnail="/website/static/src/img/s_website_form.png"/>
+        <t id="s_products_searchbar" t-install="website_sale" string="Products Search" t-thumbnail="/website/static/src/img/snippets_thumbs/s_products_searchbar.png"/>
+        <t id="s_products_recently_viewed" t-install="website_sale" string="Products Recently Viewed" t-thumbnail="/website/static/src/img/snippets_thumbs/s_products_recently_viewed.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/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 id="newsletter_snippet" t-install="mass_mailing" string="Newsletter" t-thumbnail="/website/static/src/img/snippets_thumbs/s_newsletter_subscribe_form.png"/>
+        <t id="s_products_searchbar_input" t-install="website_sale" string="Products Search Input" t-thumbnail="/website/static/src/img/snippets_thumbs/s_products_searchbar.png"/>
+    </xpath>
+</template>
+
+<template id="snippet_options">
+    <t t-call="web_editor.snippet_options"/>
+
+    <!-- COLOR | .s_three_columns | .s_comparisons -->
+    <div data-selector=".s_three_columns .row > div, .s_comparisons .row > div, .s_tabs .row > div"
+         data-target=".card">
+        <we-colorpicker string="Color"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"/>
+    </div>
+
+    <!-- COLOR | .s_cards -->
+    <div data-selector=".s_card, .accordion .card">
+        <we-colorpicker string="Color"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"/>
+    </div>
+
+    <!-- H-ALIGN | .s_btn -->
+    <div data-selector=".s_btn, .s_share">
+        <we-select string="Alignment">
+            <we-button data-select-class="text-left">Left</we-button>
+            <we-button data-select-class="text-center">Center</we-button>
+            <we-button data-select-class="text-right">Right</we-button>
+        </we-select>
+    </div>
+
+    <div data-selector=".s_alert, .s_card">
+        <we-select string="Width">
+            <we-button data-select-class="w-25">25%</we-button>
+            <we-button data-select-class="w-50">50%</we-button>
+            <we-button data-select-class="w-75">75%</we-button>
+            <we-button data-select-class="w-100">100%</we-button>
+        </we-select>
+    </div>
+
+    <!-- Carousel | .s_carousel | .s_quotes_carousel -->
+    <div data-js="Carousel"
+        data-selector="section"
+        data-target="> .carousel">
+        <we-select string="Transition">
+            <we-button data-select-class="slide">Slide</we-button>
+            <we-button data-select-class="carousel-fade slide">Fade</we-button>
+            <we-divider/>
+            <we-button data-select-class="">None</we-button>
+        </we-select>
+        <we-select string="Style">
+            <we-button data-select-class="s_carousel_bordered">Bordered</we-button>
+            <we-button data-select-class="s_carousel_boxed">Boxed</we-button>
+            <we-button data-select-class="s_carousel_rounded">Rounded</we-button>
+            <we-divider/>
+            <we-button data-select-class="s_carousel_default">Default</we-button>
+        </we-select>
+        <we-input string="Speed" class="o_we_inline"
+                  data-select-data-attribute="0s" data-attribute-name="interval"
+                  data-unit="s" data-save-unit="ms" data-step="0.1"/>
+    </div>
+
+    <div data-js="CarouselItem"
+         data-selector=".carousel-item">
+        <we-button data-slide="left" data-no-preview="true" class="fa fa-fw fa-angle-left"/>
+        <we-button data-slide="right" data-no-preview="true" class="fa fa-fw fa-angle-right"/>
+        <we-button data-add-slide="true" data-no-preview="true" class="fa fa-fw fa-plus"/>
+        <we-button data-remove-slide="true" data-no-preview="true" class="fa fa-fw fa-minus"/>
+    </div>
+
+    <div data-js="navTabs" data-selector="section .row > div" data-target=".nav-tabs">
+        <we-button data-add-tab="1" data-no-preview="true">Add Tab</we-button>
+        <we-button data-remove-tab="1" data-name="remove_tab_opt" data-no-preview="true">Remove Tab</we-button>
+    </div>
+
+    <!-- Accordion -->
+    <div data-js="collapse"
+         data-selector='.accordion > .card'
+         data-drop-in='.accordion:has(> .card)'/>
+
+    <div data-js="layout_column"
+        data-selector="section"
+        data-target="> * > .row:not(.s_nb_column_fixed)">
+        <we-select string="Number of columns" data-no-preview="true">
+            <we-button data-select-count="1">1</we-button>
+            <we-button data-select-count="2">2</we-button>
+            <we-button data-select-count="3">3</we-button>
+            <we-button data-select-count="4">4</we-button>
+            <we-button data-select-count="5">5</we-button>
+            <we-button data-select-count="6">6</we-button>
+        </we-select>
+    </div>
+
+    <!-- Move snippets around -->
+    <div data-js="SnippetMove"
+         data-selector="section">
+        <we-button class="fa fa-fw fa-angle-up" data-move-snippet="prev" data-no-preview="true"/>
+        <we-button class="fa fa-fw fa-angle-down" data-move-snippet="next" data-no-preview="true"/>
+    </div>
+    <div data-js="SnippetMove"
+         data-selector=".row:not(.s_col_no_resize) > div">
+        <we-button class="fa fa-fw fa-angle-left" data-move-snippet="prev" data-no-preview="true"/>
+        <we-button class="fa fa-fw fa-angle-right" data-move-snippet="next" data-no-preview="true"/>
+    </div>
+
+    <!--  V-ALIGN -->
+    <div id="row_valign_snippet_option" data-selector=".s_text_image, .s_image_text, .s_three_columns" data-target=".row">
+        <we-select string="Alignment">
+            <we-button data-select-class="align-items-start">Top</we-button>
+            <we-button data-select-class="align-items-center">Middle</we-button>
+            <we-button data-select-class="align-items-end">Bottom</we-button>
+            <we-divider/>
+            <we-button data-select-class="align-items-stretch">Equal height</we-button>
+        </we-select>
+    </div>
+
+    <!-- Background Image -->
+    <div data-js="background" string="Background"
+        data-selector="section, .parallax, .carousel-item"
+        data-exclude=".s_hr, .s_image_gallery, .o_gallery .carousel-item"/>
+
+    <!-- Background Image Size/Position -->
+    <div data-js="BackgroundPosition"
+        data-selector="section, .parallax, .carousel-item"
+        data-exclude=".o_gallery .carousel-item">
+        <we-row>
+            <we-select data-no-preview="true">
+                <we-button data-background-type="cover">Cover</we-button>
+                <we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
+            </we-select>
+            <we-button class="fa fa-fw fa-arrows" title="Background Position"
+                       data-background-position-overlay="true" data-no-preview="true"/>
+        </we-row>
+        <we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
+            <we-input string="Width" data-select-style="auto" data-unit="px"/>
+            <we-input string="Height" data-select-style="auto" data-unit="px"/>
+        </we-multi>
+    </div>
+
+    <!-- Parallax -->
+    <div data-js="parallax" data-selector=".parallax">
+        <we-select string="Scroll Speed" data-attribute-name="scrollBackgroundRatio" data-attribute-default-value="0">
+            <we-button data-select-data-attribute="0">No-scroll</we-button>
+            <we-divider/>
+            <we-button data-select-data-attribute="1">Fixed</we-button>
+            <we-divider/>
+            <we-button data-select-data-attribute="0.6">Very Slow</we-button>
+            <we-button data-select-data-attribute="1.2">Slow</we-button>
+            <we-button data-select-data-attribute="1.6">Fast</we-button>
+            <we-button data-select-data-attribute="2">Very Fast</we-button>
+        </we-select>
+    </div>
+
+    <!-- Color | Section -->
+    <div id="so_main_colorpicker"
+         data-selector="section, .carousel-item"
+         data-exclude=".parallax, .o_gallery .carousel-item">
+        <we-colorpicker string="Background Color"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"/>
+    </div>
+
+    <!-- FILTER | .s_parallax -->
+    <div data-selector=".parallax">
+        <we-colorpicker string="Filter"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"
+            data-excluded="common, theme, custom"/>
+    </div>
+
+    <!-- Color | Columns -->
+    <div data-selector="section .row > div"
+         data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
+        <we-colorpicker string="Background Color"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"/>
+    </div>
+
+    <div data-selector="section .row > div"
+        data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
+        <we-row string="Border" class="o_we_inline">
+            <we-colorpicker data-dependencies="border_width_opt"
+                            data-select-style="true" data-css-property="border-color" data-color-prefix="border-"/>
+            <we-input class="o_we_inline" data-name="border_width_opt"
+                      data-select-style="0" data-css-property="border-width"
+                      data-unit="px" data-extra-class="border"/>
+        </we-row>
+        <we-input string="Rounded" class="o_we_inline"
+                  data-dependencies="border_width_opt"
+                  data-select-style="0" data-css-property="border-radius"
+                  data-unit="px" data-extra-class="rounded"/>
+        <we-checkbox string="Shadow" data-select-class="shadow"/>
+    </div>
+
+    <div data-js="sizing_y"
+        data-selector="section, .row > div, .parallax, .s_hr, .s_btn, .carousel-item"
+        data-exclude="section:has(> .carousel), .o_gallery .carousel-item"/>
+
+    <div data-js="sizing_x"
+        data-selector=".row > div"
+        data-drop-near=".row > div"
+        data-exclude=".s_col_no_resize.row > div"/>
+
+    <div id="so_snippet_addition"
+        data-selector="section, .parallax"
+        data-drop-in=":not(p).oe_structure:not(.oe_structure_solo), :not(p)[data-oe-type=html], :not(p).oe_structure.oe_structure_solo:not(:has(> section, > div))"/>
+
+    <!-- Main content drop -->
+    <div id="so_content_addition"
+        data-selector="blockquote, .s_btn, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_countdown, .s_chart"
+        data-drop-near="p, h1, h2, h3, blockquote, .s_btn, .s_card, .s_alert, .o_facebook_page, .s_share, .s_rating, .s_hr, .s_chart"
+        data-drop-in=".content, nav"/>
+
+    <div data-js="ul"
+         data-selector=":not(li) > ul:has(ul,ol), :not(li) > ol:has(ul,ol)">
+        <we-checkbox string="Folded list" data-select-class="o_ul_folded"/>
+    </div>
+
+    <div data-js="menu_data"
+         data-selector="#top_menu li > a"
+         data-exclude=".dropdown-toggle"
+         data-no-check="true"/>
+
+    <div data-js="company_data"
+         data-selector="[data-oe-expression='res_company.partner_id']"
+         data-no-check="true"/>
+
+    <div data-js="topMenuTransparency"
+        data-selector="[data-main-object^='website.page('] #wrapwrap > header"
+        data-no-check="true">
+        <we-checkbox string="Transparent" data-transparent="true" data-no-preview="true"/>
+    </div>
+
+    <div data-js="topMenuColor"
+         data-selector="[data-main-object^='website.page('] #wrapwrap > header"
+         data-no-check="true">
+        <we-colorpicker string="Background Color"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"
+            data-excluded="theme, common, custom"/>
+    </div>
+
+    <!-- Anchor Name -->
+    <div data-js="anchor"
+        data-selector=":not(p).oe_structure > *, :not(p)[data-oe-type=html] > *"
+        data-exclude=".modal *">
+        <we-button class="fa fa-fw fa-link"
+                   title="Create a link to target this section"
+                   data-no-preview="true"/>
+    </div>
+
+    <!-- Mega Menu settings -->
+    <div data-selector=".o_mega_menu">
+        <we-select string="Size">
+            <we-button data-select-class="">Full-Width</we-button>
+            <we-button data-select-class="o_mega_menu_container_size">Narrow</we-button>
+        </we-select>
+    </div>
+
+    <div data-selector=".o_mega_menu .nav-link"
+         data-drop-in=".o_mega_menu nav"
+         data-drop-near=".o_mega_menu .nav-link"/>
+
+    <div data-js="CoverProperties" data-selector=".o_record_cover_container" data-no-check="true">
+        <we-button data-change="true" data-no-preview="true">Change Cover</we-button>
+        <we-button data-clear="true" data-no-preview="true" data-name="remove_cover_opt">Remove Cover</we-button>
+        <we-select string="Size" data-cover-opt-name="size">
+            <we-button data-select-class="o_record_has_cover cover_full">Full Screen</we-button>
+            <we-button class="o_record_cover_opt_size_default" data-select-class="o_record_has_cover cover_mid">Half Screen</we-button>
+            <we-button data-select-class="o_record_has_cover cover_auto">Fit text</we-button>
+        </we-select>
+        <we-select string="Filter Intensity" data-cover-opt-name="filters">
+            <we-button data-filter-value="0.0">None</we-button>
+            <we-button data-filter-value="0.2">Low</we-button>
+            <we-button data-filter-value="0.4">Medium</we-button>
+            <we-button data-filter-value="0.6">High</we-button>
+        </we-select>
+        <we-select string="Filter Color" data-cover-opt-name="filters">
+            <we-button data-filter-color="oe_black">Black</we-button>
+            <we-button data-filter-color="oe_none">White</we-button>
+            <we-button data-filter-color="bg-primary">Primary</we-button>
+            <we-button data-filter-color="bg-secondary">Secondary</we-button>
+            <we-button data-filter-color="oe_blue">Blue</we-button>
+            <we-button data-filter-color="oe_yellow">Yellow</we-button>
+            <we-button data-filter-color="oe_red">Red</we-button>
+            <we-button data-filter-color="oe_purple">Purple</we-button>
+            <we-button data-filter-color="oe_green">Green</we-button>
+        </we-select>
+        <we-select string="Text Size" data-cover-opt-name="text_size">
+            <we-button data-select-class="o_record_cover_font_hero">Hero</we-button>
+            <we-button data-select-class="o_record_cover_font_huge">Huge</we-button>
+            <we-button data-select-class="o_record_cover_font_big">Big</we-button>
+            <we-button data-select-class="">Regular</we-button>
+            <we-button data-select-class="o_record_cover_font_small">Small</we-button>
+            <we-button data-select-class="o_record_cover_font_tiny">Tiny</we-button>
+        </we-select>
+        <we-select string="Text Alignment" data-cover-opt-name="text_align">
+            <we-button data-select-class="">Left</we-button>
+            <we-button data-select-class="text-center">Centered</we-button>
+            <we-button data-select-class="text-right">Right</we-button>
+        </we-select>
+    </div>
+
+    <!-- Stretch section -->
+    <div data-js="SectionStretch"
+        data-selector="section"
+        data-target="> .container, > .container-fluid">
+        <we-checkbox string="Stretch" data-select-class="container|container-fluid" data-no-preview="true"/>
+    </div>
+
+    <!-- Chart Inner -->
+    <div data-js="InnerChart" string="Chart"
+        data-selector=".s_chart">
+        <we-colorpicker string="Background Color"
+            data-select-style="true"
+            data-css-property="background-color"
+            data-color-prefix="bg-"/>
+         <we-select string="Type" data-attribute-name="type" data-attribute-default-value="bar" data-no-preview="true">
+            <we-button data-select-data-attribute="bar" data-name="bar_chart_opt">Bar Vertical</we-button>
+            <we-button data-select-data-attribute="horizontalBar" data-name="horizontal_bar_chart_opt">Bar Horizontal</we-button>
+            <we-button data-select-data-attribute="line">Line</we-button>
+            <we-button data-select-data-attribute="pie">Pie</we-button>
+            <we-button data-select-data-attribute="doughnut">Doughnut</we-button>
+            <we-button data-select-data-attribute="radar">Radar</we-button>
+        </we-select>
+        <we-checkbox string="Stacked" data-name="stacked_chart_opt" data-dependencies="bar_chart_opt, horizontal_bar_chart_opt"
+                     data-select-data-attribute="false|true" data-attribute-name="stacked" data-no-preview="true"/>
+        <we-select string="Legend" data-attribute-name="legendPosition" data-attribute-default-value="top" data-no-preview="true">
+            <we-button data-select-data-attribute="none">None</we-button>
+            <we-button data-select-data-attribute="top">Top</we-button>
+            <we-button data-select-data-attribute="left">Left</we-button>
+            <we-button data-select-data-attribute="bottom">Bottom</we-button>
+            <we-button data-select-data-attribute="right">Right</we-button>
+        </we-select>
+        <we-checkbox string="Tooltip" data-select-data-attribute="false|true" data-attribute-name="tooltipDisplay" data-no-preview="true"/>
+        <we-matrix>
+            <table>
+                <tr>
+                    <th/>
+                    <th><we-button class="fa fa-fw fa-plus add_column"/></th>
+                </tr>
+                <tr>
+                    <th><we-button class="fa fa-fw fa-plus add_row"/></th>
+                </tr>
+            </table>
+        </we-matrix>
+        <we-colorpicker string="Background" data-name="chart_bg_color_opt"
+            data-color-change=""
+            data-attribute-name="backgroundColor"
+            data-no-preview="true"/>
+        <we-colorpicker string="Border" data-name="chart_border_color_opt"
+            data-color-change=""
+            data-attribute-name="borderColor"
+            data-no-preview="true"/>
+        <we-input class="o_we_inline" string="Border Width" data-select-data-attribute="2px" data-attribute-name="borderWidth" data-unit="px"/>
+    </div>
+</template>
+</odoo>