diff --git a/html/images/illustrations/donate-hearth.svg b/html/images/illustrations/donate-hearth.svg
new file mode 100644
index 0000000000000..2350e6c9df342
--- /dev/null
+++ b/html/images/illustrations/donate-hearth.svg
@@ -0,0 +1,14 @@
+
+
+
\ No newline at end of file
diff --git a/html/images/illustrations/half-logo.svg b/html/images/illustrations/half-logo.svg
new file mode 100644
index 0000000000000..0beb6876a8f0d
--- /dev/null
+++ b/html/images/illustrations/half-logo.svg
@@ -0,0 +1,10 @@
+
+
+
\ No newline at end of file
diff --git a/html/images/misc/group_photo.jpeg b/html/images/misc/group_photo.jpeg
new file mode 100644
index 0000000000000..a125007014215
Binary files /dev/null and b/html/images/misc/group_photo.jpeg differ
diff --git a/po/common/common.pot b/po/common/common.pot
index 8e99762ba9bec..3580a89894f34 100644
--- a/po/common/common.pot
+++ b/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"
diff --git a/po/common/en.po b/po/common/en.po
index 51f34d09b6e36..efc3b865507a7 100644
--- a/po/common/en.po
+++ b/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"
diff --git a/po/common/fr.po b/po/common/fr.po
index 3a1bbf6b45c88..68c6e3285744e 100644
--- a/po/common/fr.po
+++ b/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"
diff --git a/scss/_off.scss b/scss/_off.scss
index bd1de958b680b..794d61745d040 100644
--- a/scss/_off.scss
+++ b/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 {
diff --git a/templates/web/common/includes/donate_banner.tt.html b/templates/web/common/includes/donate_banner.tt.html
index 4c859e7bb81e8..1f355321d8440 100644
--- a/templates/web/common/includes/donate_banner.tt.html
+++ b/templates/web/common/includes/donate_banner.tt.html
@@ -1,24 +1,25 @@
[% banner_main = BLOCK %]
-
-
+
+
+
+