[IMP] theme_orchid: revamp the theme

task-4178087
part of task-4177975

Part-of: odoo/design-themes#969
Related: odoo/odoo#182029
Signed-off-by: Alice Gaudon (agau) <agau@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

theme_orchid/__manifest__.py

@@ -4,7 +4,7 @@
     'category': 'Theme/Retail',
     'summary': 'Florist, Gardens, Flowers, Nature, Green, Beauty, Stores',
     'sequence': 230,
-    'version': '2.0.0',
+    'version': '3.0.0',
     'depends': ['theme_common'],
     'data': [
         'data/generate_primary_template.xml',
@@ -17,12 +17,15 @@
         'views/snippets/s_striped_top.xml',
         'views/snippets/s_card_offset.xml',
         'views/snippets/s_text_image.xml',
+        'views/snippets/s_title.xml',
         'views/snippets/s_motto.xml',
         'views/snippets/s_image_text.xml',
         'views/snippets/s_image_punchy.xml',
         'views/snippets/s_image_title.xml',
+        'views/snippets/s_images_wall.xml',
         'views/snippets/s_images_mosaic.xml',
         'views/snippets/s_three_columns.xml',
+        'views/snippets/s_image_text_overlap.xml',
         'views/snippets/s_quotes_carousel.xml',
         'views/snippets/s_carousel_intro.xml',
         'views/snippets/s_quotes_carousel_minimal.xml',
@@ -30,8 +33,10 @@
         'views/snippets/s_call_to_action.xml',
         'views/snippets/s_freegrid.xml',
         'views/snippets/s_company_team_shapes.xml',
+        'views/snippets/s_company_team_basic.xml',
         'views/snippets/s_numbers.xml',
         'views/snippets/s_pricelist_boxed.xml',
+        'views/snippets/s_process_steps.xml',
         'views/snippets/s_media_list.xml',
         'views/snippets/s_framed_intro.xml',
         'views/snippets/s_product_catalog.xml',
@@ -42,10 +47,12 @@
         'views/snippets/s_image_hexagonal.xml',
         'views/snippets/s_striped_center_top.xml',
         'views/snippets/s_key_images.xml',
+        'views/snippets/s_kickoff.xml',
         'views/snippets/s_intro_pill.xml',
         'views/snippets/s_big_number.xml',
         'views/snippets/s_wavy_grid.xml',
         'views/snippets/s_shape_image.xml',
+        'views/snippets/s_references.xml',
         'views/snippets/s_empowerment.xml',
         'views/new_page_template.xml',
     ],
