[IMP] theme_odoo_experts: update the theme

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

task-2585389

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

theme_odoo_experts/__manifest__.py

@@ -1,10 +1,10 @@
 {
-    'name': 'Odoo Experts Theme',
+    'name': 'Experts Theme',
-    'description': 'Odoo Experts Business Theme',
+    'description': 'Experts Business Theme',
     'category': 'Theme/Corporate',
     'summary': 'Advisor, Corporate, Service, Business, Finance, IT',
     'sequence': 210,
-    'version': '2.0.0',
+    'version': '2.1.0',
     'author': 'Odoo S.A.',
     'depends': ['theme_common'],
     'data': [
@@ -15,12 +15,31 @@
         'views/snippets/s_media_list.xml',
         'views/snippets/s_image_text.xml',
         'views/snippets/s_call_to_action.xml',
+        'views/snippets/s_text_image.xml',
+        'views/snippets/s_company_team.xml',
+        'views/snippets/s_references.xml',
+        'views/snippets/s_cover.xml',
+        'views/snippets/s_numbers.xml',
+        'views/snippets/s_three_columns.xml',
+        'views/snippets/s_color_blocks_2.xml',
+        'views/snippets/s_image_gallery.xml',
+        'views/snippets/s_comparisons.xml',
+        'views/snippets/s_product_catalog.xml',
+        'views/snippets/s_features_grid.xml',
+        'views/snippets/s_product_list.xml',
+        'views/snippets/s_quotes_carousel.xml',
 
         ],
     'images': [
-        'static/description/odoo_experts_description.png',
+        'static/description/odoo_experts_description.jpg',
         'static/description/odoo_experts_screenshot.jpg',
     ],
+    'images_preview_theme': {
+        'website.s_cover_default_image': '/theme_odoo_experts/static/src/img/snippets/s_cover.jpg',
+        'website.s_media_list_default_image_1': '/theme_odoo_experts/static/src/img/snippets/s_media_list_1.jpg',
+        'website.s_media_list_default_image_2': '/theme_odoo_experts/static/src/img/snippets/s_media_list_2.jpg',
+        'website.s_media_list_default_image_3': '/theme_odoo_experts/static/src/img/snippets/s_media_list_3.jpg',
+    },
     'license': 'LGPL-3',
     'live_test_url': 'https://theme-odoo-experts.odoo.com',
     'assets': {

theme_odoo_experts/data/ir_asset.xml

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <data>
 
 <record id="theme_odoo_experts.s_banner_parallax_000_variables_scss" model="theme.ir.asset">
     <field name="key">theme_odoo_experts.s_banner_parallax_000_variables_scss</field>
@@ -17,6 +16,14 @@
     <field name="path">theme_odoo_experts/static/src/scss/primary_variables.scss</field>
 </record>
 
+<record id="theme_odoo_experts.bootstrap_overridden_scss" model="theme.ir.asset">
+    <field name="key">theme_odoo_experts.bootstrap_overridden_scss</field>
+    <field name="name">Bootstrap overridden SCSS</field>
+    <field name="bundle">web._assets_frontend_helpers</field>
+    <field name="directive">prepend</field>
+    <field name="path">theme_odoo_experts/static/src/scss/bootstrap_overridden.scss</field>
+</record>
+
 <record id="theme_odoo_experts.compatibility_saas_11_4_variables_scss" model="theme.ir.asset">
     <field name="key">theme_odoo_experts.compatibility_saas_11_4_variables_scss</field>
     <field name="name">Compatibility saas 11 4 variables SCSS</field>
@@ -25,5 +32,4 @@
     <field name="active" eval="False"/>
 </record>
 
-    </data>
 </odoo>

theme_odoo_experts/static/description/index.html

@@ -7,7 +7,7 @@
         first projects on the web. Just drag & drop the new building blocks
         you need to easily build your layout. All layouts are made of sections,
         that you can easily combine to fit your specific project.</p>
-    <img src="odoo_experts_description.png" class="img-fluid d-block mx-auto"/>
+    <img src="odoo_experts_description.jpg" class="img-fluid d-block mx-auto"/>
     <hr>
 
     <h2 class="text-muted">Odoo Experts Customization Tool</h2>

theme_odoo_experts/static/src/js/tour.js

@@ -1,15 +1,14 @@
-odoo.define("theme_odoo_experts.tour.odoo_experts", function (require) {
+/** @odoo-module */
-"use strict";
+
+import wTourUtils from 'website.tour_utils';
 
 const core = require("web.core");
 const _t = core._t;
-const wTourUtils = require("website.tour_utils");
-var tour = require("web_tour.tour");
 
 const snippets = [
     {
-        id: 's_banner',
+        id: 's_cover',
-        name: 'Banner',
+        name: 'Cover',
     },
     {
         id: 's_image_text',
@@ -19,6 +18,14 @@ const snippets = [
         id: 's_media_list',
         name: 'Media List',
     },
+    {
+        id: 's_company_team',
+        name: 'Team',
+    },
+    {
+        id: 's_references',
+        name: 'References',
+    },
     {
         id: 's_call_to_action',
         name: 'Call to Action',
@@ -32,7 +39,9 @@ wTourUtils.registerThemeHomepageTour("odoo_experts_tour", [
     wTourUtils.dragNDrop(snippets[1]),
     wTourUtils.dragNDrop(snippets[2]),
     wTourUtils.dragNDrop(snippets[3]),
-    wTourUtils.clickOnSnippet(snippets[3]),
+    wTourUtils.dragNDrop(snippets[4]),
-    wTourUtils.changeOption('ScrollButton', 'we-button-group.o_we_user_value_widget', _t('height')),
+    wTourUtils.clickOnSnippet(snippets[4], 'top'),
+    wTourUtils.changeOption('ContainerWidth', 'we-button-group.o_we_user_value_widget', _t('width')),
+    wTourUtils.goBackToBlocks(),
+    wTourUtils.dragNDrop(snippets[5]),
 ]);
-});

theme_odoo_experts/static/src/scss/bootstrap_overridden.scss

@@ -0,0 +1,3 @@
+// Headings font weight
+
+$headings-font-weight: $o-theme-headings-font-weight !default;

theme_odoo_experts/static/src/scss/primary_variables.scss

@@ -2,12 +2,14 @@
 // Fonts
 //------------------------------------------------------------------------------
 
-$o-theme-h1-font-size-multiplier: (25 / 12);
+$o-theme-h1-font-size-multiplier: (62 / 16);
-$o-theme-h2-font-size-multiplier: (18 / 12);
+$o-theme-h2-font-size-multiplier: (44 / 16);
-$o-theme-h3-font-size-multiplier: (16 / 12);
+$o-theme-h3-font-size-multiplier: (36 / 16);
-$o-theme-h4-font-size-multiplier: (14 / 12);
+$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: 1;
+$o-theme-h6-font-size-multiplier: (18 / 16);
+
+$o-theme-headings-font-weight: 700;
 
 $o-theme-font-configs: (
     'Heebo': (
@@ -58,6 +60,10 @@ $o-theme-font-configs: (
         'family': ('Oswald', sans-serif),
         'url': 'Oswald:300,300i,400,400i,700,700i',
     ),
+    'Work Sans': (
+        'family': ('Work Sans', sans-serif),
+        'url': 'Work+Sans:300,300i,400,400i,700,700i',
+    ),
 );
 
 //------------------------------------------------------------------------------
@@ -69,17 +75,17 @@ $o-website-values-palettes: (
         'color-palettes-name': 'odoo-experts-1',
         'logo-height': (52 / 16) * 1rem,
         'fixed-logo-height': (52 / 16) * 1rem,
-        'header-font-size': (18 / 16) * 1rem,
+        'header-font-size': 1rem,
         'btn-border-radius': 0,
         'btn-border-radius-lg': 0,
         'btn-border-radius-sm': 0,
         'font': 'Lato',
-        'headings-font': 'Oswald',
+        'headings-font': 'Work Sans',
-        'navbar-font': 'Oswald',
+        'navbar-font': 'Work Sans',
         'buttons-font': 'Lato',
         'header-template': 'Contact',
         'footer-template': 'contact',
-        'header-links-style': 'border-bottom',
+        'link-underline': 'never',
     ),
 );
 
@@ -108,3 +114,18 @@ $o-color-palettes-compatibility-indexes: (
     20: 'generic-16',
     21: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/02_001', (5: 3));
+$o-bg-shapes: add-extra-shape-colors-mapping('web_editor', 'Origins/02_001', 'second', (4: 4, 5:2));
+$o-bg-shapes: add-extra-shape-colors-mapping('web_editor', 'Origins/02_001', 'third', (4: 2, 5: 1));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/09_001', (3: 5));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/16', (3: 1));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Floats/07', (1: 5));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/04', (5: 5));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Rainy/10', (1: 5, 3: 5));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Airy/01', (1: 3));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Airy/03_001', (5: 4));

theme_odoo_experts/views/images.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
-<openerp>
+<odoo>
-    <data>
+
 <!-- Not used anymore by the editor: files and records kept for back-compatibility.
 Check in theme_loftspace's primary_variables.scss and theme.scss -->
 <record id="image_content_02" model="theme.ir.attachment">
@@ -170,5 +170,40 @@
     <field name="name">website.library_image_17</field>
     <field name="url">/theme_odoo_experts/static/src/img/snippets/s_newsletter.jpg</field>
 </record>
-    </data>
+<record id="library_image_08" model="theme.ir.attachment">
-</openerp>
+    <field name="key">website.library_image_08</field>
+    <field name="name">website.library_image_08</field>
+    <field name="url">/theme_odoo_experts/static/src/img/snippets/library_image_08.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_odoo_experts/static/src/img/snippets/library_image_03.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_odoo_experts/static/src/img/snippets/library_image_02.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_odoo_experts/static/src/img/snippets/library_image_10.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_odoo_experts/static/src/img/snippets/library_image_05.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_odoo_experts/static/src/img/snippets/library_image_16.jpg</field>
+</record>
+<record id="s_product_catalog_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_product_catalog_default_image</field>
+    <field name="name">website.s_product_catalog_default_image</field>
+    <field name="url">/theme_odoo_experts/static/src/img/snippets/s_product_catalog_default_image.jpg</field>
+</record>
+
+</odoo>

theme_odoo_experts/views/snippets/s_banner.xml

@@ -1,29 +1,23 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <template id="s_banner" inherit_id="website.s_banner">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-            <attribute name="class" add="o_half_screen_height" separator=" "/>
+        <attribute name="class" add="o_cc o_cc5" separator=" "/>
     </xpath>
-        <!-- Shadow -->
+    <!-- Filter -->
-        <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
+    <xpath expr="//div[hasclass('container')]" position="before">
-            <attribute name="class" add="rounded" separator=" "/>
+        <div class="o_we_bg_filter bg-black-50"/>
-            <attribute name="style" add="box-shadow: rgb(92, 92, 92) 25px 25px 0px 0px !important; border-radius: 25px !important;" separator=" "/>
+    </xpath>
+    <!-- Jumbotron -->
+    <xpath expr="//div[hasclass('jumbotron')]" position="attributes">
+        <attribute name="class" remove="o_cc o_cc1" separator=" "/>
     </xpath>
     <!-- Title -->
-        <xpath expr="//h1" position="replace">
+    <xpath expr="//h1" position="replace" mode="inner">
-            <h1>
+        Our expertise <br/>at your service
-                <font style="font-size: 62px; line-height: 48px;">If results matter to you</font>
-            </h1>
-        </xpath>
-        <!-- Paragraphs -->
-        <xpath expr="//p" position="replace">
-            <p><br/></p>
-            <p class="lead">Guided by expertise gained over 20 years of achieving success for clients, we practice with passion and strategic focus on the future.</p>
-        </xpath>
-        <!-- Button -->
-        <xpath expr="//t[@t-esc='cta_btn_text']" position="replace">
-            <t t-esc="cta_btn_text">Discover More</t>
     </xpath>
 </template>
+
 </odoo>

theme_odoo_experts/views/snippets/s_call_to_action.xml

@@ -1,12 +1,27 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <template id="s_call_to_action" inherit_id="website.s_call_to_action">
-        <!-- Paragraphs -->
+    <!-- Section -->
-        <xpath expr="//h3" position="replace">
+    <xpath expr="//section" position="attributes">
-            <h3>50,000+ CLIENTS TRUST US TO PROTECT THEIR ASSETS</h3>
+        <attribute name="class" add="o_cc4 pb120 pt120" remove="o_cc3 pt48 pb24" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/07","flip":[]}</attribute>
     </xpath>
-        <xpath expr="//p" position="replace">
+    <!-- Shape -->
-            <p>Contact us for a personalized meeting</p>
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Floats_07"/>
+    </xpath>
+    <!-- Title & Paragraph -->
+    <xpath expr="//h3" position="replace" mode="inner">
+        50,000+ clients trust us <br/>to protect their assets
+    </xpath>
+    <xpath expr="//p" position="replace" mode="inner">
+        Contact us for a personalized meeting
+    </xpath>
+    <!-- Button -->
+    <xpath expr="//a[hasclass('btn')]" position="attributes">
+        <attribute name="class" add="flat" separator=" "/>
     </xpath>
 </template>
+
 </odoo>

theme_odoo_experts/views/snippets/s_color_blocks_2.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_color_blocks_2" inherit_id="website.s_color_blocks_2">
+    <!-- Box #2 -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]" position="attributes">
+        <attribute name="class" add="o_cc4" remove="o_cc5" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_odoo_experts/views/snippets/s_company_team.xml

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_company_team" inherit_id="website.s_company_team">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt120 pb120" remove="pt48 pb48" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/02_001","flip":["x"]}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_02_001 o_we_flip_x o_third_extra_shape_mapping"/>
+    </xpath>
+</template>
+
+</odoo>

theme_odoo_experts/views/snippets/s_comparisons.xml

@@ -0,0 +1,46 @@
+<?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_cc5 pb48 o_colored_level" remove="pb32" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/01","flip":[]}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Airy_01"/>
+    </xpath>
+    <!-- Box #01 -->
+    <xpath expr="//div[hasclass('row')]//div" position="attributes">
+        <attribute name="class" add="pt80" remove="pt32" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('card')]" position="attributes">
+        <attribute name="class" add="bg-o-color-3" remove="bg-200" separator=" "/>
+    </xpath>
+    <!-- Box #01 - Button -->
+    <xpath expr="//div[hasclass('card')]//a[hasclass('btn')]" position="attributes">
+        <attribute name="class" add="flat" separator=" "/>
+    </xpath>
+    <!-- Box #02 -->
+    <xpath expr="(//div[hasclass('card')])[2]" position="attributes">
+        <attribute name="class" add="bg-o-color-1" remove="bg-o-color-5" separator=" "/>
+    </xpath>
+    <!-- Box #02 - Button -->
+    <xpath expr="(//div[hasclass('card')])[2]//a[hasclass('btn')]" position="attributes">
+        <attribute name="class" add="btn-secondary flat" remove="btn-primary" separator=" "/>
+    </xpath>
+    <!-- Box #03 -->
+    <xpath expr="//div[hasclass('row')]//div[3]" position="attributes">
+        <attribute name="class" add="pt80" remove="pt32" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('card')])[3]" position="attributes">
+        <attribute name="class" add="bg-o-color-3" remove="bg-secondary" separator=" "/>
+    </xpath>
+    <!-- Box #03 - Button -->
+    <xpath expr="(//div[hasclass('card')])[3]//a[hasclass('btn')]" position="attributes">
+        <attribute name="class" add="flat" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_odoo_experts/views/snippets/s_cover.xml

