From 19c1cd2a6e7e3ab6546404cacf4bf8022c65efed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <maluenarod@gmail.com>
Date: Tue, 21 May 2024 19:02:25 +0200
Subject: [PATCH] filters fixed

---
 .../discover-our-journey/component.tsx        | 126 +-----------------
 .../discover-our-journey/slides.tsx           | 124 +++++++++++++++++
 .../repository/resources/component.tsx        |  48 ++++---
 .../resources/methodology/component.tsx       |  10 +-
 .../resources/podcast/component.tsx           |   6 +-
 .../resources/releases/constants.ts           |   4 +-
 6 files changed, 167 insertions(+), 151 deletions(-)
 create mode 100644 marketing/src/containers/repository/discover-our-journey/slides.tsx

diff --git a/marketing/src/containers/repository/discover-our-journey/component.tsx b/marketing/src/containers/repository/discover-our-journey/component.tsx
index 427371807..dd203932b 100644
--- a/marketing/src/containers/repository/discover-our-journey/component.tsx
+++ b/marketing/src/containers/repository/discover-our-journey/component.tsx
@@ -1,5 +1,4 @@
 import { FC, useState } from 'react';
-import Image from 'next/image';
 import FadeIn from 'components/fade';
 
 import Wrapper from 'containers/wrapper';
@@ -7,132 +6,9 @@ import Carousel from 'components/carousel/component';
 import Link from 'next/link';
 import Icon from 'components/icon';
 
-import { AnimatePresence, motion } from 'framer-motion';
 import ARROW_SVG from 'svgs/ui/arrow-top-right.svg?sprite';
 
