[MOV] website: add s_showcase snippet from themes repo

Part of https://github.com/odoo/odoo/pull/42937
task-2088157

6 files changed, 178 insertions, 1 deletions

diff --git a/addons/website/__manifest__.py b/addons/website/__manifest__.py
index 74b05bca54f..cb8289e185d 100644
--- a/addons/website/__manifest__.py
+++ b/addons/website/__manifest__.py
@@ -60,6 +60,7 @@
         'views/snippets/s_numbers.xml',
         'views/snippets/s_masonry_block.xml',
         'views/snippets/s_media_list.xml',
+        'views/snippets/s_showcase.xml',
         'views/snippets/s_mega_menu_multi_menus.xml',
         'views/snippets/s_mega_menu_menu_image_menu.xml',
         'views/website_views.xml',
diff --git a/addons/website/static/src/img/snippets_thumbs/s_showcase.jpg b/addons/website/static/src/img/snippets_thumbs/s_showcase.jpg
new file mode 100644
index 00000000000..da8ea09c695
--- /dev/null
+++ b/addons/website/static/src/img/snippets_thumbs/s_showcase.jpg
diff --git a/addons/website/static/src/snippets/s_showcase/000.scss b/addons/website/static/src/snippets/s_showcase/000.scss
new file mode 100644
index 00000000000..8970e7e262b
--- /dev/null
+++ b/addons/website/static/src/snippets/s_showcase/000.scss
@@ -0,0 +1,77 @@
+
+#wrapwrap .s_showcase:not([data-vcss]) {
+    @include media-breakpoint-up(lg) {
+        .container, .container-fluid {
+            position: relative;
+
+            &:before {
+                content: " ";
+                display: block;
+                @include o-position-absolute($left: 50%);
+                height: 100%;
+                border-right: 1px solid gray('200');
+            }
+        }
+    }
+
+    .fa {
+        opacity: 0.5;
+    }
+
+    .text-right{
+        .fa {
+            float: right;
+            margin-left: .5em;
+        }
+        p {
+            float: right;
+            display: block;
+        }
+    }
+    .text-left{
+        .fa {
+            float: left;
+            margin-right: .5em;
+        }
+        p {
+            float: left;
+        }
+    }
+    .row {
+        margin-top: 1em;
+    }
+    .feature p {
+        max-width: 300px;
+        margin-top: 0.6em;
+        clear: both;
+    }
+}
+
+@include media-breakpoint-down(md) {
+    #wrapwrap .s_showcase:not([data-vcss]) {
+        .text-right, .text-left {
+            text-align: center;
+
+            .fa {
+                font-size: 2em;
+                opacity: 0.5;
+                float: none;
+                display: block;
+                position: relative;
+                margin-left: auto;
+                margin-right: auto;
+            }
+        }
+        .feature {
+            margin-bottom: 3em;
+
+            p {
+                float: none;
+                display: block;
+                position: relative;
+                margin-left: auto;
+                margin-right: auto;
+            }
+        }
+    }
+}
diff --git a/addons/website/static/src/snippets/s_showcase/001.scss b/addons/website/static/src/snippets/s_showcase/001.scss
new file mode 100644
index 00000000000..4ef99f5eb1c
--- /dev/null
+++ b/addons/website/static/src/snippets/s_showcase/001.scss
@@ -0,0 +1,47 @@
+.s_showcase[data-vcss='001'] {
+    @include media-breakpoint-up(lg) {
+        // Left-right separator
+        .container, .container-fluid {
+            position: relative;
+
+            &:before {
+                content: " ";
+                display: block;
+                @include o-position-absolute($left: 50%);
+                height: 100%;
+                border-right: 1px solid gray('200');
+            }
+        }
+        // Features
+        .row > div {
+            // Items on left
+            &:nth-child(odd) {
+                text-align: right;
+
+                .s_showcase_icon, p {
+                    float: right;
+                }
+
+                .s_showcase_icon {
+                    margin-right: 0;
+                    margin-left: 15px;
+                }
+            }
+            // Items on right
+            &:nth-child(even) {
+                text-align: left;
+
+                .s_showcase_icon, p {
+                    float: left;
+                }
+            }
+        }
+    }
+
+    .s_showcase_icon {
+        // Make the default margin the one for the left aligned icon, as it's what we want on mobile
+        margin-right: 15px;
+        opacity: .5;
+        font-size: 36px;
+    }
+}
diff --git a/addons/website/views/snippets/s_showcase.xml b/addons/website/views/snippets/s_showcase.xml
new file mode 100644
index 00000000000..553f25c2722
--- /dev/null
+++ b/addons/website/views/snippets/s_showcase.xml
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<!-- Template -->
+<template name="Showcase" id="s_showcase">
+    <section class="s_showcase" data-vcss="001">
+        <div class="container">
+            <div class="row text-center col-md-6 col-lg-12 mx-auto mt-3">
+                <div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
+                    <h3 class="mb16"><span class="fa fa-fw fa-desktop s_showcase_icon"/>First feature</h3>
+                    <p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
+                </div>
+                <div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
+                    <h3 class="mb16"><span class="fa fa-paint-brush s_showcase_icon"/>Second feature</h3>
+                    <p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
+                </div>
+                <div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
+                    <h3 class="mb16"><span class="fa fa-heart s_showcase_icon"/>Another feature</h3>
+                    <p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
+                </div>
+                <div class="col-lg-3 offset-lg-2 my-2" data-name="Feature block">
+                    <h3 class="mb16"><span class="fa fa-sliders s_showcase_icon"/>Last Feature</h3>
+                    <p>Focus on what the customer would like to know, not what you want to show. Write a small explanation of this great feature</p>
+                </div>
+            </div>
+        </div>
+        <div class="mt16 mb16 text-center">
+            <a class="btn btn-secondary" href="">Discover all the features</a>
+        </div>
+    </section>
+</template>
+
+<!-- Options -->
+<template id="s_showcase_options" inherit_id="website.snippet_options">
+    <xpath expr="//div[@data-js='background']" position="before">
+        <div data-js='s_showcase' data-selector=".s_showcase .feature"/>
+    </xpath>
+</template>
+
+<!-- Assets -->
+<template id="assets_snippet_s_showcase_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_showcase/000.scss"/>
+    </xpath>
+</template>
+<template id="assets_snippet_s_showcase_css_001" inherit_id="website.assets_frontend">
+    <xpath expr="//link[last()]" position="after">
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_showcase/001.scss"/>
+    </xpath>
+</template>
+
+</odoo>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 825940effcc..86d84f41710 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -35,7 +35,7 @@
                     <t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_gallery.png"/>
                     <t t-snippet="website.s_carousel" t-thumbnail="/website/static/src/img/snippets_thumbs/s_carousel.png"/>
                     <t t-snippet="website.s_media_list" t-thumbnail="/website/static/src/img/snippets_thumbs/s_media_list.png"/>
-                    <!-- Showcase -->
+                    <t t-snippet="website.s_showcase" t-thumbnail="/website/static/src/img/snippets_thumbs/s_showcase.jpg"/>
                     <t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/snippets_thumbs/s_parallax.png"/>
                 </div>
             </div>