@@ -0,0 +1,37 @@
+<?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/02_001","flip":[]}</attribute>
+    </xpath>
+    <!-- Filter -->
+    <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace">
+        <div class="o_we_bg_filter bg-black-50"/>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_02_001"/>
+    </xpath>
+    <!-- Container -->
+    <xpath expr="//div[hasclass('container')]" position="attributes">
+        <attribute name="class" add="o_container_small" remove="container" separator=" "/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h1" position="replace" mode="inner">
+        We care <br/>about results
+    </xpath>
+    <!-- Paragraph -->
+    <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
+        <br/>
+        Guided by expertise gained over 20 years of achieving success for clients, we practice with passion and strategic focus on the future.
+    </xpath>
+    <!-- Button -->
+    <xpath expr="//t[@t-esc='cta_btn_text']" position="replace" mode="inner">
+        Discover More
+    </xpath>
+</template>
+
+</odoo>

theme_odoo_experts/views/snippets/s_features_grid.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_features_grid" inherit_id="website.s_features_grid">
+    <!-- Item #1 - Icon -->
+    <xpath expr="//i" position="attributes">
+        <attribute name="class" add="rounded" remove="rounded-circle" separator=" "/>
+    </xpath>
+    <!-- Item #2 - Icon -->
+    <xpath expr="(//i)[2]" position="attributes">
+        <attribute name="class" add="rounded" remove="rounded-circle" separator=" "/>
+    </xpath>
+    <!-- Item #3 - Icon -->
+    <xpath expr="(//i)[3]" position="attributes">
+        <attribute name="class" add="rounded" remove="rounded-circle" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_odoo_experts/views/snippets/s_image_gallery.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_image_gallery" inherit_id="website.s_image_gallery">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="s_image_gallery_cover o_full_screen_height" separator=" "/>
+    </xpath>
+    <!-- Container -->
+    <xpath expr="//div[hasclass('container')]" position="attributes">
+        <attribute name="class" add="container-fluid" remove="container" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_odoo_experts/views/snippets/s_image_text.xml

