[IMP] theme_cobalt: revamp the theme

task-4178067
Part of task-4177978

X-original-commit: 1adb62a7f9
Part-of: odoo/design-themes#971
Related: odoo/odoo#182039
Signed-off-by: Louis (loco) <loco@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

theme_cobalt/__manifest__.py

@@ -17,16 +17,8 @@
         'static/description/cobalt_poster.jpg',
         'static/description/cobalt_screenshot.jpg',
     ],
-    'images_preview_theme': {
-        'website.library_image_03': '/theme_cobalt/static/src/img/pictures/s_image_1.jpg',
-        'website.library_image_14': '/theme_cobalt/static/src/img/pictures/s_image_6.jpg',
-        'website.library_image_10': '/theme_cobalt/static/src/img/pictures/s_image_4.jpg',
-        'website.library_image_13': '/theme_cobalt/static/src/img/pictures/s_image_2.jpg',
-        'website.library_image_16': '/theme_cobalt/static/src/img/pictures/s_image_3.jpg',
-        'website.library_image_05': '/theme_cobalt/static/src/img/pictures/s_image_5.jpg',
-    },
     'configurator_snippets': {
-        'homepage': ['s_banner', 's_references', 's_text_image', 's_color_blocks_2', 's_images_wall'],
+        'homepage': ['s_banner', 's_image_text', 's_key_images', 's_text_image', 's_company_team_detail', 's_references_grid'],
     },
     'license': 'LGPL-3',
     'live_test_url': 'https://theme-cobalt.odoo.com',

theme_cobalt/models/theme_cobalt.py

@@ -7,3 +7,6 @@ class ThemeCobalt(models.AbstractModel):
     def _theme_cobalt_post_copy(self, mod):
         self.enable_asset("website.ripple_effect_scss")
         self.enable_asset("website.ripple_effect_js")
+        self.enable_view("website.template_header_boxed")
+        self.enable_view("website.template_footer_call_to_action")
+        self.enable_view("website.header_navbar_pills_style")

theme_cobalt/static/src/js/tour.js

@@ -9,9 +9,14 @@ const snippets = [
         groupName: "Intro",
     },
     {
-        id: 's_references',
-        name: 'References',
-        groupName: "People",
+        id: 's_image_text',
+        name: 'Image - Text',
+        groupName: "Content",
+    },
+    {
+        id: 's_key_images',
+        name: 'Key Images',
+        groupName: "Columns",
     },
     {
         id: 's_text_image',
@@ -19,33 +24,26 @@ const snippets = [
         groupName: "Content",
     },
     {
-        id: 's_color_blocks_2',
-        name: 'Big Boxes',
-        groupName: "Content",
+        id: 's_company_team_detail',
+        name: 'Team Detail',
+        groupName: "People",
     },
     {
-        id: 's_title',
-        name: 'Title',
-        groupName: "Text",
-    },
-    {
-        id: 's_image_gallery',
-        name: 'Images Wall',
-        groupName: "Images",
+        id: 's_references_grid',
+        name: 'References Grid',
+        groupName: "People",
     },
 ];
 
 
 wTourUtils.registerThemeHomepageTour("cobalt_tour", () => [
-    wTourUtils.assertCssVariable('--color-palettes-name', '"cobalt-1"'),
+    wTourUtils.assertCssVariable('--color-palettes-name', '"default-8"'),
     ...wTourUtils.insertSnippet(snippets[0]),
     ...wTourUtils.clickOnText(snippets[0], 'h1', 'top'),
     wTourUtils.goBackToBlocks(),
-
     ...wTourUtils.insertSnippet(snippets[1]),
     ...wTourUtils.insertSnippet(snippets[2]),
     ...wTourUtils.insertSnippet(snippets[3]),
-
     ...wTourUtils.insertSnippet(snippets[4]),
     ...wTourUtils.insertSnippet(snippets[5]),
 ]);

theme_cobalt/static/src/scss/primary_variables.scss

@@ -16,6 +16,10 @@ $o-theme-font-configs: (
         'family': ('Abril Fatface', serif),
         'url': 'Abril+Fatface:300,300i,400,400i,700,700i',
     ),
+    'Poppins': (
+        'family': ('Poppins', sans-serif),
+        'url': 'Poppins:300,300i,400,400i,700,700i',
+    ),
 );
 
 
