From 32acdf2155a8af653384571ece1ef3fa67397ac2 Mon Sep 17 00:00:00 2001
From: hazigabriel <hazigabriel@gmail.com>
Date: Mon, 21 Aug 2023 16:06:28 +0300
Subject: [PATCH] feat: add design changes

---
 src/overlays/PortraitOverlay.jsx              |  4 +--
 .../CampaignToolkit/CampaignToolkit.jsx       | 18 ++++++------
 src/slides/CampaignVideo/CampaignVideo.jsx    | 12 ++++----
 src/slides/Events/Events.jsx                  | 12 ++++----
 src/slides/Healverse/Healverse.jsx            | 18 ++++++------
 src/slides/HerlandCTA/HerlandCTA.jsx          | 28 ++++++++++---------
 src/slides/HerlandStories/HerlandStories.jsx  |  8 ++----
 src/slides/Landing/LandingPanel.jsx           |  2 +-
 .../PhotoExhibition/PhotoExhibition.jsx       | 14 ++++++----
 src/slides/Plegdes/Pledges.jsx                | 20 +++++++++----
 .../VideoExhibition/VideoExhibition.jsx       | 15 ++++++----
 .../VirtualExhibition/VirtualExhibition.jsx   |  8 ++----
 12 files changed, 90 insertions(+), 69 deletions(-)

