fix: renamed components, small layout fixes

unccd · Aug 18, 2023 · 2a74f12 · 2a74f12
1 parent 2d649e5
commit 2a74f12
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 117 deletions.
diff --git a/src/Homepage.jsx b/src/Homepage.jsx
@@ -2,17 +2,18 @@ import { useEffect, useState, useRef } from "react";
 import "./assets/css/Homepage.css";
 import LandingPanel from "./slides/Landing/LandingPanel";
 import CampaignVideo from "./slides/CampaignVideo/CampaignVideo";
-import PortraitCarousel from "./slides/PortraitCarousel/PortraitCarousel";
+import PhotoExhibition from "./slides/PhotoExhibition/PhotoExhibition";
 import HerlandStories from "./slides/HerlandStories/HerlandStories";
 import VideoExhibiton from "./slides/VideoExhibition/VideoExhibition";
-import Footer from "./slides/Footer/Footer";
+import Events from "./slides/Events/Events";
 import UnccdLogoBlack from "./static/logos/unccd-black.svg";
 import UnccdLogoWhite from "./static/logos/unccd-white.svg";
 import CampaignToolkit from "./slides/CampaignToolkit/CampaignToolkit";
 import VirtualExhibition from "./slides/VirtualExhibition/VirtualExhibition";
 import PortraitOverlay from "./overlays/PortraitOverlay";
 import VideoOverlay from "./overlays/VideoOverlay";
 import Healverse from "./slides/Healverse/Healverse";
+import Footer from "./slides/Footer/Footer";
 import gsap from "gsap";
 import ScrollTrigger from "gsap/ScrollTrigger";
 