@@ -25,20 +29,28 @@ $o-theme-font-configs: (
 
 $o-website-values-palettes: (
     (
-        'color-palettes-name': 'cobalt-1',
+        'color-palettes-name': 'default-8',
 
         'font': 'Inter',
+        'headings-font': 'Poppins',
 
         'headings-line-height': 1.1,
 
         'btn-ripple': true,
-        'btn-secondary-outline': true,
-        'btn-border-radius': 2px,
+        'btn-border-radius': 10rem,
+        'btn-border-radius-sm': 10rem,
+        'btn-border-radius-lg': 10rem,
+        'btn-padding-y': .5rem,
+        'btn-padding-x': 1rem,
+        'btn-padding-y-lg': 1rem,
+        'btn-padding-x-lg': 2rem,
+        'btn-padding-x-sm': .5rem,
+        'header-template': 'boxed',
+        'header-links-style': 'pills',
+        'footer-template': 'call_to_action',
     ),
 );
 
-$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'cobalt-1');
-
 $o-color-palettes-compatibility-indexes: (
     1: 'cobalt-1',
     2: 'generic-1',

theme_cobalt/views/customizations.xml

@@ -5,7 +5,11 @@
 <template id="s_banner" inherit_id="website.s_banner" name="Cobalt s_banner">
     <!-- Content -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc o_cc2 pt152 pb128" remove="pt96 pb96" separator=" "/>
+        <attribute name="class" add="pt24 pb80" remove="pt96 pb96" separator=" "/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/04_001','flip':['y'],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_04_001" style="background-image: url('/web_editor/shape/web_editor/Origins/04_001.svg?c3=o-color-3&amp;flip=y');"/>
     </xpath>
     <!-- Row - remove grid mode -->
     <xpath expr="//div[hasclass('row')]" position="attributes">
@@ -14,7 +18,7 @@
     </xpath>
     <!-- Jumbotron -->
     <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
-        <attribute name="class" add="col-lg-6" remove="o_grid_item g-height-10 g-col-lg-4 col-lg-4" separator=" "/>
+        <attribute name="class" add="pt64" remove="o_grid_item g-height-10 g-col-lg-4" separator=" "/>
         <attribute name="style"/>
     </xpath>
     <!-- Remove grid images -->
@@ -22,35 +26,21 @@
     <xpath expr="//div[hasclass('o_grid_item_image')]" position="replace"/>
     <xpath expr="//div[hasclass('col-lg-5')]" position="replace"/>
     <!-- Image -->
-    <xpath expr="//div[hasclass('col-lg-6')]" position="after">
-        <div class="pt16 pb16 o_colored_level col-lg-5 offset-lg-1">
-            <img src="/web_editor/shape/theme_cobalt/s_banner.svg?c1=o-color-1" style="width: 100%;" alt="Marketing"/>
+    <xpath expr="//div[hasclass('col-lg-4')]" position="after">
+        <div class="col-lg-8 d-lg-block d-none o_snippet_mobile_invisible">
+            <img src="/web_editor/shape/theme_cobalt/s_banner_2.svg?c1=o-color-1" style="width: 100%;" alt=""/>
         </div>
     </xpath>
     <!-- Content -->
-    <xpath expr="//h1" position="attributes">
-        <attribute name="class" remove="display-1" separator=" "/>
-    </xpath>
-    <xpath expr="//h1" position="replace" mode="inner">
-        The ultimate marketing platform for brands
+    <xpath expr="//h1" position="replace">
+        <h1>The <br/><font class="text-o-color-1">ultimate</font> <br/>marketing platform</h1>
     </xpath>
     <xpath expr="//p" position="replace">
-        <p class="lead">Building game-changing digital experiences designed to set your brand apart.</p>
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-6')]//p[2]" position="attributes">
-        <attribute name="class" add="mb-0" separator=" "/>
-    </xpath>
-    <xpath expr="//a" position="attributes">
-        <attribute name="class" add="flat" separator=" "/>
-    </xpath>
-</template>
-
-<template id="configurator_s_banner" inherit_id="website.configurator_s_banner" name="Cobalt s_banner">
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/11_001","flip":["y"]}</attribute>
-    </xpath>
-    <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Origins_11_001" style="background-image: url('/web_editor/shape/web_editor/Origins/11_001.svg?c3=o-color-4&amp;c4=o-color-4&amp;flip=y'); background-position: 50% 100%;"/>
+        <p class="lead">
+            <br/>
+            Building game-changing digital experiences designed to set your brand apart.
+            <br/>
+        </p>
     </xpath>
 </template>
 
@@ -58,17 +48,21 @@
 <template id="s_image_text" inherit_id="website.s_image_text" name="Cobalt s_image_text">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt152 pb128" remove="pt80 pb80" separator=" "/>
+        <attribute name="class" add="o_cc o_cc2 pt72 pb72" remove="pt80 pb80" separator=" "/>
     </xpath>
     <!-- Image -->
+    <xpath expr="//div[hasclass('col-lg-5')]" position="attributes">
+        <attribute name="class" add="pt24 pb24" remove="pt16 pb16" separator=" "/>
+    </xpath>
     <xpath expr="//img" position="replace">
-        <img src="/web_editor/shape/theme_cobalt/s_image_text.svg?c1=o-color-1" style="width: 100%;" alt="Marketing"/>
+        <img src="/web_editor/shape/theme_cobalt/s_image_text_2.svg?c1=o-color-1" style="width: 100%;" alt="Marketing"/>
     </xpath>
     <!-- Content -->
-    <xpath expr="//h2" position="replace" mode="inner">
-        Strategy synchronising multiple channels
+    <xpath expr="//h2" position="replace">
+        <h2>Strategy synchronising multiple channels</h2>
     </xpath>
     <xpath expr="//p" position="replace" mode="inner">
+        <br/>
         We create a consistent customer experience through a detailed digital strategy built on precise customer research.
     </xpath>
     <xpath expr="//p[last()-1]" position="replace"/>
@@ -82,23 +76,22 @@
         <attribute name="class" add="pb88" remove="pb80" separator=" "/>
     </xpath>
     <!-- Content -->
-    <xpath expr="//h2" position="replace" mode="inner">
-        What we can do, <b>for you</b><br/>
+    <xpath expr="//h2" position="replace">
+        <h2>Unlock the possibilities of what we can offer you</h2>
     </xpath>
     <xpath expr="//img" position="replace">
-            <img src="/web_editor/shape/theme_cobalt/s_text_image.svg?c1=o-color-1" style="width: 100%;" alt="Marketing"/>
+        <img src="/web_editor/shape/theme_cobalt/s_text_image.svg?c1=o-color-1" style="width: 100%;" alt="Marketing"/>
     </xpath>
     <xpath expr="//p" position="replace"/>
     <xpath expr="//p" position="replace">
+        <p><br/></p>
         <h5>Digital Transformation</h5>
         <p>Leader in digital business, we’re helping companies of all sizes to thrive in an ever-changing landscape.</p>
         <br/>
         <h5>Web &amp; App Development</h5>
         <p>We have collected solid experience in building native and cross-platform mobile applications and websites. Check our portfolio from clients around the world.</p>
         <br/>
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
-        <attribute name="class" add="col-lg-7" remove="col-lg-6" separator=" "/>
+        <p><a href="#" class="btn btn-secondary">Learn more</a></p>
     </xpath>
     <xpath expr="//a[hasclass('btn')]" position="replace"/>
 </template>
@@ -273,7 +266,7 @@
 <template id="s_color_blocks_2" inherit_id="website.s_color_blocks_2" name="Cobalt s_color_blocks_2">
     <!-- Left column -->
     <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
-        <attribute name="style" add="background-image: linear-gradient(135deg, var(--o-color-2) 0%, var(--o-color-1) 100%);" separator=";"/>
+        <attribute name="class" add="o_cc3" remove="o_cc4" separator=" "/>
     </xpath>
     <!-- Left column - Text -->
     <xpath expr="//div[hasclass('col-lg-6')]//p" position="replace"/>
@@ -281,22 +274,23 @@
     <xpath expr="//div[hasclass('col-lg-6')][1]//h2" position="replace" mode="inner">
         Are you a startup or a seasoned company looking for a new brand identity?
     </xpath>
+    <xpath expr="//div[hasclass('col-lg-6')][1]//h2" position="after">
+        <p><br/></p>
+    </xpath>
     <!-- Left column - Button -->
     <xpath expr="//div[hasclass('col-lg-6')]//a[hasclass('btn')]" position="attributes">
         <attribute name="class" add="btn-lg flat" separator=" "/>
     </xpath>
 
-    <!-- Right column -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]" position="attributes">
-        <attribute name="class" add="o_cc3" remove="o_cc5" separator=" "/>
-        <attribute name="style" add="background-image: linear-gradient(315deg, var(--o-color-2) 0%, var(--o-color-1) 100%);" separator=";"/>
-    </xpath>
+    <!-- Right column - Text -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//p" position="replace"/>
     <!-- Right column - Title -->
     <xpath expr="//div[hasclass('col-lg-6')][2]//h2" position="replace" mode="inner">
         Are you an established brand looking for ongoing creative services?
     </xpath>
