[IMP] theme_bookstore: update the theme

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

task-2557935

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

theme_bookstore/__manifest__.py

@@ -4,7 +4,7 @@
     'category': 'Theme/Retail',
     'summary': 'Library, Books, Magazines, Literature, Musics, Media, Store',
     'sequence': 250,
-    'version': '2.0.0',
+    'version': '2.1.0',
     'author': 'Odoo S.A.',
     'depends': ['theme_common'],
     'data': [
@@ -18,11 +18,31 @@
         'views/snippets/s_product_list.xml',
         'views/snippets/s_call_to_action.xml',
         'views/snippets/s_cover.xml',
+        'views/snippets/s_image_text.xml',
+        'views/snippets/s_masonry_block.xml',
+        'views/snippets/s_banner.xml',
+        'views/snippets/s_numbers.xml',
+        'views/snippets/s_media_list.xml',
+        'views/snippets/s_comparisons.xml',
+        'views/snippets/s_features_grid.xml',
+        'views/snippets/s_product_catalog.xml',
+        'views/snippets/s_quotes_carousel.xml',
     ],
     'images': [
-        'static/description/bookstore_description.png',
+        'static/description/bookstore_description.jpg',
         'static/description/bookstore_screenshot.jpg',
     ],
+    'images_preview_theme': {
+        'website.s_cover_default_image': '/theme_bookstore/static/src/img/snippets/s_cover.jpg',
+        'website.s_masonry_block_default_image_1': '/theme_bookstore/static/src/img/snippets/s_masonry_block.jpg',
+        'website.s_picture_default_image': '/theme_bookstore/static/src/img/snippets/s_picture.jpg',
+        'website.s_product_list_default_image_1': '/theme_bookstore/static/src/img/snippets/s_product_1.jpg',
+        'website.s_product_list_default_image_2': '/theme_bookstore/static/src/img/snippets/s_product_2.jpg',
+        'website.s_product_list_default_image_3': '/theme_bookstore/static/src/img/snippets/s_product_3.jpg',
+        'website.s_product_list_default_image_4': '/theme_bookstore/static/src/img/snippets/s_product_4.jpg',
+        'website.s_product_list_default_image_5': '/theme_bookstore/static/src/img/snippets/s_product_5.jpg',
+        'website.s_product_list_default_image_6': '/theme_bookstore/static/src/img/snippets/s_product_6.jpg',
+    },
     'license': 'LGPL-3',
     'live_test_url': 'https://theme-bookstore.odoo.com',
     'assets': {

theme_bookstore/data/ir_asset.xml

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

theme_bookstore/models/theme_bookstore.py

@@ -9,5 +9,5 @@ class ThemeBookstore(models.AbstractModel):
         self.disable_view('website.footer_custom')
 
         self.enable_view('website.template_header_contact')
-        self.enable_view('website.template_footer_descriptive')
+        self.enable_view('website.template_footer_links')
 

theme_bookstore/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="bookstore_description.png" class="img-fluid d-block mx-auto"/>
+    <img src="bookstore_description.jpg" class="img-fluid d-block mx-auto"/>
     <hr>
 
     <h2 class="text-muted">Bookstore Customization Tool</h2>

theme_bookstore/static/src/js/tour.js

@@ -1,17 +1,22 @@
-odoo.define("theme_bookstore.tour.bookstore", function (require) {
+/** @odoo-module */
-"use strict";
 
-const wTourUtils = require("website.tour_utils");
+import wTourUtils from 'website.tour_utils';
-var tour = require("web_tour.tour");
+
+const core = require("web.core");
+const _t = core._t;
 
 const snippets = [
     {
-        id: 's_title',
+        id: 's_cover',
-        name: 'Title',
+        name: 'Cover',
     },
     {
-        id: 's_three_columns',
+        id: 's_masonry_block',
-        name: 'Columns',
+        name: 'Masonry',
+    },
+    {
+        id: 's_image_text',
+        name: 'Image - Text',
     },
     {
         id: 's_picture',
@@ -21,10 +26,6 @@ const snippets = [
         id: 's_product_list',
         name: 'Items',
     },
-    {
-        id: 's_text_image',
-        name: 'Text - Image',
-    },
     {
         id: 's_call_to_action',
         name: 'Call to Action',
@@ -38,11 +39,9 @@ wTourUtils.registerThemeHomepageTour("bookstore_tour", [
     wTourUtils.dragNDrop(snippets[1]),
     wTourUtils.dragNDrop(snippets[2]),
     wTourUtils.dragNDrop(snippets[3]),
-    wTourUtils.clickOnSnippet(snippets[3]),
-    wTourUtils.changeBackgroundColor(),
-    wTourUtils.selectColorPalette(),
-    wTourUtils.goBackToBlocks(),
     wTourUtils.dragNDrop(snippets[4]),
+    wTourUtils.clickOnSnippet(snippets[4]),
+    wTourUtils.changeOption('ContainerWidth', 'we-button-group.o_we_user_value_widget', _t('width')),
+    wTourUtils.goBackToBlocks(),
     wTourUtils.dragNDrop(snippets[5]),
 ]);
-});

theme_bookstore/static/src/scss/primary_variables.scss

@@ -2,10 +2,10 @@
 // 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: (48 / 16);
-$o-theme-h3-font-size-multiplier: (16 / 12);
+$o-theme-h3-font-size-multiplier: (32 / 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-h6-font-size-multiplier: 1;
 
@@ -50,6 +50,10 @@ $o-theme-font-configs: (
         'family': ('Cormorant', serif),
         'url': 'Cormorant:300,300i,400,400i,700,700i',
     ),
+    'DM Serif Display': (
+        'family': ('DM Serif Display', serif),
+        'url': 'DM+Serif+Display:400,400i',
+    ),
 );
 
 //------------------------------------------------------------------------------
@@ -58,18 +62,19 @@ $o-theme-font-configs: (
 
 $o-website-values-palettes: (
     (
-        'color-palettes-name': 'bookstore-1',
+        'color-palettes-name': 'generic-8',
-        'header-font-size': (18 / 16) * 1rem,
+        'header-font-size': 1rem,
         'btn-border-radius': 0px,
         'btn-border-radius-sm': 0px,
         'btn-border-radius-lg': 0px,
-        'font': 'Poppins',
+        'font': 'Source Sans Pro',
-        'headings-font': 'Poppins',
+        'headings-font': 'DM Serif Display',
-        'navbar-font': 'Poppins',
+        'navbar-font': 'Source Sans Pro',
-        'buttons-font': 'Poppins',
+        'buttons-font': 'Source Sans Pro',
         'header-template': 'Contact',
-        'footer-template': 'descriptive',
+        'footer-template': 'links',
         'header-links-style': 'border-bottom',
+        'link-underline': 'never',
     ),
 );
 
@@ -100,3 +105,13 @@ $o-color-palettes-compatibility-indexes: (
     22: 'generic-16',
     23: 'generic-17',
 );
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Rainy/04', (1: 4, 5: 4));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Rainy/10', (1: 1));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/20', (2: 5));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/10', (1: 3, 2: 3));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/17', (3: 5));

theme_bookstore/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">
@@ -75,16 +75,52 @@
     <field name="name">website.library_image_11</field>
     <field name="url">/theme_bookstore/static/src/img/snippets/library_image_11.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_bookstore/static/src/img/snippets/library_image_16.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_bookstore/static/src/img/snippets/library_image_14.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_bookstore/static/src/img/snippets/library_image_13.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_bookstore/static/src/img/snippets/library_image_10.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_bookstore/static/src/img/snippets/library_image_08.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_bookstore/static/src/img/snippets/library_image_07.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_bookstore/static/src/img/snippets/library_image_05.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_bookstore/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_bookstore/static/src/img/snippets/library_image_02.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>
@@ -170,10 +206,15 @@
     <field name="name">website.s_quotes_carousel_demo_image_2</field>
     <field name="url">/theme_bookstore/static/src/img/snippets/s_quotes_carousel_2.jpg</field>
 </record>
+<record id="s_quotes_carousel_demo_image_6" model="theme.ir.attachment">
+    <field name="key">website.s_quotes_carousel_demo_image_6</field>
+    <field name="name">website.s_quotes_carousel_demo_image_6</field>
+    <field name="url">/theme_bookstore/static/src/img/snippets/s_quotes_carousel_3.jpg</field>
+</record>
 <record id="s_newsletter_block" model="theme.ir.attachment">
     <field name="key">website.library_image_17</field>
     <field name="name">website.library_image_17</field>
     <field name="url">/theme_bookstore/static/src/img/snippets/s_newsletter.jpg</field>
 </record>
-    </data>
+
-</openerp>
+</odoo>

theme_bookstore/views/snippets/s_banner.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_banner" inherit_id="website.s_banner">
+    <!-- Filter -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_bg_filter bg-white-75"/>
+    </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" mode="inner">
+        The best sellers <br/>of the year
+    </xpath>
+    <!-- Button -->
+    <xpath expr="//a[hasclass('btn')]/t" position="replace" mode="inner">
+        Discover it
+    </xpath>
+</template>
+
+</odoo>

theme_bookstore/views/snippets/s_call_to_action.xml

@@ -1,23 +1,32 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <template id="s_call_to_action" inherit_id="website.s_call_to_action">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-            <attribute name="class" add="o_half_screen_height o_cc1 pt64 pb48" remove="o_cc3 pt48 pb24" separator=" "/>
+        <attribute name="class" add="o_cc1 pt128 pb32" remove="o_cc3 pt48 pb24" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/20","flip":["x","y"]}</attribute>
     </xpath>
-        <!-- Paragraph 1 -->
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Wavy_20 o_we_flip_y o_we_flip_x"/>
+    </xpath>
+    <!-- Paragraph #1 -->
     <xpath expr="//div[hasclass('col-lg-9')]" position="replace">
         <div class="pb16 col-lg-12 text-center">
-                <h3>Browse through our <b>complete library</b>.</h3>
+            <h2>Browse through <br/>our complete library</h2>
         </div>
     </xpath>
-        <!-- Paragraph 2 -->
+    <!-- Paragraph #2 -->
-        <xpath expr="//div[hasclass('col-lg-3')]" position="replace">
+    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
-            <div class="col-lg-12 pt8">
+        <attribute name="class" add="col-lg-12" remove="col-lg-3" separator=" "/>
-                <p style="text-align: center;">
+    </xpath>
-                    <a t-att-href="cta_btn_href" class="btn btn-secondary btn-lg mb-2"><t t-esc="cta_btn_text">Browse collection</t></a>
+    <xpath expr="//div[hasclass('col-lg-12')][2]/p" position="attributes">
-                </p>
+        <attribute name="style">text-align: center;</attribute>
-            </div>
+    </xpath>
+    <xpath expr="//a[hasclass('btn')]/t" position="replace" mode="inner">
+        Browse collection
     </xpath>
 </template>
+
 </odoo>

theme_bookstore/views/snippets/s_comparisons.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_comparisons" inherit_id="website.s_comparisons">
+    <!-- Left card -->
+    <xpath expr="//div[hasclass('row')]//div" position="attributes">
+        <attribute name="class" add="pt64" remove="pt32" separator=" "/>
+    </xpath>
+    <!-- Right card -->
+    <xpath expr="//div[hasclass('row')]//div[3]" position="attributes">
+        <attribute name="class" add="pt64" remove="pt32" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_bookstore/views/snippets/s_cover.xml

@@ -1,13 +1,36 @@
 <?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="pt64 pb64 o_half_screen_height s_parallax_no_overflow_hidden bg-black-50" remove="parallax s_parallax_is_fixed" separator=" "/>
+        <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/03","flip":[]}</attribute>
         <attribute name="style">background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 55%;</attribute>
     </xpath>
-        <!-- Parallax -->
+    <!-- Filter -->
+    <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace">
+        <div class="o_we_bg_filter bg-white-75"/>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Floats_03"/>
+    </xpath>
+    <!-- Disable Parallax -->
     <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <!-- Title -->
+    <xpath expr="//h1" position="replace" mode="inner">
+        Immerse yourself <br/>in original universes
+    </xpath>
+    <!-- Paragraph -->
+    <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
+        <br/>
+    </xpath>
+    <!-- Button -->
+    <xpath expr="//a[hasclass('btn')]/t" position="replace" mode="inner">
+        Discover more
+    </xpath>
 </template>
+
 </odoo>

theme_bookstore/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 #4 -->
+    <xpath expr="(//i)[4]" position="attributes">
+        <attribute name="class" add="rounded-circle" remove="rounded" separator=" "/>
+    </xpath>
+    <!-- Item #5 -->
+    <xpath expr="(//i)[5]" position="attributes">
+        <attribute name="class" add="rounded-circle" remove="rounded" separator=" "/>
+    </xpath>
+    <!-- Item #6 -->
+    <xpath expr="(//i)[6]" position="attributes">
+        <attribute name="class" add="rounded-circle" remove="rounded" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_bookstore/views/snippets/s_image_text.xml

@@ -0,0 +1,33 @@
+<?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_cc2 pt112 pb112" remove="pt32 pb32" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/20","flip":[]}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Wavy_20"/>
+    </xpath>
+    <!-- Image -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="style" add="padding: 32px !important;" separator=";"/>
+        <attribute name="src">/web_editor/shape/theme_bookstore/s_image_text.svg?c1=o-color-1</attribute>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h2" position="replace" mode="inner">
+        Once upon a time...
+    </xpath>
+    <!-- Paragraphs -->
+    <xpath expr="//p" position="replace" mode="inner">
+        <br/>
+        Discover the history of Belgium in this well-documented book with many illustrations and testimonials.
+    </xpath>
+    <xpath expr="//p[2]" position="replace" mode="inner">
+        Learn about the difficulties encountered by NASA engineers in sending the first men to Mars.
+    </xpath>
+</template>
+
+</odoo>

theme_bookstore/views/snippets/s_masonry_block.xml

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
+    <!-- Little block #1 -->
+    <!-- Main div -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]" position="attributes">
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/10","flip":[]}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]/h3" position="before">
+        <div class="o_we_shape o_web_editor_Rainy_10"/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]/h3" position="replace" mode="inner">
+        Science fiction
+    </xpath>
+    <!-- Paragraph -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')]/p" position="replace" mode="inner">
+        Discover unknown universes
+    </xpath>
+
+    <!-- Little block #2 -->
+    <!-- Main div -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][2]" position="attributes">
+        <attribute name="class" add="o_cc o_cc1" remove="bg-200" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/02","flip":[]}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][2]/h3" position="before">
+        <div class="o_we_shape o_web_editor_Airy_02"/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][2]/h3" position="replace" mode="inner">
+        Biographies
+    </xpath>
+    <!-- Paragraph -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][2]/p" position="replace" mode="inner">
+        Meet great people
+    </xpath>
+
+    <!-- Little block #3 -->
+    <!-- Main div -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][3]" position="attributes">
+        <attribute name="class" add="o_cc o_cc5" remove="bg-200" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/04","flip":[]}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][3]/h3" position="before">
+        <div class="o_we_shape o_web_editor_Rainy_04"/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][3]/h3" position="replace" mode="inner">
+        Horror
+    </xpath>
+    <!-- Paragraph -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][3]/p" position="replace" mode="inner">
+        Enjoy your fears
+    </xpath>
+
+    <!-- Little block #4 -->
+    <!-- Main div -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][4]" position="attributes">
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/26","flip":[]}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][4]/h3" position="before">
+        <div class="o_we_shape o_web_editor_Wavy_26"/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][4]/h3" position="replace" mode="inner">
+        Romance
+    </xpath>
+    <!-- Paragraph -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//div[hasclass('col-lg-6')][4]/p" position="replace" mode="inner">
+        Read the best love stories
+    </xpath>
+</template>
+
+</odoo>

