feat: add cta slide

src/Homepage.jsx

@@ -14,15 +14,17 @@ import PortraitOverlay from "./overlays/PortraitOverlay";
 import VideoOverlay from "./overlays/VideoOverlay";
 import Healverse from "./slides/Healverse/Healverse";
 import Footer from "./slides/Footer/Footer";
-
+import HerlandCTA from "./slides/HerlandCTA/HerlandCTA";
+import Pledges from "./slides/Plegdes/Pledges";
+
 function Homepage() {
   const [isPortraitOverlayActive, setIsPortraitOverlayActive] = useState(false);
   const [overlayPortraitSrc, setOverlayPortraitSrc] = useState("");
   const [isVideoOverlayActive, setIsVideoOverlayActive] = useState(false);
   const [overlayVideoSrc, setOverlayVideoSrc] = useState("");
   const [viewportWidth, setViewportWidth] = useState(window.innerWidth);
   const [UNCCD_LOGO, SET_UNCCD_LOGO] = useState(UnccdLogoWhite);
-  
+
   const changeLogoColor = (currentPanel) => {
     if (currentPanel.contains("unccd-logo-white")) {
       SET_UNCCD_LOGO(UnccdLogoWhite);
@@ -111,7 +113,6 @@ function Homepage() {
       window.removeEventListener("resize", handleResize);
       _window.removeEventListener("scroll", updateWindow);
     };
-
   }, [viewportWidth]);
 
   return (
@@ -122,6 +123,12 @@ function Homepage() {
       <div className="panel unccd-logo-white">
         <CampaignVideo />
       </div>
+      <div className="panel unccd-logo-white">
+        <HerlandCTA />
+      </div>
+      {/* <div className="panel unccd-logo-white">
+        <Pledges />
+      </div> */}
       <div className="panel unccd-logo-black">
         <CampaignToolkit />
       </div>

src/assets/css/Homepage.css

@@ -59,9 +59,6 @@ section {
   left: 0;
   z-index: 2;
 }
-.panel-taller {
-}
-
 .close-icon {
   min-width: 32px;
   min-height: 32px;
@@ -143,7 +140,7 @@ iframe {
   background-size: cover;
 }
 
-/* footer */
+/* events and footer */
 
 .event-wrapper {
   width: 391px !important;
@@ -170,6 +167,11 @@ iframe {
   padding: 0 5em;
   min-height: unset;
 }
+/* herland cta  */
+.herland-cta {
+  background: url("../../static/images/call-to-action.jpg") no-repeat right center;
+  background-color: #4D4399;
+}
 @media only screen and (min-width: 0px) and (max-width: 640px) {
   section {
     padding: 0 1em;
@@ -243,3 +245,16 @@ iframe {
     grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   }
 }
+@media only screen and (max-width:1535px) {
+  .herland-cta {
+    background: url("../../static/images/call-to-action-alternative.jpg") no-repeat right bottom;
+    background-color: #4D4399;
+  }
+}
+@media only screen and (max-width: 766px) {
+  .herland-cta {
+    background: url("../../static/images/call-to-action-mobile.jpg") no-repeat right bottom;
+    background-size: 50%;
+    background-color: #4D4399;
+  }
+}

src/slides/CampaignToolkit/CampaignToolkit.jsx

@@ -27,7 +27,7 @@ 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-blue-700	">
+          <div className="flex max-sm:gap-2 sm:gap-2 md:gap-5 mt-4 cursor-pointer text-violet-700	">
             <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

src/slides/HerlandCTA/HerlandCTA.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+
+function HerlandCTA() {
+  const pClassName = "mt-6";
+  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 mt-10 max-sm:mt-32 mb-32 max-sm:mb-50">
+        <div className="col-span-12">
+          <h2 className="max-sm:text-base sm:text-2xl md:text-3xl lg:text-3xl xl:text-5xl lg:my-16 md:mt-32">
+            HerLand call to action
+          </h2>
+          <h3 className="max-sm:text-base sm:text-2xl md:text-2xl lg:text-2xl xl:text-3xl font-bold md:mt-10 lg:m-0">
+              Make women's land rights a reality
+          </h3>
+        </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} md:mr-16 lg:mr-0`}>
+            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-16 lg:mr-0`}>
+            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.
+          </p>
+          <p className={pClassName}>
+            And yet they are known to be the best to protect and restore the
+            land. They cannot do so though, given they have minimal control over
+            land itself or decisions about how to manage it. Less than one-fifth
+            of landholders worldwide are women.
+          </p>
+          <p className={pClassName}>
+            But it doesn’t have to be this way. When land rights are secured, we
+            have seen women and girls increase yields, restore land, and build
+            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`}>
+            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}>
+            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
+            restoration.
+          </p>
+          <p className={`${pClassName} md:mr-0 sm:mr-32 max-sm:mr-0  `}>
+            We call upon the private sector and financial institutions to
+            unleash more access to finance so women can invest in the
+            technological inputs they need to improve land.
+          </p>
+          <p className={`${pClassName} md:mr-0 sm:mr-50 max-sm:mr-40  `}>
+            And we ask the public to join us by standing with women and girls
+            around the world in their pursuit for equal and full rights to land.
+          </p>
+        </div>
+        <div  >
+         </div>
+      </div>
+    </section>
+  );
+}
+
+export default HerlandCTA;

src/slides/HerlandStories/HerlandStories.jsx

@@ -13,10 +13,15 @@ function HerlandStories() {
           shape the #HerLand campaign. Explore the various elements that
           together create a tapestry of inspiration and awareness.
         </p>
-        <div className="flex max-sm:gap-2 sm:gap-2 md:gap-5 mt-4 cursor-pointer sm:pt-20 max-sm:pt-10">
-          <img src={ArrowRight} className="icon icon-white scale-150" />
-          <p className="sm:text-xl md:text-2xl m-0">Submit your story here</p>
-        </div>
+        <a
+          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">
+            <img src={ArrowRight} className="icon icon-white scale-150" />
+            <p className="sm:text-xl md:text-2xl m-0">Submit your story here</p>
+          </div>
+        </a>
       </div>
     </section>
   );

src/slides/Plegdes/Pledges.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Pledges() {
+  return (
+    <section className='panel-inner bg-amber-500'>Pledges</section>
+  )
+}
+
+export default Pledges

src/slides/VirtualExhibition/VirtualExhibition.jsx

@@ -20,7 +20,7 @@ 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-blue-700">
+            <div className="flex max-sm:gap-2 sm:gap-2 md:gap-5 mt-4 cursor-pointer text-violet-700">
               <img src={ArrowRight} className="icon scale-150" />
               <p className="sm:text-xl md:text-2xl m-0">Enter the exhibition</p>
             </div>