From 88c8ec0d838ec1961d8a4c361252f27b7a3443d4 Mon Sep 17 00:00:00 2001
From: "Chrysanthe (chgo)" <chgo@odoo.com>
Date: Sun, 14 Jul 2024 17:38:07 +0200
Subject: [PATCH] [IMP] website: review `s_features` snippet templates

The goal of this commit is to review the occurrences of the
default `s_features` snippet across design themes.

task-3657631

Part-of: odoo/design-themes#826
Related: odoo/odoo#163577
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
---
 theme_artists/views/snippets/s_features.xml   |  8 +++--
 theme_aviato/views/snippets/s_features.xml    | 14 ++++-----
 theme_bewise/views/customizations.xml         |  6 ++--
 theme_bistro/views/snippets/s_features.xml    | 18 ++++++------
 theme_buzzy/views/new_page_template.xml       |  2 +-
 theme_buzzy/views/snippets/s_features.xml     |  8 +++--
 theme_clean/views/snippets/s_features.xml     |  6 ++--
 theme_kea/views/snippets/s_features.xml       | 29 +++++++------------
 theme_nano/views/snippets/s_features.xml      | 17 +++++------
 theme_paptic/views/customizations.xml         | 10 ++-----
 theme_treehouse/views/snippets/s_features.xml |  8 ++---
 theme_vehicle/views/customizations.xml        | 14 ++++-----
 theme_zap/views/snippets/s_features.xml       | 29 ++++++++++---------
 13 files changed, 81 insertions(+), 88 deletions(-)

diff --git a/theme_artists/views/snippets/s_features.xml b/theme_artists/views/snippets/s_features.xml
index 68705c594..26b36d00d 100644
--- a/theme_artists/views/snippets/s_features.xml
+++ b/theme_artists/views/snippets/s_features.xml
@@ -13,11 +13,15 @@
     </xpath>
     <!-- Feature #01 - Icon -->
     <xpath expr="//i" position="attributes">
-        <attribute name="class" add="bg-o-color-5" remove="bg-o-color-1" separator=" "/>
+        <attribute name="class" add="bg-o-color-5" remove="bg-o-color-3" separator=" "/>
+    </xpath>
+    <!-- Feature #02 - Icon -->
+    <xpath expr="(//i)[2]" position="attributes">
+        <attribute name="class" add="bg-o-color-5" remove="bg-o-color-3" separator=" "/>
     </xpath>
     <!-- Feature #03 - Icon -->
     <xpath expr="(//i)[3]" position="attributes">
-        <attribute name="class" add="bg-o-color-5" remove="bg-o-color-2" separator=" "/>
+        <attribute name="class" add="bg-o-color-5" remove="bg-o-color-3" separator=" "/>
     </xpath>
 </template>
 
diff --git a/theme_aviato/views/snippets/s_features.xml b/theme_aviato/views/snippets/s_features.xml
index 8fdd30056..89a1003be 100644
--- a/theme_aviato/views/snippets/s_features.xml
+++ b/theme_aviato/views/snippets/s_features.xml
@@ -4,27 +4,27 @@
 <template id="s_features" inherit_id="website.s_features">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt48 pb56" remove="pt32 pb32" separator=" "/>
+        <attribute name="class" add="pt48 pb56" remove="pt64 pb64" separator=" "/>
     </xpath>
     <!-- Titles -->
-    <xpath expr="//div[hasclass('row')]/div[1]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[1]/div/h3" position="replace" mode="inner">
         Hotel Booking
     </xpath>
-    <xpath expr="//div[hasclass('row')]/div[2]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[2]/div/h3" position="replace" mode="inner">
         Flight Booking
     </xpath>
-    <xpath expr="//div[hasclass('row')]/div[3]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[3]/div/h3" position="replace" mode="inner">
         Ticket Booking
     </xpath>
     <!-- Icons -->
     <xpath expr="//div[hasclass('row')]/div[1]/i" position="attributes">
-        <attribute name="class" add="shadow fa-hotel" remove="fa-gear" separator=" "/>
+        <attribute name="class" add="fa-hotel" remove="fa-paper-plane-o" separator=" "/>
     </xpath>
     <xpath expr="//div[hasclass('row')]/div[2]/i" position="attributes">
-        <attribute name="class" add="shadow fa-plane" remove="fa-photo" separator=" "/>
+        <attribute name="class" add="fa-plane" remove="fa-credit-card" separator=" "/>
     </xpath>
     <xpath expr="//div[hasclass('row')]/div[3]/i" position="attributes">
