compliance images

marketing/src/containers/compliance/component.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 
 import Hero from 'containers/compliance/hero';
-import Video from 'containers/compliance/video';
 import ContactUs from 'containers/compliance/contact-us';
 import EUDRTool from 'containers/compliance/eudr-tool';
 
@@ -33,7 +32,6 @@ const Compliance: React.FC = () => {
   return (
     <>
       <Hero />
-      <Video />
       <EUDRCompliance />
       <EUDRTool />
       <ContactUs />

marketing/src/containers/compliance/eudr-compliance/component.tsx

@@ -56,6 +56,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="ESA"
                             width={160}
                             height={58.07}
+                            draggable={false}
                           />
                         </a>
                       </li>
@@ -72,6 +73,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="Wageningen University & Reseacrh"
                             width={228}
                             height={80}
+                            draggable={false}
                           />
                         </a>
                       </li>
@@ -88,6 +90,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="GFW"
                             width={120}
                             height={122}
+                            draggable={false}
                           />
                         </a>
                       </li>
@@ -104,6 +107,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="FAO"
                             width={120}
                             height={122.5}
+                            draggable={false}
                           />
                         </a>
                       </li>
@@ -121,6 +125,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="World Conservation Monitoring Centre"
                             width={120}
                             height={122.5}
+                            draggable={false}
                           />
                         </a>
                       </li>
@@ -133,6 +138,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="GLAD | Global Land Analysis & Discovery"
                             width={214}
                             height={49}
+                            draggable={false}
                           />
                         </a>
                       </li>
@@ -149,6 +155,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="Forest data Partnership"
                             width={175}
                             height={49}
+                            draggable={false}
                           />
                         </a>
                       </li>
@@ -165,6 +172,7 @@ const EUDRCompliance: React.FC = () => {
                             alt="Forest data Partnership"
                             width={151}
                             height={68}
+                            draggable={false}
                           />
                         </a>
                       </li>

marketing/src/containers/compliance/eudr-tool/component.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import Wrapper from 'containers/wrapper';
 import FadeIn from 'components/fade';
 
-import { EUDRToolFeatures1, EUDRToolFeatures2 } from './constants';
+import { EUDRToolFeatures } from './constants';
 
 const Card = ({ index, title, description }) => (
   <div className="space-y-2">
@@ -28,28 +28,30 @@ const EUDRTool: React.FC = () => {
 
           <FadeIn>
             <div className="md:grid md:grid-cols-3 w-full md:gap-x-14 flex flex-col space-y-14 md:space-y-0">
-              {EUDRToolFeatures1.map((feature) => (
+              {EUDRToolFeatures[0].map((feature) => (
                 <Card key={feature.title} {...feature} />
               ))}
             </div>
           </FadeIn>
 
           <FadeIn>
             <div className="w-full space-y-4 md:py-16">
-              <div className="relative max-w-3xl">
+              <div className="relative lg:max-w-3xl md:max-w-2xl max-w-sm">
                 <Image
                   width={728}
                   height={410}
                   layout="responsive"
                   src="/images/compliance/eudr_tool.png"
                   alt="EUDR Tool"
+                  draggable={false}
                 />
-                <div className="md:absolute md:top-0 md:right-0 md:transform md:translate-x-1/2 md:translate-y-1/2">
+                <div className="absolute md:top-0 lg:right-0 md:right-20 right-28 -top-3  transform translate-x-1/2 translate-y-1/2">
                   <Image
                     width={443}
                     height={221}
                     src="/images/compliance/eudr_tool_country.png"
                     alt="EUDR Tool Countries view"
+                    draggable={false}
                   />
                 </div>
               </div>
@@ -58,7 +60,7 @@ const EUDRTool: React.FC = () => {
 
           <FadeIn>
             <div className="md:grid md:grid-cols-3 w-full md:gap-x-14 flex flex-col space-y-14 md:space-y-0">
-              {EUDRToolFeatures2.map((feature) => (
+              {EUDRToolFeatures[1].map((feature) => (
                 <Card key={feature.title} {...feature} />
               ))}
             </div>

marketing/src/containers/compliance/eudr-tool/constants.ts

@@ -1,41 +1,42 @@
-export const EUDRToolFeatures1 = [
-  {
-    index: '01',
-    title: 'Achieve EUDR Alignment and Beyond',
-    description:
-      'Align with new standards and requirements (ESRS, TNFD, SBTN). Produce transparent, repeatable, and auditable analysis.',
-  },
-  {
-    index: '02',
-    title: 'Produce Transparent, Repeatable, and Auditable Analyses',
-    description:
-      'Our tool ensures your analyses are transparent, repeatable, and audit-ready, instilling confidence in your sustainability reporting.',
-  },
-  {
-    index: '03',
-    title: 'Visualize and Analyze Risk Exposure',
-    description:
-      'Identify and understand risk exposure by commodity, volume, supplier, and region through intuitive visualizations and in-depth analysis.',
-  },
-];
-
-export const EUDRToolFeatures2 = [
-  {
-    index: '04',
-    title: 'Comprehensively Manage Scope 3 Supply Chain',
-    description:
-      'Our tool covers a wide range of commodities including cattle, cocoa, coffee, palm oil, rubber, soy, wood, and more, enabling comprehensive management of your scope 3 supply chain.',
-  },
-  {
-    index: '05',
-    title: 'Seamless Integration with Existing Data Systems',
-    description:
-      'Easily integrate our tool with your existing data systems, streamlining your sustainability efforts without disruption.',
-  },
-  {
-    index: '06',
-    title: 'Leverage Latest Scientific Data',
-    description:
-      'Make informed decisions backed by the latest scientific data, ensuring your sustainability strategies are grounded in sound knowledge and expertise.',
-  },
+export const EUDRToolFeatures = [
+  [
+    {
+      index: '01',
+      title: 'Achieve EUDR Alignment and Beyond',
+      description:
+        'Align with new standards and requirements (ESRS, TNFD, SBTN). Produce transparent, repeatable, and auditable analysis.',
+    },
+    {
+      index: '02',
+      title: 'Produce Transparent, Repeatable, and Auditable Analyses',
+      description:
+        'Our tool ensures your analyses are transparent, repeatable, and audit-ready, instilling confidence in your sustainability reporting.',
+    },
+    {
+      index: '03',
+      title: 'Visualize and Analyze Risk Exposure',
+      description:
+        'Identify and understand risk exposure by commodity, volume, supplier, and region through intuitive visualizations and in-depth analysis.',
+    },
+  ],
+  [
+    {
+      index: '04',
+      title: 'Comprehensively Manage Scope 3 Supply Chain',
+      description:
+        'Our tool covers a wide range of commodities including cattle, cocoa, coffee, palm oil, rubber, soy, wood, and more, enabling comprehensive management of your scope 3 supply chain.',
+    },
+    {
+      index: '05',
+      title: 'Seamless Integration with Existing Data Systems',
+      description:
+        'Easily integrate our tool with your existing data systems, streamlining your sustainability efforts without disruption.',
+    },
+    {
+      index: '06',
+      title: 'Leverage Latest Scientific Data',
+      description:
+        'Make informed decisions backed by the latest scientific data, ensuring your sustainability strategies are grounded in sound knowledge and expertise.',
+    },
+  ],
 ];

marketing/src/containers/compliance/hero/component.tsx

@@ -1,33 +1,30 @@
-import { PauseIcon, PlayIcon } from '@heroicons/react/solid';
+import { FC } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
+import { useInView } from 'react-intersection-observer';
 import Wrapper from 'containers/wrapper';
-
+import { Media } from 'components/media-query';
+import Image from 'next/image';
+import YouTube from 'react-youtube';
 import { motion } from 'framer-motion';
-import { useCallback, useEffect, useRef, useState } from 'react';
 
-const Hero: React.FC = () => {
+const Video: 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 { ref, inView } = useInView();
 
   const onVideoEnded = useCallback(() => {
-    setPlaying(false);
     videoRef.current.pause();
     videoRef.current.currentTime = 0;
   }, []);
 
   useEffect(() => {
+    if (videoRef.current && !inView) {
+      videoRef.current.pause();
+    }
+
     if (videoRef.current) {
       videoRef.current.addEventListener('ended', onVideoEnded);
     }
-  }, [onVideoEnded]);
+  }, [inView, onVideoEnded]);
 
   return (
     <section className="relative z-10 bg-white">
@@ -44,41 +41,30 @@ const Hero: React.FC = () => {
             </h1>
           </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>
-          <motion.iframe
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.75, delay: 0.1 }}
-            width="853"
-            height="480"
-            src="https://www.youtube.com/embed/RIJ1lX57TtI"
-            frameBorder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowFullScreen
-            title="Landgriffon: Sustainable Supply Chain Solutions"
-            className="w-full h-[190px] md:h-[438px] lg:h-[603px]"
-          />
-        </motion.div>
       </Wrapper>
+      <div className="relative z-20">
+        <Wrapper>
+          <section ref={ref} className="relative max-h-screen bg-white">
+            <YouTube
+              videoId="Bzvdwt-EuNM"
+              title="Landgriffon: Sustainable Supply Chain Solutions"
+              className="w-full h-[320px] md:h-[418px] lg:h-[583px]"
+              iframeClassName="w-full h-[320px] md:h-[418px] lg:h-[583px]"
+            />
+          </section>
+        </Wrapper>
+      </div>
+      <div className="flex flex-col justify-end overflow-hidden relative z-10  md:-mt-80 -mt-72 h-80 md:h-[420px] lg:h-[696px]">
+        <Image
+          alt="field"
+          src="/images/compliance/hero_1.jpg"
+          layout="fill"
+          objectPosition="top"
+          className="object-cover"
+          draggable={false}
+        />
+      </div>
     </section>
   );
 };
-
-export default Hero;
+export default Video;

marketing/src/containers/compliance/impact-beyond-compliance/component.tsx

@@ -46,6 +46,7 @@ const ImpactBeyondCompliance: React.FC = () => {
             alt="Waves"
             layout="fill"
             className="absolute left-0 bottom-0 top-0"
+            draggable={false}
           />
         </div>
       </div>