From 3f0d951ea66f4e3794ab420f0b0d4a5b3765a7b8 Mon Sep 17 00:00:00 2001
From: Thomas Catinaud Taris <tcatinaud-taris@greenspector.com>
Date: Thu, 24 Oct 2024 15:13:52 +0200
Subject: [PATCH] feat: update video place

---
 messages/en/pages/about.json     |  3 ++-
 messages/fr/pages/about.json     |  3 ++-
 public/images/explose-icon.svg   | 18 +++++++++++++++
 public/images/explose.svg        | 38 +++++++++++++-------------------
 src/app/[locale]/about/about.tsx | 20 +++++++++++++++--
 src/app/[locale]/page.tsx        | 29 +++---------------------
 src/components/IconCard.tsx      | 26 +++++++++++++++-------
 7 files changed, 76 insertions(+), 61 deletions(-)
 create mode 100644 public/images/explose-icon.svg

diff --git a/messages/en/pages/about.json b/messages/en/pages/about.json
index 49ddd521a..9e3030236 100644
--- a/messages/en/pages/about.json
+++ b/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?",
diff --git a/messages/fr/pages/about.json b/messages/fr/pages/about.json
index d192dc82c..1c51ec183 100644
--- a/messages/fr/pages/about.json
+++ b/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 ?",
diff --git a/public/images/explose-icon.svg b/public/images/explose-icon.svg
new file mode 100644
index 000000000..150e1c94f
--- /dev/null
+++ b/public/images/explose-icon.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 437.9 320" style="enable-background:new 0 0 437.9 320;" xml:space="preserve">
+<style type="text/css">
+	.st1{fill:none;stroke:#F34620;stroke-width:11;stroke-miterlimit:16;}
+	.st2{fill:#EBF97B;}
+	.st3{fill:#F34620;}
+</style>
+<g class="st0">
+	<path class="st1" d="M54.6,300.4l73.4-24.9l-94-76.8l109.5,29.2L94.7,96.7l97.2,94l31.6-150.2l32.4,147l95-85.9l-44.2,121.3
+		l97.2-18.7l-77.6,71.5l64.5,24.9"/>
+	<path class="st2" d="M281.9,285.7l47.4,14.7H123.4l46-14.7l-46-38l58.4,12.6L160,198.7l48.5,45.2l17.4-65.3l15,65.3l48.5-45.2
+		L269,260.3l57.3-12.6L281.9,285.7z"/>
+	<path class="st3" d="M244.8,293.5l16.1,7h-70l15.7-7l-15.7-18.1l19.8,6l-7.4-29.3l16.5,21.5l5.9-31.1l5.1,31.1l16.5-21.5l-6.9,29.3
+		l19.5-6L244.8,293.5z"/>
+</g>
+</svg>
diff --git a/public/images/explose.svg b/public/images/explose.svg
index 553c58342..92729082f 100644
--- a/public/images/explose.svg
+++ b/public/images/explose.svg
@@ -1,25 +1,17 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 859.4 756.1" style="enable-background:new 0 0 859.4 756.1;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;stroke:#F34620;stroke-width:2;stroke-dasharray:4,8,12,16;}
-	.st1{fill:none;stroke:#F34620;stroke-width:2;stroke-dasharray:22,22;}
-	.st2{fill:none;stroke:#F34620;stroke-width:11;stroke-miterlimit:16;}
-	.st3{fill:#EBF97B;}
-	.st4{fill:#F34620;}
-</style>
-<g>
-	<path class="st0" d="M428.4,427c-0.8-66.1-32.7-353-178.5-364.5s-231,75.2-249,110"/>
-	<path class="st0" d="M428.4,427c-0.8-53.5-32.5-204-135.5-149c-129,68.9-173,177.8-191,206"/>
-	<path class="st1" d="M460.4,372C465.2,245.6,535,25.4,668.4,3.8C821-21,847.5,127.1,859.4,127.1"/>
-	<path class="st1" d="M461.4,360c4.8-126.4,107.8-283.9,236-241c142,47.5,130.1,197,142,197"/>
-	<path class="st1" d="M464.9,384.5c84.5-164,63.5-155.1,130.5-144S739.1,677.3,733.9,756"/>
-	<path class="st2" d="M289,618l73.4-24.9l-94-76.8l109.5,29.2l-48.7-131.2l97.2,94L457.9,358l32.4,147l95-85.9l-44.2,121.3
-		l97.2-18.7l-77.6,71.5l64.5,24.9"/>
-	<path class="st3" d="M516.3,603.2l47.4,14.7H357.8l46-14.7l-46-38l58.4,12.6l-21.7-61.6l48.5,45.2l17.4-65.3l15,65.3l48.5-45.2
-		l-20.3,61.6l57.3-12.6L516.3,603.2z"/>
-	<path class="st4" d="M479.3,611l16.1,7h-70l15.7-7l-15.7-18.1l19.8,6l-7.4-29.3l16.5,21.5l5.9-31.1l5.1,31.1l16.5-21.5l-6.9,29.3
-		l19.5-6L479.3,611z"/>
+<svg width="860" height="757" viewBox="0 0 860 757" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3394_45)">
+<path d="M428.4 427C427.6 360.9 395.7 74.0002 249.9 62.5002C104.1 51.0002 0.899994 172.5 0.899994 172.5" stroke="#F34620" stroke-width="2" stroke-dasharray="20 20"/>
+<path d="M401 484C401 484 382.5 272.5 299 255.5C165.107 228.241 101.9 484 101.9 484" stroke="#F34620" stroke-width="2" stroke-dasharray="20 20"/>
+<path d="M460.4 372C465.2 245.6 535 25.4 668.4 3.8C821 -21 859.4 127.1 859.4 127.1" stroke="#F34620" stroke-width="2" stroke-dasharray="20 20"/>
+<path d="M468.5 427C473.046 300.703 583.096 76.331 704.513 119.196C807.367 146.674 839 316.036 839 316.036" stroke="#F34620" stroke-width="2" stroke-dasharray="20 20"/>
+<path d="M486.5 488C486.5 488 511 226.517 595.4 240.5C717 260.646 733.9 756 733.9 756" stroke="#F34620" stroke-width="2" stroke-dasharray="20 20"/>
+<path d="M289 618L362.4 593.1L268.4 516.3L377.9 545.5L329.2 414.3L426.4 508.3L457.9 358L490.3 505L585.3 419.1L541.1 540.4L638.3 521.7L560.7 593.2L625.2 618.1" stroke="#F34620" stroke-width="11" stroke-miterlimit="16"/>
+<path d="M516.3 603.2L563.7 617.9H357.8L403.8 603.2L357.8 565.2L416.2 577.8L394.5 516.2L443 561.4L460.4 496.1L475.4 561.4L523.9 516.2L503.6 577.8L560.9 565.2L516.3 603.2Z" fill="#EBF97B"/>
+<path d="M479.3 611L495.4 618H425.4L441.1 611L425.4 592.9L445.2 598.9L437.8 569.6L454.3 591.1L460.2 560L465.3 591.1L481.8 569.6L474.9 598.9L494.4 592.9L479.3 611Z" fill="#F34620"/>
 </g>
+<defs>
+<clipPath id="clip0_3394_45">
+<rect width="859.4" height="756.1" fill="white"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/src/app/[locale]/about/about.tsx b/src/app/[locale]/about/about.tsx
index 120a84cb7..1fb085f8c 100644
--- a/src/app/[locale]/about/about.tsx
+++ b/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"
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
index dfaeb7ae0..1a84f5c54 100644
--- a/src/app/[locale]/page.tsx
+++ b/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>
diff --git a/src/components/IconCard.tsx b/src/components/IconCard.tsx
index c3bfa41d9..5ce3c31ce 100644
--- a/src/components/IconCard.tsx
+++ b/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>