-type CardTypes = {
-  thumb: string;
-  title: string;
-  description: string;
-};
-
-const arrow = {
-  default: {
-    opacity: 0,
-    x: -55,
-    transition: {
-      duration: 0,
-      type: 'tween',
-      delay: 0,
-    },
-  },
-  hover: {
-    opacity: 1,
-    x: 0,
-    transition: {
-      duration: 0.6,
-      type: 'tween',
-    },
-  },
-};
-
-const Card: FC<CardTypes> = ({ thumb, title, description }: CardTypes) => (
-  <motion.div
-    initial="default"
-    whileHover="hover"
-    className="min-h-[430px] relative rounded-[38px] w-full border border-[#1D3786] border-opacity-90 space-y-5 flex flex-col p-14 items-start hover:bg-blue-900 hover:cursor-pointer"
-  >
-    <Image src={thumb} width={78} height={74} alt={title} layout="intrinsic" />
-    <h5 className="font-bold text-xl flex">{title}</h5>
-    <p className="font-light flex">{description}</p>
-    <motion.div variants={arrow} className="w-full justify-end flex absolute bottom-14 right-14">
-      <Icon icon={ARROW_SVG} className="w-14 h-11 rotate-45" />
-    </motion.div>
-  </motion.div>
-);
-
-const SLIDES = [
-  {
-    id: '1',
-    content: (
-      <div>
-        <div className="md:grid md:grid-cols-2 md:gap-5 w-full flex flex-col space-y-6 md:space-y-0">
-          <Card
-            thumb="/images/repository/thumb_1.png"
-            title="LandGriffon case study."
-            description="An example analysis of the impact of hypothetical sourcing of 1000 tonnes of palm oil in Aceh, Indonesia, with different levels of spatial sourcing precision and exploration of scenarios."
-          />
-
-          <Card
-            thumb="/images/repository/thumb_2.png"
-            title="Evolving ESG regulations"
-            description="Three key proposals will change the ESG regulatory landscape. The EU CSRD & ESRS, SEC Climate-Related Disclosures, and EU Deforestation Law."
-          />
-        </div>
-      </div>
-    ),
-  },
-  {
-    id: '2',
-    content: (
-      <div>
-        <div className="md:grid md:grid-cols-2 md:gap-5 w-full flex flex-col space-y-6 md:space-y-0">
-          <Card
-            thumb="/images/repository/thumb_1.png"
-            title="LandGriffon case study."
-            description="An example analysis of the impact of hypothetical sourcing of 1000 tonnes of palm oil in Aceh, Indonesia, with different levels of spatial sourcing precision and exploration of scenarios."
-          />
-
-          <Card
-            thumb="/images/repository/thumb_2.png"
-            title="Evolving ESG regulations"
-            description="Three key proposals will change the ESG regulatory landscape. The EU CSRD & ESRS, SEC Climate-Related Disclosures, and EU Deforestation Law."
-          />
-        </div>
-      </div>
-    ),
-  },
-  {
-    id: '3',
-    content: (
-      <div>
-        <div className="md:grid md:grid-cols-2 md:gap-5 w-full flex flex-col space-y-6 md:space-y-0">
-          <Card
-            thumb="/images/repository/thumb_1.png"
-            title="LandGriffon case study."
-            description="An example analysis of the impact of hypothetical sourcing of 1000 tonnes of palm oil in Aceh, Indonesia, with different levels of spatial sourcing precision and exploration of scenarios."
-          />
-
-          <Card
-            thumb="/images/repository/thumb_2.png"
-            title="Evolving ESG regulations"
-            description="Three key proposals will change the ESG regulatory landscape. The EU CSRD & ESRS, SEC Climate-Related Disclosures, and EU Deforestation Law."
-          />
-        </div>
-      </div>
-    ),
-  },
-  {
-    id: '4',
-    content: (
-      <div>
-        <div className="md:grid md:grid-cols-2 md:gap-5 w-full flex flex-col space-y-6 md:space-y-0">
-          <Card
-            thumb="/images/repository/thumb_1.png"
-            title="LandGriffon case study."
-            description="An example analysis of the impact of hypothetical sourcing of 1000 tonnes of palm oil in Aceh, Indonesia, with different levels of spatial sourcing precision and exploration of scenarios."
-          />
-
-          <Card
-            thumb="/images/repository/thumb_2.png"
-            title="Evolving ESG regulations"
-            description="Three key proposals will change the ESG regulatory landscape. The EU CSRD & ESRS, SEC Climate-Related Disclosures, and EU Deforestation Law."
-          />
-        </div>
-      </div>
-    ),
-  },
-];
+import { SLIDES } from './slides';
 
 const DiscoverOurJourney: FC = () => {
   const [slide, setSlide] = useState(0);
diff --git a/marketing/src/containers/repository/discover-our-journey/slides.tsx b/marketing/src/containers/repository/discover-our-journey/slides.tsx
new file mode 100644
index 000000000..339c4e921
--- /dev/null
+++ b/marketing/src/containers/repository/discover-our-journey/slides.tsx
@@ -0,0 +1,124 @@
+import { FC } from 'react';
+
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+
+import Icon from 'components/icon';
+
+import ARROW_SVG from 'svgs/ui/arrow-top-right.svg?sprite';
+
+type CardTypes = {
+  thumb: string;
+  title: string;
+  description: string;
+};
+
+const arrow = {
+  default: {
+    opacity: 0,
+    x: -55,
+    transition: {
+      duration: 0,
+      type: 'tween',
+      delay: 0,
+    },
+  },
+  hover: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      duration: 0.6,
+      type: 'tween',
+    },
+  },
+};
+
+const Card: FC<CardTypes> = ({ thumb, title, description }: CardTypes) => (
+  <motion.div
+    initial="default"
+    whileHover="hover"
+    className="min-h-[430px] relative rounded-[38px] w-full border border-[#1D3786] border-opacity-90 space-y-5 flex flex-col p-14 items-start hover:bg-blue-900 hover:cursor-pointer"
+  >
+    <Image src={thumb} width={78} height={74} alt={title} layout="intrinsic" />
+    <h5 className="font-bold text-xl flex">{title}</h5>
+    <p className="font-light flex">{description}</p>
+    <motion.div variants={arrow} className="w-full justify-end flex absolute bottom-14 right-14">
+      <Icon icon={ARROW_SVG} className="w-14 h-11 rotate-45" />
+    </motion.div>
+  </motion.div>
+);
+
+export const SLIDES = [
+  {
+    id: '1',
+    content: (
+      <div className="md:grid md:grid-cols-2 md:gap-5 w-full flex flex-col space-y-6 md:space-y-0">
+        <Card
+          thumb="/images/repository/thumb_1.png"
+          title="LandGriffon case study."
+          description="An example analysis of the impact of hypothetical sourcing of 1000 tonnes of palm oil in Aceh, Indonesia, with different levels of spatial sourcing precision and exploration of scenarios."
+        />
+
+        <Card
+          thumb="/images/repository/thumb_2.png"
+          title="Evolving ESG regulations"
+          description="Three key proposals will change the ESG regulatory landscape. The EU CSRD & ESRS, SEC Climate-Related Disclosures, and EU Deforestation Law."
+        />
+      </div>
+    ),
+  },
+  {
+    id: '2',
+    content: (
+      <div className="md:grid md:grid-cols-2 md:gap-5 w-full flex flex-col space-y-6 md:space-y-0">
+        <Card
+          thumb="/images/repository/thumb_1.png"
+          title="LandGriffon case study."
+          description="An example analysis of the impact of hypothetical sourcing of 1000 tonnes of palm oil in Aceh, Indonesia, with different levels of spatial sourcing precision and exploration of scenarios."
+        />
+
+        <Card
+          thumb="/images/repository/thumb_2.png"
+          title="Evolving ESG regulations"
+          description="Three key proposals will change the ESG regulatory landscape. The EU CSRD & ESRS, SEC Climate-Related Disclosures, and EU Deforestation Law."
+        />
+      </div>
+    ),
+  },
+  {
+    id: '3',
+    content: (
+      <div className="md:grid md:grid-cols-2 md:gap-5 w-full flex flex-col space-y-6 md:space-y-0">
+        <Card
+          thumb="/images/repository/thumb_1.png"
+          title="LandGriffon case study."
+          description="An example analysis of the impact of hypothetical sourcing of 1000 tonnes of palm oil in Aceh, Indonesia, with different levels of spatial sourcing precision and exploration of scenarios."
+        />
+
+        <Card
+          thumb="/images/repository/thumb_2.png"
+          title="Evolving ESG regulations"
+          description="Three key proposals will change the ESG regulatory landscape. The EU CSRD & ESRS, SEC Climate-Related Disclosures, and EU Deforestation Law."
+        />
+      </div>
+    ),
+  },
+  {
+    id: '4',
+    content: (
+      <div className="md:grid md:grid-cols-2 md:gap-5 w-full flex flex-col space-y-6 md:space-y-0">
+        <Card
+          thumb="/images/repository/thumb_1.png"
+          title="LandGriffon case study."
+          description="An example analysis of the impact of hypothetical sourcing of 1000 tonnes of palm oil in Aceh, Indonesia, with different levels of spatial sourcing precision and exploration of scenarios."
+        />
+
+        <Card
+          thumb="/images/repository/thumb_2.png"
+          title="Evolving ESG regulations"
+          description="Three key proposals will change the ESG regulatory landscape. The EU CSRD & ESRS, SEC Climate-Related Disclosures, and EU Deforestation Law."
+        />
+      </div>
+    ),
+  },
+];
diff --git a/marketing/src/containers/repository/resources/component.tsx b/marketing/src/containers/repository/resources/component.tsx
index a02b58a6c..428403101 100644
--- a/marketing/src/containers/repository/resources/component.tsx
+++ b/marketing/src/containers/repository/resources/component.tsx
@@ -4,9 +4,19 @@ import Methodology from './methodology';
 import Webinar from './webinar';
 import DatasetReleases from './releases';
 import Podcast from './podcast';
