Skip to content

Commit

Permalink
repository section - mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
mluena committed Jun 11, 2024
1 parent 98d3e69 commit c989380
Show file tree
Hide file tree
Showing 13 changed files with 187 additions and 187 deletions.
20 changes: 20 additions & 0 deletions marketing/src/containers/methodology/hero/component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,26 @@ const Hero: React.FC = () => {
</div>
</div>
</motion.div>

<motion.div
className="relative hidden aspect-video"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.75, delay: 0.1 }}
>
<header className="absolute z-10 flex items-center space-x-5 text-white top-6 left-6">
<button
className="flex items-center justify-center w-20 h-20 bg-white cursor-pointer"
onClick={onTogglePlay}
>
{!playing && <PlayIcon className="w-5 h-5 text-black" />}
{playing && <PauseIcon className="w-5 h-5 text-black" />}
</button>

<h4 className="text-sm font-black uppercase font-display">Watch demo</h4>
</header>
<video ref={videoRef} src="/videos/truck.mp4" className="aspect-video" />
</motion.div>
</Wrapper>
</section>
);
Expand Down
2 changes: 1 addition & 1 deletion marketing/src/containers/newsletter/component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ const NewsLetter: React.FC = () => {
type="checkbox"
{...register('terms')}
className={cx({
'rounded-full bg-transparent border-black w-7.5 h-7.5': true,
'rounded-full bg-transparent border-black border-2 w-7.5 h-7.5': true,
'border-red-500': errors.terms,
})}
/>
Expand Down
2 changes: 1 addition & 1 deletion marketing/src/containers/repository/component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ const Repository: React.FC = () => {

return (
<>
<ScrollDown theme="light" />
<Hero />
<ScrollDown theme="light" />
<Resources />
<DiscoverOurJourney />
<Newsletter />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,12 @@ const Card: FC<CardTypes> = ({ thumb, title, description }: CardTypes) => (
<motion.div
initial="default"
whileHover="hover"
className="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"
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">
<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>
Expand All @@ -56,7 +56,7 @@ const SLIDES = [
id: '1',
content: (
<div>
<div className="grid grid-cols-2 gap-5 w-full">
<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."
Expand All @@ -76,7 +76,7 @@ const SLIDES = [
id: '2',
content: (
<div>
<div className="grid grid-cols-2 gap-5 w-full">
<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."
Expand All @@ -96,7 +96,7 @@ const SLIDES = [
id: '3',
content: (
<div>
<div className="grid grid-cols-2 gap-5 w-full">
<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."
Expand All @@ -116,7 +116,7 @@ const SLIDES = [
id: '4',
content: (
<div>
<div className="grid grid-cols-2 gap-5 w-full">
<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."
Expand Down
77 changes: 23 additions & 54 deletions marketing/src/containers/repository/hero/component.tsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,29 @@
import { PauseIcon, PlayIcon } from '@heroicons/react/solid';
import Wrapper from 'containers/wrapper';

import { motion } from 'framer-motion';
import Image from 'next/image';
import { useCallback, useEffect, useRef, useState } from 'react';
import Icon from 'components/icon';
import DOWNLOAD_SVG from 'svgs/ui/icn_download.svg?sprite';

const Hero: React.FC = () => {
const videoRef = useRef<HTMLVideoElement>();
const [playing, setPlaying] = useState(false);

const onTogglePlay = useCallback(() => {
if (videoRef.current) {
if (!playing) videoRef.current.play();
if (playing) videoRef.current.pause();

setPlaying(!playing);
}
}, [playing]);

const onVideoEnded = useCallback(() => {
setPlaying(false);
videoRef.current.pause();
videoRef.current.currentTime = 0;
}, []);

useEffect(() => {
if (videoRef.current) {
videoRef.current.addEventListener('ended', onVideoEnded);
}
}, [onVideoEnded]);

return (
<section className="relative z-10 bg-white">
<Wrapper>
<motion.div
className="relative py-12 md:py-32"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.75, delay: 0.1 }}
>
<div className="space-y-10 xl:col-span-full col-span-2">
<h1 className="text-5xl font-black text-black uppercase font-display lg:text-7xl">
Knowledge Repository
</h1>
<h2 className="text-2xl font-medium text-black font-display md:text-3xl">
At LandGriffon, we&apos;re dedicated to driving sustainability through science.
Explore our repository for insights, methodologies, and datasets shaping environmental
impact assessment and resource management.
</h2>
</div>
</motion.div>
</Wrapper>
</section>
);
};
const Hero: React.FC = () => (
<section className="relative z-10 bg-white">
<Wrapper>
<motion.div
className="relative py-12 md:py-32"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.75, delay: 0.1 }}
>
<div className="space-y-10 xl:col-span-full col-span-2">
<h1 className="text-5xl font-black text-black uppercase font-display lg:text-7xl">
Knowledge Repository
</h1>
<h2 className="text-2xl font-medium text-black font-display md:text-3xl">
At LandGriffon, we&apos;re dedicated to driving sustainability through science. Explore
our repository for insights, methodologies, and datasets shaping environmental impact
assessment and resource management.
</h2>
</div>
</motion.div>
</Wrapper>
</section>
);

export default Hero;
2 changes: 1 addition & 1 deletion marketing/src/containers/repository/intro/component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import FadeIn from 'components/fade';

type IntroType = Readonly<{
title: string;
intro: string;
intro: string | JSX.Element;
children?: React.ReactNode;
}>;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Methodology: React.FC = () => (
intro="Access previous versions of our methodologies to understand the evolution of our
approach to sustainability and environmental impact assessments."
>
<div className="grid grid-cols-2 gap-6 text-white">
<div className="md:grid md:grid-cols-2 md:gap-6 text-white flex flex-col space-y-6 md:space-y-0">
<div className="bg-[url('/images/repository/methodology_bg_1.jpg')] flex h-[400px] bg-cover p-5">
<div className="bg-blue-900 p-6 space-y-4 h-fit">
<div className="flex space-x-2.5 items-center">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,20 @@ const Webinar: React.FC = () => (
<FadeIn>
<Intro
title="Podcast with Innovation Forum"
intro={`Francis Gassert, strategy and impact lead at Vizzuality, talks with Innovation Forum's Ian Welsh about ${(
<span className="font-bold">measuring</span>
)} impact and how to ensure credibility when doing so. They discuss the importance of companies considering their land, carbon and biodiversity impacts and incoming regulatory changes driving this action.`}
intro={
<>
Francis Gassert, strategy and impact lead at Vizzuality, talks with Innovation
Forum&apos;s Ian Welsh about{' '}
<span className="font-bold">
measuring impact and how to ensure credibility when doing so.
</span>
They discuss the importance of companies considering their land, carbon and
biodiversity impacts and incoming regulatory changes driving this action.
</>
}
>
<div className="grid grid-cols-2 gap-16">
<div className="w-full max-w-[297px] h-[365px] flex relative">
<div className="md:grid md:grid-cols-3 gap-14 pb-56 flex flex-col">
<div className="md:col-span-1 w-full max-w-[297px] h-[365px] flex relative m-auto">
<Image
layout="fill"
objectFit="cover"
Expand All @@ -28,7 +36,7 @@ const Webinar: React.FC = () => (
className="object-center"
/>
</div>
<div className="flex flex-col justify-between">
<div className="col-span-2 flex flex-col justify-between">
<p className="italic">
“Agriculture is the source of civilization, the way we are tied to the earth, and
the way we are most directly using and affecting nature. If you manage sourcing for
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,89 +7,7 @@ import Icon from 'components/icon';

import ARROW_SVG from 'svgs/ui/arrow-top-right.svg?sprite';

const LANDGRIFFON_ANALYSIS = {
title: 'Foundational datasets that underpin LandGriffon analysis:',
datasets: [
{
name: 'Mekonnen and Hoekstra. The green, blue and grey water footprint of crops and derived crop products',
url: 'https://doi.org/10.5194/hess-15-1577-2011',
},
{
name: 'Kuzma et al. Aqueduct 4.0: Updated decision-relevant global water risk indicators',
url: 'http://doi.org/10.46830/writn.23.00061',
},
{
name: 'McDowell et al. Global Mapping of Freshwater Nutrient Enrichment and Periphyton Growth Potential',
url: 'https://doi.org/10.1038/s41598-020-60279-w',
},
{
name: 'McDowell et al. Global Database of Diffuse Riverine Nitrogen and Phosphorus Loads and Yields',
url: 'https://doi.org/10.1002/gdj3.111',
},
{
name: 'International Food Policy Research Institute. Global Spatially-Disaggregated Crop Production Statistics Data for 2010 Version 2.0',
url: 'https://doi.org/10.7910/DVN/PRFF8V',
},
{
name: 'Halpern et al. The Environmental Footprint of Global Food Production.',
url: 'https://doi.org/10.1038/s41893-022-00965-x',
},
{
name: 'Noon et al. Mapping the Irrecoverable Carbon in Earth’s Ecosystems.',
url: 'https://doi.org/10.1038/s41893-021-00803-6',
},
{
name: 'Hansen et al. High-Resolution Global Maps of 21st-Century Forest Cover Change. ',
url: 'https://doi.org/10.1126/science.1244693',
},
{
name: 'Mazur et al. SBTN Natural Lands Map: Technical Documentation.',
url: 'https://sciencebasedtargetsnetwork.org/wp-content/uploads/2023/05/Technical-Guidance-2023-Step3-Land-v0.3-Natural-Lands-Map.pdf',
},
{
name: 'Karra et al. Global Land Use / Land Cover with Sentinel 2 and Deep Learning.',
url: 'https://doi.org/10.1109/IGARSS47720.2021.9553499',
},
{
name: 'Grantham et al. Anthropogenic Modification of Forests Means Only 40% of Remaining Forests Have High Ecosystem Integrity.',
url: 'https://doi.org/10.1038/s41467-020-19493-3',
},
{
name: 'Gassert et al. Global 100m Projections of Biodiversity Intactness for the Years 2017 - 2020.',
url: 'https://ai4edatasetspublicassets.blob.core.windows.net/assets/pdfs/io-biodiversity/Biodiversity_Intactness_whitepaper.pdf',
},
],
};

const DATASET_FOR_EUDR = {
title: 'Datasets 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',
},
{
name: 'Bourgoin et al. Mapping Global Forest Cover of the Year 2020 to Support the EU Regulation on Deforestation-free Supply Chains.',
url: 'https://www.researchgate.net/publication/379119723_Mapping_Global_Forest_Cover_of_the_Year_2020_to_Support_the_EU_Regulation_on_Deforestation-free_Supply_Chains',
},
{
name: 'Hansen et al. High-Resolution Global Maps of 21st-Century Forest Cover Change.',
url: 'https://glad.earthengine.app/view/global-forest-change',
},
{
name: 'Reiche et al. Forest disturbance alerts for the Congo Basin using Sentinel-1.',
url: 'https://doi.org/10.1088/1748-9326/abd0a8',
},
{
name: 'Adrià et al. High resolution global industrial and smallholder oil palm map for 2019 (Version v1).',
url: 'https://zenodo.org/records/4473715',
},
{
name: 'Vancutsem et al. Long-term (1990-2019) monitoring of forest cover changes in the humid tropics. ',
url: 'https://www.science.org/doi/10.1126/sciadv.abe1603',
},
],
};
import { DATASET_FOR_EUDR, LANDGRIFFON_ANALYSIS } from './constants';

const DatasetReleases: React.FC = () => (
<section className="relative bg-white">
Expand Down
Loading

0 comments on commit c989380

Please sign in to comment.