From 1a39e97117c04e3c4d2a671a846ca5226309f256 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Fri, 27 Feb 2026 10:57:19 +0100
Subject: [PATCH 1/5] [T3011] FIX: gifts & donations page + minor footer change

- FIX: made donation item on donation page clickable, while keeping the download payment option separate
- FIX: added padding and uniform border radius to donation item
- FIX: added minimal padding to donation details icons
- FIX: tweaked colors (in the aim of adding more contrast) to gift packages in the gift basket
- FIX: icons in the themed button are now centered both vertically and horizontally
- FIX: aligned the icons in the footer
---
 .../static/src/css/my2_donation_item.css      |   3 +-
 .../components/my2_donation_item.xml          | 145 +++++++++---------
 .../templates/pages/my2_donation_details.xml  |   4 +-
 .../templates/pages/my2_gift_package.xml      |  14 +-
 .../components/buttons/ThemedButton.xml       |   4 +-
 theme_compassion_2025/views/footer.xml        |   2 +-
 6 files changed, 85 insertions(+), 87 deletions(-)

diff --git a/my_compassion/static/src/css/my2_donation_item.css b/my_compassion/static/src/css/my2_donation_item.css
index 64ee9a5c8..cc53d1a14 100644
--- a/my_compassion/static/src/css/my2_donation_item.css
+++ b/my_compassion/static/src/css/my2_donation_item.css
@@ -1,5 +1,4 @@
 .donation-item-container {
-    border-left: 5px solid;
     container-type: inline-size;
     container-name: donation-item-container;
     font-size: 18px;
@@ -16,6 +15,8 @@
 
 .donation-item-container .action-button {
     cursor: pointer;
+    position: relative;
+    z-index: 1;
 }
 
 .donation-item-container .action-button:hover span {
diff --git a/my_compassion/templates/components/my2_donation_item.xml b/my_compassion/templates/components/my2_donation_item.xml
index c53cd7f49..274371c28 100644
--- a/my_compassion/templates/components/my2_donation_item.xml
+++ b/my_compassion/templates/components/my2_donation_item.xml
@@ -37,16 +37,25 @@
     <!-- DONATION ITEM BUTTON -->
     <template id="DonationItemButton" name="Donation Item Button">
         <t t-set="color" t-value="button.get('color') or 'dark-blue'" />
-        <t t-if="button.get('action') == 'link'" t-set="onclick" t-valuef="location.href='#{button.get('href')}'" />
+        <t
+            t-if="button.get('action') == 'link'"
+            t-set="onclick"
+            t-valuef="event.stopPropagation(); location.href='#{button.get('href')}'"
+        />
         <t
             t-elif="button.get('action') == 'event'"
             t-set="onclick"
-            t-valuef="this.dispatchEvent(new CustomEvent('#{button.get('custom_event')}', {bubbles: true, detail: #{button.get('detail')}}))"
+            t-valuef="event.stopPropagation(); this.dispatchEvent(new CustomEvent('#{button.get('custom_event')}', {bubbles: true, detail: #{button.get('detail')}}))"
         />
         <div t-attf-class="action-button #{button_top_class}" t-att-onclick="onclick">
-            <i t-if="button.get('icon')" t-attf-class="tiny-text icon-#{button.get('icon')} text-#{color}" />
-            <i t-if="button.get('pictogram')" t-attf-class="tiny-text #{button.get('pictogram')} text-#{color}" />
-            <span t-if="button.get('label')" t-attf-class="tiny-text bold text-#{color}">
+            <i
+                t-if="button.get('icon')"
+                t-attf-class="{{'' if large_icon else 'tiny-text'}} icon-#{button.get('icon')} text-#{color}"
+            />
+            <span
+                t-if="button.get('label')"
+                t-attf-class="tiny-text {{'font-italic' if large_icon else ''}} bold text-#{color}"
+            >
                 <t t-esc="button.get('label')" />
             </span>
         </div>
@@ -72,22 +81,31 @@
                 t-attf-style="--image_url: url('#{image}');"
             />
         </t>
+        <t t-set="redirect_link" t-value="redirect_link or ''" />
+        <t t-set="redirect_label" t-value="redirect_label or ''" />
+        <!-- Donation item container -->
         <div
-            t-attf-class="donation-item-container p-2 d-flex rounded-lg bg-#{bg_color} border-#{accent_color} #{top_class}"
+            t-attf-class="donation-item-container d-flex bg-#{bg_color} border-#{accent_color} #{top_class} position-relative rounded-pill padding-pill"
             t-attf-style="min-width: #{min_width}"
         >
+            <t t-if="redirect_link">
+                <a t-attf-href="{{redirect_link}}" class="stretched-link" t-attf-aria-label="{{redirect_label}}" />
+            </t>
             <div
                 t-attf-class="thumbnail responsive-lg mr-3 flex-shrink-0 rounded-lg #{not image and image_fallback_pictogram or ''}"
                 t-attf-style="--image_url: url('#{image}');"
             />
+            <!-- Donation details -->
             <t t-if="not primary_button" t-raw="small_thumbnail_content" />
             <div class="w-100 d-flex flex-column justify-content-between">
+                <!-- Donation Title -->
                 <div class="d-flex align-items-start">
                     <t t-if="primary_button" t-raw="small_thumbnail_content" />
                     <div class="flex-grow-1 d-flex flex-column">
                         <div t-attf-class="text-#{title_color} body-large bold">
                             <t t-esc="name" />
                         </div>
+                        <!-- Donation recipient -->
                         <div t-if="recipient" t-attf-class="text-#{recipient_color} body-small bold">
                             To
                             <t t-esc="recipient" />
@@ -102,11 +120,13 @@
                         </t>
                     </t>
                 </div>
+                <!-- Donation edit -->
                 <div t-attf-class="mt-2 d-flex justify-content-#{'between' if primary_button else 'end'}">
                     <t t-if="primary_button" t-call="my_compassion.DonationItemButton">
                         <t t-set="button" t-value="primary_button" />
                     </t>
-                    <div t-attf-class="text-#{price_color} ">
+                    <!-- Donation price -->
+                    <div t-attf-class="text-#{price_color} lead">
                         <t t-esc="currency_name" />
                         <t t-if="price % 1 == 0" t-set="price" t-value="'{0}.-'.format(int(price))" />
                         <t t-else="" t-set="price" t-value="'{0:.2f}'.format(price)" />
@@ -122,84 +142,59 @@
         </div>
     </template>
     <template id="SponsorshipDonationItem" name="Sponsorship Donation Item">
-        <t t-set="label_see_profile">See profile</t>
-        <t t-set="label_see_more">See more</t>
-        <t t-if="sponsorship.type == 'CSP'">
-            <t t-set="product_template" t-value="sponsorship.contract_line_ids[:1].product_id.product_tmpl_id" />
-            <t t-if="product_template">
-                <t t-set="csp_my_compassion_name" t-value="product_template.my_compassion_name" />
-                <t t-set="csp_thanks_name" t-value="product_template.thanks_name" />
-                <t t-set="csp_default_name">Compassion survival program</t>
-                <t t-set="displayed_title" t-value="csp_my_compassion_name or csp_thanks_name or csp_default_name" />
-                <t
-                    t-set="image_fallback_pictogram"
-                    t-value="product_template.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general'"
-                />
-                <t t-if="product_template.is_published">
-                    <t t-set="displayed_image" t-value="website.image_url(product_template, 'my_compassion_image')" />
-                    <t
-                        t-set="primary_button_data"
-                        t-value="{
-                'label': label_see_more,
-                'pictogram': product_template.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general',
-                'action': 'link',
-                'href': '/my2/gifts/' + str(product_template.id),
-                'color': 'low-blue'
-            }"
-                    />
-                </t>
-                <t
-                    t-set="secondary_buttons_data"
-                    t-value="[
-                {
-                    'icon': 'download01',
-                    'color': 'low-blue',
-                    'action': 'link',
-                    'href': '/my/download/csp_bvr?csp_id=' + str(sponsorship.id),
-                }
-            ]"
-                />
-            </t>
-        </t>
-        <t t-else="">
-            <t t-set="image_fallback_pictogram" t-value="'pictogram-child-sponsorship'" />
-            <t t-set="displayed_title" t-value="sponsorship.child_id.preferred_name" />
-            <t t-set="displayed_image" t-valuef="/web/image/compassion.child/#{sponsorship.child_id.id}/portrait" />
-            <t
-                t-set="primary_button_data"
-                t-value="{
-            'label': label_see_profile,
-            'pictogram': 'pictogram-child-sponsorship',
-            'action': 'link',
-            'href': '/my2/children/' + str(sponsorship.child_id.id),
-            'color': 'low-blue'
-        }"
-            />
+        <t t-set="is_csp" t-value="sponsorship.type == 'CSP'" />
+        <!-- is Compassion Survival Program ? -->
+        <t t-set="pt" t-value="is_csp and sponsorship.contract_line_ids[:1].product_id.product_tmpl_id" />
+        <!-- product template -->
+        <t
+            t-set="name"
+            t-value="pt.my_compassion_name or pt.thanks_name or 'Compassion survival program' if is_csp else sponsorship.child_id.preferred_name"
+        />
+        <t
+            t-set="image"
+            t-value="website.image_url(pt, 'my_compassion_image') if is_csp else '/web/image/compassion.child/%s/portrait' % sponsorship.child_id.id"
+        />
+        <t
+            t-set="pictogram"
+            t-value="(pt.my_compassion_pictogram.class_name or 'pictogram-gift-donation-general') if is_csp else 'pictogram-child-sponsorship'"
+        />
+        <t t-set="href" t-value="'/my2/gifts/%s' % pt.id if is_csp else '/my2/children/%s' % sponsorship.child_id.id" />
+        <!-- donations page or child profile page -->
+        <t t-call="my_compassion.DonationItemComponent">
+            <t t-set="image_fallback_pictogram" t-value="pictogram" />
+            <t t-set="name" t-value="name" />
+            <t t-set="image" t-value="image if not is_csp else ''" />
+            <t t-set="subtext" t-value="sponsorship.payment_mode_id.display_name" />
+            <t t-set="price" t-value="sponsorship.total_amount" />
             <t
