[IMP] theme_graphene: revamp the theme

task-4178075
Part of task-4177975

closes odoo/design-themes#913

Signed-off-by: Robin Lejeune (role) <role@odoo.com>

theme_graphene/views/customizations.xml

@@ -4,21 +4,24 @@
 <!-- ======== COVER ======== -->
 <template id="s_cover" inherit_id="website.s_cover" name="Graphene s_cover">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt160 pb240 s_parallax_no_overflow_hidden o_cc3" remove="pt232 pb232 s_parallax_is_fixed s_parallax o_cc5" separator=" "/>
+        <attribute name="class" add="pt160 pb192" remove="pt232 pb232 s_parallax_is_fixed s_parallax" separator=" "/>
+        <attribute name="data-scroll-background-ratio">0</attribute>
+        <attribute name="style">background-image: url('/web/image/website.s_cover_default_image');</attribute>
     </xpath>
+    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
     <xpath expr="//h1" position="replace"/>
     <xpath expr="//p" position="replace"/>
     <xpath expr="//p" position="replace"/>
     <xpath expr="//section/div[hasclass('container')]" position="inside">
         <div class="row">
-            <div class="col col-lg-11">
-                <h1 style="text-align: right;">
+            <div class="col col-lg-7">
+                <h1>
                     Making the difference.
                 </h1>
-                <p class="lead o_default_snippet_text" style="text-align: right">
+                <p class="lead o_default_snippet_text">
                     Our mission is to give customers the best experience.<br/>Extensive documentation &amp; guides, an active community,<br/>24/7 support make it a pleasure to work with us.
                 </p>
-                <p style="text-align: right">
+                <p>
                     <a t-att-href="cta_btn_href" class="btn btn-primary btn-lg o_default_snippet_text"><t t-esc="cta_btn_text">Contact us</t></a>
                 </p>
             </div>
@@ -33,6 +36,9 @@
     <xpath expr="//section/div[hasclass('container')]" position="before">
         <div class="o_we_shape o_web_editor_Origins_02_001"/>
     </xpath>
+    <xpath expr="//div[hasclass('col-lg-7')]" position="attributes">
+        <attribute name="class" add="pb128" separator=" "/>
+    </xpath>
 </template>
 
 <!-- ======== STRIPED TOP ======== -->
@@ -45,29 +51,27 @@
 
 <!-- ======== TEXT-IMAGE ======== -->
 <template id="s_text_image" inherit_id="website.s_text_image" name="Graphene s_text_image">
-    <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pb96 pt0" remove="pb80 pt80" separator=" "/>
-    </xpath>
     <xpath expr="//h2" position="replace">
-        <h3>Unique experiences to drive engagement</h3>
+        <h2>Unique experiences to drive engagement</h2>
         <div class="s_hr pt16 pb0" data-snippet="s_hr" data-name="Separator">
             <hr class="w-100 mx-auto" style="border-top-color: rgba(0, 0, 0, 0) !important;"/>
         </div>
     </xpath>
+    <xpath expr="//img" position="attributes">
+        <attribute name="src">/web_editor/image_shape/website.s_image_text_device_perspective/web_editor/devices/iphone_3d_portrait_02.svg</attribute>
+        <attribute name="data-shape">web_editor/devices/iphone_3d_portrait_02</attribute>
+    </xpath>
     <xpath expr="//p[1]" position="replace" mode="inner">
         Users are looking to consume engaging content.<br/>We empowers our teams to create the most relevant content.
     </xpath>
     <xpath expr="//p[2]" position="replace">
         <p>We have one goal in mind, the user satisfaction.</p>
-        <div class="s_hr p0 pb32" data-snippet="s_hr" data-name="Separator">
-            <hr class="w-100 mx-auto" style="border-top-color: var(--o-color-3) !important;"/>
-        </div>
     </xpath>
     <xpath expr="//div[hasclass('col-lg-5')]" position="attributes">
