diff --git a/html/images/illustrations/products-scan-2.png b/html/images/illustrations/products-scan-2.png new file mode 100644 index 0000000000000..ab22d27d195ff Binary files /dev/null and b/html/images/illustrations/products-scan-2.png differ diff --git a/html/images/illustrations/products-scan-source.svg b/html/images/illustrations/products-scan-source.svg new file mode 100644 index 0000000000000..37a830a976c74 --- /dev/null +++ b/html/images/illustrations/products-scan-source.svg @@ -0,0 +1,1504 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/html/images/illustrations/products-scan.png b/html/images/illustrations/products-scan.png new file mode 100644 index 0000000000000..0cc43cee26738 Binary files /dev/null and b/html/images/illustrations/products-scan.png differ diff --git a/scss/_off.scss b/scss/_off.scss index ff98f74e1d1c9..cadfc2ebedbc0 100644 --- a/scss/_off.scss +++ b/scss/_off.scss @@ -1118,6 +1118,7 @@ span.ico-bold { } $section-blue: #6d85d9; +$section-cyan: #008c8c; .donation-banner, .donation-banner-footer { @@ -1203,6 +1204,82 @@ $section-blue: #6d85d9; vertical-align: middle; } +// Packagings banner + + +.packagings-banner { + position: relative; + display: flex; + padding: 2rem 0; + background-color: $section-cyan; + @media #{$small-only} { + flex-direction: column; + padding: 1rem 0; + } + &__image { + display: block; + content: ""; + background: no-repeat bottom url(/images/illustrations/products-scan-2.png); + min-width: 150px; + height: 81px; + } + &__content { + display: flex; + align-items: center; + flex-direction: row; + gap: 1rem; + margin: 0 auto; + max-width: 100rem; + @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; + } + } + &-paragraphs { + > p { color: $white; } + a { color: #ffffcc; } + @media #{$small-only} { + text-align: center; + order: 2; + padding: 1rem; + } + &--thank-you { + font-weight: bold; + span { + color: red; + font-size: 1rem; + } + } + } + &-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; + } + } + } +} + // Footer: Scan your everyday foods #footer_scan { diff --git a/templates/web/common/includes/packagings_banner.tt.html b/templates/web/common/includes/packagings_banner.tt.html new file mode 100644 index 0000000000000..09fbf681ab984 --- /dev/null +++ b/templates/web/common/includes/packagings_banner.tt.html @@ -0,0 +1,76 @@ + + +
+ +
+ + scale + [% IF lc == "fr" %] + Participer à l'opération emballages + [% ELSE %] + Join the packaging operation + [% END %] + +
+

+ [% IF lc == "fr" %] + Aidez-nous à créer la transparence sur les emballages alimentaires avec l'opération + Plein pot sur les emballages + en partenariat avec l'Agence de la transition écologique (ADEME) ! #AVosEmballages + [% ELSE %] + Help us create transparency on the packaging of food products with the operation + Tackling Food Packaging + in partnership with ADEME, the French Agency for Ecological Transition! #TacklingPackaging + [% END %] +

+
+
+ close +
+
+ + + + diff --git a/templates/web/common/site_layout.tt.html b/templates/web/common/site_layout.tt.html index 0e788597e2b7a..c4f76a95a6836 100644 --- a/templates/web/common/site_layout.tt.html +++ b/templates/web/common/site_layout.tt.html @@ -273,8 +273,14 @@
[% IF ! server_options_producers_platform %] - [% PROCESS 'web/common/includes/donate_banner.tt.html' %] - [% banner_main %] + [%# for now, display the packagings banner in all cases %] + [% IF 1 == 1 %] + [% INCLUDE 'web/common/includes/packagings_banner.tt.html' %] + [% ELSE %] + [%# we keep the old code so that we can easily put back the donation banner %] + [% PROCESS 'web/common/includes/donate_banner.tt.html' %] + [% banner_main %] + [% END %] [% END %] [% IF page_format == "banner" %]