[IMP] theme_kea: update the theme

This commit updates the theme to improve the design
with background shapes, new pictures and new custom snippets.

task-2591476

Part-of: odoo/design-themes#36

theme_kea/__manifest__.py

@@ -2,7 +2,7 @@
     'name': 'Kea Theme',
     'description': 'Kea Theme',
     'category': 'Theme/Technology',
-    'summary': 'Technology, Tech, IT, Computers, Stores',
+    'summary': 'Technology, Tech, IT, Computers, Stores, Virtual Reality',
     'sequence': 200,
     'version': '2.0.0',
     'author': 'Odoo S.A.',
@@ -12,17 +12,31 @@
         'views/images_content.xml',
 
         'views/snippets/s_cover.xml',
-        'views/snippets/s_picture.xml',
         'views/snippets/s_image_text.xml',
+        'views/snippets/s_text_image.xml',
         'views/snippets/s_three_columns.xml',
         'views/snippets/s_media_list.xml',
         'views/snippets/s_references.xml',
-
+        'views/snippets/s_color_blocks_2.xml',
+        'views/snippets/s_picture.xml',
+        'views/snippets/s_title.xml',
+        'views/snippets/s_numbers.xml',
+        'views/snippets/s_features.xml',
+        'views/snippets/s_image_gallery.xml',
         ],
     'images': [
         'static/description/kea_description.png',
         'static/description/kea_screenshot.jpg',
     ],
