Front review marketing (#78)

* feat: update wording

* fix lint

* feat: add video

* feat: change petition link

* feat: add seastemik report in act page

* feat: add logo pb + donation link in footer

* feat: update citizen image

* feat: update images dashboard

* feat: add google form

* feat: fixed 568 to 468 microplastics

* fixed: review

* fixed: lint

---------

Co-authored-by: Thomas Catinaud Taris <[email protected]>

.eslintrc.js

@@ -17,6 +17,7 @@ module.exports = {
     "no-console": "warn",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "react/no-unescaped-entities": "off",
+    "@next/next/no-sync-scripts": "off",
 
     "react/display-name": "off",
     "react/jsx-curly-brace-presence": [

messages/en/layout.json

@@ -10,7 +10,8 @@
     },
     "footer": {
       "allRight": "All rights reserved",
-      "and": "and"
+      "and": "and",
+      "donation": "Make a donation"
     }
   },
   "siteConfig": {

messages/en/pages/act.json

@@ -14,7 +14,7 @@
       "title": "I say no to the salmon factory project on my territory",
       "content": "The onshore salmon factory project called “Pure Salmon”, an initiative of the Singaporean investment fund 8F Asset Management, is under discussion near Bordeaux. Thanks to petitions signed by citizens, it was notably rejected in Pas-de-Calais and Brittany. Let's keep going!",
       "link": "Sign the petition",
-      "target": "https://www.change.org/p/pour-l-abandon-du-projet-d-%C3%A9levage-intensif-terrestre-de-saumons-par-pure-salmon?recruiter=1321544874&recruited_by_id=817c01c0-813d-11ee-b093-0193942f59ac&utm_source=share_petition&utm_campaign=psf_combo_share_initial&utm_medium=copylink&utm_content=cl_sharecopy_35465639_fr-FR%3A5"
+      "target": "https://www.wesign.it/fr/environnement/non-a-lelevage-intensif-de-saumons-au-verdon-sur-mer"
     },
     "seastemik": {
       "title": "I support Seastemik",
@@ -36,7 +36,15 @@
     },
     "eat": {
       "title": "I leave salmon off my plate",
-      "content": "Ready to set out to leave salmon in the oceans and rivers? “Together, we are an immense force”.<br />What objective seems achievable to you? Leave it in our intention box to help the community grow!"
+      "content": "Ready to set out to leave salmon in the oceans and rivers? “Together, we are an immense force”.<br />What objective seems achievable to you? Leave it in our intention box to help the community grow!",
+      "link": "I'm participating",
+      "target": "https://forms.gle/c6fGdknx8jr4rmq96"
+    },
+    "report": {
+      "title": "Educate yourself and share to act better",
+      "content": "Reading and sharing Seastemik's report on the salmon industry helps deconstruct the distorted popular perception of salmon consumption. Enjoy reading!",
+      "link": "Read our report",
+      "target": "https://seastemik.org/publications"
     }
   }
 }

messages/en/pages/dashboard.json

@@ -154,7 +154,7 @@
           "microplastics": {
             "title": "Microplastic",
             "mainContent": "<p>Microplastics are particularly prevalent in salmon due to bioaccumulation in the food chain and the affinity of plastics for fats.</p>",
-            "content": "<p>This issue is especially significant for farmed salmon, which are considerably fattier and live in plastic-rich environments.</p><p>A 5 kg salmon contains approximately 532 microplastics. A French person consuming 4.4 kg of salmon annually ingests about 568 microplastics per year, out of a total of 97,500 from various sources.</p>",
+            "content": "<p>This issue is especially significant for farmed salmon, which are considerably fattier and live in plastic-rich environments.</p><p>A 5 kg salmon contains approximately 532 microplastics. A French person consuming 4.4 kg of salmon annually ingests about 468 microplastics per year, out of a total of 97,500 from various sources.</p>",
             "image": "en/microplastic.svg",
             "altImage": "532 microplastics per salmon (sorry, we only put 30).",
             "meta": {

messages/fr/layout.json

@@ -10,7 +10,8 @@
     },
     "footer": {
       "allRight": "Tous droits réservés",
-      "and": "et"
+      "and": "et",
+      "donation": "Faire un don"
     }
   },
   "siteConfig": {

messages/fr/pages/act.json

@@ -14,7 +14,7 @@
       "title": "Je dis non au projet d’usine à saumons sur mon territoire",
       "content": "Le projet de ferme-usine de saumons à terre dénommé « Pure Salmon », initiative du fonds d’investissement singapourien 8F Asset Management, est en discussion près de Bordeaux. Grâce aux pétitions signées par les citoyen·ne·s, il a notamment été retoqué au Pas-de-Calais et en Bretagne. Continuons !",
       "link": "Signer la pétition",
-      "target": "https://www.change.org/p/pour-l-abandon-du-projet-d-%C3%A9levage-intensif-terrestre-de-saumons-par-pure-salmon?recruiter=1321544874&recruited_by_id=817c01c0-813d-11ee-b093-0193942f59ac&utm_source=share_petition&utm_campaign=psf_combo_share_initial&utm_medium=copylink&utm_content=cl_sharecopy_35465639_fr-FR%3A5"
+      "target": "https://www.wesign.it/fr/environnement/non-a-lelevage-intensif-de-saumons-au-verdon-sur-mer"
     },
     "seastemik": {
       "title": "Je soutiens Seastemik",
@@ -36,7 +36,15 @@
     },
     "eat": {
       "title": "Je laisse les saumons en dehors de mon assiette",
-      "content": "Prêt·e·s à se mettre en chemin pour laisser les saumons dans les océans et les rivières ? Quel objectif vous semble atteignable ? Laissez-le nous dans notre boîte à intentions pour faire grandir la communauté !"
+      "content": "Prêt·e·s à se mettre en chemin pour laisser les saumons dans les océans et les rivières ? Quel objectif vous semble atteignable ? Laissez-le nous dans notre boîte à intentions pour faire grandir la communauté !",
+      "link": "Je participe",
+      "target": "https://forms.gle/c6fGdknx8jr4rmq96"
+    },
+    "report": {
+      "title": "S'éduquer et transmettre pour mieux agir",
+      "content": "Lire et partager le rapport de Seastemik sur l’industrie du saumon permet de déconstruire la perception populaire déformée autour de la consommation de saumons. Bonne lecture !",
+      "link": "Consulter notre rapport",
+      "target": "https://seastemik.org/publications"
     }
   }
 }

