[WEBSITE] Clean Air site Revamp

website/frontend/locales/en/translation.json

@@ -180,39 +180,80 @@
       }
     },
     "membership": {
-      "section1": "The CLEAN-Air Network is a multi-regional network, strengthening cross-regional collaborations and partnerships to enable collective learning and knowledge sharing. <br /> <br /> We have a growing list of partners from diverse disciplines across different parts of the world, reflecting the multidisciplinarity of tackling urban air pollution.",
+      "section1": {
+        "subText": "We have a growing list of partners from diverse disciplines across different parts of the world, reflecting the multidisciplinarity of tackling urban air pollution.",
+        "intro": "<h2>Leveraging the unique expertise and resources of implementing partners to advance capacity for air quality management in Africa.</h2>"
+      },
       "implementingPartners": {
-        "intro": "Leveraging the unique expertise and resources of implementing partners to advance capacity for air quality management in Africa.",
-        "subText": "<p style={{color: '#353E52', fontSize: '24px', lineHeight: '32px', fontWeight: 400, fontStyle: 'normal'}}>Implementing partners have active interest in air quality work in Africa, have personnel with primary roles in air quality, organize and host engagement activities, participate in CLEAN-Air Network annual meetings and may provide logistical/or funding support to partners.</p>"
+        "title": "Implementing Partners",
+        "subText": "Implementing partners have active interest in air quality work in Africa, have personnel with primary roles in air quality, organize and host engagement activities, participate in CLEAN-Air Network annual meetings and may provide logistical/or funding support to partners."
       },
       "policyPartners": {
-        "intro": "Effective air quality management rooted in evidence-informed action anchors on an        enabling policy environment.",
-        "subText": "<p style={{color: '#353E52', fontSize: '24px', lineHeight: '32px', fontWeight: 400, fontStyle: 'normal'}}>The policy forum provides a platform for engagement for African cities and national governments interested in developing and implementing an air quality program.</p>"
+        "title": "Policy forum",
+        "subText": "The policy forum provides a platform for engagement for African cities and national governments interested in developing and implementing an air quality program."
       },
       "privateSector": {
-        "intro": " Facilitating private sector-led collaborations for a holistic and sustainable model for tackling air pollution",
-        "subText": "<p style={{color: '#353E52', fontSize: '24px', lineHeight: '32px', fontWeight: 400, fontStyle: 'normal'}}>The private sector forum is a platform for engagement with the private sector players interested in contributing to advancing the air quality agenda. Private sector includes regulated industries, commercial media houses, and any private sector entity operating in Africa.</p>"
+        "title": "Private sector forum",
+        "subText": "The private sector forum is a platform for engagement with the private sector players interested in contributing to advancing the air quality agenda. Private sector includes regulated industries, commercial media houses, and any private sector entity operating in Africa."
       },
       "supportingPartners": {
-        "intro": " Leveraging international collaborations for experience sharing and knowledge exchange on urban air pollution as a global phenomenon.",
-        "subText": "<p style={{color: '#353E52', fontSize: '24px', lineHeight: '32px', fontWeight: 400, fontStyle: 'normal'}}>The CLEAN-Air network is supported by development partners and philanthropic organisations, including Google.org, WEHUBIT, and the U.S. Department of State, with an established history of pioneering continuous air quality monitoring in data-hungry cities through the U.S. Embassies across the world.<br/><br/>Supporting partners provide logistical and/or funding support to network members, and may participate in activities including the annual CLEAN-Air Network meetings.</p>"
+        "title": "Supporting Partners",
+        "subText": "The CLEAN-Air network is supported by development partners and philanthropic organisations, including Google.org, WEHUBIT, and the U.S. Department of State, with an established history of pioneering continuous air quality monitoring in data-hungry cities through the U.S. Embassies across the world.<br/><br/>Supporting partners provide logistical and/or funding support to network members, and may participate in activities including the annual CLEAN-Air Network meetings."
       },
       "individualSection": {
-        "subText": "<p style={{padding: '10px 0'}}>Individuals actively involved in air quality work in Africa are welcome to join the CLEAN-Air Africa Network.</p>",
-        "cta": "Register your interest"
+        "subText": "Individuals actively involved in air quality work in Africa are welcome to join the CLEAN-Air Africa Network.",
+        "cta": "Register here -->"
       }
     },
     "events": {
-      "section1": "The CLEAN-Air Network provides a platform for facilitating engagement activities including conferences, webinars, workshops, training and community campaigns.<br /><br /> Partners will have access to shared resources in the form of social media toolkits, press release templates, digital banners, etc. that can be customised to suit every activity. Members will also have access to a diverse pool of experts who can be invited to participate in different engagement activities, either as speakers or co-organizers, etc.",
-      "section2": {
+      "section1": {
+        "text": "<p>The CLEAN-Air Network provides a platform for facilitating engagement activities including conferences, webinars, workshops, training and community campaigns.<br /><br /> Partners will have access to shared resources in the form of social media toolkits, press release templates, digital banners, etc. that can be customised to suit every activity. Members will also have access to a diverse pool of experts who can be invited to participate in different engagement activities, either as speakers or co-organizers, etc.</p>"
+      },
+      "dropdowns": {
+        "date": {
+          "btnLabel": "Date",
+          "options": {
+            "1": "January",
+            "2": "February",
+            "3": "March",
+            "4": "April",
+            "5": "May",
+            "6": "June",
+            "7": "July",
+            "8": "August",
+            "9": "September",
+            "10": "October",
+            "11": "November",
+            "12": "December"
+          }
+        },
+        "filter": {
+          "btnLabel": "Filter",
+          "label1": "Format",
+          "options1": {
+            "1": "All",
+            "2": "Webinar",
+            "3": "Workshop",
+            "4": "Conference"
+          },
+          "label2": "Location",
+          "options2": {
+            "1": "All",
+            "2": "In-person",
+            "3": "Hybrid",
+            "4": "Others"
+          }
+        }
+      },
+      "card": {
         "subText": "<p style={{color: '#353E52', fontSize: '24px', lineHeight: '32px', fontWeight: 400, fontStyle: 'normal'}}>Increase your event's visibility. Register your engagement activity and tap into invaluable resources and networking prospects.</p>",
-        "cta": "Register Event"
+        "btnText": "Read more"
       },
-      "subNavs": {
+      "sectionTitles": {
         "upcoming": "Upcoming events",
         "past": "Past events"
       },
-      "noEvents": "There are currently no upcoming events"
+      "noEvents": "No events available"
     },
     "eventsDetails": {
       "header": {
@@ -235,14 +276,15 @@
       }
     },
     "publications": {
-      "title": "RESOURCE <br /> <2>CENTER</2>",
+      "title": "Resource center",
       "navs": {
         "toolkits": "toolkits",
         "reports": "technical reports",
         "workshops": "workshop reports",
         "research": "research publications"
       },
-      "noResources": "No Resources available"
+      "noResources": "No Resources available",
+      "cardBtnText": "Read more"
     },
     "bottomCTA": {
       "left": {

website/frontend/src/components/CleanAir/Hightlights/MainHighlight.js

@@ -5,6 +5,7 @@ import { isEmpty } from 'underscore';
 import { useNavigate } from 'react-router-dom';
 import { AccessTimeOutlined, CalendarMonth } from '@mui/icons-material';
 import { format } from 'date-fns';
+import Spinner from '../loaders/Spinner';
 
 const Highlight = () => {
   const navigate = useNavigate();
@@ -28,7 +29,19 @@ const Highlight = () => {
   const featuredEvent = latestEvents[0];
 
   if (latestEvents.length === 0) {
-    return null;
+    return (
+      <div
+        style={{
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          position: 'relative',
+          padding: '50px 0'
+        }}>
+        <Spinner />
+      </div>
+    );
   }
 
   return (
@@ -43,7 +56,11 @@ const Highlight = () => {
             </div>
             <div className="event-wrapper">
               <div className="event-container">
-                <img src={featuredEvent.event_image} alt={featuredEvent.unique_title} />
+                <img
+                  src={featuredEvent.event_image}
+                  alt={featuredEvent.unique_title}
+                  loading="lazy"
+                />
                 <div className="event-content">
                   <h1>{featuredEvent.title}</h1>
                   <p>{featuredEvent.title_subtext}</p>

website/frontend/src/components/CleanAir/Hightlights/NewArticle.js

@@ -15,6 +15,7 @@ const NewArticle = ({ icon, date, title, subtitle, url }) => {
               className="image"
               src={icon}
               alt="icon"
+              loading="lazy"
               style={{
                 background: `url(${icon}),lightgray 50% contain no-repeat`
               }}

website/frontend/src/components/CleanAir/Sections/IntroSection.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const RenderHTMLContent = ({ content }) =>
+  /<[a-z][\s\S]*>/i.test(content) ? (
+    <div dangerouslySetInnerHTML={{ __html: content }} />
+  ) : (
+    <p>{content}</p>
+  );
+
+const IntroSection = ({ subtext1, subtext2, image, imagePosition }) => (
+  <div className="partners">
+    <div className="partners-wrapper">
+      <div className="membership-img-wrapper">
+        <img
+          src={image}
+          alt="Membership"
+          className="membership-img"
+          style={{
+            top: imagePosition
+          }}
+          loading="lazy"
+        />
+      </div>
+      <div className="partners-intro">
+        <RenderHTMLContent content={subtext1} />
+        {subtext2 && <RenderHTMLContent content={subtext2} />}
+      </div>
+    </div>
+  </div>
+);
+
+export default IntroSection;

website/frontend/src/components/CleanAir/Sections/RegisterSection.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Team from 'assets/img/cleanAir/team.png';
+import { Trans, useTranslation } from 'react-i18next';
+
+const RegisterSection = ({ link }) => {
+  const { t } = useTranslation();
+
+  const handleClick = () => {
+    window.open(link, '_blank', 'noopener,noreferrer');
+  };
+
+  return (
+    <div className="partners">
+      <div className="banner">
+        <img className="banner-image" src={Team} alt="Team" loading="lazy" />
+        <div className="banner-content">
+          <p>
+            <Trans i18nKey="cleanAirSite.membership.individualSection.subText" />
+          </p>
+          <button className="register-button" onClick={handleClick}>
+            {t('cleanAirSite.membership.individualSection.cta')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RegisterSection;
+``;

website/frontend/src/components/CleanAir/Sections/SingleSection.js

@@ -1,19 +1,38 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import ButtonCTA from '../CTAs/ButtonCTA';
 
-const SingleSection = ({ bgColor, btnText, padding, content, link, btnStyle, removeTopMargin }) => {
-  return (
-    <div
-      className={removeTopMargin ? 'single-section no-top' : 'single-section'}
-      style={{ backgroundColor: bgColor, padding: padding }}>
-      <div className="content">
-        <span className="content-p">{content}</span>
+const SingleSection = ({
+  bgColor = 'transparent',
+  btnText,
+  padding = '1em',
+  content,
+  link,
+  btnStyle,
+  removeTopMargin = false
+}) => (
+  <div
+    className={`single-section ${removeTopMargin ? 'no-top' : ''}`}
+    style={{ backgroundColor: bgColor, padding }}>
+    <div className="content">
+      <span className="content-p">{content}</span>
+      {btnText && link && (
         <div className="button">
-          {btnText && link && <ButtonCTA label={btnText} link={link} style={btnStyle} />}
+          <ButtonCTA label={btnText} link={link} style={btnStyle} />
         </div>
-      </div>
+      )}
     </div>
-  );
+  </div>
+);
+
+SingleSection.propTypes = {
+  bgColor: PropTypes.string,
+  btnText: PropTypes.string,
+  padding: PropTypes.string,
+  content: PropTypes.string.isRequired,
+  link: PropTypes.string,
+  btnStyle: PropTypes.object,
+  removeTopMargin: PropTypes.bool
 };
 
 export default SingleSection;

website/frontend/src/components/CleanAir/Sections/SplitSection.js

@@ -15,10 +15,14 @@ const SplitSection = ({
   imageStyle,
   showButton,
   children,
-  customBtn, wrapperPadding, titleSection
+  customBtn,
+  wrapperPadding,
+  titleSection
 }) => {
   return (
-    <div className={titleSection ? "splitSection-section title-section" : "splitSection-section"} style={{ backgroundColor: bgColor, padding: wrapperPadding }}>
+    <div
+      className={titleSection ? 'splitSection-section title-section' : 'splitSection-section'}
+      style={{ backgroundColor: bgColor, padding: wrapperPadding }}>
       <div className={` ${reverse ? 'backdrop-rev' : 'backdrop'}`}>
         <div className="splitSection-content">
           {pillTitle && (
@@ -53,7 +57,7 @@ const SplitSection = ({
             ))}
         </div>
         <div className="splitSection-image">
-          <img className="splitSection-img" src={imgURL} style={imageStyle} alt="" />
+          <img className="splitSection-img" src={imgURL} style={imageStyle} alt="" loading="lazy" />
         </div>
       </div>
     </div>