-        <attribute name="class" add="shadow fa-ticket" remove="fa-leaf" separator=" "/>
+        <attribute name="class" add="fa-ticket" remove="fa-flag-o" separator=" "/>
     </xpath>
 </template>
 
diff --git a/theme_bewise/views/customizations.xml b/theme_bewise/views/customizations.xml
index e8db59215..2b6f940ad 100644
--- a/theme_bewise/views/customizations.xml
+++ b/theme_bewise/views/customizations.xml
@@ -307,13 +307,13 @@
 <template id="s_features" inherit_id="website.s_features" name="Be Wise s_features">
     <!-- Icons -->
     <xpath expr="//i" position="attributes">
-        <attribute name="class" add="bg-o-color-4" remove="bg-o-color-1" separator=" "/>
+        <attribute name="class" add="bg-o-color-4" remove="bg-o-color-3" separator=" "/>
     </xpath>
     <xpath expr="(//i)[2]" position="attributes">
-        <attribute name="class" add="bg-o-color-4" remove="bg-o-color-5" separator=" "/>
+        <attribute name="class" add="bg-o-color-4" remove="bg-o-color-3" separator=" "/>
     </xpath>
     <xpath expr="(//i)[3]" position="attributes">
-        <attribute name="class" add="bg-o-color-4" remove="bg-o-color-2" separator=" "/>
+        <attribute name="class" add="bg-o-color-4" remove="bg-o-color-3" separator=" "/>
     </xpath>
 </template>
 
diff --git a/theme_bistro/views/snippets/s_features.xml b/theme_bistro/views/snippets/s_features.xml
index e55e09b52..e32ba6529 100644
--- a/theme_bistro/views/snippets/s_features.xml
+++ b/theme_bistro/views/snippets/s_features.xml
@@ -4,32 +4,32 @@
 <template id="s_features" inherit_id="website.s_features">
     <!-- Column #01 -->
     <xpath expr="//i" position="replace">
-        <i class="fa fa-2x fa-coffee rounded-circle bg-primary m-3"/>
+        <i class="fa fa-coffee rounded bg-primary mb-3" role="img"/>
     </xpath>
-    <xpath expr="//h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[1]/div/h3" position="replace" mode="inner">
         Breakfast
     </xpath>
-    <xpath expr="//p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]//p" position="replace" mode="inner">
         Help you start your morning right.<br/><small>From <b>7:30 am</b> to <b>10:30 am</b></small>
     </xpath>
     <!-- Column #02 -->
     <xpath expr="(//i)[2]" position="replace">
-        <i class="fa fa-2x fa-cutlery rounded-circle bg-400 m-3"/>
+        <i class="fa fa-cutlery rounded bg-primary mb-3" role="img"/>
     </xpath>
-    <xpath expr="(//h3)[2]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[2]/div/h3" position="replace" mode="inner">
         Lunch
     </xpath>
-    <xpath expr="(//p)[2]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[2]/div/p" position="replace" mode="inner">
         Take a break from your busy schedule.<br/><small>From <b>11:30 am</b> to <b>2:30 pm</b></small>
     </xpath>
     <!-- Column #03 -->
     <xpath expr="(//i)[3]" position="replace">
-        <i class="fa fa-2x fa-glass rounded-circle bg-secondary m-3"/>
+        <i class="fa fa-glass rounded bg-primary mb-3" role="img"/>
     </xpath>
-    <xpath expr="(//h3)[3]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[3]/div/h3" position="replace" mode="inner">
         Dinner
     </xpath>
-    <xpath expr="(//p)[3]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[3]/div/p" position="replace" mode="inner">
         Enjoy tasty food with friends.<br/><small>From <b>6:30 pm</b> to <b>10:30 pm</b></small>
     </xpath>
 </template>
diff --git a/theme_buzzy/views/new_page_template.xml b/theme_buzzy/views/new_page_template.xml
index 9dbea1f6b..fa5e7cd98 100644
--- a/theme_buzzy/views/new_page_template.xml
+++ b/theme_buzzy/views/new_page_template.xml
@@ -68,7 +68,7 @@
 
 <template id="new_page_template_s_features" inherit_id="website.new_page_template_s_features">
     <xpath expr="//div[hasclass('row')]//div[3]//i" position="attributes">
-        <attribute name="class" add="bg-o-color-2" remove="bg-o-color-1" separator=" "/>
+        <attribute name="class" add="bg-o-color-2" remove="bg-o-color-3" separator=" "/>
     </xpath>
 </template>
 
