Skip to content

Commit

Permalink
filters fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@mluena
mluena committed Jun 11, 2024
1 parent c989380 commit cd2e418
Show file tree
Hide file tree
Showing 6 changed files with 167 additions and 151 deletions.
126 changes: 1 addition & 125 deletions marketing/src/containers/repository/discover-our-journey/component.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,138 +1,14 @@
import { FC, useState } from 'react';
import Image from 'next/image';
import FadeIn from 'components/fade';

import Wrapper from 'containers/wrapper';
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);
Expand Down
124 changes: 124 additions & 0 deletions marketing/src/containers/repository/discover-our-journey/slides.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
),
},
];
48 changes: 30 additions & 18 deletions marketing/src/containers/repository/resources/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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 />}
Expand Down
10 changes: 5 additions & 5 deletions marketing/src/containers/repository/resources/methodology/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
6 changes: 5 additions & 1 deletion marketing/src/containers/repository/resources/podcast/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions marketing/src/containers/repository/resources/releases/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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.',
Expand Down

0 comments on commit cd2e418

Please sign in to comment.