[IMP] theme_nano: revamp the theme

This commit revamps the design of the `theme_nano`.

task-4178081
part of task-4177975

closes odoo/design-themes#966

X-original-commit: 47568ec66f
Related: odoo/odoo#182004
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
Signed-off-by: Chrysanthe Gomrée (chgo) <chgo@odoo.com>

theme_nano/views/snippets/s_big_number.xml

@@ -4,13 +4,13 @@
 <template id="s_big_number" inherit_id="website.s_big_number">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/06_001"}</attribute>
+        <attribute name="data-oe-shape-data">{'shape':'web_editor/Bold/06_001','colors':{'c3':'o-color-5'}}</attribute>
         <attribute name="class" add="o_cc4" remove="o_cc5" separator=" "/>
     </xpath>
 
     <!-- Shape -->
     <xpath expr="//div[hasclass('o_we_shape')]" position="replace">
-        <div class="o_we_shape o_web_editor_Bold_06_001"/>
+        <div class="o_we_shape o_web_editor_Bold_06_001" style="background-image: url('/web_editor/shape/web_editor%2FBold%2F06_001.svg?c3=o-color-5');"/>
     </xpath>
 
     <!-- Text -->

theme_nano/views/snippets/s_company_team_basic.xml

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_company_team_basic" inherit_id="website.s_company_team_basic">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc5" remove="o_cc1" separator=" "/>
+    </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>
+    <xpath expr="//h3" position="replace">
+        <h2 style="text-align: center;">Our talented crew</h2>
+    </xpath>
+    <xpath expr="//h2" position="after">
+        <p class="lead" style="text-align: center;">Meet the masterminds behind our agency. With them, your project is in good hands for sure.</p>
+    </xpath>
+
+    <!-- Title -->
+    <xpath expr="//div[hasclass('col-lg-12')]" position="attributes">
+        <attribute name="class" add="pb40" remove="o_grid_item g-col-lg-12 g-height-2" separator=" "/>
+        <attribute name="style" remove="grid-area: 1 / 1 / 3 / 13; --grid-item-padding-y: 32px; --grid-item-padding-x: 32px; z-index: 1;" separator=";"/>
+    </xpath>
+
+    <!-- Profile #1 -->
+    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
+        <attribute name="class" remove="o_grid_item g-col-6 g-col-lg-3 g-height-8" separator=" "/>
+        <attribute name="style" remove="grid-area: 3 / 1 / 11 / 4; --grid-item-padding-y: 16px; --grid-item-padding-x: 32px; z-index: 2;" separator=";"/>
+    </xpath>
+    <xpath expr="(//img)[1]" position="attributes">
+        <attribute name="class" add="rounded" remove="rounded-circle" separator=" "/>
+    </xpath>
+    <xpath expr="(//h4)[1]" position="replace" mode="inner">
+        Evan Ray
+    </xpath>
+    <xpath expr="(//p[hasclass('o_small-fs')])[1]" position="replace" mode="inner">
+        Creative Director
+    </xpath>
+    <!-- Profile #2 -->
+    <xpath expr="//div[hasclass('col-lg-3')][2]" position="attributes">
+        <attribute name="class" remove="o_grid_item g-col-6 g-col-lg-3 g-height-8" separator=" "/>
+        <attribute name="style" remove="grid-area: 3 / 4 / 11 / 7; --grid-item-padding-y: 16px; --grid-item-padding-x: 32px; z-index: 3;" separator=";"/>
+    </xpath>
+    <xpath expr="(//img)[2]" position="attributes">
+        <attribute name="class" add="rounded" remove="rounded-circle" separator=" "/>
+    </xpath>
+    <xpath expr="(//h4)[2]" position="replace" mode="inner">
+        Ben Cole
+    </xpath>
+    <xpath expr="(//p[hasclass('o_small-fs')])[2]" position="replace" mode="inner">
+        Account Manager
+    </xpath>
+    <!-- Profile #3 -->
+    <xpath expr="//div[hasclass('col-lg-3')][3]" position="attributes">
+        <attribute name="class" remove="o_grid_item g-col-6 g-col-lg-3 g-height-8" separator=" "/>
+        <attribute name="style" remove="grid-area: 3 / 7 / 11 / 10; --grid-item-padding-y: 16px; --grid-item-padding-x: 32px; z-index: 4;" separator=";"/>
+    </xpath>
+    <xpath expr="(//img)[3]" position="attributes">
+        <attribute name="class" add="rounded" remove="rounded-circle" separator=" "/>
+    </xpath>
+    <xpath expr="(//h4)[3]" position="replace" mode="inner">
+        Jane Ford
+    </xpath>
+    <xpath expr="(//p[hasclass('o_small-fs')])[3]" position="replace" mode="inner">
+        Media Strategist
+    </xpath>
+    <!-- Profile #4 -->
+    <xpath expr="//div[hasclass('col-lg-3')][4]" position="attributes">
+        <attribute name="class" remove="o_grid_item g-col-6 g-col-lg-3 g-height-8" separator=" "/>
+        <attribute name="style" remove="grid-area: 3 / 10 / 11 / 13; --grid-item-padding-y: 16px; --grid-item-padding-x: 32px; z-index: 5;" separator=";"/>
+    </xpath>
+    <xpath expr="(//img)[4]" position="attributes">
+        <attribute name="class" add="rounded" remove="rounded-circle" separator=" "/>
+    </xpath>
+    <xpath expr="(//h4)[4]" position="replace" mode="inner">
+        Mia Lee
+    </xpath>
+    <xpath expr="(//p[hasclass('o_small-fs')])[4]" position="replace" mode="inner">
+        Marketing Analyst
+    </xpath>
+</template>
+
+</odoo>