diff --git a/theme_buzzy/views/snippets/s_features.xml b/theme_buzzy/views/snippets/s_features.xml
index f0eee6531..ddc1414ca 100644
--- a/theme_buzzy/views/snippets/s_features.xml
+++ b/theme_buzzy/views/snippets/s_features.xml
@@ -11,13 +11,17 @@
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_web_editor_Rainy_09_001"/>
     </xpath>
+    <!-- Feature #1 - Icon -->
+    <xpath expr="//div[hasclass('row')]//div[1]//i" position="attributes">
+        <attribute name="class" add="bg-o-color-1" remove="bg-o-color-3" separator=" "/>
+    </xpath>
     <!-- Feature #2 - Icon -->
     <xpath expr="//div[hasclass('row')]//div[2]//i" position="attributes">
-        <attribute name="class" add="bg-o-color-1" remove="bg-o-color-5" separator=" "/>
+        <attribute name="class" add="bg-o-color-1" remove="bg-o-color-3" separator=" "/>
     </xpath>
     <!-- Feature #3 - Icon -->
     <xpath expr="//div[hasclass('row')]//div[3]//i" position="attributes">
-        <attribute name="class" add="bg-o-color-1" remove="bg-o-color-2" separator=" "/>
+        <attribute name="class" add="bg-o-color-1" remove="bg-o-color-3" separator=" "/>
     </xpath>
 </template>
 
diff --git a/theme_clean/views/snippets/s_features.xml b/theme_clean/views/snippets/s_features.xml
index 60bcfafda..1dc5ef77f 100644
--- a/theme_clean/views/snippets/s_features.xml
+++ b/theme_clean/views/snippets/s_features.xml
@@ -8,7 +8,7 @@
     </xpath>
     <!-- First column : icon -->
     <xpath expr="//div[hasclass('row')]//div//i" position="attributes">
-        <attribute name="class" add="bg-o-color-4 fa-shield" remove="bg-o-color-1 fa-gear" separator=" "/>
+        <attribute name="class" add="bg-o-color-4 fa-shield" remove="bg-o-color-3 fa-paper-plane-o" separator=" "/>
     </xpath>
     <!-- First column : title -->
     <xpath expr="//div[hasclass('row')]//div//h3" position="replace" mode="inner">
@@ -16,7 +16,7 @@
     </xpath>
     <!-- Second column : icon -->
     <xpath expr="//div[hasclass('row')]//div[2]//i" position="attributes">
-        <attribute name="class" add="bg-o-color-1 fa-laptop" remove="bg-o-color-5 fa-photo" separator=" "/>
+        <attribute name="class" add="bg-o-color-4 fa-laptop" remove="bg-o-color-3 fa-credit-card" separator=" "/>
     </xpath>
     <!-- Second column : title -->
     <xpath expr="//div[hasclass('row')]//div[2]//h3" position="replace" mode="inner">
@@ -24,7 +24,7 @@
     </xpath>
     <!-- Third column : icon -->
     <xpath expr="//div[hasclass('row')]//div[3]//i" position="attributes">
-        <attribute name="class" add="fa-star" remove="fa-leaf" separator=" "/>
+        <attribute name="class" add="bg-o-color-4 fa-star" remove="bg-o-color-3 fa-flag-o" separator=" "/>
     </xpath>
     <!-- Third column : title -->
     <xpath expr="//div[hasclass('row')]//div[3]//h3" position="replace" mode="inner">
diff --git a/theme_kea/views/snippets/s_features.xml b/theme_kea/views/snippets/s_features.xml
index 8432edfdb..c3b7c2b33 100644
--- a/theme_kea/views/snippets/s_features.xml
+++ b/theme_kea/views/snippets/s_features.xml
@@ -4,45 +4,36 @@
 <template id="s_features" inherit_id="website.s_features">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc2 pt48 pb64" remove="pt32 pb32" separator=" "/>
+        <attribute name="class" add="o_cc2 pt48" remove="pt64" separator=" "/>
     </xpath>
     <!-- Column #01 -->
-    <xpath expr="//div[hasclass('row')]/div[1]" position="attributes">
-        <attribute name="class" add="o_cc o_cc1 pt48 pb48" remove="pt32 pb32" separator=" "/>
-    </xpath>
     <xpath expr="//div[hasclass('row')]/div[1]/i" position="replace">
-        <i class="fa fa-2x fa-image bg-o-color-1 m-3 rounded-circle"/>
+        <i class="s_features_icon fa fa-image mb-3 rounded fs-5" role="img"/>
     </xpath>
