Merge pull request #9845 from mozilla/9824-donate-banner-update

Updated donate banner image and button link

network-api/networkapi/templates/partials/banner.html

@@ -1,7 +1,7 @@
 {% load settings_value i18n static %}
 
-{% with wrapper_class="tw-py-7" background_class="tw-bg-cover tw-bg-center" btn_class="tw-text-white tw-border-black tw-bg-blue-40 hover:tw-bg-blue-80 tw-shadow-black"%}
-<div class="donate-banner tw-relative tw-z-20 {{background_class}} tw-bg-[url(../_images/mozilla-donate-dear-internet-mobile.png)] large:tw-bg-[url(../_images/mozilla-donate-dear-internet.png)] {{wrapper_class}} print:tw-hidden tw-w-full tw-hidden">
+{% with wrapper_class="tw-py-7 tw-shadow-[0_0_3px_2px_rgba(9,32,77,.12)_inset]" background_class="tw-bg-[url(../_images/donate-banner-giving.jpg)] tw-bg-[100%_0] tw-bg-no-repeat tw-bg-cover medium:tw-bg-contain" btn_class="tw-text-white tw-border-black tw-bg-blue-40 hover:tw-bg-blue-80 tw-shadow-black"%}
+<div class="donate-banner {{background_class}} {{wrapper_class}} tw-relative tw-z-20 tw-w-full tw-hidden print:tw-hidden">
     <a href="#" 
        class="tw-p-4
               tw-box-content
@@ -15,40 +15,29 @@
     </a>
 
     <div class="tw-container">
-        <div class="tw-row">
-
+        <div class="tw-row tw-px-3">
             {% block left_banner_column %}
-            <div class="medium:tw-w-6/12 large:tw-w-6/12 tw-px-4">
+            <div class="tw-px-5 tw-py-6 tw-bg-[hsla(0,0%,100%,.7)] tw-backdrop-blur-sm large:tw-w-8/12 xlarge:tw-w-6/12">
                 <p class="tw-h2-heading tw-mb-0 tw-text-blue-80 tw-font-semibold tw-italic">
                     {% trans "Help Mozilla fight for a better internet this holiday season" %}
                 </p>
                 <p class="tw-body-large tw-mt-4 tw-leading-normal">
-                    {% trans "We're proudly nonprofit, working to keep the web healthy." %}
+                    {% blocktrans trimmed %}
+                        We're proudly nonprofit, working to keep the web healthy. Your contributions help build a safe and open internet.
+                    {% endblocktrans %}
                 </p>
+                <p class="tw-body-large">
+                    {% trans "Can you donate today?" %}
+                </p>
+                <div class="tw-w-full tw-pt-3">
+                    <a class="tw-btn-pop {{btn_class}} tw-shadow-[4px_4px]" tw-w-full tw-text-base active:tw-text-white active:tw-bg-[#0a0c8f] active:tw-border-black" href="https://donate.mozilla.org/happy-holidays-from-mozilla/?utm_medium=website&utm_source=MoFo&utm_campaign=22-EOY&utm_content=widget" target="_blank" rel="noopener noreferrer">
+                        {% trans "Support Mozilla" %}
+                    </a>
+                </div>
             </div>
             {% endblock %}
 
             {% block right_banner_column %}
-            <div
-                class=" medium:tw-w-6/12 large:tw-w-3/12 tw-px-4 medium:tw-ml-auto large:tw-mt-2">
-                <div class="tw-row">
-                    <div class="tw-px-4">
-                        <p class="tw-body">
-                            {% trans "Your contributions help build a safe and open internet." %}
-                        </p>
-                        <p class="tw-body">
-                            {% trans "Can you donate today?" %}
-                        </p>
-                    </div>
-                </div>
-                <div class="tw-row">
-                    <div class="tw-w-full tw-px-4">
-                        <a class="tw-btn-pop {{btn_class}} tw-shadow-[4px_4px]" tw-w-full tw-text-base active:tw-text-white active:tw-bg-[#0a0c8f] active:tw-border-black" href="https://donate.mozilla.org/?utm_source=foundation.mozilla.org&utm_medium=referral&utm_campaign=fmonav&utm_content=2021_EOY_bannner_MoFo" target="_blank" rel="noopener noreferrer">
-                            {% trans "Support Mozilla" %}
-                        </a>
-                    </div>
-                </div>
-            </div>
             {% endblock %}
 
         </div>