From 290362eef7ff2625112a42964bd9f62d25b1fb13 Mon Sep 17 00:00:00 2001 From: Ochieng Paul Date: Thu, 16 Jan 2025 11:42:14 +0300 Subject: [PATCH 1/3] updates --- .../sections/solutions/CardWrapper.tsx | 27 ++ .../AfricanCities/AfricanCityPage.tsx | 62 ++-- .../solutions/communities/CommunityPage.tsx | 38 +- .../views/solutions/research/ResearchPage.tsx | 336 +++++------------- .../views/solutions/research/data-access.tsx | 144 ++++++++ .../solutions/research/fellowship-section.tsx | 108 ++++++ .../research/platform-integration.tsx | 105 ++++++ 7 files changed, 532 insertions(+), 288 deletions(-) create mode 100644 website2/src/components/sections/solutions/CardWrapper.tsx create mode 100644 website2/src/views/solutions/research/data-access.tsx create mode 100644 website2/src/views/solutions/research/fellowship-section.tsx create mode 100644 website2/src/views/solutions/research/platform-integration.tsx diff --git a/website2/src/components/sections/solutions/CardWrapper.tsx b/website2/src/components/sections/solutions/CardWrapper.tsx new file mode 100644 index 0000000000..cde2da3d50 --- /dev/null +++ b/website2/src/components/sections/solutions/CardWrapper.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { cn } from '@/lib/utils'; + +interface CardWrapperProps extends React.HTMLAttributes { + children: React.ReactNode; +} + +const CardWrapper: React.FC = ({ + children, + className, + ...props +}) => { + return ( +
+ {children} +
+ ); +}; + +export default CardWrapper; diff --git a/website2/src/views/solutions/AfricanCities/AfricanCityPage.tsx b/website2/src/views/solutions/AfricanCities/AfricanCityPage.tsx index d05db77153..af82c66c6e 100644 --- a/website2/src/views/solutions/AfricanCities/AfricanCityPage.tsx +++ b/website2/src/views/solutions/AfricanCities/AfricanCityPage.tsx @@ -3,6 +3,7 @@ import { motion } from 'framer-motion'; import React from 'react'; +import CardWrapper from '@/components/sections/solutions/CardWrapper'; import HeroSection from '@/components/sections/solutions/HeroSection'; import { CustomButton, Divider } from '@/components/ui'; import AfricanCities from '@/views/solutions/AfricanCities/AfricanCities'; @@ -145,42 +146,43 @@ const AfricanCityPage = () => { {/* Publications Section */} - - PUBLICATIONS - - - Seeing the air in detail: Hyperlocal air quality dataset collected - from spatially distributed AirQo network. - - -

Published by

-

AirQo

- - - - window.open( - 'https://www.sciencedirect.com/science/article/pii/S2352340922007065?via%3Dihub', - '_blank', - ) - } - className="flex items-center bg-transparent px-4 w-full max-w-[200px] py-3 border text-gray-700 border-gray-700 hover:bg-gray-200" + + - Read More → - - + PUBLICATIONS + + + Seeing the air in detail: Hyperlocal air quality dataset collected + from spatially distributed AirQo network. + + +

Published by

+

AirQo

