feat: donation banner 2024 integration (#9422)

po/common/common.pot

@@ -5748,8 +5748,16 @@ msgctxt "donation_title"
 msgid "Important: we need your support!"
 msgstr ""
 
-msgctxt "donation_text_2023"
-msgid "Help us make food transparency the norm! As an independent non-profit organization, we depend on your donations to continue informing consumers around the world about what they eat. Join the food revolution with a donation to the movement."
+msgctxt "donation_text_2023_main"
+msgid "Help us make food transparency the norm!"
+msgstr ""
+
+msgctxt "donation_text_2023_secondary"
+msgid "As a non-profit organization, we depend on your donations to continue informing consumers around the world about what they eat."
+msgstr ""
+
+msgctxt "donation_text_2023_tertiary"
+msgid "The food revolution starts with you!"
 msgstr ""
 
 msgctxt "donation_cta"

po/common/en.po

@@ -5772,9 +5772,17 @@ msgctxt "donation_title"
 msgid "Important: we need your support!"
 msgstr "Important: we need your support!"
 
-msgctxt "donation_text_2023"
-msgid "Help us make food transparency the norm! As an independent non-profit organization, we depend on your donations to continue informing consumers around the world about what they eat. Join the food revolution with a donation to the movement."
-msgstr "Help us make food transparency the norm! As an independent non-profit organization, we depend on your donations to continue informing consumers around the world about what they eat. Join the food revolution with a donation to the movement."
+msgctxt "donation_text_2023_main"
+msgid "Help us make food transparency the norm!"
+msgstr "Help us make food transparency the norm!"
+
+msgctxt "donation_text_2023_secondary"
+msgid "As a non-profit organization, we depend on your donations to continue informing consumers around the world about what they eat."
+msgstr "As a non-profit organization, we depend on your donations to continue informing consumers around the world about what they eat."
+
+msgctxt "donation_text_2023_tertiary"
+msgid "The food revolution starts with you !"
+msgstr "The food revolution starts with you !"
 
 msgctxt "donation_cta"
 msgid "Donate"

po/common/fr.po

@@ -5758,13 +5758,21 @@ msgctxt "donation_title"
 msgid "Important: we need your support!"
 msgstr "Important : nous avons besoin de votre soutien !"
 
-msgctxt "donation_text_2023"
-msgid "Help us make food transparency the norm! As an independent non-profit organization, we depend on your donations to continue informing consumers around the world about what they eat. Join the food revolution with a donation to the movement."
-msgstr "Aidez-nous à faire de la transparence alimentaire la norme ! En tant qu'association à but non lucratif indépendante, nous dépendons de vos dons pour continuer à informer les consommateurs du monde entier sur ce qu'ils mangent. Rejoignez la révolution alimentaire avec un don défiscalisable."
+msgctxt "donation_text_2023_main"
+msgid "Help us make food transparency the norm!"
+msgstr "Aidez-nous à faire de la transparence alimentaire la norme ! "
+
+msgctxt "donation_text_2023_secondary"
+msgid "As a non-profit organization, we depend on your donations to continue informing consumers around the world about what they eat."
+msgstr "En tant qu'association à but non lucratif, nous dépendons de vos dons pour continuer à informer les consommateurs du monde entier sur ce qu'ils mangent."
+
+msgctxt "donation_text_2023_tertiary"
+msgid "The food revolution starts with you!"
+msgstr "La révolution alimentaire commence avec vous !"
 
 msgctxt "donation_cta"
 msgid "Donate"
-msgstr "Faire un don"
+msgstr "Donner"
 
 msgctxt "ecoscore_production_system_no_labels_with_environmental_benefits"
 msgid "No labels with environmental benefits"

scss/_off.scss

@@ -1203,77 +1203,115 @@ span.ico-bold {
 
 $section-blue: #6d85d9;
 $section-cyan: #008c8c;
+$section-sand: #FFFAF1;
+$background-orange: #FF8714;
+$font-green: #008c8c;
 
 .donation-banner,
 .donation-banner-footer {
+  overflow: hidden;
   position: relative;
   display: flex;
-  padding: 2rem 0;
-  background-color: $section-blue;
+  flex-direction: row;
+  align-items: stretch;
+  padding: 1.5rem 1rem; 
+  width: 100%;
+  gap: 1rem;
+  background-color: $section-sand;
   @media #{$small-only} {
     flex-direction: column;
     padding: 1rem 0;
   }
-  &__image {
-    display: block;
-    content: "";
-    background: no-repeat url(/images/illustrations/donate-heart.svg);
-    min-width: 150px;
-    height: 81px;
+  &__close {
+    position: absolute;
+    top: .3rem;
+    right: .3rem;
   }
-  &__content {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    gap: 1rem;
-    margin: 0 auto;
-    max-width: 100rem;
+  &__logo {
+    position: absolute;
+    bottom: -20px;
+    left: -15px;
+    background-image: url(/images/illustrations/half-logo.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    width: 75px;
+    height: 75px;
     @media #{$small-only} {
-      flex-direction: column;
-      gap: 0;
-      margin-top: -2rem;
-    }
-    &--button {
-      appearance: button;
-      display: inline-flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 8px;
-      height: fit-content;
-      margin-bottom: 0;
-      @media #{$small-only} {
-        order: 3;
-      }
+      width: 50px;
+      height: 50px;
+      bottom: -15px;
+      left: -10px;
     }
-    &-paragraphs {
-      > p { color: $white; }
-      @media #{$small-only} {
-        text-align: center;
-        order: 2;
-        padding: 1rem;
-      }
-      &--thank-you {
-        span {
-          color: red;
-          font-size: 1rem;
-        }
-      }
+  }
+  &__hand {
+    position: absolute;
+    transform: rotate(80deg);
+    top: -40px;
+    right: 45%;
+    background-image: url(/images/illustrations/donate-hearth.svg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    width: 100px;
+    height: 100px;
+    @media #{$small-only} {
+      display: none;
     }
-    &-close {
-      align-self: flex-start;
-      cursor: pointer;
-      color: white;
-      opacity: 0.5;
-      margin-right: 1rem;
-      @media #{$small-only} { 
-        position: relative;
-        top: -25px;
-        margin-right: 2rem;
-        align-self: flex-end;
-        order: 1;
-      }
+  }
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 5;
+    padding: 1rem;
+  }
+  &__main-text {
+    display: inline-block;
+    text-transform: uppercase;
+    font-size: 38px;
+    font-weight: 700;
+    font-family: 'Montserrat', sans-serif;
+    background-color: $background-orange;
+    border-radius: 5px;
+    color: $white;
+    padding: 1rem;
+    margin-bottom: 2rem;
+  }
+  &__aside {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+  }
+  &__secondary-text,
+  &__tertiary-text {
+    color: $font-green;
+    font-weight: 700;
+    font-family: 'Farro', sans-serif;
+  }
+  &__secondary-text {
+    font-size: 16px;
+  }
+  &__tertiary-text {
+    font-size: 13px;
+  }
+  &__donate {
+    padding: .8rem;
+    text-transform: uppercase;
+    background-color: $font-green;
+    color: $white;
+    border-radius: 10px;
+    &:hover {
+      opacity: 0.9;
+      color: $white;
     }
   }
+  &__image {
+    height: 400px;
+    flex: 4;
+    background-image: url(/images/misc/group_photo.jpeg);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+  }
 }
 
 .donation-banner-footer {

templates/web/common/includes/donate_banner.tt.html

@@ -1,24 +1,25 @@
 <!-- start templates/[% component.name %] -->
 
 [% banner_main = BLOCK %]
-<section id="donation-banner-top" class="donation-banner">
-  <span class="donation-banner__image"></span>
+
+<section class="donation-banner">
+  <span class="donation-banner__logo"></span>
+  <span class="donation-banner__hand"></span>
   <div class="donation-banner__content">
-  <a
-      class="donation-banner__content--button button round white-button"
-      href="[% link %]?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button"
-  >
-    <span class="material-icons">volunteer_activism</span>
-    [% lang('donation_cta') %]
-  </a>
-  <div class="donation-banner__content-paragraphs">
-    <p class="donation-banner__content-paragraphs--text">
-      [% lang("donation_text_2023") %]
+    <p class="donation-banner__main-text">
+        [% lang("donation_text_2023_main") %]
     </p>
-    <p class="donation-banner__content-paragraphs--thank-you">[% lang('thank_you_very_much') %] <span class="material-icons">favorite</span></p>
+    <div class="donation-banner__aside">
+      <div>
+        <p class="donation-banner__secondary-text">[% lang("donation_text_2023_secondary") %]</p>
+        <p class="donation-banner__tertiary-text">[% lang("donation_text_2023_tertiary") %]</p>
+      </div>
+      <a class="donation-banner__donate" href="[% link %]?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">[% lang("donation_cta") %]</a>
+    </div>
   </div>
-  <div class="donation-banner__content-close">
-    <span id="hide-donate-banner" class="donation-banner__content-close--icon material-icons" onclick="DonationButton();">close</span>
+  <div class="donation-banner__image"></div>
+  <div class="donation-banner__close">
+    <span id="hide-donate-banner" class="material-icons" onclick="DonationButton();">close</span>
   </div>
 </section>
 
@@ -65,21 +66,21 @@
 [% banner_footer = BLOCK %]
 
 <section class="donation-banner-footer">
-  <span class="donation-banner-footer__image"></span>
+  <span class="donation-banner-footer__logo"></span>
+  <span class="donation-banner-footer__hand"></span>
   <div class="donation-banner-footer__content">
-  <a
-      class="donation-banner-footer__content--button button round white-button"
-      href="[% link %]?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button"
-  >
-    <span class="material-icons">volunteer_activism</span>
-    [% lang('donation_cta') %]
-  </a>
-  <div class="donation-banner-footer__content-paragraphs">
-    <p class="donation-banner-footer__content-paragraphs--text">
-      [% lang("donation_text_2023") %]
+    <p class="donation-banner-footer__main-text">
+        [% lang("donation_text_2023_main") %]
     </p>
-    <p class="donation-banner-footer__content-paragraphs--thank-you">[% lang('thank_you') %] <span class="material-icons">favorite</span></p>
+    <div class="donation-banner-footer__aside">
+      <div>
+        <p class="donation-banner-footer__secondary-text">[% lang("donation_text_2023_secondary") %]</p>
+        <p class="donation-banner-footer__tertiary-text">[% lang("donation_text_2023_tertiary") %]</p>
+      </div>
+      <a class="donation-banner-footer__donate" href="[% link %]?utm_source=off&utf_medium=web&utm_campaign=donate-2023-a&utm_term=en-text-button">[% lang("donation_cta") %]</a>
+    </div>
   </div>
+  <div class="donation-banner-footer__image"></div>
 </section>
 
 [% END %]