@@ -1,40 +1,45 @@
 <?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 pt56 pb64" remove="pt32 pb32" separator=" "/>
+        <attribute name="class" add="pt184 pb64" remove="pt32 pb32" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/08","flip":[]}</attribute>
     </xpath>
-        <!-- Container -->
+    <!-- Shape -->
-        <xpath expr="//div[hasclass('container')]" position="attributes">
+    <xpath expr="//div[hasclass('container')]" position="before">
-            <attribute name="class" add="container-fluid" remove="container" separator=" "/>
+        <div class="o_we_shape o_web_editor_Origins_08"/>
     </xpath>
-        <!-- Row -->
+    <!-- Column #1 -->
-        <xpath expr="//div[hasclass('row')]" position="attributes">
-            <attribute name="class" add="align-items-stretch" remove="align-items-center" separator=" "/>
-        </xpath>
-        <!-- Column 1 -->
     <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
-            <attribute name="class" add="o_cc o_cc3 shadow" separator=" "/>
+        <attribute name="class" add="col-lg-8" remove="col-lg-6" separator=" "/>
-            <attribute name="style" add="box-shadow: rgba(0, 0, 0, 0.25) 20px 20px 0px 0px !important;" separator=" "/>
     </xpath>
-        <!-- Column 2 -->
+    <!-- Column #2 -->
-        <xpath expr="(//div[hasclass('col-lg-6')])[2]" position="attributes">
+    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
-            <attribute name="class" add="col-lg-3 p-5 o_cc o_cc3 shadow" remove="col-lg-6 pt16 pb16" separator=" "/>
+        <attribute name="class" add="col-lg-4" remove="col-lg-6" separator=" "/>
-            <attribute name="style" add="box-shadow: rgba(0, 0, 0, 0.25) 20px 20px 0px 0px !important;" separator=" "/>
     </xpath>
