Dev

messages/en/pages/act.json

@@ -38,8 +38,7 @@
       "title": "I leave salmon off my plate",
       "content": "Ready to set out to leave salmon in the oceans and rivers? <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/5kNG7BDeZBQmq6vY9",
-      "image": "/images/act/no-eat-salmon.jpeg"
+      "target": "https://forms.gle/5kNG7BDeZBQmq6vY9"
     },
     "report": {
       "title": "Educate yourself and share to act better",

messages/fr/pages/act.json

@@ -38,8 +38,7 @@
       "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é !",
       "link": "Je participe",
-      "target": "https://forms.gle/5kNG7BDeZBQmq6vY9",
-      "image": "/images/act/citizens.jpg"
+      "target": "https://forms.gle/5kNG7BDeZBQmq6vY9"
     },
     "report": {
       "title": "S'éduquer et transmettre pour mieux agir",

messages/fr/pages/dashboard.json

@@ -11,7 +11,7 @@
           "salmon-collapse": {
             "title": "Effondrement des saumons atlantiques",
             "mainContent": "<p>Le saumon atlantique est inscrit sur la liste rouge de l’UICN : depuis décembre 2023, son statut est passé de “préoccupation mineure” à “quasi-menacé”.</p>",
-            "content": "<p>Les causes du déclin de l’espèce sont multiples : la surpêche en mer, la dégradation des habitats d’eau douce et la construction de nombreux obstacles à la migration, les effets du réchauffement climatique qui modifie leurs environnements, impactant leurs taux de croissance et de survie.</p><p>Les activités d’élevage sont également identifiées comme une des menace parmi les plus importantes pesant sur les populations sauvages (pollution marine, diffusion de maladies, et évasions de saumons d’élevage entraînant des croisements “génétiques” perturbant la capacité des saumons sauvages à survivre dans leur habitat naturel).</p>",
+            "content": "<p>Les causes du déclin de l’espèce sont multiples : la surpêche en mer, la dégradation des habitats d’eau douce et la construction de nombreux obstacles à la migration, les effets du réchauffement climatique qui modifie leurs environnements, impactant leurs taux de croissance et de survie.</p><p>Les activités d’élevage sont également identifiées comme une des menaces parmi les plus importantes pesant sur les populations sauvages (pollution marine, diffusion de maladies, et évasions de saumons d’élevage entraînant des croisements “génétiques” perturbant la capacité des saumons sauvages à survivre dans leur habitat naturel).</p>",
             "source": "anglais",
             "data": "https://raw.githubusercontent.com/dataforgoodfr/12_pinkbombs/main/download/csv/discrease_wild_salmon_1.1_fr.csv.zip",
             "artifact": "discrease_wild_salmon_1.1_fr.csv.zip",

messages/fr/pages/story.json

@@ -10,7 +10,7 @@
       },
       "climat": {
         "title": "Climat",
-        "content": "Génère une empreinte carbone collossale."
+        "content": "Génère une empreinte carbone colossale."
       },
       "health": {
         "title": "Santé",

src/app/[locale]/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import clsx from "clsx";
-import Image from "next/image";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import * as React from "react";
@@ -38,11 +37,8 @@ const BombSection = () => {
   const t = useTranslations("story");
 
   return (
-    <section className="flex p-6 lg:p-12 min-h-[300px] h-screen text-red1 bg-darkblue1">
+    <section className="flex p-6 lg:p-12 min-h-[300px] h-screen text-red2 bg-darkblue1 bg-[url('/images/background-bombs.svg')] bg-[length:800px_400px] sm:bg-[length:1000px_500px] lg:bg-cover bg-no-repeat bg-center">
       <div className="grid grid-rows-[1fr, auto, 1fr] w-full">
-        <div className="row-start-2 self-center justify-self-center  px-6 max-w-[766px] max-h-full object-contain">
-          <Image src="/images/bombs.svg" alt="" width={766} height={616} />
-        </div>
         <div className="row-start-3 self-end items-left flex gap-2 items-end">
           <p className={clsx("h1", "max-w-[1500px] mx-auto w-full")}>
             {t("bomb")}
@@ -57,57 +53,55 @@ const ExplodeSection = () => {
   const t = useTranslations("story");
 
   return (
-    <section className="flex items-center justify-center p-6 lg:p-12 lg:pt-24 lg:pb-48 2xl:py-24 text-red1 bg-darkblue1 min-h-screen">
-      <div className="relative">
-        <p className="mb-6 md:mb-12 mx-auto text-xl xl:absolute xl:left-[310px] xl:bottom-[100px] 3xl:left-[600px] 3xl:bottom-[200px] xl:max-w-96 text-center text-white">
-          {t("explode.intro")}
-        </p>
-        <ul
-          className="
-        grid grid-cols-1 xs:grid-cols-2 gap-8 list-none bg-no-repeat bg-center
+    <section className="flex flex-col items-center justify-center p-6 lg:p-12 lg:pt-24 lg:pb-48 2xl:py-24 text-red2 bg-darkblue1 min-h-screen">
+      <h2 className="h1 mb-12 lg:mb-24 max-w-[1500px] mx-auto">
+        {t("explode.intro")}
+      </h2>
+      <ul
+        className="
+        grid grid-cols-1 xs:grid-cols-2 gap-8 list-none bg-no-repeat bg-center relative
         xs:bg-[url(/images/explose-small.svg)] xs:bg-[length:438px_320px]
         xl:bg-[url(/images/explose.svg)]
         xl:w-[969px] xl:h-[829px] xl:bg-[length:727px_662px]
         3xl:w-[1515px] 3xl:h-[1190px] 3xl:bg-[length:969px_829px]
       "
-        >
-          <li className="xl:absolute xl:-left-[20px] xl:top-[180px] 3xl:left-[112px] 3xl:top-[330px]">
-            <IconCard
-              icon="/images/storytelling/icon-social.svg"
-              title={t("explode.social.title")}
-              content={t("explode.social.content")}
-            />
-          </li>
-          <li className="xl:absolute xl:left-[120px] xl:bottom-[20px] 3xl:left-[242px] 3xl:bottom-[180px]">
-            <IconCard
-              icon="/images/storytelling/icon-climate.svg"
-              title={t("explode.climat.title")}
-              content={t("explode.climat.content")}
-            />
-          </li>
-          <li className="xl:absolute xl:-right-[150px] xl:top-[50px] 3xl:-right-[100px] 3xl:top-[160px]">
-            <IconCard
-              icon="/images/storytelling/icon-health.svg"
-              title={t("explode.health.title")}
-              content={t("explode.health.content")}
-            />
-          </li>
-          <li className="xl:absolute xl:-right-[140px] xl:bottom-[140px] 3xl:-right-[80px] 3xl:bottom-[360px]">
-            <IconCard
-              icon="/images/storytelling/icon-biodiversity.svg"
-              title={t("explode.biodiversity.title")}
-              content={t("explode.biodiversity.content")}
-            />
-          </li>
-          <li className="xl:absolute xl:right-[100px] xl:-bottom-[120px] 3xl:right-[340px] 3xl:bottom-[10px]">
-            <IconCard
-              icon="/images/storytelling/icon-animals.svg"
-              title={t("explode.animals.title")}
-              content={t("explode.animals.content")}
-            />
-          </li>
-        </ul>
-      </div>
+      >
+        <li className="xl:absolute xl:-left-[20px] xl:top-[180px] 3xl:left-[112px] 3xl:top-[330px]">
+          <IconCard
+            icon="/images/storytelling/icon-social.svg"
+            title={t("explode.social.title")}
+            content={t("explode.social.content")}
+          />
+        </li>
+        <li className="xl:absolute xl:left-[120px] xl:bottom-[20px] 3xl:left-[242px] 3xl:bottom-[180px]">
+          <IconCard
+            icon="/images/storytelling/icon-climate.svg"
+            title={t("explode.climat.title")}
+            content={t("explode.climat.content")}
+          />
+        </li>
+        <li className="xl:absolute xl:-right-[150px] xl:top-[50px] 3xl:-right-[100px] 3xl:top-[160px]">
+          <IconCard
+            icon="/images/storytelling/icon-health.svg"
+            title={t("explode.health.title")}
+            content={t("explode.health.content")}
+          />
+        </li>
+        <li className="xl:absolute xl:-right-[140px] xl:bottom-[140px] 3xl:-right-[80px] 3xl:bottom-[360px]">
+          <IconCard
+            icon="/images/storytelling/icon-biodiversity.svg"
+            title={t("explode.biodiversity.title")}
+            content={t("explode.biodiversity.content")}
+          />
+        </li>
+        <li className="xl:absolute xl:right-[100px] xl:-bottom-[120px] 3xl:right-[340px] 3xl:bottom-[10px]">
+          <IconCard
+            icon="/images/storytelling/icon-animals.svg"
+            title={t("explode.animals.title")}
+            content={t("explode.animals.content")}
+          />
+        </li>
+      </ul>
     </section>
   );
 };
@@ -118,13 +112,14 @@ const VideoSection = () => {
       <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"
+            src="https://www.youtube.com/embed/YPVHTczRyuU?si=BZA4TaWW86aayGRp&rel=0"
             title="Pinkbombs"
+            allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
+            referrerPolicy="strict-origin-when-cross-origin"
+            allowFullScreen
           />
         </div>
-        <script src="https://player.vimeo.com/api/player.js"></script>
       </div>
     </div>
   );
@@ -194,7 +189,7 @@ const BusinessSection = () => {
   const t = useTranslations("story");
 
   return (
-    <section className="p-6 lg:px-12 lg:pt-36 lg:pb-64 text-red1 bg-darkblue1">
+    <section className="p-6 lg:px-12 lg:pt-36 lg:pb-64 text-white bg-darkblue1">
       <div className="max-w-[1500px] mx-auto">
         <h3 className={clsx("h3", "mb-4 lg:mb-6 max-w-5xl m-auto text-center")}>
           {t("industry.title")}
@@ -229,7 +224,7 @@ const BusinessSection = () => {
         />
         <div className="flex justify-center">
           <Link
-            className="inline-flex justify-center gap-4 mt-6 lg:mt-12 p-4 min-w-40 lg:text-2xl text-red1 bg-darkblue1 font-secondary uppercase rounded-xl tracking-widest border-2 font-bold border-red1 hover:bg-red1 hover:text-darkblue1 transition-all ease-in-out duration-100"
+            className="inline-flex justify-center mt-6 lg:mt-12 p-4 lg:text-xl text-white bg-red1 font-secondary uppercase rounded-xl tracking-widest border-2 border-red1 hover:bg-darkblue1 hover:text-red1 transition-all ease-in-out duration-100"
             href="/to-act"
           >
             {t("industry.link")}

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

@@ -44,7 +44,7 @@ const Act = () => {
         contentPosition="right"
         mode="light"
         image={{
-          src: "/images/act/stop-industry.jpg",
+          src: `/images/act/stop-industry-${locale}.jpg`,
         }}
       />
 
@@ -63,7 +63,7 @@ const Act = () => {
         contentPosition="right"
         mode="light"
         image={{
-          src: t("eat.image"),
+          src: `/images/act/citizens-${locale}.jpg`,
         }}
       />
 
@@ -92,7 +92,7 @@ const Act = () => {
         contentPosition="right"
         mode="light"
         image={{
-          src: "/images/act/support-seastemik.jpg",
+          src: `/images/act/support-seastemik-${locale}.jpg`,
         }}
       />