theme_bookstore/views/snippets/s_media_list.xml

@@ -0,0 +1,35 @@
+<?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_cc5" remove="o_cc2" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/10","flip":[]}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Wavy_10"/>
+    </xpath>
+    <!-- Container -->
+    <xpath expr="//div[hasclass('container')]" position="attributes">
+        <attribute name="class" add="o_container_small" remove="container" separator=" "/>
+    </xpath>
+    <!-- Media item #1 -->
+    <xpath expr="//div[hasclass('s_media_list_item')]/div" position="attributes">
+        <attribute name="class" remove="o_cc o_cc1" separator=" "/>
+    </xpath>
+    <!-- Media item #2 -->
+    <xpath expr="//div[hasclass('s_media_list_item')][2]" position="attributes">
+        <attribute name="class" add="pt80 pb80" remove="pt16 pb16" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('s_media_list_item')][2]/div" position="attributes">
+        <attribute name="class" add="flex-row-reverse" remove="o_cc o_cc1" separator=" "/>
+    </xpath>
+    <!-- Media item #3 -->
+    <xpath expr="//div[hasclass('s_media_list_item')][3]/div" position="attributes">
+        <attribute name="class" remove="o_cc o_cc1" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_bookstore/views/snippets/s_numbers.xml

@@ -0,0 +1,29 @@
+<?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_cc1 pt112 pb112" remove="o_cc2 pt24 pb24" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/12","flip":[]}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Floats_12"/>
+    </xpath>
+    <!-- Titles -->
+    <xpath expr="//h6" position="replace" mode="inner">
+        Useful options
+    </xpath>
+    <xpath expr="//h6" position="replace" mode="inner">
+        Beautiful snippets
+    </xpath>
+    <xpath expr="//h6" position="replace" mode="inner">
+        Amazing pages
+    </xpath>
+    <xpath expr="//h6" position="replace" mode="inner">
+        Outstanding images
+    </xpath>
+</template>
+
+</odoo>

