[IMP] theme_clean: update the theme

This commit updates the theme to improve the design with new colors, new
pictures and new snippet customizations.

task-2597387

X-original-commit: e6f1c3bb12
Part-of: odoo/design-themes#501

theme_clean/__manifest__.py

@@ -4,7 +4,7 @@
     'category': 'Theme/Services',
     'summary': 'Legal, Corporate, Business, Tech, Services',
     'sequence': 120,
-    'version': '2.0',
+    'version': '2.1.0',
     'author': 'Odoo S.A.',
     'depends': ['theme_common'],
     'data': [
@@ -16,11 +16,29 @@
         'views/snippets/s_text_image.xml',
         'views/snippets/s_three_columns.xml',
         'views/snippets/s_call_to_action.xml',
+        'views/snippets/s_title.xml',
+        'views/snippets/s_features.xml',
+        'views/snippets/s_numbers.xml',
+        'views/snippets/s_banner.xml',
+        'views/snippets/s_image_text.xml',
+        'views/snippets/s_color_blocks_2.xml',
+        'views/snippets/s_comparisons.xml',
+        'views/snippets/s_product_catalog.xml',
+        'views/snippets/s_quotes_carousel.xml',
     ],
     'images': [
-        'static/description/Clean_description.jpg',
+        'static/description/clean_description.jpg',
         'static/description/clean_screenshot.jpg',
     ],