@@ -55,14 +62,9 @@
     ],
     'images_preview_theme': {
         'website.s_cover_default_image': '/theme_orchid/static/src/img/snippets/s_parallax.jpg',
-        'website.s_image_text_default_image': '/theme_orchid/static/src/img/snippets/s_carousel_2.jpg',
-        'website.s_text_image_default_image': '/theme_orchid/static/src/img/snippets/s_media_list_3.jpg',
-        'website.s_three_columns_default_image_1': '/theme_orchid/static/src/img/snippets/library_image_11.jpg',
-        'website.s_three_columns_default_image_2': '/theme_orchid/static/src/img/snippets/library_image_13.jpg',
-        'website.s_three_columns_default_image_3': '/theme_orchid/static/src/img/snippets/library_image_07.jpg',
     },
     'configurator_snippets': {
-        'homepage': ['s_cover', 's_image_text', 's_text_image', 's_three_columns', 's_quotes_carousel', 's_call_to_action'],
+        'homepage': ['s_kickoff', 's_key_images', 's_process_steps', 's_freegrid', 's_image_text_overlap', 's_company_team_basic', 's_title', 's_images_wall', 's_references'],
     },
     'new_page_templates': {
         'about': {

theme_orchid/data/ir_asset.xml

@@ -8,14 +8,6 @@
     <field name="path">theme_orchid/static/src/scss/primary_variables.scss</field>
 </record>
 
-<record id="theme_orchid.bootstrap_overridden_scss" model="theme.ir.asset">
-    <field name="key">theme_orchid.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_orchid/static/src/scss/bootstrap_overridden.scss</field>
-</record>
-
 <record id="theme_orchid.compatibility_saas_11_4_variables_scss" model="theme.ir.asset">
     <field name="key">theme_orchid.compatibility_saas_11_4_variables_scss</field>
     <field name="name">Compatibility saas 11 4 variables SCSS</field>

theme_orchid/static/src/js/tour.js

@@ -1,53 +1,67 @@
 /** @odoo-module */
 
 import * as wTourUtils from '@website/js/tours/tour_utils';
-import { _t } from "@web/core/l10n/translation";
+
 
 const snippets = [
     {
-        id: 's_cover',
+        id: 's_kickoff',
-        name: 'Cover',
+        name: 'Kickoff',
         groupName: "Intro",
     },
     {
-        id: 's_image_text',
+        id: 's_key_images',
-        name: 'Image - Text',
+        name: 'Key Images',
-        groupName: "Content",
-    },
-    {
-        id: 's_text_image',
-        name: 'Text - Image',
-        groupName: "Content",
-    },
-    {
-        id: 's_three_columns',
-        name: 'Columns',
         groupName: "Columns",
     },
     {
-        id: 's_quotes_carousel',
+        id: 's_process_steps',
-        name: 'Quotes',
+        name: 'Steps',
+        groupName: "Content",
+    },
+    {
+        id: 's_freegrid',
+        name: 'Free grid',
+        groupName: "Columns",
+    },
+    {
+        id: 's_image_text_overlap',
+        name: 'Image - Text Overlap',
+        groupName: "Content",
+    },
+    {
+        id: 's_company_team_basic',
+        name: 'Team Basic',
         groupName: "People",
     },
     {
-        id: 's_call_to_action',
+        id: 's_title',
-        name: 'Call to Action',
+        name: 'Title',
-        groupName: "Content",
+        groupName: "Text",
+    },
+    {
+        id: 's_images_wall',
+        name: 'Images Wall',
+        groupName: "Images",
+    },
+    {
+        id: 's_references',
+        name: 'References',
+        groupName: "People",
     },
 ];
 
 wTourUtils.registerThemeHomepageTour("orchid_tour", () => [
-    wTourUtils.assertCssVariable('--color-palettes-name', '"orchid-7"'),
+    wTourUtils.assertCssVariable('--color-palettes-name', '"default-light-9"'),
     ...wTourUtils.insertSnippet(snippets[0]),
     ...wTourUtils.clickOnText(snippets[0], 'h1'),
     wTourUtils.goBackToBlocks(),
     ...wTourUtils.insertSnippet(snippets[1]),
     ...wTourUtils.insertSnippet(snippets[2]),
     ...wTourUtils.insertSnippet(snippets[3]),
-    ...wTourUtils.clickOnSnippet(snippets[3]),
-    wTourUtils.changeOption('ContainerWidth', 'we-button-group.o_we_user_value_widget', _t('width')),
-    wTourUtils.goBackToBlocks(),
     ...wTourUtils.insertSnippet(snippets[4]),
     ...wTourUtils.insertSnippet(snippets[5]),
-    ...wTourUtils.clickOnText(snippets[5], 'h3'),
+    ...wTourUtils.insertSnippet(snippets[6]),
+    ...wTourUtils.insertSnippet(snippets[7]),
+    ...wTourUtils.insertSnippet(snippets[8]),
 ]);

theme_orchid/static/src/scss/bootstrap_overridden.scss

@@ -1,3 +0,0 @@
-// Headings font weight
-
-$headings-font-weight: $o-theme-headings-font-weight !default;

theme_orchid/static/src/scss/primary_variables.scss

@@ -2,14 +2,6 @@
 // Fonts
 //------------------------------------------------------------------------------
 
-$o-theme-h1-font-size-multiplier: (62 / 16);
-$o-theme-h2-font-size-multiplier: (48 / 16);
-$o-theme-h3-font-size-multiplier: (36 / 16);
-$o-theme-h5-font-size-multiplier: (21 / 16);
-$o-theme-h6-font-size-multiplier: (18 / 16);
-
-$o-theme-headings-font-weight: 600;
-
 $o-theme-font-configs: (
     'Heebo': (
         'family': ('Heebo', sans-serif),
@@ -51,6 +43,14 @@ $o-theme-font-configs: (
         'family': ('Cormorant Garamond', serif),
         'url': 'Cormorant+Garamond:300,300i,400,400i,700,700i',
     ),
+    'Elsie': (
+        'family': ('Elsie', serif),
+        'url': 'Elsie:400,900',
+    ),
+    'DM Sans': (
+        'family': ('DM Sans', serif),
+        'url': 'DM+Sans:300,300i,400,400i,700,700i',
+    ),
 );
 
 //------------------------------------------------------------------------------
@@ -59,15 +59,14 @@ $o-theme-font-configs: (
 
 $o-website-values-palettes: (
     (
-        'color-palettes-name': 'orchid-7',
+        'color-palettes-name': 'default-light-9',
-        'font': 'Questrial',
+        'font': 'DM Sans',
-        'headings-font': 'Cormorant Garamond',
+        'headings-font': 'Elsie',
+        'header-template': 'sales_four',
         'footer-template': 'descriptive',
     ),
 );
 
-$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'orchid-7');
-
 $o-color-palettes-compatibility-indexes: (
     1: 'orchid-1',
     2: 'orchid-2',

theme_orchid/views/snippets/s_company_team_basic.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_company_team_basic" inherit_id="website.s_company_team_basic">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc2" remove="o_cc1" separator=" "/>
+    </xpath>
+    <xpath expr="//h3" position="replace">
+        <h2 style="text-align: center">Meet the Team</h2>
+    </xpath>
+
+    <!-- Person 1 -->
+    <xpath expr="//h4" position="replace" mode="inner">
+        Tony Fred, Floral Director
+    </xpath>
+    <xpath expr="//p[2]" position="replace" mode="inner">
+        Tony leads the creative vision for the shop.
+    </xpath>
+    <!-- Person 2 -->
+    <xpath expr="//div[3]//h4" position="replace" mode="inner">
+        Mich Stark, Operations Manager
+    </xpath>
+    <xpath expr="//div[3]//p[2]" position="replace" mode="inner">
+        Mich makes sure everything runs smoothly.
+    </xpath>
+    <!-- Person 3 -->
+    <xpath expr="//div[4]//h4" position="replace" mode="inner">
+        Aline Turner, Bouquet Designer
+    </xpath>
+    <xpath expr="//div[4]//p[2]" position="replace" mode="inner">
+        Aline is the mastermind behind our bespoke floral arrangements.
+    </xpath>
+    <!-- Person 4 -->
+    <xpath expr="//div[5]//h4" position="replace" mode="inner">
+        Iris Joe, Customer Relations
+    </xpath>
+    <xpath expr="//div[5]//p[2]" position="replace" mode="inner">
+        Iris ensures that each customer has a delightful experience.
+    </xpath>
+</template>
+
+</odoo>

theme_orchid/views/snippets/s_cover.xml

@@ -15,15 +15,4 @@
     <xpath expr="//p" position="replace"/>
 </template>
 
-<template id="configurator_s_cover" inherit_id="website.configurator_s_cover">
-    <!-- Shape option -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/01_001","flip":[]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_01_001"/>
-    </xpath>
-</template>
-
 </odoo>

theme_orchid/views/snippets/s_framed_intro.xml

@@ -2,9 +2,32 @@
 <odoo>
 
 <template id="s_framed_intro" inherit_id="website.s_framed_intro">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Blobs/03','showOnMobile':true}</attribute>
+        <attribute name="class" add="o_cc5" remove="" separator=" "/>
+    </xpath>
+     <!-- Section Shape -->
+    <xpath expr="//section//div" position="before">
+        <div class="o_we_shape o_web_editor_Blobs_03 o_shape_show_mobile"/>
+    </xpath>
+    <!-- Subtitle -->
+    <xpath expr="//h1" position="before">
+        <p class="lead">Bloom with Joy:</p>
+    </xpath>
     <!-- Title -->
     <xpath expr="//h1" position="replace" mode="inner">
-        Blossoms for Every Moment: Fresh, Vibrant, and Beautiful
+        Fresh Flowers Delivered to Your Doorstep! Hello
+    </xpath>
+    <xpath expr="//h1" position="attributes">
+        <attribute name="class" add="display-2" remove="display-4"  separator=" "/>
+    </xpath>
+    <!-- CTA -->
+    <xpath expr="//a" position="before">
+        <a href="#" class="btn btn-lg btn-secondary">See the Full Bloom</a>
+    </xpath>
+    <xpath expr="//a" position="replace" mode="inner">
+        About Us
     </xpath>
     <!-- Image -->
     <xpath expr="//img" position="attributes">

theme_orchid/views/snippets/s_freegrid.xml

@@ -16,4 +16,15 @@
     </xpath>
 </template>
 
+<template id="configurator_s_freegrid" inherit_id="website.configurator_s_freegrid">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Blobs/03','colors':{'c2':'o-color-2'},'flip':['x'],'showOnMobile':true,'shapeAnimationSpeed':'0'}</attribute>
+        <attribute name="class" add="o_cc2" remove="o_cc1" separator=" "/>
+    </xpath>
+     <!-- Section Shape -->
+    <xpath expr="//section//div" position="before">
+        <div class="o_we_shape o_web_editor_Blobs_03 o_shape_show_mobile" style="background-image: url('/web_editor/shape/web_editor%2FBlobs%2F03.svg?c2=o-color-2&amp;flip=x'); background-position: 50% 0%;"/>
+    </xpath>
+</template>
 </odoo>

theme_orchid/views/snippets/s_image_text.xml

@@ -27,15 +27,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/04","flip":["x"]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_04" style="background-image: url('/web_editor/shape/web_editor/Wavy/04.svg?c1=o-color-1&amp;c5=o-color-1&amp;flip=x'); background-position: 50% 100%;"/>
-    </xpath>
-</template>
-
 </odoo>

theme_orchid/views/snippets/s_image_text_overlap.xml

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_image_text_overlap" inherit_id="website.s_image_text_overlap">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc2 pb104" remove="pb80 pb64" separator=" "/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h2" position="replace" mode="inner">
+        The Orchid Concept
+    </xpath>
+    <!-- Paragraphs -->
+    <xpath expr="//p" position="replace" mode="inner">
+        <br/>
+    </xpath>
+    <xpath expr="//p[2]" position="replace" mode="inner">
+        From your local producer to your door, discover how we deliver our multiple sorts of flowers and bring you happiness.
+    </xpath>
+</template>
+
+<template id="configurator_s_image_text_overlap" inherit_id="website.configurator_s_image_text_overlap">
+    <xpath expr="//section" position="attributes">
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/19','flip':[],'showOnMobile':true,'shapeAnimationSpeed':'0'}</attribute>
+        <attribute name="class" add="o_cc3" remove="o_cc2" separator=" "/>
+    </xpath>
+
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Origins_19 o_shape_show_mobile"/>
+    </xpath>
+
+    <xpath expr="//div[hasclass('o_grid_item')][2]" position="attributes">
+        <attribute name="class" add="o_cc2" remove="o_cc5" separator=" "/>
+    </xpath>
+
+    <xpath expr="//img" position="attributes">
+        <attribute name="src">/theme_orchid/static/src/img/snippets/configurator_s_image_text_overlap.jpg</attribute>
+        <attribute name="class" add="img-thumbnail" separator=" "/>
+        <attribute name="style" add="padding: 16px" separator=";"/>
+    </xpath>
+
+    <xpath expr="//h2" position="before">
+        <p class="lead">Global 24-Hour Flower Delivery</p>
+    </xpath>
+
+    <xpath expr="//h2" position="replace" mode="inner">
+        Brighten any corner of the globe with our express 24-hour worldwide flower delivery service.
+    </xpath>
+
+    <xpath expr="//p[2]" position="replace"/>
+    <xpath expr="//p[2]" position="replace"/>
+    <xpath expr="//p[2]" position="replace"/>
+</template>
+
+</odoo>

theme_orchid/views/snippets/s_images_wall.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_images_wall" inherit_id="website.s_images_wall">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc5 o_colored_level" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_orchid/views/snippets/s_key_images.xml

@@ -2,54 +2,63 @@
 <odoo>
 
 <template id="s_key_images" inherit_id="website.s_key_images">
-    <!-- Layout -->
-    <xpath expr="//img" position="attributes">
-        <attribute name="src">/web_editor/image_shape/website.s_key_images_default_image_1/web_editor/composition/composition_square_1.svg</attribute>
-        <attribute name="data-shape">web_editor/composition/composition_square_1</attribute>
-        <attribute name="data-original-mimetype">image/jpeg</attribute>
-        <attribute name="data-file-name">s_key_images_default_image_1.svg</attribute>
-        <attribute name="data-shape-colors">;;;;</attribute>
-    </xpath>
-    <xpath expr="(//img)[2]" position="attributes">
-        <attribute name="src">/web_editor/image_shape/website.s_key_images_default_image_2/web_editor/composition/composition_square_2.svg</attribute>
-        <attribute name="data-shape">web_editor/composition/composition_square_2</attribute>
-        <attribute name="data-original-mimetype">image/jpeg</attribute>
-        <attribute name="data-file-name">s_key_images_default_image_2.svg</attribute>
-        <attribute name="data-shape-colors">;;;;</attribute>
-    </xpath>
-    <xpath expr="(//img)[3]" position="attributes">
-        <attribute name="src">/web_editor/image_shape/website.s_key_images_default_image_3/web_editor/composition/composition_square_3.svg</attribute>
-        <attribute name="data-shape">web_editor/composition/composition_square_3</attribute>
-        <attribute name="data-original-mimetype">image/jpeg</attribute>
-        <attribute name="data-file-name">s_key_images_default_image_3.svg</attribute>
-        <attribute name="data-shape-colors">;;;;</attribute>
-    </xpath>
-    <xpath expr="(//img)[4]" position="attributes">
-        <attribute name="src">/web_editor/image_shape/website.s_key_images_default_image_4/web_editor/composition/composition_square_4.svg</attribute>
-        <attribute name="data-shape">web_editor/composition/composition_square_4</attribute>
-        <attribute name="data-original-mimetype">image/jpeg</attribute>
-        <attribute name="data-file-name">s_key_images_default_image_4.svg</attribute>
-        <attribute name="data-shape-colors">;;;;</attribute>
-    </xpath>
-
     <!-- Texts -->
     <xpath expr="//h2" position="replace" mode="inner">
-        Bloom with Beauty from Our Florist
+        Discover Our Most Loved Arrangements
     </xpath>
     <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
-        Fresh and Stunning Arrangements for Every Occasion
+        Celebrate with Our Best-Selling Bouquets, perfect for every occasion.
+    </xpath>
+
+    <!-- Col 1 -->
+    <xpath expr="//div[hasclass('col-lg-3')]//p" position="attributes">
+        <attribute name="class" add="h4-fs" remove="h1-fs" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-3')]//p[3]" position="before">
+        <h3 class="h4-fs">Sunset Serenade</h3>
     </xpath>
     <xpath expr="//div[hasclass('col-lg-3')]//p[3]" position="replace" mode="inner">
-        Elegant bouquets crafted with care and creativity
+        Vibrant hues of orange and red capture the warmth and beauty of a summer evening.
+    </xpath>
+
+    <!-- Col 2 -->
+    <xpath expr="(//div[hasclass('col-lg-3')])[2]//p" position="attributes">
+        <attribute name="class" add="h4-fs" remove="h1-fs" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])[2]//p[3]" position="before">
+        <h3 class="h4-fs">Elegant Simplicity</h3>
     </xpath>
     <xpath expr="(//div[hasclass('col-lg-3')])[2]//p[3]" position="replace" mode="inner">
-        Seasonal flowers to brighten up any space
+        Minimalist white florals in a sleek vase, embodying sophistication and grace.
+    </xpath>
+
+    <!-- Col 3 -->
+    <xpath expr="(//div[hasclass('col-lg-3')])[3]//p" position="attributes">
+        <attribute name="class" add="h4-fs" remove="h1-fs" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])[3]//p[3]" position="before">
+        <h3 class="h4-fs">Petal Poetry</h3>
     </xpath>
     <xpath expr="(//div[hasclass('col-lg-3')])[3]//p[3]" position="replace" mode="inner">
