[IMP] theme_real_estate: theme improvement

Revamp of `theme_real_estate`

task-4178611

closes odoo/design-themes#945

X-original-commit: 1201131f28
Signed-off-by: Outagant Mehdi (mou) <mou@odoo.com>

theme_real_estate/__manifest__.py

@@ -13,6 +13,7 @@
 
         'views/snippets/s_cta_box.xml',
         'views/snippets/s_banner.xml',
+        'views/snippets/s_cover.xml',
         'views/snippets/s_picture.xml',
         'views/snippets/s_cards_grid.xml',
         'views/snippets/s_striped_top.xml',
@@ -30,6 +31,7 @@
         'views/snippets/s_features_wall.xml',
         'views/snippets/s_masonry_block.xml',
         'views/snippets/s_numbers.xml',
+        'views/snippets/s_references.xml',
         'views/snippets/s_title.xml',
         'views/snippets/s_image_gallery.xml',
         'views/snippets/s_striped_center_top.xml',
@@ -54,18 +56,16 @@
         'static/description/real_estate_screenshot.jpg',
     ],
     'images_preview_theme': {
-        'website.s_banner_default_image': '/theme_real_estate/static/src/img/snippets/s_banner.jpg',
+        'website.s_cover_default_image': '/theme_real_estate/static/src/img/snippets/s_cover.jpg',
         'website.s_text_image_default_image': '/theme_real_estate/static/src/img/snippets/s_text_image.jpg',
         'website.s_image_text_default_image': '/theme_real_estate/static/src/img/snippets/s_image_text.jpg',
         'website.s_three_columns_default_image_1': '/theme_real_estate/static/src/img/snippets/library_image_11.jpg',
         'website.s_three_columns_default_image_2': '/theme_real_estate/static/src/img/snippets/library_image_13.jpg',
         'website.s_three_columns_default_image_3': '/theme_real_estate/static/src/img/snippets/library_image_07.jpg',
-        'website.s_masonry_block_default_image_1': '/theme_real_estate/static/src/img/snippets/s_masonry_block.jpg',
-        'website.s_quotes_carousel_demo_image_1': '/theme_real_estate/static/src/img/snippets/s_quotes_carousel_1.jpg',
+        'website.s_quotes_carousel_demo_image_0': '/theme_real_estate/static/src/img/snippets/s_quotes_carousel_1.jpg',
     },
     'configurator_snippets': {
-        'homepage': ['s_banner', 's_text_block', 's_text_image', 's_image_text', 's_title', 's_three_columns',
-                     's_title', 's_masonry_block', 's_numbers', 's_quotes_carousel'],
+        'homepage': ['s_cover', 's_text_image', 's_image_text', 's_three_columns', 's_title', 's_references', 's_numbers_showcase', 's_quotes_carousel', 's_call_to_action'],
     },
     'new_page_templates': {
         'about': {

theme_real_estate/static/src/js/tour.js

@@ -4,29 +4,19 @@ import * as wTourUtils from "@website/js/tours/tour_utils";
 
 const snippets = [
     {
-        id: 's_banner',
-        name: 'Banner',
+        id: 's_cover',
+        name: 'Cover',
         groupName: "Intro",
     },
-    {
-        id: 's_text_block',
-        name: 'Text',
-        groupName: "Text",
-    },
-    {
-        id: 's_text_image',
-        name: 'Text - Image',
-        groupName: "Content",
-    },
     {
         id: 's_image_text',
         name: 'Image - Text',
         groupName: "Content",
     },
     {
-        id: 's_title',
-        name: 'Title',
-        groupName: "Text",
+        id: 's_image_text',
+        name: 'Image - Text',
+        groupName: "Content",
     },
     {
         id: 's_three_columns',
@@ -39,13 +29,13 @@ const snippets = [
         groupName: "Text",
     },
     {
-        id: 's_masonry_block',
-        name: 'Masonry',
-        groupName: "Images",
+        id: 's_references',
+        name: 'References',
+        groupName: "People",
     },
     {
-        id: 's_numbers',
-        name: 'Numbers',
+        id: 's_numbers_showcase',
+        name: 'Numbers Showcase',
         groupName: "Content",
     },
     {
@@ -53,10 +43,15 @@ const snippets = [
         name: 'Quotes',
         groupName: "People",
     },
+    {
+        id: 's_call_to_action',
+        name: 'Call To Action',
+        groupName: "Content",
+    },
 ];
 
 wTourUtils.registerThemeHomepageTour("real_estate_tour", () => [
-    wTourUtils.assertCssVariable('--color-palettes-name', '"real-estate-4"'),
+    wTourUtils.assertCssVariable('--color-palettes-name', '"default-28"'),
     ...wTourUtils.dragNDrop(snippets[0]),
     ...wTourUtils.clickOnText(snippets[0], 'h1'),
     wTourUtils.goBackToBlocks(),

theme_real_estate/static/src/scss/primary_variables.scss

@@ -66,36 +66,34 @@ $o-theme-font-configs: (
         'family': ('Playfair Display SC', serif),
         'url': 'Playfair+Display+SC:300,300i,400,400i,700,700i',
     ),
+    'IBM Plex Sans': (
+        'family': ('IBM Plex Sans', sans-serif),
+        'url': 'IBM+Plex+Sans:300,300i,400,400i,700,700i',
+    ),
 );
 
-$o-theme-h1-font-size-multiplier: (62 / 16);
-$o-theme-h2-font-size-multiplier: (36 / 16);
-$o-theme-h3-font-size-multiplier: (24 / 16);
-$o-theme-h4-font-size-multiplier: (20 / 16);
-$o-theme-h5-font-size-multiplier: (18 / 16);
-
 //------------------------------------------------------------------------------
 // Website customizations
 //------------------------------------------------------------------------------
 
-
-$btn-font-weight: 500;
-
 $o-website-values-palettes: (
     (
-        'color-palettes-name': 'real-estate-4',
+        'color-palettes-name': 'default-28',
         // Font
         'font': 'Roboto',
+        'headings-font': 'IBM Plex Sans',
 
         // Buttons
         'btn-border-radius': 0px,
         'btn-border-radius-sm': 0px,
         'btn-border-radius-lg': 0px,
+        'btn-padding-y-lg': 0.75rem,
+        'btn-padding-x-lg': 1.75rem,
         'btn-ripple': true,
     ),
 );
 
-$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'real-estate-4');
+$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'default-28');
 
 $o-color-palettes-compatibility-indexes: (
     1: 'real-estate-1',

theme_real_estate/views/new_page_template.xml

@@ -11,15 +11,6 @@
 
 <!-- General customizations -->
 
-<template id="new_page_template_s_banner" inherit_id="website.new_page_template_s_banner">
-    <!-- Remove shape option -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data"/>
-    </xpath>
-    <!-- Remove shape -->
-    <xpath expr="//div[hasclass('o_we_shape')]" position="replace"/>
-</template>
-
 <template id="new_page_template_s_text_block_h1" inherit_id="website.new_page_template_s_text_block_h1">
     <xpath expr="//section" position="attributes">
         <attribute name="class" remove="pb0" separator=" "/>
@@ -54,17 +45,6 @@
 
 <!-- Snippet customization About Pages -->
 
-<template id="new_page_template_about_s_banner" inherit_id="website.new_page_template_about_s_banner">
-    <!-- Shape option -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/18","flip":["x"]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="after">
-        <div class="o_we_shape o_web_editor_Origins_18" style="background-image: url('/web_editor/shape/web_editor/Origins/18.svg?c1=o-color-2&amp;flip=x'); background-position: 50% 50%;"/>
-    </xpath>
-</template>
-
 <template id="new_page_template_about_s_text_block_h1" inherit_id="website.new_page_template_about_s_text_block_h1">
     <xpath expr="//section" position="attributes">
         <attribute name="class" remove="o_cc4" separator=" "/>
@@ -129,14 +109,9 @@
     </xpath>
 </template>
 
-<template id="new_page_template_landing_1_s_banner" inherit_id="website.new_page_template_landing_1_s_banner">
-    <!-- Shape option -->
+<template id="new_page_template_s_cover" inherit_id="website.new_page_template_s_cover">
     <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/18","flip":["x"]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="after">
-        <div class="o_we_shape o_web_editor_Origins_18" style="background-image: url('/web_editor/shape/web_editor/Origins/18.svg?c1=o-color-2&amp;flip=x'); background-position: 50% 50%;"/>
+        <attribute name="class" remove="pt176 pb176" separator=" "/>
     </xpath>
 </template>
 
@@ -160,17 +135,6 @@
 
 <!-- Snippet customization Gallery Pages -->
 
-<template id="new_page_template_gallery_s_banner" inherit_id="website.new_page_template_gallery_s_banner">
-    <!-- Shape option -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/18","flip":["x"]}</attribute>
-    </xpath>
-    <!-- Shape -->
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="after">
-        <div class="o_we_shape o_web_editor_Origins_18" style="background-image: url('/web_editor/shape/web_editor/Origins/18.svg?c1=o-color-2&amp;flip=x'); background-position: 50% 50%;"/>
-    </xpath>
-</template>
-
 <template id="new_page_template_gallery_s_image_text_2nd" inherit_id="website.new_page_template_gallery_s_image_text_2nd">
     <xpath expr="//section" position="attributes">
         <!-- pt48 is defined by both theme and new page template -->
@@ -200,7 +164,7 @@
 
 <template id="new_page_template_services_0_s_three_columns" inherit_id="website.new_page_template_services_0_s_three_columns">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc4" remove="o_cc3" separator=" "/>
+        <attribute name="class" add="o_cc4" remove="o_cc1" separator=" "/>
     </xpath>
 </template>
 
@@ -234,9 +198,9 @@
 </template>
 
 <template id="new_page_template_team_0_s_three_columns" inherit_id="website.new_page_template_team_0_s_three_columns">
-    <xpath expr="//span" position="replace"/>
-    <xpath expr="(//div[hasclass('col-lg-4')])[2]//span" position="replace"/>
-    <xpath expr="(//div[hasclass('col-lg-4')])[3]//span" position="replace"/>
+    <xpath expr="(//div[hasclass('col-lg-4')])[1]//p" position="replace"/>
+    <xpath expr="(//div[hasclass('col-lg-4')])[2]//p" position="replace"/>
+    <xpath expr="(//div[hasclass('col-lg-4')])[3]//p" position="replace"/>
 </template>
 
 <template id="new_page_template_team_1_s_text_block_h1" inherit_id="website.new_page_template_team_1_s_text_block_h1">

theme_real_estate/views/snippets/s_banner.xml

@@ -2,39 +2,7 @@
 <odoo>
 
 <template id="s_banner" inherit_id="website.s_banner">
-    <!-- Section -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc o_cc3 parallax s_parallax_is_fixed" remove="pt96 pb96" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/18","flip":["x"]}</attribute>
-        <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% 0;"/>
-        <div class="o_we_bg_filter bg-black-50"/>
-        <div class="o_we_shape o_web_editor_Origins_18" style="background-image: url('/web_editor/shape/web_editor/Origins/18.svg?c1=o-color-2&amp;flip=x'); background-position: 50% 50%;"/>
-    </xpath>
-
-    <!-- Row - remove grid mode -->
-    <xpath expr="//div[hasclass('row')]" position="attributes">
-        <attribute name="class" remove="o_grid_mode" separator=" "/>
-        <attribute name="data-row-count"/>
-    </xpath>
-    
-    <!-- Remove grid images -->
-    <xpath expr="//div[hasclass('o_grid_item_image')]" position="replace"/>
-    <xpath expr="//div[hasclass('o_grid_item_image')]" position="replace"/>
-    <xpath expr="//div[hasclass('col-lg-5')]" position="replace"/>
-
-    <!-- Jumbotron -->
-    <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
-        <attribute name="class" add="col-lg-7 pt160 pb160" remove="o_grid_item g-height-10 g-col-lg-4 col-lg-4" separator=" "/>
-        <attribute name="style"/>
-    </xpath>
-
     <!-- Title -->
-    <xpath expr="//h1" position="attributes">
-        <attribute name="class" remove="display-1" separator=" "/>
-    </xpath>
     <xpath expr="//h1" position="replace" mode="inner">
         <b>Real Estate Agency.<br/>Near You.</b>
     </xpath>
@@ -45,9 +13,6 @@
     </xpath>
 
     <!-- Button -->
-    <xpath expr="//div[hasclass('col-lg-7')]//p[2]" position="attributes">
-        <attribute name="class" add="mb-0" separator=" "/>
-    </xpath>
     <xpath expr="//a[@t-att-href='cta_btn_href']" position="replace" mode="inner">
         See properties
     </xpath>

theme_real_estate/views/snippets/s_call_to_action.xml

@@ -2,6 +2,9 @@
 <odoo>
 
 <template id="s_call_to_action" inherit_id="website.s_call_to_action">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" remove="o_cc5" add="o_cc3" separator=" "/>
+    </xpath>
     <xpath expr="//h3" position="replace" mode="inner">
         Want To Become A Real Estate Agent?
     </xpath>

theme_real_estate/views/snippets/s_cover.xml

@@ -0,0 +1,28 @@
+<?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" remove="pt232 pb232" add="pt176 pb176" separator=" "/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h1" position="replace">
+        <h1 class="display-1-fs" style="text-align: center;"><font class="text-o-color-2">ESTATE ®</font><br/>Your easy home search, all in one</h1>
+    </xpath>
+    <!-- Lead -->
+    <xpath expr="//p" position="replace" mode="inner">
+        With a simple click, finding your dream home has never been easier.<br/><br/>
+    </xpath>
+    <!-- Button 1 -->
+    <xpath expr="(//a)[1]" position="attributes">
+        <attribute name="class" add="btn-lg" separator=" "/>
+    </xpath>
+    <xpath expr="(//a)[1]" position="replace" mode="inner">
+        Search Now
+    </xpath>
+    <!-- Button 2 -->
+    <xpath expr="(//a)[2]" position="replace"/>
+</template>
+
+</odoo>

theme_real_estate/views/snippets/s_image_text.xml

@@ -2,11 +2,6 @@
 <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_cc1 pb48 pt48" remove="pb80 pt80" separator=" "/>
-    </xpath>
-
     <!-- Title -->
     <xpath expr="//h2" position="replace" mode="inner">
         Bored with your interior?
@@ -20,16 +15,16 @@
         Discover our tailor-made services to embellish the decoration of your home.
     </xpath>
     <xpath expr="//p[3]" position="replace">
-        <p><a href="#" class="btn btn-primary">Explore our services</a></p>
+        <p><a href="#" class="btn btn-secondary">Explore our services</a></p>
     </xpath>
 
     <!-- Image -->
     <xpath expr="//img" position="attributes">
-        <attribute name="src">/web_editor/image_shape/website.s_image_text_default_image/web_editor/solid/solid_square_2.svg?c1=o-color-3</attribute>
-        <attribute name="data-shape">web_editor/solid/solid_square_2</attribute>
+        <attribute name="src">/web_editor/image_shape/website.s_image_text_default_image/web_editor/panel/panel_duo_step.svg</attribute>
+        <attribute name="data-shape">web_editor/panel/panel_duo_step</attribute>
         <attribute name="data-original-mimetype">image/jpeg</attribute>
         <attribute name="data-file-name">s_image_text.svg</attribute>
-        <attribute name="data-shape-colors">o-color-3;;;;</attribute>
+        <attribute name="data-shape-colors">;;;;</attribute>
     </xpath>
 </template>
 

theme_real_estate/views/snippets/s_key_benefits.xml

@@ -2,6 +2,10 @@
 <odoo>
 
 <template id="s_key_benefits" inherit_id="website.s_key_benefits">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc2" separator=" "/>
+    </xpath>
     <!-- Titles -->
     <xpath expr="(//h3)[1]" position="replace" mode="inner">
         Personalized Property Searches

theme_real_estate/views/snippets/s_masonry_block.xml

@@ -3,62 +3,14 @@
 
 <template id="s_masonry_block" inherit_id="website.s_masonry_block" name="Masonry">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt32" remove="pt48" separator=" "/>
+        <attribute name="class" remove="pt48 pb48" separator=" "/>
+        <attribute name="data-masonry-template">default_reversed</attribute>
     </xpath>
-</template>
-
-<template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
-    <!-- Little block #1 -->
-    <xpath expr="//div[hasclass('col-lg-4')]/h3" position="before">
-        <span class="fa fa-star fa-2x mb-4"></span>
+    <xpath expr="//section/div" position="attributes">
+        <attribute name="class" remove="container" add="container-fluid" separator=" "/>
     </xpath>
-    <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-4')]/h3" position="replace" mode="inner">
-        Increased Visibility
-    </xpath>
-    <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-4')]/p" position="replace" mode="inner">
-        Increase Visitor retention with virtual tours.
-    </xpath>
-
-    <!-- Little block #2 -->
-    <xpath expr="//div[hasclass('col-lg-4')][2]/h3" position="before">
-        <span class="fa fa-tag fa-2x mb-4"></span>
-    </xpath>
-    <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-4')][2]/h3" position="replace" mode="inner">
-        No fixed fees
-    </xpath>
-    <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-4')][2]/p" position="replace" mode="inner">
-        We have fixed price fees. We only charge when your sale is confirmed.
-    </xpath>
-
-    <!-- Little block #3 -->
-    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="before">
-        <span class="fa fa-camera fa-2x mb-4"></span>
-    </xpath>
-    <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-3')]/h3" position="replace" mode="inner">
-        Pro Photo Shoot
-    </xpath>
-    <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-3')]/p" position="replace" mode="inner">
-        An image is worth a thousand words.
-    </xpath>
-
-    <!-- Little block #4 -->
-    <!-- Main div -->
-    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="before">
-        <span class="fa fa-check fa-2x mb-4"></span>
-    </xpath>
-    <!-- Title -->
-    <xpath expr="//div[hasclass('col-lg-3')][2]/h3" position="replace" mode="inner">
-        Premium Quality
-    </xpath>
-    <!-- Paragraph -->
-    <xpath expr="//div[hasclass('col-lg-3')][2]/p" position="replace" mode="inner">
-        We deliver high quality services.
+    <xpath expr="//section/div" position="replace" mode="inner">
+        <t t-call="website.s_masonry_block_reversed_template"/>
     </xpath>
 </template>
 

theme_real_estate/views/snippets/s_quotes_carousel.xml

@@ -2,10 +2,17 @@
 <odoo>
 
 <template id="s_quotes_carousel" inherit_id="website.s_quotes_carousel">
+    <xpath expr="//section/div" position="attributes">
+        <attribute name="class" remove="s_carousel_boxed" add="s_carousel_default" separator=" "/>
+    </xpath>
     <xpath expr="//div[hasclass('s_quotes_carousel')]" position="attributes">
         <attribute name="class" remove="carousel-dark" separator=" "/>
     </xpath>
     <!-- Quote 1 -->
+    <xpath expr="(//blockquote)[1]" position="attributes">
+        <attribute name="class" remove="s_blockquote_with_icon w-50" add="s_blockquote_with_line w-75" separator=" "/>
+        <attribute name="style">border-radius: 0px !important;</attribute>
+    </xpath>
     <xpath expr="(//p[hasclass('s_blockquote_quote')])[1]" position="replace" mode="inner">
         Amazing team! smiling, always nice to talk with, they always have the best advices for you, adapted to your needs!
     </xpath>
@@ -13,6 +20,10 @@
         Customer, bought a house
     </xpath>
     <!-- Quote 2 -->
+    <xpath expr="(//blockquote)[2]" position="attributes">
+        <attribute name="class" remove="s_blockquote_with_icon w-50" add="s_blockquote_with_line w-75" separator=" "/>
+        <attribute name="style">border-radius: 0px !important;</attribute>
+    </xpath>
     <xpath expr="(//p[hasclass('s_blockquote_quote')])[2]" position="replace" mode="inner">
         From start to finish, they were extremely professional, friendly, helpful and easy to do business with. Very happy with the experience and the company.
     </xpath>
@@ -20,6 +31,10 @@
         Customer, bought an appartement
     </xpath>
     <!-- Quote 3 -->
+    <xpath expr="(//blockquote)[3]" position="attributes">
+        <attribute name="class" remove="s_blockquote_with_icon w-50" add="s_blockquote_with_line w-75" separator=" "/>
+        <attribute name="style">border-radius: 0px !important;</attribute>
+    </xpath>
     <xpath expr="(//p[hasclass('s_blockquote_quote')])[3]" position="replace" mode="inner">
         Positive energy, great team spirit, hard workers and awesome people! I warmly recommend them!
     </xpath>

theme_real_estate/views/snippets/s_references.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_references" inherit_id="website.s_references">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" remove="o_cc1" add="o_cc2" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_real_estate/views/snippets/s_striped_center_top.xml

@@ -14,6 +14,10 @@
     <xpath expr="//a[hasclass('btn')]/t" position="replace" mode="inner">
         View Listings
     </xpath>
+    <!-- Image -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="class" remove="rounded" separator=" "/>
+    </xpath>
     <!-- Figcaption -->
     <xpath expr="//figcaption" position="replace" mode="inner">
         Homes built with care

theme_real_estate/views/snippets/s_striped_top.xml

@@ -3,8 +3,19 @@
 
 <template id="s_striped_top" inherit_id="website.s_striped_top">
     <!-- Title -->
-    <xpath expr="//h1" position="attributes">
-        <attribute name="class" add="h2-fs" separator=" "/>
+    <xpath expr="//h1" position="replace" mode="inner">
+        <font class="text-o-color-2">ESTATE®.</font> Your Easy Home Search, All in One
+    </xpath>
+    <!-- Lead -->
+    <xpath expr="//p" position="replace" mode="inner">
+        With a simple click, finding your dream home has never been easier. Explore your future with ease and confidence.
+    </xpath>
+    <!-- Button -->
+    <xpath expr="//a" position="attributes">
+        <attribute name="class" remove="btn-primary" add="btn-secondary btn-lg" separator=" "/>
+    </xpath>
+    <xpath expr="//a" position="replace" mode="inner">
+        Search Now
     </xpath>
 </template>
 

theme_real_estate/views/snippets/s_text_image.xml

@@ -2,10 +2,6 @@
 <odoo>
 
 <template id="s_text_image" inherit_id="website.s_text_image">
-    <!-- Section -->
-    <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt48 pb0" remove="pt80 pb80" separator=" "/>
-    </xpath>
     <!-- Title -->
     <xpath expr="//h2" position="replace" mode="inner">
         Are you thinking of selling?
@@ -19,11 +15,11 @@
     <xpath expr="//p[2]" position="replace" />
     <!-- Image -->
     <xpath expr="//img" position="attributes">
-        <attribute name="src">/web_editor/image_shape/website.s_text_image_default_image/web_editor/solid/solid_square_1.svg?c2=o-color-3</attribute>
-        <attribute name="data-shape">web_editor/solid/solid_square_1</attribute>
+        <attribute name="src">/web_editor/image_shape/website.s_text_image_default_image/web_editor/panel/panel_duo_step.svg</attribute>
+        <attribute name="data-shape">web_editor/panel/panel_duo_step</attribute>
         <attribute name="data-original-mimetype">image/jpeg</attribute>
         <attribute name="data-file-name">s_text_image.svg</attribute>
-        <attribute name="data-shape-colors">;o-color-3;;;</attribute>
+        <attribute name="data-shape-colors">;;;;</attribute>
     </xpath>
 </template>
 

theme_real_estate/views/snippets/s_three_columns.xml

@@ -4,11 +4,21 @@
 <template id="s_three_columns" inherit_id="website.s_three_columns">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc3 pt0 pb72" remove="o_cc2 pt32 pb32" separator=" "/>
+        <attribute name="class" add="o_cc1 pt64 pb64" remove="o_cc2 pt32 pb32" separator=" "/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//div[hasclass('col-lg-4')]" position="before">
+        <div class="col-lg-12">
+            <h2 class="h3-fs">Discover our latest properties</h2>
+            <p class="lead">Carefully handpicked by our experts</p>
+        </div>
     </xpath>
     <!-- Column #1 -->
+    <xpath expr="//div[hasclass('card')]" position="attributes">
+        <attribute name="style">border-radius: 0px !important;</attribute>
+    </xpath>
     <xpath expr="//h5" position="before">
-        <span class="text-600 fw-bold">$295,000</span>
+        <p class="h4-fs">$295,000</p>
     </xpath>
     <xpath expr="//h5" position="replace" mode="inner">
         House On The Hill
@@ -21,22 +31,28 @@
     </xpath>
 
     <!-- Column 2 -->
+    <xpath expr="(//div[hasclass('card')])[2]" position="attributes">
+        <attribute name="style">border-radius: 0px !important;</attribute>
+    </xpath>
     <xpath expr="(//h5)[2]" position="before">
-        <span class="text-600 fw-bold">$1,295,000,000</span>
+        <p class="h4-fs">$1,295,000,000</p>
     </xpath>
     <xpath expr="(//h5)[2]" position="replace" mode="inner">
         Moutain View
     </xpath>
     <xpath expr="(//p[hasclass('card-text')])[2]" position="replace" mode="inner">
-        The house is surrounded by garden terraces that create unique spaces and an intimate ambience. With no overlooking neighbours, the garden offers real privacy.
+        The house is surrounded by garden terraces that create an intimate ambience. With no overlooking neighbours, the garden offers real privacy.
     </xpath>
     <xpath expr="(//p[hasclass('card-text')])[2]" position="after" >
         <a href="#" class="btn btn-primary mb-0">View details</a>
     </xpath>
 
     <!-- Column 3 -->
+    <xpath expr="(//div[hasclass('card')])[3]" position="attributes">
+        <attribute name="style">border-radius: 0px !important;</attribute>
+    </xpath>
     <xpath expr="(//h5)[3]" position="before">
-        <span class="text-600 fw-bold">$455,000</span>
+        <p class="h4-fs">$455,000</p>
     </xpath>
     <xpath expr="(//h5)[3]" position="replace" mode="inner">
         Paradise Residence

theme_real_estate/views/snippets/s_title.xml

@@ -4,7 +4,16 @@
 <template id="s_title" inherit_id="website.s_title">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt72" remove="pt40" separator=" "/>
+        <attribute name="class" add="pt120 pb120 o_cc o_cc4" remove="pt40 pb40" separator=" "/>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Airy/07','showOnMobile':true}</attribute>
+    </xpath>
+    <!-- Shape -->
+    <xpath expr="//div[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Airy_07" style="background-image: url('/web_editor/shape/web_editor/Airy/07.svg"/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h2" position="replace" mode="inner">
+        Where every house becomes a home.
     </xpath>
 </template>