- 
+
{featuredEvent.title}
{featuredEvent.title_subtext}
diff --git a/website/frontend/src/components/CleanAir/Hightlights/NewArticle.js b/website/frontend/src/components/CleanAir/Hightlights/NewArticle.js index c531ad1f9a..53ecac2ef9 100644 --- a/website/frontend/src/components/CleanAir/Hightlights/NewArticle.js +++ b/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` }} diff --git a/website/frontend/src/components/CleanAir/Sections/IntroSection.js b/website/frontend/src/components/CleanAir/Sections/IntroSection.js new file mode 100644 index 0000000000..eccc620155 --- /dev/null +++ b/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) ? ( + + ) : ( +{content}
+ ); + +const IntroSection = ({ subtext1, subtext2, image, imagePosition }) => ( +
+
+);
+
+export default IntroSection;
diff --git a/website/frontend/src/components/CleanAir/Sections/RegisterSection.js b/website/frontend/src/components/CleanAir/Sections/RegisterSection.js
new file mode 100644
index 0000000000..a3e74af7a0
--- /dev/null
+++ b/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 (
+
+
+
+ 
+
+
+
+
+
+ );
+};
+
+export default RegisterSection;
+``;
diff --git a/website/frontend/src/components/CleanAir/Sections/SingleSection.js b/website/frontend/src/components/CleanAir/Sections/SingleSection.js
index 4bf03278e6..168667b69b 100644
--- a/website/frontend/src/components/CleanAir/Sections/SingleSection.js
+++ b/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 (
-
+ 
+
+
+
+
+
-
- {content}
+const SingleSection = ({
+ bgColor = 'transparent',
+ btnText,
+ padding = '1em',
+ content,
+ link,
+ btnStyle,
+ removeTopMargin = false
+}) => (
+
+);
+
+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;
diff --git a/website/frontend/src/components/CleanAir/Sections/SplitSection.js b/website/frontend/src/components/CleanAir/Sections/SplitSection.js
index 5c7e093b08..8fbf025a4c 100644
--- a/website/frontend/src/components/CleanAir/Sections/SplitSection.js
+++ b/website/frontend/src/components/CleanAir/Sections/SplitSection.js
@@ -15,10 +15,14 @@ const SplitSection = ({
imageStyle,
showButton,
children,
- customBtn, wrapperPadding, titleSection
+ customBtn,
+ wrapperPadding,
+ titleSection
}) => {
return (
-
+
- );
+
+ {content}
+ {btnText && link && (
+ )}
- {btnText && link &&
-
+
diff --git a/website/frontend/src/components/CleanAir/Sections/Split_Text_section.js b/website/frontend/src/components/CleanAir/Sections/Split_Text_section.js
new file mode 100644
index 0000000000..56d1675bb1
--- /dev/null
+++ b/website/frontend/src/components/CleanAir/Sections/Split_Text_section.js
@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
+import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
+import Spinner from '../loaders/Spinner';
+
+const ITEMS_PER_PAGE = 8;
+
+const Split_Text_section = ({ bgColor, content, title, lists, loading }) => {
+ const { t } = useTranslation();
+ const navigate = useNavigate();
+
+ const onLogoClick = (data) => (event) => {
+ event.preventDefault();
+ if (data.descriptions.length > 0) {
+ navigate(`/partners/${data.unique_title}`);
+ } else if (data.partner_link) {
+ window.open(data.partner_link, '_blank');
+ }
+ };
+
+ const [currentPage, setCurrentPage] = useState(1);
+ const totalPages = Math.ceil(lists.length / ITEMS_PER_PAGE);
+
+ const currentItems = lists.slice(
+ (currentPage - 1) * ITEMS_PER_PAGE,
+ currentPage * ITEMS_PER_PAGE
+ );
+
+ return (
+
{pillTitle && (
@@ -53,7 +57,7 @@ const SplitSection = ({
))}
- 
+
+
+
+ );
+};
+
+export default Split_Text_section;
diff --git a/website/frontend/src/components/CleanAir/cards/ReportComponent.js b/website/frontend/src/components/CleanAir/cards/ReportComponent.js
index b76ee8275d..e5d4f1ae4f 100644
--- a/website/frontend/src/components/CleanAir/cards/ReportComponent.js
+++ b/website/frontend/src/components/CleanAir/cards/ReportComponent.js
@@ -1,25 +1,41 @@
import React from 'react';
import { FileDownloadOutlined } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
-const ReportComponent = ({ title, authors, link, linkTitle, showSecondAuthor, resourceFile }) => {
+const ReportComponent = ({
+ title,
+ authors_title,
+ authors,
+ link,
+ linkTitle,
+ showSecondAuthor,
+ resourceFile,
+ resourceCategory
+}) => {
+ const { t } = useTranslation();
return (
+
+ {loading ? (
+
+
+
+
+ {title}
+
+ {/<[a-z][\s\S]*>/i.test(content) ? (
+
+ ) : (
+
+ {content}
+ )} +
+
+ ) : (
+ currentItems.length > 0 && (
+
+
+ )
+ )}
+
+
+
+
+
+ {currentItems.map((item) => (
+
+ {lists.length > ITEMS_PER_PAGE && (
+
+ 
+
+ ))}
+
+
+ )}
+
+
+
+
+
+ + {currentPage} of {totalPages} +
+ +
-
+
+
-
{resourceCategory}
{title}
- Created by
+
+ {authors_title || t('about.publications.reportCard.authors.author1')}
+
{authors}
{showSecondAuthor && (
<>
-
Supported by
- AirQo and Makerere University
+ {t('about.publications.reportCard.authors.author2.text')}
+ {t('about.publications.reportCard.authors.author2.subText')}
)}
{link !== null ? (
) : (
@@ -29,7 +45,8 @@ const ReportComponent = ({ title, authors, link, linkTitle, showSecondAuthor, re
diff --git a/website/frontend/src/components/CleanAir/index.js b/website/frontend/src/components/CleanAir/index.js
index 6b3d6e5d39..b942253aa5 100644
--- a/website/frontend/src/components/CleanAir/index.js
+++ b/website/frontend/src/components/CleanAir/index.js
@@ -1,4 +1,8 @@
export { default as SingleSection } from './Sections/SingleSection';
+export { default as SplitTextSection } from './Sections/Split_Text_section';
+export { default as RegisterSection } from './Sections/RegisterSection';
+export { default as RotatingLoopIcon } from './loaders/Spinner';
+export { default as IntroSection } from './Sections/IntroSection';
export { default as SplitSection } from './Sections/SplitSection';
export { default as ButtonCTA } from './CTAs/ButtonCTA';
export { default as SecondaryNav } from './SecondaryNav';
diff --git a/website/frontend/src/components/CleanAir/loaders/Spinner.js b/website/frontend/src/components/CleanAir/loaders/Spinner.js
new file mode 100644
index 0000000000..f0c0cbf37e
--- /dev/null
+++ b/website/frontend/src/components/CleanAir/loaders/Spinner.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import LoopIcon from '@mui/icons-material/Loop';
+import { styled, keyframes } from '@mui/system';
+
+const rotate = keyframes`
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+`;
+
+const RotatingLoopIcon = styled(LoopIcon)({
+ animation: `${rotate} 2s linear infinite`,
+ fontSize: '40px'
+});
+
+const Spinner = () => {
+ return
- 
+ 
@@ -72,9 +73,9 @@ const CleanAirAbout = () => {
{/* section 2 */}
-
+
{/* section 3 */}
@@ -126,7 +122,7 @@ const CleanAirAbout = () => {
objectFit: 'cover',
maxHeight: '400px'
}}
- imgURL={Section2}
+ imgURL={Section3}
pillBgColor="#ECF2FF"
pillTextColor="#135DFF"
reverse={false}
@@ -142,7 +138,7 @@ const CleanAirAbout = () => {
imgURL={Section4}
imageStyle={{
height: '420px',
- objectFit: 'cover'
+ objectFit: 'contain'
}}
pillBgColor="#ECF2FF"
pillTextColor="#135DFF"
diff --git a/website/frontend/src/pages/CleanAir/CleanAirEvents.js b/website/frontend/src/pages/CleanAir/CleanAirEvents.js
index 24e5419ca7..161c952b97 100644
--- a/website/frontend/src/pages/CleanAir/CleanAirEvents.js
+++ b/website/frontend/src/pages/CleanAir/CleanAirEvents.js
@@ -1,20 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react';
import SEO from 'utilities/seo';
import { isEmpty } from 'underscore';
import { useInitScrollTop } from 'utilities/customHooks';
import { getAllEvents } from '../../../reduxStore/Events/EventSlice';
import { useDispatch, useSelector } from 'react-redux';
-import { ButtonCTA } from 'components/CleanAir';
-import EventsNavigation from '../Events/Navigation';
-import { SplitSection } from 'components/CleanAir';
-import EventCard from '../Events/EventCard';
-import event1 from 'assets/img/cleanAir/event-sec1.png';
-import event2 from 'assets/img/cleanAir/event-sec2.png';
-import useWindowSize from 'utilities/customHooks';
-import Loadspinner from 'src/components/LoadSpinner/SectionLoader';
+import { RegisterSection, IntroSection, RotatingLoopIcon } from 'components/CleanAir';
+import eventImage from 'assets/img/cleanAir/events.png';
import { useTranslation, Trans } from 'react-i18next';
-
-const ITEMS_PER_PAGE = 9;
+import DoneIcon from '@mui/icons-material/Done';
+import { format } from 'date-fns';
+import { useNavigate } from 'react-router-dom';
+import Slide from '@mui/material/Slide';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
+import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
const days = (date_1, date_2) => {
let difference = date_1.getTime() - date_2.getTime();
@@ -24,63 +24,156 @@ const days = (date_1, date_2) => {
const CleanAirEvents = () => {
useInitScrollTop();
+
+ // Hooks
const { t } = useTranslation();
const dispatch = useDispatch();
- const navTabs = [
- t('cleanAirSite.events.subNavs.upcoming'),
- t('cleanAirSite.events.subNavs.past')
- ];
- const selectedNavTab = useSelector((state) => state.eventsNavTab.tab);
const allEventsData = useSelector((state) => state.eventsData.events);
- const { width } = useWindowSize();
+ const navigate = useNavigate();
- const [currentPage, setCurrentPage] = useState(1);
+ // State
+ const [openDate, setOpenDate] = useState(false);
+ const [openFilter, setOpenFilter] = useState(false);
+ const [selectedDate, setSelectedDate] = useState();
+ const [filter, setFilter] = useState();
+ const [selectedMonth, setSelectedMonth] = useState(null);
+ const [hideEvents, setHideEvents] = useState(true);
+ const [loading, setLoading] = useState(false);
+
+ // Refs
+ const dateRef = useRef();
+ const filterRef = useRef();
+
+ // Derived data
+ const eventsApiData = useMemo(() => {
+ const filteredEvents = allEventsData.filter((event) => event.website_category === 'cleanair');
- const eventsApiData = allEventsData.filter((event) => event.website_category === 'cleanair');
-
- const upcomingEvents = eventsApiData.filter((event) => {
- if (event.end_date !== null) return days(new Date(event.end_date), new Date()) >= 1;
- return days(new Date(event.start_date), new Date()) >= -0;
- });
-
- const pastEvents = eventsApiData.filter((event) => {
- if (event.end_date !== null) return days(new Date(event.end_date), new Date()) <= 0;
- return days(new Date(event.start_date), new Date()) <= -1;
- });
-
- const handlePageChange = (direction) => {
- if (direction === 'next') {
- setCurrentPage(currentPage + 1);
- document.getElementById('top_body').scrollIntoView();
- } else if (direction === 'prev' && currentPage > 1) {
- setCurrentPage(currentPage - 1);
- document.getElementById('top_body').scrollIntoView();
+ // If a month is selected, filter the events based on the selected month
+ if (selectedMonth) {
+ return filteredEvents.filter((event) => {
+ const eventDate = new Date(event.start_date);
+ console.log(eventDate.getMonth(), selectedMonth);
+ return eventDate.getMonth() === selectedMonth;
+ });
}
- };
- const eventsToShow =
- selectedNavTab === t('cleanAirSite.events.subNavs.upcoming') ? upcomingEvents : pastEvents;
- const totalPages = Math.ceil(eventsToShow.length / ITEMS_PER_PAGE);
+ // TODO: Add filter for format to model
+ // If a filter is selected, filter the events based on the selected filter
+ // if (filter) {
+ // return filteredEvents.filter((event) => event.format === filter);
+ // }
+
+ return filteredEvents;
+ }, [allEventsData, selectedMonth]);
- const loading = useSelector((state) => state.eventsData.loading);
+ const upcomingEvents = useMemo(() => getUpcomingEvents(eventsApiData), [eventsApiData]);
+ const pastEvents = useMemo(() => getPastEvents(eventsApiData), [eventsApiData]);
+ // Effects
useEffect(() => {
if (isEmpty(eventsApiData)) {
- dispatch(getAllEvents());
+ setLoading(true);
+ dispatch(getAllEvents())
+ .then(() => {
+ setLoading(false);
+ })
+ .catch((error) => {
+ console.error(error);
+ setLoading(false);
+ });
}
- }, [selectedNavTab]);
+ }, []);
useEffect(() => {
- let backdropRevElement = document.querySelector('.backdrop-rev');
-
- if (backdropRevElement) {
- if (width < 1081) {
- backdropRevElement.style.flexDirection = 'column';
- } else {
- backdropRevElement.style.flexDirection = 'column-reverse';
+ const handleClickOutside = (event) => {
+ if (dateRef.current && !dateRef.current.contains(event.target)) {
+ setOpenDate(false);
}
- }
- }, [width]);
+ if (filterRef.current && !filterRef.current.contains(event.target)) {
+ setOpenFilter(false);
+ }
+ };
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => document.removeEventListener('mousedown', handleClickOutside);
+ }, []);
+
+ // Helper functions
+ function getUpcomingEvents(events) {
+ return events.filter((event) => {
+ if (event.end_date !== null) return days(new Date(event.end_date), new Date()) >= 1;
+ return days(new Date(event.start_date), new Date()) >= -0;
+ });
+ }
+
+ function getPastEvents(events) {
+ return events.filter((event) => {
+ if (event.end_date !== null) return days(new Date(event.end_date), new Date()) <= 0;
+ return days(new Date(event.start_date), new Date()) <= -1;
+ });
+ }
+
+ const routeToDetails = useCallback(
+ (events) => (event) => {
+ event.preventDefault();
+ navigate(`/clean-air/event-details/${events.unique_title}/`);
+ },
+ [navigate]
+ );
+
+ const handleDateSelect = (value) => {
+ setSelectedDate(value);
+ setSelectedMonth(value - 1);
+ setOpenDate(false);
+ };
+
+ const handleFilterSelect = (value) => {
+ setFilter(value);
+ setOpenFilter(false);
+ };
+
+ // State
+ const [currentPage, setCurrentPage] = useState(1);
+ const eventsPerPage = 3;
+
+ // Derived data
+ const currentEvents = useMemo(() => getCurrentEvents(pastEvents), [pastEvents, currentPage]);
+ const totalPages = Math.ceil(pastEvents.length / eventsPerPage);
+
+ // Helper functions
+ function getCurrentEvents(events) {
+ const indexOfLastEvent = currentPage * eventsPerPage;
+ const indexOfFirstEvent = indexOfLastEvent - eventsPerPage;
+ return events.slice(indexOfFirstEvent, indexOfLastEvent);
+ }
+
+ const dates = [
+ { month: t('cleanAirSite.events.dropdowns.date.options.1'), value: 1 },
+ { month: t('cleanAirSite.events.dropdowns.date.options.2'), value: 2 },
+ { month: t('cleanAirSite.events.dropdowns.date.options.3'), value: 3 },
+ { month: t('cleanAirSite.events.dropdowns.date.options.4'), value: 4 },
+ { month: t('cleanAirSite.events.dropdowns.date.options.5'), value: 5 },
+ { month: t('cleanAirSite.events.dropdowns.date.options.6'), value: 6 },
+ { month: t('cleanAirSite.events.dropdowns.date.options.7'), value: 7 },
+ { month: t('cleanAirSite.events.dropdowns.date.options.8'), value: 8 },
+ { month: t('cleanAirSite.events.dropdowns.date.options.9'), value: 9 },
+ { month: t('cleanAirSite.events.dropdowns.date.options.10'), value: 10 },
+ { month: t('cleanAirSite.events.dropdowns.date.options.11'), value: 11 },
+ { month: t('cleanAirSite.events.dropdowns.date.options.12'), value: 12 }
+ ];
+
+ const filterOption1 = [
+ { label: t('cleanAirSite.events.dropdowns.filter.options1.1'), value: 'webinar' },
+ { label: t('cleanAirSite.events.dropdowns.filter.options1.2'), value: 'workshop' },
+ { label: t('cleanAirSite.events.dropdowns.filter.options1.3'), value: 'conference' },
+ { label: t('cleanAirSite.events.dropdowns.filter.options1.4'), value: 'others' }
+ ];
+
+ const filterOption2 = [
+ { label: t('cleanAirSite.events.dropdowns.filter.options2.1'), value: 'online' },
+ { label: t('cleanAirSite.events.dropdowns.filter.options2.2'), value: 'in-person' },
+ { label: t('cleanAirSite.events.dropdowns.filter.options2.3'), value: 'hybrid' },
+ { label: t('cleanAirSite.events.dropdowns.filter.options2.4'), value: 'others' }
+ ];
return (
+
+
- ![]()
-
- }
- bgColor="#EDF3FF"
- />
+
+
+
+ 
+
+
@@ -90,110 +183,244 @@ const CleanAirEvents = () => {
description="CLEAN-Air Africa Network is a network of African cities, governments, and partners committed to improving air quality and reducing carbon emissions through sustainable transport and mobility solutions."
/>
-
-
+ {/* Intro section */}
+
-
-
-
-
- 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.
-
-
-
*/}
-
-
- 
-
+ {/* Events */}
+ {loading ? (
+
+
-
-
-
+ ) : null}
+ -
+
+
-
- {resource.charAt(0).toUpperCase() + resource.slice(1)}
-
- );
-};
+import { useTranslation } from 'react-i18next';
+import { RegisterSection, IntroSection, RotatingLoopIcon } from 'components/CleanAir';
+import ResourceImage from 'assets/img/cleanAir/resource.png';
+import DoneIcon from '@mui/icons-material/Done';
+import Slide from '@mui/material/Slide';
+import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight';
+import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
const CleanAirPublications = () => {
useInitScrollTop();
const { t } = useTranslation();
- const menuRef = useRef(null);
+ const filterRef = useRef(null);
const dispatch = useDispatch();
- const [toggle, setToggle] = useState(false);
+ const [openfilter, setFilter] = useState(false);
const [cleanAirResources, setCleanAirResources] = useState([]);
const activeResource = useSelector((state) => state.cleanAirData.activeResource);
const resources = [
@@ -44,7 +29,6 @@ const CleanAirPublications = () => {
t('cleanAirSite.publications.navs.workshops'),
t('cleanAirSite.publications.navs.research')
];
- const { width } = useWindowSize();
const [loading, setLoading] = useState(false);
useEffect(() => {
@@ -66,25 +50,6 @@ const CleanAirPublications = () => {
});
}, []);
- useEffect(() => {
- const resourceMenuItem = document.querySelector('.menu-wrapper');
- if (width < 1081) {
- resourceMenuItem.style.display = 'none';
- } else {
- resourceMenuItem.style.display = 'block';
- }
- }, [width]);
-
- const handleToggle = () => {
- setToggle(!toggle);
- const resourceMenuItem = document.querySelector('.menu-wrapper');
- if (toggle) {
- resourceMenuItem.style.display = 'none';
- } else {
- resourceMenuItem.style.display = 'block';
- }
- };
-
const toolkitData = cleanAirResources.filter(
(resource) => resource.resource_category === 'toolkit'
);
@@ -98,20 +63,28 @@ const CleanAirPublications = () => {
(resource) => resource.resource_category === 'research_publication'
);
- const ITEMS_PER_PAGE = 4;
+ const ITEMS_PER_PAGE = 3;
const renderData = (data, showSecondAuthor) => {
- const indexOfLastItem = activePage * ITEMS_PER_PAGE;
- const indexOfFirstItem = indexOfLastItem - ITEMS_PER_PAGE;
- const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
+ const [currentPage, setCurrentPage] = useState(1);
+ const totalPages = Math.ceil(data.length / ITEMS_PER_PAGE);
- if (loading) {
- return (
-
);
}
- return currentItems.map((resource, index) => (
-
+
+ {t('cleanAirSite.events.sectionTitles.upcoming')}
+
+
+
+
+
+
+
+ -
+ {dates.map((date) => (
+
- handleDateSelect(date.value)}>
+ {date.month}
+ {date.value === selectedDate && (
+
+ )} +
+ ))}
+
+
+
+
+
+ -
+
- {
+ handleFilterSelect(option.value);
+ }}>
+ {option.label}
+ {option.value === filter && (
+
+ )} +
+ ))}
+ - {
+ setFilter(option.value);
+ setOpenFilter(false);
+ }}>
+ {option.label}
+ {option.value === filter && (
+
+ )} +
+ ))}
+
{t('cleanAirSite.events.dropdowns.filter.label1')}
+
+ {filterOption1.map((option) => (
+
+ {t('cleanAirSite.events.dropdowns.filter.label2')}
+
+ {filterOption2.map((option) => (
+
+
+ {upcomingEvents.length > 0 ? (
+ upcomingEvents.map((event) => (
+
-
+ 
+
+ ))
+ ) : (
+
+
+ + {event.title.length > 50 ? event.title.slice(0, 50) + '...' : event.title} +
++ {event.title_subtext.length > 100 + ? event.title_subtext.slice(0, 100) + '...' + : event.title_subtext} +
++ {format(new Date(event.start_date), 'dd MMMM, yyyy')} +
+ +
+
+ )}
+ {t('cleanAirSite.events.noEvents')}
+
-
+ -
-
);
};
diff --git a/website/frontend/src/pages/CleanAir/CleanAirPublications.js b/website/frontend/src/pages/CleanAir/CleanAirPublications.js
index ad308a6389..a408a5f601 100644
--- a/website/frontend/src/pages/CleanAir/CleanAirPublications.js
+++ b/website/frontend/src/pages/CleanAir/CleanAirPublications.js
@@ -6,36 +6,21 @@ import { useDispatch, useSelector } from 'react-redux';
import { setActiveResource } from 'reduxStore/CleanAirNetwork/CleanAir';
import { ReportComponent } from 'components/CleanAir';
import { getAllCleanAirApi } from 'apis/index.js';
-import ListIcon from '@mui/icons-material/List';
-import CloseIcon from '@mui/icons-material/Close';
-import useWindowSize from 'utilities/customHooks';
-import Loadspinner from 'src/components/LoadSpinner/SectionLoader';
-import { useTranslation, Trans } from 'react-i18next';
-
-const ResourceMenuItem = ({ activeResource, resource, dispatch, setToggle }) => {
- const { width } = useWindowSize();
- const isActive = activeResource === resource;
- const className = isActive ? 'active' : 'resource-menu-item-link';
- const onClick = () => {
- dispatch(setActiveResource(resource));
- if (width < 1081) {
- setToggle();
- }
- };
-
- return (
-
-
);
};
diff --git a/website/frontend/src/pages/CleanAir/CleanAirPartners.js b/website/frontend/src/pages/CleanAir/CleanAirPartners.js
index 3724645c7a..5067f35c22 100644
--- a/website/frontend/src/pages/CleanAir/CleanAirPartners.js
+++ b/website/frontend/src/pages/CleanAir/CleanAirPartners.js
@@ -1,26 +1,22 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
import { isEmpty } from 'underscore';
import SEO from 'utilities/seo';
import { useInitScrollTop } from 'utilities/customHooks';
import { useDispatch } from 'react-redux';
-import { SplitSection, SingleSection } from 'components/CleanAir';
-import { useNavigate } from 'react-router-dom';
+import { SplitTextSection, RegisterSection, IntroSection } from 'components/CleanAir';
import { usePartnersData } from '../../../reduxStore/Partners/selectors';
import { loadPartnersData } from '../../../reduxStore/Partners/operations';
-import Partner1 from 'assets/img/cleanAir/partners-sec1.png';
-import Partner2 from 'assets/img/cleanAir/partners-sec2.png';
-import Partner3 from 'assets/img/cleanAir/partners-sec3.png';
-import Partner4 from 'assets/img/cleanAir/partners-sec4.png';
+import Membership from 'assets/img/cleanAir/membership.png';
import useWindowSize from 'utilities/customHooks';
-import { useTranslation, Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
const CleanAirPartners = () => {
useInitScrollTop();
const { t } = useTranslation();
const dispatch = useDispatch();
- const navigate = useNavigate();
const partnersData = usePartnersData();
const { width } = useWindowSize();
+ const isLoading = isEmpty(partnersData);
useEffect(() => {
if (isEmpty(partnersData)) {
@@ -42,28 +38,6 @@ const CleanAirPartners = () => {
(partner) => partner.type === 'ca-private-sector'
);
- const onLogoClick = (data) => (event) => {
- event.preventDefault();
- if (data.descriptions.length > 0) {
- navigate(`/partners/${data.unique_title}`);
- } else if (data.partner_link) {
- window.open(data.partner_link, '_blank');
- }
- };
-
- const [itemsToShow, setItemsToShow] = useState(8);
- const [itemsToShowPolicy, setItemsToShowPolicy] = useState(8);
- const [itemsToShowSupport, setItemsToShowSupport] = useState(8);
- const [itemsToShowPrivate, setItemsToShowPrivate] = useState(8);
-
- const showMoreItems = (setItems, increment) => {
- setItems((prevState) => prevState + increment);
- };
-
- const showLessItems = (setItems, decrement, minItems) => {
- setItems((prevState) => (prevState > minItems ? prevState - decrement : minItems));
- };
-
useEffect(() => {
let backdropRevElements = document.querySelectorAll('.backdrop-rev');
@@ -86,260 +60,51 @@ const CleanAirPartners = () => {
/>
{/* section 1 */}
-
-
+
+ {/* Register Membership */}
+
- {eventsToShow
- .slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE)
- .map((event) => (
-
+
- {loading ? {t('cleanAirSite.events.sectionTitles.past')}
+
+
{t('cleanAirSite.events.noEvents')}
- ) : null}
- {eventsToShow.length > ITEMS_PER_PAGE && (
- -
-
- - handlePageChange('prev')}> - {'<'} - - -
- - {currentPage} - -
- - handlePageChange('next')}> - {'>'} - - -
+ {currentEvents.length > 0 ? (
+ <>
+ {currentEvents.map((event) => (
+
)}
+
+
+ ))}
+ {/* Pagination */}
+
+
+ + {event.title.length > 50 ? event.title.slice(0, 50) + '...' : event.title} +
++ {event.title_subtext.length > 100 + ? event.title_subtext.slice(0, 100) + '...' + : event.title_subtext} +
+{event.date}
+ +
+
+
+
+ ) : (
+ + {currentPage} of {totalPages} +
+ +
+
+ )}
+ {t('cleanAirSite.events.noEvents')}
+
-
-
-
-
-
-
-
- We have a growing list of partners from diverse disciplines across different parts of
- the world, reflecting the multidisciplinarity of tackling urban air pollution.
-
-
-
-
- -
-
-
-
-
-
-
-
- - {t('cleanAirSite.membership.implementingPartners.intro')} -
-
-
- )}
-
-
-
- {implementingPartners.slice(0, itemsToShow).map((implementingPartner) => (
-
- 0 ? { cursor: 'pointer' } : null
- }
- className="partner-img"
- key={implementingPartner.id}
- onClick={onLogoClick(implementingPartner)}>
- 
-
- ))}
-
- {itemsToShow < implementingPartners.length && (
-
- )}
- {itemsToShow > 8 && (
-
- )}
-
-
-
-
-
- -
-
-
-
-
-
-
-
- {t('cleanAirSite.membership.policyPartners.intro')}
-
-
- )}
-
-
-
- {policyPartners.slice(0, itemsToShowPolicy).map((policyPartner) => (
-
- 0 ? { cursor: 'pointer' } : null}
- className="partner-img"
- key={policyPartner.id}
- onClick={onLogoClick(policyPartner)}>
- 
-
- ))}
-
- {itemsToShowPolicy < policyPartners.length && (
-
- )}
- {itemsToShowPolicy > 8 && (
-
- )}
-
-
-
-
-
- -
-
+
-
-
-
-
- {t('cleanAirSite.membership.privateSector.intro')}
-
-
- )}
-
-
-
- {privateSectorPartners.slice(0, itemsToShowPrivate).map((privatePartner) => (
-
- 0 ? { cursor: 'pointer' } : null}
- className="partner-img"
- key={privatePartner.id}
- onClick={onLogoClick(privatePartner)}>
- 
-
- ))}
-
- {itemsToShow < privateSectorPartners.length && (
-
- )}
- {itemsToShow > 8 && (
-
- )}
-
-
-
-
+ {/* Implementing Partners */}
+ -
-
+ {/* Supporting Partners */}
+
-
+ {/* Policy Partners */}
+
-
- - {t('cleanAirSite.membership.supportingPartners.intro')} -
-
-
- )}
-
-
-
- {supportPartners.slice(0, itemsToShowSupport).map((supportPartner) => (
-
- 0 ? { cursor: 'pointer' } : null}
- className="partner-img"
- key={supportPartner.id}
- onClick={onLogoClick(supportPartner)}>
- 
-
- ))}
-
- {itemsToShowSupport < supportPartners.length && (
-
- )}
- {itemsToShowSupport > 8 && (
-
- )}
-
-
-
+ {/* Register Membership */}
+
-
- );
- }
+ const handleClickNext = () => {
+ if (currentPage < totalPages) {
+ setCurrentPage(currentPage + 1);
+ }
+ };
+
+ const handleClickPrev = () => {
+ if (currentPage > 1) {
+ setCurrentPage(currentPage - 1);
+ }
+ };
+
+ const currentItems = data.slice(
+ (currentPage - 1) * ITEMS_PER_PAGE,
+ currentPage * ITEMS_PER_PAGE
+ );
if (currentItems.length === 0 || !currentItems) {
return (
@@ -123,102 +96,63 @@ const CleanAirPublications = () => {
color: '#808080',
justifyContent: 'center',
alignItems: 'center',
- marginTop: '50px'
+ marginTop: '60px'
}}>
{t('cleanAirSite.publications.noResources')}
-
+ {currentItems.map((item, index) => (
+
- ));
- };
-
- const [activePage, setActivePage] = useState(1);
-
- const handlePageChange = (pageNumber) => {
- setActivePage(pageNumber);
+ );
};
useEffect(() => {
- setActivePage(1);
- }, [activeResource]);
-
- const renderPagination = () => {
- let data;
- switch (activeResource) {
- case t('cleanAirSite.publications.navs.toolkits'):
- data = toolkitData;
- break;
- case t('cleanAirSite.publications.navs.reports'):
- data = technicalReportData;
- break;
- case t('cleanAirSite.publications.navs.workshops'):
- data = workshopReportData;
- break;
- case t('cleanAirSite.publications.navs.research'):
- data = researchPublicationData;
- break;
- default:
- data = [];
- }
-
- if (data.length <= ITEMS_PER_PAGE) {
- return null;
- }
-
- const pageNumbers = [];
- for (let i = 1; i <= Math.ceil(data.length / ITEMS_PER_PAGE); i++) {
- pageNumbers.push(i);
- }
-
- const handlePrevPage = () => {
- if (activePage > 1) {
- setActivePage(activePage - 1);
+ const handleClickOutside = (event) => {
+ if (filterRef.current && !filterRef.current.contains(event.target)) {
+ setFilter(false);
}
- document.getElementById('top-menu-sec').scrollIntoView();
};
- const handleNextPage = () => {
- if (activePage < pageNumbers.length) {
- setActivePage(activePage + 1);
- }
- document.getElementById('top-menu-sec').scrollIntoView();
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
};
+ }, [filterRef]);
- return (
-
- );
+ const handleFilterSelect = (filter) => {
+ dispatch(setActiveResource(filter));
+ setFilter(false);
};
return (
@@ -229,54 +163,89 @@ const CleanAirPublications = () => {
description="CLEAN-Air Africa Network is a network of African cities and partners committed to improving air quality and reducing carbon emissions through knowledge sharing and capacity building."
/>
-
+
+
+ )}
+ {currentPage} of {totalPages} +
+ +
-
-
-
-
);
};
diff --git a/website/frontend/src/pages/CleanAir/EventDetails.js b/website/frontend/src/pages/CleanAir/EventDetails.js
index 48d77cdb7d..c719daf929 100644
--- a/website/frontend/src/pages/CleanAir/EventDetails.js
+++ b/website/frontend/src/pages/CleanAir/EventDetails.js
@@ -133,7 +133,11 @@ const EventDetails = () => {
{event.partner.map((partner) => (
- 
+
))}
diff --git a/website/frontend/styles/CleanAirPage.scss b/website/frontend/styles/CleanAirPage.scss
index cf147df49f..5579f95867 100644
--- a/website/frontend/styles/CleanAirPage.scss
+++ b/website/frontend/styles/CleanAirPage.scss
@@ -74,12 +74,6 @@
z-index: 1;
position: relative;
- .about-page {
- .page-section {
- margin: 20px 0;
- }
- }
-
.page-wrapper {
> * + * {
padding-top: 20px;
@@ -130,11 +124,11 @@
padding: 20px 0 10px 0;
}
+ // split section
.splitSection-section {
display: grid;
grid-template-columns: $gridColumn;
padding: 80px 0;
- background-color: $aq-blue-1;
.backdrop {
grid-column: 2 / 3;
@@ -230,7 +224,7 @@
width: 100%;
height: auto;
border-radius: 8px;
- object-fit: contain;
+ object-fit: cover;
}
}
}
@@ -336,6 +330,494 @@
}
}
+ // text split section
+ .textSplit-section {
+ .container {
+ max-width: $maxWidth;
+ margin: 0 auto;
+ padding: 60px 16px;
+ }
+
+ .grid-wrapper {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 20px;
+
+ .title-section,
+ .content-section {
+ width: 100%;
+ height: auto;
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ color: #353e52;
+
+ h1 {
+ font-size: 48px;
+ font-weight: 500;
+ line-height: 56px;
+ margin: 0;
+ padding: 0;
+ }
+
+ p,
+ div {
+ font-size: 24px;
+ line-height: 32px;
+ font-weight: 400;
+ margin: 0;
+ padding: 0;
+ }
+ }
+ }
+
+ .partners-wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ .partner-logos {
+ width: 100%;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+
+ .grid-container {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+ height: auto;
+ padding: 0;
+ margin: 0;
+ }
+
+ .cell {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0 16px;
+ box-sizing: border-box;
+ height: 144px;
+ width: 100%;
+ max-width: 260px;
+ border: 1px solid $aq-blue-2;
+ cursor: pointer;
+ }
+
+ img.logo {
+ width: 100%;
+ max-height: 110px;
+ object-fit: contain;
+ }
+
+ .partners-toggle-button {
+ outline: none;
+ border: none;
+ margin: 20px auto;
+ color: #145dff;
+ background: none;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+
+ // Register Banner
+ .banner {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 46px;
+ align-self: stretch;
+ padding: 40px;
+ background: linear-gradient(150deg, #f2f1f6 45.54%, #eef7ff 100%);
+ border-radius: 8px;
+ margin-top: 60px;
+
+ .banner-image {
+ width: 230px;
+ border-radius: 10px;
+ height: 220px;
+ object-fit: cover;
+ object-position: center;
+ }
+
+ .banner-content {
+ width: 100%;
+ padding-left: 20px;
+
+ p {
+ font-size: 28px;
+ line-height: 42px;
+ font-weight: 400;
+ color: #353e52;
+ margin-bottom: 20px;
+ margin-top: 0;
+ }
+
+ .register-button {
+ padding: 20px 20px;
+ background-color: #007bff;
+ color: #fff;
+ border: none;
+ cursor: pointer;
+ }
+ }
+ }
+
+ // Events
+ .events {
+ max-width: $maxWidth;
+ margin: 0 auto;
+ padding: 40px 16px;
+
+ .events-header {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+
+ .events-header-buttons {
+ display: flex;
+ gap: 20px;
+ button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 44px;
+ padding: 16px 20px;
+ background: none;
+ border: 1px solid #000000;
+ cursor: pointer;
+ }
+ }
+ }
+
+ .pagination {
+ width: auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+ margin-top: 20px;
+ button {
+ padding: 16px 20px;
+ background: none;
+ border: 1px solid #000000;
+ cursor: pointer;
+ }
+ }
+
+ .events-title {
+ font-size: 32px;
+ font-weight: 500;
+ line-height: 40px;
+ }
+
+ .event-cards {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 20px;
+
+ .event-card {
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ width: 100%;
+ padding: 10px;
+ margin: 10px;
+ border-radius: 8px;
+ background-color: #fff;
+ gap: 20px;
+
+ .even-card-details {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ padding: 8px;
+ border-radius: 24px;
+ width: 100%;
+ height: auto;
+ box-sizing: border-box;
+ }
+
+ .event-image {
+ width: 230px;
+ height: 180px;
+ border-radius: 16px;
+ object-fit: cover;
+ object-position: center;
+ }
+
+ .event-title,
+ .event-subtitle,
+ .event-date {
+ margin: 5px 0;
+ }
+
+ .event-title {
+ font-size: 32px;
+ font-weight: 400;
+ line-height: 40px;
+ }
+
+ .event-subtitle {
+ font-size: 20px;
+ font-weight: 400;
+ line-height: 28px;
+ }
+
+ .event-date {
+ font-size: 24px;
+ font-weight: 400;
+ line-height: 28px;
+ }
+
+ .no-events {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ p {
+ font-size: 24px;
+ font-weight: 400;
+ line-height: 28px;
+ color: #353e52;
+ }
+ }
+
+ .event-button {
+ background: none;
+ outline: none;
+ border: none;
+ cursor: pointer;
+ display: inline-block;
+ margin-top: 10px;
+ color: #145dff;
+ }
+ }
+ }
+ }
+
+ // dropdowns
+ .drop-down-list {
+ background: white;
+ position: absolute;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ top: 50px;
+ right: 0;
+ z-index: 10000;
+ width: 165px;
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+ overflow-y: auto;
+ max-height: 308px;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ .label {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 24px;
+ color: #353e5266;
+ padding: 10px 20px;
+ }
+
+ li {
+ display: flex;
+ justify-content: space-between;
+ padding: 10px 20px;
+ cursor: pointer;
+ &:hover {
+ background: #f2f1f6;
+ }
+ }
+ }
+
+ // singe section image banner
+ .acronym-image-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: initial;
+ position: relative;
+ overflow: hidden;
+ margin: 0 auto;
+ padding: 0;
+ object-fit: cover;
+ object-position: center;
+ }
+
+ .acronym-image {
+ object-fit: cover;
+ width: inherit;
+ position: inherit;
+ object-fit: cover;
+ object-position: bottom;
+ }
+
+ .acronym-section-container {
+ height: 1000px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ overflow: hidden;
+ margin: 0 auto;
+ padding: 0;
+ width: 100%;
+ }
+
+ .acronym-section {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: 0 auto;
+ padding: 0 16px;
+ width: 100%;
+ height: auto;
+ background-color: $aq-blue-1;
+
+ .content {
+ width: auto;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: 0 auto;
+
+ .acronym-content-container {
+ max-width: $maxWidth;
+ margin: 0 auto;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ z-index: 2;
+ margin-top: 40px;
+ background: none;
+ gap: 15px;
+ outline: none;
+ border: none;
+
+ p {
+ align-self: stretch;
+ color: #353e52;
+ text-align: center;
+ font-size: 28px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 48px;
+ padding: 0;
+ margin: 0;
+ }
+
+ h2 {
+ margin: 0;
+ padding: 0;
+ color: #121723;
+ text-align: center;
+ font-size: 48px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 56px;
+ }
+
+ .join-now {
+ color: #121723;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 28px;
+
+ a {
+ color: #135dff;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 28px;
+ text-decoration-line: underline;
+ }
+ }
+ }
+
+ .join-now {
+ color: #121723;
+ font-family: Inter;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 28px;
+
+ a {
+ color: #121723;
+ font-family: Inter;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 28px;
+ text-decoration-line: underline;
+ }
+ }
+ }
+ }
+
+ // responsive for mobile
+ @media screen and (max-width: 768px) {
+ .acronym-section-container {
+ height: auto;
+ }
+ .acronym-image-container {
+ display: none;
+ }
+
+ .acronym-section {
+ padding: 40px 0;
+ .content {
+ .acronym-content-container {
+ p {
+ font-size: 20px;
+ line-height: 32px;
+ }
+ h2 {
+ font-size: 32px;
+ line-height: 40px;
+ }
+ }
+ }
+ }
+ }
+
+ @media screen and (min-width: 768px) {
+ .acronym-section-container {
+ height: 700px;
+ }
+ }
+
+ @media screen and (min-width: 1024px) {
+ .acronym-section-container {
+ height: 1000px;
+ }
+ }
+
.single-section {
position: relative;
width: 100%;
@@ -396,43 +878,6 @@
align-self: stretch;
}
- .acronym-content-container {
- max-width: $maxWidth;
- margin: 0 auto;
- position: relative;
- top: 20px;
- z-index: 2;
- }
-
- .acronym-image {
- width: 100vw;
- height: 400px;
- position: relative;
- overflow: hidden;
- margin-bottom: -1rem;
- object-fit: cover;
- object-position: bottom;
- }
-
- .join-now {
- color: #121723;
- font-family: Inter;
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 28px;
-
- a {
- color: #121723;
- font-family: Inter;
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 28px;
- text-decoration-line: underline;
- }
- }
-
.button {
width: 100%;
height: auto;
@@ -510,16 +955,13 @@
.goal-image-container {
position: relative;
overflow: hidden;
- width: auto;
- height: auto;
.goal-image {
border-radius: 16px;
width: 231px;
- height: 174px;
position: relative;
overflow: hidden;
- object-fit: cover;
+ object-fit: contain;
object-position: center;
}
}
@@ -529,13 +971,6 @@
}
}
- .separator-1 {
- max-width: $maxWidth;
- border: 16px solid $aq-blue-3;
- margin-top: 0px;
- margin-bottom: 0;
- }
-
.article {
padding: 20px;
margin: 0;
@@ -840,25 +1275,44 @@
}
}
}
- }
+ }
+
+ .report-card {
+ grid-column: 2 / 3;
+ padding: 60px 50px;
+ background-color: #fff;
+ margin: 40px 0;
+ border-radius: 8px;
+
+ .report-card-body {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ }
+
+ .category-type {
+ width: 100%;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ padding: 0;
+ margin-bottom: 10px;
+ color: #135dff;
+ text-transform: uppercase;
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 28px;
+ }
- .report-card {
- grid-column: 2 / 3;
- padding: 60px 50px;
- background-color: $aq-white-3;
- margin: 40px 0;
- border-radius: 8px;
.main-text {
font-size: 38px;
line-height: 40px;
color: $aq-blue-2;
font-weight: 400;
- padding-bottom: 55px;
}
.author {
font-weight: 500;
font-size: 24px;
- padding-bottom: 5px;
}
.team {
font-weight: 400;
@@ -873,17 +1327,18 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
+ gap: 20px;
}
.link {
- margin-top: 70px;
cursor: pointer;
padding: 16px 32px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 1px;
- background: #145dff;
- color: $aq-white-0;
+ background: none;
+ border-radius: 2px;
+ border: 1px solid #000;
span {
display: flex;
@@ -912,9 +1367,31 @@
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
- margin: 10px auto;
padding: 0 16px;
+ .membership-img-wrapper {
+ border-radius: 10px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 290px;
+ margin-top: 60px;
+ padding: 0;
+ overflow: hidden;
+ position: relative;
+
+ .membership-img {
+ position: absolute;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 100%;
+ height: auto;
+ object-fit: contain;
+ object-position: center;
+ }
+ }
+
.event-intro-image {
.events-image {
width: 100%;
@@ -988,14 +1465,25 @@
}
.partners-intro {
- font-size: 36px;
- font-weight: 500;
- line-height: 44px;
- color: $aq-black-5;
- font-style: normal;
- margin-top: 70px;
- width: 80%;
- height: auto;
+ margin-bottom: 40px;
+ p {
+ font-size: 24px;
+ line-height: 36px;
+ font-weight: 400;
+ color: #353e52;
+ margin: 0;
+ padding: 0;
+ margin: 35px 0;
+ }
+
+ h2 {
+ font-size: 40px;
+ line-height: 60px;
+ font-weight: 600;
+ color: #121723;
+ margin: 0;
+ padding: 0;
+ }
}
.partners-list {
@@ -1027,112 +1515,6 @@
}
}
}
-
- .resources-container {
- display: grid;
- width: 100%;
- height: auto;
- justify-content: center;
- grid-template-columns: 1fr 3fr;
- gap: 15px;
- padding: 0;
- margin-top: 40px;
-
- .resource-menu {
- display: flex;
- flex-direction: column;
-
- .resource-menu-title {
- position: relative;
- margin-top: 0;
- margin-bottom: 20px;
- padding: 0px 6px 19px 0px;
- color: #353e52;
- font-size: 40px;
- font-weight: 600;
- font-style: normal;
- line-height: 52px;
- span {
- color: #0e4dff;
- }
- }
- .menu-wrapper {
- display: block;
- .resource-menu-item {
- padding: 0;
- margin: 0;
- border-right: 1px solid #353e52a3;
- list-style: none;
- width: 100%;
- height: auto;
-
- .active {
- font-size: 24px;
- font-weight: 500;
- font-style: normal;
- line-height: 32px;
- padding: 10px 20px 6px 21px;
- justify-content: center;
- align-items: center;
- color: $aq-white-0;
- border-radius: 100px 0px 0px 100px;
- border: 1px solid rgba(19, 93, 255, 0.2);
- background: #145dff;
- text-transform: capitalize;
- cursor: pointer;
-
- &:not(:first-child) {
- margin-top: 25px;
- }
- }
-
- .resource-menu-item-link {
- display: flex;
- cursor: pointer;
- text-transform: capitalize;
- flex-direction: row;
- align-items: center;
- justify-content: flex-start;
- padding: 15px 22px;
- color: #353e52a3;
- font-size: 24px;
- font-weight: 500;
- font-style: normal;
- line-height: 32px;
-
- &:not(:first-child) {
- margin-top: 25px;
- }
-
- &:hover {
- color: #1c1f2bd2;
- }
- }
- }
- }
- .resource-menu-icon {
- border: 1px solid #353e52a3;
- border-radius: 8px;
- padding: 10px;
- display: none;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- width: 50px;
- height: 50px;
- }
- }
- .resource-body {
- width: 100%;
- height: auto;
- padding: 0;
- margin: 0;
-
- > * + * {
- padding-top: 20px;
- }
- }
- }
}
/****************************************************/
@@ -1145,30 +1527,17 @@
.event-intro-image {
padding: 40px 0;
}
+ .membership-img-wrapper {
+ margin-top: 20px;
+ height: 200px;
+ }
}
}
- .resources-container {
- display: grid;
- width: 100%;
- height: auto;
- grid-template-columns: 1fr;
- gap: 15px;
- padding: 0;
- margin-top: 40px;
- .resource-menu {
- .title-wrapper {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- }
- .resource-menu-icon {
- display: flex;
- }
- .menu-wrapper {
- display: none;
- }
+ .events {
+ .event-card {
+ display: flex;
+ flex-direction: column;
}
}
@@ -1178,21 +1547,31 @@
height: auto;
}
+ .textSplit-section {
+ .container {
+ padding: 20px 16px;
+ }
+ .grid-container {
+ justify-content: center;
+ }
+ }
+
.single-section {
padding: 0;
+
.content {
- .content-h {
- font-size: 24px;
- line-height: 32px;
- }
+ .content-h,
.content-p {
font-size: 24px;
line-height: 32px;
}
.goals-container {
+ padding: 16px;
+
.goals {
gap: 20px;
+
.goal {
display: grid;
grid-template-columns: 1fr;
@@ -1210,15 +1589,13 @@
content: '';
top: -15px;
}
+
.goal-content {
- .goal-title {
+ .goal-title,
+ .goal-p {
font-size: 24px;
line-height: 32px;
}
- .goal-p {
- font-size: 20px;
- line-height: 28px;
- }
}
}
}
@@ -1238,52 +1615,27 @@
.splitSection-section {
padding: 0;
- margin: 0;
- margin-top: 40px;
+ margin: 40px 0 0;
- .backdrop {
+ .backdrop,
+ .backdrop-rev {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
height: auto;
+ }
+ .backdrop {
+ justify-items: center;
.splitSection-image {
- height: auto;
- width: 100%;
-
- .splitSection-img {
- float: none;
- width: 100%;
- max-height: 450px;
- object-fit: contain;
- }
+ max-width: 400px;
}
}
- // Reverse the backdrop
.backdrop-rev {
- display: flex;
flex-direction: column-reverse;
- align-items: center;
- padding: 16px;
justify-items: center;
-
- .splitSection-image {
- margin: 0;
- padding: 0;
- width: 100%;
- height: auto;
-
- .splitSection-img {
- float: none;
- height: 100%;
- width: 100%;
- max-height: 450px;
- object-fit: contain;
- border-radius: 8px;
- }
- }
}
}
@@ -1301,28 +1653,28 @@
.events-section {
.event-wrapper {
flex-wrap: wrap;
+
.event-container {
flex-direction: column;
.event-content {
display: block;
margin-left: 0;
- h1 {
- margin-top: 15px;
+
+ h1,
+ p,
+ .event-btn span {
font-size: 20px;
line-height: 20px;
}
- p {
+
+ p,
+ .event-btn span {
font-size: 14px;
line-height: 14px;
}
- .event-btn {
- span {
- font-size: 14px;
- line-height: 14px;
- }
- }
}
+
img {
margin-bottom: 25px;
width: 100%;
@@ -1339,14 +1691,36 @@
@media (max-width: $mainBreakPoint) {
.page-container {
- .page-wrapper {
- .individual-section {
- margin: 10px 0;
- .single-section.no-top {
- margin-top: 0;
+ .partners {
+ .partners-wrapper {
+ .partners-intro {
+ width: auto;
+ font-size: 24px;
+ line-height: 32px;
+ margin-top: 30px;
+ }
+ .event-intro-image {
+ padding: 40px 0;
+ }
+ .membership-img-wrapper {
+ margin-top: 20px;
+ height: 140px;
}
}
}
+
+ .report-card {
+ padding: 40px 20px;
+ }
+
+ .events .event-cards .event-card {
+ align-items: center;
+ }
+
+ .banner {
+ flex-direction: column;
+ }
+
.Hero {
.hero-content {
.hero-title {
@@ -1359,10 +1733,6 @@
}
}
- .report-card {
- padding: 60px 20px;
- }
-
.article {
position: relative;
width: 100%;
@@ -1377,24 +1747,13 @@
}
}
- .breaker {
- display: none;
- }
-
- .splitSection-section.title-section {
- margin-top: 0;
- .backdrop-rev {
- grid-gap: 0;
- }
- }
-
.splitSection-section {
width: 100%;
padding: 40px 0;
- margin: 0;
- margin-top: 40px;
+ margin: 40px 0 0;
- .backdrop {
+ .backdrop,
+ .backdrop-rev {
.splitSection-image {
margin: 0;
padding: 0;
@@ -1411,30 +1770,43 @@
}
}
- // Reverse the backdrop
.backdrop-rev {
.splitSection-image {
- margin: 0;
- padding: 0;
display: flex;
justify-content: center;
align-content: center;
- height: auto;
- width: 100%;
.splitSection-img {
- float: none;
height: 100%;
- width: 100%;
- object-fit: contain;
border-radius: 8px;
}
}
}
}
+ .single-section {
+ .content {
+ .goals-container {
+ .goals {
+ .goal {
+ .goal-image-container {
+ .goal-image {
+ width: 100%;
+ height: 190px;
+ object-fit: contain;
+ object-position: center;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
.single-section {
padding: 0;
+ margin-bottom: 0px;
+ margin-top: 80px;
.content {
.content-h {
font-size: 24px;
@@ -1444,11 +1816,9 @@
font-size: 20px;
line-height: 28px;
}
-
.acronym-content-container {
top: 20px;
}
-
.goals-container {
padding: 0 16px;
.goals {
@@ -1496,21 +1866,16 @@
}
}
}
+ }
+ }
- .single-section {
- margin-bottom: 0px;
- margin-top: 80px;
+ @media (min-width: 768px) and (max-width: 1023px) {
+ .page-container {
+ .acronym-image-container {
+ display: none;
}
-
- .partners {
- .partners-wrapper {
- .partners-intro {
- width: auto;
- font-size: 24px;
- line-height: 32px;
- margin-top: 30px;
- }
- }
+ .acronym-section {
+ padding: 40px 0;
}
}
}