+    'images_preview_theme': {
+        'website.s_cover_default_image': '/theme_kea/static/src/img/snippets/s_cover.jpg',
+        'website.s_picture_default_image': '/theme_kea/static/src/img/snippets/s_picture.jpg',
+        'website.s_quotes_carousel_demo_image_1': '/theme_kea/static/src/img/snippets/s_quotes_carousel_1.jpg',
+        'website.s_quotes_carousel_demo_image_2': '/theme_kea/static/src/img/snippets/s_quotes_carousel_2.jpg',
+        'website.s_media_list_default_image_1': '/theme_kea/static/src/img/snippets/s_media_list_1.jpg', 
+        'website.s_media_list_default_image_2': '/theme_kea/static/src/img/snippets/s_media_list_2.jpg', 
+        'website.s_media_list_default_image_3': '/theme_kea/static/src/img/snippets/s_media_list_3.jpg',
+    },
     'license': 'LGPL-3',
     'live_test_url': 'https://theme-kea.odoo.com',
     'assets': {

theme_kea/data/ir_asset.xml

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <data>
 
 <record id="theme_kea.s_banner_parallax_000_variables_scss" model="theme.ir.asset">
     <field name="key">theme_kea.s_banner_parallax_000_variables_scss</field>
@@ -48,5 +47,4 @@
     <field name="active" eval="False"/>
 </record>
 
-    </data>
 </odoo>

theme_kea/models/theme_kea.py

@@ -6,7 +6,7 @@ class ThemeKea(models.AbstractModel):
 
     def _theme_kea_post_copy(self, mod):
         self.disable_view('website.footer_custom')
-        self.enable_view('website.template_footer_call_to_action')
+        self.enable_view('website.template_footer_minimalist')
 
         # For compatibility
         # self.enable_asset('theme_common.compatibility_saas_10_1')

theme_kea/static/src/js/tour.js

@@ -1,16 +1,16 @@
-odoo.define("theme_kea.tour.kea", function (require) {
-"use strict";
+/** @odoo-module */
 
-const core = require("web.core");
-const _t = core._t;
-const wTourUtils = require("website.tour_utils");
-var tour = require("web_tour.tour");
+import wTourUtils from 'website.tour_utils';
 
 const snippets = [
     {
         id: 's_cover',
         name: 'Cover',
     },
+    {
+        id: 's_text_image',
+        name: 'Text - Image',
+    },
     {
         id: 's_picture',
         name: 'Picture',
@@ -20,17 +20,13 @@ const snippets = [
         name: 'Image - Text',
     },
     {
-        id: 's_three_columns',
-        name: 'Columns',
+        id: 's_color_blocks_2',
+        name: 'Big Boxes',
     },
     {
         id: 's_media_list',
         name: 'Media List',
     },
-    {
-        id: 's_references',
-        name: 'References',
-    },
 ];
 
 wTourUtils.registerThemeHomepageTour("kea_tour", [
@@ -40,10 +36,9 @@ wTourUtils.registerThemeHomepageTour("kea_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.dragNDrop(snippets[5]),
+    wTourUtils.clickOnSnippet(snippets[5], 'top'),
+    wTourUtils.changeBackgroundColor(),
+    wTourUtils.selectColorPalette(),
 ]);
-});

theme_kea/static/src/scss/primary_variables.scss

@@ -61,17 +61,19 @@ $o-theme-color-palettes: map-merge($o-theme-color-palettes,
 // Fonts
 //------------------------------------------------------------------------------
 
-$o-theme-h1-font-size-multiplier: (36 / 12);
-$o-theme-h2-font-size-multiplier: (30 / 12);
-$o-theme-h3-font-size-multiplier: (24 / 12);
-$o-theme-h4-font-size-multiplier: (18 / 12);
-$o-theme-h5-font-size-multiplier: (14 / 12);
-$o-theme-h6-font-size-multiplier: 1;
+$o-theme-h1-font-size-multiplier: (62 / 16);
+$o-theme-h2-font-size-multiplier: (48 / 16);
+$o-theme-h3-font-size-multiplier: (36 / 16);
+$o-theme-h4-font-size-multiplier: (24 / 16);
+$o-theme-h5-font-size-multiplier: (20 / 16);
+$o-theme-h6-font-size-multiplier: (18 / 16);
+
+$headings-font-weight:700;
 
 $o-theme-font-configs: (
-    'Spartan': (
-        'family': ('Spartan', sans-serif),  // font update - SinKinSans -> Spartan
-        'url': 'Spartan:300,300i,400,400i,700,700i',
+    'Poppins': (
+        'family': ('Poppins', sans-serif), 
+        'url': 'Poppins:300,300i,400,400i,700,700i',
     ),
     'Rajdhani': (
         'family': ('Rajdhani', sans-serif),
@@ -109,21 +111,19 @@ $o-theme-font-configs: (
 
 $o-website-values-palettes: (
     (
-        'color-palettes-name': 'kea-1',
-
-        'header-font-size': 1.25rem,
-        'logo-height': 3rem,
-        'fixed-logo-height': 3rem,
-        'font-size-base': .925rem,
+        'color-palettes-name': 'bewise-2',
+        // Fonts
         'font': 'Roboto',
-        'headings-font': 'Barlow Condensed',
-        'navbar-font': 'Barlow Condensed',
-        'buttons-font': 'Barlow Condensed',
+        'headings-font': 'Poppins',
+        'navbar-font': 'Poppins',
+        'buttons-font': 'Poppins',
+        // Links / Buttons
         'link-underline': 'never',
-        'header-links-style': 'outline',
-        'btn-primary-outline': true,
-        'header-template': 'default',
-        'footer-template': 'call_to_action',
+        'btn-border-radius': 10rem,
+        // Footer
+        'footer-template': 'minimalist',
+        'footer-effect': 'slideout_slide_hover',
+        'footer-scrolltop': true,
     ),
 );
 
@@ -166,6 +166,14 @@ $o-theme-color-palettes-compatibility-indexes: (
 // Shapes
 //------------------------------------------------------------------------------
 
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/22', (3: 3));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Floats/02', (1: 4, 2: 3, 3: 2, 4: 3, 5: 5));
+$o-bg-shapes: add-extra-shape-colors-mapping('web_editor', 'Wavy/22', 'second', (3: 3));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/03', (1: 4, 2: 3));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Floats/01', (1: 4, 2: 3, 3: 3, 4: 1, 5: 5));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/14_001', (3: 1, 4: 1));
+
+// Keep for compatibility
 $o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/03', (3: 5));
 $o-bg-shapes: add-header-shape-colors-mapping('web_editor', 'Origins/07_001', (3: 'menu'));
 $o-bg-shapes: add-header-shape-colors-mapping('web_editor', 'Origins/07_002', (3: 'menu', 4: rgba(255, 255, 255, 0)));

theme_kea/views/images_content.xml

@@ -39,11 +39,6 @@
     </record>
 
     <!-- Change default images of snippets -->
-    <record id="s_banner_default_image" model="theme.ir.attachment">
-        <field name="key">website.s_banner_default_image</field>
-        <field name="name">website.s_banner_default_image</field>
-        <field name="url">/theme_kea/static/src/img/snippets/s_banner.jpg</field>
-    </record>
     <record id="s_popup_default_image" model="theme.ir.attachment">
         <field name="key">website.s_popup_default_image</field>
         <field name="name">website.s_popup_default_image</field>
@@ -84,6 +79,41 @@
         <field name="name">website.library_image_07</field>
         <field name="url">/theme_kea/static/src/img/snippets/library_image_07.jpg</field>
     </record>
+    <record id="library_image_08" model="theme.ir.attachment">
+        <field name="key">website.library_image_08</field>
+        <field name="name">website.library_image_08</field>
+        <field name="url">/theme_kea/static/src/img/snippets/s_image_wall_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_kea/static/src/img/snippets/s_image_wall_04.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_kea/static/src/img/snippets/s_image_wall_01.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_kea/static/src/img/snippets/s_image_wall_02.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_kea/static/src/img/snippets/s_image_wall_03.jpg</field>
+    </record>
+    <record id="library_image_14" model="theme.ir.attachment">
+        <field name="key">website.library_image_14</field>
+        <field name="name">website.library_image_14</field>
+        <field name="url">/theme_kea/static/src/img/snippets/s_image_wall_04.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_kea/static/src/img/snippets/s_image_wall_05.jpg</field>
+    </record>
     <record id="s_masonry_block_default_image_1" model="theme.ir.attachment">
         <field name="key">website.s_masonry_block_default_image_1</field>
         <field name="name">website.s_masonry_block_default_image_1</field>
@@ -214,4 +244,9 @@
         <field name="name">website.s_blockquote_default_image</field>
         <field name="url">/theme_kea/static/src/img/snippets/uiface_2.jpg</field>
     </record>
+    <record id="s_banner_default_image" model="theme.ir.attachment">
+        <field name="key">website.s_banner_default_image</field>
+        <field name="name">website.s_banner_default_image</field>
+        <field name="url">/theme_kea/static/src/img/snippets/s_banner2.jpg</field>
+    </record>
 </odoo>

theme_kea/views/snippets/s_color_blocks_2.xml

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_color_blocks_2" inherit_id="website.s_color_blocks_2">
+    <!-- Box #1 -->
+    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
+        <attribute name="class" add="oe_img_bg o_bg_img_center pt256 pb256" separator=" " />
+        <attribute name="style">background-image: url('/web/image/website.s_quotes_carousel_demo_image_2'); background-position: 50% 0%;</attribute>
+    </xpath>
+    <xpath expr="//h2" position="before">
+        <div class="o_we_bg_filter bg-black-50"></div>
+    </xpath>
+    <!-- Box #1 - Icon -->
+    <xpath expr="//div[hasclass('col-lg-6')]//i" position="replace" />  
+    <!-- Box #1 - Title -->
+    <xpath expr="//div[hasclass('col-lg-6')]//h2" position="replace" mode="inner">
+        Multiplayer
+    </xpath>
+    <!-- Box #1 - Text -->
+    <xpath expr="//div[hasclass('col-lg-6')]//p" position="replace" mode="inner">
+        Conquer leaderboards, crush workouts, create with friends and more. Get lost in a growing library of VR classics and all-new experiences.
+    </xpath>                
+    <!-- Box #2 -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]" position="attributes">
+        <attribute name="class" add="oe_img_bg o_bg_img_center pt256 pb256" remove="" separator=" " />
+        <attribute name="style">background-image: url('/web/image/website.s_quotes_carousel_demo_image_1'); background-position: 50% 0%;</attribute>
+    </xpath>
+    <xpath expr="(//h2)[2]" position="before">
+        <div class="o_we_bg_filter bg-black-50"></div>
+    </xpath>
+    <!-- Box #2 - Icon -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//i" position="replace" />
+    <!-- Box #2 - Title -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//h2" position="replace" mode="inner">
+        Freedom
+    </xpath>
+    <!-- Box #2 - Text -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//p" position="replace" mode="inner">
+        No matter who you are, with a growing library of games and experiences there is no limit to where you can go and what you can do in virtual reality.
+    </xpath>
+</template>
+
+</odoo>

theme_kea/views/snippets/s_cover.xml

@@ -1,25 +1,33 @@
 <?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>
+        <attribute name="class" add="oe_img_bg o_full_screen_height" remove="parallax s_parallax_is_fixed bg-black-50" separator=" "/>
+        <attribute name="data-scroll-background-ratio">0</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/02","flip":[]}</attribute>
+        <attribute name="style">background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;</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>The Ultimate Laptop</b></font>
-                </h1>
-                <p class="lead">Speed up your work with the last laptop. 3.4Ghz, 8 cores.<br/>
-                You’ll be unstoppable all day long (up to 11 hours).</p>
-                <p><a t-att-href="cta_btn_href" class="btn btn-primary mb-2"><t t-esc="cta_btn_text">Discover</t></a></p>
-            </div>
+    <!-- Update Filter & Add Shape -->
+    <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace">
+        <div class="o_we_bg_filter" style="background-color: rgba(0, 0, 0, 0.10)"/>
+        <div class="o_we_shape o_web_editor_Floats_02"/>
     </xpath>
-        <!-- Shape -->
-        <xpath expr="//section//*[last()]" position="after">
-            <div class="o_we_shape o_web_editor_Origins_07_002"/>
+    <!-- Disable Parallax -->
+    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <!-- Title -->
+    <xpath expr="//h1" position="replace" mode="inner">
+        The Revolution <br/> in Virtual Reality
+    </xpath>
+    <!-- Paragraph -->
+    <xpath expr="//p[hasclass('lead')]" position="replace">
+        <p class="lead"><br/></p>
+    </xpath>
+    <!-- Button -->
+    <xpath expr="//a[hasclass('btn')]" position="replace">
+        <a href="#0" class="btn btn-lg btn-primary">Discover more</a>
     </xpath>
 </template>
+
 </odoo>

theme_kea/views/snippets/s_features.xml

@@ -0,0 +1,50 @@
+<?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_cc2 pt48 pb64" remove="pt32 pb32" separator=" "/>
+    </xpath>
+    <!-- Column #01 -->
+    <xpath expr="//div[hasclass('row')]/div[1]" position="attributes">
+        <attribute name="class" add="o_cc o_cc1 pt48 pb48" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('row')]/div[1]/i" position="replace">
+        <i class="fa fa-2x fa-image bg-o-color-1 m-3 rounded-circle"/>
+    </xpath>
+    <xpath expr="//div[hasclass('row')]/div[1]/h3" position="replace" mode="inner">
+        <b>Stunning visuals</b>
+    </xpath>
+    <xpath expr="//div[hasclass('row')]/div[1]/p" position="replace" mode="inner">
+        Tell what's the value for the customer for this feature.
+    </xpath>
+    <!-- Column #02 -->
+    <xpath expr="//div[hasclass('row')]/div[2]" position="attributes">
+        <attribute name="class" add="o_cc o_cc1 pt48 pb48" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('row')]/div[2]/i" position="replace">
+        <i class="fa fa-2x fa-eye bg-o-color-5 m-3 rounded-circle"/>
+    </xpath>
+    <xpath expr="//div[hasclass('row')]/div[2]/h3" position="replace" mode="inner">
+        <b>360-degree vision</b>
+    </xpath>
+    <xpath expr="//div[hasclass('row')]/div[2]/p" position="replace" mode="inner">
+        Write what the customer would like to know, not what you want to show.
+    </xpath>
+    <!-- Column #03 -->
+    <xpath expr="//div[hasclass('row')]/div[3]" position="attributes">
+        <attribute name="class" add="o_cc o_cc1 pt48 pb48" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('row')]/div[3]/i" position="attributes">
+        <attribute name="class" add="fa-2x fa-microphone rounded-circle" remove="fa-3x fa-leaf rounded" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('row')]/div[3]/h3" position="replace" mode="inner">
+        <b>Built in mic</b>
+    </xpath>
+    <xpath expr="//div[hasclass('row')]/div[3]/p" position="replace" mode="inner">
+        A small explanation of this great feature, in clear words.
+    </xpath>
+</template>
+
+</odoo>

theme_kea/views/snippets/s_image_gallery.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_images_wall" inherit_id="website.s_images_wall">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt96 pb96" remove="pt24 pb24" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_kea/views/snippets/s_image_text.xml

@@ -1,21 +1,24 @@
 <?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 pt144" remove="pt32" separator=" "/>
-            <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/02_001","flip":["y"]}</attribute>
+        <attribute name="class" add="o_cc o_cc2 pt232" remove="pt32" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/22","flip":["y"]}</attribute>
     </xpath>
     <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-            <div class="o_we_shape o_web_editor_Origins_02_001 o_we_flip_y"/>
+        <div class="o_we_shape o_web_editor_Wavy_22 o_we_flip_y"/>
     </xpath>
-        <!-- Title & Paragraph -->
-        <xpath expr="(//div[hasclass('col-lg-6')])[2]" position="replace">
-            <div class="col-lg-6 pt16 pb16">
-                <h2>Enter in a new world of control.</h2>
-                <p>Control every electronic device of your house. The coffee machine, the television, the thermostat, everything.</p>
-            </div>
+    <!-- Image -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="src">/web_editor/shape/theme_kea/s_image_text.svg?c1=o-color-1</attribute>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h2" position="replace" mode="inner">
+        <font style="background-image: linear-gradient(135deg, var(--o-color-1) 0%, var(--o-color-2) 100%);" class="text-gradient">Enter in a new world</font>
     </xpath>
 </template>
+
 </odoo>

theme_kea/views/snippets/s_media_list.xml

@@ -1,54 +1,88 @@
 <?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="o_cc4" remove="o_cc2" separator=" "/>
+        <attribute name="class" add="o_cc2 pt64 pb64" remove="o_cc1 pt32 pb32" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/01","flip":[]}</attribute>
     </xpath>
-        <!-- Row 3 -->
-        <xpath expr="(//div[hasclass('row')])[4]" position="attributes">
-            <attribute name="class" add="o_cc5 flex-row-reverse rounded" remove="o_cc1" separator=" "/>
-            <attribute name="style" add="border-radius: 25px !important;" separator=" "/>
-        </xpath>
-        <xpath expr="(//div[hasclass('col-lg-4')])[3]" position="attributes">
-            <attribute name="class" add="col-lg-3" remove="col-lg-4" separator=" "/>
-        </xpath>
-        <!-- Row 2 -->
-        <xpath expr="(//div[hasclass('row')])[3]" position="attributes">
-            <attribute name="class" add="rounded o_cc5" remove="o_cc1" separator=" "/>
-            <attribute name="style" add="border-radius: 25px !important;" separator=" "/>
-        </xpath>
-        <xpath expr="(//div[hasclass('col-lg-4')])[2]" position="attributes">
-            <attribute name="class" add="col-lg-3" remove="col-lg-4" separator=" "/>
+    <!-- Shapes -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Floats_01"/>
     </xpath>
     <!-- Row 1 -->
     <xpath expr="(//div[hasclass('row')])[2]" position="attributes">
-            <attribute name="class" add="rounded flex-row-reverse o_cc5" remove="o_cc1" separator=" "/>
-            <attribute name="style" add="border-radius: 25px !important;" separator=" "/>
+        <attribute name="class" remove="o_cc o_cc1" separator=" "/>
     </xpath>
-        <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
+    <xpath expr="//div[hasclass('s_media_list_img_wrapper')]" position="attributes">
         <attribute name="class" add="col-lg-6" remove="col-lg-4" separator=" "/>
     </xpath>
-        <!-- Text 3 -->
-        <xpath expr="(//div[hasclass('col-lg-8')])[3]" position="replace">
-            <div class="col-lg-9 s_media_list_body">
-                <h3 class="card-title">Services</h3>
-                <p class="card-text">We make it a point of honour to offer you a 5-star service. We are here to answer all your hardware problems from smartphone, tablets to your computer.</p>
-            </div>
+    <xpath expr="//div[hasclass('s_media_list_body')]" position="attributes">
+        <attribute name="class" add="col-lg-6" remove="col-lg-8" separator=" "/>
     </xpath>
-        <!-- Text 2 -->
-        <xpath expr="(//div[hasclass('col-lg-8')])[2]" position="replace">
-            <div class="col-lg-9 s_media_list_body">
-                <h3 class="card-title">Quality</h3>
-                <p class="card-text">We only use original parts or parts of equivalent quality. ​We make sure you get the best quality available on the market at the best price. All our interventions are guaranteed for a period of one year.</p>
-            </div>
+    <xpath expr="(//img)" position="attributes">
+        <attribute name="src">/web_editor/image_shape/website.s_media_list_default_image_3/web_editor/basic/bsc_organic_2.svg</attribute>
+        <attribute name="data-shape">web_editor/basic/bsc_organic_2</attribute>
+        <attribute name="data-original-mimetype">image/jpeg</attribute>
+        <attribute name="data-file-name">s_media_list_3.svg</attribute>
+        <attribute name="data-shape-colors">;;;;</attribute>
+    </xpath>
+        <!-- Row 2 -->
+    <xpath expr="(//div[hasclass('row')])[3]" position="attributes">
+        <attribute name="class" add="flex-row-reverse" remove="o_cc o_cc1" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('s_media_list_img_wrapper')])[2]" position="attributes">
+        <attribute name="class" add="col-lg-6" remove="col-lg-4" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('s_media_list_body')])[2]" position="attributes">
+        <attribute name="class" add="col-lg-6" remove="col-lg-8" separator=" "/>
+    </xpath>
+    <xpath expr="(//img)[2]" position="attributes">
+        <attribute name="src">/web_editor/image_shape/website.s_media_list_default_image_2/web_editor/basic/bsc_organic_2.svg</attribute>
+        <attribute name="data-shape">web_editor/basic/bsc_organic_2</attribute>
+        <attribute name="data-original-mimetype">image/jpeg</attribute>
+        <attribute name="data-file-name">s_media_list_2.svg</attribute>
+        <attribute name="data-shape-colors">;;;;</attribute>
+    </xpath>
+    <!-- Row 3 -->
+    <xpath expr="(//div[hasclass('row')])[4]" position="attributes">
+        <attribute name="class" remove="o_cc o_cc1" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('s_media_list_img_wrapper')])[3]" position="attributes">
+        <attribute name="class" add="col-lg-6" remove="col-lg-4" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('s_media_list_body')])[3]" position="attributes">
+        <attribute name="class" add="col-lg-6" remove="col-lg-8" separator=" "/>
+    </xpath>
+    <xpath expr="(//img)[3]" position="attributes">
+        <attribute name="src">/web_editor/image_shape/website.s_media_list_default_image_1/web_editor/basic/bsc_organic_2.svg</attribute>
+        <attribute name="data-shape">web_editor/basic/bsc_organic_2</attribute>
+        <attribute name="data-original-mimetype">image/jpeg</attribute>
+        <attribute name="data-file-name">s_media_list_1.svg</attribute>
+        <attribute name="data-shape-colors">;;;;</attribute>
     </xpath>
     <!-- Text 1 -->
