feat: add alternative bloc in act page

dataforgoodfr · Jun 13, 2024 · d90b64d · d90b64d
1 parent f61f6c5
commit d90b64d
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 38 deletions.
diff --git a/messages/en/components.json b/messages/en/components.json
@@ -22,11 +22,21 @@
       "second": "second"
     },
     "join": {
-      "title": "Be the change.",
-      "intro": "Don't want to be part of this ecological and social disaster? Good news, solutions exist!",
-      "content": "<p><strong>Governments, businesses, and citizens can work together to be part of these solutions.</strong></p><ul><li><strong>Governments</strong> an regulate to abandon intensive farming of carnivorous fish - such as salmon and tuna - and to stop overfishing worldwide.</li> <li><strong>Businesses</strong> must commit to increasing plant-based options and developing low-trophic level aquaculture, such as algae and shellfish.</li><li> <strong>Individually,</strong> let's make the simple choice to exclude industrial salmon from our plates, in order to collectively accelerate the revolution towards a more plant-based food system that meets health, sustainability, and social justice imperatives.</li></ul>",
-      "act": "To reverse the trend and stop the disaster, urgent action is needed. We have levers for action!",
-      "link": "We act"
+      "main": {
+        "title": "Be the change.",
+        "intro": "Don't want to be part of this ecological and social disaster? Good news, solutions exist!",
+        "content": "<p><strong>Governments, businesses, and citizens can work together to be part of these solutions.</strong></p><ul><li><strong>Governments</strong> an regulate to abandon intensive farming of carnivorous fish - such as salmon and tuna - and to stop overfishing worldwide.</li> <li><strong>Businesses</strong> must commit to increasing plant-based options and developing low-trophic level aquaculture, such as algae and shellfish.</li><li> <strong>Individually,</strong> let's make the simple choice to exclude industrial salmon from our plates, in order to collectively accelerate the revolution towards a more plant-based food system that meets health, sustainability, and social justice imperatives.</li></ul>",
+        "act": "To reverse the trend and stop the disaster, urgent action is needed. We have levers for action!",
+        "link": "We act"
+      },
+      "alternatives": {
+        "title": "Food choices and their impact",
+        "intro": "What we choose to eat, sell, and produce has different impacts on the planet, people, and animals.",
+        "content": "<p>France, being among the top 4 largest consumers of salmon in the world, bears a particular responsibility in influencing these choices.</p>",
+        "pdf": "https://raw.githubusercontent.com/dataforgoodfr/12_pinkbombs/main/download/Alternatives_Methodogy_en.pdf",
+        "data": "https://raw.githubusercontent.com/dataforgoodfr/12_pinkbombs/main/download/csv/alternatives_text_7.csv.zip",
+        "artifact": "alternatives_text_7.csv.zip"
+      }
     },
     "metaChart": {
       "source": "Main source",

diff --git a/messages/fr/components.json b/messages/fr/components.json
@@ -22,11 +22,21 @@
       "second": "seconde"
     },
     "join": {
-      "title": "Be the change.",
-      "intro": "Vous ne voulez pas participer à cette bombe écologique et sociale ? Bonne nouvelle, les solutions existent !",
-      "content": "<p><strong>L’État, les entreprises et les citoyen·nes peuvent - ensemble - faire partie de ces solutions.</strong></p><ul><li><strong>L'État</strong> peut réguler pour abandonner l'élevage intensif de poissons carnivores - tels que les saumons et les thons - et pour arrêter la surpêche dans le monde.</li> <li>Les <strong>entreprises</strong> doivent s'engager pour plus végétaliser les assiettes et développer une aquaculture de faible niveau trophique, comme les algues et les coquillages.</li><li> <strong>Individuellement</strong> faisons le choix simple d'exclure le saumon industriel de nos assiettes afin d'accélérer collectivement la révolution vers un système alimentaire plus végétal qui répond aux impératifs de santé, de durabilité et de justice sociale.</li></ul>",
-      "act": "Pour inverser la tendance et stopper le désastre, il est urgent d’agir. On a des leviers d’action ! ",
-      "link": "On agit"
+      "main": {
+        "title": "Be the change.",
+        "intro": "Vous ne voulez pas participer à cette bombe écologique et sociale ? Bonne nouvelle, les solutions existent !",
+        "content": "<p><strong>L’État, les entreprises et les citoyen·nes peuvent - ensemble - faire partie de ces solutions.</strong></p><ul><li><strong>L'État</strong> peut réguler pour abandonner l'élevage intensif de poissons carnivores - tels que les saumons et les thons - et pour arrêter la surpêche dans le monde.</li> <li>Les <strong>entreprises</strong> doivent s'engager pour plus végétaliser les assiettes et développer une aquaculture de faible niveau trophique, comme les algues et les coquillages.</li><li> <strong>Individuellement</strong> faisons le choix simple d'exclure le saumon industriel de nos assiettes afin d'accélérer collectivement la révolution vers un système alimentaire plus végétal qui répond aux impératifs de santé, de durabilité et de justice sociale.</li></ul>",
+        "act": "Pour inverser la tendance et stopper le désastre, il est urgent d’agir. On a des leviers d’action ! ",
+        "link": "On agit"
+      },
+      "alternatives": {
+        "title": "Choix alimentaires et leurs impacts",
+        "intro": "Ce que nous choisissons de manger, de vendre et de produire à des impacts différents sur la planète, les gens et les animaux.",
+        "content": "<p>La France, située dans le top 4 des plus grands consommateurs de saumons au monde, porte une responsabilité particulière dans l'orientation de ces choix.</p>",
+        "pdf": "https://raw.githubusercontent.com/dataforgoodfr/12_pinkbombs/main/download/Alternatives_Methodogie_fr.pdf",
+        "data": "https://raw.githubusercontent.com/dataforgoodfr/12_pinkbombs/main/download/csv/alternatives_text_7_fr.csv.zip",
+        "artifact": "alternatives_text_7.csv.zip"
+      }
     },
     "metaChart": {
       "source": "Source principale",

diff --git a/src/app/[locale]/to-act/act.tsx b/src/app/[locale]/to-act/act.tsx
@@ -6,6 +6,7 @@ import "@/lib/env";
 
 import Edito from "@/components/Edito";
 import IntroBlock from "@/components/IntroBlock";
+import JoinBlock from "@/components/JoinBlock";
 
 const Act = () => {
   const t = useTranslations("act");
@@ -67,6 +68,11 @@ const Act = () => {
           large: "/images/act/no-eat-salmon.jpeg",
         }}
       />
+
+      <JoinBlock
+        isAlternative
+        className="pt-6 lg:pt-24 bg-brown1 lg:bg-darkblue1"
+      />
     </>
   );
 };