-        Customized arrangements for weddings and events
+        Light pink blossoms with golden leaves, bringing a touch of springtime charm to any space.
+    </xpath>
+
+    <!-- Col 4 -->
+    <xpath expr="(//div[hasclass('col-lg-3')])[4]//p" position="attributes">
+        <attribute name="class" add="h4-fs" remove="h1-fs" separator=" "/>
+    </xpath>
+     <xpath expr="(//div[hasclass('col-lg-3')])[4]//p[3]" position="before">
+        <h3 class="h4-fs">Blushing Harmony</h3>
     </xpath>
     <xpath expr="(//div[hasclass('col-lg-3')])[4]//p[3]" position="replace" mode="inner">
-        Discover unique floral designs and gifts
+        A delicate blend of soft pink roses and baby's breath, perfect for expressing love and gratitude.
+    </xpath>
+</template>
+
+<template id="configurator_s_key_images" inherit_id="website.configurator_s_key_images">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc2 pb96 pt96" remove="pb72 pt72" separator=" "/>
     </xpath>
 </template>
 

theme_orchid/views/snippets/s_kickoff.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="configurator_s_kickoff" inherit_id="website.configurator_s_kickoff">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="oe_img_bg" remove="parallax s_parallax_is_fixed" separator=" "/>
+        <attribute name="style" add="background-image: url('/web/image/website.s_kickoff_default_image'); background-position: 100% 100%;" separator=";"/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/14_001','colors':{'c3':'o-color-3','c4':'rgba(255, 0, 0, 0)'},'showOnMobile':true}</attribute>
+    </xpath>
+
+    <!-- Refine shape's colors -->
+    <xpath expr="//div[hasclass('o_we_shape')]" position="attributes">
+        <attribute name="style">background-image: url('/web_editor/shape/web_editor/Origins/14_001.svg?c3=o-color-3&amp;c4=rgba(255, 0, 0, 0)');</attribute>
+    </xpath>
+
+    <!-- Remove the parallax effect: the background image has been already set in the main <section> tag -->
+    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+
+    <!-- Text -->
+    <xpath expr="//p" position="replace" mode="inner">
+        Bloom with Joy:
+    </xpath>
+    <xpath expr="//h1" position="replace" mode="inner">
+        Fresh Flowers Delivered to Your Doorstep!
+    </xpath>
+</template>
+
+</odoo>