-        <xpath expr="//div[hasclass('col-lg-8')]" position="replace">
-            <div class="col-lg-6 s_media_list_body">
-                <h3 class="card-title">Motherboard Repair</h3>
-                <p class="card-text">No. 1 in Macbook and iPhone motherboard repair in the world. ​We are the preferred subcontractor for many electronic repair companies.</p>
-            </div>
+    <xpath expr="//h3" position="replace" mode="inner">
+        Comfort &amp; Ease
+    </xpath>
+    <xpath expr="//p" position="replace" mode="inner">
+        We only use original parts or parts of equivalent quality. ​We make sure you get the best quality available on the market at the best price. All our interventions are guaranteed for a period of one year.
+    </xpath>
+    <!-- Text 2 -->
+    <xpath expr="(//h3)[2]" position="replace" mode="inner">
+        Fitting design
+    </xpath>
+    <xpath expr="(//p)[2]" position="replace" mode="inner">
+        We only use original parts or parts of equivalent quality. ​We make sure you get the best quality available on the market at the best price. All our interventions are guaranteed for a period of one year.
+    </xpath>
+    <!-- Text 3 -->
+    <xpath expr="(//h3)[3]" position="replace" mode="inner">
+        Natural control
+    </xpath>
+    <xpath expr="(//p)[3]" position="replace" mode="inner">
+        Use this snippet to build various types of components that feature a left- or right-aligned image alongside textual content. Duplicate the element to create a list that fits your needs.
     </xpath>
 </template>