-        <!-- Title -->
+    <!-- Column #2 - Title -->
-        <xpath expr="//h2" position="replace">
+    <xpath expr="//h2" position="replace" mode="inner">
-            <h2>Our Vision</h2>
+        Our vision
     </xpath>
-        <!-- Paragraph -->
+    <!-- Column #2 - Paragraphs -->
-        <xpath expr="//p[1]" position="replace">
+    <xpath expr="//p" position="replace" mode="inner">
-            <p>We see our role as that of a legal partner responsible for constantly finding practical and pragmatic solutions that are adapted to our clients' needs.</p>
+        <br/>
     </xpath>
-        <xpath expr="//p[2]" position="replace">
+    <xpath expr="//p[2]" position="replace" mode="inner">
-            <p>We work on a daily basis on strategies to prevent disputes and, if necessary, to assist in their settlement by choosing the most appropriate method: conciliation, mediation, arbitration, or judicial proceedings.</p>
+        We see our role as that of a legal partner responsible for constantly finding practical and pragmatic solutions that are adapted to our clients' needs.
+    </xpath>
+    <!-- Column #2 - Button -->
+    <xpath expr="//a[hasclass('btn')]" position="attributes">
+        <attribute name="class" add="flat" separator=" "/>
+    </xpath>
+    <!-- Image -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="style">padding: 32px !important;</attribute>
+        <!-- Enable SVG dynamic color functionality -->
+        <attribute name="src">/web_editor/shape/theme_odoo_experts/s_image_text.svg?c1=o-color-1</attribute>
     </xpath>
