Merge pull request #80 from Vizzuality/SKY30-151-update-the-sky-truth…

…-platform-with-the-final-illustrations-final

[SKY30-151] Update the SkyTruth platform with the final illustrations

frontend/src/components/static-pages/intro/index.tsx

@@ -7,8 +7,9 @@ import { cn } from '@/lib/classnames';
 import ArrowRight from '@/styles/icons/arrow-right.svg?sprite';
 
 const BACKGROUND_IMAGES = {
-  computer2: '/images/static-pages/bg-images/card-1.png',
-  magnifyingGlass: '/images/static-pages/bg-images/card-4.png',
+  computer: '/images/static-pages/bg-images/card-1.png',
+  magnifyingGlass: '/images/static-pages/bg-images/card-2.png',
+  tablet: '/images/static-pages/bg-images/card-3.png',
 };
 
 const introVariants = cva('', {
@@ -34,7 +35,7 @@ const Intro: React.FC<IntroProps> = ({
   title,
   description,
   color,
-  image = 'computer2',
+  image = 'computer',
   onScrollClick,
 }) => (
   <div className={cn('border-b border-black bg-black', introVariants({ color }))}>
@@ -48,7 +49,7 @@ const Intro: React.FC<IntroProps> = ({
       <div className="w-full border-l border-black md:w-[40%]">
         <div className="flex h-full flex-col">
           <span
-            className="aspect-square max-h-[200px] border-b border-black bg-cover bg-center bg-no-repeat md:max-h-full"
+            className="aspect-square max-h-[200px] border-b border-black bg-cover bg-center bg-no-repeat mix-blend-multiply md:max-h-full"
             style={{
               backgroundImage: `url(${BACKGROUND_IMAGES[image]})`,
             }}

frontend/src/containers/homepage/link-cards/index.tsx

@@ -7,7 +7,7 @@ const LinkCards: React.FC = () => (
       title="Data Tool"
       subtitle="An interactive tool for tracking 30x30 progress and drawing new protected areas"
       description="This tool allows users to understand global progress toward 30x30 at a glance, draw new potential protected areas, and illustrate the effects of those proposed areas on national and global progress toward 30x30."
-      image="computer2"
+      image="computer"
       link={PAGES.dataTool}
       linkLabel="Go to the Data Tool"
     />

frontend/src/containers/homepage/link-cards/link-card/index.tsx

@@ -7,8 +7,8 @@ import { cn } from '@/lib/classnames';
 import ArrowRight from '@/styles/icons/arrow-right.svg?sprite';
 
 const BACKGROUND_IMAGES = {
-  computer2: '/images/static-pages/bg-images/card-3.png',
-  magnifyingGlass: '/images/static-pages/bg-images/card-4.png',
+  computer: '/images/static-pages/bg-images/card-1.png',
+  magnifyingGlass: '/images/static-pages/bg-images/card-2.png',
 };
 
 const linkCardVariants = cva('', {
@@ -39,7 +39,7 @@ const LinkCard: React.FC<LinkCardProps> = ({
   color,
   link,
   linkLabel,
-  image = 'computer2',
+  image = 'computer',
 }) => (
   <div className={cn('flex flex-col border border-black md:flex-row', linkCardVariants({ color }))}>
     <div className="flex w-full flex-col gap-4 border-r border-black p-6 md:w-[50%]">
@@ -49,7 +49,7 @@ const LinkCard: React.FC<LinkCardProps> = ({
     </div>
     <div className="flex flex-1 flex-col">
       <span
-        className="aspect-square max-h-[160px] border-b border-t border-black bg-cover bg-center bg-no-repeat md:max-h-full md:border-t-0"
+        className="aspect-square max-h-[160px] border-b border-t border-black bg-cover bg-center bg-no-repeat mix-blend-multiply md:max-h-full md:border-t-0"
         style={{
           backgroundImage: `url(${BACKGROUND_IMAGES[image]})`,
         }}

frontend/src/pages/about/index.tsx

@@ -50,6 +50,7 @@ const About: React.FC = () => {
         <Intro
           title="A global movement to protect 30% of the world’s lands and waters by 2030."
           color="purple"
+          image="tablet"
           onScrollClick={handleIntroScrollClick}
         />
       }