Update text

messages/en/pages/about.json

@@ -6,15 +6,17 @@
     "title": "About",
     "why": {
       "title": "Why PinkBombs?",
-      "content": "<p>We are in a state of ocean emergency. The ocean, being Earth's primary life source, is under growing threat due to our human activities. Overfishing stands as the leading cause of biodiversity loss. Salmon, emblematic of intensive farming, is particularly affected. There is therefore an urgent need to change the food system to protect marine ecosystems, animal and human health.</p><p>PinkBombs is there to:</p><ul><li>Address one of the biggest threats to the oceans today: Salmon farming.</li><li>Deconstruct the distorted popular perception of salmon.</li><li>Provide guidance to professionals and consumers towards alternatives.</li></ul>"
+      "content": "<p>We are in a state of <b>ocean emergency</b>. The ocean, being Earth's primary life source, is under growing threat due to our human activities. <b>Overfishing</b> stands as the leading cause of biodiversity loss. Salmon, emblematic of <b>intensive fish farming</b>, is particularly affected. There is therefore an urgent need to change the food system to protect marine ecosystems, animal and human health.</p><p>PinkBombs is there to:</p><ul><li>Address one of the biggest threats to the oceans today: Salmon farming.</li><li>Deconstruct the distorted popular perception of salmon.</li><li>Provide guidance to professionals and consumers towards alternatives.</li></ul>"
     },
     "who": {
-      "title": "Who we are?",
-      "content": "<p>PinkBombs is the result of a collaboration between two non-profit organizations, Seastemik and DataforGood.</p><p><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.</p><p><strong>Data For Good</strong> is a French NGO whose aim is to help projects of general interest to develop. Thanks to a community of over 4000 tech-savvy volunteers, a dozen projects a year are supported and developed for over 3 months.</p>"
+      "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>"
     },
     "methods": {
-      "title": "Approach & methodologies",
-      "content": "<p>PinkBombs was created by a consortium of non-profit organizations that analyze and transform public data into accessible tools to raise awareness of the key levers for halting the ocean emergency.</p><p>Our approach is based on three pillars:</p><ol><li>Open source: the code is available here.</li><li>Collaborative: Reach out to contribute or suggest improvements.</li><li>Dynamic: Our database is regularly updated to incorporate new insights and to enhance its accuracy.</li></ol><p>Our approach followed three steps:</p><ol><li>Prioritized topics: The aim of the website being to offer a compilation of the most striking information on the subject, the organization set out to prioritize the subjects to be tackled. Then each volunteer chose the subjects they wanted to tackle alone or in groups.</li><li>In-depth research: Research is carried out on the internet and by contacting experts, taking care to use only scientific sources and not to use information from unreliable sources or without sourced or scientific support.</li><li>Peer reviewed data: In the interest of data quality, all information is double-checked by another volunteer or member of the Seastemik organization (source and formulation).</li></ol>"
+      "title": "Approach",
+      "content": "<p>PinkBombs was created by a consortium of non-profit organizations that analyze and transform public data into accessible tools to raise awareness of the key levers for halting the ocean emergency.</p><p>Our approach is based on three pillars:</p><ol><li><b>Open source</b>: all the data is available on the platform.</li><li><b>Collaborative</b>: Reach out to contribute or suggest improvements.</li><li><b>Dynamic</b>: Our database is regularly updated to incorporate new insights and to enhance its accuracy.</li></ol><p>Our approach followed three steps:</p><ol><li><b>Prioritized topics</b>: The aim of the website being to offer a compilation of the most striking information on the subject, the organization set out to prioritize the subjects to be tackled. Then each volunteer chose the subjects they wanted to tackle alone or in groups.</li><li><b>In-depth research</b>: Research is carried out on the internet and by contacting experts, taking care to use only scientific sources and not to use information from unreliable sources or without sourced or scientific support.</li><li><b>Peer reviewed data</b>: In the interest of data quality, all information is double-checked by another volunteer or member of the Seastemik organization (source and formulation).</li></ol>",
+      "link": "Contact us",
+      "target": "https://seastemik.org/nous-ecrire"
     },
     "sources": "Sources & Methodology",
     "statement": {

messages/fr/pages/about.json

@@ -6,15 +6,17 @@
     "title": "À propos",
     "why": {
       "title": "Pourquoi PinkBombs ?",
-      "content": "<p>Nous sommes face à une urgence océanique. L'océan, principale source de vie sur Terre, est de plus en plus menacé par nos activités humaines. La surpêche est la principale cause de perte de biodiversité marine. Le saumon, emblématique de l'aquaculture intensive, génère des impacts multiples à l’échelle mondiale. Il est donc urgent de changer le système alimentaire pour protéger les écosystèmes marins, la santé animale et humaine.</p><p>PinkBombs est là pour :</p><ul><li>S’attaquer à l'une des plus grandes menaces pour les océans aujourd'hui : l'élevage de saumons.</li><li>Déconstruire la perception populaire déformée autour du saumon.</li><li>Orienter les professionnels et les consommateurs vers des alternatives.</li></ul>"
+      "content": "<p>Nous sommes face à une <b>urgence océanique</b>. L'océan, principale source de vie sur Terre, est de plus en plus menacé par nos activités humaines. La <b>surpêche</b> est la principale cause de perte de biodiversité marine. Le saumon, emblématique de <b>l'aquaculture intensive</b>, génère des impacts multiples à l’échelle mondiale. Il est donc urgent de <b>changer le système alimentaire</b> pour protéger les écosystèmes marins, la santé animale et humaine.</p><p>PinkBombs est là pour :</p><ul><li>S’attaquer à l'une des plus grandes <b>menaces</b> pour les <b>océans</b> aujourd'hui : l'élevage de saumons.</li><li>Déconstruire la <b>perception</b> populaire <b>déformée</b> autour du saumon.</li><li>Orienter les professionnels, les États et les consommateurs vers des <b>solutions</b>.</li></ul>"
     },
     "who": {
       "title": "Qui sommes-nous ?",
-      "content": "<p>PinkBombs est le fruit d'une collaboration entre deux organisations à but non lucratif, Seastemik et DataforGood.</p><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.</p><p><strong>Data For Good</strong> est une ONG française dont le but est d'aider les projets d'intérêt général à se développer. Grâce à une communauté de plus de 4000 bénévoles compétents en technologie, une douzaine de projets sont soutenus et développés pendant plus de 3 mois.</p>"
+      "content": "<p>PinkBombs est le fruit d'une collaboration entre deux organisations à but non lucratif, Seastemik et DataforGood.</p><ul><li><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.</li><li><b>Data For Good</b> est une ONG française dont le but est d'aider les projets d'intérêt général à se développer. Grâce à une communauté de plus de 4000 bénévoles compétents en technologie, une douzaine de projets sont soutenus et développés pendant plus de 3 mois.</li></ul><p><b>Un immense merci</b> aux volontaires qui ont mis leurs talents et leur temps pour permettre à ce projet de voir le jour : 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. Gratitude éternelle.</p>"
     },
     "methods": {
-      "title": "Approche et démarche",
-      "content": "<p>PinkBombs a été créé pour analyser et transformer les données publiques en outils accessibles à tous.</p><p>Notre approche repose sur trois valeurs :</p><ol><li>Open source : le code et la data sont disponibles ici.</li><li>Collaboratif : contactez-nous pour contribuer ou suggérer des améliorations.</li><li>Dynamique : Notre base de données est régulièrement mise à jour pour intégrer de nouvelles perspectives et améliorer sa précision.</li></ol><p>Notre démarche a suivi trois étapes :</p><ol><li>Identifications des sujets prioritaires : L'objectif du site étant d'offrir une compilation des informations les plus frappantes sur le sujet, l'organisation a commencé par prioriser les sujets à aborder.</li><li>Recherche approfondie : Une recherche documentaire a été menée sur Internet et en contactant des experts, en prenant soin d'utiliser uniquement des sources scientifiques ou issues d’organisations internationales renommées.</li><li>Données évaluées par des pairs : Dans l'intérêt de la qualité des données, toutes les informations ont été vérifiées en interne. Un soutien d’experts à permis la validation finale.</li></ol>"
+      "title": "Approche",
+      "content": "<p>PinkBombs a été créé pour analyser et transformer les données publiques en outils accessibles à tous.</p><p>Notre approche repose sur trois valeurs :</p><ol><li><b>Open source</b> : les datas sont disponibles.</li><li><b>Collaboratif</b> : contactez-nous pour contribuer ou suggérer des améliorations.</li><li><b>Dynamique</b> : Notre base de données est régulièrement mise à jour pour intégrer de nouvelles perspectives et améliorer sa précision.</li></ol><p>Notre démarche a suivi trois étapes :</p><ol><li><b>Identifications des sujets prioritaires</b> : L'objectif du site étant d'offrir une compilation des informations les plus frappantes sur le sujet, l'organisation a commencé par prioriser les sujets à aborder.</li><li><b>Recherche approfondie</b> : Une recherche documentaire a été menée sur Internet et en contactant des experts, en prenant soin d'utiliser uniquement des sources scientifiques ou issues d’organisations internationales renommées.</li><li><b>Données évaluées par des pairs</b> : Dans l'intérêt de la qualité des données, toutes les informations ont été vérifiées en interne. Un soutien d’experts à permis la validation finale.</li></ol><p>Nous avons oublié des informations clés ? Vous avez une question ? Veuillez nous contacter.</p>",
+      "link": "Contactez-nous",
+      "target": "https://seastemik.org/nous-ecrire"
     },
     "sources": "Sources & méthodologies",
     "statement": {

src/app/[locale]/about/about.tsx

@@ -54,7 +54,11 @@ const ExplainSection = () => {
         id="methods-section-title"
         title={t("methods.title")}
       />
-      <AboutSection content={t.raw("methods.content")} />
+      <AboutSection
+        content={t.raw("methods.content")}
+        linkLabel={t("methods.link")}
+        link={t("methods.target")}
+      />
     </>
   );
 };

src/components/AboutSection.tsx

@@ -1,19 +1,30 @@
 import clsx from "clsx";
+import { useTranslations } from "next-intl";
 import React from "react";
 
+import MainLink from "@/components/links/MainLink";
+
+type AboutSectionProps = {
+  content?: string;
+  className?: string;
+  title?: string;
+  subtitle?: string;
+  id?: string;
+  link?: string;
+  linkLabel?: string;
+};
+
 const AboutSection = ({
   content,
   className = "",
   title,
   subtitle,
   id = "",
-}: {
-  content?: string;
-  className?: string;
-  title?: string;
-  subtitle?: string;
-  id?: string;
-}) => {
+  link,
+  linkLabel,
+}: AboutSectionProps) => {
+  const t = useTranslations("components");
+
   if (!content && !title && !subtitle) return <></>;
 
   return (
@@ -24,6 +35,16 @@ const AboutSection = ({
       {title && <h3>{title}</h3>}
       {subtitle && <h4>{subtitle}</h4>}
       {content && <div dangerouslySetInnerHTML={{ __html: content }} />}
+
+      {link ? (
+        <MainLink
+          href={link}
+          label={linkLabel || t("edito.link")}
+          isBlank
+          hasIcon
+          mode="light"
+        />
+      ) : null}
     </div>
   );
 };

src/components/links/MainLink.tsx

@@ -0,0 +1,69 @@
+import clsx from "clsx";
+import Link from "next/link";
+import React from "react";
+
+type MainLinkProps = {
+  className?: string;
+  href: string;
+  label: string;
+  mode?: "dark" | "light";
+  isBlank?: boolean;
+  hasIcon?: boolean;
+};
+
+const MainLink = ({
+  className,
+  href,
+  label,
+  mode = "dark",
+  isBlank = false,
+  hasIcon = false,
+  ...rest
+}: MainLinkProps) => {
+  if (!href || !label) {
+    return <></>;
+  }
+
+  return (
+    <Link
+      className={clsx(
+        "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 hover:bg-red1 hover:text-darkblue1 transition-colors ease-in-out duration-100",
+        mode === "dark" ? "bg-darkblue1" : "bg-transparent",
+        className,
+      )}
+      href={href}
+      rel={isBlank ? "noopener noreferrer" : undefined}
+      target={isBlank ? "_blank" : undefined}
+      {...rest}
+    >
+      {hasIcon && (
+        <svg
+          width="46"
+          height="26"
+          viewBox="0 0 46 26"
+          className="fill-transparent hidden lg:inline-block -scale-75"
+          aria-hidden="true"
+        >
+          <path
+            d="M23 1C11.0632 1 4.02632 9.72727 2 14.0909C5.5 17.7273 14.6 25 23 25C31.4 25 40.5 17.7273 44 14.0909C41.9737 9.72727 34.9368 1 23 1Z"
+            strokeWidth="2"
+            className="stroke-current"
+          />
+          <path
+            d="M30.8421 12.4546C30.8421 16.7099 27.3434 20.1818 23 20.1818C18.6566 20.1818 15.1579 16.7099 15.1579 12.4546C15.1579 8.1992 18.6566 4.72729 23 4.72729C27.3434 4.72729 30.8421 8.1992 30.8421 12.4546Z"
+            strokeWidth="2"
+            className="stroke-current"
+          />
+          <path
+            d="M26.4211 12.4546C26.4211 14.3 24.9018 15.8182 23 15.8182C21.0982 15.8182 19.5789 14.3 19.5789 12.4546C19.5789 10.6092 21.0982 9.09094 23 9.09094C24.9018 9.09094 26.4211 10.6092 26.4211 12.4546Z"
+            strokeWidth="2"
+            className="stroke-current"
+          />
+        </svg>
+      )}
+      {label}
+    </Link>
+  );
+};
+
+export default MainLink;