-        <!-- Button -->
-        <xpath expr="//p[3]" position="replace"/>
 </template>
+
 </odoo>

theme_odoo_experts/views/snippets/s_media_list.xml

@@ -1,54 +1,65 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <template id="s_media_list" inherit_id="website.s_media_list">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-            <attribute name="class" add="pt56 pb40 o_cc4" remove="pt32 o_cc2" separator=" "/>
+        <attribute name="class" add="pt120 pb120 o_cc4 o_colored_level" remove="pt32 pb32 o_cc2" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/09_001","flip":[]}</attribute>
     </xpath>
-        <!-- Row 1 -->
+    <!-- Shape -->
-        <xpath expr="(//div[hasclass('s_media_list_item')])[1]//div[hasclass('row')]" position="attributes">
+    <xpath expr="//div[hasclass('container')]" position="before">
-            <attribute name="class" add="o_cc o_cc3 shadow border rounded" remove="o_cc o_cc1" separator=" "/>
+        <div class="o_we_shape o_web_editor_Origins_09_001"/>
-            <attribute name="style" add="border-color: rgb(73, 64, 72) !important; box-shadow: rgba(0, 0, 0, 0.25) 25px -25px 0px 0px !important;
-            border-width: 15px !important; border-radius: 35px !important;" separator=" "/>
     </xpath>
-        <!-- Row 2 -->
+
+    <!-- Row #1 -->
+    <xpath expr="//div[hasclass('s_media_list_item')]" position="attributes">
+        <attribute name="class" add="col-lg-8" remove="col-lg-12" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('s_media_list_item')]//div[hasclass('row')]" position="attributes">
+        <attribute name="class" add="flex-row-reverse shadow rounded" separator=" "/>
+    </xpath>
+    <!-- Row #1 - Title & paragraph -->
+    <xpath expr="//div[hasclass('s_media_list_body')]//h3" position="replace" mode="inner">
+        <span class="text-o-color-1">1.</span> Litigation
+    </xpath>
+    <xpath expr="//div[hasclass('s_media_list_body')]//p" position="replace" mode="inner">
+        Litigation is our core-business. Our lawyers have been involved in many high-profile cases for 20 years.
+    </xpath>
+    <!-- Row #1 - Remove the button -->
+    <xpath expr="//div[hasclass('s_media_list_body')]//a" position="replace"/>
+
+    <!-- Row #2 -->
     <xpath expr="//div[hasclass('s_media_list_item')][2]" position="attributes">