-                t-set="secondary_buttons_data"
-                t-value="[
-            {
+                t-set="secondary_buttons"
+                t-value="[{
                 'icon': 'download01',
                 'color': 'low-blue',
                 'action': 'link',
-                'href': '/my/download/gift_bvr?child_id=' + str(sponsorship.child_id.id),
-            }
-        ]"
+                'href': ('/my/download/csp_bvr?csp_id=%s' % sponsorship.id) if is_csp else ('/my/download/gift_bvr?child_id=%s' % sponsorship.child_id.id),
+            }]"
             />
-        </t>
-        <t t-call="my_compassion.DonationItemComponent">
-            <t t-set="image_fallback_pictogram" t-value="image_fallback_pictogram" />
-            <t t-set="name" t-value="displayed_title" />
-            <t t-set="image" t-value="displayed_image" />
-            <t t-set="subtext" t-value="sponsorship.payment_mode_id.display_name" />
-            <t t-set="price" t-value="sponsorship.total_amount" />
-            <t t-set="primary_button" t-value="primary_button_data" />
-            <t t-set="secondary_buttons" t-value="secondary_buttons_data" />
             <t t-set="monthly_noabbr" t-value="True" />
             <t t-set="bg_color" t-value="'light-blue'" />
             <t t-set="accent_color" t-value="'low-blue'" />
             <t t-set="title_color" t-value="'low-blue'" />
             <t t-set="price_color" t-value="'low-blue'" />