diff --git a/src/components/JoinBlock.tsx b/src/components/JoinBlock.tsx
@@ -1,21 +1,33 @@
 import clsx from "clsx";
+import dynamic from "next/dynamic";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
 import React from "react";
 
+const Chart = dynamic(() => import("@/components/Chart"), {
+  ssr: false,
+});
+
 import PrimaryButton from "@/components/buttons/PrimaryButton";
+import MetaChart from "@/components/MetaChart";
 
-const IntroBlock = ({
-  className,
-  headDark = true,
-}: {
+type JoinBlockProps = {
   className?: string;
+  isAlternative?: boolean;
   headDark?: boolean;
-}) => {
+};
+
+const JoinBlock = ({
+  className,
+  headDark = true,
+  isAlternative = false,
+  ...rest
+}: JoinBlockProps) => {
   const t = useTranslations("components");
+  const baseText = isAlternative ? "alternatives" : "main";
 
   return (
-    <div id="alternatives-block" className={className}>
+    <div id="alternatives-block" className={className} {...rest}>
       <div
         className={clsx(
           "lg:bg-[url('/images/wave.svg')] bg-no-repeat bg-center bg-[length:3200px_272px]",
@@ -34,43 +46,70 @@ const IntroBlock = ({
           )}
           lang="en"
         >
-          {t("join.title")}
+          {t(`join.${baseText}.title`)}
         </h2>
       </div>
       <div className="px-6 lg:px-12 pb-6 lg:pb-24 text-darkblue1 bg-brown1">
         <div className="max-w-[1500px] mx-auto">
           <p className={clsx("h3", "pb-4 md:pb-8 max-w-3xl")}>
-            {t("join.intro")}
+            {t(`join.${baseText}.intro`)}
           </p>
-          {/* <div className="pb-4 md:pb-16 max-w-3xl">{t.raw("join.content")}</div> */}
           <div
             className="pb-4 md:pb-16 max-w-3xl prose"
-            dangerouslySetInnerHTML={{ __html: t.raw("join.content") }}
+            dangerouslySetInnerHTML={{
+              __html: t.raw(`join.${baseText}.content`),
+            }}
           />
+          {isAlternative && (
+            <>
+              <Chart id="alternatives" height={700} />
+              <MetaChart
+                hasBackground={false}
+                data={[
+                  {
+                    type: "document",
+                    link: t("join.pdf"),
+                    isBlank: true,
+                  },
+                  {
+                    type: "methodology",
+                    link: "/about#alternatives-section",
+                  },
+                  {
+                    type: "data",
+                    link: t("join.data"),
+                    artifact: t("join.artifact"),
+                  },
+                ]}
+              />
+            </>
+          )}
         </div>
       </div>
 
-      <div className="p-6 md:p-12 xl:py-32 bg-yellow1 text-darkblue1">
-        <div className="m-auto md:max-w-xl xl:max-w-4xl text-center font-secondary tracking-widest uppercase">
-          <Image
-            className="inline-block object-contain w-48 md:w-64 xl:w-[692px]"
-            src="/images/eyes.svg"
-            alt=""
-            loading="lazy"
-            width={692}
-            height={134}
-          />
+      {!isAlternative && (
+        <div className="p-6 md:p-12 xl:py-32 bg-yellow1 text-darkblue1">
+          <div className="m-auto md:max-w-xl xl:max-w-4xl text-center font-secondary tracking-widest uppercase">
+            <Image
+              className="inline-block object-contain w-48 md:w-64 xl:w-[692px]"
+              src="/images/eyes.svg"
+              alt=""
+              loading="lazy"
+              width={692}
+              height={134}
+            />
 
-          <p className="h3 mt-6 xl:mt-10">{t("join.act")}</p>
+            <p className="h3 mt-6 xl:mt-10">{t(`join.${baseText}.act`)}</p>
 
-          <PrimaryButton
-            href="/to-act"
-            content={t("join.link")}
-            className="mt-6 xl:mt-10"
-          />
+            <PrimaryButton
+              href="/to-act"
+              content={t(`join.${baseText}.link`)}
+              className="mt-6 xl:mt-10"
+            />
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };
-export default IntroBlock;
+export default JoinBlock;