feat: update the donation banner (#10926)

### What Update the donation banner with 2024 design ### Screenshot ![ENG](https://github.com/user-attachments/assets/e8e64ac0-2fe3-48dd-8f26-f6a573e63f67) ![FR](https://github.com/user-attachments/assets/780c50a6-a6e5-4b3a-b157-6675a13b7725) --------- Co-authored-by: Open Food Facts Bot <[email protected]> Co-authored-by: Stéphane Gigandet <[email protected]>
openfoodfacts · Oct 30, 2024 · 2ae1768 · 2ae1768
1 parent 6a9cd2c
commit 2ae1768
Show file tree

Hide file tree

Showing 71 changed files with 5,543 additions and 1,468 deletions.
diff --git a/html/images/misc/donation-banners/donation-banner-group-photo.png b/html/images/misc/donation-banners/donation-banner-group-photo.png
diff --git a/po/common/common.pot b/po/common/common.pot
@@ -5811,6 +5811,46 @@ msgctxt "donation_text_2023_tertiary"
 msgid "The food revolution starts with you!"
 msgstr ""
 
+msgctxt "donation_hook_2024"
+msgid "Help us inform millions of consumers around the world about what they eat"
+msgstr "Help us inform millions of consumers around the world about what they eat"
+
+msgctxt "donation_title_2024"
+msgid "Please give to our 2024 Fundraiser"
+msgstr "Please give to our 2024 Fundraiser"
+
+msgctxt "donation_list_2024_main"
+msgid "Your donations fund the day-to-day operations of our non-profit association:"
+msgstr "Your donations fund the day-to-day operations of our non-profit association:"
+
+msgctxt "donation_list_2024_first"
+msgid "keeping our database open & available to all,"
+msgstr "keeping our database open & available to all,"
+
+msgctxt "donation_list_2024_first_sub"
+msgid "technical infrastructure (website/mobile app) & a small permanent team"
+msgstr "technical infrastructure (website/mobile app) & a small permanent team"
+
+msgctxt "donation_list_2024_second"
+msgid "remain independent of the food industry,"
+msgstr "remain independent of the food industry,"
+
+msgctxt "donation_list_2024_third"
+msgid "engage a community of committed citizens,"
+msgstr "engage a community of committed citizens,"
+
+msgctxt "donation_list_2024_fourth"
+msgid "support the advancement of public health research."
+msgstr "support the advancement of public health research."
+
+msgctxt "donation_financial_2024_text"
+msgid "Each donation counts! We appreciate your support in bringing further food transparency in the world."
+msgstr "Each donation counts! We appreciate your support in bringing further food transparency in the world."
+
+msgctxt "donation_button_2024_text"
+msgid "I SUPPORT"
+msgstr "I SUPPORT"
+
 msgctxt "donation_cta"
 msgid "Donate"
 msgstr ""

diff --git a/po/common/en.po b/po/common/en.po
@@ -5835,6 +5835,46 @@ msgctxt "donation_text_2023_tertiary"
 msgid "The food revolution starts with you!"
 msgstr "The food revolution starts with you!"
 
+msgctxt "donation_hook_2024"
+msgid "Help us inform millions of consumers around the world about what they eat"
+msgstr "Help us inform millions of consumers around the world about what they eat"
+
+msgctxt "donation_title_2024"
+msgid "Please give to our 2024 Fundraiser"
+msgstr "Please give to our 2024 Fundraiser"
+
+msgctxt "donation_list_2024_main"
+msgid "Your donations fund the day-to-day operations of our non-profit association:"
+msgstr "Your donations fund the day-to-day operations of our non-profit association:"
+
+msgctxt "donation_list_2024_first"
+msgid "keeping our database open & available to all,"
+msgstr "keeping our database open & available to all,"
+
+msgctxt "donation_list_2024_first_sub"
+msgid "technical infrastructure (website/mobile app) & a small permanent team"
+msgstr "technical infrastructure (website/mobile app) & a small permanent team"
+
+msgctxt "donation_list_2024_second"
+msgid "remain independent of the food industry,"
+msgstr "remain independent of the food industry,"
+
+msgctxt "donation_list_2024_third"
+msgid "engage a community of committed citizens,"
+msgstr "engage a community of committed citizens,"
+
+msgctxt "donation_list_2024_fourth"
+msgid "support the advancement of public health research."
+msgstr "support the advancement of public health research."
+
+msgctxt "donation_financial_2024_text"
+msgid "Each donation counts! We appreciate your support in bringing further food transparency in the world."
+msgstr "Each donation counts! We appreciate your support in bringing further food transparency in the world."
+
+msgctxt "donation_button_2024_text"
+msgid "I SUPPORT"
+msgstr "I SUPPORT"
+
 msgctxt "donation_cta"
 msgid "Donate"
 msgstr "Donate"

diff --git a/po/common/fr.po b/po/common/fr.po
@@ -5763,6 +5763,46 @@ msgctxt "donation_text_2023_tertiary"
 msgid "The food revolution starts with you!"
 msgstr "La révolution alimentaire commence avec vous !"
 
+msgctxt "donation_hook_2024"
+msgid "Help us inform millions of consumers around the world about what they eat"
+msgstr "Aidez-nous à informer des millions de consommateurs à travers le monde sur ce qu’ils mangent"
+
+msgctxt "donation_title_2024"
+msgid "Give to the Open Food Facts 2024 Fundraiser"
+msgstr "Participez à notre Collecte de Dons 2024"
+
+msgctxt "donation_list_2024_main"
+msgid "Your donations fund the day-to-day operations of our non-profit association:"
+msgstr "Vos dons financent les opérations quotidiennes de notre association :"
+
+msgctxt "donation_list_2024_first"
+msgid "keeping our database open & available to all,"
+msgstr "maintenir notre base de données ouverte et disponible à tou.te.s,"
+
+msgctxt "donation_list_2024_first_sub"
+msgid "technical infrastructure (website/mobile app) & a small permanent team"
+msgstr "infrastructure technique et une petite équipe permanente"
+
+msgctxt "donation_list_2024_second"
+msgid "remain independent of the food industry,"
+msgstr "rester indépendante de l’industrie agro-alimentaire,"
+
+msgctxt "donation_list_2024_third"
+msgid "engage a community of committed citizens,"
+msgstr "animer une communauté de citoyen.ne.s engagé.e.s,"
+
+msgctxt "donation_list_2024_fourth"
+msgid "support the advancement of public health research."
+msgstr "soutenir l’avancement des recherches en santé publique."
+
+msgctxt "donation_financial_2024_text"
+msgid "Each donation counts! We appreciate your support in bringing further food transparency in the world."
+msgstr ""
+
+msgctxt "donation_button_2024_text"
+msgid "I SUPPORT"
+msgstr "JE SOUTIENS"
+
 msgctxt "donation_cta"
 msgid "Donate"
 msgstr "Faire un don"

diff --git a/scss/_off.scss b/scss/_off.scss
@@ -1235,6 +1235,7 @@ $section-cyan: #008c8c;
 $section-sand: #FFFAF1;
 $background-orange: #FF8714;
 $font-green: #008c8c;
+$border-pink: #ff6e78;
 
 .off-days-banner {
   background-color: $section-cyan;
@@ -1257,18 +1258,20 @@ $font-green: #008c8c;
 
 .donation-banner,
 .donation-banner-footer {
-  overflow: hidden;
   position: relative;
   display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  padding: .5rem 2rem;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 0;
+  border: 10px solid $border-pink;
   width: 100%;
-  gap: 1rem;
-  background-color: $section-sand;
+  background-color: white;
   @media #{$small-only} {
     flex-direction: column;
-    padding: 1rem;
+    padding: 20px 10px;
+  }
+  &__group-photo{
+    border-radius: 5px;
   }
   &__close {
     button {
@@ -1280,101 +1283,91 @@ $font-green: #008c8c;
       color: inherit;
     }
   }
-  &__hand {
-    position: absolute;
-    bottom: -40px;
-    left: 40%;
-    background-image: url(/images/illustrations/donate-hearth.svg);
-    background-repeat: no-repeat;
-    background-size: contain;
-    width: 100px;
-    height: 100px;
-    @media #{$small-only} {
-      left: 65%;
-    }
-  }
-  &__content {
+  &__hook-section{
     display: flex;
-    flex-direction: column;
     justify-content: center;
-    flex: 5;
-    padding: 1rem;
-  }
-  &__main-text {
-    span {
-      background-color: $background-orange;
-      text-transform: uppercase;
-      color: $white;
-      font-size: 30px;
-      font-family: 'Montserrat', sans-serif;
+    align-items: center;
+    background-color: $section-cyan;
+    color: white;
+    padding: 10px;
+    margin: 10px;
+    border-radius: 10px;
+    z-index: 1;
+    p {
+      font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+      font-size: 25px;
       font-weight: 700;
-      border-radius: 5px;
-      padding: .7rem .5rem;
-      margin-bottom: 1rem;
-      -webkit-box-decoration-break: clone;
-      box-decoration-break: clone;
-      line-height: 3.3rem;
+      line-height: 35px;
+      text-transform: uppercase;
       @media #{$small-only} {
-        font-size: 20px;
-        line-height: 2.2rem;
+        font-size: 15px;
+        line-height: 20px;
       }
     }
   }
-  &__aside {
+  &__left-aside{
+    width: 60%;
+    margin: 0 10px;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: .5rem;
-  }
-  &__secondary-text,
-  &__tertiary-text {
-    color: $font-green;
-    font-weight: 700;
-    font-family: 'Farro', sans-serif;
-  }
-  &__secondary-text {
-    font-size: 18px;
-    @media #{$small-only} {
-      font-size: 12px;
+    img {
+      transform: translatey(-15px);
     }
   }
-  &__tertiary-text {
-    font-size: 16px;
-    @media #{$small-only} {
-      font-size: 12px;
-    }
+  &__aside{
+    display: flex;
+    flex-direction: column;
+    //align-items: center;
   }
-  &__donate {
-    padding: 1rem 1.7rem;
-    text-transform: uppercase;
-    background-color: $font-green;
-    color: $white;
-    border-radius: 10px;
+  &__main-title{
+    color: $border-pink;
+    font-weight: 800;
+    font-size: 25px;
+  }
+  &__main-section{
     display: flex;
-    justify-content: center;
     align-items: center;
+  }
+  &__actions-section{
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    gap: 15px;
+    padding: 0 10px;
     @media #{$small-only} {
-      padding: .5rem .85rem;
+      flex-direction: column;
+      align-items: center;
+      padding: 20px 10px;
     }
-    &:hover {
-      opacity: 0.9;
-      color: $white;
+    &__financial{
+      width: 50%;
+      @media #{$small-only} {
+        width: 90%;
+      }
+      p{
+        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        font-size: 15px;
+        color: #008c8c;
+        font-weight: bolder;
+      }
+    }
+    &__donate-button{
+      width: 40%;
+      a button{
+        background-color: $border-pink;
+        border-radius: 30px;
+        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        font-size: 20px;
+        font-weight: 900;
+        &:hover{
+          background-color: rgba($border-pink, 0.8);
+        }
+      }
     }
-  }
-  &__image {
-    height: auto;
-    flex: 4;
-    background-image: url(/images/misc/group_photo_2023.jpeg);
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center calc(50% + 30px);
   }
 }
 
-.donation-banner-footer {
-  &__content {
-    @media #{$small-only} { margin-top: 0; }
-  }
-}
 
 // Top banner to download mobile app
 #mobile-app-top-banner {