+            <t t-set="large_icon" t-value="True" />
+            <t t-if="not is_csp">
+                <t
+                    t-set="primary_button"
+                    t-value="{
+                'label': 'Click to see profile',
+                'pictogram': pictogram,
+                'action': 'link',
+                'href': href,
+                'color': 'low-blue'
+                }"
+                />
+                <t t-set="redirect_link" t-value="href" />
+                <t t-set="redirect_label" t-value="'See child profile'" />
+            </t>
         </t>
     </template>
 </odoo>
diff --git a/my_compassion/templates/pages/my2_donation_details.xml b/my_compassion/templates/pages/my2_donation_details.xml
index b7bff7a43..1b905961c 100644
--- a/my_compassion/templates/pages/my2_donation_details.xml
+++ b/my_compassion/templates/pages/my2_donation_details.xml
@@ -48,7 +48,7 @@
                                 <div class="mt-3 ml-4 body-standard text-mid-brown">The reality...</div>
                                 <t t-foreach="product.my_compassion_impact_before_ids" t-as="line">
                                     <div class="mt-2 d-flex">
-                                        <i class="mr-2 icon-alert-circle text-mid-brown flex-shrink-0" />
+                                        <i class="mr-2 icon-alert-circle text-mid-brown flex-shrink-0 mt-1" />
                                         <t t-esc="line.description" />
                                     </div>
                                 </t>