+    'images_preview_theme': {
+        'website.s_cover_default_image': '/theme_clean/static/src/img/backgrounds/bg_snippet_09.jpg',
+        'website.s_text_image_default_image': '/theme_clean/static/src/img/content/image_content_19.jpg',
+        'website.s_banner_default_image': '/theme_clean/static/src/img/backgrounds/bg_snippet_07.jpg',
+        'website.s_carousel_default_image_1': '/theme_clean/static/src/img/content/image_content_25.jpg',
+        'website.s_three_columns_default_image_1': '/theme_clean/static/src/img/content/image_content_22.jpg',
+        'website.s_three_columns_default_image_2': '/theme_clean/static/src/img/content/image_content_23.jpg',
+        'website.s_three_columns_default_image_3': '/theme_clean/static/src/img/content/image_content_24.jpg',
+    },
     'license': 'LGPL-3',
     'live_test_url': 'https://theme-clean.odoo.com',
     'assets': {

theme_clean/data/ir_asset.xml

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <data>
 
 <record id="theme_clean.primary_variables_scss" model="theme.ir.asset">
     <field name="key">theme_clean.primary_variables_scss</field>
@@ -17,5 +16,4 @@
     <field name="path">theme_clean/static/src/scss/bootstrap_overridden.scss</field>
 </record>
 
-    </data>
 </odoo>

theme_clean/static/src/js/tour.js

@@ -1,21 +1,34 @@
-odoo.define("theme_clean.tour.clean", function (require) {
+/** @odoo-module */
-"use strict";
 
-const wTourUtils = require("website.tour_utils");
+import wTourUtils from 'website.tour_utils';
-var tour = require("web_tour.tour");
+
+const core = require("web.core");
+const _t = core._t;
 
 const snippets = [
     {
         id: 's_cover',
         name: 'Cover',
     },
+    {
+        id: 's_text_image',
+        name: 'Text - Image',
+    },
+    {
+        id: 's_title',
+        name: 'Title',
+    },
+    {
+        id: 's_features',
+        name: 'Features',
+    },
     {
         id: 's_carousel',
         name: 'Carousel',
     },
     {
-        id: 's_text_image',
+        id: 's_numbers',
-        name: 'Text - Image',
+        name: 'Numbers',
     },
     {
         id: 's_three_columns',
@@ -34,9 +47,11 @@ wTourUtils.registerThemeHomepageTour("clean_tour", [
     wTourUtils.dragNDrop(snippets[1]),
     wTourUtils.dragNDrop(snippets[2]),
     wTourUtils.dragNDrop(snippets[3]),
+    wTourUtils.clickOnSnippet(snippets[3]),
+    wTourUtils.changeOption('ContainerWidth', 'we-button-group.o_we_user_value_widget', _t('width')),
+    wTourUtils.goBackToBlocks(),
     wTourUtils.dragNDrop(snippets[4]),
-    wTourUtils.clickOnSnippet(snippets[4]),
+    wTourUtils.dragNDrop(snippets[5]),
-    wTourUtils.changeBackgroundColor(),
+    wTourUtils.dragNDrop(snippets[6]),
-    wTourUtils.selectColorPalette(),
+    wTourUtils.dragNDrop(snippets[7]),
 ]);
-});

theme_clean/static/src/scss/primary_variables.scss

@@ -102,12 +102,12 @@ $o-theme-color-palettes: map-merge($o-theme-color-palettes,
 // Fonts
 //------------------------------------------------------------------------------
 
-$o-theme-h1-font-size-multiplier: (41 / 16);
+$o-theme-h1-font-size-multiplier: (62 / 16);
-$o-theme-h2-font-size-multiplier: (34 / 16);
+$o-theme-h2-font-size-multiplier: (48 / 16);
-$o-theme-h3-font-size-multiplier: (28 / 16);
+$o-theme-h3-font-size-multiplier: (36 / 16);
-$o-theme-h4-font-size-multiplier: (20 / 16);
+$o-theme-h4-font-size-multiplier: (24 / 16);
-$o-theme-h5-font-size-multiplier: 1;
+$o-theme-h5-font-size-multiplier: (21 / 16);
-$o-theme-h6-font-size-multiplier: (14 / 16);
+$o-theme-h6-font-size-multiplier: (18 / 16);
 
 $o-theme-font-configs: (
     'PT Sans': (
@@ -244,7 +244,9 @@ $o-theme-color-palettes-compatibility-indexes: (
 // Shapes
 //------------------------------------------------------------------------------
 
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Airy/10', (5: 1));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/04_001', (3: 4));
 $o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/14', (4: 4));
-$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/14_001', (4: rgba(255, 255, 255, 0), 3: 4));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/14_001', (4: 2, 3: 1));
-$o-bg-shapes: add-header-shape-colors-mapping('web_editor', 'Origins/07_001', (3: 'menu', 5: 2));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/07_002', (3: 2, 4: 4, 5: 2));
-$o-bg-shapes: add-header-shape-colors-mapping('web_editor', 'Origins/07_002', (3: 'menu', 5: 2));
+$o-bg-shapes: add-header-shape-colors-mapping('web_editor', 'Origins/07_002', (3: 'menu', 4: 4, 5: 2));

theme_clean/views/image_content.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <!-- Website Builder Custom Images -->
 <record id="s_banner_default_image" model="theme.ir.attachment">
     <field name="key">website.s_banner_default_image</field>
@@ -131,9 +132,50 @@
     <field name="name">website.s_quotes_carousel_demo_image_2</field>
     <field name="url">/theme_clean/static/src/img/backgrounds/bg_snippet_11.jpg</field>
 </record>
+<record id="s_quotes_carousel_demo_image_3" model="theme.ir.attachment">
+    <field name="key">website.s_quotes_carousel_demo_image_3</field>
+    <field name="name">website.s_quotes_carousel_demo_image_3</field>
+    <field name="url">/theme_clean/static/src/img/backgrounds/s_quotes_carousel_demo_image_3.jpg</field>
+</record>
 <record id="s_newsletter_block" model="theme.ir.attachment">
     <field name="key">website.library_image_17</field>
     <field name="name">website.library_image_17</field>
     <field name="url">/theme_clean/static/src/img/content/image_content_38.jpg</field>
 </record>
+<record id="s_color_blocks_2_default_image_1" model="theme.ir.attachment">
+    <field name="key">website.s_color_blocks_2_default_image_1</field>
+    <field name="name">website.s_color_blocks_2_default_image_1</field>
+    <field name="url">/theme_clean/static/src/img/content/s_color_blocks_2_default_image_1.jpg</field>
+</record>
+<record id="s_color_blocks_2_default_image_2" model="theme.ir.attachment">
+    <field name="key">website.s_color_blocks_2_default_image_2</field>
+    <field name="name">website.s_color_blocks_2_default_image_2</field>
+    <field name="url">/theme_clean/static/src/img/content/s_color_blocks_2_default_image_2.jpg</field>
+</record>
+<record id="library_image_02" model="theme.ir.attachment">
+    <field name="key">website.library_image_02</field>
+    <field name="name">website.library_image_02</field>
+    <field name="url">/theme_clean/static/src/img/content/library_image_02.jpg</field>
+</record>
+<record id="library_image_03" model="theme.ir.attachment">
+    <field name="key">website.library_image_03</field>
+    <field name="name">website.library_image_03</field>
+    <field name="url">/theme_clean/static/src/img/content/library_image_03.jpg</field>
+</record>
+<record id="library_image_05" model="theme.ir.attachment">
+    <field name="key">website.library_image_05</field>
+    <field name="name">website.library_image_05</field>
+    <field name="url">/theme_clean/static/src/img/content/library_image_05.jpg</field>
+</record>
+<record id="library_image_10" model="theme.ir.attachment">
+    <field name="key">website.library_image_10</field>
+    <field name="name">website.library_image_10</field>
+    <field name="url">/theme_clean/static/src/img/content/library_image_10.jpg</field>
+</record>
+<record id="library_image_16" model="theme.ir.attachment">
+    <field name="key">website.library_image_16</field>
+    <field name="name">website.library_image_16</field>
+    <field name="url">/theme_clean/static/src/img/content/library_image_16.jpg</field>
+</record>
+
 </odoo>

theme_clean/views/snippets/s_banner.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_banner" inherit_id="website.s_banner">
+    <!-- Filter -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_bg_filter bg-black-50"/>
+    </xpath>
+</template>
+
+</odoo>

theme_clean/views/snippets/s_call_to_action.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <template id="s_call_to_action" inherit_id="website.s_call_to_action">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
@@ -14,11 +15,12 @@
     <xpath expr="//div[hasclass('col-lg-9')]" position="attributes">
         <attribute name="class" add="pt16" remove="pb16" separator=" "/>
     </xpath>
-        <xpath expr="//h3" position="replace">
+    <xpath expr="//h3" position="replace" mode="inner">
-            <h3><b>50,000 people</b>, run Clean to grow their financial wealth.</h3>
+        <b>50,000 people</b>, run Clean to grow their financial wealth.
     </xpath>
-        <xpath expr="//p" position="replace">
+    <xpath expr="//p" position="replace" mode="inner">
-            <p>Join them and make the right money move.</p>
+        Join them and make the right money move.
     </xpath>
 </template>
+
 </odoo>

theme_clean/views/snippets/s_carousel.xml

@@ -1,48 +1,49 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <template id="s_carousel" inherit_id="website.s_carousel">
     <!-- Container -->
     <xpath expr="//div[hasclass('carousel-inner')]" position="replace">
         <div class="carousel-inner">
             <!-- Slide 1 -->
-                <div class="carousel-item pt256 pb256 oe_img_bg active" style="background-image: url('/web/image/website.s_carousel_default_image_1'); position: relative;" data-name="Slide" data-oe-shape-data='{"shape":"web_editor/Origins/08","flip":["y"]}'>
+            <div class="carousel-item pt256 pb256 oe_img_bg active o_cc o_cc3" style="background-image: url('/web/image/website.s_carousel_default_image_1'); background-position: 50% 20%; position: relative;" data-name="Slide">
-                    <!-- Shape -->
+                <!-- Filter -->
-                    <div class="o_we_shape o_web_editor_Origins_08 o_we_flip_y"/>
+                <div class="o_we_bg_filter bg-black-50"/>
                 <div class="container">
                     <div class="row content">
-                            <div class="carousel-content col-lg-6">
+                        <div class="carousel-content col-lg-5">
                             <!-- Paragraph -->
-                                <h2><font style="font-size: 62px;">Personal adviser.</font></h2>
+                            <h2>Personal adviser</h2>
-                                <p class="lead">At any moment, you may contact our advisor through the in-app video meeting system.</p>
+                            <p class="lead"><br/>At any moment, you may contact our advisor through the in-app video meeting system.</p>
                         </div>
                     </div>
                 </div>
             </div>
             <!-- Slide 2 -->
-                <div class="carousel-item pt96 pb96 oe_img_bg" style="background-image: url('/web/image/website.s_carousel_default_image_2'); position: relative;" data-name="Slide" data-oe-shape-data='{"shape":"web_editor/Origins/05","flip":[]}'>
+            <div class="carousel-item pt256 pb256 oe_img_bg o_cc o_cc3" style="background-image: url('/web/image/website.s_carousel_default_image_2'); position: relative;" data-name="Slide">
-                    <!-- Shape -->
+                <!-- Filter -->
-                    <div class="o_we_shape o_web_editor_Origins_05"/>
+                <div class="o_we_bg_filter bg-black-50"/>
                 <div class="container">
                     <div class="row content">
-                            <div class="carousel-content col-lg-8 offset-lg-2 text-center pt48 pb40">
+                        <div class="carousel-content col-lg-12 text-center">
                             <!-- Paragraph -->
-                                <h2 style="font-size: 62px;">Simplify things.</h2>
+                            <h2>Simplify things</h2>
-                                <p class="lead">We invest in strategic advice tailored to your<br/>
+                            <p class="lead"><br/>We invest in strategic advice tailored to your<br/>
                             business problems and needs.</p>
                         </div>
                     </div>
                 </div>
             </div>
             <!-- Slide 3 -->
-                <div class="carousel-item pt128 pb128 oe_img_bg" style="background-image: url('/web/image/website.s_carousel_default_image_3'); position: relative;" data-name="Slide" data-oe-shape-data='{"shape":"web_editor/Origins/08","flip":["y","x"]}'>
+            <div class="carousel-item pt256 pb256 oe_img_bg o_cc o_cc3" style="background-image: url('/web/image/website.s_carousel_default_image_3'); position: relative; background-position: 50% 65%;" data-name="Slide">
-                    <!-- Shape -->
+                <!-- Filter -->
-                    <div class="o_we_shape o_web_editor_Origins_08 o_we_flip_y o_we_flip_x"/>
+                <div class="o_we_bg_filter bg-black-50"/>
                 <div class="container">
                     <div class="row content">
-                            <div class="carousel-content col-lg-8 offset-lg-6 py-5">
+                        <div class="carousel-content col-lg-5 offset-lg-7">
                             <!-- Paragraph -->
-                                <h2><font style="font-size: 62px;">Efficient team processes.</font></h2>
+                            <h2>Efficient team processes</h2>
-                                <p class="lead">We integrate digital tools and solutions for better insights, enabling data-driven planning.</p>
+                            <p class="lead"><br/>We integrate digital tools and solutions for better insights, enabling data-driven planning.</p>
                         </div>
                     </div>
                 </div>
@@ -50,4 +51,5 @@
         </div>
     </xpath>
 </template>
+
 </odoo>

theme_clean/views/snippets/s_color_blocks_2.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_color_blocks_2" inherit_id="website.s_color_blocks_2">
+    <!-- Column #1 -->
+    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
+        <attribute name="class" add="oe_img_bg" separator=" "/>
+        <attribute name="style">background-image: url('/web/image/website.s_color_blocks_2_default_image_1');</attribute>
+    </xpath>
+    <xpath expr="//i" position="before">
+        <div class="o_we_bg_filter bg-black-50"/>
+    </xpath>
+    <!-- Column #2 -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]" position="attributes">
+        <attribute name="class" add="oe_img_bg" separator=" "/>
+        <attribute name="style">background-image: url('/web/image/website.s_color_blocks_2_default_image_2');</attribute>
+    </xpath>
+    <xpath expr="(//i)[2]" position="before">
+        <div class="o_we_bg_filter bg-black-50"/>
+    </xpath>
+</template>
+
+</odoo>

theme_clean/views/snippets/s_comparisons.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_comparisons" inherit_id="website.s_comparisons">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc2 o_colored_level" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/05","flip":["y"]}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Wavy_05 o_we_flip_y"/>
+    </xpath>
+    <!-- Left card -->
+    <xpath expr="//div[hasclass('card')]" position="attributes">
+        <attribute name="class" add="bg-o-color-2" remove="bg-200" separator=" "/>
+    </xpath>
+    <!-- Middle card -->
+    <xpath expr="(//div[hasclass('card')])[2]" position="attributes">
+        <attribute name="class" add="bg-o-color-2" remove="bg-o-color-5" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_clean/views/snippets/s_cover.xml

@@ -1,26 +1,29 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <template id="s_cover" inherit_id="website.s_cover">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="o_full_screen_height" separator=" "/>
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/07_002","flip":[]}</attribute>
     </xpath>
-        <!-- Title & Paragraph -->
-        <xpath expr="//div[hasclass('container')]" position="replace">
-            <div class="container s_allow_columns text-center">
-                <h1>
-                    <font style="font-size: 62px;"><b>Sell from your couch</b></font>
-                </h1>
-                <p class="lead">
-                    Make your finances reach a new level with our online management system.<br/>
-                    Track every penny, directly from the confort of your home.
-                </p>
-            </div>
-        </xpath>
     <!-- Shape -->
-        <xpath expr="//section//*[last()]" position="after">
+    <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_web_editor_Origins_07_002"/>
     </xpath>
+    <!-- Filter -->
+    <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace">
+        <div class="o_we_bg_filter bg-black-50"/>
+    </xpath>
+    <!-- Title & Paragraph -->
+    <xpath expr="//h1" position="replace" mode="inner">
+        <b>Sell from your couch</b>
+    </xpath>
+    <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
+        Make your finances reach a new level with our online management system. <br/>Track every penny, directly from the confort of your home.
+    </xpath>
+    <!-- Remove the button -->
+    <xpath expr="//p[2]" position="replace"/>
 </template>
+
 </odoo>

theme_clean/views/snippets/s_features.xml

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_features" inherit_id="website.s_features">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc2" separator=" "/>
+    </xpath>
+    <!-- First column : icon -->
+    <xpath expr="//div[hasclass('row')]//div//i" position="attributes">
+        <attribute name="class" add="bg-o-color-4 fa-shield" remove="bg-primary fa-gear" separator=" "/>
+    </xpath>
+    <!-- First column : title -->
+    <xpath expr="//div[hasclass('row')]//div//h3" position="replace" mode="inner">
+        Secured
+    </xpath>
+    <!-- Second column : icon -->
+    <xpath expr="//div[hasclass('row')]//div[2]//i" position="attributes">
+        <attribute name="class" add="bg-o-color-1 fa-laptop" remove="bg-o-color-5 fa-photo" separator=" "/>
+    </xpath>
+    <!-- Second column : title -->
+    <xpath expr="//div[hasclass('row')]//div[2]//h3" position="replace" mode="inner">
+        All in one
+    </xpath>
+    <!-- Third column : icon -->
+    <xpath expr="//div[hasclass('row')]//div[3]//i" position="attributes">
+        <attribute name="class" add="fa-star bg-o-color-2" remove="fa-leaf" separator=" "/>
+    </xpath>
+    <!-- Third column : title -->
+    <xpath expr="//div[hasclass('row')]//div[3]//h3" position="replace" mode="inner">
+        Easy to use
+    </xpath>
+</template>
+
+</odoo>

theme_clean/views/snippets/s_image_text.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_image_text" inherit_id="website.s_image_text">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc4 pt72 pb72" remove="pt32 pb32" separator=" "/>
+    </xpath>
+    <!-- Add space after title -->
+    <xpath expr="//h2" position="after">
+        <p><br/></p>
+    </xpath>
+    <!-- Image -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="src">/web_editor/image_shape/website.s_image_text_default_image/web_editor/pattern/pattern_labyrinth.svg?c1=o-color-3&amp;c2=o-color-5&amp;c4=o-color-1</attribute>
+        <attribute name="data-shape">web_editor/pattern/pattern_labyrinth</attribute>
+        <attribute name="data-original-mimetype">image/jpeg</attribute>
+        <attribute name="data-file-name">image_content_20.svg</attribute>
+        <attribute name="data-shape-colors">o-color-3;o-color-5;;o-color-1;</attribute>
+    </xpath>
+</template>
+
+</odoo>

theme_clean/views/snippets/s_numbers.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_numbers" inherit_id="website.s_numbers">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc4 pt64" remove="o_cc2 pt24" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/10","flip":[]}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Airy_10"/>
+    </xpath>
+</template>
+
+</odoo>

theme_clean/views/snippets/s_product_catalog.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_product_catalog" inherit_id="website.s_product_catalog">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc3 parallax s_parallax_is_fixed" separator=" "/>
+        <attribute name="data-scroll-background-ratio">1</attribute>
+        <attribute name="style"/>
+    </xpath>
+    <!-- Filter & Parallax -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_product_catalog_default_image');"/>
+        <div class="o_we_bg_filter bg-black-50"/>
+    </xpath>
+</template>
+
+</odoo>

theme_clean/views/snippets/s_quotes_carousel.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_quotes_carousel" inherit_id="website.s_quotes_carousel">
+    <!-- Section -->
+    <xpath expr="//div[hasclass('carousel-item')]" position="attributes">
+        <attribute name="class" add="oe_img_bg o_bg_img_center" separator=" "/>
+        <attribute name="style">background-image: url('/web/image/website.s_quotes_carousel_demo_image_3'); background-position: 50% 50%;</attribute>
+    </xpath>
+</template>
+
+</odoo>

theme_clean/views/snippets/s_text_image.xml

@@ -1,22 +1,29 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <template id="s_text_image" inherit_id="website.s_text_image">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-            <attribute name="class" add="o_cc o_cc2" separator=" "/>
+        <attribute name="class" add="o_cc o_cc2 pt72 pb72" remove="pt32 pb32" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/14_001","flip":[]}</attribute>
     </xpath>
-        <!-- Shape -->
+    <!-- Title & Paragraphs -->
-        <xpath expr="//div[hasclass('container')]" position="before">
+    <xpath expr="//h2" position="replace" mode="inner">
-            <div class="o_we_shape o_web_editor_Origins_14_001"/>
+        Everything you need, <br/>totally free
     </xpath>
-        <!-- Title & Paragraph -->
+    <xpath expr="//p" position="replace" mode="inner">
-        <xpath expr="//div[hasclass('col-lg-6')]" position="replace">
+        <br/>
-            <div class="col-lg-6 pt16 pb16">
+    </xpath>
-                <h2>Everything you need, totally free</h2>
+    <xpath expr="//p[2]" position="replace" mode="inner">
-                <p>Track every expenses, uncover new ways to save, choose the right credit cards.<br/>
+        Track every expenses, uncover new ways to save, choose the right credit cards. <br/>All those advices and much more are included and totally free of charge.
-                All those advices and much more are included and totally free of charge.</p>
+    </xpath>
-            </div>
+    <!-- Image -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="src">/web_editor/image_shape/website.s_text_image_default_image/web_editor/pattern/pattern_points_1.svg?c1=o-color-1</attribute>
+        <attribute name="data-shape">web_editor/pattern/pattern_points_1</attribute>
+        <attribute name="data-original-mimetype">image/jpeg</attribute>
+        <attribute name="data-file-name">image_content_19.svg</attribute>
+        <attribute name="data-shape-colors">o-color-1;;;;</attribute>
     </xpath>
 </template>
+
 </odoo>

theme_clean/views/snippets/s_three_columns.xml

@@ -1,29 +1,46 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <template id="s_three_columns" inherit_id="website.s_three_columns">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-            <attribute name="class" add="o_cc4" remove="o_cc2" separator=" "/>
+        <attribute name="class" add="o_cc1" remove="o_cc2" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/04_001","flip":[]}</attribute>
     </xpath>
-        <xpath expr="//div[hasclass('card-body')]" position="replace">
+    <!-- Shape -->
-            <div class="card-body">
+    <xpath expr="//div[hasclass('container')]" position="before">
-                <h3 class="card-title">Our mission</h3>
+        <div class="o_we_shape o_web_editor_Origins_04_001"/>
-                <p class="card-text">Provide clear and concise financial advices to make your financial wealth grow. And this, completely free of charge</p>
-            </div>
     </xpath>
-        <!-- Column 2 -->
+    <!-- Column #1 -->
-        <xpath expr="(//div[hasclass('card-body')])[2]" position="replace">
+    <xpath expr="//div[hasclass('card')]" position="attributes">
-            <div class="card-body">
+        <attribute name="style">border-width: 0px !important;</attribute>
-                <h3 class="card-title">Our values</h3>
-                <p class="card-text">We created our company to improve the work-life balance. We believe that we need to focus on our family more than our work and finances.</p>
-            </div>
     </xpath>
-        <!-- Column 3 -->
+    <xpath expr="//h3[hasclass('card-title')]" position="replace" mode="inner">
-        <xpath expr="(//div[hasclass('card-body')])[3]" position="replace">
+        Our mission
-            <div class="card-body">
+    </xpath>
-                <h3 class="card-title">Our team</h3>
+    <xpath expr="//p[hasclass('card-text')]" position="replace" mode="inner">
-                <p class="card-text">Composed of 25 people from 25 to 66 years, we’re a young and dynamic company. We have open positions, do not hesitate to contact us.</p>
+        Provide clear and concise financial advices to make your financial wealth grow. And this, completely free of charge.
-            </div>
+    </xpath>
+    <!-- Column #2 -->
+    <xpath expr="(//div[hasclass('card')])[2]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="(//h3[hasclass('card-title')])[2]" position="replace" mode="inner">
+        Our values
+    </xpath>
+    <xpath expr="(//p[hasclass('card-text')])[2]" position="replace" mode="inner">
+        We created our company to improve the work-life balance. We believe that we need to focus on our family more than our work and finances.
+    </xpath>
+    <!-- Column #3 -->
+    <xpath expr="(//div[hasclass('card')])[3]" position="attributes">
+        <attribute name="style">border-width: 0px !important;</attribute>
+    </xpath>
+    <xpath expr="(//h3[hasclass('card-title')])[3]" position="replace" mode="inner">
+        Our team
+    </xpath>
+    <xpath expr="(//p[hasclass('card-text')])[3]" position="replace" mode="inner">
+        Composed of 25 people from 25 to 66 years, we’re a young and dynamic company. We have open positions, do not hesitate to contact us.
     </xpath>
 </template>
+
 </odoo>

theme_clean/views/snippets/s_title.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_title" inherit_id="website.s_title">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc5 o_full_screen_height parallax s_parallax_is_fixed" separator=" "/>
+        <attribute name="data-scroll-background-ratio">1</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/07_002","flip":[]}</attribute>
+    </xpath>
+    <!-- Shape, filter & background image -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image');"/>
+        <div class="o_we_bg_filter bg-black-50"/>
+        <div class="o_we_shape o_web_editor_Origins_07_002"/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h1" position="replace" mode="inner">
+        <b>We create the perfect <br/>tailored solution for you</b>
+    </xpath>
+</template>
+
+</odoo>

theme_clean/views/snippets_options.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <template id="clean_snippet_options" inherit_id="website.snippet_options">
     <xpath expr="//div[@data-js='Box']" position="before">
         <div data-js="gradientpicker" data-selector="section, .parallax, .s_color_blocks_2 .row > div, .s_team_profile_box">
@@ -16,4 +17,5 @@
         </div>
     </xpath>
 </template>
+
 </odoo>