feat: add design changes

unccd · Aug 21, 2023 · 32acdf2 · 32acdf2
1 parent 0ccff76
commit 32acdf2
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 69 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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:[email protected]">
             &nbsp;[email protected]

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -3,20 +3,30 @@ 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;
   return (
     <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
@@ -4,20 +4,25 @@ 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) => {
     setVideoSrc(url);
     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
@@ -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>