@@ -58,7 +58,7 @@
                                 <div class="mt-3 ml-4 body-standard text-mid-green">With your help we can...</div>
                                 <t t-foreach="product.my_compassion_impact_after_ids" t-as="line">
                                     <div class="mt-2 d-flex">
-                                        <i class="mr-2 icon-check-heart text-mid-green flex-shrink-0" />
+                                        <i class="mr-2 icon-check-heart text-mid-green flex-shrink-0 mt-1" />
                                         <t t-esc="line.description" />
                                     </div>
                                 </t>
diff --git a/my_compassion/templates/pages/my2_gift_package.xml b/my_compassion/templates/pages/my2_gift_package.xml
index bdcdc3427..67dbbd458 100644
--- a/my_compassion/templates/pages/my2_gift_package.xml
+++ b/my_compassion/templates/pages/my2_gift_package.xml
@@ -29,9 +29,9 @@
                 <t t-if="line.is_gift" t-set="recipient" t-value="line.gift_recipient_id.preferred_name" />
                 <t t-set="title_color" t-value="'low-black'" />
                 <t t-set="accent_color" t-value="'mid-green'" />
-                <t t-set="price_color" t-value="'low-green'" />
-                <t t-set="recipient_color" t-value="'low-green'" />
-                <t t-set="bg_color" t-value="'mid-eggshell'" />
+                <t t-set="price_color" t-value="'mid-green'" />
+                <t t-set="recipient_color" t-value="'mid-green'" />
+                <t t-set="bg_color" t-value="'low-eggshell'" />
                 <t t-set="price" t-value="line.price_total" />
                 <t t-set="currency_name" t-value="line.currency_id.name" />
                 <t
@@ -41,7 +41,7 @@
                 <t t-set="_txt_Edit_Details_1">Edit Details</t>
                 <t
                     t-set="primary_button"
-                    t-value="{'icon': 'edit05', 'label': _txt_Edit_Details_1, 'color': 'low-green', 'action': 'event', 'custom_event': 'donation-item:edit', 'detail': {'order_line_id': line.id}}"
+                    t-value="{'icon': 'edit05', 'label': _txt_Edit_Details_1, 'color': 'mid-green', 'action': 'event', 'custom_event': 'donation-item:edit', 'detail': {'order_line_id': line.id}}"
                 />
                 <t
                     t-set="secondary_buttons"
@@ -107,10 +107,10 @@
         <!-- TOTAL AMOUNT -->
         <div
             t-if="len(order.order_line) &gt;= 1"
-            class="mt-5 px-3 pt-3 pb-2 w-100 rounded-lg bg-light-green d-flex justify-content-between"
+            class="mt-5 w-100 bg-light-green d-flex justify-content-between rounded-pill padding-pill"
         >
-            <div class="text-mid-green body-large bold">Total amount</div>
-            <div class="text-dark-blue body-large bold">
+            <div class="text-off-black body-large bold">Total amount</div>
+            <div class="text-off-black body-large bold d-flex align-items-center m-0">
                 <t t-set="amount" t-value="order.amount_total" />
                 <t t-esc="order.currency_id.name" />
                 <t t-if="amount % 1 == 0" t-esc="int(amount)" />
diff --git a/theme_compassion_2025/templates/components/buttons/ThemedButton.xml b/theme_compassion_2025/templates/components/buttons/ThemedButton.xml
index fbe7a4a59..707e10d55 100644
--- a/theme_compassion_2025/templates/components/buttons/ThemedButton.xml
+++ b/theme_compassion_2025/templates/components/buttons/ThemedButton.xml
@@ -36,7 +36,9 @@
 <odoo>
     <template id="ThemedButtonComponent_Content" name="Button Content">
         <t t-if="icon">