-    <!-- Right column - Text -->
-    <xpath expr="//div[hasclass('col-lg-6')][2]//p" position="replace"/>
+    <xpath expr="//div[hasclass('col-lg-6')][2]//h2" position="after">
+        <p><br/></p>
+    </xpath>
     <!-- Right column - Button -->
     <xpath expr="//div[hasclass('col-lg-6')][2]//a[hasclass('btn')]" position="attributes">
         <attribute name="class" add="btn-lg flat" separator=" "/>
@@ -473,30 +467,89 @@
 <template id="s_key_images" inherit_id="website.s_key_images" name="Cobalt s_key_images">
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/09_001','flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
+        <attribute name="class" add="pt112" remove="pt72" separator=" "/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/14_001','colors':{'c3':'o-color-3','c4':'o-color-4'},'flip':['y'],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
     </xpath>
     <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Origins_09_001"/>
+        <div class="o_we_shape o_web_editor_Origins_14_001" style="background-image: url('/web_editor/shape/web_editor/Origins/14_001.svg?c3=o-color-3&amp;c4=o-color-4&amp;flip=y'); background-position: 50% 0%;"/>
+    </xpath>
+
+    <!-- Numbers -->
+    <xpath expr="//div[hasclass('col-lg-3')]/p" position="replace">
+        <p class="h1-fs" style="text-align: center;">
+            <font class="text-o-color-2">01</font>
+        </p>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])[2]/p" position="replace">
+        <p class="h1-fs" style="text-align: center;">
+            <font class="text-o-color-2">02</font>
+        </p>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])[3]/p" position="replace">
+        <p class="h1-fs" style="text-align: center;">
+            <font class="text-o-color-2">03</font>
+        </p>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])[4]/p" position="replace">
+        <p class="h1-fs" style="text-align: center;">
+            <font class="text-o-color-2">04</font>
+        </p>
     </xpath>
 
     <!-- Texts -->