theme_bookstore/views/snippets/s_picture.xml

@@ -1,24 +1,23 @@
 <?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=" "/>
     </xpath>
     <!-- Title -->
-        <xpath expr="//h2" position="replace">
+    <xpath expr="//h2" position="replace" mode="inner">
-            <h2 style="text-align: center;">
+        Discover our <br/>limited editions
-                <font style="font-size: 62px;">Limited editions</font>
-            </h2>
     </xpath>
     <!-- Paragraphs -->
-        <xpath expr="//p[1]" position="replace">
+    <xpath expr="//p" position="replace" mode="inner">
-            <p class="text-center">Explore our top-end Collector's Editions.<br/>
+        Explore our top-end Collector's Editions. <br/>Signed and limited tributes to some of the most outstanding writers of all time.
-            Signed and limited tributes to some of the most outstanding writers of all time. </p>
     </xpath>
     <!-- Caption -->
-        <xpath expr="//figcaption" position="replace">
+    <xpath expr="//figcaption" position="replace" mode="inner">
-            <figcaption class="figure-caption text-muted py-3">Don't rely on a book's cover</figcaption>
+        Don't rely on a book's cover, <a href="#">discover more about it</a>.
     </xpath>
 </template>
+
 </odoo>

theme_bookstore/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 pb112 pt112" remove="pb32 pt48" separator=" "/>
+        <attribute name="data-oe-shape-data">data-oe-shape-data="{"shape":"web_editor/Origins/17","flip":["y"]}"</attribute>
+    </xpath>
+    <!-- Shape and filter -->
+    <xpath expr="//section/*" position="before">
+        <div class="o_we_bg_filter" style="background-color: rgba(47, 47, 47, 0.7) !important;"/>
+        <div class="o_we_shape o_web_editor_Origins_17 o_we_flip_y"/>
+    </xpath>
+</template>
+
+</odoo>