+
 </odoo>

theme_kea/views/snippets/s_numbers.xml

@@ -0,0 +1,24 @@
+<?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_cc o_cc2 pt0 pb48" remove="pt24 pb24" separator=" "/>
+    </xpath>
+    <!-- Replace h6 by paragraphs -->
+    <xpath expr="//h6" position="replace" mode="inner">
+        Different lenses
+    </xpath>
+    <xpath expr="(//h6)[2]" position="replace" mode="inner">
+        Storage capacity (GB)
+    </xpath>
+    <xpath expr="(//h6)[3]" position="replace" mode="inner">
+        Number of controllers
+    </xpath>
+    <xpath expr="(//h6)[4]" position="replace" mode="inner">
+        New games every week
+    </xpath>
+</template>
+
+</odoo>

theme_kea/views/snippets/s_picture.xml

@@ -1,24 +1,39 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <template id="s_picture" inherit_id="website.s_picture">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-            <attribute name="class" add="o_cc5" remove="o_cc2" separator=" "/>
+        <attribute name="class" add="o_cc3" remove="o_cc2" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/Wavy_03","flip":["y"]}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Wavy_03 o_we_flip_y"/>
     </xpath>
     <!-- Title -->
-        <xpath expr="//h2" position="replace">
-            <h2 style="text-align: center;">
-                <font style="font-size: 62px;">Don’t miss a frame</font>
-            </h2>
+    <xpath expr="//h2" position="replace" mode="inner">
+        Experience a new world
+    </xpath>
+    <!-- Image -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="class" remove="img-thumbnail" separator=" "/>
+        <attribute name="style">width: 100%;</attribute>
+        <attribute name="src">/web_editor/image_shape/website.s_media_list_default_image_1/web_editor/basic/bsc_organic_2.svg</attribute>
+        <attribute name="data-shape">web_editor/basic/bsc_organic_2</attribute>
+        <attribute name="data-shape-colors">;;;;</attribute>
     </xpath>
     <!-- Paragraphs -->