-    <xpath expr="//div[hasclass('row')]/div[1]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[1]/div/h3" position="replace" mode="inner">
         <b>Stunning visuals</b>
     </xpath>
-    <xpath expr="//div[hasclass('row')]/div[1]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[1]/div/p" position="replace" mode="inner">
         Tell what's the value for the customer for this feature.
     </xpath>
     <!-- Column #02 -->
-    <xpath expr="//div[hasclass('row')]/div[2]" position="attributes">
-        <attribute name="class" add="o_cc o_cc1 pt48 pb48" remove="pt32 pb32" separator=" "/>
-    </xpath>
     <xpath expr="//div[hasclass('row')]/div[2]/i" position="replace">
-        <i class="fa fa-2x fa-eye bg-o-color-5 m-3 rounded-circle"/>
+        <i class="s_features_icon fa fa-eye mb-3 rounded fs-5" role="img"/>
     </xpath>
-    <xpath expr="//div[hasclass('row')]/div[2]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[2]/div/h3" position="replace" mode="inner">
         <b>360-degree vision</b>
     </xpath>
-    <xpath expr="//div[hasclass('row')]/div[2]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[2]/div/p" position="replace" mode="inner">
         Write what the customer would like to know, not what you want to show.
     </xpath>
     <!-- Column #03 -->
-    <xpath expr="//div[hasclass('row')]/div[3]" position="attributes">
-        <attribute name="class" add="o_cc o_cc1 pt48 pb48" remove="pt32 pb32" separator=" "/>
-    </xpath>
     <xpath expr="//div[hasclass('row')]/div[3]/i" position="attributes">
-        <attribute name="class" add="fa-2x fa-microphone rounded-circle" remove="fa-3x fa-leaf rounded" separator=" "/>
+        <attribute name="class" add="fa-microphone" remove="fa-flag-o" separator=" "/>
     </xpath>
-    <xpath expr="//div[hasclass('row')]/div[3]/h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[3]/div/h3" position="replace" mode="inner">
         <b>Built in mic</b>
     </xpath>
-    <xpath expr="//div[hasclass('row')]/div[3]/p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[3]/div/p" position="replace" mode="inner">
         A small explanation of this great feature, in clear words.
     </xpath>
 </template>
diff --git a/theme_nano/views/snippets/s_features.xml b/theme_nano/views/snippets/s_features.xml
index 203cbf6d5..982a75118 100644
--- a/theme_nano/views/snippets/s_features.xml
+++ b/theme_nano/views/snippets/s_features.xml
@@ -4,34 +4,31 @@
 <template id="s_features" inherit_id="website.s_features">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt40 pb48 o_cc o_cc5" remove="pt32 pb32" separator=" "/>
+        <attribute name="class" add="pt40 pb48 o_cc o_cc5" remove="pt64 pb64" separator=" "/>
         <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/12"}</attribute>
     </xpath>
     <xpath expr="//*[hasclass('container')]" position="before">
         <div class="o_we_shape o_web_editor_Floats_12"/>
     </xpath>
     <!-- Column #01 -->
-    <xpath expr="//h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[1]/div/h3" position="replace" mode="inner">
         Intuitive
     </xpath>
-    <xpath expr="//p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[1]/div/p" position="replace" mode="inner">
         We create easy-to-use products.
     </xpath>
     <!-- Column #02 -->
-    <xpath expr="(//i)[2]" position="attributes">
-        <attribute name="class" add="bg-o-color-4" remove="bg-o-color-5" separator=" "/>
-    </xpath>
-    <xpath expr="(//h3)[2]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[2]/div/h3" position="replace" mode="inner">
         Adaptable
     </xpath>
-    <xpath expr="(//p)[2]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[2]/div/p" position="replace" mode="inner">
         We build modular solutions.
     </xpath>
     <!-- Column #03 -->
-    <xpath expr="(//h3)[3]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[3]/div/h3" position="replace" mode="inner">
         Durable
     </xpath>
-    <xpath expr="(//p)[3]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[3]/div/p" position="replace" mode="inner">
         We craft long-lasting goods.
     </xpath>
 </template>
diff --git a/theme_paptic/views/customizations.xml b/theme_paptic/views/customizations.xml
index bb4d6e3e4..4d2403679 100644
--- a/theme_paptic/views/customizations.xml
+++ b/theme_paptic/views/customizations.xml
@@ -377,22 +377,16 @@
     </xpath>
     <!-- Column #1 -->
     <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