-            <span t-attf-class="btn__icon #{'btn__icon--' + variant if label else ''} text-#{icon_color}">
+            <span
+                t-attf-class="btn__icon #{'btn__icon--' + variant if label else ''} text-#{icon_color} d-flex align-items-center justify-content-center"
+            >
                 <i t-att-class="icon" />
             </span>
         </t>
diff --git a/theme_compassion_2025/views/footer.xml b/theme_compassion_2025/views/footer.xml
index 122418f89..e21641e7d 100644
--- a/theme_compassion_2025/views/footer.xml
+++ b/theme_compassion_2025/views/footer.xml
@@ -19,7 +19,7 @@
                                 class="col-12 d-flex flex-column flex-lg-row justify-content-center align-items-center"
                             >
                                 <div
-                                    class="py-1 px-lg-4 d-flex flex-column flex-lg-row align-items-center align-items-lg-start justify-content-center"
+                                    class="py-1 px-lg-4 d-flex flex-column flex-lg-row align-items-center justify-content-center"
                                 >
                                     <div class="mb-1 mb-lg-0 mr-lg-2" style="font-size: 1.2rem;">
                                         <i class="icon-marker-pin01 bg-low-yellow text-primary" />

From 7263667261fcab40801865670da8659dbe22be8d Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Fri, 27 Feb 2026 11:23:51 +0100
Subject: [PATCH 2/5] [T3011] FIX: removed unused pictogram from the
 DonationItemButton

---
 my_compassion/templates/components/my2_donation_item.xml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/my_compassion/templates/components/my2_donation_item.xml b/my_compassion/templates/components/my2_donation_item.xml
index 274371c28..6c09450ea 100644
--- a/my_compassion/templates/components/my2_donation_item.xml
+++ b/my_compassion/templates/components/my2_donation_item.xml
@@ -186,7 +186,6 @@
                     t-set="primary_button"
                     t-value="{
                 'label': 'Click to see profile',
-                'pictogram': pictogram,
                 'action': 'link',
                 'href': href,
                 'color': 'low-blue'

From c36afa6be43088f478679a2271b41447206947db Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Fri, 27 Feb 2026 11:28:35 +0100
Subject: [PATCH 3/5] [T3011] FIX: made donation item href download logic
 easier to follow

---
 my_compassion/templates/components/my2_donation_item.xml | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/my_compassion/templates/components/my2_donation_item.xml b/my_compassion/templates/components/my2_donation_item.xml
index 6c09450ea..74b409d5d 100644
--- a/my_compassion/templates/components/my2_donation_item.xml
+++ b/my_compassion/templates/components/my2_donation_item.xml
@@ -166,13 +166,15 @@
             <t t-set="image" t-value="image if not is_csp else ''" />
             <t t-set="subtext" t-value="sponsorship.payment_mode_id.display_name" />
             <t t-set="price" t-value="sponsorship.total_amount" />
+            <t t-if="is_csp" t-set="download_href" t-valuef="/my/download/csp_bvr?csp_id=#{sponsorship.id}"/>
+            <t t-else="" t-set="download_href" t-valuef="/my/download/gift_bvr?child_id=#{sponsorship.child_id.id}"/>
             <t
                 t-set="secondary_buttons"
                 t-value="[{
                 'icon': 'download01',
                 'color': 'low-blue',
                 'action': 'link',
-                'href': ('/my/download/csp_bvr?csp_id=%s' % sponsorship.id) if is_csp else ('/my/download/gift_bvr?child_id=%s' % sponsorship.child_id.id),
+                'href': download_href,
             }]"
             />
             <t t-set="monthly_noabbr" t-value="True" />

From dd4c208756275c7fce1f46cf9738d2d4e4684915 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Fri, 27 Feb 2026 11:31:38 +0100
Subject: [PATCH 4/5] [T3011] STYLE: pre-commit

---
 my_compassion/templates/components/my2_donation_item.xml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/my_compassion/templates/components/my2_donation_item.xml b/my_compassion/templates/components/my2_donation_item.xml
index 74b409d5d..481826b55 100644
--- a/my_compassion/templates/components/my2_donation_item.xml
+++ b/my_compassion/templates/components/my2_donation_item.xml
@@ -166,8 +166,8 @@
             <t t-set="image" t-value="image if not is_csp else ''" />
             <t t-set="subtext" t-value="sponsorship.payment_mode_id.display_name" />
             <t t-set="price" t-value="sponsorship.total_amount" />