-            <attribute name="class" add="pt32" remove="pt16" separator=" "/>
+        <attribute name="class" add="pt24 pb24 col-lg-8 offset-lg-2" remove="pt16 pb16 col-lg-12" separator=" "/>
     </xpath>
-        <xpath expr="(//div[hasclass('s_media_list_item')])[2]//div[hasclass('row')]" position="attributes">
+    <xpath expr="//div[hasclass('s_media_list_item')][2]//div[hasclass('row')]" position="attributes">
-            <attribute name="class" add="o_cc o_cc3 shadow border rounded" remove="o_cc o_cc1" separator=" "/>
+        <attribute name="class" add="flex-row-reverse shadow rounded o_cc5" remove="o_cc1" separator=" "/>
-            <attribute name="style" add="border-color: rgb(73, 64, 72) !important; box-shadow: rgba(0, 0, 0, 0.25) 25px -25px 0px 0px !important;
-            border-width: 15px !important; border-radius: 35px !important;" separator=" "/>
     </xpath>
-        <!-- Row 3 -->
+    <!-- Row #2 - Title & paragraph -->
+    <xpath expr="(//div[hasclass('s_media_list_body')])[2]//h3" position="replace" mode="inner">
+        <span class="text-o-color-1">2.</span> Arbitration
+    </xpath>
+    <xpath expr="(//div[hasclass('s_media_list_body')])[2]//p" position="replace" mode="inner">
+        Over the past years, our lawyers have gained significant experience in arbitration, both as counsel as well as arbitrators.
+    </xpath>
+
+    <!-- Row #3 -->
     <xpath expr="//div[hasclass('s_media_list_item')][3]" position="attributes">
-            <attribute name="class" add="pt32" remove="pt16" separator=" "/>
+        <attribute name="class" add="col-lg-8 offset-lg-4" remove="col-lg-12" separator=" "/>
     </xpath>
-        <xpath expr="(//div[hasclass('s_media_list_item')])[3]//div[hasclass('row')]" position="attributes">
+    <xpath expr="//div[hasclass('s_media_list_item')][3]//div[hasclass('row')]" position="attributes">
-            <attribute name="class" add="o_cc o_cc3 flex-row-reverse shadow border rounded" remove="o_cc o_cc1" separator=" "/>
+        <attribute name="class" add="flex-row-reverse shadow rounded" separator=" "/>
-            <attribute name="style" add="border-color: rgb(73, 64, 72) !important; box-shadow: rgba(0, 0, 0, 0.25) 25px -25px 0px 0px !important;
-            border-width: 15px !important; border-radius: 35px !important;" separator=" "/>
     </xpath>
-        <!-- Text 1 -->
+    <!-- Row #3 - Title & paragraph -->
-        <xpath expr="//div[hasclass('s_media_list_body')]" position="replace">
+    <xpath expr="(//div[hasclass('s_media_list_body')])[3]//h3" position="replace" mode="inner">
-            <div class="col-lg-8 s_media_list_body">
+        <span class="text-o-color-1">3.</span> Mediation
-                <h3 class="card-title">Litigation</h3>
-                <p class="card-text">Litigation is our core-business. Our lawyers have been involved in many high-profile cases for 20 years.</p>
-            </div>
     </xpath>
-        <!-- Row 2 -->
+    <xpath expr="(//div[hasclass('s_media_list_body')])[3]//p" position="replace" mode="inner">
-        <xpath expr="(//div[hasclass('s_media_list_body')])[2]" position="replace">
+        In mediation, the parties find a solution for their conflict, with the assistance of a mediator who has no decision-making power.
-            <div class="col-lg-8 s_media_list_body">
-                <h3 class="card-title">Arbitration</h3>
-                <p class="card-text">Over the past years, our lawyers have gained significant experience in arbitration, both as counsel as well as arbitrators.</p>
-            </div>
-        </xpath>
-        <!-- Row 3 -->
-        <xpath expr="(//div[hasclass('s_media_list_body')])[3]" position="replace">
-            <div class="col-lg-8 s_media_list_body">
-                <h3 class="card-title">Mediation</h3>
-                <p class="card-text">In mediation, the parties find a solution for their conflict, with the assistance of a mediator who has no decision-making power. The result, if mediation succeeds, is a solution which is agreeable to all parties.</p>
-            </div>
     </xpath>