-        <attribute name="class" add="o_cc o_cc4" separator=" "/>
+        <attribute name="class" add="o_cc o_cc2" separator=" "/>
     </xpath>
     <!-- Column #2 -->
     <xpath expr="//div[hasclass('col-lg-4')][2]" position="attributes">
-        <attribute name="class" add="o_cc o_cc3" separator=" "/>
-    </xpath>
-    <xpath expr="//div[hasclass('col-lg-4')][2]/i" position="attributes">
-        <attribute name="class" add="bg-o-color-2" remove="bg-o-color-5" separator=" "/>
+        <attribute name="class" add="o_cc o_cc2" separator=" "/>
     </xpath>
     <!-- Column #3 -->
     <xpath expr="//div[hasclass('col-lg-4')][3]" position="attributes">
         <attribute name="class" add="o_cc o_cc2" separator=" "/>
     </xpath>
-    <xpath expr="//div[hasclass('col-lg-4')][3]/i" position="attributes">
-        <attribute name="class" add="bg-o-color-3" remove="bg-o-color-2" separator=" "/>
-    </xpath>
 </template>
 
 <!-- ==== Media List ===== -->
diff --git a/theme_treehouse/views/snippets/s_features.xml b/theme_treehouse/views/snippets/s_features.xml
index 06c03b054..15bd18260 100644
--- a/theme_treehouse/views/snippets/s_features.xml
+++ b/theme_treehouse/views/snippets/s_features.xml
@@ -4,17 +4,17 @@
 <template id="s_features" inherit_id="website.s_features">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt48 pb48" remove="pt32 pb32" separator=" "/>
+        <attribute name="class" add="pt48 pb48" remove="pt64 pb64" separator=" "/>
     </xpath>
     <!-- Icons -->
     <xpath expr="(//i)[1]" position="attributes">
-        <attribute name="class" add="fa-2x fa-leaf m-4 rounded-circle" remove="fa-3x fa-gear m-3 rounded" separator=" "/>
+        <attribute name="class" add="fa-leaf mb-4 rounded-circle" remove="fa-paper-plane-o mb-3 rounded" separator=" "/>
     </xpath>
     <xpath expr="(//i)[2]" position="attributes">
-        <attribute name="class" add="fa-2x fa-flash m-4 rounded-circle" remove="fa-3x fa-photo m-3 rounded" separator=" "/>
+        <attribute name="class" add="fa-flash mb-4 rounded-circle" remove="fa-credit-card mb-3 rounded" separator=" "/>
     </xpath>
     <xpath expr="(//i)[3]" position="attributes">
-        <attribute name="class" add="fa-2x fa-tint m-4 rounded-circle" remove="fa-3x fa-leaf m-3 rounded" separator=" "/>
+        <attribute name="class" add="fa-tint mb-4 rounded-circle" remove="fa-flag-o mb-3 rounded" separator=" "/>
     </xpath>
 </template>
 
diff --git a/theme_vehicle/views/customizations.xml b/theme_vehicle/views/customizations.xml
index bfe9aa6f0..9ff57e85f 100644
--- a/theme_vehicle/views/customizations.xml
+++ b/theme_vehicle/views/customizations.xml
@@ -233,33 +233,33 @@
 <!-- ======== FEATURES ======== -->
 <template id="s_features" inherit_id="website.s_features">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc1" remove="o_cc2 pt32 pb32 bg-200" separator=" "/>
+        <attribute name="class" add="o_cc1" remove="pt64 pb64" separator=" "/>
     </xpath>
     <!-- Left block -->
     <!-- Icon -->
     <xpath expr="//i" position="attributes">
-        <attribute name="class" add="fa-automobile" remove="fa-gear" separator=" "/>
+        <attribute name="class" add="fa-automobile" remove="fa-paper-plane-o" separator=" "/>
     </xpath>
     <!-- Title -->
-    <xpath expr="//h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[1]/div/h3" position="replace" mode="inner">
         Top Speed
     </xpath>
     <!-- Center block -->
     <!-- Icon -->
     <xpath expr="(//i)[2]" position="attributes">
-        <attribute name="class" add="fa-battery-full" remove="fa-photo" separator=" "/>
+        <attribute name="class" add="fa-battery-full" remove="fa-credit-card" separator=" "/>
     </xpath>
     <!-- Title -->
-    <xpath expr="(//h3)[2]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[2]/div/h3" position="replace" mode="inner">
         Long Range
     </xpath>
     <!-- Right block -->
     <!-- Icon -->
     <xpath expr="(//i)[3]" position="attributes">