theme_bookstore/views/snippets/s_product_list.xml

@@ -1,56 +1,76 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <template id="s_product_list" inherit_id="website.s_product_list">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-            <attribute name="class" add="o_cc o_cc5 pb40"  separator=" "/>
+        <attribute name="class" add="o_cc o_cc5 pb96" separator=" "/>
     </xpath>
     <!-- Container -->
     <xpath expr="//div[hasclass('container-fluid')]" position="replace">
         <div class="container">
-                <!-- Row 1 -->
+            <!-- Row #1 -->
             <div class="row">
-                    <!-- Item 1 -->
+                <!-- Item #1 -->
-                    <div class="h-100 pb16 col-lg-6">
+                <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 p-5" style="max-height: 100%;"/>
+                        <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-outline-primary">View item</a>
+                        <a href="#" class="btn btn-primary">View the book</a>
                     </div>
                 </div>
-                    <!-- Item 2 -->
+                <!-- Item #2 -->
-                    <div class="h-100 pb16 col-lg-6">
+                <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 p-5" style="max-height: 100%;"/>
+                        <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-outline-primary">View item</a>
+                        <a href="#" class="btn btn-primary">View the book</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">View the book</a>
                     </div>
                 </div>
             </div>
-                <!-- Row 2 -->
+            <!-- Row #2 -->
             <div class="row">