theme_nano/views/snippets/s_cover.xml

@@ -18,14 +18,4 @@
     </xpath>
 </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/Bold/12_001","flip":["x"]}</attribute>
-    </xpath>
-    <xpath expr="//*[hasclass('container')]" position="before">
-        <div class="o_we_shape o_web_editor_Bold_12_001" style="background-image: url('/web_editor/shape/web_editor/Bold/12_001.svg?c1=rgba%280%2C%200%2C%200%2C%200.5%29&amp;c2=rgba%280%2C%200%2C%200%2C%200.25%29&amp;c5=o-color-5&amp;flip=x'); background-position: 50% 50%;"/>
-    </xpath>
-</template>
-
 </odoo>

theme_nano/views/snippets/s_cta_box.xml

@@ -2,25 +2,29 @@
 <odoo>
 
 <template id="s_cta_box" inherit_id="website.s_cta_box">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc5" separator=" "/>
+    </xpath>
     <!-- Card -->
     <xpath expr="//div[hasclass('card')]" position="attributes">
         <attribute name="class" add="o_cc5" remove="o_cc4" separator=" "/>
+        <attribute name="style" add="background-image: linear-gradient(90deg, var(--o-color-1) 0%, var(--o-color-5) 100%);" separator=";"/>
     </xpath>
-    <!-- Title -->
-    <xpath expr="//h2" position="replace" mode="inner">
-        Interested in our services?
+    <xpath expr="//div[hasclass('card-body')]" position="attributes">
+        <attribute name="style" add="text-align: center" separator=";"/>
     </xpath>
-    <!-- Paragraphs -->
-    <xpath expr="//p" position="replace" mode="inner">
-        The first quotation is free of charge<br/><br/>
+    <xpath expr="//h2[hasclass('card-title')]" position="replace">
+        <h2 class="card-title" style="text-align: center;">Interested in our services?</h2>
+    </xpath>
+    <xpath expr="//p[hasclass('card-text')]" position="replace">
+        <p class="card-text" style="text-align: center;">Let's discuss how we can help your business<br/><br/></p>
     </xpath>
     <!-- Image -->
