[IMP] theme_aviato: revamp the theme

task-4178017
Part of task-4177975

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

theme_aviato/__manifest__.py

@@ -11,21 +11,25 @@
         'data/ir_asset.xml',
         'views/images_library.xml',
 
+        'views/snippets/s_banner.xml',
         'views/snippets/s_framed_intro.xml',
         'views/snippets/s_cards_grid.xml',
         'views/snippets/s_cta_box.xml',
         'views/snippets/s_cover.xml',
+        'views/snippets/s_company_team.xml',
         'views/snippets/s_striped_top.xml',
         'views/snippets/s_features.xml',
         'views/snippets/s_sidegrid.xml',
         'views/snippets/s_image_text.xml',
         'views/snippets/s_freegrid.xml',
+        'views/snippets/s_hr.xml',
         'views/snippets/s_image_title.xml',
         'views/snippets/s_images_mosaic.xml',
         'views/snippets/s_text_image.xml',
         'views/snippets/s_image_punchy.xml',
         'views/snippets/s_card_offset.xml',
         'views/snippets/s_three_columns.xml',
+        'views/snippets/s_masonry_block.xml',
         'views/snippets/s_motto.xml',
         'views/snippets/s_picture.xml',
         'views/snippets/s_popup.xml',
@@ -34,6 +38,7 @@
         'views/snippets/s_quotes_carousel_minimal.xml',
         'views/snippets/s_features_wall.xml',
         'views/snippets/s_striped_center_top.xml',
+        'views/snippets/s_showcase.xml',
         'views/snippets/s_quadrant.xml',
         'views/snippets/s_unveil.xml',
         'views/snippets/s_accordion_image.xml',
@@ -56,14 +61,18 @@
         'static/description/aviato_screenshot.jpg',
     ],
     'images_preview_theme': {
-        'website.s_cover_default_image': '/theme_aviato/static/src/img/content/s_cover.jpg',
+        'website.s_image_text_default_image': '/theme_aviato/static/src/img/content/s_banner_2.jpg',
+        'website.s_product_list_default_image_1': '/theme_aviato/static/src/img/content/s_banner_3.jpg',
+        'website.s_picture_default_image': '/theme_aviato/static/src/img/content/s_popup.jpg',
+        'website.s_media_list_default_image_1': '/theme_aviato/static/src/img/content/s_wall_01.jpg',
+        'website.s_carousel_default_image_1': '/theme_aviato/static/src/img/content/s_carousel_1.jpg',
+        'website.s_quotes_carousel_demo_image_2': '/theme_aviato/static/src/img/content/s_quote_bg_3.jpg',
+        'website.s_text_image_default_image': '/theme_aviato/static/src/img/content/s_wall_05.jpg',
         'website.s_three_columns_default_image_1': '/theme_aviato/static/src/img/content/s_three_columns_1.jpg',
-        'website.s_three_columns_default_image_2': '/theme_aviato/static/src/img/content/s_three_columns_2.jpg',
+        'website.s_quotes_carousel_demo_image_0': '/theme_aviato/static/src/img/content/s_quote_bg_1.jpg',
-        'website.s_three_columns_default_image_3': '/theme_aviato/static/src/img/content/s_three_columns_3.jpg',
-        'website.s_picture_default_image': '/theme_aviato/static/src/img/content/s_picture.jpg',
     },
     'configurator_snippets': {
-        'homepage': ['s_cover', 's_text_image', 's_image_text', 's_title', 's_three_columns', 's_picture'],
+        'homepage': ['s_banner', 's_text_image', 's_image_text', 's_picture', 's_title', 's_masonry_block', 's_company_team', 's_showcase', 's_quotes_carousel'],
     },
     'license': 'LGPL-3',
     'live_test_url': 'https://theme-aviato.odoo.com',

theme_aviato/static/src/js/tour.js