-                    <!-- Item 3 -->
+                <!-- Item #4 -->
-                    <div class="h-100 pb16 col-lg-6">
+                <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 p-5" style="max-height: 100%;"/>
+                        <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-outline-primary">View item</a>
+                        <a href="#" class="btn btn-primary">View the book</a>
                     </div>
                 </div>
-                    <!-- Item 4 -->
+                <!-- Item #5 -->
-                    <div class="h-100 pb16 col-lg-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 p-5" style="max-height: 100%;"/>
+                        <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-outline-primary">View item</a>
+                        <a href="#" class="btn btn-primary">View the book</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">View the book</a>
                     </div>
                 </div>
             </div>
         </div>
     </xpath>
 </template>
+
 </odoo>

theme_bookstore/views/snippets/s_quotes_carousel.xml

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

theme_bookstore/views/snippets/s_text_image.xml

@@ -1,19 +1,31 @@
 <?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_cc5" separator=" "/>
+        <attribute name="class" add="o_cc o_cc5 pt112 pb112" remove="pt32 pb32" separator=" "/>
     </xpath>
-        <!-- Paragraph -->
+    <!-- Wrapper -->
-        <xpath expr="(//div[hasclass('col-lg-6')])[1]" position="replace">
+    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
-            <div class="col-lg-6 pt16 pb16">
+        <attribute name="class" add="col-lg-5" remove="col-lg-6" separator=" "/>
-                <h2>Probably your next favorite book</h2>
+    </xpath>
-                <p><br/></p>
+    <!-- Title -->
-                <p>Discover all the publications. There is probably your next favorite book amoung them.</p>
+    <xpath expr="//h2" position="replace" mode="inner">
-                <p><br/></p>
+        Probably your next <br/>favorite book
-                <p><a href="#" class="btn btn-primary mb-2">Learn more</a></p>
+    </xpath>
-            </div>
+    <!-- Paragraphs -->
+    <xpath expr="//p" position="replace" mode="inner">
+        <br/>
+        Discover all the publications. There is probably your next favorite book amoung them.
+    </xpath>
+    <xpath expr="//p[2]" position="replace" mode="inner">
+        <br/>
+    </xpath>
+    <!-- Img Wrapper -->
+    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
+        <attribute name="class" add="col-lg-5 offset-lg-2" remove="col-lg-6" separator=" "/>
     </xpath>
 </template>