-    <xpath expr="//h2" position="replace" mode="inner">
-        Driving Success Through Innovation
+    <xpath expr="//h2" position="replace">
+        <h2 style="text-align: center;">
+            Driving Success <br/>Through Innovation
+        </h2>
     </xpath>
-    <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
-        Empowering Businesses to Reach New Heights
+    <xpath expr="//p[hasclass('lead')]" position="replace">
+        <p class="lead" style="text-align: center;">
+            Empowering Businesses to Reach New Heights
+        </p>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')]//p[3]" position="replace" mode="inner">
-        Customized solutions for your business needs
+    <xpath expr="//div[hasclass('col-lg-3')]//p[3]" position="replace">
+        <h3 class="h4-fs" style="text-align: center;">Efficiency</h3>
+        <p><br/></p>
     </xpath>
-    <xpath expr="(//div[hasclass('col-lg-3')])[2]//p[3]" position="replace" mode="inner">
-        Expert advice to navigate complex challenges
+    <xpath expr="(//div[hasclass('col-lg-3')])[2]//p[3]" position="replace">
+        <h3 class="h4-fs" style="text-align: center;">Reliability</h3>
+        <p><br/></p>
     </xpath>
-    <xpath expr="(//div[hasclass('col-lg-3')])[3]//p[3]" position="replace" mode="inner">
-        Proven strategies for sustainable growth
+    <xpath expr="(//div[hasclass('col-lg-3')])[3]//p[3]" position="replace">
+        <h3 class="h4-fs" style="text-align: center;">Innovation</h3>
+        <p><br/></p>
     </xpath>
