Merge pull request #95 from dataforgoodfr/move-video

feat: update video place

messages/en/pages/about.json

@@ -6,7 +6,8 @@
     "title": "About",
     "why": {
       "title": "Why PinkBombs?",
-      "content": "<p>We are facing an <strong>ocean emergency</strong>. The Ocean, the main source of life on Earth, is increasingly threatened by our human activities. <strong>Overfishing</strong> is the main cause of loss of marine biodiversity. The salmon industry, emblematic of <strong>intensive aquaculture</strong>, generates multiple impacts on a global scale. It is therefore urgent to <strong>change the food system</strong> for better protection of humans, animals and ecosystems.</p><p>PinkBombs is here to:</p><ul><li>Alert about one of the biggest <strong>threats</strong> to the <strong>Ocean</strong> today: salmon farming.</li><li>Deconstruct the <strong>distorted</strong> popular <strong>perception</strong> around salmon consumption.</li><li>Guide companies, States and consumers towards <strong>positive solutions</strong>.</li></ul>"
+      "content": "<p>We are facing an <strong>ocean emergency</strong>. The Ocean, the main source of life on Earth, is increasingly threatened by our human activities. <strong>Overfishing</strong> is the main cause of loss of marine biodiversity. The salmon industry, emblematic of <strong>intensive aquaculture</strong>, generates multiple impacts on a global scale. It is therefore urgent to <strong>change the food system</strong> for better protection of humans, animals and ecosystems.</p><p>PinkBombs is here to:</p><ul><li>Alert about one of the biggest <strong>threats</strong> to the <strong>Ocean</strong> today: salmon farming.</li><li>Deconstruct the <strong>distorted</strong> popular <strong>perception</strong> around salmon consumption.</li><li>Guide companies, States and consumers towards <strong>positive solutions</strong>.</li></ul>",
+      "video": "Here’s a 3 min video summary of the project."
     },
     "who": {
       "title": "Who are we?",

messages/fr/pages/about.json

@@ -6,7 +6,8 @@
     "title": "À propos",
     "why": {
       "title": "Pourquoi PinkBombs ?",
-      "content": "<p>Nous sommes face à une <strong>urgence océanique</strong>. L'Océan, principale source de vie sur Terre, est de plus en plus menacé par nos activités humaines. La <strong>surpêche</strong> est la principale cause de perte de biodiversité marine. L'industrie du saumon, emblématique de <strong>l'aquaculture intensive</strong>, génère des impacts multiples à l’échelle mondiale. Il est donc urgent de <strong>changer le système alimentaire</strong> pour une meilleure protection des humains, des animaux et des écosystèmes.</p><p>PinkBombs est là pour :</p><ul><li>Alerter sur l'une des plus grandes <strong>menaces</strong> pour <strong>l'Océan</strong> aujourd'hui : l'élevage de saumons.</li><li>Déconstruire la <strong>perception</strong> populaire <strong>déformée</strong> autour de la consommation de saumons.</li><li>Orienter les entreprises, les États et les consommateur·ices vers des <strong>solutions positives</strong>.</li></ul>"
+      "content": "<p>Nous sommes face à une <strong>urgence océanique</strong>. L'Océan, principale source de vie sur Terre, est de plus en plus menacé par nos activités humaines. La <strong>surpêche</strong> est la principale cause de perte de biodiversité marine. L'industrie du saumon, emblématique de <strong>l'aquaculture intensive</strong>, génère des impacts multiples à l’échelle mondiale. Il est donc urgent de <strong>changer le système alimentaire</strong> pour une meilleure protection des humains, des animaux et des écosystèmes.</p><p>PinkBombs est là pour :</p><ul><li>Alerter sur l'une des plus grandes <strong>menaces</strong> pour <strong>l'Océan</strong> aujourd'hui : l'élevage de saumons.</li><li>Déconstruire la <strong>perception</strong> populaire <strong>déformée</strong> autour de la consommation de saumons.</li><li>Orienter les entreprises, les États et les consommateur·ices vers des <strong>solutions positives</strong>.</li></ul>",
+      "video": "Voici une vidéo récapitulative de 3 minutes sur le projet."
     },
     "who": {
       "title": "Qui sommes-nous ?",

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

@@ -107,13 +107,29 @@ const ExplainSection = () => {
           dangerouslySetInnerHTML={{ __html: t.raw("who.content.last") }}
         />
       </div>
-
       <TitleBlock
         spaceY="mt-12 lg:mt-24 mb-4 lg:mb-8"
         id="why-section-title"
         title={t("why.title")}
       />
-      <AboutSection content={t.raw("why.content")} />
+      <div className="flex flex-col lg:flex-row gap-6 lg:gap-12 px-6 md:px-12 max-w-[1580px] mx-auto">
+        <p
+          className="flex-1"
+          dangerouslySetInnerHTML={{ __html: t.raw("why.content") }}
+        />
+        <figure className="w-full lg:w-1/2">
+          <iframe
+            className="aspect-video w-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
+          />
+          <figcaption className="italic text-sm">{t("why.video")}</figcaption>
+        </figure>
+      </div>
+      {/*<AboutSection content={t.raw("why.content")} />*/}
 
       <TitleBlock
         spaceY="mt-12 lg:mt-24 mb-4 lg:mb-8"

src/app/[locale]/page.tsx

@@ -21,7 +21,6 @@ const HomePage = () => {
       <IntroBlock title={t("title")} image="/images/salmon.svg" />
 
       <BombSection />
-      <VideoSection />
       <ExplodeSection />
       <EditoSection />
       <BusinessSection />
@@ -53,10 +52,7 @@ const ExplodeSection = () => {
   const t = useTranslations("story");
 
   return (
-    <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>
+    <section className="flex flex-col items-center justify-center px-6 pb-24 lg:px-12 lg:pb-48 text-red2 bg-darkblue1 min-h-screen">
       <ul
         className="
         grid grid-cols-1 xs:grid-cols-2 gap-8 list-none bg-no-repeat bg-center relative
@@ -106,25 +102,6 @@ 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
-            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>
-      </div>
-    </div>
-  );
-};
-
 const EditoSection = () => {
   const t = useTranslations("story");
 
@@ -191,9 +168,9 @@ const BusinessSection = () => {
   return (
     <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")}>
+        <h2 className={clsx("h3", "mb-4 lg:mb-6 max-w-5xl m-auto text-center")}>
           {t("industry.title")}
-        </h3>
+        </h2>
         <p className="mb-6 lg:mb-14 max-w-xl text-white m-auto text-center">
           {t("industry.content")}
         </p>

src/components/IconCard.tsx

@@ -15,14 +15,24 @@ const IconCard = ({
   return (
     <div className={className}>
       {icon ? (
-        <Image
-          loading="lazy"
-          src={icon}
-          width={100}
-          height={100}
-          alt=""
-          className="max-[767px]:w-12 max-[767px]:h-12 max-[1023px]:w-24 max-[1023px]:h-24 object-contain"
-        />
+        <>
+          <Image
+            loading="lazy"
+            src={icon}
+            width={100}
+            height={100}
+            alt=""
+            className="max-[767px]:hidden max-[1023px]:w-24 aspect-square object-contain"
+          />
+          <Image
+            loading="lazy"
+            src="/images/explose-icon.svg"
+            width={100}
+            height={100}
+            alt=""
+            className="max-[767px]:w-20 aspect-square min-[768px]:hidden object-contain"
+          />
+        </>
       ) : null}
       <p className="h3 xl:max-w-[380px] 3xl:max-w-[600px]">{title}</p>
       <p className="mt-4 text-white xl:max-w-72 3xl:max-w-96">{content}</p>