theme_orchid/views/snippets/s_media_list.xml

@@ -4,44 +4,17 @@
 <template id="s_media_list" inherit_id="website.s_media_list">
     <!-- Item #1 -->
     <xpath expr="//div[hasclass('s_media_list_item')]" position="attributes">
-        <attribute name="class" add="pt0 pb0" remove="pb16 pt16 o_cc o_cc1" separator=" "/>
+        <attribute name="class" add="pb24" remove="pb16" separator=" "/>
-    </xpath>
-    <xpath expr="//div[hasclass('s_media_list_item')]/div" position="attributes">
-        <attribute name="class" remove="o_cc o_cc1" separator=" "/>
-    </xpath>
-    <xpath expr="//div[hasclass('s_media_list_img_wrapper')]" position="attributes">
-        <attribute name="class" add="col-lg-6" remove="col-lg-4" separator=" "/>
-    </xpath>
-    <xpath expr="//div[hasclass('s_media_list_body')]" position="attributes">
-        <attribute name="class" add="col-lg-6" remove="col-lg-8" separator=" "/>
     </xpath>
 
     <!-- Item #2 -->
     <xpath expr="//div[hasclass('s_media_list_item')][2]" position="attributes">
-        <attribute name="class" add="pt0 pb0" remove="pb16 pt16" separator=" "/>
+        <attribute name="class" add="pb24" remove="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>
-    <xpath expr="(//div[hasclass('s_media_list_img_wrapper')])[2]" position="attributes">
-        <attribute name="class" add="col-lg-6" remove="col-lg-4" separator=" "/>
-    </xpath>
-    <xpath expr="(//div[hasclass('s_media_list_body')])[2]" position="attributes">
-        <attribute name="class" add="col-lg-6" remove="col-lg-8" separator=" "/>
     </xpath>
 
     <!-- Item #3 -->
     <xpath expr="//div[hasclass('s_media_list_item')][3]" position="attributes">