@@ -1,12 +1,11 @@
 /** @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_banner',
-        name: 'Cover',
+        name: 'Banner',
         groupName: "Intro",
     },
     {
@@ -19,25 +18,40 @@ const snippets = [
         name: 'Image - Text',
         groupName: "Content",
     },
+    {
+        id: 's_picture',
+        name: 'Title - Image',
+        groupName: "Images",
+    },
     {
         id: 's_title',
         name: 'Title',
         groupName: "Text",
     },
     {
-        id: 's_three_columns',
+        id: 's_masonry_block',
-        name: 'Columns',
+        name: 'Masonry',
-        groupName: "Columns",
+        groupName: "Images",
     },
     {
-        id: 's_picture',
+        id: 's_company_team',
-        name: 'Title - Image',
+        name: 'Team',
-        groupName: "Images",
+        groupName: "People",
+    },
+    {
+        id: 's_showcase',
+        name: 'Showcase',
+        groupName: "Content",
+    },
+    {
+        id: 's_quotes_carousel',
+        name: 'Quotes',
+        groupName: "People",
     },
 ];
 
 wTourUtils.registerThemeHomepageTour("aviato_tour", () => [
-    wTourUtils.assertCssVariable('--color-palettes-name', '"treehouse-5"'),
+    wTourUtils.assertCssVariable('--color-palettes-name', '"default-16"'),
     ...wTourUtils.insertSnippet(snippets[0]),
     ...wTourUtils.clickOnText(snippets[0], 'h1', 'top'),
     wTourUtils.goBackToBlocks(),
@@ -46,7 +60,7 @@ wTourUtils.registerThemeHomepageTour("aviato_tour", () => [
     ...wTourUtils.insertSnippet(snippets[3]),
     ...wTourUtils.insertSnippet(snippets[4]),
     ...wTourUtils.insertSnippet(snippets[5]),
-    ...wTourUtils.clickOnSnippet(snippets[5], 'top'),
+    ...wTourUtils.insertSnippet(snippets[6]),
-    wTourUtils.changeOption('ColoredLevelBackground', 'we-button[data-toggle-bg-shape]', _t('Background Shape')),
+    ...wTourUtils.insertSnippet(snippets[7]),
-    wTourUtils.selectNested('we-select-page', 'BackgroundShape', ':not(.o_we_pager_controls)', _t('Background Shape')),
+    ...wTourUtils.insertSnippet(snippets[8]),
 ]);

theme_aviato/static/src/scss/primary_variables.scss

@@ -15,15 +15,15 @@ $o-theme-h6-font-size-multiplier: (20 / 16);
 
 $o-website-values-palettes: (
     (
-        'color-palettes-name': 'treehouse-5',
+        'color-palettes-name': 'default-16',
 
         // Header
         'logo-height': 3rem,
         'fixed-logo-height': 2rem,
 
         // Font
-        'font': 'Open Sans',
+        'font': 'Lato',
-        'headings-font': 'Libre Baskerville',
+        'headings-font': 'Playfair Display',
 
         // Buttons
         'btn-padding-y': .45rem,
@@ -47,12 +47,6 @@ $o-website-values-palettes: (
     ),
 );
 
-//------------------------------------------------------------------------------
-// Palettes
-//------------------------------------------------------------------------------
-
-$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'treehouse-5');
-
 //------------------------------------------------------------------------------
 // Fonts
 //------------------------------------------------------------------------------
@@ -70,6 +64,10 @@ $o-theme-font-configs: (
         'family': ('Lato', sans-serif),
         'url': 'Lato:300,300i,400,400i,700,700i',
     ),
+    'Playfair Display': (
+        'family': ('Playfair Display', serif),
+        'url': 'Playfair+Display:400,400i,700,700i',
+    ),
     'Advent Pro': (
         'family': ('Advent Pro', sans-serif),
         'url': 'Advent+Pro:300,300i,400,400i,600,600i',
@@ -95,7 +93,7 @@ $o-theme-font-configs: (
 );
 
 //------------------------------------------------------------------------------
-// Fonts
+// Background Shapes
 //------------------------------------------------------------------------------
 
 $o-bg-shapes: change-shape-colors-mapping('web_editor', 'Wavy/21', (2: 1));

theme_aviato/views/images_library.xml

@@ -46,7 +46,7 @@
 <record id="s_picture_default_image" model="theme.ir.attachment">
     <field name="key">website.s_picture_default_image</field>
     <field name="name">website.s_picture_default_image</field>
-    <field name="url">/theme_aviato/static/src/img/content/s_picture.jpg</field>
+    <field name="url">/theme_aviato/static/src/img/content/s_popup.jpg</field>
 </record>
 
 <!-- Popup -->
@@ -101,7 +101,7 @@
 <record id="s_media_list_default_image_1" model="theme.ir.attachment">
     <field name="key">website.s_media_list_default_image_1</field>
     <field name="name">website.s_media_list_default_image_1</field>
-    <field name="url">/theme_aviato/static/src/img/content/media_02.jpg</field>
+    <field name="url">/theme_aviato/static/src/img/content/media_01.jpg</field>
 </record>
 <record id="s_media_list_default_image_2" model="theme.ir.attachment">
     <field name="key">website.s_media_list_default_image_2</field>
@@ -111,7 +111,7 @@
 <record id="s_media_list_default_image_3" model="theme.ir.attachment">
     <field name="key">website.s_media_list_default_image_3</field>
     <field name="name">website.s_media_list_default_image_3</field>
-    <field name="url">/theme_aviato/static/src/img/content/media_02.jpg</field>
+    <field name="url">/theme_aviato/static/src/img/content/media_03.jpg</field>
 </record>
 
 <!-- Wavy Grid -->

theme_aviato/views/new_page_template.xml

@@ -5,7 +5,7 @@
 
 <template id="new_page_template_s_picture_only" inherit_id="website.new_page_template_s_picture_only">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc2" remove="o_cc3" separator=" "/>
+        <attribute name="class" add="o_cc2" remove="o_cc5" separator=" "/>
     </xpath>
 </template>
 
@@ -24,13 +24,13 @@
 
 <template id="new_page_template_about_s_picture" inherit_id="website.new_page_template_about_s_picture">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc2" remove="o_cc3" separator=" "/>
+        <attribute name="class" add="o_cc2" remove="o_cc5" separator=" "/>
     </xpath>
 </template>
 
 <template id="new_page_template_about_full_s_image_text" inherit_id="website.new_page_template_about_full_s_image_text">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" remove="pb56" separator=" "/>
+        <attribute name="class" remove="pt48 pb56" separator=" "/>
     </xpath>
 </template>
 
@@ -110,7 +110,7 @@
 
 <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">
-        <attribute name="class" remove="pb56" separator=" "/>
+        <attribute name="class" remove="pt48 pb56" separator=" "/>
     </xpath>
 </template>
 
@@ -129,7 +129,7 @@
 
 <template id="new_page_template_pricing_s_image_text_2nd" inherit_id="website.new_page_template_pricing_s_image_text_2nd">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" remove="pb56" separator=" "/>
+        <attribute name="class" remove="pt48 pb56" separator=" "/>
     </xpath>
 </template>
 

theme_aviato/views/snippets/s_banner.xml

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_banner" inherit_id="website.s_banner">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc2 pt80 pb144" remove="pt96 pb96" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape": "web_editor/Origins/14_001", "colors": {"c3": "o-color-4", "c4": "o-color-3"}, "flip": [], "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-4&amp;c4=o-color-3'); background-position: 50% 100%;"/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h1" position="replace">
+        <h1 class="display-3">Let's <br/>travel the world</h1>
+    </xpath>
+    <!-- Paragraphs -->
+    <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
+        <br/>Enjoy breathtaking views of nature. Relax and embrace your dreams.<br/><br/>
+    </xpath>
+    <!-- Button -->
+    <xpath expr="//a" position="replace" mode="inner">
+        Explore Now
+    </xpath>
+    <!-- Card -->
+    <xpath expr="//p[hasclass('s_blockquote_quote')]" position="replace" mode="inner">
+        An unforgettable experience! Every destination was stunning, and the service was exceptional.
+    </xpath>
+    <xpath expr="//div[hasclass('s_blockquote_author')]//span//span" position="replace" mode="inner">
+        Explored Peru in 2024
+    </xpath>
+
+</template>
+
+</odoo>

theme_aviato/views/snippets/s_company_team.xml

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_company_team" inherit_id="website.s_company_team">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt72 pb0" remove="pt48 pb48" separator=" "/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h3" position="replace">
+        <h2>Meet our travel agents</h2>
+    </xpath>
+
+    <xpath expr="//div[hasclass('col-lg-9')]//p" position="replace"/>
+    <xpath expr="//div[hasclass('col-lg-9')]//p[1]" position="replace" mode="inner">
+        Tony is dedicated to crafting personalized travel experiences, ensuring every client's journey is tailored to their unique preferences.
+    </xpath>
+
+    <xpath expr="(//div[hasclass('col-lg-9')])[2]//p" position="replace"/>
+    <xpath expr="(//div[hasclass('col-lg-9')])[2]//p[1]" position="replace" mode="inner">
+        Mich ensures the smooth execution of all travel plans, leveraging his industry expertise to guarantee a seamless client experience.
+    </xpath>
+
+    <xpath expr="(//div[hasclass('col-lg-9')])[3]//p" position="replace"/>
+    <xpath expr="(//div[hasclass('col-lg-9')])[3]//p[1]" position="replace" mode="inner">
+        Aline designs bespoke travel itineraries, collaborating with a global network of experts to deliver unique experiences tailored to each client's needs.
+    </xpath>
+
+    <xpath expr="(//div[hasclass('col-lg-9')])[4]//p" position="replace"/>
+    <xpath expr="(//div[hasclass('col-lg-9')])[4]//p[1]" position="replace" mode="inner">
+        Iris is responsible for creating cost-effective travel packages, ensuring clients can enjoy their adventures without compromising on quality.
+    </xpath> 
+
+    <!-- Images -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="class" add="rounded" remove="rounded-circle" separator=" "/>
+    </xpath>
+    <xpath expr="(//img)[2]" position="attributes">
+        <attribute name="class" add="rounded" remove="rounded-circle" separator=" "/>
+    </xpath>
+    <xpath expr="(//img)[3]" position="attributes">
+        <attribute name="class" add="rounded" remove="rounded-circle" separator=" "/>
+    </xpath>
+    <xpath expr="(//img)[4]" position="attributes">
+        <attribute name="class" add="rounded" remove="rounded-circle" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_aviato/views/snippets/s_features_wall.xml

@@ -2,6 +2,17 @@
 <odoo>
 
 <template id="s_features_wall" inherit_id="website.s_features_wall">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt64 pb48" remove="pt56 pb56" separator=" "/>
+        <attribute name="data-oe-shape-data"/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h2" position="attributes">
+        <attribute name="class" add="h2-fs" remove="display-3-fs" separator=" "/>
+    </xpath>
+    <!-- Remove shape -->
+    <xpath expr="//div[hasclass('o_we_shape')]" position="replace"/>
     <!-- Card 1 -->
     <xpath expr="//div[hasclass('g-col-lg-3')]//h3" position="replace" mode="inner">
         Tailored Travel Packages

theme_aviato/views/snippets/s_hr.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_hr" inherit_id="website.s_hr">
+    <xpath expr="//div[hasclass('s_hr')]" position="attributes">
+        <attribute name="class" add="pt0 pb0" remove="pt32 pb32" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_aviato/views/snippets/s_image_text.xml

@@ -3,21 +3,13 @@
 
 <template id="s_image_text" inherit_id="website.s_image_text">
     <!-- Section -->
-    <xpath  expr="//div[hasclass('container')]" position="attributes">
-        <attribute name="class" add="container-fluid" remove="container" separator=" "/>
-    </xpath>
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pb72" remove="pb80" separator=" "/>
+        <attribute name="class" add="pb112 pt0" remove="pb80 pt80" separator=" "/>
     </xpath>
     <!-- Image -->
     <xpath expr="//img" position="attributes">
-        <attribute name="class" add="w-75" separator=" "/>
         <attribute name="src">/web_editor/shape/theme_aviato/s_image_text.svg?c1=o-color-1</attribute>
     </xpath>
-    <!-- layout -->
-    <xpath  expr="//div[hasclass('row')]/div[2]" position="attributes">
-        <attribute name="class" add="col-lg-4" remove="col-lg-5 offset-lg-1" separator=" "/>
-    </xpath>    
     <!-- Title -->
     <xpath expr="//h2" position="replace" mode="inner">
         Itinerary Planning
@@ -30,6 +22,13 @@
         <p><br/></p>
     </xpath>
     <xpath expr="//p[3]" position="replace"/>
+    <!-- layout -->
+    <xpath expr="//div[hasclass('row')]/div" position="attributes">
+        <attribute name="class" add="col-lg-5" remove="col-lg-6" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('row')]/div[2]" position="attributes">
+        <attribute name="class" add="col-lg-6" remove="col-lg-5" separator=" "/>
+    </xpath>
 </template>
 
 </odoo>

theme_aviato/views/snippets/s_masonry_block.xml

@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_masonry_block" inherit_id="website.s_masonry_block" name="Masonry">
+    <xpath expr="//section" position="replace">
+        <section class="s_masonry_block o_cc1 pt24 pb104" data-vcss="001" data-vxml="001" data-oe-shape-data="{'shape':'web_editor/Origins/04_001','flip':[],'showOnMobile':true}">
+            <div class="o_we_shape o_web_editor_Origins_04_001 o_shape_show_mobile"/>
+            <div class="container">
+                <t t-call="website.s_masonry_block_default_template"/>
+            </div>
+        </section>
+    </xpath>
+</template>
+
+<template id="s_masonry_block_default_template" inherit_id="website.s_masonry_block_default_template">
+    <!-- Main block #0 -->
+    <xpath expr="//div[hasclass('o_grid_item')]" position="attributes">
+        <attribute name="class" add="oe_img_bg o_bg_img_center o_cc o_cc5 overflow-hidden justify-content-end rounded" remove="rounded-4" separator=" "/>
+        <attribute name="style" add="--grid-item-padding-y: 0px; --grid-item-padding-x: 20px; background-image: url('/web/image/website.s_key_images_default_image_1');" separator=";"/>
+    </xpath>
+    <!-- Remove img -->
+    <xpath expr="//img" position="replace"/>
+    <!-- Add Text -->
+    <xpath expr="//div[hasclass('o_grid_item')]" position="inside">
+        <div class="o_we_bg_filter bg-black-50"></div>
+        <h3 style="text-align: left;">Brazil</h3>
+        <p style="text-align: left;">From $699</p>
+    </xpath>
+
+    <!-- Little block #1 -->
+    <!-- Main div -->
+    <xpath expr="(//div[hasclass('o_grid_item')])[2]" position="attributes">
+        <attribute name="class" add="oe_img_bg o_bg_img_center o_cc o_cc5 overflow-hidden rounded" remove="o_cc o_cc2 rounded-4" separator=" "/>
+        <attribute name="style" add="--grid-item-padding-y: 0px; background-image: url('/web/image/website.s_carousel_default_image_1');" remove="--grid-item-padding-y: 20px" separator=";"/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[2]/h3" position="before">
+        <div class="o_we_bg_filter bg-black-50"></div>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="(//div[hasclass('o_grid_item')])[2]/h3" position="replace" mode="inner">
+        Greece
+    </xpath>
+    <!-- Paragraph -->
+    <xpath expr="(//div[hasclass('o_grid_item')])[2]/p" position="replace" mode="inner">
+        From $349
+    </xpath>
+
+    <!-- Little block #2 -->
+    <!-- Main div -->
+    <xpath expr="(//div[hasclass('o_grid_item')])[3]" position="attributes">
+        <attribute name="class" add="oe_img_bg o_bg_img_center o_cc o_cc5 overflow-hidden rounded" remove="o_cc o_cc3 rounded-4" separator=" "/>
+        <attribute name="style" remove="--grid-item-padding-y: 20px; background-image: linear-gradient(135deg, var(--o-color-4) -400%, var(--o-color-2) 100%);" add="--grid-item-padding-y: 0px; background-image: url('/web/image/website.s_quotes_carousel_demo_image_2');" separator=";"/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[3]/h3" position="before">
+        <div class="o_we_bg_filter bg-black-50"></div>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="(//div[hasclass('o_grid_item')])[3]/h3" position="replace" mode="inner">
+        Italy
+    </xpath>
+    <!-- Paragraph -->
+    <xpath expr="(//div[hasclass('o_grid_item')])[3]/p" position="replace" mode="inner">
+        From $299
+    </xpath>
+
+    <!-- Little block #3 -->
+    <!-- Main div -->
+    <xpath expr="(//div[hasclass('o_grid_item')])[4]" position="attributes">
+        <attribute name="class" add="oe_img_bg o_bg_img_center o_cc o_cc5 overflow-hidden rounded" remove="o_cc o_cc4 rounded-4" separator=" "/>
+        <attribute name="style" remove="--grid-item-padding-y: 20px; background-image: linear-gradient(135deg, var(--o-color-4) -400%, var(--o-color-1) 100%);" add="--grid-item-padding-y: 0px; background-image: url('/web/image/website.s_key_images_default_image_4');" separator=";"/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[4]/h3" position="before">
+        <div class="o_we_bg_filter bg-black-50"></div>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="(//div[hasclass('o_grid_item')])[4]/h3" position="replace" mode="inner">
+        Romania
+    </xpath>
+    <!-- Paragraph -->
+    <xpath expr="(//div[hasclass('o_grid_item')])[4]/p" position="replace" mode="inner">
+        From $149
+    </xpath>
+
+    <!-- Little block #4 -->
+    <!-- Main div -->
+    <xpath expr="(//div[hasclass('o_grid_item')])[5]" position="attributes">
+        <attribute name="class" add="oe_img_bg o_bg_img_center o_cc o_cc5 overflow-hidden rounded" remove="o_cc o_cc2 rounded-4" separator=" "/>
+        <attribute name="style" add="--grid-item-padding-y: 0px; background-image: url('/web/image/website.s_three_columns_default_image_1');" remove="--grid-item-padding-y: 20px" separator=";"/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item')])[5]/h3" position="before">
+        <div class="o_we_bg_filter bg-black-50"></div>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="(//div[hasclass('o_grid_item')])[5]/h3" position="replace" mode="inner">
+        France
+    </xpath>
+    <!-- Paragraph -->
+    <xpath expr="(//div[hasclass('o_grid_item')])[5]/p" position="replace" mode="inner">
+        From $119
+    </xpath>
+</template>
+
+</odoo>

theme_aviato/views/snippets/s_picture.xml

@@ -3,25 +3,25 @@
 
 <template id="s_picture" inherit_id="website.s_picture">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt72 overflow-hidden o_cc3 bg-o-color-3" remove="pt64" separator=" "/>
+        <attribute name="class" add="pt88 pb88 o_cc o_cc5" remove="pt64 pb64" separator=" "/>
+    </xpath>
+    <xpath expr="//section/div" position="attributes">
+        <attribute name="class" add="container" remove="o_container_small" separator=" "></attribute>
     </xpath>
     <xpath expr="//h2" position="replace" mode="inner">
-        Our travel agencies
+        Explore World's Hidden Gems
+    </xpath>
+    <xpath expr="//p" position="replace" mode="inner">
+        Set off on an unforgettable adventure to the world's most breathtaking locations, thoughtfully curated just for you.
     </xpath>
     <xpath expr="//img" position="attributes">
         <attribute name="style">width: 100%;</attribute>
     </xpath>
-    <xpath expr="//figcaption" position="replace">
+    <xpath expr="//figcaption" position="replace" mode="inner">
-        <figcaption class="figure-caption text-400"><em>Odoo Travel New York</em></figcaption>
+        Old Harry Rocks, Isle of Purbeck
     </xpath>
-</template>
+    <xpath expr="//img" position="attributes">
-
+        <attribute name="src">/web/image/website.s_popup_default_image</attribute>
-<template id="configurator_s_picture" inherit_id="website.configurator_s_picture">
-    <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/01","flip":[]}</attribute>
-    </xpath>
-    <xpath expr="//section/div" position="before">
-        <div class="o_we_shape o_web_editor_Bold_07_001"/>
     </xpath>
 </template>
 

theme_aviato/views/snippets/s_showcase.xml

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_showcase" inherit_id="website.s_showcase">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt48 pb104" remove="pt48 pb48" separator=" "/>
+    </xpath>
+    <!-- Row -->
+    <xpath expr="//div[hasclass('container')]//div" position="attributes">
+        <attribute name="class" add="align-items-center" separator=" "/>
+    </xpath>
+    <!-- Title -->
+    <xpath expr="//h3" position="replace">
+        <h2>Why Choose Us</h2>
+    </xpath>
+    <!-- Content -->
+    <xpath expr="//h5" position="replace" mode="inner">
+        Expertly Curated Trips
+    </xpath>
+    <xpath expr="//div[hasclass('col-12')][2]//p" position="replace" mode="inner">
+        We select only the best destinations, ensuring your travel experience is nothing short of extraordinary.
+    </xpath>
+    <xpath expr="(//h5)[2]" position="replace" mode="inner">
+        Personalized Itineraries
+    </xpath>
+    <xpath expr="//div[hasclass('col-12')][3]//p" position="replace" mode="inner">
+        Your journey is tailored to match your preferences, making every trip uniquely yours.
+    </xpath>
+    <xpath expr="(//h5)[3]" position="replace" mode="inner">
+        Seamless Travel Experience
+    </xpath>
+    <xpath expr="//div[hasclass('col-12')][4]//p" position="replace" mode="inner">
+        From booking to departure, we handle all the details so you can focus on enjoying your adventure.
+    </xpath>
+    <!-- Remove link -->
+    <xpath expr="(//div[hasclass('col-12')])[5]" position="replace" />
+    <!-- Image Column -->
+    <xpath expr="(//div[hasclass('col-lg-6')])[2]" position="attributes">
+        <attribute name="class" add="col-lg-5 offset-lg-1" remove="col-lg-6" separator=" "/>
+    </xpath>
+    <xpath expr="//img" position="attributes">
+        <attribute name="src">/web_editor/shape/theme_aviato/s_accordion_image.svg?c1=o-color-1</attribute>
+    </xpath>
+</template>
+
+</odoo>

theme_aviato/views/snippets/s_text_image.xml

@@ -2,10 +2,6 @@
 <odoo>
 
 <template id="s_text_image" inherit_id="website.s_text_image">
-    <!-- Container -->
-    <xpath  expr="//div[hasclass('container')]" position="attributes">
-        <attribute name="class" add="container-fluid" remove="container" separator=" "/>
-    </xpath>
     <!-- Title -->
     <xpath expr="//h2" position="replace" mode="inner">
         What we can do, <b>for you</b>
@@ -18,13 +14,15 @@
         <p><br/></p>
     </xpath>
     <xpath expr="//p[3]" position="replace"/>
-    <!-- layout -->
+    <!-- Layout -->
-    <xpath expr="//div[hasclass('row')]/div[1]" position="attributes">
+    <xpath expr="//div[hasclass('row')]/div" position="attributes">
-        <attribute name="class" add="col-lg-4 offset-lg-2" remove="col-lg-5" separator=" "/>
+        <attribute name="class" add="col-lg-6" remove="col-lg-5" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('row')]/div[2]" position="attributes">
+        <attribute name="class" add="col-lg-5" remove="col-lg-6" separator=" "/>
     </xpath>
     <!-- Image -->
     <xpath expr="//img" position="attributes">
-        <attribute name="class" add="w-75" separator=" "/>
         <attribute name="src">/web_editor/shape/theme_aviato/s_text_image.svg?c1=o-color-1</attribute>
     </xpath>
 </template>

theme_aviato/views/snippets/s_title.xml

@@ -3,11 +3,11 @@
 
 <template id="s_title" inherit_id="website.s_title">
     <!-- Title -->
-    <xpath expr="//h2" position="replace" mode="inner">
+    <xpath expr="//h2" position="replace">
-        Top Destinations
+        <h2 class="text-align: left;">Top Destinations</h2>
     </xpath>
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc o_cc3" separator=" "/>
+        <attribute name="class" add="o_cc o_cc2 pt72 pb0" remove="pb40 pt40" separator=" "/>
     </xpath>
 </template>