-        <xpath expr="//p[1]" position="replace">
-            <p class="text-center">Our new drone enable transmission up to 15 km away and supports 4K videos.<br/>
-            Keep the contact, even in a tropical storm.</p>
+    <xpath expr="//p" position="replace" mode="inner">
+        Put yourself at the center of an extraordinary gaming universe with exclusive games.
+    </xpath>
+    <xpath expr="//p" position="attributes">
+        <attribute name="style" add="text-align: center;" separator=" "/>
     </xpath>
     <!-- Caption -->
     <xpath expr="//figcaption" position="replace">
-            <figcaption class="figure-caption text-muted py-3">The new light design in carbon fibre allow us to improve the battery life. Now, up to 11 hours.</figcaption>
+        <figcaption class="figure-caption text-muted py-3">Watch as a living game world comes alive all around you, with a seamless field of view wherever you look.</figcaption>
     </xpath>
 </template>
+
 </odoo>

theme_kea/views/snippets/s_references.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <template id="s_references" inherit_id="website.s_references">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
@@ -11,4 +12,5 @@
         <div class="o_we_shape o_web_editor_Origins_14_001"/>
     </xpath>
 </template>
+
 </odoo>

theme_kea/views/snippets/s_text_image.xml

@@ -0,0 +1,27 @@
+<?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 pt64 pb232" remove="pt32 pb32" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/22","flip":["x"]}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Wavy_22 o_we_flip_x o_second_extra_shape_mapping"/>
+    </xpath>
+    <!-- Image -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="src">/web_editor/shape/theme_kea/s_text_image.svg?c1=o-color-1</attribute>
+    </xpath>
+    <!-- Title & Paragraph -->
+    <xpath expr="//h2" position="replace" mode="inner">
+        <font style="background-image: linear-gradient(135deg, var(--o-color-1) 0%, var(--o-color-2) 100%);" class="text-gradient">Full immersion</font>
+    </xpath>
+    <xpath expr="//p" position="replace" mode="inner">
+        Write one or two paragraphs describing your product or services. To be successful your content needs to be useful to your readers.
+    </xpath>
+</template>
+
+</odoo>

