[IMP] theme_vehicle: update the theme

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

task-2567592

Part-of: odoo/design-themes#29

theme_vehicle/__manifest__.py

@@ -14,13 +14,15 @@
     ],
     'images': [
         'static/description/vehicle_description.png',
-        'static/description/vehicle_screenshot.jpeg',
+        'static/description/vehicle_screenshot.png',
     ],
     'images_preview_theme': {
         'website.s_cover_default_image': '/theme_vehicle/static/src/img/snippets/s_cover.jpg',
         'website.s_text_image_default_image': '/theme_vehicle/static/src/img/snippets/s_text_image.jpg',
         'website.s_masonry_block_default_image_1': '/theme_vehicle/static/src/img/snippets/s_masonry_block.jpg',
         'website.s_image_text_default_image': '/theme_vehicle/static/src/img/snippets/s_image_text.jpg',
+        'website.s_parallax_default_image': '/theme_vehicle/static/src/img/snippets/s_parallax.jpg',
+        'website.s_picture_default_image': '/theme_vehicle/static/src/img/snippets/s_picture.jpg',
     },
     'license': 'LGPL-3',
     'live_test_url': 'https://theme-vehicle.odoo.com',

theme_vehicle/data/ir_asset.xml

@@ -17,5 +17,13 @@
             <field name="active" eval="False"/>
         </record>
 
+        <record id="theme_vehicle.bootstrap_overridden_scss" model="theme.ir.asset">
+            <field name="key">theme_vehicle.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_vehicle/static/src/scss/bootstrap_overridden.scss</field>
+        </record>
+
     </data>
 </odoo>

theme_vehicle/models/theme_vehicle.py

@@ -8,9 +8,5 @@ class ThemeVehicle(models.AbstractModel):
         # For compatibility
         # self.enable_asset('theme_common.compatibility_saas_10_1')
 
-        self.disable_view('website.template_header_default')
-        self.enable_view('website.template_header_hamburger')
-        self.enable_header_off_canvas()
-
         self.disable_view('website.footer_custom')
         self.enable_view('website.template_footer_minimalist')

theme_vehicle/static/src/js/tour.js

@@ -16,42 +16,35 @@ const snippets = [
         id: 's_text_image',
         name: 'Text - Image',
     },
+    {
+        id: 's_image_text',
+        name: 'Image - Text',
+    },
+    {
+        id: 's_picture',
+        name: 'Picture',
+    },
     {
         id: 's_masonry_block',
         name: 'Masonry',
     },
-    {
-        id: 's_text_image:last-of-type',
-        name: 'Image - Text',
-    },
-    {
-        id: 's_table_of_content',
-        name: 'Table of Content',
-    },
     {
         id: 's_call_to_action',
         name: 'Call to Action',
     },
-    {
-        id: 's_references',
-        name: 'References',
-    },
 ];
 
 wTourUtils.registerThemeHomepageTour("vehicle_tour", [
     wTourUtils.dragNDrop(snippets[0], 'top'),
     wTourUtils.clickOnText(snippets[0], 'h1', 'top'),
     wTourUtils.goBackToBlocks(),
-
     wTourUtils.dragNDrop(snippets[1], 'top'),
     wTourUtils.dragNDrop(snippets[2], 'top'),
-
     wTourUtils.dragNDrop(snippets[3], 'top'),
     wTourUtils.dragNDrop(snippets[4], 'top'),
     wTourUtils.dragNDrop(snippets[5], 'top'),
-    wTourUtils.dragNDrop(snippets[6], 'top'),
+    wTourUtils.clickOnSnippet(snippets[5]),
-    wTourUtils.clickOnSnippet(snippets[6], 'top'),
+    wTourUtils.changeBackgroundColor(),
-    wTourUtils.changeOption('BackgroundShape', 'we-toggler', _t('Background Shape')),
+    wTourUtils.selectColorPalette(),
-    wTourUtils.selectNested('we-select-page', 'BackgroundShape', ':not(.o_we_pager_controls)', _t('Background Shape')),
 ]);
 });

theme_vehicle/static/src/scss/bootstrap_overridden.scss