-        <attribute name="class" add="col-lg-4 offset-lg-1" remove="col-lg-5" separator=" "/>
+        <attribute name="class" add="offset-lg-1" separator=" "/>
     </xpath>
     <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
-        <attribute name="class" add="col-lg-5" remove="col-lg-6" separator=" "/>
+        <attribute name="class" add="col-lg-4" remove="col-lg-6" separator=" "/>
     </xpath>
     <xpath expr="//a[hasclass('btn')]" position="attributes">
         <attribute name="class" add="btn-lg" remove="btn-primary" separator=" "/>
@@ -76,10 +80,11 @@
 
 <template id="configurator_s_text_image" inherit_id="website.configurator_s_text_image" name="Graphene s_text_image">
     <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/02_001","flip":["x","y"]}</attribute>
+        <attribute name="class" add="pb96 pt0" remove="pb80 pt80" separator=" "/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/05','flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
     </xpath>
-    <xpath expr="//section/div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_02_001 o_second_extra_shape_mapping" style="background-image: url('/web_editor/shape/web_editor/Origins/02_001.svg?c4=o-color-3&amp;c5=rgba%280%2C%200%2C%200%2C%200%29&amp;flip=xy'); background-position: 50% 0%;"/>
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_05"/>
     </xpath>
 </template>
 
@@ -106,6 +111,29 @@
     </xpath>
 </template>
 
+<!-- ======== MOCKUP IMAGE ======== -->
+<template id="s_mockup_image" inherit_id="website.s_mockup_image" name="Graphene s_mockup_image_text">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt96 pb96" remove="pt72 pb72" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
+        <attribute name="class" add="col-lg-5" remove="col-lg-4" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-8')]" position="attributes">
+        <attribute name="class" add="offset-lg-1 col-lg-6" remove="col-lg-8" separator=" "/>
+    </xpath>
+</template>
+
+<template id="configurator_s_mockup_image" inherit_id="website.configurator_s_mockup_image" name="Graphene s_mockup_image">
+    <xpath expr="//section" position="attributes">
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/02_001','colors':{'c4':'o-color-3','c5':'o-color-4'},'flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('o_we_shape')]" position="replace"/>
+    <xpath expr="//section/div" position="before">
+        <div class="o_we_shape o_web_editor_Origins_02_001" style="background-image: url('/web_editor/shape/web_editor/Origins/02_001.svg?c4=o-color-3&amp;c5=o-color-4');"/>
+    </xpath>
+</template>
+
 <!-- ======== CAROUSEL ======== -->
 <template id="s_carousel" inherit_id="website.s_carousel" name="Graphene s_carousel">
     <xpath expr="//div[hasclass('s_carousel')]" position="attributes">
@@ -233,16 +261,7 @@
 <!-- ======== COMPARISON ======== -->
 <template id="s_comparisons" inherit_id="website.s_comparisons" name="Graphene s_comparisons">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt24 o_cc o_cc4" remove="pt48" separator=" "/>
-    </xpath>
-</template>
-
-<template id="configurator_s_comparisons" inherit_id="website.configurator_s_comparisons" name="Graphene s_comparisons">
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/06_001","flip":["x"]}</attribute>
-    </xpath>
-    <xpath expr="//section/div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_06_001" style="background-image: url('/web_editor/shape/web_editor/Origins/06_001.svg?c3=o-color-3&amp;c4=o-color-4&amp;flip=x'); background-position: 50% 50%;"/>
+        <attribute name="class" add="o_cc o_cc2 pt64 pb64" remove="pt48 pb48" separator=" "/>
     </xpath>
 </template>
 
@@ -250,6 +269,7 @@
 <template id="s_numbers" inherit_id="website.s_numbers" name="Graphene s_numbers">
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="oe_img_bg o_bg_img_center pb56 pt56 s_parallax_no_overflow_hidden parallax s_parallax_is_fixed o_cc3" remove="pb80 pt80 o_cc1" separator=" "/>
+        <attribute name="data-scroll-background-ratio">1</attribute>
     </xpath>
     <xpath expr="//section/div[hasclass('container')]" position="before">
         <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 75%;"/>