+ + + + window.open( + 'https://www.sciencedirect.com/science/article/pii/S2352340922007065?via%3Dihub', + '_blank', + ) + } + className="flex items-center bg-transparent px-4 w-full max-w-[200px] py-3 border text-gray-700 border-gray-700 hover:bg-gray-200" + > + Read More → + + + ); diff --git a/website2/src/views/solutions/communities/CommunityPage.tsx b/website2/src/views/solutions/communities/CommunityPage.tsx index 3d9ef2ca63..a38a703784 100644 --- a/website2/src/views/solutions/communities/CommunityPage.tsx +++ b/website2/src/views/solutions/communities/CommunityPage.tsx @@ -5,6 +5,7 @@ import Image from 'next/image'; import Link from 'next/link'; import React from 'react'; +import CardWrapper from '@/components/sections/solutions/CardWrapper'; import HeroSection from '@/components/sections/solutions/HeroSection'; import { CustomButton } from '@/components/ui'; import { useDispatch } from '@/hooks'; @@ -276,29 +277,30 @@ const CommunitiesPage = () => { {/* Quote Section */} - - Quote Icon -
- We advocate for road safety and environmental protection from - pollution associated with the transport industry, and depend a lot - on the AirQo platform to get air quality data in order to extend air - quality education to the communities. -
-

Michael Wanyama

-

Team Lead on AutoSafety

- + + + Quote Icon +
+ We advocate for road safety and environmental protection from + pollution associated with the transport industry, and depend a lot + on the AirQo platform to get air quality data in order to extend + air quality education to the communities. +
+

Michael Wanyama

+

Team Lead on AutoSafety

+ + {/* CTA Section */} diff --git a/website2/src/views/solutions/research/ResearchPage.tsx b/website2/src/views/solutions/research/ResearchPage.tsx index c771028fd6..b5429d9c21 100644 --- a/website2/src/views/solutions/research/ResearchPage.tsx +++ b/website2/src/views/solutions/research/ResearchPage.tsx @@ -2,15 +2,18 @@ import { motion } from 'framer-motion'; import { BarChart3, Shield, Users, Zap } from 'lucide-react'; -import Image from 'next/image'; import { useRouter } from 'next/navigation'; import React from 'react'; +import CardWrapper from '@/components/sections/solutions/CardWrapper'; import HeroSection from '@/components/sections/solutions/HeroSection'; import { CustomButton, Divider } from '@/components/ui'; -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { cn } from '@/lib/utils'; +import DataAccessSection from './data-access'; +import FellowshipSection from './fellowship-section'; +import PlatformIntegration from './platform-integration'; + // Animation variants const animations = { container: { @@ -44,12 +47,6 @@ const animations = { // Constants const CONTENT = { - researchAreas: [ - "Participating in scientific research and academic writing for projects aligned with AirQo's priorities and the fellow's technical expertise.", - 'Contributing to product development and deployment, such as applied machine learning in air quality or user experience research.', - 'Translating research into policy and impact.', - 'Conducting specific studies, such as examining the impact of air quality on particular population segments.', - ], benefits: [ { title: 'Enhanced Data Accessibility', @@ -80,14 +77,6 @@ const CONTENT = { color: 'bg-orange-50 text-orange-600', }, ], - images: { - blob: 'https://res.cloudinary.com/dbibjvyhm/image/upload/v1728248677/website/photos/Solutions/AirQo_blob_fill_ro37jv.svg', - consultation: [ - 'https://res.cloudinary.com/dbibjvyhm/image/upload/v1728248679/website/photos/Solutions/AirQo_Web_IMG06_nvv5xu.webp', - 'https://res.cloudinary.com/dbibjvyhm/image/upload/v1728255497/website/photos/Solutions/consult-2_lnfllz.webp', - 'https://res.cloudinary.com/dbibjvyhm/image/upload/v1728255497/website/photos/Solutions/consult-long_ehdzts.webp', - ], - }, }; const ResearchPage = () => { @@ -107,13 +96,13 @@ const ResearchPage = () => { ); return ( -
+
{/* Hero Section */} @@ -128,242 +117,109 @@ const ResearchPage = () => { tackle air quality research challenges.

We aim to advance the understanding of air quality issues in - sub-Saharan Africa through a multidisciplinary approach. By leveraging - IoT and sensing technology, AI and machine learning, and temporal and - spatial modeling, we strive to enhance air quality management across - the continent. + sub-Saharan Africa through a multidisciplinary approach. We leverage + IoT and sensing technology, AI and Machine Learning, and temporal and + spatial modeling to enhance air quality management across the + continent. - {/* Collaboration Section */} - - {/* Industrial consultation */} - - {/* Text Content */} - -

- Automating data access for reference grade monitors -

-

- Our ongoing partnership with the United Nations Environment - Programme (UNEP) aims to support African cities with air quality - management to accelerate the implementation of the{' '} - - UN resolution UNEA Res 3/8 - - . -

-
- {[ - 'Through this collaboration, we are growing the data infrastructure and facilitating knowledge and experience sharing to advance air quality management in African Cities.', - 'Recognizing the critical need for open access to high-quality datasets from regulatory-grade air quality monitors, we have developed a data logger, a unique microprocessor-based solution.', - 'This groundbreaking initiative promotes remote access to reference monitor data, continues to lower the cost of operating air quality networks, and enhances open access to regulatory-grade datasets for actionable insights across African cities.', - ].map((text, index) => ( -

- {text} -

- ))} -
- + {/* Industrial consultation */} + - {/* Images Grid */} - - - {CONTENT.images.consultation.slice(0, 2).map((src, index) => ( - {`Industrial - ))} - - - Industrial Consultation 3 - - - - {/* Blob Overlay */} - +
+ - Blob Overlay - - - - {/* Benefits Section */} - -
- - Key Benefits - -
- {CONTENT.benefits.map((benefit, i) => ( - -
-
- -
-

- {benefit.title} -

-

- {benefit.description} -

+ Key Benefits + +
+ {CONTENT.benefits.map((benefit, i) => ( + +
+
+
-
- - ))} -
+

+ {benefit.title} +

+

+ {benefit.description} +

+
+
+ + ))}
- +
+ - {/* Platform Integration Section */} -
-
-

- Platform interoperability/compatibility/Integration -

-
- {[ - 'The AirQo Analytics Platform can seamlessly integrate third-party datasets, expanding its digital capabilities and creating a comprehensive and accurate picture of air quality in major African cities.', - 'The platform can effectively support data integration from various air quality sensor manufacturers and networks. This integration provides a holistic view of air quality across African cities, ensuring access to more comprehensive and reliable air quality data.', - 'By integrating advanced technologies and fostering international collaborations, we are committed to pioneering solutions that drive sustainable air quality management in Africa.', - ].map((text, index) => ( -

- {text} -

- ))} -
-
-
+ {/* Platform Integration Section */} + - {/* Fellowship Section */} -
-
- - - - Visiting Fellowship Program - - - -

- The AirQo Visiting Fellowship Program is open to scholars and - practitioners eager to contribute to our impactful social - initiatives. We welcome individuals from a wide range of - disciplines, including public health, environmental sciences, - computer sciences, mathematics, engineering, communications, - and public policy. -

-

- Priority Technical areas: -

-
    - {CONTENT.researchAreas.map((area, i) => ( -
  • - {area} -
    • - ))} -
- { - window.open( - 'https://docs.google.com/forms/d/e/1FAIpQLSfCP91gYXNAdpQ4kStJH7ZnFdXpiRElJuOttZkS7SQhmsESaQ/viewform', - '_blank', - ); - }} - className="w-full sm:w-auto bg-[#E9F7EF] text-black hover:bg-green-100 transition rounded-none" - > - Apply for the AirQo visiting fellowship programme - - - -
-
- + {/* Fellowship Section */} + {/* Publications Section */} - - -

Publications

-

- Managing the Environment for Climate Resilient Livelihoods and - Sustainable Economic Development. -

-

- Created by - National Environment Management Authority(NEMA) -

-

- Supported by - AirQo and Makerere University -

- { - window.open( - 'https://www.nema.go.ug/sites/default/files/NSOER%202018-2019.pdf', - '_blank', - ); - }} - className="flex items-center bg-transparent text-black justify-center w-full max-w-[200px] border border-black px-4 py-3 bg-none mt-4" - > - Read Report → - - - + + + +

+ Publications +

+

+ Managing the Environment for Climate Resilient Livelihoods and + Sustainable Economic Development. +

+
+

+ Created by + National Environment Management Authority(NEMA) +

+

+ Supported by + AirQo and Makerere University +

+
+ { + window.open( + 'https://www.nema.go.ug/sites/default/files/NSOER%202018-2019.pdf', + '_blank', + ); + }} + className="flex items-center bg-transparent text-black justify-center w-full max-w-[200px] border border-black px-4 py-3 bg-none mt-4" + > + Read Report → + + + + {/* Call to Action */} + + {/* Text Content */} + + + Automating data access for reference grade monitors + + + Our ongoing partnership with the United Nations Environment + Programme (UNEP) aims to support African cities with air quality + management to accelerate the implementation of the{' '} + + UN resolution UNEA Res 3/8 + + . + + + {[ + 'Through this collaboration, we are growing the data infrastructure and facilitating knowledge and experience sharing to advance air quality management in African Cities.', + 'Recognizing the critical need for open access to high-quality datasets from regulatory-grade air quality monitors, we have developed a data logger, a unique microprocessor-based solution.', + 'This groundbreaking initiative promotes remote access to reference monitor data, continues to lower the cost of operating air quality networks, and enhances open access to regulatory-grade datasets for actionable insights across African cities.', + ].map((text, index) => ( + + {text} + + ))} + + + + {/* Images Grid */} + + + {CONTENT.images.consultation.slice(0, 2).map((src, index) => ( + + {`Industrial + + ))} + + + Industrial Consultation 3 + + + + {/* Blob Overlay */} + + Blob Overlay + + + + ); +} diff --git a/website2/src/views/solutions/research/fellowship-section.tsx b/website2/src/views/solutions/research/fellowship-section.tsx new file mode 100644 index 0000000000..61f198f3a6 --- /dev/null +++ b/website2/src/views/solutions/research/fellowship-section.tsx @@ -0,0 +1,108 @@ +'use client'; + +import { motion } from 'framer-motion'; +import { ChevronRight } from 'lucide-react'; + +import { Button } from '@/components/ui/button'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; + +const CONTENT = { + researchAreas: [ + "Participating in scientific research and academic writing for projects aligned with AirQo's priorities and the fellow's technical expertise.", + 'Contributing to product development and deployment, such as applied machine learning in air quality or user experience research.', + 'Translating research into policy and impact.', + 'Conducting specific studies, such as examining the impact of air quality on particular population segments.', + ], +}; + +const animations = { + container: { + hidden: { opacity: 0, y: 50 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.5, + staggerChildren: 0.1, + }, + }, + }, + item: { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.5, + }, + }, + }, +}; + +export default function FellowshipSection() { + return ( +
+ + + + + Visiting Fellowship Program + + + + + The AirQo Visiting Fellowship Program is open to scholars and + practitioners eager to contribute to our impactful social + initiatives. We welcome individuals from a wide range of + disciplines, including public health, environmental sciences, + computer sciences, mathematics, engineering, communications, and + public policy. + + + Priority Technical Areas: + + + {CONTENT.researchAreas.map((area, i) => ( + + + {area} + + ))} + + + + + + + +
+ ); +} diff --git a/website2/src/views/solutions/research/platform-integration.tsx b/website2/src/views/solutions/research/platform-integration.tsx new file mode 100644 index 0000000000..21c9290d2e --- /dev/null +++ b/website2/src/views/solutions/research/platform-integration.tsx @@ -0,0 +1,105 @@ +'use client'; + +import { motion } from 'framer-motion'; +import Image from 'next/image'; + +const animations = { + container: { + hidden: { opacity: 0, y: 50 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.6, + staggerChildren: 0.3, + }, + }, + }, + item: { + hidden: { opacity: 0, y: 30 }, + visible: { + opacity: 1, + y: 0, + transition: { + type: 'spring', + stiffness: 100, + damping: 20, + duration: 0.6, + }, + }, + }, + image: { + hidden: { opacity: 0, scale: 0.95 }, + visible: { + opacity: 1, + scale: 1, + transition: { + type: 'spring', + stiffness: 100, + damping: 20, + duration: 0.8, + }, + }, + }, +}; + +export default function PlatformIntegration() { + return ( +
+ + {/* Text Content */} + + + Air Quality Data Integration + + + + + The AirQo Analytics Platform seamlessly integrates air quality + data from various air quality sensor manufacturers and networks + providing a comprehensive and accurate picture of air quality in + major African cities. This integration provides a holistic view of + air quality across African cities, ensuring access to more + comprehensive and reliable air quality data. + + + + By integrating advanced technologies and fostering international + collaborations, we are committed to pioneering solutions that + drive sustainable air quality management in Africa. + + + + + {/* Image */} + +
+ Air Quality Data Integration +
+ + +
+ ); +} From 2cd7563bb942ae5f9263aeb56abcb7073b54bf0f Mon Sep 17 00:00:00 2001 From: Ochieng Paul Date: Thu, 16 Jan 2025 11:47:22 +0300 Subject: [PATCH 2/3] updates --- website2/src/views/solutions/research/ResearchPage.tsx | 2 +- website2/src/views/solutions/research/fellowship-section.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/website2/src/views/solutions/research/ResearchPage.tsx b/website2/src/views/solutions/research/ResearchPage.tsx index b5429d9c21..390984b270 100644 --- a/website2/src/views/solutions/research/ResearchPage.tsx +++ b/website2/src/views/solutions/research/ResearchPage.tsx @@ -96,7 +96,7 @@ const ResearchPage = () => { ); return ( -
+
{/* Hero Section */} - + Visiting Fellowship Program From cb010a4e85f65ba8577cf1df910fd0d07290beea Mon Sep 17 00:00:00 2001 From: Ochieng Paul Date: Thu, 16 Jan 2025 11:56:47 +0300 Subject: [PATCH 3/3] updates --- website2/src/views/solutions/research/ResearchPage.tsx | 4 ++-- website2/src/views/solutions/research/data-access.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/website2/src/views/solutions/research/ResearchPage.tsx b/website2/src/views/solutions/research/ResearchPage.tsx index 390984b270..7f0e43989f 100644 --- a/website2/src/views/solutions/research/ResearchPage.tsx +++ b/website2/src/views/solutions/research/ResearchPage.tsx @@ -110,7 +110,7 @@ const ResearchPage = () => { {/* Description Section */} We actively collaborate with researchers across the world to jointly @@ -144,7 +144,7 @@ const ResearchPage = () => { > Key Benefits -
+
{CONTENT.benefits.map((benefit, i) => (