diff --git a/src/overlays/PortraitOverlay.jsx b/src/overlays/PortraitOverlay.jsx
index 89e67ec..f0ef142 100644
--- a/src/overlays/PortraitOverlay.jsx
+++ b/src/overlays/PortraitOverlay.jsx
@@ -13,10 +13,10 @@ function PortraitOverlay(props) {
       onClick={closeOverlay}
     >
       <div className="lg:m-10 sm:m-0 max-xs:m-0">
-        <div className="relative p-1 bg-white shadow-lg ">
+        <div className="relative p-1 lg:m-8 md:m-5 sm:m-2 max-xs:m-1 bg-white shadow-lg ">
           <img src={portrait} alt="Overlay" className="w-full h-auto" />
           <button
-            className="absolute top-2 right-2 text-gray-500 hover:text-gray-800"
+            className="absolute top-3 right-3"
             onClick={closeOverlay}
           >
             <svg
diff --git a/src/slides/CampaignToolkit/CampaignToolkit.jsx b/src/slides/CampaignToolkit/CampaignToolkit.jsx
index 7101973..54b81f6 100644
--- a/src/slides/CampaignToolkit/CampaignToolkit.jsx
+++ b/src/slides/CampaignToolkit/CampaignToolkit.jsx
@@ -1,13 +1,15 @@
 import React from "react";
 import ArrowRight from "../../static/icons/arrow-right.svg";
-import { textH2, textBodyMedium, textBodyLarge } from "../../assets/css/fontSizes";
+import {
+  textH2,
+  textBodyMedium,
+  textBodyLarge,
+} from "../../assets/css/fontSizes";
 function CampaignToolkit() {
   return (
     <section className="full-height campaign-toolkit-background grid grid-cols-12	 content-center panel-inner">
       <div className="max-sm:col-span-12 sm:col-span-12 lg:col-span-6 text-black">
-        <h2 className={`${textH2}`}>
-          Campaign toolkit
-        </h2>
+        <h2 className={`${textH2}`}>Campaign toolkit</h2>
         <p className={`${textBodyLarge} mt-10`}>
           Help us spread the word about{" "}
           <span className="font-bold">#HerLand</span> campaign with our
@@ -19,7 +21,7 @@ function CampaignToolkit() {
         </p>
         <p className={`${textBodyLarge} mt-6`}>
           Also find out how to utilize hashtags like{" "}
-          <span className="font-bold">#HerLandHerRights</span> and&nbsp; 
+          <span className="font-bold">#HerLandHerRights</span> and&nbsp;
           <span className="font-bold">#LandHeroes</span>, engage with
           influencers, and create a social media buzz that echoes our call for
           gender equality in land rights.
@@ -28,11 +30,9 @@ function CampaignToolkit() {
           href="https://trello.com/b/AuQjCPfN/unccd-herland-campaign"
           target="_blank"
         >
-          <div className="flex max-sm:gap-2 sm:gap-2 md:gap-5 mt-4 cursor-pointer text-violet-700	">
+          <div className="flex max-sm:gap-2 sm:gap-2 md:gap-5 mt-4 cursor-pointer text-violet-700 hover:underline">
             <img src={ArrowRight} className="icon scale-150" />
-            <p className="max-sm:text-xl lg:text-xl 2xl:text-2xl  md:text-2xl m-0">
-              Link to promotional materials
-            </p>
+            <p className={textBodyLarge}>Link to promotional materials</p>
           </div>
         </a>
       </div>
diff --git a/src/slides/CampaignVideo/CampaignVideo.jsx b/src/slides/CampaignVideo/CampaignVideo.jsx
index 89fe03f..ae696a2 100644
--- a/src/slides/CampaignVideo/CampaignVideo.jsx
+++ b/src/slides/CampaignVideo/CampaignVideo.jsx
@@ -1,12 +1,12 @@
-import { textH2, textBodyMedium, textBodyLarge, textBodyLargeBold, textBodyMediumBold } from "../../assets/css/fontSizes";
+import { textBodyMedium, textBodyLarge } from "../../assets/css/fontSizes";
 
 function CampaignVideo() {
   return (
     <section className="full-height bg-indigo-900 text-white panel-inner grid content-center	">
-      <div className="grid grid-cols-12  gap-6 ">
+      <div className="grid grid-cols-12 gap-6 my-6">
         <div
-          className="max-sm:col-span-12 sm:col-span-12 lg:col-span-5 flex panel-inner relative "
-          style={{ position: "relative", height: "100%" }}
+          className="max-sm:col-span-12 sm:col-span-12 xl:col-span-5 lg:col-span-4 flex panel-inner relative "
+          style={{ position: "relative" }}
         >
           <iframe
             src="https://www.youtube.com/embed/b_0rx56VCak?rel=0&modestbranding=1"
@@ -16,7 +16,7 @@ function CampaignVideo() {
             width={"100%"}
           />
         </div>
-        <div className="max-sm:col-span-12 sm:col-span-12 lg:col-span-7 lg:ml-6 max-xs:ml-6  font-light">
+        <div className="max-sm:col-span-12 sm:col-span-12 xl:col-span-7 lg:col-span-8 lg:ml-6 max-xs:ml-6  font-light">
           <p className={`${textBodyLarge}`}>
             Together with partners, activists and influencers,&nbsp;
             <a
@@ -48,7 +48,7 @@ function CampaignVideo() {
             discover more and join! All of us can do our part:
           </p>
           <p className={`${textBodyMedium} mt-6`}>All of us can do our part:</p>
-          <ul className={`${textBodyMedium} list-disc mb-10 ml-6`} >
+          <ul className={`${textBodyMedium} list-disc ml-6`}>
             <li>
               Governments can promote laws, policies and practices that end
               discrimination and secure women’s rights to land and resources.
diff --git a/src/slides/Events/Events.jsx b/src/slides/Events/Events.jsx
index b5f776d..f021b6f 100644
--- a/src/slides/Events/Events.jsx
+++ b/src/slides/Events/Events.jsx
@@ -1,5 +1,9 @@
 import React from "react";
-import { textH2, textBodyLarge, textBodyMedium } from "../../assets/css/fontSizes";
+import {
+  textH2,
+  textBodyLarge,
+  textBodyMedium,
+} from "../../assets/css/fontSizes";
 
 function Events() {
   return (
@@ -56,11 +60,9 @@ function Events() {
         </div>
       </div>
       <div className="text-black justify-self-end	">
-        <h2 className={textH2}>
-          Contact & Support
-        </h2>
+        <h2 className={textH2}>Contact & Support</h2>
 
-        <p className={`${textBodyMedium} mt-6 mb-6`}>
+        <p className={`${textBodyMedium} mt-6 max-sm:mb-6 sm:mb-0`}>
           Contact Information:
           <a className="text-blue-700" href="mailto:herland@unccd.int">
             &nbsp;herland@unccd.int
diff --git a/src/slides/Healverse/Healverse.jsx b/src/slides/Healverse/Healverse.jsx
index 552fedb..25d986a 100644
--- a/src/slides/Healverse/Healverse.jsx
+++ b/src/slides/Healverse/Healverse.jsx
@@ -1,13 +1,15 @@
 import React from "react";
 import ArrowRight from "../../static/icons/arrow-right.svg";
-import { textH2, textBodyMedium, textBodyMediumBold } from "../../assets/css/fontSizes";
+import {
+  textH2,
+  textBodyMedium,
+  textBodyMediumBold,
+} from "../../assets/css/fontSizes";
 function Healverse() {
   return (
     <section className="full-height panel-inner flex flex-col  justify-content-center text-white  healverse-background">
-      <div>
-        <h2 className={textH2}>
-          Web3/Metaverse Experience (HEALV3RSE)
-        </h2>
+      <div className="max-sm:mt-10 sm:mt-0">
+        <h2 className={textH2}>Web3/Metaverse Experience (HEALV3RSE)</h2>
       </div>
       <div className="grid grid-cols-12 mt-10 gap-6">
         <div className="max-sm:col-span-12 sm:col-span-12 lg:col-span-6 flex panel-inner iframe-wrapper">
@@ -20,7 +22,7 @@ function Healverse() {
           />
         </div>
         <div className="max-sm:col-span-12 sm:col-span-12 lg:col-span-6 lg:ml-6 max-sm:ml-0 mb-6 font-light">
-        <p className={`${textBodyMedium} pt-6`}>
+          <p className={`${textBodyMedium} pt-6`}>
             Embark on a journey unlike any other in the world of HEALV3RSE. We
             invite you to explore, learn, and contribute to the fight against
             desertification, land degradation, and drought in a cutting-edge
@@ -53,9 +55,9 @@ function Healverse() {
             href="https://trello.com/b/AuQjCPfN/unccd-herland-campaign"
             target="_blank"
           >
-            <div className="flex max-sm:gap-2 sm:gap-2 md:gap-5 mt-4 cursor-pointer">
+            <div className="flex max-sm:gap-2 sm:gap-2 md:gap-5 mt-4 cursor-pointer hover:underline">
               <img src={ArrowRight} className="icon icon-white scale-150" />
-              <p className={`${textBodyMediumBold} m-0`}>Access the portal</p>
+              <p className={`${textBodyMedium} m-0`}>Access the portal</p>
             </div>
           </a>
         </div>
diff --git a/src/slides/HerlandCTA/HerlandCTA.jsx b/src/slides/HerlandCTA/HerlandCTA.jsx
index 1bd2047..377901f 100644
--- a/src/slides/HerlandCTA/HerlandCTA.jsx
+++ b/src/slides/HerlandCTA/HerlandCTA.jsx
@@ -1,27 +1,29 @@
 import React from "react";
-import { textH2, textBodyMedium, textBodyMediumBold } from "../../assets/css/fontSizes";
+import {
+  textH2,
+  textBodyMedium,
+  textBodyMediumBold,
+} from "../../assets/css/fontSizes";
 function HerlandCTA() {
-  const pClassName = `${textBodyMedium} lg:mt-4 md:mt-4`;
+  const pClassName = `${textBodyMedium} max-sm:mt-3 lg:mt-4 md:mt-4`;
   return (
-    <section className="panel-inner grid grid-cols-12 items-center   herland-cta">
-      <div className="col-span-12 grid grid-cols-12 gap-4 text-white  ">
+    <section className="panel-inner grid grid-cols-12 items-center herland-cta">
+      <div className="col-span-12 grid grid-cols-12 gap-4 text-white max-sm:my-10 sm:my-2 ">
         <div className="col-span-12">
-          <h2 className={`${textH2} lg:mt-2`}>
-            HerLand call to action
-          </h2>
+          <h2 className={`${textH2} lg:mt-2`}>HerLand call to action</h2>
           <p className={`${textBodyMediumBold} max-sm:mt-4 sm:mt-4 lg:mt-4`}>
             Make women's land rights a reality
           </p>
         </div>
-        <div className="max-sm:text-xs sm:text-base 2xl:col-span-4 lg:col-span-6 md:col-span-12 sm:col-span-12 max-sm:col-span-12 ">
-          <p className={`${pClassName} md:mr-32 lg:mr-0`}>
+        <div className="col-span-4 xl:col-span-4 lg:col-span-6 md:col-span-10 sm:col-span-12 max-sm:col-span-12 ">
+          <p className={`${pClassName}`}>
             Healthy land is vital for human survival, it is the largest source
             of income, jobs and livelihoods for poor, rural households. It is
             also crucial for climate and biodiversity action. Yet, we are losing
             productive land daily through desertification, poor land management
             and worsening droughts.
           </p>
-          <p className={`${pClassName} md:mr-20 lg:mr-0`}>
+          <p className={`${pClassName}`}>
             As the main producers of food, when land is degraded women and girls
             are impacted first and most. They are disproportionately affected by
             poverty, hunger, displacement, and violence.
@@ -38,13 +40,13 @@ function HerlandCTA() {
             resilience to drought.{" "}
           </p>
         </div>
-        <div className="max-sm:text-xs sm:text-base 2xl:col-span-4 lg:col-span-6 md:col-span-12 sm:col-span-12 max-sm:col-span-12 md:mr-32">
-          <p className={`${pClassName} xl:mr-0 lg:mr-16 md:mr-0`}>
+        <div className="2xl:col-span-4 xl:col-span-4 lg:col-span-5 md:col-span-10 sm:col-span-12 max-sm:col-span-12">
+          <p className={`${pClassName}  xl:mr-0 lg:mr-16 md:mr-0`}>
             Women also invest more in nutrition, health and education which
             benefits their families, and wider societies. That’s why we are
             calling for a step change in women’s role in managing our land.
           </p>
-          <p className={pClassName}>
+          <p className={`${pClassName}  xl:mr-0 lg:mr-16 md:mr-0`}>
             We call upon governments to eliminate legal barriers to women and
             girls’ landownership, ensure women can inherit land, and promote
             their participation in land management, conservation, and
diff --git a/src/slides/HerlandStories/HerlandStories.jsx b/src/slides/HerlandStories/HerlandStories.jsx
index 8ff0396..d4d26be 100644
--- a/src/slides/HerlandStories/HerlandStories.jsx
+++ b/src/slides/HerlandStories/HerlandStories.jsx
@@ -4,9 +4,7 @@ function HerlandStories() {
   return (
     <section className="full-height text-white desert-logo panel-inner grid grid-cols-12">
       <div className="max-sm:col-span-12 sm:col-span-12 md:col-span-6">
-        <h2 className={`${textH2} sm:pt-40 max-sm:pt-32`}>
-          #HerLand Stories
-        </h2>
+        <h2 className={`${textH2} sm:pt-40 max-sm:pt-32`}>#HerLand Stories</h2>
         <p className={`${textBodyLarge} my-10`}>
           Do you know an inspiring story about women, girls and land? We
           celebrate and showcase the voices, experiences, and creativity that
@@ -17,9 +15,9 @@ function HerlandStories() {
           href="https://www.unccd.int/land-and-life/gender/herland/share-your-story"
           target="_blank"
         >
-          <div className="flex max-sm:gap-2 sm:gap-2 md:gap-5 mt-4 cursor-pointer">
+          <div className="flex max-sm:gap-2 sm:gap-2 md:gap-5 mt-4 cursor-pointer hover:underline">
             <img src={ArrowRight} className="icon icon-white scale-150" />
-            <p className="sm:text-xl md:text-2xl m-0">Submit your story here</p>
+            <p className={textBodyLarge}>Submit your story here</p>
           </div>
         </a>
       </div>
diff --git a/src/slides/Landing/LandingPanel.jsx b/src/slides/Landing/LandingPanel.jsx
index c469a5c..de533c5 100644
--- a/src/slides/Landing/LandingPanel.jsx
+++ b/src/slides/Landing/LandingPanel.jsx
@@ -1,5 +1,5 @@
 import DownArrow from "../../static/icons/arrow-down.svg";
-import UnccdLogoWhite from '../../static/logos/unccd-white.svg'
+import UnccdLogoWhite from "../../static/logos/unccd-white.svg";
 
 function LandingPanel() {
   return (
diff --git a/src/slides/PhotoExhibition/PhotoExhibition.jsx b/src/slides/PhotoExhibition/PhotoExhibition.jsx
index c60d80c..a786762 100644
--- a/src/slides/PhotoExhibition/PhotoExhibition.jsx
+++ b/src/slides/PhotoExhibition/PhotoExhibition.jsx
@@ -1,7 +1,11 @@
 import Carousel from "react-multi-carousel";
 import "react-multi-carousel/lib/styles.css";
 import importAllSmallPortraits from "./importPortraits";
-import { textBodyLarge, textBodyMedium, textH2 } from "../../assets/css/fontSizes";
+import {
+  textBodyLarge,
+  textBodyMedium,
+  textH2,
+} from "../../assets/css/fontSizes";
 
 function PhotoExhibition(props) {
   const { setIsOverlayActive, setPortraitSrc } = props;
@@ -41,11 +45,11 @@ function PhotoExhibition(props) {
   return (
     <section className="full-height bg-white flex flex-column justify-around panel-inner">
       <div className="font-light">
-        <h2 className={`${textH2}`}>
-          #HerLand Photo Exhibition
-        </h2>
+        <h2 className={`${textH2}`}>#HerLand Photo Exhibition</h2>
         <div className="grid grid-cols-12 text-black">
-          <p className={`${textBodyLarge}  mt-8 md:col-span-8 sm:col-span-12 max-sm:col-span-12`}>
+          <p
+            className={`${textBodyLarge}  mt-8 md:col-span-8 sm:col-span-12 max-sm:col-span-12`}
+          >
             Experience the strength and beauty of women across continents in our
             exclusive 'Women & Land' photo exhibition. Curated by &nbsp;
             <a
diff --git a/src/slides/Plegdes/Pledges.jsx b/src/slides/Plegdes/Pledges.jsx
index fc68a90..79b7cf2 100644
--- a/src/slides/Plegdes/Pledges.jsx
+++ b/src/slides/Plegdes/Pledges.jsx
@@ -3,7 +3,11 @@ import ArrowRight from "../../static/icons/arrow-right.svg";
 import Carousel from "react-multi-carousel";
 import pledgeData from "./pledgeData";
 import "react-multi-carousel/lib/styles.css";
-import { textH2, textBodyLarge, textBodyMedium } from "../../assets/css/fontSizes";
+import {
+  textH2,
+  textBodyLarge,
+  textBodyMedium,
+} from "../../assets/css/fontSizes";
 
 function Pledge(props) {
   const { author, authorOccupation, paragraphs } = props;
@@ -11,12 +15,18 @@ function Pledge(props) {
     <div className="pledge-card bg-violet-800 text-white grid content-between sm:p-4 md:p-8 max-sm:p-4 m-2">
       <div>
         {paragraphs.map((paragraph, index) => (
-          <p key={index} className="max-sm:text-sm md:text-sm mb-2 2xl:text-lg">{paragraph}</p>
+          <p key={index} className="max-sm:text-sm md:text-sm mb-2 2xl:text-lg">
+            {paragraph}
+          </p>
         ))}
       </div>
       <div className="text-right">
-        <h3 className="xl:text-2xl g:text- xl sm:text-xl md:text-base max-sm:text-xl">{author}</h3>
-        <h4 className="xl:text-xl lg:text-base sm:text-base md:text-small font-light">{authorOccupation}</h4>
+        <h3 className="xl:text-2xl g:text- xl sm:text-xl md:text-base max-sm:text-xl">
+          {author}
+        </h3>
+        <h4 className="xl:text-xl lg:text-base sm:text-base md:text-small font-light">
+          {authorOccupation}
+        </h4>
       </div>
     </div>
   );
@@ -48,7 +58,7 @@ function Pledges() {
       partialVisibilityGutter: 30,
     },
   };
- 
+
   return (
     <section className="panel-inner grid grid-cols-12 items-center  bg-white">
       <div className="col-span-12 grid grid-cols-12 gap-4  ">
diff --git a/src/slides/VideoExhibition/VideoExhibition.jsx b/src/slides/VideoExhibition/VideoExhibition.jsx
index a3caf33..8b43d07 100644
--- a/src/slides/VideoExhibition/VideoExhibition.jsx
+++ b/src/slides/VideoExhibition/VideoExhibition.jsx
@@ -4,7 +4,12 @@ import SuhucamThumbnail from "../../static/video-thumbnails/2.png";
 import AlvarezThumbnail from "../../static/video-thumbnails/3.png";
 import PlayIcon from "../../static/icons/play-fill.svg";
 import VideoOverlay from "../../overlays/VideoOverlay";
-import { textH2, textBodyLarge, textBodyMedium, textBodyMediumBold } from "../../assets/css/fontSizes";
+import {
+  textH2,
+  textBodyLarge,
+  textBodyMedium,
+  textBodyMediumBold,
+} from "../../assets/css/fontSizes";
 function VideoExhibition(props) {
   const { setIsOverlayActive, setVideoSrc } = props;
   const showVideoOverlay = (url) => {
@@ -12,12 +17,12 @@ function VideoExhibition(props) {
     setIsOverlayActive(true);
   };
 
-  const nameClassNames = `${textBodyMediumBold} mt-6`
-   const descriptionClassNames = `${textBodyMedium} mb-10`
+  const nameClassNames = `${textBodyMediumBold} mt-6`;
+  const descriptionClassNames = `${textBodyMedium} mb-10`;
 
   return (
-    <section className="full-height bg-gray-950 text-white flex flex-col justify-center	 panel-inner">
-      <h2 className={`${textH2} pt-10`}>
+    <section className="full-height bg-gray-950 text-white flex flex-col justify-center	panel-inner ">
+      <h2 className={`${textH2} mt-10`}>
         Video-Art Exhibition: "TransNature" #HerLand
       </h2>
       <p className={`${textBodyLarge} pt-10`}>
diff --git a/src/slides/VirtualExhibition/VirtualExhibition.jsx b/src/slides/VirtualExhibition/VirtualExhibition.jsx
index 3d79691..dcd0a09 100644
--- a/src/slides/VirtualExhibition/VirtualExhibition.jsx
+++ b/src/slides/VirtualExhibition/VirtualExhibition.jsx
@@ -8,9 +8,7 @@ function VirtualExhibition() {
     <section className="bg-white panel-inner grid grid-cols-2 gap- h-full">
       <div className="lg:col-span-1  flex items-center sm:col-span-2 max-sm:col-span-2">
         <div className="font-light  md:mr-16 sm:mr-4 max-sm:mr-0">
-          <h2 className={`${textH2}`}>
-            Interactive virtual exhibition
-          </h2>
+          <h2 className={`${textH2}`}>Interactive virtual exhibition</h2>
           <p className={`${textBodyLarge} mt-8`}>
             You are also invited to access UNCCD's interactive virtual
             exhibition for Desertification & Drought Day on spatial.io. You will
@@ -21,9 +19,9 @@ function VirtualExhibition() {
             href="https://www.spatial.io/s/UNCCD-desertification-and-drought-day-647fac7fd64fd8e8d68f2e98?share=3481878158271637714"
             target="_blank"
           >
-            <div className="flex max-sm:gap-2 sm:gap-2 md:gap-5 mt-4 cursor-pointer text-violet-700">
+            <div className="flex max-sm:gap-2 sm:gap-2 md:gap-5 mt-4 cursor-pointer text-violet-700 hover:underline">
               <img src={ArrowRight} className="icon scale-150" />
-              <p className="sm:text-xl md:text-2xl m-0">Enter the exhibition</p>
+              <p className={textBodyLarge}>Enter the exhibition</p>
             </div>
           </a>
         </div>