Merge pull request #2380 from airqo-platform/website-research-implemnt

website: Research Page implementations
airqo-platform · Jan 16, 2025 · b6895d9 · b6895d9
2 parents 7485e58 + cb010a4
commit b6895d9
Show file tree

Hide file tree

Showing 7 changed files with 532 additions and 288 deletions.
diff --git a/website2/src/components/sections/solutions/CardWrapper.tsx 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<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+const CardWrapper: React.FC<CardWrapperProps> = ({
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <div
+      className={cn(
+        'p-8 md:p-16 rounded-lg max-w-5xl mx-auto bg-[#E9F7EF]',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default CardWrapper;
diff --git 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 */}
       <motion.section
-        className="bg-blue-50 p-16 space-y-6 rounded-lg max-w-5xl mx-auto"
         initial="hidden"
         whileInView="visible"
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <motion.h3
-          className="text-blue-700 text-2xl font-semibold mb-2"
-          variants={itemVariants}
-        >
-          PUBLICATIONS
-        </motion.h3>
-        <motion.h2
-          className="text-2xl lg:text-4xl font-normal mb-4"
-          variants={itemVariants}
-        >
-          Seeing the air in detail: Hyperlocal air quality dataset collected
-          from spatially distributed AirQo network.
-        </motion.h2>
-        <motion.div variants={itemVariants}>
-          <p className="text-gray-800 font-semibold mb-1">Published by</p>
-          <p className="text-gray-800 mb-6">AirQo</p>
-        </motion.div>
-        <motion.div variants={itemVariants}>
-          <CustomButton
-            onClick={() =>
-              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"
+        <CardWrapper className="bg-blue-50 space-y-4">
+          <motion.h3
+            className="text-blue-700 text-2xl font-semibold mb-2"
+            variants={itemVariants}
           >
-            Read More →
-          </CustomButton>
-        </motion.div>
+            PUBLICATIONS
+          </motion.h3>
+          <motion.h2
+            className="text-2xl lg:text-4xl font-normal mb-4"
+            variants={itemVariants}
+          >
+            Seeing the air in detail: Hyperlocal air quality dataset collected
+            from spatially distributed AirQo network.
+          </motion.h2>
+          <motion.div variants={itemVariants}>
+            <p className="text-gray-800 font-semibold mb-1">Published by</p>
+            <p className="text-gray-800 mb-6">AirQo</p>
+          </motion.div>
+          <motion.div variants={itemVariants}>
+            <CustomButton
+              onClick={() =>
+                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 →
+            </CustomButton>
+          </motion.div>
+        </CardWrapper>
       </motion.section>
     </div>
   );

diff --git 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 */}
       <motion.section
-        className="px-16 py-16 rounded-lg max-w-5xl mx-auto  bg-yellow-50"
         initial="hidden"
         whileInView="visible"
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <motion.div className="text-left space-y-4" variants={itemVariants}>
-          <Image
-            src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728248678/website/photos/Solutions/AirQo_quotes_odzokg.webp"
-            alt="Quote Icon"
-            width={60}
-            height={60}
-            className="mb-2"
-          />
-          <blockquote className="text-2xl lg:text-[40px] text-left leading-[48px] font-normal mb-4">
-            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.
-          </blockquote>
-          <p className="text-lg font-bold">Michael Wanyama</p>
-          <p className="text-gray-700">Team Lead on AutoSafety</p>
-        </motion.div>
+        <CardWrapper className="bg-yellow-50">
+          <motion.div className="text-left space-y-4" variants={itemVariants}>
+            <Image
+              src="https://res.cloudinary.com/dbibjvyhm/image/upload/v1728248678/website/photos/Solutions/AirQo_quotes_odzokg.webp"
+              alt="Quote Icon"
+              width={60}
+              height={60}
+              className="mb-2"
+            />
+            <blockquote className="text-2xl lg:text-[40px] text-left leading-[48px] font-normal mb-4">
+              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.
+            </blockquote>
+            <p className="text-lg font-bold">Michael Wanyama</p>
+            <p className="text-gray-700">Team Lead on AutoSafety</p>
+          </motion.div>
+        </CardWrapper>
       </motion.section>
 
       {/* CTA Section */}