From c13c2cda7851c46a2abf3f2d7e4563b5f8ebf296 Mon Sep 17 00:00:00 2001
From: Reem H <42309026+reemhamz@users.noreply.github.com>
Date: Wed, 24 Jan 2024 07:35:36 +1100
Subject: [PATCH] updated homepage CTA to add MoFo link (#14110)

---
 .../templates/mozorg/home/home-new.html       |  10 ++++--
 media/css/mozorg/home/home-new.scss           |  29 ++++++++++++++++++
 media/img/home/2023/external-link-black.png   | Bin 0 -> 274 bytes
 media/img/home/2023/external-link-white.png   | Bin 0 -> 291 bytes
 4 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 media/img/home/2023/external-link-black.png
 create mode 100644 media/img/home/2023/external-link-white.png

diff --git a/bedrock/mozorg/templates/mozorg/home/home-new.html b/bedrock/mozorg/templates/mozorg/home/home-new.html
index 9a36656bbce..4ebb57dfab7 100644
--- a/bedrock/mozorg/templates/mozorg/home/home-new.html
+++ b/bedrock/mozorg/templates/mozorg/home/home-new.html
@@ -167,9 +167,9 @@ <h2>{{ ftl('home-mozilla-makes-privacy') }}</h2>
   </div>
 
   <section class="c-mission mzp-l-content">
-    <!-- Manifesto -->
+    <!-- Foundation -->
     {% call split(
-        block_class='mzp-l-split-center-on-sm-md mzp-l-split-reversed mzp-t-split-nospace',
+        block_class='mzp-l-split-center-on-sm-md mzp-l-split-reversed mzp-t-split-nospace c-foundation',
         image=resp_img(
           url='img/home/2023/mofo-split.png',
           srcset={
@@ -184,7 +184,11 @@ <h2>{{ ftl('home-mozilla-makes-privacy') }}</h2>
     ) %}
     <h2>{{ ftl('home-is-mozilla-a-corporation')}}</h2>
     <p>{{ ftl('home-mozilla-consists-of') }}</p>
-    <a href="{{ url('mozorg.about.manifesto') }}" class="mzp-c-button">{{ ftl('home-learn-about-mofo') }}</a>
+    <a href="https://foundation.mozilla.org/" class="mzp-c-button" rel="external noopener">
+      <span>{{ ftl('home-learn-about-mofo') }}</span>
+      <img src="{{ static('img/home/2023/external-link-white.png') }}" alt="" class="external-link-white">
+      <img src="{{ static('img/home/2023/external-link-black.png') }}" alt="" class="external-link-black">
+    </a>
     {% endcall %}
           <hr>
     <!-- Contribute -->
diff --git a/media/css/mozorg/home/home-new.scss b/media/css/mozorg/home/home-new.scss
index 0fc62269048..f51fab3e80a 100644
--- a/media/css/mozorg/home/home-new.scss
+++ b/media/css/mozorg/home/home-new.scss
@@ -167,6 +167,35 @@ header {
             @include bidi(((text-align, left, right),));
         }
     }
+
+    .c-foundation {
+        a {
+            display: inline-flex;
+            align-items: center;
+
+            img {
+                margin-left: $spacing-sm;
+            }
+
+            .external-link-white {
+                display: block;
+            }
+
+            .external-link-black {
+                display: none;
+            }
+
+            &:hover {
+                .external-link-white {
+                    display: none;
+                }
+
+                .external-link-black {
+                    display: block;
+                }
+            }
+        }
+    }
 }
 
 .c-about {
diff --git a/media/img/home/2023/external-link-black.png b/media/img/home/2023/external-link-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b46d4c19dd088b58cf8c88c91f3553f00acb564
GIT binary patch
literal 274
zcmV+t0qy>YP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0002lNkl<ZcmbVK
z0TIG54E%8jn1o80grQ(KU=F|mhXQZ_4v@f501lV~<^b|*fL>X<!r%R}wf$e3B!fjR
zTnGzcC){Wxwz@wAo`VtIgb#<69w@wZpZlpi)@srS55iV>R)ec>?qtBY^V7Jin?W2D
zU;GT<e58tb-TGxP!8j;B!PcV{&NTKIGl+^)3_{}0jiDOw?<_FyYzFo#JrgZrj_?q@
zk<x`Bl+eunF(~mv8>65>qwlLk4QsO0_a=j#^`kCy__QcyK(?^0?NQ@<&O>BtIUk0?
YCqU#({6Aetod5s;07*qoM6N<$g0skTz5oCK

literal 0
HcmV?d00001

diff --git a/media/img/home/2023/external-link-white.png b/media/img/home/2023/external-link-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..ab0a168eff340a819fb13ec8f2700b5450cb4a82
GIT binary patch
literal 291
zcmV+;0o?wHP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0002$Nkl<ZcmbtS
zff0f*3`{r&U<5{B1f4)PP$$q0JSNZ$bOT2KC(sRG1G_=}V5-2iMUTJx%R%$sGzk-6
ztxXZuU=A9vU}mFdM+7<dp^$_OtZg4l73VgN^9*?hFas;_0yen)CI*NPB&|9XNIdmw
zK*CeqGKxT+3EqblB+ebTH8C+lsXdastvgF-1Rn81<G6uOJgjuAf{@sJqU(n5c5QI&
zYp{&EtuSQJF$pbE3wC0Z$Mgpvo0B{(RzXbM-GfOGgGycZzX-G^JN>L!cm1kA41Grw
pLaJ=&y;QC1#<S-k$Y@J9+83?N4weAy&7uGR002ovPDHLkV1hocaiIVJ

literal 0
HcmV?d00001