-    <xpath expr="//img" position="attributes">
-        <attribute name="src">/theme_nano/static/src/img/theme/19.jpg</attribute>
-    </xpath>
+    <xpath expr="//figure[hasclass('o_card_img_wrapper')]" position="replace"/>
     <!-- Button -->
-    <xpath expr="//a[hasclass('btn')]" position="replace" mode="inner">
-        Contact us
+    <xpath expr="//a[hasclass('btn')]" position="replace">
+        <a t-att-href="cta_btn_href" class="btn btn-lg btn-primary">Schedule a call</a>
     </xpath>
 </template>
 

theme_nano/views/snippets/s_discovery.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_discovery" inherit_id="website.s_discovery">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc5" separator=" "/>
+    </xpath>
+
+    <xpath expr="//span[hasclass('s_cta_badge')]" position="attributes">
+        <attribute name="class" add="o_cc5" remove="o_cc1" separator=" "/>
+    </xpath>
+    <xpath expr="//span[hasclass('s_cta_badge')]" position="replace" mode="inner">
+        <i class="fa fa-fw fa-circle text-success o_not-animable" aria-hidden="true"/><span class="o_small-fs">&#160;&#160;AVAILABLE FOR NEW PROJECTS</span>
+    </xpath>
+
+    <xpath expr="//h1" position="replace">
+        <h1 style="text-align: center">
+            <strong>We are CreativeAgency.</strong>
+        </h1>
+    </xpath>
+
+    <xpath expr="//p[2]" position="replace" mode="inner">
+        <a t-att-href="cta_btn_href" class="btn btn-lg btn-primary"><t t-out="cta_btn_text">Get Started</t></a>
+    </xpath>
+
+</template>
+
+<template id="configurator_s_discovery" inherit_id="website.configurator_s_discovery">
+    <!-- CTA -->
+    <xpath expr="//span[hasclass('s_cta_badge')]" position="replace" mode="inner">
+        <i class="fa fa-circle text-success" aria-hidden="true"/>&#160;&#160;AVAILABLE FOR NEW PROJECTS&#160;&#160;&#160;&#160;<a href="#">Contact us&#160;&#160;<i class="fa fa-long-arrow-right" aria-hidden="true"/></a>
+    </xpath>
+</template>
+
+</odoo>

theme_nano/views/snippets/s_image_text_overlap.xml

@@ -0,0 +1,18 @@
+<?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_cc5" separator=" "/>
+    </xpath>
+    <!-- Grid item #2 -->
+    <xpath expr="//div[hasclass('o_grid_item')][2]" position="attributes">
+        <attribute name="class" add="o_cc4" remove="o_cc5" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('o_grid_item')][2]" position="replace" mode="inner">
+        <h3>Our story began with a passion for creativity and innovation. From a small team, we've grown into an agency focused on delivering results and building lasting client partnerships.</h3>
+    </xpath>
+</template>
+
+</odoo>

theme_nano/views/snippets/s_key_images.xml

@@ -2,23 +2,62 @@
 <odoo>
 
 <template id="s_key_images" inherit_id="website.s_key_images">
-    <xpath expr="//h2" position="replace" mode="inner">
-        Driving Success Through Innovation
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc5" separator=" "/>
     </xpath>
-    <xpath expr="//p[hasclass('lead')]" position="replace" mode="inner">
-        Empowering Businesses to Reach New Heights
+    <xpath expr="//h2" position="replace">
+        <h2 style="text-align: center;">Our case studies</h2>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-3')]//p[3]" position="replace" mode="inner">
-        Customized solutions for your business needs
+    <xpath expr="//p[hasclass('lead')]" position="replace">
+        <p class="lead" style="text-align: center;">Some of the latest projects we had the pleasure to work on</p>
     </xpath>