-        <attribute name="class" add="pt0 pb0" remove="pb16 pt16 o_cc o_cc1" separator=" "/>
+        <attribute name="class" add="pb24" remove="pb16" separator=" "/>
-    </xpath>
-    <xpath expr="//div[hasclass('s_media_list_item')][3]/div" position="attributes">
-        <attribute name="class" remove="o_cc o_cc1" separator=" "/>
-    </xpath>
-    <xpath expr="(//div[hasclass('s_media_list_img_wrapper')])[3]" position="attributes">
-        <attribute name="class" add="col-lg-6" remove="col-lg-4" separator=" "/>
-    </xpath>
-    <xpath expr="(//div[hasclass('s_media_list_body')])[3]" position="attributes">
-        <attribute name="class" add="col-lg-6" remove="col-lg-8" separator=" "/>
     </xpath>
 </template>
 

theme_orchid/views/snippets/s_process_steps.xml

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+
+<template id="configurator_s_process_steps" inherit_id="website.configurator_s_process_steps">
+    <!-- Section Colors -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc5" separator=" "/>
+    </xpath>
+
+    <!-- Steps 1 -->
+    <xpath expr="//div[hasclass('s_process_step_number')]" position="attributes">
+        <attribute name="class" add="bg-o-color-2" remove="bg-primary-light" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('s_process_step_number')]//h3" position="attributes">
+        <attribute name="class" remove="text-primary" add="text-o-color-5" separator=" "/>
+    </xpath>
+
+    <!-- Steps 2 -->
+    <xpath expr="(//div[hasclass('s_process_step_number')])[2]" position="attributes">
+        <attribute name="class" add="bg-o-color-2" remove="bg-primary-light" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('s_process_step_number')]//h3)[2]" position="attributes">
+        <attribute name="class" remove="text-primary" add="text-o-color-5" separator=" "/>
+    </xpath>
+
+    <!-- Steps 3 -->
+    <xpath expr="(//div[hasclass('s_process_step_number')])[3]" position="attributes">
+        <attribute name="class" add="bg-o-color-2" remove="bg-primary-light" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('s_process_step_number')]//h3)[3]" position="attributes">
+        <attribute name="class" remove="text-primary" add="text-o-color-5" separator=" "/>
+    </xpath>
+
+    <!-- Steps 4 -->
+    <xpath expr="(//div[hasclass('s_process_step_number')])[4]" position="attributes">
+        <attribute name="class" add="bg-o-color-2" remove="bg-primary-light" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('s_process_step_number')]//h3)[4]" position="attributes">
+        <attribute name="class" remove="text-primary" add="text-o-color-5" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_orchid/views/snippets/s_quotes_carousel.xml