messages/fr/pages/dashboard.json

@@ -154,7 +154,7 @@
           "microplastics": {
             "title": "Microplastiques",
             "mainContent": "<p>Les microplastiques sont particulièrement présents dans le saumon en raison de la bioaccumulation dans la chaîne alimentaire et de l'affinité des plastiques pour les graisses.</p>",
-            "content": "<p>Cela affecte surtout les saumons d'élevage, qui sont nettement plus gras et vivent dans des environnements riches en plastiques.</p><p>Un saumon de 5 kg contient environ 532 microplastiques. Une personne française consommant 4.4 kg de saumon par an ingère environ 568 microplastiques par an sur un total de 97,500 provenant de différentes sources.</p>",
+            "content": "<p>Cela affecte surtout les saumons d'élevage, qui sont nettement plus gras et vivent dans des environnements riches en plastiques.</p><p>Un saumon de 5 kg contient environ 532 microplastiques. Une personne française consommant 4.4 kg de saumon par an ingère environ 468 microplastiques par an sur un total de 97,500 provenant de différentes sources.</p>",
             "image": "fr/microplastic.svg",
             "altImage": "532 microplastiques par saumon (sorry on n'en a mis que 30).",
             "meta": {

src/app/[locale]/page.tsx

@@ -22,6 +22,7 @@ const HomePage = () => {
       <IntroBlock title={t("title")} image="/images/salmon.svg" />
 
       <BombSection />
+      <VideoSection />
       <ExplodeSection />
       <EditoSection />
       <BusinessSection />
@@ -111,6 +112,24 @@ const ExplodeSection = () => {
   );
 };
 
+const VideoSection = () => {
+  return (
+    <div className="p-6 lg:px-12 lg:pt-36 lg:pb-64 text-red1 bg-pink1">
+      <div className="max-w-[1500px] mx-auto">
+        <div className="pt-[56.25%] relative">
+          <iframe
+            src="https://player.vimeo.com/video/1016205305?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"
+            allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
+            className="absolute top-0 left-0 w-full h-full"
+            title="Pinkbombs"
+          />
+        </div>
+        <script src="https://player.vimeo.com/api/player.js"></script>
+      </div>
+    </div>
+  );
+};
+
 const EditoSection = () => {
   const t = useTranslations("story");
 

src/app/[locale]/to-act/act.tsx

@@ -51,11 +51,18 @@ const Act = () => {
         title={t("eat.title")}
         titleLevel="h2"
         content={t("eat.content")}
+        ctas={[
+          {
+            label: t("eat.link"),
+            target: t("eat.target"),
+            isBlank: true,
+          },
+        ]}
         className="bg-pink1"
         contentPosition="right"
         mode="light"
         image={{
-          src: "/images/act/no-eat-salmon.jpeg",
+          src: "/images/act/citizens.jpg",
         }}
       />
 
@@ -88,6 +95,25 @@ const Act = () => {
         }}
       />
 
+      <Edito
+        title={t("report.title")}
+        titleLevel="h2"
+        content={t("report.content")}
+        ctas={[
+          {
+            label: t("report.link"),
+            target: t("report.target"),
+            isBlank: true,
+          },
+        ]}
+        className="bg-pink1"
+        contentPosition="right"
+        mode="light"
+        image={{
+          src: "/images/act/seastemik-report.png",
+        }}
+      />
+
       <JoinBlock
         isAlternative
         className="pt-6 lg:pt-24 bg-brown1 lg:bg-darkblue1"

src/components/layout/Footer.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image";
 import { useTranslations } from "next-intl";
 
+import MainLink from "@/components/links/MainLink";
 import ShareLink from "@/components/links/shareLink";
 
 const currentYear = new Date().getFullYear();
@@ -75,6 +76,24 @@ const Footer = () => {
               name="Data for Good"
             />
           </div>
+
+          <div className="self-end lg:ml-auto w-full md:w-auto">
+            <MainLink
+              label={t("footer.donation")}
+              href="https://www.helloasso.com/associations/seastemik/formulaires/1"
+              mode="base"
+              className="mb-4"
+              isBlank
+            />
+            <Image
+              loading="lazy"
+              src="/images/pinkbomb-seastemik-dataforgood.svg"
+              width={400}
+              height={100}
+              alt=""
+              className="object-contain"
+            />
+          </div>
         </div>
 
         <p className="p-caption mt-6 lg:mt-12">