[IMP] website: introduce s_unveil snippet

This commit adds the new `s_unveil` snippet.

task-4104471

closes odoo#176167

Part-of: task-4077427
Related: odoo/design-themes#860
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>

Author: xlu-odoo

addons/website/__manifest__.py

@@ -103,6 +103,7 @@
         'views/snippets/s_image.xml',
         'views/snippets/s_video.xml',
         'views/snippets/s_cta_badge.xml',
+        'views/snippets/s_unveil.xml',
         'views/new_page_template_templates.xml',
         'views/website_views.xml',
         'views/website_pages_views.xml',

addons/website/views/snippets/s_unveil.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_unveil" name="Unveil">
+    <section class="s_unveil pt64 pb64">
+        <div class="container">
+            <div class="row o_grid_mode" data-row-count="13">
+                <div class="o_grid_item g-height-3 g-col-lg-12 col-lg-12" style="grid-area: 1 / 1 / 4 / 13; z-index: 1;">
+                    <h2 style="text-align: center;">Unveiling our newest products</h2>
+                    <p class="lead" style="text-align: center;">Illustrate your services or your product’s main features.</p>
+                </div>
+                <div class="o_grid_item o_grid_item_image g-col-lg-4 g-height-5 col-lg-4 d-lg-block d-none o_snippet_mobile_invisible" style="z-index: 2; grid-area: 6 / 1 / 11 / 5;">
+                    <img class="img img-fluid mx-auto rounded" src="/web/image/website.s_carousel_default_image_3" alt=""/>
+                </div>
+                <div class="o_grid_item o_grid_item_image g-col-lg-4 g-height-5 col-lg-4 d-lg-block d-none o_snippet_mobile_invisible" style="z-index: 3; grid-area: 4 / 3 / 9 / 7;">
+                    <img class="img img-fluid mx-auto rounded" src="/web/image/website.s_masonry_block_default_image_1" alt=""/>
+                </div>
+                <div class="o_grid_item o_grid_item_image g-col-lg-4 g-height-6 col-lg-4" style="z-index: 4; grid-area: 7 / 4 / 13 / 8;">
+                    <img class="img img-fluid mx-auto rounded" src="/web/image/website.s_picture_default_image" alt=""/>
+                </div>
+                <div class="o_grid_item o_grid_item_image g-col-lg-4 g-height-7 col-lg-4 d-lg-block d-none o_snippet_mobile_invisible" style="z-index: 5; grid-area: 5 / 8 / 12 / 12;">
+                    <img class="img img-fluid mx-auto rounded" src="/web/image/website.s_carousel_default_image_2" alt=""/>
+                </div>
+                <div class="o_grid_item o_grid_item_image g-col-lg-4 g-height-5 col-lg-4 d-lg-block d-none o_snippet_mobile_invisible" style="z-index: 6; grid-area: 9 / 9 / 14 / 13;">
+                    <img class="img img-fluid mx-auto rounded" src="/web/image/website.s_carousel_default_image_1" alt=""/>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+</odoo>

addons/website/views/snippets/snippets.xml

@@ -108,6 +108,9 @@
                 </t>
                 <t t-snippet="website.s_images_wall" string="Images Wall" group="images"/>
                 <t t-snippet="website.s_parallax" string="Parallax" group="images"/>
+                <t t-snippet="website.s_unveil" string="Unveil" group="images">
+                    <keywords>reveal, showcase, launch, presentation, announcement, content, picture, photo, illustration, media, visual, article, combination</keywords>
+                </t>
 
                 <!-- People group -->
                 <t t-snippet="website.s_company_team" string="Team" group="people">