+    <!-- Row #3 - Remove the button -->
+    <xpath expr="(//div[hasclass('s_media_list_body')])[3]//a" position="replace"/>
 </template>
+
 </odoo>

theme_odoo_experts/views/snippets/s_numbers.xml

@@ -0,0 +1,30 @@
+<?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="pt200 pb200 oe_img_bg o_bg_img_center o_cc4" remove="pt24 pb24 o_cc2" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/16","flip":[]}</attribute>
+        <attribute name="style">background-image:url('/web_editor/shape/theme_odoo_experts/s_numbers.svg?c1=o-color-1');</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_16"/>
+    </xpath>
+    <!-- Numbers -->
+    <xpath expr="//span[hasclass('s_number')]" position="replace" mode="inner">
+        <b>12</b>
+    </xpath>
+    <xpath expr="(//span[hasclass('s_number')])[2]" position="replace" mode="inner">
+        <b>45</b>
+    </xpath>
+    <xpath expr="(//span[hasclass('s_number')])[3]" position="replace" mode="inner">
+        <b>8</b>
+    </xpath>
+    <xpath expr="(//span[hasclass('s_number')])[4]" position="replace" mode="inner">
+        <b>37</b>
+    </xpath>
+</template>
+
+</odoo>

theme_odoo_experts/views/snippets/s_product_catalog.xml

@@ -0,0 +1,17 @@
+<?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_cc5 pt96 pb96" remove="pt48 pb32" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/03_001","flip":[]}</attribute>
+    </xpath>
+    <!-- Filter & shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_bg_filter bg-black-50"/>
+        <div class="o_we_shape o_web_editor_Airy_03_001"/>
+    </xpath>
+</template>
+
+</odoo>

theme_odoo_experts/views/snippets/s_product_list.xml

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_product_list" inherit_id="website.s_product_list">
+    <!-- Container -->
+    <xpath expr="//div[hasclass('container-fluid')]" position="replace">
+        <div class="container">
+            <!-- Row #1 -->
+            <div class="row">
+                <!-- Item #1 -->
+                <div class="h-100 pb16 col-lg-4">
+                    <a href="#">
+                        <img src="/web/image/website.s_product_list_default_image_1" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="#" class="btn btn-primary">Social Strategy</a>
+                    </div>
+                </div>
+                <!-- Item #2 -->
+                <div class="h-100 pb16 col-lg-4">
+                    <a href="#">
+                        <img src="/web/image/website.s_product_list_default_image_2" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="#" class="btn btn-primary">Executive Strategy</a>
+                    </div>
+                </div>
+                <!-- Item #3 -->
+                <div class="h-100 pb16 col-lg-4">
+                    <a href="#">
+                        <img src="/web/image/website.s_product_list_default_image_5" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="#" class="btn btn-primary">Corporate Finance</a>
+                    </div>
+                </div>
+            </div>
+            <!-- Row #2 -->
+            <div class="row">
+                <!-- Item #4 -->
+                <div class="h-100 pb16 col-lg-4">
+                    <a href="#">
+                        <img src="/web/image/website.s_product_list_default_image_3" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="#" class="btn btn-primary">Growth &amp; Innovation</a>
+                    </div>
+                </div>
+                <!-- Item #5 -->
+                <div class="h-100 pb16 col-lg-4">
+                    <a href="#">
+                        <img src="/web/image/website.s_product_list_default_image_4" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="#" class="btn btn-primary">Digital Strategy</a>
+                    </div>
+                </div>
+                <!-- Item #6 -->
+                <div class="h-100 pb16 col-lg-4">
+                    <a href="#">
+                        <img src="/web/image/website.s_product_list_default_image_6" alt="" class="img img-fluid w-100" style="max-height: 100%;"/>
+                    </a>
+                    <div class="s_product_list_item_link">
+                        <a href="#" class="btn btn-primary">Business Strategy</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </xpath>
+</template>
+
+</odoo>