+import Wrapper from 'containers/wrapper/component';
 
-const FILTERS = ['all', 'methodology', 'dataset-releases', 'webinar-and-podcasts', 'blogs'];
-const FILTERS_DICTIONARY = {
+type FilterType = 'all' | 'methodology' | 'dataset-releases' | 'webinar-and-podcasts' | 'blogs';
+
+const FILTERS: FilterType[] = [
+  'all',
+  'methodology',
+  'dataset-releases',
+  'webinar-and-podcasts',
+  'blogs',
+];
+
+const FILTERS_DICTIONARY: Record<FilterType, string> = {
   all: 'All',
   methodology: 'Methodology',
   'dataset-releases': 'Dataset releases',
@@ -18,23 +28,25 @@ const Resources: React.FC = () => {
   const [filter, setFilter] = useState<string>('all');
 
   return (
-    <div className="bg-white space-y-14">
-      <div className="flex justify-center front-light items-center space-x-8">
-        <span>Filter by:</span>
-        <div className="flex space-x-2.5">
-          {FILTERS.map((f) => (
-            <button
-              key={f}
-              onClick={() => setFilter(f)}
-              className={`${
-                filter === f ? 'bg-green-500 text-white' : 'bg-gray-100 text-black'
-              } px-2.5 py-[5px]`}
-            >
-              {FILTERS_DICTIONARY[f]}
-            </button>
-          ))}
+    <div className="bg-white space-y-14 px-5">
+      <Wrapper>
+        <div className="m-auto w-full md:flex-row flex front-light md:space-x-8 flex-col justify-start items-center">
+          <span className="whitespace-nowrap flex justify-start w-full md:w-fit">Filter by:</span>
+          <div className="w-full flex md:space-x-2.5 justify-start flex-wrap gap-2">
+            {FILTERS.map((f) => (
+              <button
+                key={f}
+                onClick={() => setFilter(f)}
+                className={`${
+                  filter === f ? 'bg-green-500 text-white' : 'bg-gray-100 text-black'
+                } px-2.5 py-[5px]`}
+              >
+                {FILTERS_DICTIONARY[f]}
+              </button>
+            ))}
+          </div>
         </div>
-      </div>
+      </Wrapper>
       {(filter === 'all' || filter === 'methodology') && <Methodology />}
       {(filter === 'all' || filter === 'dataset-releases') && <DatasetReleases />}
       {(filter === 'all' || filter === 'webinar-and-podcasts') && <Webinar />}
diff --git a/marketing/src/containers/repository/resources/methodology/component.tsx b/marketing/src/containers/repository/resources/methodology/component.tsx
index 78cd8a754..f1ba96981 100644
--- a/marketing/src/containers/repository/resources/methodology/component.tsx
+++ b/marketing/src/containers/repository/resources/methodology/component.tsx
@@ -23,13 +23,13 @@ const Methodology: React.FC = () => (
                   <Icon icon={CALENDAR_SVG} className="w-6 h-6" />
                   <span>October 2023:</span>
                 </div>
-                <Link href="//https://landgriffon.com/docs/LG_Methodology_Technical_Note.pdf">
+                <Link href="https://landgriffon.com/docs/LG_Methodology_Technical_Note.pdf">
                   <a
-                    className="text-white underline text-[25px] w-[90%] flex"
+                    className="text-white underline text-[25px] w-full inline-block md:pr-12 pr-4"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    Methodology Version 0.2 
+                    Methodology Version <span className="md:block">0.2 </span>
                   </a>
                 </Link>
               </div>
@@ -43,11 +43,11 @@ const Methodology: React.FC = () => (
                 </div>
                 <Link href="https://landgriffon.com/docs/LG_Methodology_Technical_Note.pdf">
                   <a
-                    className="text-white underline text-[25px] w-[90%] flex"
+                    className="text-white underline text-[25px] inline-block md:pr-12 pr-4"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    Methodology Version 0.1
+                    Methodology Version <span className="md:block">0.1 </span>
                   </a>
                 </Link>
               </div>
diff --git a/marketing/src/containers/repository/resources/podcast/component.tsx b/marketing/src/containers/repository/resources/podcast/component.tsx
index 509870848..9d15ac1a0 100644
--- a/marketing/src/containers/repository/resources/podcast/component.tsx
+++ b/marketing/src/containers/repository/resources/podcast/component.tsx
@@ -51,7 +51,11 @@ const Webinar: React.FC = () => (
                 one we are left with.”
               </p>
               <Link href="https://www.podbean.com/media/share/pb-4nqcj-1526415?utm_campaign=au_share_ep&utm_medium=dlink&utm_source=au_share">
-                <a className="flex space-x-5 items-center font-bold">
+                <a
+                  className="flex space-x-5 items-center font-bold"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
                   <span className="underline">Listen to the full episode.</span>
                   <Icon icon={ARROW_SVG} className="w-5 h-5 -rotate-45 font-bold" />
                 </a>
diff --git a/marketing/src/containers/repository/resources/releases/constants.ts b/marketing/src/containers/repository/resources/releases/constants.ts
index 5dcffc8d2..950fbfdd0 100644
--- a/marketing/src/containers/repository/resources/releases/constants.ts
+++ b/marketing/src/containers/repository/resources/releases/constants.ts
@@ -7,7 +7,7 @@ export const LANDGRIFFON_ANALYSIS = {
     },
     {
       name: 'Kuzma et al. Aqueduct 4.0: Updated decision-relevant global water risk indicators',
-      url: 'http://doi.org/10.46830/writn.23.00061',
+      url: 'https://doi.org/10.46830/writn.23.00061',
     },
     {
       name: 'McDowell et al. Global Mapping of Freshwater Nutrient Enrichment and Periphyton Growth Potential',
@@ -57,7 +57,7 @@ export const DATASET_FOR_EUDR = {
   datasets: [
     {
       name: 'Bourgoin et al. Global map of forest cover 2020 - version 1.',
-      url: 'http://data.europa.eu/89h/10d1b337-b7d1-4938-a048-686c8185b290',
+      url: 'https://data.europa.eu/89h/10d1b337-b7d1-4938-a048-686c8185b290',
     },
     {
       name: 'Bourgoin et al. Mapping Global Forest Cover of the Year 2020 to Support the EU Regulation on Deforestation-free Supply Chains.',