-    <xpath expr="(//div[hasclass('col-lg-3')])[4]//p[3]" position="replace" mode="inner">
-        Partner with us to unlock your potential
+    <xpath expr="(//div[hasclass('col-lg-3')])[4]//p[3]" position="replace">
+        <h3 class="h4-fs" style="text-align: center;">Scalability</h3>
+        <p><br/></p>
+    </xpath>
+
+    <!-- Images -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="src">/web_editor/shape/theme_cobalt/s_key_images_1.svg?c1=o-color-1</attribute>
+    </xpath>
+    <xpath expr="(//img)[2]" position="attributes">
+        <attribute name="src">/web_editor/shape/theme_cobalt/s_key_images_2.svg?c1=o-color-1</attribute>
+    </xpath>
+    <xpath expr="(//img)[3]" position="attributes">
+        <attribute name="src">/web_editor/shape/theme_cobalt/s_key_images_3.svg?c1=o-color-1</attribute>
+    </xpath>
+    <xpath expr="(//img)[4]" position="attributes">
+        <attribute name="src">/web_editor/shape/theme_cobalt/s_key_images_4.svg?c1=o-color-1</attribute>
+    </xpath>
+
+    <!-- Move texts before images -->
+    <xpath expr="//div[hasclass('col-lg-3')]//p[3]" position="after">
+        <xpath expr="//div[hasclass('col-lg-3')]//p[2]" position="move"/>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])[2]//p[3]" position="after">
+        <xpath expr="(//div[hasclass('col-lg-3')])[2]//p[2]" position="move"/>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])[3]//p[3]" position="after">
+        <xpath expr="(//div[hasclass('col-lg-3')])[3]//p[2]" position="move"/>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])[4]//p[3]" position="after">
+        <xpath expr="(//div[hasclass('col-lg-3')])[4]//p[2]" position="move"/>
     </xpath>
 </template>
 
@@ -525,9 +578,6 @@
     <xpath expr="//h2/div" position="replace" mode="inner">
         90%
     </xpath>
-    <xpath expr="//h2/following-sibling::div" position="attributes">
-        <attribute name="style" add="font-size: 7.75rem;" remove="font-size: 2.25rem;" separator=";"/>
-    </xpath>
 </template>
 
 <!-- ===== WAVY GRID ======== -->
@@ -563,7 +613,7 @@
 <template id="s_shape_image" inherit_id="website.s_shape_image">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_colored_level o_cc o_cc3" separator=" "/>
+        <attribute name="class" add="o_cc o_cc2" separator=" "/>
     </xpath>
 </template>
 
@@ -572,6 +622,9 @@
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="o_cc4" remove="o_cc5" separator=" "/>
     </xpath>
+    <xpath expr="//div[hasclass('o_we_bg_filter')]" position="attributes">
+        <attribute name="class" add="bg-black-75" remove="bg-black-50" separator=" "/>
+    </xpath>
 </template>
 
 <!-- ======== IMAGES CONSTELLATIONS ======== -->
@@ -580,6 +633,9 @@
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="o_cc1" remove="o_cc5" separator=" "/>
     </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[4]" position="attributes">
+        <attribute name="style" add="grid-area: 11 / 5 / 15 / 11;" remove="grid-area: 12 / 5 / 16 / 11;" separator=";"/>
+    </xpath>
 </template>
 
 <!-- ======== EMPOWERMENT ======== -->
@@ -591,7 +647,7 @@
     </xpath>
     <!-- Title -->
     <xpath expr="//h1" position="replace" mode="inner">
-       Building the future<br/>with NovaDev Solutions
+        Building the future<br/>with NovaDev Solutions
     </xpath>
     <!-- Paragraphs -->
     <xpath expr="//p" position="replace" mode="inner">
@@ -607,4 +663,47 @@
     </xpath>
 </template>
 
+<!-- ======== STRIPED TOP ======== -->
+<template id="s_striped_top" inherit_id="website.s_striped_top">
+    <xpath expr="//h1" position="replace" mode="inner">
+        Experience the Future of Innovation
+    </xpath>
+</template>
+
+<!-- ======== COMPANY TEAM DETAIL ======== -->
+<template id="s_company_team_detail" inherit_id="website.s_company_team_detail">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc5 pt96" remove="o_cc1 pt64" separator=" "/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/11_001','colors':{'c3':'o-color-4','c4':'o-color-5'},'flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_11_001" style="background-image: url('/web_editor/shape/web_editor/Origins/11_001.svg?c3=o-color-4&amp;c4=o-color-5');"/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
+        <attribute name="class" add="col-lg-3" remove="col-lg-4" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
+        <attribute name="class" add="col-lg-3" remove="col-lg-4" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
+        <attribute name="class" add="col-lg-3" remove="col-lg-4" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
+        <attribute name="class" add="col-lg-3" remove="col-lg-4" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-4')]" position="replace"/>
+    <xpath expr="//div[hasclass('col-lg-4')]" position="replace"/>
+</template>
+
+<!-- ======== REFERENCES GRID ======== -->
+<template id="s_references_grid" inherit_id="website.s_references_grid">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt112" remove="pt64" separator=" "/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/14_001','colors':{'c3':'o-color-5','c4':'o-color-4'},'flip':['y'],'showOnMobile':false,'shapeAnimationSpeed':'0'}</attribute>
+    </xpath>
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_14_001" style="background-image: url('/web_editor/shape/web_editor/Origins/14_001.svg?c3=o-color-5&amp;c4=o-color-4&amp;flip=y'); background-position: 50% 0%;"/>
+    </xpath>
+</template>
+
 </odoo>