theme_kea/views/snippets/s_three_columns.xml

@@ -1,42 +1,32 @@
 <?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_cc3" remove="o_cc2" separator=" "/>
     </xpath>
     <!-- Column 1 -->
-        <xpath expr="//div[hasclass('card')]" position="attributes">
-            <attribute name="class" add="border" separator=" "/>
-            <attribute name="style" add="border-width: 0px !important;" separator=" "/>
+    <xpath expr="//h3" position="replace" mode="inner">
+        Gaming
     </xpath>
-        <xpath expr="//div[hasclass('card-body')]" position="replace">
-            <div class="card-body">
-                <h3 class="card-title">Reviews and Unboxing</h3>
-                <p class="card-text">Discover what we think about products in those unboxing and review videos.</p>
-            </div>
+    <xpath expr="//p" position="replace" mode="inner">
+        VR takes immersive gaming to another level. From deep environmental interactions to puzzle solving.
     </xpath>
     <!-- Column 2 -->
-        <xpath expr="(//div[hasclass('card')])[2]" position="attributes">
-            <attribute name="class" add="border" separator=" "/>
-            <attribute name="style" add="border-width: 0px !important;" separator=" "/>
+    <xpath expr="(//h3)[2]" position="replace" mode="inner">
+        Design
     </xpath>