-        <attribute name="class" add="fa-cog" remove="fa-leaf" separator=" "/>
+        <attribute name="class" add="fa-cog" remove="fa-flag-o" separator=" "/>
     </xpath>
     <!-- Title -->
-    <xpath expr="(//h3)[3]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[3]/div/h3" position="replace" mode="inner">
         Dual Motor
     </xpath>
 </template>
diff --git a/theme_zap/views/snippets/s_features.xml b/theme_zap/views/snippets/s_features.xml
index 9846884ab..45ee19bed 100644
--- a/theme_zap/views/snippets/s_features.xml
+++ b/theme_zap/views/snippets/s_features.xml
@@ -4,48 +4,51 @@
 <template id="s_features" inherit_id="website.s_features">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="o_cc o_cc2 pt80 pb80" remove="pt32 pb32" separator=" "/>
+        <attribute name="class" add="o_cc o_cc2 pt80 pb80" remove="pt64 pb64" separator=" "/>
     </xpath>
     <!-- Column #01 -->
     <xpath expr="//*[hasclass('row')]/*[1]" position="attributes">
-        <attribute name="class" add="o_cc o_cc1 rounded" separator=" "/>
+        <attribute name="class" add="o_cc o_cc1 pt32 pb32 rounded text-center" separator=" "/>
         <attribute name="style" add="box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px !important;" separator=" "/>
     </xpath>
+    <xpath expr="//div[hasclass('row')]/div[1]/div[hasclass('s_hr')]" position="replace"/>
     <xpath expr="//i" position="replace">
-        <i class="fa fa-2x fa-lock bg-o-color-1 m-3 rounded-circle"/>
+        <i class="s_features_icon d-block mx-auto fa fa-2x fa-lock bg-o-color-1 mb-3 rounded-circle" role="img"/>
     </xpath>
-    <xpath expr="//h3" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[1]/div/h3" position="replace" mode="inner">
         Security
     </xpath>
-    <xpath expr="//p" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[1]/div/p" position="replace" mode="inner">
         We keep you safe <br/>in the cloud.
     </xpath>
     <!-- Column #02 -->
     <xpath expr="//*[hasclass('row')]/*[2]" position="attributes">
-        <attribute name="class" add="o_cc o_cc1 rounded" separator=" "/>
+        <attribute name="class" add="o_cc o_cc1 pt32 pb32 rounded text-center" separator=" "/>
         <attribute name="style" add="box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px !important;" separator=" "/>
     </xpath>
+    <xpath expr="//div[hasclass('row')]/div[2]/div[hasclass('s_hr')]" position="replace"/>
     <xpath expr="(//i)[2]" position="replace">
-        <i class="fa fa-2x fa-file-text bg-o-color-5 m-3 rounded-circle"/>
+        <i class="s_features_icon d-block mx-auto fa fa-2x fa-file-text bg-o-color-1 mb-3 rounded-circle" role="img"/>
     </xpath>
-    <xpath expr="(//h3)[2]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[2]/div/h3" position="replace" mode="inner">
         Support
     </xpath>
-    <xpath expr="(//p)[2]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[2]/div/p" position="replace" mode="inner">
         All types of files <br/>are allowed.
     </xpath>
     <!-- Column #03 -->
     <xpath expr="//*[hasclass('row')]/*[3]" position="attributes">
-        <attribute name="class" add="o_cc o_cc1 rounded" separator=" "/>
+        <attribute name="class" add="o_cc o_cc1 pt32 pb32 rounded text-center" separator=" "/>
         <attribute name="style" add="box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px 0px !important;" separator=" "/>
     </xpath>
+    <xpath expr="//div[hasclass('row')]/div[3]/div[hasclass('s_hr')]" position="replace"/>
     <xpath expr="(//i)[3]" position="replace">
-        <i class="fa fa-2x fa-leaf bg-secondary m-3 rounded-circle"/>
+        <i class="s_features_icon d-block mx-auto fa fa-2x fa-leaf bg-o-color-1 mb-3 rounded-circle" role="img"/>
     </xpath>
-    <xpath expr="(//h3)[3]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[3]/div/h3" position="replace" mode="inner">
         Eco-Friendly
     </xpath>
-    <xpath expr="(//p)[3]" position="replace" mode="inner">
+    <xpath expr="//div[hasclass('row')]/div[3]/div/p" position="replace" mode="inner">
         All our data centers <br/>are emission-free.
     </xpath>
 </template>