@@ -257,14 +277,59 @@
     </xpath>
 </template>
 
+<!-- ======== NUMBERS GRID ======== -->
+<template id="s_numbers_grid" inherit_id="website.s_numbers_grid" name="Graphene s_numbers_grid">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc5 pt96 pb96" remove="o_cc2 pb56 pt56" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/01_001","flip":[]}</attribute>
+    </xpath>
+    <xpath expr="//section/div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Rainy_01_001"/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[1]" position="attributes">
+        <attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[2]" position="attributes">
+        <attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[3]" position="attributes">
+        <attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[4]" position="attributes">
+        <attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[5]" position="attributes">
+        <attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[6]" position="attributes">
+        <attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[7]" position="attributes">
+        <attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[8]" position="attributes">
+        <attribute name="class" add="o_cc5 bg-black-50" remove="o_cc1" separator=" "/>
+    </xpath>
+</template>
+
+<template id="configurator_s_references" inherit_id="website.configurator_s_references" name="Graphene s_configurator_references">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt96 pb96" remove="pt80 pb80" separator=" "/>
+    <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/02_001','colors':{'c4':'o-color-3','c5':'o-color-4'},'flip':['x','y'],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
+    </xpath>
+    <xpath expr="//section/div" position="before">
+        <div class="o_we_shape o_web_editor_Origins_02_001" style="background-image: url('/web_editor/shape/web_editor/Origins/02_001.svg?c4=o-color-3&amp;c5=o-color-4&amp;flip=xy'); background-position: 50% 0%;"/>
+    </xpath>
+</template>
+
 <!-- ======== PICTURE ======== -->
 <template id="s_picture" inherit_id="website.s_picture" name="Graphene s_picture">
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="pb0 pt48" remove="pb64 pt64" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Zigs/01_001","flip":[]}</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/02_001","flip":[]}</attribute>
     </xpath>
     <xpath expr="//section/div[hasclass('o_container_small')]" position="before">
-        <div class="o_we_shape o_web_editor_Zigs_01_001"/>
+        <div class="o_we_shape o_web_editor_Rainy_02_001"/>
     </xpath>
     <!-- Content -->
     <xpath expr="//h2" position="replace" mode="inner">

theme_graphene/views/images_library.xml

@@ -432,6 +432,21 @@ Check in images.scss, primary_variables.scss, main.scss and theme_common's mixin
     <field name="url">/theme_graphene/static/src/img/pictures/content_08.jpg</field>
 </record>
 
+<!-- Image Text Device -->
+<!-- This record is required to allow replacing the image with the web_editor -->
+<record id="s_image_text_device" model="theme.ir.attachment">
+    <field name="key">website.s_image_text_device</field>
+    <field name="name">website.s_image_text_device</field>
+    <field name="url">/theme_graphene/static/src/img/pictures/s_image_text_device.jpg</field>
+</record>
+
+<!-- Image Text Device Perspective -->
+<record id="s_image_text_device_perspective" model="theme.ir.attachment">
+    <field name="key">website.s_image_text_device_perspective</field>
+    <field name="name">website.s_image_text_device_perspective</field>
+    <field name="url">/theme_graphene/static/src/img/pictures/s_image_text_device_perspective.jpg</field>
+</record>
+
 <!-- Kickoff -->
 <record id="s_kickoff_default_image" model="theme.ir.attachment">
     <field name="key">website.s_kickoff_default_image</field>

theme_graphene/views/new_page_template.xml

@@ -132,7 +132,7 @@
 
 <template id="new_page_template_landing_0_s_cover" inherit_id="website.new_page_template_landing_0_s_cover">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" remove="pt160 pb240" separator=" "/>
+        <attribute name="class" remove="pt160 pb192" separator=" "/>
     </xpath>
 </template>