+
 </odoo>

theme_bookstore/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_cc1" remove="o_cc2" separator=" "/>
     </xpath>
-        <!-- Column 1 -->
+    <!-- Column #1 -->
-        <xpath expr="//div[hasclass('card')]" position="attributes">
+    <xpath expr="//h3" position="replace" mode="inner">
-            <attribute name="class" add="border rounded shadow" separator=" "/>
+        A Belgian Story
-            <attribute name="style" add="border-width: 10px !important; border-color: rgb(36, 35, 39) !important; border-radius: 0px !important; box-shadow: rgb(36, 35, 39) 0px 0px 25px 0px !important;" separator=" "/>
     </xpath>
-        <xpath expr="//div[hasclass('card-body')]" position="replace">
+    <xpath expr="//p[hasclass('card-text')]" position="replace" mode="inner">
-            <div class="card-body">
+        Discover the history of Belgium in this well-documented book with many illustrations and testimonials.
-                <h3 class="card-title">A Belgian Story</h3>
-                <p class="card-text">Discover the history of Belgium in this well-documented book with many illustrations and testimonials.</p>
-            </div>
     </xpath>
-        <!-- Column 2 -->
+    <!-- Column #2 -->
-        <xpath expr="(//div[hasclass('card')])[2]" position="attributes">
+    <xpath expr="(//h3)[2]" position="replace" mode="inner">
-            <attribute name="class" add="border rounded shadow" separator=" "/>
+        At the Mars conquest
-            <attribute name="style" add="border-width: 10px !important; border-color: rgb(36, 35, 39) !important; border-radius: 0px !important; box-shadow: rgb(36, 35, 39) 0px 0px 25px 0px !important;" separator=" "/>
     </xpath>