-    <xpath expr="(//div[hasclass('col-lg-3')])[2]//p[3]" position="replace" mode="inner">
-        Expert advice to navigate complex challenges
+
+    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
+        <attribute name="class" add="col-lg-6 o_animate o_animated o_anim_from_left o_anim_slide_in" remove="col-lg-3" separator=" "/>
+        <attribute name="style" add="--wanim-intensity: 3; animation-name: o_anim_slide_in_left; animation-play-state: running;" separator=";"/>
     </xpath>
-    <xpath expr="(//div[hasclass('col-lg-3')])[3]//p[3]" position="replace" mode="inner">
-        Proven strategies for sustainable growth
+    <xpath expr="//div[hasclass('col-lg-6')]//p" position="replace"/>
+    <xpath expr="//div[hasclass('col-lg-6')]//p[2]" position="replace" separator=" ">
+       <h3><font class="text-o-color-1">Nova App Launch</font></h3>
     </xpath>
-    <xpath expr="(//div[hasclass('col-lg-3')])[4]//p[3]" position="replace" mode="inner">
-        Partner with us to unlock your potential
+    <xpath expr="//h3" position="after">
+        <p>2021</p>
+    </xpath>
+
+    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
+        <attribute name="class" add="col-lg-6 o_animate o_animated o_anim_from_right o_anim_slide_in" remove="col-lg-3" separator=" "/>
+        <attribute name="style" add="--wanim-intensity: 3; animation-delay: 0.3s; animation-name: o_anim_slide_in_right; animation-play-state: running;" separator=";"/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-6')][2]//p" position="replace"/>
+    <xpath expr="(//div[hasclass('col-lg-6')])[2]//p[2]" position="replace" separator=" ">
+        <h3><font class="text-o-color-1">Pulse Website Redesign</font></h3>
+    </xpath>
+    <xpath expr="(//h3)[2]" position="after">
+        <p>2022</p>
+    </xpath>
+
+    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
+        <attribute name="class" add="col-lg-6 pt48 o_animate o_animated o_anim_from_left o_anim_slide_in" remove="col-lg-3" separator=" "/>
+        <attribute name="style" add="--wanim-intensity: 3; animation-name: o_anim_slide_in_left; animation-play-state: running;" separator=";"/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-6')][3]//p" position="replace"/>
+    <xpath expr="(//div[hasclass('col-lg-6')])[3]//p[2]" position="replace" separator=" ">
+        <h3><font class="text-o-color-1">Skyline Brand Strategy</font></h3>
+    </xpath>
+    <xpath expr="(//h3)[3]" position="after">
+        <p>2023</p>
+    </xpath>
+
+    <xpath expr="//div[hasclass('col-lg-3')]" position="attributes">
+        <attribute name="class" add="col-lg-6 pt48 o_animate o_animated o_anim_from_right o_anim_slide_in" remove="col-lg-3" separator=" "/>
+        <attribute name="style" add="--wanim-intensity: 3; animation-delay: 0.3s; animation-name: o_anim_slide_in_right; animation-play-state: running;" separator=";"/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-6')][4]//p" position="replace"/>
+    <xpath expr="(//div[hasclass('col-lg-6')])[4]//p[2]" position="replace" separator=" ">
+        <h3><font class="text-o-color-1">LunaTech Rebrand</font></h3>
+    </xpath>
+    <xpath expr="(//h3)[4]" position="after">
+        <p>2019</p>
     </xpath>
 </template>
 

theme_nano/views/snippets/s_numbers.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_numbers" inherit_id="website.s_numbers">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc5" remove="o_cc1" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-4')]" position="replace"/>
+    <xpath expr="//div[hasclass('col-lg-7')]" position="replace">
+        <div class="col-lg-4 pt24 pb24">
+            <p class="lead" style="text-align: center;">
+                <span class="s_number display-1-fs">50+</span><br/>
+                <span class="h5-fs">Happy customers</span>
+            </p>
+        </div>
+        <div class="col-lg-4 pt24 pb24" style="box-shadow: var(--o-border-color) 1px 0px 0px 0px inset !important;">
+            <p class="lead" style="text-align: center;">
+                <span class="s_number display-1-fs">40h</span><br/>
+                <span class="h5-fs">Average shipping time</span>
+            </p>
+        </div>
+        <div class="col-lg-4 pt24 pb24" style="box-shadow: var(--o-border-color) 1px 0px 0px 0px inset !important;">
+            <p class="lead" style="text-align: center;">
+                <span class="s_number display-1-fs">4.5</span><br/>
+                <span class="h5-fs">Review Rate</span>
+            </p>
+        </div>
+    </xpath>
+</template>
+
+</odoo>