@@ -58,20 +59,20 @@ function Homepage() {
     const panelsY = Array.from(panels).map(
       (panel) => panel.offsetTop + panel.offsetHeight
     );
-
 
     // Bind our function to window scroll
     _window.addEventListener("scroll", updateWindow);
 
     if (isPanelsTallerThanWindow) {
       _window.removeEventListener("scroll", updateWindow);
       Array.from(document.querySelectorAll(".panel")).map((panel) => {
-        const clearPanelClassList = panel.className.replace("panel-fixed", "").replace("panel-taller", "");
+        const clearPanelClassList = panel.className
+          .replace("panel-fixed", "")
+          .replace("panel-taller", "");
         panel.className = clearPanelClassList;
         return panel;
       });
-      // alert(viewportWidth)
-      isPanelsTallerThanWindow = false
+      isPanelsTallerThanWindow = false;
     }
     // Update the window
     function updateWindow() {
@@ -92,16 +93,6 @@ function Homepage() {
         }
       }
 
-      // Update classes
-      // panels.forEach((panel, index) => {
-      //   if (index === i) {
-      //     changeLogoColor(panel.classList);
-
-      //     panel.classList.add("panel-fixed");
-      //   } else {
-      //     panel.classList.remove("panel-fixed");
-      //   }
-      // });
       panels.forEach((panel, index) => {
         if (index === i) {
           changeLogoColor(panel.classList);
@@ -146,7 +137,7 @@ function Homepage() {
         <HerlandStories />
       </div>
       <div className="panel unccd-logo-black">
-        <PortraitCarousel
+        <PhotoExhibition
           setIsOverlayActive={setIsPortraitOverlayActive}
           setPortraitSrc={setOverlayPortraitSrc}
         />
@@ -164,11 +155,9 @@ function Homepage() {
         <Healverse />
       </div>
       <div className="panel unccd-logo-black">
-        <Footer />
+        <Events />
       </div>
-      <section className="copywright bg-gray-950 text-white py-4">
-        <p className="text-xs"> ©UNCCD 2023</p>
-      </section>
+      <Footer />
       <img
         id="unccd-logo"
         src={UNCCD_LOGO}

diff --git a/src/assets/css/Homepage.css b/src/assets/css/Homepage.css
@@ -175,7 +175,7 @@ iframe {
     padding: 0 1em;
   }
   .copywright {
-    padding: 0 1em
+    padding: 0 1em;
   }
   .event-wrapper {
     width: 90vw !important;
@@ -237,3 +237,9 @@ iframe {
     transform: scale(0.9);
   }
 }
+
+@media only screen and (max-width: 2022px) and (min-width: 1536px) {
+  .footer-events {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+}
diff --git a/src/slides/CampaignToolkit/CampaignToolkit.jsx b/src/slides/CampaignToolkit/CampaignToolkit.jsx
@@ -8,18 +8,25 @@ function CampaignToolkit() {
           Campaign toolkit
         </h2>
         <p className="max-sm:text-base lg:text-base 2xl:text-2xl font-light mt-8">
-          Help us spread the word about <span className="font-bold">#HerLand</span> campaign with our ready-to-use
-          promotional materials. From posters and flyers to banners and
-          infographics, these assets are designed to communicate the urgency and
-          importance of our cause. Download and share them in your community,
-          workplace, or social circles, and inspire others to join the movement.
+          Help us spread the word about{" "}
+          <span className="font-bold">#HerLand</span> campaign with our
+          ready-to-use promotional materials. From posters and flyers to banners
+          and infographics, these assets are designed to communicate the urgency
+          and importance of our cause. Download and share them in your
+          community, workplace, or social circles, and inspire others to join
+          the movement.
         </p>
         <p className="max-sm:text-base lg:text-base 2xl:text-2xl  font-light mt-4">
-          Also find out how to utilize hashtags like <span className="font-bold">#HerLandHerRights</span> and
-          <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.
+          Also find out how to utilize hashtags like{" "}
+          <span className="font-bold">#HerLandHerRights</span> and
+          <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.
         </p>
-        <a href="https://trello.com/b/AuQjCPfN/unccd-herland-campaign" target="_blank">
+        <a
+          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	">
             <img src={ArrowRight} className="icon scale-150" />
             <p className="max-sm:text-xl lg:text-xl 2xl:text-2xl  md:text-2xl m-0">

diff --git a/src/slides/CampaignVideo/CampaignVideo.jsx b/src/slides/CampaignVideo/CampaignVideo.jsx
@@ -16,25 +16,24 @@ function CampaignVideo() {
         </div>
         <div className="max-sm:col-span-12 sm:col-span-12 lg:col-span-6 lg:ml-6 max-xs:ml-6 mb-10 font-light">
           <p>
-            Together with partners, activists and influencers,{" "}
+            Together with partners, activists and influencers,
             <a
               href="https://www.unccd.int/convention/overview"
               target="_blank"
               rel="noopener noreferrer"
               className="underline"
             >
               UNCCD
-            </a>{" "}
-            is spearheading the campaign{" "}
+            </a>
+            is spearheading the campaign
             <a
               href="https://trello.com/b/AuQjCPfN/unccd-herland-campaign"
               target="_blank"
               rel="noopener noreferrer"
               className="underline"
             >
-              {" "}
               #HerLand
-            </a>{" "}
+            </a>
             to promote inspiring examples of women and girls’ leadership in
             sustainable land management, mobilizing support to secure land
             rights for women and girls across the world.
@@ -74,8 +73,7 @@ function CampaignVideo() {
                 rel="noopener noreferrer"
                 className="underline"
               >
-                {" "}
-                join our call to action
+                &nbsp; join our call to action
               </a>
               .
             </li>

diff --git a/src/slides/Events/Events.jsx b/src/slides/Events/Events.jsx
@@ -0,0 +1,73 @@
+import React from "react";
+
+function Events() {
+  return (
+    <section className="full-height bg-gray-200 flex flex-col justify-around panel-inner">
+      <div className="text-black mt-20">
+        <h2 className="max-sm:text-2xl text-4xl font-light">Events </h2>
+        <p className="max-sm:text-base text-2xl font-light mt-6">
+          Here are some events where you can view the HerLand Campaign:
+        </p>
+        <div className="grid 2xl:grid-cols-12 sm:grid-cols-1 max-sm:grid-cols-1">
+          <div className="grid 2xl:grid-cols-4 xl:grid-cols-2 lg:grid-cols-2 md:grid-cols-1 max-sm:grid-cols-1 gap-6 mt-10 footer-events col-span-10">
+            <div className="event-wrapper event-1 max-sm:h-24 sm:h-32 flex flex-col justify-center pl-2">
+              <a
+                href="https://www.unccd.int/events/desertification-drought-day/2023"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div>
+                  <h2 className="text-2xl text-white font-bold">
+                    Desertification and
+                  </h2>
+                  <h2 className="text-2xl text-white font-bold">
+                    Drought Day 2023
+                  </h2>
+                </div>
+              </a>
+            </div>
+            <div className="event-wrapper event-2 max-sm:h-24 sm:h-32 flex flex-col justify-center pl-2">
+              <a
+                href="https://www.unccd.int/cric21"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div>
+                  <h2 className="text-2xl text-white font-bold">CRIC21</h2>
+                  <p className="text-base text-white m-0">Samarkand, </p>
+                  <p className="text-base text-white m-0">Uzbekistan, 2023</p>
+                </div>
+              </a>
+            </div>
+            <div className="event-wrapper event-3 max-sm:h-24 sm:h-32 flex flex-col justify-center pl-2">
+              <a
+                href="https://unfccc.int/cop28"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <div>
+                  <h2 className="text-2xl text-white font-bold">UNFCC</h2>
+                  <h2 className="text-2xl text-white font-bold">COP28</h2>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="text-black justify-self-end	">
+        <h2 className="max-sm:text-2xl text-4xl font-light">
+          Contact & Support
+        </h2>
+
+        <p className="mt-6">
+          Contact Information:
+          <a className="text-blue-700" href="mailto:[email protected]">
+            &nbsp;[email protected]
+          </a>
+        </p>
+      </div>
+    </section>
+  );
+}
+
+export default Events;
diff --git a/src/slides/Footer/Footer.jsx b/src/slides/Footer/Footer.jsx
@@ -1,76 +1,10 @@
 import React from "react";
-import ArrowRight from "../../static/icons/arrow-right.svg";
-import Event1 from "../../static/events/event-1.png";
-import Event2 from "../../static/events/event-2.png";
-import Event3 from "../../static/events/event-3.png";
 
 function Footer() {
   return (
-    <section className="full-height bg-gray-200 flex flex-col justify-around panel-inner">
-      <div className="text-black mt-20">
-        <h2 className="max-sm:text-2xl text-4xl font-light">Events </h2>
-        <p className="max-sm:text-base text-2xl font-light mt-6">
-          Here are some events where you can view the HerLand Campaign:
-        </p>
-        <div className="grid 2xl:grid-cols-12 xsm:grid-cols-1 max-sm:grid-cols-1">
-          <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 lg:grid-cols-2 md:grid-cols-1 max-sm:grid-cols-1 gap-4 mt-10 footer-events col-span-10">
-            <div className="event-wrapper event-1 max-sm:h-24 sm:h-32 flex flex-col justify-center pl-2">
-              <a
-                href="https://www.unccd.int/events/desertification-drought-day/2023"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div>
-                  <h2 className="text-2xl text-white font-bold">
-                    Desertification and
-                  </h2>
-                  <h2 className="text-2xl text-white font-bold">
-                    Drought Day 2023
-                  </h2>
-                </div>
-              </a>
-            </div>
-            <div className="event-wrapper event-2 max-sm:h-24 sm:h-32 flex flex-col justify-center pl-2">
-              <a
-                href="https://www.unccd.int/cric21"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div>
-                  <h2 className="text-2xl text-white font-bold">CRIC21</h2>
-                  <p className="text-base text-white m-0">Samarkand, </p>
-                  <p className="text-base text-white m-0">Uzbekistan, 2023</p>
-                </div>
-              </a>
-            </div>
-            <div className="event-wrapper event-3 max-sm:h-24 sm:h-32 flex flex-col justify-center pl-2">
-              <a
-                href="https://unfccc.int/cop28"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <div>
-                  <h2 className="text-2xl text-white font-bold">UNFCC</h2>
-                  <h2 className="text-2xl text-white font-bold">COP28</h2>
-                </div>
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="text-black justify-self-end	">
-        <h2 className="max-sm:text-2xl text-4xl font-light">
-          Contact & Support
-        </h2>
-
-        <p className="mt-6">
-          Contact Information:
-          <a className="text-blue-700" href="mailto:[email protected]">
-            [email protected]
-          </a>
-        </p>
-      </div>
-    </section>
+    <div className="copywright panel bg-gray-950 text-white py-4">
+      <p className="text-xs"> ©UNCCD 2023</p>
+    </div>
   );
 }
 

diff --git a/src/slides/Healverse/Healverse.jsx b/src/slides/Healverse/Healverse.jsx
@@ -11,9 +11,7 @@ function Healverse() {
         </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"
-        >
+        <div className="max-sm:col-span-12 sm:col-span-12 lg:col-span-6 flex panel-inner iframe-wrapper">
           <iframe
             src="https://www.youtube.com/embed/VbMddmxlApU?rel=0&modestbranding=1"
             title="YouTube Video"
@@ -27,7 +25,7 @@ function Healverse() {
             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
-            Metaverse experience. Here's what awaits you:{" "}
+            Metaverse experience. Here's what awaits you:
             <a
               href="https://youtu.be/VbMddmxlApU"
               target="_blank"
@@ -50,7 +48,7 @@ function Healverse() {
             The HEALV3RSE experience is a bold step towards reimagining how we
             connect, learn, and take action for a better world. Join us in this
             innovative space where technology, nature, and human ingenuity meet
-            to inspire change and healing for our planet.{" "}
+            to inspire change and healing for our planet.
           </p>
           <a
             href="https://trello.com/b/AuQjCPfN/unccd-herland-campaign flex"

diff --git a/...des/PortraitCarousel/PortraitCarousel.jsx → ...lides/PhotoExhibition/PhotoExhibition.jsx b/...des/PortraitCarousel/PortraitCarousel.jsx → ...lides/PhotoExhibition/PhotoExhibition.jsx
@@ -4,7 +4,7 @@ import importAllSmallPortraits from "./importPortraits";
 import PortraitOverlay from "../../overlays/PortraitOverlay";
 import { useState } from "react";
 
-function PortraitCarousel(props) {
+function PhotoExhibition(props) {
   const { setIsOverlayActive, setPortraitSrc } = props;
   const openOverlay = (portraitSrc) => {
     setIsOverlayActive(true);
@@ -48,7 +48,7 @@ function PortraitCarousel(props) {
         <div className="grid grid-cols-12 text-black">
           <p className="max-sm:text-base lg:text-base 2xl:text-2xl  font-light 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{" "}
+            exclusive 'Women & Land' photo exhibition. Curated by
             <a
               href="https://www.unccd.int/convention/land-ambassadors/inna-modja"
               target="_blank"
@@ -91,4 +91,4 @@ function PortraitCarousel(props) {
   );
 }
 
-export default PortraitCarousel;
+export default PhotoExhibition;
diff --git a/...lides/PortraitCarousel/importPortraits.js → ...slides/PhotoExhibition/importPortraits.js b/...lides/PortraitCarousel/importPortraits.js → ...slides/PhotoExhibition/importPortraits.js
diff --git a/src/slides/VideoExhibition/VideoExhibition.jsx b/src/slides/VideoExhibition/VideoExhibition.jsx
@@ -61,7 +61,7 @@ function VideoExhibition(props) {
           </div>
           <h3 className={nameClassNames}>Suhucam</h3>
           <p className={descriptionClassNames}>
-            Igniting Change in Bamunkumbit, Cameroon{" "}
+            Igniting Change in Bamunkumbit, Cameroon
           </p>
         </div>
         <div className="my-6">