@@ -0,0 +1,6 @@
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+$headings-font-weight: $o-theme-headings-font-weight !default;

theme_vehicle/static/src/scss/primary_variables.scss

@@ -1,4 +1,4 @@
-// Theme colors
+// Theme colors - compatibility
 $o-theme-color-palettes: map-merge($o-theme-color-palettes,
     (
         'vehicle-1': (
@@ -45,46 +45,32 @@ $o-theme-color-palettes: map-merge($o-theme-color-palettes,
         ),
     )
 );
-
 //------------------------------------------------------------------------------
 // Fonts
 //------------------------------------------------------------------------------
 
-$o-theme-h1-font-size-multiplier: (48.83 / 16);
+
-$o-theme-h2-font-size-multiplier: (39.06 / 16);
+$o-theme-h1-font-size-multiplier: (50 / 16);
-$o-theme-h3-font-size-multiplier: (31.25 / 16);
+$o-theme-h2-font-size-multiplier: (38 / 16);
-$o-theme-h4-font-size-multiplier: (25.00 / 16);
+$o-theme-h3-font-size-multiplier: (24 / 16);
-$o-theme-h5-font-size-multiplier: (20.00 / 16);
+$o-theme-h4-font-size-multiplier: (20 / 16);
-$o-theme-h6-font-size-multiplier: 1.1;
+$o-theme-h5-font-size-multiplier: (18 / 16);
+$o-theme-h6-font-size-multiplier: (16 / 16);
+
+$o-theme-headings-font-weight: 600;
 
 $o-theme-font-configs: (
-    'Handlee': (
+    'Fira Code': (
-        'family': ('Handlee', cursive),
+        'family': ('Fira Code', mono),
-        'url': 'Handlee:300,300i,400,400i,700,700i',
+        'url': 'Fira+Code:300,300i,400,400i,700,700i',
     ),
-    'Gruppo': (
+    'Fira Sans': (
-        'family': ('Gruppo', cursive),
+        'family': ('Fira Sans', sans-serif),
-        'url': 'Gruppo:300,300i,400,400i,700,700i',
+        'url': 'Fira Sans:300,300i,400,400i,700,700i',
-    ),
-    'Darker Grotesque': (
-        'family': ('Darker Grotesque', sans-serif),
-        'url': 'Darker+Grotesque:300,300i,500,500i,700,700i',
     ),
     'Droid Sans': (
         'family': ('Droid Sans', sans-serif),
     ),
-    'Bowlby One SC': (
-        'family': ('Bowlby One SC', cursive),
-        'url': 'Bowlby+One+SC:300,300i,400,400i,700,700i',
-    ),
-    'Lobster': (
-        'family': ('Lobster', cursive),
-        'url': 'Lobster:300,300i,400,400i,700,700i',
-    ),
-    'Nunito': (
-        'family': ('Nunito', sans-serif),
-        'url': 'Nunito:300,300i,400,400i,700,700i',
-    ),
     'Raleway': (
         'family': ('Raleway', sans-serif),
         'url': 'Raleway:300,300i,400,400i,700,700i',
@@ -109,22 +95,6 @@ $o-theme-font-configs: (
         'family': ('Roboto', sans-serif),
         'url': 'Roboto:300,300i,400,400i,700,700i',
     ),
-    'Permanent Marker': (
-        'family': ('Permanent Marker', cursive),
-        'url': 'Permanent+Marker:300,300i,400,400i,700,700i',
-    ),
-    'Pacifico': (
-        'family': ('Pacifico', cursive),
-        'url': 'Pacifico:300,300i,400,400i,700,700i',
-    ),
-    'Playfair Display': (
-        'family': ('Playfair Display', serif),
-        'url': 'Playfair+Display:300,300i,400,400i,700,700i',
-    ),
-    'Playfair Display SC': (
-        'family': ('Playfair Display SC', serif),
-        'url': 'Playfair+Display+SC:300,300i,400,400i,700,700i',
-    ),
 );
 
 //------------------------------------------------------------------------------
@@ -135,12 +105,11 @@ $o-website-values-palettes: (
     (
         'color-palettes-name': 'vehicle-1',
 
-        'header-font-size': 1rem,
+        'font': 'Fira Code',
-        'font': 'Droid Sans',
+        'headings-font': 'Fira Sans',
-        'headings-font': 'Oswald',
+        'navbar-font': 'Fira Sans',
-        'navbar-font': 'Oswald',
 
-        'buttons-font': 'Oswald',
+        'buttons-font': 'Fira Sans',
         'btn-primary-outline': false,
         'btn-secondary-outline': true,
 
@@ -155,9 +124,8 @@ $o-website-values-palettes: (
         'btn-font-size': 1.2rem,
         'btn-font-size-lg': 2rem,
 
-        'header-template': 'hamburger',
+        'header-template': 'default',
-        'hamburger-type': 'off-canvas',
+        'header-links-style': 'border-bottom',
-        'hamburger-position': 'left',
         'footer-template': 'minimalist',
     ),
 );
@@ -194,3 +162,12 @@ $o-theme-color-palettes-compatibility-indexes: (
     5: 'vehicle-5',
     6: 'vehicle-6',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Floats/09', (1: 3));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/18', (1: 1));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/05', (1: 1));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Rainy/09_001', (1: 1));

theme_vehicle/views/customizations.xml

@@ -1,170 +1,352 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
+<!-- ======== BANNER ======== -->
+<template id="s_banner" inherit_id="website.s_banner">
+    <xpath expr="//section" position="attributes">
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/18","flip":["x"]}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_18 o_we_flip_x"/>
+    </xpath>
+    <xpath expr="//div[hasclass('jumbotron')]" position="attributes">
+        <attribute name="class" remove="o_cc o_cc1" separator=" "/>
+    </xpath>
+</template>
+
 <!-- ======== COVER ======== -->
 <template id="s_cover" inherit_id="website.s_cover" name="Vehicle s_cover">
-    <xpath expr="//section" position="attributes">
+    <xpath expr="section" position="attributes">
-        <attribute name="class" add="pb256 pt192 s_parallax_no_overflow_hidden" remove="pt96 pb96 s_parallax_is_fixed s_parallax" separator=" "/>
+        <attribute name="class" remove="pt96 pb96" add="o_full_screen_height pt0 pb256" separator=" "/>
     </xpath>
-    <xpath expr="//h1/font" position="replace">
+    <xpath expr="//h1" position="replace" mode="inner">
-        <font style="font-size: 62px;font-weight: bold;">Start the Engine</font>
+        The New KORAN X
     </xpath>
-    <xpath expr="//a[hasclass('btn')]" position="replace">
+    <xpath expr="//p" position="replace" mode="inner">
-        <a t-att-href="cta_btn_href" class="btn btn-primary btn-lg mb-2"><t t-esc="cta_btn_text and cta_btn_text.upper()">START THE ENGINE</t></a>
+        Take it all. Compliments too.
+    </xpath>
+    <xpath expr="//a[hasclass('btn')]/t" position="replace" mode="inner">
+        Start the engine
     </xpath>
 </template>
 
 <!-- ======== TEXT - IMAGE ======== -->
 <template id="s_text_image" inherit_id="website.s_text_image" name="Vehicle s_text_image">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pb144 pt120" remove="pt32 pb32" separator=" "/>
+        <attribute name="class" add="pb24 pt56 o_cc o_cc1" remove="pt32 pb32" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/06","flip":[]}</attribute>
     </xpath>
-    <xpath expr="//div[hasclass('container')]" position="before">
+    <xpath expr="//img" position="attributes">
-        <div class="o_we_shape o_web_editor_Airy_06"/>
+        <attribute name="src">/web_editor/image_shape/website.s_text_image_default_image/web_editor/float/flt_square_3.svg?c1=o-color-1&amp;c5=o-color-5</attribute>
-    </xpath>
+        <attribute name="data-shape">web_editor/float/flt_square_3</attribute>
-
+        <attribute name="data-original-mimetype">image/jpeg</attribute>
-    <xpath expr="//div[hasclass('row')]/div" position="attributes">
+        <attribute name="data-file-name">s_text_image.svg</attribute>
-        <attribute name="class" add="col-lg-5" remove="col-lg-6" separator=" "/>
+        <attribute name="data-shape-colors">o-color-1;;;;o-color-5</attribute>
     </xpath>
     <xpath expr="//div[hasclass('row')]/div[2]" position="attributes">
-        <attribute name="class" add="offset-lg-1" separator=" "/>
+        <attribute name="class" add="col-lg-5 offset-lg-1" remove="col-lg-6" separator=" "/>
     </xpath>
-
+    <xpath expr="//h2" position="before">
-    <xpath expr="//h2" position="replace">
+        <h4 class="text-o-color-1"><b>The world is yours</b></h4>
-        <h1 style="text-align: right;">Live the Dream.</h1>
     </xpath>
-    <xpath expr="//p" position="replace"/>
+    <xpath expr="//h2" position="replace" mode="inner">
-    <xpath expr="//p" position="replace"/>
+        No compromise
-    <xpath expr="//p" position="attributes">
+    </xpath>
-        <attribute name="style" add="text-align: right;" remove="text-align: left;" separator=";"/>
+    <xpath expr="//p" position="replace" mode="inner">
+        Performance and design were the key words during the conception of this super car. No compromises were made to keep the pleasure of driving despite those constraints.
+    </xpath>
+    <xpath expr="//p[2]" position="replace" mode="inner">
+        Take advantage of a free track trial to discover it.
     </xpath>
-
 </template>
 
 <!-- ======== IMAGE - TEXT ======== -->
 <template id="s_image_text" inherit_id="website.s_image_text" name="Vehicle s_image_text">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pb144 pt120" remove="pt32 pb32" separator=" "/>
+        <attribute name="class" add="pb56 pt24 o_cc o_cc1" remove="pt32 pb32" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/07","flip":[]}</attribute>
     </xpath>
-    <xpath expr="//div[hasclass('container')]" position="before">
+    <xpath expr="//img" position="attributes">
-        <div class="o_we_shape o_web_editor_Airy_07"/>
+        <attribute name="src">/web_editor/image_shape/website.s_image_text_default_image/web_editor/float/flt_square_2.svg?c2=o-color-1&amp;c5=o-color-5</attribute>
+        <attribute name="data-shape">web_editor/float/flt_square_2</attribute>
+        <attribute name="data-original-mimetype">image/jpeg</attribute>
+        <attribute name="data-file-name">s_image_text.svg</attribute>
+        <attribute name="data-shape-colors">;o-color-1;;;o-color-5</attribute>
     </xpath>
-
     <xpath expr="//div[hasclass('row')]/div[2]" position="attributes">
         <attribute name="class" add="col-lg-5 offset-lg-1" remove="col-lg-6" separator=" "/>
     </xpath>
-
+    <xpath expr="//h2" position="before">
-    <xpath expr="//h2" position="replace">
+        <h4 class="text-o-color-1"><b>A greener lifestyle</b></h4>
-        <h2>No compromise.</h2>
     </xpath>
-
+    <xpath expr="//h2" position="replace" mode="inner">
-    <xpath expr="//p" position="replace">
+        Electric Driving
-        <p>Performance and design were the key words during the conception of this super car. No compromises were made to keep the pleasure of driving despite those constraints.</p>
     </xpath>
-    <xpath expr="//p[2]" position="replace">
-        <p>Take advantage of a free track trial to discover it.</p>
-    </xpath>
-
 </template>
 
-<!-- ======== MASONERY BLOCK ======== -->
+<!-- ======== NUMBERS ======== -->
-<template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template" name="Vehicle s_masonry_block">
+<template id="s_numbers" inherit_id="website.s_numbers">
-    <xpath expr="//p" position="replace"/>
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc4 pt48 pb48" remove="o_cc2 pt24 pb24" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/09_001","flip":[]}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Rainy_09_001"/>
+    </xpath>
+</template>
 
-    <xpath expr="//div[hasclass('h-100')]/div//h3" position="replace">
+<!-- ======== MASONRY BLOCK ======== -->
-        <h3>Electric Engine</h3>
+<template id="s_masonry_block" inherit_id="website.s_masonry_block">
+    <xpath expr="//t[@t-call]" position="attributes">
+        <attribute name="t-call">website.s_masonry_block_image_texts_image_template</attribute>
     </xpath>
-    <xpath expr="//div[hasclass('h-100')]/div//p" position="replace">
+    <xpath expr="//section" position="attributes">
-        <p>coupled to a combustion one</p>
+        <attribute name="data-masonry-template">image_text_image</attribute>
     </xpath>
+</template>
 
-    <xpath expr="//div[hasclass('h-100')]/div[2]//h3" position="replace">
+<template id="s_masonry_block_image_texts_image_template" inherit_id="website.s_masonry_block_image_texts_image_template" name="Vehicle s_masonry_block">
-        <h3>Cooling</h3>
+    <xpath expr="//div[hasclass('col-lg-3')]" position="replace">
+        <div class="col-lg-3 oe_img_bg text-center pt224 pb224" data-name="Block" style="background-image: url(/web/image/website.s_parallax_default_image);">
+            <p><br/></p>
+        </div>
     </xpath>
-    <xpath expr="//div[hasclass('h-100')]/div[2]//p" position="replace">
+    <!-- Block #02 -->
-        <p>by turbo-compressed air</p>
+    <xpath expr="//h3" position="replace" mode="inner">
+        Electrifying <b>Performance</b>.
     </xpath>
-
+    <xpath expr="(//p)[2]" position="replace" mode="inner"/>
-    <xpath expr="//div[hasclass('h-100')]/div[3]//h3" position="replace">
+    <!-- Block #03 -->
-        <h3>Ceramic</h3>
+    <xpath expr="(//h3)[2]" position="replace" mode="inner">
-    </xpath>
+        Smarter <b>Range</b>.
-    <xpath expr="//div[hasclass('h-100')]/div[3]//p" position="replace">
-        <p>braque disks</p>
-    </xpath>
-
-    <xpath expr="//div[hasclass('h-100')]/div[4]//h3" position="replace">
-        <h3>Aeronautical Cockpit</h3>
-    </xpath>
-    <xpath expr="//div[hasclass('h-100')]/div[4]//p" position="replace">
-        <p>And compact interior</p>
     </xpath>
+    <xpath expr="(//p)[3]" position="replace" mode="inner"/>
 </template>
 
 <!-- ======== REFERENCES ======== -->
- <template id="s_references" inherit_id="website.s_references" name="Vehicle s_references">
+<template id="s_references" inherit_id="website.s_references" name="Vehicle s_references">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt120 pb112" remove="pt48 pb32" separator=" "/>
+        <attribute name="class" add="o_cc o_cc1 pt120 pb112" remove="pt48 pb32" separator=" "/>
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/05","flip":[]}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_web_editor_Origins_05"/>
     </xpath>
-    <xpath expr="//h2" position="replace">
+    <xpath expr="//h2" position="replace" mode="inner">
-        <h2 style="text-align: center;">Our Partners</h2>
+        Our Partners
     </xpath>
     <xpath expr="//p" position="replace"/>
 </template>
 
-<!-- ======== TABLE OF CONTENTS ======== -->
+    <!-- ======== CALL TO ACTION ======== -->
-<template id="s_table_of_content" inherit_id="website.s_table_of_content" name="Vehicle s_table_of_content">
+<template id="s_call_to_action" inherit_id="website.s_call_to_action" name="Vehicle s_call_to_action">
+    <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt88 pb128" remove="pt24 pb24" separator=" "/>
+        <attribute name="class" add="o_cc5 pt96 pb64" remove="o_cc3 pt48 pb24" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/10","flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/09","flip":[]}</attribute>
     </xpath>
+    <!-- Shape -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Airy_10"/>
+        <div class="o_we_shape o_web_editor_Floats_09"/>
     </xpath>
-
+    <!-- Content -->
-    <xpath expr="//div[hasclass('s_table_of_content_main')]/section" position="replace">
+    <xpath expr="//h3" position="replace" mode="inner">
-        <section class="pb16">
+        <b>50,000 pre-orders</b> already registered.
-            <h1 data-anchor="true">Aerodynamic in Action</h1>
-            <h4>F1 inspired</h4>
-            <p>The design of the car is inspired by F1.</p>
-            <h4>Tested in Wind Tunnel</h4>
-            <p>Our engineers worked in the wind tunnel to obtain the most aerodynamic shape possible.</p>
-            <h4>Carbon and light material</h4>
-            <p>We use carbon and fibreglass to lighten the vehicle.</p>
-        </section>
     </xpath>
-    <xpath expr="//div[hasclass('s_table_of_content_main')]/section[2]" position="replace">
+    <xpath expr="//h3" position="attributes">
-        <section class="pb16">
+        <attribute name="style" add="text-align: left;" separator=" "/>
-            <h1 data-anchor="true">Interior Design</h1>
+    </xpath>
-            <h4>Steering wheel</h4>
+    <xpath expr="//p" position="replace" mode="inner">
-            <p>Controls are located on the steering wheel as for real sports cars.</p>
+        Join the early joiners or request for a trial on track.
-            <h4>Confort</h4>
+    </xpath>
-            <p>Leather seats with 6 positions memory.</p>
+    <xpath expr="//p" position="attributes">
-        </section>
+        <attribute name="style" add="text-align: left;" separator=" "/>
+    </xpath>
+    <xpath expr="//a" position="attributes">
+        <attribute name="class" remove="btn-lg" separator=" "/>
     </xpath>
 </template>
 
-<!-- ======== CALL TO ACTION ======== -->
+<!-- ======== PICTURE ======== -->
- <template id="s_call_to_action" inherit_id="website.s_call_to_action" name="Vehicle s_call_to_action">
+<template id="s_picture" inherit_id="website.s_picture" name="Vehicle s_picture">
+    <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc4" remove="o_cc3" separator=" "/>
+        <attribute name="class" add="pt0 pb0 oe_img_bg o_cc5" remove="pt48 pb24 o_cc2" separator=" "/>
     </xpath>
-    <xpath expr="//h3" position="replace">
+    <xpath expr="//section" position="attributes">
-        <h3 style="text-align: right;"><b>50,000 pre-orders</b> already registered.</h3>
+        <attribute name="style" add="background-image: url(/web/image/website.s_picture_default_image); background-position: 50% 0;"/>
     </xpath>
-    <xpath expr="//p" position="replace">
+    <xpath expr="//div[hasclass('container')]" position="before">
-        <p style="text-align: right;">Join the early joiners or request for a trial on track.</p>
+        <div class="o_we_bg_filter bg-black-50"></div>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-9')]" position="attributes">
+    <!-- Layout -->
-        <attribute name="class" add="col-lg-8 pt0" remove="col-lg-9 pt8" separator=" "/>
+    <xpath expr="//div[hasclass('container')]" position="replace">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-lg-12 text-center d-flex flex-column" style="height: 850px;">
+                    <div class="pt40 d-flex flex-column flex-grow-1">
+                        <h2 class="text-o-color-3">View the all-new KORAN in 3D wherever you are<br/></h2>
+                        <p class="text-o-color-3">Bring the KORAN to life on your smartphone or tablet so you can visualise it for yourself.<br/></p>
+                    </div>
+                    <div class="pb40 d-flex justify-content-center align-items-end">
+                        <span class="text-o-color-3">Our uniquely designed LED headlights are not only gorgeous but powerfully light your way.<br/></span>
+                    </div>
+                </div>
+            </div>
+        </div>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-8')]/p" position="attributes">
+</template>
-        <attribute name="style" add="text-align: right;" separator=" "/>
+
+<!-- ======== THREE COLUMNS ======== -->
+<template id="s_three_columns" inherit_id="website.s_three_columns">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc3 pt48 pb48" remove="o_cc2 pt32 pb32 bg-200" separator=" "/>
+    </xpath>
+    <!-- Card -->
+    <xpath expr="(//div[hasclass('card')])[1]" position="attributes">
+        <attribute name="style">border-width: 0px !important; box-shadow: rgba(0, 0, 0, 0.20) 0px 4px 16px 0px !important;</attribute>
+    </xpath>
+
+    <xpath expr="(//div[hasclass('card')])[2]" position="attributes">
+        <attribute name="style">border-width: 0px !important; box-shadow: rgba(0, 0, 0, 0.20) 0px 4px 16px 0px !important;</attribute>
+    </xpath>
+    <xpath expr="(//div[hasclass('card')])[3]" position="attributes">
+        <attribute name="style">border-width: 0px !important; box-shadow: rgba(0, 0, 0, 0.20) 0px 4px 16px 0px !important;</attribute>
+    </xpath>
+    <!-- Column 1 -->
+    <xpath expr="//h3" position="replace" mode="inner">
+        Koran Mini
+    </xpath>
+        <xpath expr="//p[hasclass('card-text')]" position="replace" mode="inner">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris hendrerit est bibendum sollicitudin vestibulum.
+    </xpath>
+    <xpath expr="//p[hasclass('card-text')]" position="after">
+        <p><a href="#" class="btn btn-primary btn-block mb-0 o_cc o_cc4">Configure</a></p>
+    </xpath>
+    <xpath expr="//p[hasclass('card-text')]" position="after">
+        <span class="d-inline-block mb-4"><b>From $14,000</b></span>
+    </xpath>
+    <!-- Column 2 -->
+    <xpath expr="(//h3)[2]" position="replace" mode="inner">
+        Koran GT
+    </xpath>
+        <xpath expr="(//p[hasclass('card-text')])[2]" position="replace" mode="inner">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris hendrerit est bibendum sollicitudin vestibulum.
+    </xpath>
+    <xpath expr="(//p[hasclass('card-text')])[2]" position="after">
+        <p><a href="#" class="btn btn-primary btn-block mb-0 o_cc o_cc4">Configure</a></p>
+    </xpath>
+    <xpath expr="(//p[hasclass('card-text')])[2]" position="after">
+        <span class="d-inline-block mb-4"><b>From $19,000</b></span>
+    </xpath>
+    <!-- Column 3 -->
+    <xpath expr="(//h3)[3]" position="replace" mode="inner">
+        Koran EQ
+    </xpath>
+        <xpath expr="(//p[hasclass('card-text')])[3]" position="replace" mode="inner">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris hendrerit est bibendum sollicitudin vestibulum.
+    </xpath>
+    <xpath expr="(//p[hasclass('card-text')])[3]" position="after">
+        <p><a href="#" class="btn btn-primary btn-block mb-0 o_cc o_cc4">Configure</a></p>
+    </xpath>
+    <xpath expr="(//p[hasclass('card-text')])[3]" position="after">
+        <span class="d-inline-block mb-4"><b>From $25,000</b></span>
+    </xpath>
+</template>
+
+<!-- ======== FEATURES ======== -->
+<template id="s_features" inherit_id="website.s_features">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc1" remove="o_cc2 pt32 pb32 bg-200" separator=" "/>
+    </xpath>
+    <!-- Left block -->
+    <!-- Icon -->
+    <xpath expr="//i" position="attributes">
+        <attribute name="class" add="fa-automobile" remove="fa-gear" separator=" "/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h3" position="replace" mode="inner">
+        Top Speed
+    </xpath>
+    <!-- Center block -->
+    <!-- Icon -->
+    <xpath expr="(//i)[2]" position="attributes">
+        <attribute name="class" add="fa-battery-full" remove="fa-photo" separator=" "/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="(//h3)[2]" position="replace" mode="inner">
+        Long Range
+    </xpath>
+    <!-- Right block -->
+    <!-- Icon -->
+    <xpath expr="(//i)[3]" position="attributes">
+        <attribute name="class" add="fa-cog" remove="fa-leaf" separator=" "/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="(//h3)[3]" position="replace" mode="inner">
+        Dual Motor
+    </xpath>
+</template>
+
+<!-- ======== FEATURES GRID ======== -->
+<template id="s_features_grid" inherit_id="website.s_features_grid">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc1" separator=" "/>
+    </xpath>
+    <!-- Left Title -->
+    <xpath expr="//h2" position="replace" mode="inner">
+        Your advantages
+    </xpath>
+    <!-- Right Title -->
+    <xpath expr="(//h2)[2]" position="replace" mode="inner">
+        Our web store
+    </xpath>
+    <!-- Item #1 -->
+    <xpath expr="//i" position="attributes">
+        <attribute name="class" add="rounded-0 bg-o-color-3 text-o-color-1" remove="rounded-circle bg-primary" separator=" "/>
+    </xpath>
+    <!-- Item #2 -->
+    <xpath expr="(//i)[2]" position="attributes">
+        <attribute name="class" add="rounded-0 bg-o-color-3 text-o-color-1" remove="rounded-circle bg-primary" separator=" "/>
+    </xpath>
+        <!-- Item #3 -->
+    <xpath expr="(//i)[3]" position="attributes">
+        <attribute name="class" add="rounded-0 bg-o-color-3 text-o-color-1" remove="rounded-circle bg-primary" separator=" "/>
+    </xpath>
+    <!-- Item #4 -->
+    <xpath expr="(//i)[4]" position="attributes">
+        <attribute name="class" add="rounded-0 bg-o-color-3 text-o-color-2" remove="rounded bg-secondary" separator=" "/>
+    </xpath>
+    <!-- Item #5 -->
+    <xpath expr="(//i)[5]" position="attributes">
+        <attribute name="class" add="rounded-0 bg-o-color-3 text-o-color-2" remove="rounded bg-secondary" separator=" "/>
+    </xpath>
+    <!-- Item #6 -->
+    <xpath expr="(//i)[6]" position="attributes">
+        <attribute name="class" add="rounded-0 bg-o-color-3 text-o-color-2" remove="rounded bg-secondary" separator=" "/>
+    </xpath>
+</template>
+
+<!-- ======== PRODUCT LIST ======== -->
+<template id="s_product_list" inherit_id="website.s_product_list">
+    <xpath expr="(//div[hasclass('s_product_list_item_link')]//a)" position="replace" mode="inner">
+        Brakes #1
+    </xpath>
+    <xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[2]" position="replace" mode="inner">
+        Brakes #2
+    </xpath>
+    <xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[3]" position="replace" mode="inner">
+        Brakes #3
+    </xpath>
+    <xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[4]" position="replace"  mode="inner">
+        Brakes #4
+    </xpath>
+    <xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[5]" position="replace"  mode="inner">
+        Brakes #5
+    </xpath>
+    <xpath expr="(//div[hasclass('s_product_list_item_link')]//a)[6]" position="replace"  mode="inner">
+        Brakes #6
     </xpath>
 </template>
 

theme_vehicle/views/images.xml

@@ -73,17 +73,52 @@
         <record id="library_image_11" model="theme.ir.attachment">
             <field name="key">website.library_image_11</field>
             <field name="name">website.library_image_11</field>
-            <field name="url">/theme_vehicle/static/src/img/snippets/library_image_11.jpg</field>
+            <field name="url">/theme_vehicle/static/src/img/snippets/s_three_columns_1.jpg</field>
         </record>
         <record id="library_image_13" model="theme.ir.attachment">
             <field name="key">website.library_image_13</field>
             <field name="name">website.library_image_13</field>
-            <field name="url">/theme_vehicle/static/src/img/snippets/library_image_13.jpg</field>
+            <field name="url">/theme_vehicle/static/src/img/snippets/s_three_columns_2.jpg</field>
         </record>
         <record id="library_image_07" model="theme.ir.attachment">
             <field name="key">website.library_image_07</field>
             <field name="name">website.library_image_07</field>
-            <field name="url">/theme_vehicle/static/src/img/snippets/library_image_07.jpg</field>
+            <field name="url">/theme_vehicle/static/src/img/snippets/s_three_columns_3.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_vehicle/static/src/img/snippets/s_images_wall_1.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_vehicle/static/src/img/snippets/s_images_wall_2.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_vehicle/static/src/img/snippets/s_images_wall_3.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_vehicle/static/src/img/snippets/s_images_wall_4.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_vehicle/static/src/img/snippets/s_images_wall_5.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_vehicle/static/src/img/snippets/s_img_gallery_1.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_vehicle/static/src/img/snippets/s_img_gallery_3.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>