[IMP] theme_bookstore: improve the theme

Revamp of `theme_bookstore`.

task-4109584

closes odoo/design-themes#862

Related: odoo/odoo#176503
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>

theme_bookstore/views/snippets/s_banner.xml

@@ -6,10 +6,6 @@
     <xpath expr="//h1" position="replace" mode="inner">
         The best sellers <br/>of the year
     </xpath>
-    <!-- Button -->
-    <xpath expr="//a[hasclass('btn')]" position="replace" mode="inner">
-        Discover it <span class="fa fa-angle-right ms-2"/>
-    </xpath>
 </template>
 
 </odoo>

theme_bookstore/views/snippets/s_call_to_action.xml

@@ -24,15 +24,4 @@
     </xpath>
 </template>
 
-<template id="configurator_s_call_to_action" inherit_id="website.configurator_s_call_to_action">
-    <!-- Shape option -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/20","flip":["x","y"]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_20" style="background-image: url('/web_editor/shape/web_editor/Wavy/20.svg?c2=o-color-5&amp;flip=xy'); background-position: 50% 0%;"/>
-    </xpath>
-</template>
-
 </odoo>

theme_bookstore/views/snippets/s_cover.xml

@@ -4,7 +4,7 @@
 <template id="s_cover" inherit_id="website.s_cover">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="oe_img_bg o_full_screen_height" remove="parallax s_parallax_is_fixed bg-black-50" separator=" "/>
+        <attribute name="class" add="oe_img_bg o_full_screen_height o_cc1" remove="parallax s_parallax_is_fixed bg-black-50 o_cc4" 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>

theme_bookstore/views/snippets/s_cta_box.xml

@@ -20,7 +20,7 @@
     </xpath>
     <!-- Button -->
     <xpath expr="//a[hasclass('btn')]" position="replace">
-        <a t-att-href="cta_btn_href" class="btn btn-lg btn-primary"><span class="fa fa-shopping-cart"/> Shop Now</a>
+        <a t-att-href="cta_btn_href" class="btn btn-lg btn-secondary">Start Now<i class="fa fa-angle-right ms-2" role="img"/></a>
     </xpath>
 </template>
 

theme_bookstore/views/snippets/s_image_text.xml

@@ -6,11 +6,6 @@
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="o_cc o_cc2 pt112 pb112" remove="pt80 pb80" separator=" "/>
     </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...
@@ -25,15 +20,4 @@
     </xpath>
 </template>
 
-<template id="configurator_s_image_text" inherit_id="website.configurator_s_image_text">
-    <!-- Shape option -->
-    <xpath expr="//section" position="attributes">
-        <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>
-</template>
-
 </odoo>

theme_bookstore/views/snippets/s_masonry_block.xml

@@ -2,13 +2,15 @@
 <odoo>
 
 <template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
+    <!-- Image -->
+    <xpath expr="//div[hasclass('col-lg-5')]" position="attributes">
+        <attribute name="class" add="rounded" remove="rounded-4" separator=" "/>
+    </xpath>
     <!-- Little block #1 -->
     <!-- Main div -->
     <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/10","flip":[]}</attribute>
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-4')]/h3" position="before">
-        <div class="o_we_shape o_web_editor_Rainy_10"/>
+        <attribute name="class" add="rounded" remove="rounded-4" separator=" "/>
+        <attribute name="style" remove="background-image: linear-gradient(135deg, var(--o-color-4) -400%, var(--o-color-2) 100%);" separator=" "/>
     </xpath>
     <!-- Title -->
     <xpath expr="//div[hasclass('col-lg-4')]/h3" position="replace" mode="inner">
