fixed: review

dataforgoodfr · Oct 9, 2024 · e974800 · e974800
1 parent a662b35
commit e974800
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 45 deletions.
diff --git a/messages/en/pages/about.json b/messages/en/pages/about.json
@@ -10,7 +10,22 @@
     },
     "who": {
       "title": "Who are we?",
-      "content": "<p>PinkBombs is the result of a collaboration between two non-profit organizations, Seastemik and DataforGood .</p><ul><li><strong>Seastemik</strong> is an NGO founded in 2023 by a collective of optimists concerned about the state of the oceans, the primary source of life on Earth. By raising awareness among civil society and engaging the responsibility of intermediary actors (large-scale retail and collective catering) and the State, our mission is to drive a transition towards a healthy, accessible, and sustainable food system that respects the oceans, human societies, and animals.</li><li><b>Data For Good</b> is a French NGO whose aim is to help projects of general interest to develop. Thanks to a community of over 4,000 tech-savvy volunteers, a dozen projects a year are supported and developed for over 3 months.</li></ul><p><b>Thank you!</b> We would like to express our deep gratitude to each of these individuals who gave their time and expertise to enable the creation of the project, from its conception to its implementation: Adrien Brogniet, Agathe Arnould, Antoine Rogeau, Béatrice Chetard, Charlotte Eckstein, Charlotte Martinez, Erin Pacquetet, Gaëlle Nordström-Schüler, Giuseppe Guarino, Jade Fath, Julie Lasserre, Malena Guallar, Marie Courraud, Maud Ges, Maxime Schroder, Mélanie Beraud, Nadezda Berzina, Nelson Carvalho, Nicolas Berthozat, Oumeima El Isbihani, Paul Pajot, Paul Tenaillon, Quentin Deltour, Sandrine Dimitriadis, Sarah Rieubland, Solène Richard, Thomas Catinaud Taris, Vincent Martin.</p>"
+      "content": {
+        "first": "PinkBombs is the result of a collaboration between two non-profit organizations, Seastemik and DataforGood.",
+        "parts": {
+          "seastemik": {
+            "title": "Seastemik",
+            "content": "<p><strong>Seastemik</strong> is an NGO founded in 2023 that is committed to a living Ocean through a systemic revolution in our food. We are working to end unsustainable aquaculture practices, particularly intensive salmon farming, for better protection of humans, animals and ecosystems.",
+            "link": "See the Seastemik website"
+          },
+          "dataforgood": {
+            "title": "Data for Good",
+            "content": "<strong>Data for Good</strong> is a French NGO whose goal is to help projects of general interest to develop. Thanks to a community of more than 4,000 volunteers skilled in technology, a dozen projects are supported and developed for more than 3 months.",
+            "link": "See the Data for Good website"
+          }
+        },
+        "last": "<strong>A huge thank you</strong> to the volunteers who put their talents and time to make this project possible: Adrien Brogniet, Agathe Arnould, Antoine Rogeau, Béatrice Chetard, Charlotte Eckstein, Charlotte Martinez, Erin Pacquetet, Gaëlle Nordström-Schüler, Giuseppe Guarino, Jade Fath, Julie Lasserre, Malena Guallar, Marie Courraud, Maud Ges, Maxime Schroder, Mélanie Beraud, Nadezda Berzina, Nelson Carvalho, Nicolas Berthozat, Oumeima El Isbihani, Paul Pajot, Paul Tenaillon, Quentin Deltour, Sandrine Dimitriadis, Sarah Rieubland, Solène Richard, Thomas Catinaud Taris, Vincent Martin. Eternal gratitude."
+      }
     },
     "methods": {
       "title": "Approach",

diff --git a/messages/en/pages/act.json b/messages/en/pages/act.json
@@ -18,9 +18,21 @@
     },
     "seastemik": {
       "title": "I support Seastemik",
-      "content": "Seastemik is an association created in 2023 with the objective of accelerating our transition to a healthy ocean.<br />To mobilize on the ground, it works to raise community awareness, accessibility of information and proposal of solutions.",
-      "link": "Contribute on HelloAsso",
-      "target": "https://www.helloasso.com/associations/seastemik/formulaires/1"
+      "content": "Seastemik is an association poum created in 2023 with the objective of accelerating our transition to a healthy Ocean. It raises awareness of the impacts of a food system that exploits the Ocean, supports citizen mobilizations, calls on politicians to get involved and supports the iodine revolution of companies by proposing positive solutions.<br />Every action counts! Join the wave of change and help Seastemik change the tide, for a <em>truly</em> living Ocean:",
+      "ctas": [
+        {
+          "label": "Donate on HelloAsso",
+          "target": "https://www.helloasso.com/associations/seastemik/formulaires/1"
+        },
+        {
+          "label": "Subscribe to the newsletter",
+          "target": "https://seastemik.org/newsletter"
+        },
+        {
+          "label": "Follow Seastemik",
+          "target": "https://seastemik.org/"
+        }
+      ]
     },
     "eat": {
       "title": "I leave salmon off my plate",

diff --git a/messages/fr/pages/about.json b/messages/fr/pages/about.json
@@ -15,7 +15,7 @@
         "parts": {
           "seastemik": {
             "title": "Seastemik",
-            "content": "<p><strong>Seastemik</strong> est une ONG fondée en 2023 par un collectif d'optimistes préoccupés par l'état des océans. En sensibilisant la société civile et en engageant la responsabilité des acteurs intermédiaires (grande distribution et restauration collective) et de l'État, notre mission est de favoriser une transition vers un système alimentaire sain, accessible et durable.",
+            "content": "<p><strong>Seastemik</strong> est une ONG fondée en 2023 qui s’engage pour un Océan vivant à travers une révolution systémique de notre alimentation. Nous travaillons à mettre fin aux pratiques d’aquaculture non durables, en particulier les élevages intensifs de saumons, pour une meilleure protection des humains, des animaux et des écosystèmes.",
             "link": "Voir le site de Seastemik"
           },
           "dataforgood": {

diff --git a/messages/fr/pages/act.json b/messages/fr/pages/act.json
@@ -18,9 +18,21 @@
     },
     "seastemik": {
       "title": "Je soutiens Seastemik",
-      "content": "Seastemik est une association créée en 2023 avec l’objectif d’accélérer notre transition vers un Océan en bonne santé.<br /> Elle sensibilise sur les impacts d'un système alimentaire qui exploite l'Océan, soutient les mobilisations citoyennes, appelle les politiques à s'engager et accompagne la révolution iodée des entreprises en proposant des solutions positives.",
-      "link": "Contribuer sur HelloAsso",
-      "target": "https://www.helloasso.com/associations/seastemik/formulaires/1"
+      "content": "Seastemik est une association créée en 2023 avec l’objectif d’accélérer notre transition vers un Océan en bonne santé. Elle sensibilise sur les impacts d'un système alimentaire qui exploite l'Océan, soutient les mobilisations citoyennes, appelle les politiques à s'engager et accompagne la révolution iodée des entreprises en proposant des solutions positives.<br />Chaque action compte ! Rejoignez la vague du changement et aidez Seastemik à changer de courant, pour un Océan <em>vraiment</em> vivant :",
+      "ctas": [
+        {
+          "label": "Faire un don sur HelloAsso",
+          "target": "https://www.helloasso.com/associations/seastemik/formulaires/1"
+        },
+        {
+          "label": "S’inscrire à la newsletter",
+          "target": "https://seastemik.org/newsletter"
+        },
+        {
+          "label": "Suivre Seastemik",
+          "target": "https://seastemik.org/"
+        }
+      ]
     },
     "eat": {
       "title": "Je laisse les saumons en dehors de mon assiette",

diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
@@ -118,15 +118,15 @@ const EditoSection = () => {
     {
       title: t("edito.biodiversity.title"),
       content: t("edito.biodiversity.content"),
-      link: "/dashboard#biodiversity-section",
+      ctas: [{ target: "/dashboard#biodiversity-section", hasIcon: true }],
       image: {
         src: "/images/storytelling/biodiversity-hd.webp",
       },
     },
     {
       title: t("edito.health.title"),
       content: t("edito.health.content"),
-      link: "/dashboard#health-section",
+      ctas: [{ target: "/dashboard#health-section", hasIcon: true }],
       image: {
         src: "/images/storytelling/health.jpg",
         caption: t("edito.health.credit"),
@@ -135,23 +135,23 @@ const EditoSection = () => {
     {
       title: t("edito.climat.title"),
       content: t("edito.climat.content"),
-      link: "/dashboard#climate-section",
+      ctas: [{ target: "/dashboard#climate-section", hasIcon: true }],
       image: {
         src: "/images/storytelling/climate.jpg",
       },
     },
     {
       title: t("edito.social.title"),
       content: t("edito.social.content"),
-      link: "/dashboard#social-section",
+      ctas: [{ target: "/dashboard#social-section", hasIcon: true }],
       image: {
         src: "/images/storytelling/social.jpg",
       },
     },
     {
       title: t("edito.animals.title"),
       content: t("edito.animals.content"),
-      link: "/dashboard#animals-section",
+      ctas: [{ target: "/dashboard#animals-section", hasIcon: true }],
       image: {
         src: "/images/storytelling/animals.jpg",
       },

diff --git a/src/app/[locale]/to-act/act.tsx b/src/app/[locale]/to-act/act.tsx
@@ -19,10 +19,7 @@ const Act = () => {
         title={t("company.title")}
         titleLevel="h2"
         content={t("company.content")}
-        linkLabel={t("company.link")}
-        link={t("company.target")}
-        linkBlank
-        linkIcon={false}
+        ctas={[{label: t("company.link"), target:t("company.target"), isBlank: true}]}
         className="bg-pink1"
         contentPosition="right"
         mode="light"
@@ -35,10 +32,13 @@ const Act = () => {
         title={t("territory.title")}
         titleLevel="h2"
         content={t("territory.content")}
-        linkLabel={t("territory.link")}
-        link={t("territory.target")}
-        linkBlank
-        linkIcon={false}
+        ctas={[
+          {
+            label: t("territory.link"),
+            target: t("territory.target"),
+            isBlank: true,
+          },
+        ]}
         className="bg-pink1"
         contentPosition="right"
         mode="light"
@@ -62,11 +62,24 @@ const Act = () => {
       <Edito
         title={t("seastemik.title")}
         titleLevel="h2"
-        content={t("seastemik.content")}
-        linkLabel={t("seastemik.link")}
-        link={t("seastemik.target")}
-        linkBlank
-        linkIcon={false}
+        content={t.raw("seastemik.content")}
+        ctas={[
+          {
+            label: t("seastemik.ctas.0.label"),
+            target: t("seastemik.ctas.0.target"),
+            isBlank: true,
+          },
+          {
+            label: t("seastemik.ctas.1.label"),
+            target: t("seastemik.ctas.1.target"),
+            isBlank: true,
+          },
+          {
+            label: t("seastemik.ctas.2.label"),
+            target: t("seastemik.ctas.2.target"),
+            isBlank: true,
+          },
+        ]}
         className="bg-pink1"
         contentPosition="right"
         mode="light"

diff --git a/src/components/Edito.tsx b/src/components/Edito.tsx
@@ -16,10 +16,12 @@ type EditoProps = {
     caption?: string;
   };
   content: string;
-  link?: string;
-  linkLabel?: string;
-  linkBlank?: boolean;
-  linkIcon?: boolean;
+  ctas?: {
+    target: string;
+    label?: string;
+    isBlank?: boolean;
+    hasIcon?: boolean;
+  }[];
   contentPosition?: "left" | "right";
 };
 
@@ -30,10 +32,7 @@ const Edito = ({
   image,
   content,
   mode = "dark",
-  link,
-  linkLabel,
-  linkBlank = false,
-  linkIcon = true,
+  ctas,
   contentPosition = "left",
 }: EditoProps) => {
   const t = useTranslations("components");
@@ -53,14 +52,19 @@ const Edito = ({
             className="mt-3 lg:mt-6"
             dangerouslySetInnerHTML={{ __html: content }}
           />
-          {link ? (
-            <MainLink
-              label={linkLabel || t("edito.link")}
-              href={link}
-              mode="base"
-              isBlank={linkBlank}
-              hasIcon={linkIcon}
-            />
+          {ctas?.length ? (
+            <div className="flex flex-wrap gap-4 mt-4 lg:mt-8">
+              {ctas.map((cta, key) => (
+                <MainLink
+                  label={cta.label || t("edito.link")}
+                  href={cta.target}
+                  key={`edito-cta-${key}`}
+                  mode="base"
+                  isBlank={cta.isBlank}
+                  hasIcon={cta.hasIcon}
+                />
+              ))}
+            </div>
           ) : null}
         </div>
 

diff --git a/src/components/JoinBlock.tsx b/src/components/JoinBlock.tsx
@@ -78,7 +78,7 @@ const JoinBlock = ({
                   {
                     type: "data",
                     link: t(`join.${baseText}.data`),
-                    artifact: t("join.artifact"),
+                    artifact: t(`join.${baseText}.artifact`),
                   },
                   {
                     type: "image",

diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
@@ -37,7 +37,12 @@ const Navbar = () => {
   ];
 
   return (
-    <header className="lg:absolute left-0 top-0 z-10 w-full text-darkblue1 bg-pink1 lg:bg-transparent">
+    <header
+      className={clsx(
+        "lg:fixed left-0 top-0 z-10 w-full text-darkblue1",
+        /to-act/.test(pathname) ? "bg-yellow1" : "bg-pink1",
+      )}
+    >
       <div className="flex flex-wrap items-center justify-between gap-6 px-6 lg:px-12 py-3 lg:py-6">
         <Link href="/">
           <Image

diff --git a/src/components/links/MainLink.tsx b/src/components/links/MainLink.tsx
@@ -27,7 +27,7 @@ const MainLink = ({
   return (
     <Link
       className={clsx(
-        "group inline-flex items-center gap-2 mt-6 lg:mt-12 p-4 lg:text-xl text-red1 font-secondary uppercase !no-underline rounded-xl tracking-widest border-2 border-red1 transition-colors ease-in-out duration-100",
+        "group inline-flex items-center gap-2 p-4 lg:text-xl text-red1 font-secondary uppercase !no-underline rounded-xl tracking-widest border-2 border-red1 transition-colors ease-in-out duration-100",
         mode === "dark" &&
           "bg-darkblue1 text-red1 hover:bg-red1 hover:text-darkblue1",
         mode === "base" && "bg-red1 text-white hover:bg-darkblue1",