@@ -46,15 +46,4 @@
     </xpath>
 </template>
 
-<template id="configurator_s_quotes_carousel" inherit_id="website.configurator_s_quotes_carousel">
-    <!-- Shape option -->
-    <xpath expr="//div[hasclass('s_quotes_carousel')]" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/22","flip":[]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('carousel-indicators')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_22"/>
-    </xpath>
-</template>
-
 </odoo>

theme_orchid/views/snippets/s_references.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="configurator_s_references" inherit_id="website.configurator_s_references">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc2 o_colored_level pt136" remove="o_cc1 pt40 pt80" separator=" "/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/07_002','colors':{'c3':'o-color-5','c4':'o-color-3','c5':'o-color-3'},'showOnMobile':true}</attribute>
+    </xpath>
+    <xpath expr="//section/div" position="before">
+        <div class="o_we_shape o_web_editor_Origins_07_002 o_shape_show_mobile" style="background-image: url('/web_editor/shape/web_editor%2FOrigins%2F07_002.svg?c3=o-color-5&amp;c4=o-color-3&amp;c5=o-color-3');"></div>
+    </xpath>
+</template>
+
+</odoo>

theme_orchid/views/snippets/s_text_image.xml

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

theme_orchid/views/snippets/s_three_columns.xml

@@ -4,16 +4,12 @@
 <template id="s_three_columns" inherit_id="website.s_three_columns">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc1 pt80 pb80" remove="o_cc2 pt32 pb32" separator=" "/>