-        <xpath expr="(//div[hasclass('card-body')])[2]" position="replace">
+    <xpath expr="(//p[hasclass('card-text')])[2]" position="replace" mode="inner">
-            <div class="card-body">
+        Learn about the difficulties encountered by NASA engineers in sending the first men to Mars.
-                <h3 class="card-title">At the Mars conquest</h3>
-                <p class="card-text">Learn about the difficulties encountered by NASA engineers in sending the first men to Mars.</p>
-            </div>
     </xpath>
-        <!-- Column 3 -->
+    <!-- Column #3 -->
-        <xpath expr="(//div[hasclass('card')])[3]" position="attributes">
+    <xpath expr="(//h3)[3]" position="replace" mode="inner">
-            <attribute name="class" add="border rounded shadow" separator=" "/>
+        Re-edition
-            <attribute name="style" add="border-width: 10px !important; border-color: rgb(36, 35, 39) !important; border-radius: 0px !important; box-shadow: rgb(36, 35, 39) 0px 0px 25px 0px !important;" separator=" "/>
     </xpath>
-        <xpath expr="(//div[hasclass('card-body')])[3]" position="replace">
+    <xpath expr="(//p[hasclass('card-text')])[3]" position="replace" mode="inner">
-            <div class="card-body">
+        The first re-edition of this Latin dictionary, from 1460. Printed originally on the Gutenberg press.
-                <h3 class="card-title">Re-edition</h3>
-                <p class="card-text">The first re-edition of this Latin dictionary, from 1460. Printed originally on the Gutenberg press.</p>
-            </div>
     </xpath>
 </template>
+
 </odoo>

theme_bookstore/views/snippets/s_title.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+
 <template id="s_title" inherit_id="website.s_title">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
@@ -7,14 +8,13 @@
         <attribute name="data-scroll-background-ratio">1</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
-            <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 50%;"></span>
+        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_banner_default_image'); background-position: 50% 50%;"/>
         <div class="o_we_bg_filter bg-black-50"/>
     </xpath>
     <!-- Title -->
-        <xpath expr="//h1" position="replace">
+    <xpath expr="//h1" position="replace" mode="inner">
-            <h1 style="text-align: center;">
+        Reading means borrowing
-                <font style="font-size: 62px;"><b>Reading means borrowing.</b></font>
-            </h1>
     </xpath>
 </template>
+
 </odoo>