-        <xpath expr="(//div[hasclass('card-body')])[2]" position="replace">
-            <div class="card-body">
-                <h3 class="card-title">New Gadgets</h3>
-                <p class="card-text">Cool new technology reminds us that even in 2020, we humans can't help but invent, grow, and change.</p>
-            </div>
+    <xpath expr="(//p)[2]" position="replace" mode="inner">
+        From design concept to the showroom, create and manage workflows with better collaboration.
     </xpath>
     <!-- Column 3 -->
-        <xpath expr="(//div[hasclass('card')])[3]" position="attributes">
-            <attribute name="class" add="border" separator=" "/>
-            <attribute name="style" add="border-width: 0px !important;" separator=" "/>
+    <xpath expr="(//h3)[3]" position="replace" mode="inner">
+        Training
     </xpath>
-        <xpath expr="(//div[hasclass('card-body')])[3]" position="replace">
-            <div class="card-body">
-                <h3 class="card-title">Repair</h3>
-                <p class="card-text">As we are against programmed obsolescence and waste, we prefer to start by repairing your products before replacing them</p>
-            </div>
+    <xpath expr="(//p)[3]" position="replace" mode="inner">
+        From high-risk safety simulations and maintenance procedures to soft skills like public speaking.
     </xpath>
 </template>
+
 </odoo>

theme_kea/views/snippets/s_title.xml

@@ -0,0 +1,11 @@
+<?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_cc2 pb40 pt56" remove="pt40 pb40" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>