+        <attribute name="class" add="pt80 pb80" remove="pt32 pb32" separator=" "/>
-    </xpath>
-    <!-- Row -->
-    <xpath expr="//div[hasclass('row')]" position="attributes">
-        <attribute name="class" add="align-items-end" remove="align-items-stretch" separator=" "/>
     </xpath>
 
     <!-- Column 1 -->
     <xpath expr="//div[hasclass('card')]" position="attributes">
-        <attribute name="style">border-width: 0px !important;</attribute>
+        <attribute name="style" add="--card-img-ratio-align: 20%;" separator=";"/>
     </xpath>
     <!-- Column 1 - Title -->
     <xpath expr="//h5" position="replace" mode="inner">
@@ -24,17 +20,13 @@
         As we use local growers, our flowers last longer and smell better. Just like the event you want to celebrate with flowers!
     </xpath>
     <!-- Column 1 - Img -->
-    <xpath expr="//img" position="attributes">
+    <xpath expr="//figure" position="attributes">
-        <attribute name="src">/web_editor/image_shape/website.s_three_columns_default_image_1/web_editor/composition/composition_square_1.svg?c1=o-color-1&amp;c2=o-color-2</attribute>
+       <attribute name="class" add="ratio-1x1 o_card_img_adjust_v" remove="ratio-16x9" separator=" "/>
-        <attribute name="data-shape">web_editor/composition/composition_square_1</attribute>
-        <attribute name="data-original-mimetype">image/jpeg</attribute>
-        <attribute name="data-file-name">library_image_11.svg</attribute>
-        <attribute name="data-shape-colors">o-color-1;o-color-2;;;</attribute>
     </xpath>
 
     <!-- Column 2 -->
     <xpath expr="(//div[hasclass('card')])[2]" position="attributes">