@@ -22,10 +24,8 @@
     <!-- Little block #2 -->
     <!-- Main div -->
     <xpath expr="//div[hasclass('col-lg-4')][2]" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Airy/02","flip":[]}</attribute>
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-4')][2]/h3" position="before">
-        <div class="o_we_shape o_web_editor_Airy_02"/>
+        <attribute name="class" add="rounded" remove="rounded-4" separator=" "/>
+        <attribute name="style" remove="background-image: linear-gradient(135deg, var(--o-color-4) -400%, var(--o-color-1) 100%);" separator=" "/>
     </xpath>
     <!-- Title -->
     <xpath expr="//div[hasclass('col-lg-4')][2]/h3" position="replace" mode="inner">
@@ -39,10 +39,7 @@
     <!-- Little block #3 -->
     <!-- Main div -->
     <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/04","flip":[]}</attribute>
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="before">
-        <div class="o_we_shape o_web_editor_Rainy_04"/>
+        <attribute name="class" add="rounded" remove="rounded-4" separator=" "/>
     </xpath>
     <!-- Title -->
     <xpath expr="//div[hasclass('col-lg-3')]/h3" position="replace" mode="inner">
@@ -56,10 +53,7 @@
     <!-- Little block #4 -->
     <!-- Main div -->
     <xpath expr="//div[hasclass('col-lg-3')][2]" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/26","flip":[]}</attribute>
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_26"/>
+        <attribute name="class" add="rounded" remove="rounded-4" separator=" "/>
     </xpath>
     <!-- Title -->
     <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="replace" mode="inner">

theme_bookstore/views/snippets/s_showcase.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_showcase" inherit_id="website.s_showcase">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt80 pb80" remove="pt48 pb48" separator=" "/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h3" position="replace" mode="inner">
+        We also sell prime quality second hand books
+    </xpath>
+    <!-- Lead -->
+    <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
+        Prime quality second-hand books, carefully selected for value and charm. Timeless stories at great prices.
+    </xpath>
+    <!-- Features -->
+    <xpath expr="//h5" position="replace" mode="inner">
+        Timeless Reads
+    </xpath>
+    <xpath expr="//div[hasclass('col-12')][2]//p" position="replace" mode="inner">
+        Explore beloved stories from every era. Find cherished classics to enjoy again and again.
+    </xpath>
+    <xpath expr="(//h5)[2]" position="replace" mode="inner">
+        Affordable Classics
+    </xpath>
+    <xpath expr="//div[hasclass('col-12')][3]//p" position="replace" mode="inner">
+        Own literary masterpieces without breaking the bank. Your favorite classic books at budget-friendly prices.
+    </xpath>
+    <xpath expr="(//h5)[3]" position="replace" mode="inner">
+        Hidden Treasures
+    </xpath>
+    <xpath expr="//div[hasclass('col-12')][4]//p" position="replace" mode="inner">
+        Discover rare and unique books waiting to be found. Unearth hidden gems in our collection.
+    </xpath>
+    <!-- Image -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="src">/web/image/website.s_three_columns_default_image_1</attribute>
+    </xpath>
+</template>
+
+</odoo>

theme_bookstore/views/snippets/s_title.xml

@@ -4,12 +4,12 @@
 <template id="s_title" inherit_id="website.s_title">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt64 pb64 o_half_screen_height parallax s_parallax_is_fixed bg-black-50" remove="pt40 pb40" separator=" "/>
-        <attribute name="data-scroll-background-ratio">1</attribute>
+        <attribute name="class" add="pt120 pb120 o_cc o_cc5" remove="pt40 pb40" separator=" "/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Airy/03_001','colors':{'c5':'o-color-1'},'flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0','animated':'true'}</attribute>
     </xpath>
+    <!-- Shape -->
     <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%;"/>
-        <div class="o_we_bg_filter bg-black-50"/>
+        <div class="o_we_shape o_web_editor_Airy_03_001 o_we_animated" style="background-image: url('/web_editor/shape/web_editor/Airy/03_001.svg?c5=o-color-1');"/>
     </xpath>
     <!-- Title -->
     <xpath expr="//h2" position="replace" mode="inner">