theme_cobalt/views/images.xml

@@ -30,8 +30,8 @@
     <field name="url">/theme_cobalt/static/src/img/pictures/s_three_columns_1.jpg</field>
 </record>
 <record id="s_three_columns_default_image_2" model="theme.ir.attachment">
-    <field name="key">s_three_columns_default_image_2</field>
-    <field name="name">s_three_columns_default_image_2</field>
+    <field name="key">website.s_three_columns_default_image_2</field>
+    <field name="name">website.s_three_columns_default_image_2</field>
     <field name="url">/theme_cobalt/static/src/img/pictures/s_three_columns_2.jpg</field>
 </record>
 <record id="library_image_07" model="theme.ir.attachment">
@@ -397,4 +397,54 @@
     <field name="url">/theme_cobalt/static/src/img/pictures/s_image_3.jpg</field>
 </record>
 
+<!-- Striped top -->
+<record id="s_striped_top_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_striped_top_default_image</field>
+    <field name="name">website.s_striped_top_default_image</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_picture.jpg</field>
+</record>
+
+<!-- Sidegrid -->
+<record id="s_sidegrid_default_image_1" model="theme.ir.attachment">
+    <field name="key">website.s_sidegrid_default_image_1</field>
+    <field name="name">website.s_sidegrid_default_image_1</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_gallery_3.jpg</field>
+</record>
+<record id="s_sidegrid_default_image_2" model="theme.ir.attachment">
+    <field name="key">website.s_sidegrid_default_image_2</field>
+    <field name="name">website.s_sidegrid_default_image_2</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_image_3.jpg</field>
+</record>
+<record id="s_sidegrid_default_image_3" model="theme.ir.attachment">
+    <field name="key">website.s_sidegrid_default_image_3</field>
+    <field name="name">website.s_sidegrid_default_image_3</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_image_4.jpg</field>
+</record>
+<record id="s_sidegrid_default_image_4" model="theme.ir.attachment">
+    <field name="key">website.s_sidegrid_default_image_4</field>
+    <field name="name">website.s_sidegrid_default_image_4</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_kickoff_default_image.jpg</field>
+</record>
+
+<!-- Framed Intro -->
+<record id="s_framed_intro_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_framed_intro_default_image</field>
+    <field name="name">website.s_framed_intro_default_image</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_image_5.jpg</field>
+</record>
+
+<!-- Shape Image -->
+<record id="s_shape_image_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_shape_image_default_image</field>
+    <field name="name">website.s_shape_image_default_image</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_banner.jpg</field>
+</record>
+
+<!-- Showcase -->
+<record id="s_showcase_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_showcase_default_image</field>
+    <field name="name">website.s_showcase_default_image</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_image_5.jpg</field>
+</record>
+
 </odoo>

theme_cobalt/views/new_page_template.xml

@@ -46,9 +46,10 @@
 
 <template id="new_page_template_about_s_banner" inherit_id="website.new_page_template_about_s_banner">
     <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc2" separator=" "/>
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/11_001","flip":["y"]}</attribute>
     </xpath>
-    <xpath expr="//section/div" position="before">
+    <xpath expr="//div[hasclass('o_we_shape')]" position="replace">
         <div class="o_we_shape o_web_editor_Origins_11_001" style="background-image: url('/web_editor/shape/web_editor/Origins/11_001.svg?c3=o-color-4&amp;c4=o-color-4&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
 </template>
@@ -96,9 +97,10 @@
 
 <template id="new_page_template_landing_1_s_banner" inherit_id="website.new_page_template_landing_1_s_banner">
     <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc2" separator=" "/>
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/11_001","flip":["y"]}</attribute>
     </xpath>
-    <xpath expr="//section/div" position="before">
+    <xpath expr="//div[hasclass('o_we_shape')]" position="replace">
         <div class="o_we_shape o_web_editor_Origins_11_001" style="background-image: url('/web_editor/shape/web_editor/Origins/11_001.svg?c3=o-color-4&amp;c4=o-color-4&amp;flip=y'); background-position: 50% 100%;"/>
     </xpath>
 </template>