-        <attribute name="style">border-width: 0px !important;</attribute>
+        <attribute name="style" add="--card-img-ratio-align: 20%;" separator=";"/>
     </xpath>
     <!-- Column 2 - Title -->
     <xpath expr="(//h5)[2]" position="replace" mode="inner">
@@ -45,17 +37,13 @@
         Don't offer pesticides to your beloved one! By choosing our flowers, we guarantee you organic flowers.
     </xpath>
     <!-- Column 2 - Img -->
-    <xpath expr="(//img)[2]" position="attributes">
+    <xpath expr="(//figure)[2]" position="attributes">
-        <attribute name="src">/web_editor/image_shape/website.s_three_columns_default_image_2/web_editor/composition/composition_square_3.svg?c1=o-color-1&amp;c5=o-color-5</attribute>
+       <attribute name="class" add="ratio-1x1 o_card_img_adjust_v" remove="ratio-16x9" separator=" "/>
-        <attribute name="data-shape">web_editor/composition/composition_square_3</attribute>
-        <attribute name="data-original-mimetype">image/jpeg</attribute>
-        <attribute name="data-file-name">library_image_13.svg</attribute>
-        <attribute name="data-shape-colors">o-color-1;;;;o-color-5</attribute>
     </xpath>
 
     <!-- Column 3 -->
     <xpath expr="(//div[hasclass('card')])[3]" position="attributes">
-        <attribute name="style">border-width: 0px !important;</attribute>
+        <attribute name="style" add="--card-img-ratio-align: 20%;" separator=";"/>
     </xpath>
     <!-- Column 3 - Title -->
     <xpath expr="(//h5)[3]" position="replace" mode="inner">
@@ -66,23 +54,8 @@
         We use 100% recycled materials. We believe the best gifts should also do good for the planet.
     </xpath>
     <!-- Column 3 - Img -->
-    <xpath expr="(//img)[3]" position="attributes">
+    <xpath expr="(//figure)[3]" position="attributes">
-        <attribute name="src">/web_editor/image_shape/website.s_three_columns_default_image_3/web_editor/composition/composition_square_2.svg?c2=o-color-1&amp;c5=o-color-2</attribute>
+       <attribute name="class" add="ratio-1x1 o_card_img_adjust_v" remove="ratio-16x9" separator=" "/>
-        <attribute name="data-shape">web_editor/composition/composition_square_2</attribute>
-        <attribute name="data-original-mimetype">image/jpeg</attribute>
-        <attribute name="data-file-name">library_image_07.svg</attribute>
-        <attribute name="data-shape-colors">;o-color-1;;;o-color-2</attribute>
-    </xpath>
-</template>
-
-<template id="configurator_s_three_columns" inherit_id="website.configurator_s_three_columns">
-    <!-- Shape option -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Wavy/04","flip":[]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//div[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Wavy_04"/>
     </xpath>
 </template>
 

theme_orchid/views/snippets/s_title.xml

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="configurator_s_title" inherit_id="website.configurator_s_title">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc5 o_colored_level pt160" remove="pt40" separator=" "/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Origins/07_002','colors':{'c3':'o-color-3','c4':'o-color-5','c5':'o-color-5'},'flip':['x'],'showOnMobile':true,'shapeAnimationSpeed':'0'}</attribute>
+    </xpath>
+    <xpath expr="//section/div" position="before">
+        <div class="o_we_shape o_web_editor_Origins_07_002 o_shape_show_mobile" style="background-image: url('/web_editor/shape/web_editor%2FOrigins%2F07_002.svg?c3=o-color-3&amp;c4=o-color-5&amp;c5=o-color-5&amp;flip=x'); background-position: 50% 50%;"/>
+    </xpath>
+    <xpath expr="//h2" position="attributes">
+        <attribute name="class" remove="display-3-fs" separator=" "/>
+    </xpath>
+    <xpath expr="//h2" position="replace" mode="inner">
+        Our Creations
+    </xpath>
+    <xpath expr="//h2" position="after">
+        <p class="lead" style="text-align: center">Explore our handcrafted floral arrangements, each meticulously designed to convey beauty, elegance, and a touch of nature's artistry.</p>
+    </xpath>
+</template>
+
+</odoo>