theme_nano/views/snippets/s_parallax.xml

@@ -5,19 +5,10 @@
     <!-- Section -->
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="pt48 pb48" separator=" "/>
-        <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/10", "flip":["x","y"]}</attribute>
+        <attribute name="data-scroll-background-ratio" add="3" remove="1"/>
     </xpath>
-    <!-- Shape -->
-    <xpath expr="//*[hasclass('oe_structure')]" position="before">
-        <div class="o_we_shape o_web_editor_Rainy_10" style="background-image: url('/web_editor/shape/web_editor/Rainy/10.svg?c1=o-color-1&amp;c3=o-color-3&amp;flip=xy'); background-position: 50% 50%;"/>
-    </xpath>
-    <!-- Content -->
-    <xpath expr="//*[hasclass('oe_structure')]" position="inside">
-        <section class="s_title pt40 pb40" data-vcss="001">
-            <div class="container s_allow_columns">
-                <h3 style="text-align: center;"><font class="bg-o-color-5">Feel free to come up with your big idea. <br/> We take care of the rest.</font></h3>
-            </div>
-        </section>
+    <xpath expr="//div[hasclass('o_we_bg_filter')]" position="attributes">
+        <attribute name="class" add="bg-black-25" remove="bg-black-50" separator=" "/>
     </xpath>
 </template>
 

theme_nano/views/snippets/s_references.xml

@@ -6,6 +6,13 @@
     <xpath expr="//section" position="attributes">
         <attribute name="class" add="o_cc5" remove="o_cc1" separator=" "/>
     </xpath>
+    <xpath expr="//div[hasclass('col-lg-12')]" position="replace" mode="inner">
+        <h2 style="text-align: center;">Trusted by industry leaders</h2>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-2')]" position="attributes">
+        <attribute name="class" add="offset-lg-1" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-2')])[6]" position="replace"/>
 </template>
 
 </odoo>

theme_nano/views/snippets/s_references_grid.xml

@@ -4,7 +4,7 @@
 <template id="s_references_grid" inherit_id="website.s_references_grid">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc2" remove="o_cc1" separator=" "/>
+        <attribute name="class" add="o_cc5" remove="o_cc1" separator=" "/>
     </xpath>
     <!-- Row -->
     <xpath expr="//div[hasclass('o_grid_mode')]" position="attributes">
@@ -15,6 +15,25 @@
         <attribute name="class" add="g-height-2" remove="g-height-4" separator=" "/>
         <attribute name="style">grid-area: 2 / 1 / 4 / 6; z-index: 1;</attribute>
     </xpath>
+    <!-- Set images to contain -->
+    <xpath expr="(//div[hasclass('o_grid_item_image')])[1]" position="attributes">
+        <attribute name="class" add="o_grid_item_image_contain" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item_image')])[2]" position="attributes">
+        <attribute name="class" add="o_grid_item_image_contain" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item_image')])[3]" position="attributes">
+        <attribute name="class" add="o_grid_item_image_contain" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item_image')])[4]" position="attributes">
+        <attribute name="class" add="o_grid_item_image_contain" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item_image')])[5]" position="attributes">
+        <attribute name="class" add="o_grid_item_image_contain" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('o_grid_item_image')])[6]" position="attributes">
+        <attribute name="class" add="o_grid_item_image_contain" separator=" "/>
+    </xpath>
 </template>
 
 </odoo>