theme_odoo_experts/views/snippets/s_quotes_carousel.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_quotes_carousel" inherit_id="website.s_quotes_carousel">
+    <!-- Carousel item #1 - filter -->
+    <xpath expr="//div[hasclass('carousel-item')]//div[hasclass('container')]" position="before">
+        <div class="o_we_bg_filter bg-black-50"/>
+    </xpath>
+    <!-- Carousel item #1 - icon -->
+    <xpath expr="//i" position="attributes">
+        <attribute name="class" add="bg-o-color-1" remove="bg-o-color-2" separator=" "/>
+    </xpath>
+    <!-- Carousel item #2 - filter -->
+    <xpath expr="//div[hasclass('carousel-item')][2]//div[hasclass('container')]" position="before">
+        <div class="o_we_bg_filter bg-black-50"/>
+    </xpath>
+    <!-- Carousel item #2 - icon -->
+    <xpath expr="(//i)[2]" position="attributes">
+        <attribute name="class" add="bg-o-color-1" remove="bg-o-color-2" separator=" "/>
+    </xpath>
+    <!-- Carousel item #2 - blockquote -->
+    <xpath expr="//div[hasclass('carousel-item')][2]//blockquote" position="attributes">
+        <attribute name="class" add="mx-auto" remove="mr-auto" separator=" "/>
+    </xpath>
+    <!-- Carousel item #3 - filter -->
+    <xpath expr="//div[hasclass('carousel-item')][3]//div[hasclass('container')]" position="before">
+        <div class="o_we_bg_filter bg-black-50"/>
+    </xpath>
+    <!-- Carousel item #3 - icon -->
+    <xpath expr="(//i)[3]" position="attributes">
+        <attribute name="class" add="bg-o-color-1" remove="bg-o-color-2" separator=" "/>
+    </xpath>
+    <!-- Carousel item #3 - blockquote -->
+    <xpath expr="//div[hasclass('carousel-item')][3]//blockquote" position="attributes">
+        <attribute name="class" add="mx-auto" remove="ml-auto" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_odoo_experts/views/snippets/s_references.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_references" inherit_id="website.s_references">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pb240 pt120 o_cc o_cc2" remove="pt48 pb32" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/02_001","flip":[]}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_02_001 o_second_extra_shape_mapping"/>
+    </xpath>
+    <!-- Row -->
+    <xpath expr="//div[hasclass('row')]" position="replace">
+        <div class="row justify-content-md-center">
+            <div class="col-lg-2 pt16 pb16">
+                <img src="/web/image/website.s_reference_demo_image_1" class="img img-fluid mx-auto" alt=""/>
+            </div>
+            <div class="col-lg-2 pt16 pb16">
+                <img src="/web/image/website.s_reference_demo_image_2" class="img img-fluid mx-auto" alt=""/>
+            </div>
+            <div class="col-lg-2 pt16 pb16">
+                <img src="/web/image/website.s_reference_demo_image_3" class="img img-fluid mx-auto" alt=""/>
+            </div>
+        </div>
+        <div class="row justify-content-md-center">
+            <div class="col-lg-2 pt16 pb16">
+                <img src="/web/image/website.s_reference_demo_image_4" class="img img-fluid mx-auto" alt=""/>
+            </div>
+            <div class="col-lg-2 pt16 pb16">
+                <img src="/web/image/website.s_reference_demo_image_5" class="img img-fluid mx-auto" alt=""/>
+            </div>
+            <div class="col-lg-2 pt16 pb16">
+                <img src="/web/image/website.s_reference_default_image_6" class="img img-fluid mx-auto" alt=""/>
+            </div>
+        </div>
+    </xpath>
+</template>
+
+</odoo>

theme_odoo_experts/views/snippets/s_text_image.xml

@@ -0,0 +1,30 @@
+<?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_cc3 pt64 pb64" remove="pt32 pb32" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/04","flip":["x"]}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Blobs_04 o_we_flip_x"/>
+    </xpath>
+    <!-- Column #1 -->
+    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
+        <attribute name="class" add="col-lg-4" remove="col-lg-6" separator=" "/>
+    </xpath>
+    <!-- Column #2 -->
+    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
+        <attribute name="class" add="col-lg-7 offset-lg-1" remove="col-lg-6" separator=" "/>
+    </xpath>
+    <!-- Image -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="style">padding: 32px !important;</attribute>
+        <!-- Enable SVG dynamic color functionality -->
+        <attribute name="src">/web_editor/shape/theme_odoo_experts/s_text_image.svg?c1=o-color-1</attribute>
+    </xpath>
+</template>
+
+</odoo>

theme_odoo_experts/views/snippets/s_three_columns.xml

@@ -0,0 +1,28 @@
+<?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="pt72 pb72 o_colored_level" remove="pt32 pb32" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/04","flip":[]}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Floats_04"/>
+    </xpath>
+    <!-- Card #1 -->
+    <xpath expr="//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-width: 0px !important; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.05) !important;</attribute>
+    </xpath>
+    <!-- Card #2 -->
+    <xpath expr="(//div[hasclass('card')])[2]" position="attributes">
+        <attribute name="style">border-width: 0px !important; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.05) !important;</attribute>
+    </xpath>
+    <!-- Card #3 -->
+    <xpath expr="(//div[hasclass('card')])[3]" position="attributes">
+        <attribute name="style">border-width: 0px !important; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.05) !important;</attribute>
+    </xpath>
+</template>
+
+</odoo>