-            <t t-if="is_csp" t-set="download_href" t-valuef="/my/download/csp_bvr?csp_id=#{sponsorship.id}"/>
-            <t t-else="" t-set="download_href" t-valuef="/my/download/gift_bvr?child_id=#{sponsorship.child_id.id}"/>
+            <t t-if="is_csp" t-set="download_href" t-valuef="/my/download/csp_bvr?csp_id=#{sponsorship.id}" />
+            <t t-else="" t-set="download_href" t-valuef="/my/download/gift_bvr?child_id=#{sponsorship.child_id.id}" />
             <t
                 t-set="secondary_buttons"
                 t-value="[{

From 28547239b09acdf4f4a67540273eab0788514d03 Mon Sep 17 00:00:00 2001
From: Daniel Gergely <dgergely@compassion.ch>
Date: Fri, 17 Apr 2026 09:14:29 +0200
Subject: [PATCH 5/5] [T3011] FEAT: mobile footer improvements

---
 theme_compassion_2025/views/footer.xml | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/theme_compassion_2025/views/footer.xml b/theme_compassion_2025/views/footer.xml
index e21641e7d..a716845ae 100644
--- a/theme_compassion_2025/views/footer.xml
+++ b/theme_compassion_2025/views/footer.xml
@@ -69,7 +69,7 @@
                 <section class="pt16">
                     <div class="container">
                         <div class="row align-items-center">
-                            <div class="col-12 text-center mb-2">
+                            <div class="col-12 text-center mb-3">
                                 <p class="mb-0">
                                     Copyright ©
                                     <span t-esc="datetime.datetime.now().year" />
@@ -81,7 +81,7 @@
                             >
                                 <div class="mb-2 mb-md-0">
                                     <a
-                                        class="text-pure-white mr-3"
+                                        class="text-pure-white mr-0 mr-md-3"
                                         href="https://compassion.ch/protection-des-donnees/"
                                         target="_blank"
                                         rel="noopener noreferrer"
@@ -90,12 +90,12 @@
                                     </a>
                                     <span class="d-none d-md-inline mr-3">|</span>
                                 </div>
-                                <div class="d-flex">
+                                <div class="d-flex ml-1 mt-1 lead">
                                     <a
                                         href="https://www.facebook.com/compassionschweiz"
                                         target="_blank"
                                         rel="noopener noreferrer"
-                                        class="mr-3"
+                                        class="mr-3 ml-3 ml-md-0"
                                     >
                                         <i class="fa fa-facebook-official text-pure-white" />
                                     </a>
@@ -103,7 +103,7 @@
                                         href="https://www.instagram.com/compassionswiss"
                                         target="_blank"
                                         rel="noopener noreferrer"
-                                        class="mr-3"
+                                        class="mr-3 ml-3 ml-md-0"
                                     >
                                         <i class="fa fa-instagram text-pure-white" />
                                     </a>
@@ -111,7 +111,7 @@
                                         href="https://www.youtube.com/channel/UChVNRRvihHG0AYPsdEFfasQ"
                                         target="_blank"
                                         rel="noopener noreferrer"
-                                        class="mr-3"
+                                        class="mr-3 ml-3 ml-md-0"
                                     >
                                         <i class="fa fa-youtube-play text-pure-white" />
                                     </a>
@@ -119,7 +119,7 @@
                                         href="https://vimeo.com/compassionswitzerland"
                                         target="_blank"
                                         rel="noopener noreferrer"
-                                        class="mr-3"
+                                        class="mr-3 ml-3 ml-md-0"
                                     >
                                         <i class="fa fa-vimeo text-pure-white" />
                                     </a>
@@ -131,6 +131,10 @@
                                         <i class="fa fa-linkedin text-pure-white" />
                                     </a>
                                 </div>
+                                <div class="mt-2 mt-md-0">
+                                    <span class="d-none d-md-inline ml-3">|</span>
+                                    <a class="text-pure-white ml-0 ml-md-3" href="/contactus">Contact</a>
+                                </div>
                             </div>
                         </div>
                         <div class="row">