theme_nano/views/snippets/s_references_social.xml

@@ -3,6 +3,9 @@
 
 <template id="s_references_social" inherit_id="website.s_references_social">
     <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc5" remove="o_cc1" separator=" "/>
+    </xpath>
     <xpath expr="//div[hasclass('row')]/div[2]/h3" position="replace" mode="inner">
         Barbershop
     </xpath>
@@ -15,6 +18,45 @@
     <xpath expr="//div[hasclass('row')]/div[5]/h3" position="replace" mode="inner">
         Hosoren
     </xpath>
+    <!-- Column #1 -->
+    <xpath expr="(//div[hasclass('col-lg-3')])//i[hasclass('fa-facebook')]" position="attributes">
+        <attribute name="class" remove="rounded shadow-sm" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])//i[hasclass('fa-instagram')]" position="attributes">
+        <attribute name="class" remove="rounded shadow-sm" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])//i[hasclass('fa-twitter')]" position="attributes">
+        <attribute name="class" remove="rounded shadow-sm" separator=" "/>
+    </xpath>
+    <!-- Column #2 -->
+    <xpath expr="(//div[hasclass('col-lg-3')])[2]//i[hasclass('fa-facebook')]" position="attributes">
+        <attribute name="class" remove="rounded shadow-sm" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])[2]//i[hasclass('fa-instagram')]" position="attributes">
+        <attribute name="class" remove="rounded shadow-sm" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])[2]//i[hasclass('fa-twitter')]" position="attributes">
+        <attribute name="class" remove="rounded shadow-sm" separator=" "/>
+    </xpath>
+    <!-- Column #3 -->
+    <xpath expr="(//div[hasclass('col-lg-3')])[3]//i[hasclass('fa-facebook')]" position="attributes">
+        <attribute name="class" remove="rounded shadow-sm" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])[3]//i[hasclass('fa-instagram')]" position="attributes">
+        <attribute name="class" remove="rounded shadow-sm" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])[3]//i[hasclass('fa-twitter')]" position="attributes">
+        <attribute name="class" remove="rounded shadow-sm" separator=" "/>
+    </xpath>
+    <!-- Column #4 -->
+    <xpath expr="(//div[hasclass('col-lg-3')])[4]//i[hasclass('fa-facebook')]" position="attributes">
+        <attribute name="class" remove="rounded shadow-sm" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])[4]//i[hasclass('fa-instagram')]" position="attributes">
+        <attribute name="class" remove="rounded shadow-sm" separator=" "/>
+    </xpath>
+    <xpath expr="(//div[hasclass('col-lg-3')])[4]//i[hasclass('fa-twitter')]" position="attributes">
+        <attribute name="class" remove="rounded shadow-sm" separator=" "/>
+    </xpath>
 </template>
-
 </odoo>

theme_nano/views/snippets/s_text_block.xml

@@ -4,11 +4,17 @@
 <template id="s_text_block" inherit_id="website.s_text_block">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc o_cc1 pt96 pb96" remove="pt40 pb40" separator=" "/>
+        <attribute name="class" add="o_cc o_cc5 pt96 pb96" remove="pt40 pb40" separator=" "/>
     </xpath>
-    <!-- Content -->
-    <xpath expr="//*[hasclass('container')]" position="attributes">
-        <attribute name="class" add="o_container_small" remove="container" separator=" "/>
+    <xpath expr="//div[hasclass('container')]" position="replace" mode="inner">
+        <div class="row">
+            <div class="col-12 col-lg-10">
+                <h6><strong><font class="text-o-color-1">OUR APPROACH</font></strong></h6>
+                <p>
+                    <span class="h3-fs">Our approach is rooted in creativity and innovation. What started as a small team has evolved into an agency dedicated to delivering results through strategic thinking and fostering long-term client partnerships.</span>
+                </p>
+            </div>
+        </div>
     </xpath>
 </template>