Merge pull request #2413 from airqo-platform/website-feedback-updates

Website: General Maintenance and code base enhancements
airqo-platform · Jan 27, 2025 · b5ac692 · b5ac692
2 parents 1e1846c + 9c76dd0
commit b5ac692
Show file tree

Hide file tree

Showing 59 changed files with 1,302 additions and 1,026 deletions.
diff --git a/website2/src/app/clean-air-forum/glossary/page.tsx b/website2/src/app/clean-air-forum/glossary/page.tsx
@@ -13,8 +13,8 @@ const Page = () => {
   }
 
   return (
-    <div className="max-w-5xl mx-auto px-4 lg:px-0 flex flex-col gap-6">
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+    <div className="px-4 lg:px-0 flex flex-col gap-6">
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       {/* Split Section - Vaccination */}
       <div>

diff --git a/website2/src/app/clean-air-forum/layout.tsx b/website2/src/app/clean-air-forum/layout.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import React, { ReactNode } from 'react';
-import { Suspense } from 'react';
 
 import Footer from '@/components/layouts/Footer';
 import Navbar from '@/components/layouts/Navbar';
 import NewsLetter from '@/components/layouts/NewsLetter';
 import Loading from '@/components/loading';
+import mainConfig from '@/configs/mainConfigs';
 import { ForumDataProvider } from '@/context/ForumDataContext';
 import { useForumEvents } from '@/hooks/useApiHooks';
 import BannerSection from '@/views/Forum/BannerSection';
@@ -17,37 +17,42 @@ type CleanAirLayoutProps = {
 
 const CleanAirLayout: React.FC<CleanAirLayoutProps> = ({ children }) => {
   // Using the `useForumEvents` hook
-  const { forumEvents } = useForumEvents();
+  const { forumEvents, isLoading } = useForumEvents();
 
   // Extract the first event (if available)
   const eventData = forumEvents?.[0] || null;
 
+  // Loading state
+  if (isLoading) {
+    return <Loading />;
+  }
+
   return (
     <ForumDataProvider data={eventData}>
-      <Suspense fallback={<Loading />}>
-        <div className="min-h-screen w-full flex flex-col">
-          {/* Navbar */}
-          <header className="sticky top-0 z-50">
-            <Navbar />
-          </header>
-
-          {/* Banner Section */}
-          <BannerSection data={eventData} />
-
-          {/* Main Content */}
-          <main className="flex-1 pb-8">{children}</main>
-
-          {/* Newsletter Section */}
-          <section className="my-16">
-            <NewsLetter />
-          </section>
-
-          {/* Footer */}
-          <footer>
-            <Footer />
-          </footer>
-        </div>
-      </Suspense>
+      <div className="min-h-screen w-full flex flex-col">
+        {/* Navbar */}
+        <header className="sticky top-0 z-50">
+          <Navbar />
+        </header>
+
+        {/* Banner Section */}
+        <BannerSection data={eventData} />
+
+        {/* Main Content */}
+        <main className={`${mainConfig.containerClass} w-full flex-1 pb-8`}>
+          {children}
+        </main>
+
+        {/* Newsletter Section */}
+        <section className="my-16">
+          <NewsLetter />
+        </section>
+
+        {/* Footer */}
+        <footer>
+          <Footer />
+        </footer>
+      </div>
     </ForumDataProvider>
   );
 };

diff --git a/website2/src/app/clean-air-forum/logistics/page.tsx b/website2/src/app/clean-air-forum/logistics/page.tsx
@@ -12,8 +12,8 @@ const Page = () => {
     return null;
   }
   return (
-    <div className="max-w-5xl mx-auto px-4 lg:px-0 flex flex-col gap-6">
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+    <div className="px-4 lg:px-0 flex flex-col gap-6">
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       {/* Split Section - Vaccination */}
       <div>
@@ -30,7 +30,7 @@ const Page = () => {
         </div>
       </div>
 
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       {/* Split Section - Vaccination */}
       <div>

diff --git a/website2/src/app/clean-air-forum/partners/page.tsx b/website2/src/app/clean-air-forum/partners/page.tsx
@@ -45,8 +45,8 @@ const Page = () => {
     }));
 
   return (
-    <div className="max-w-5xl mx-auto px-4 lg:px-0 flex flex-col gap-6">
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+    <div className="px-4 lg:px-0 flex flex-col gap-6">
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       {/* Partners Text Section */}
       <div className="py-4">
@@ -71,7 +71,7 @@ const Page = () => {
       {/* Convening Partners Section */}
       {conveningPartners?.length > 0 && (
         <>
-          <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+          <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
           <div>
             <div className="flex flex-col md:flex-row md:space-x-8">
               <div className="md:w-1/3 mb-4 md:mb-0">
@@ -92,7 +92,7 @@ const Page = () => {
       {/* Host Partners Section */}
       {hostPartners?.length > 0 && (
         <>
-          <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+          <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
           <div>
             <div className="flex flex-col md:flex-row md:space-x-8">
               <div className="md:w-1/3 mb-4 md:mb-0">
@@ -113,7 +113,7 @@ const Page = () => {
       {/* Sponsors Section */}
       {sponsorPartner?.length > 0 && (
         <>
-          <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+          <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
           <div>
             <div className="flex flex-col md:flex-row md:space-x-8">
               <div className="md:w-1/3 mb-4 md:mb-0">
@@ -132,7 +132,7 @@ const Page = () => {
       {/* Funding Partners Section */}
       {fundingPartners?.length > 0 && (
         <>
-          <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+          <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
           <div>
             <div className="flex flex-col md:flex-row md:space-x-8">
               <div className="md:w-1/3 mb-4 md:mb-0">

diff --git a/website2/src/app/clean-air-forum/program-committee/page.tsx b/website2/src/app/clean-air-forum/program-committee/page.tsx
@@ -45,8 +45,8 @@ const Page: React.FC = () => {
   };
 
   return (
-    <div className="max-w-5xl mx-auto px-4 lg:px-0 gap-6">
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+    <div className="px-4 lg:px-0 gap-6">
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       <div className="py-4">
         <h2 className="text-2xl font-bold">Program Committee</h2>
@@ -58,7 +58,7 @@ const Page: React.FC = () => {
       </div>
 
       {/* Member Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto px-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-4">
         {displayedMembers?.map((person: any) => (
           <MemberCard
             key={person.id}

diff --git a/website2/src/app/clean-air-forum/resources/page.tsx b/website2/src/app/clean-air-forum/resources/page.tsx
@@ -113,7 +113,7 @@ const Page = () => {
   };
 
   return (
-    <div className="max-w-5xl mx-auto px-4 lg:px-0 py-6 gap-6 flex flex-col">
+    <div className=" px-4 lg:px-0 py-6 gap-6 flex flex-col">
       {/* Buttons for Expand/Collapse All */}
       <div className="flex justify-end space-x-4 mb-4">
         <button
@@ -155,7 +155,7 @@ const Page = () => {
             ),
           )}
 
-          <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+          <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
         </div>
       ))}
     </div>

diff --git a/website2/src/app/clean-air-forum/schedule/page.tsx b/website2/src/app/clean-air-forum/schedule/page.tsx
@@ -43,7 +43,7 @@ const AccordionItem: React.FC<any> = ({
         <div className="mt-4 pt-4">
           {sessions?.map((item: any, index: any) => (
             <div className="flex flex-col gap-4" key={index}>
-              <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+              <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
               <div className="grid grid-cols-12 gap-4 mb-4">
                 <div className="col-span-2 text-sm font-semibold">
                   {formatTime(item.start_time)}
@@ -81,7 +81,7 @@ const Page = () => {
   }
 
   return (
-    <div className="max-w-5xl mx-auto px-4 lg:px-0 flex flex-col gap-6">
+    <div className=" px-4 lg:px-0 flex flex-col gap-6">
       {/* Schedule Section */}
       <div className="py-4">
         <h2 className="text-2xl font-bold">Schedule</h2>
@@ -104,7 +104,7 @@ const Page = () => {
         />
       ))}
 
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       {/* Registration Section */}
       <div>
@@ -121,7 +121,7 @@ const Page = () => {
         </div>
       </div>
 
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       {/* Sponsorship Section */}
       <div>

diff --git a/website2/src/app/clean-air-forum/speakers/page.tsx b/website2/src/app/clean-air-forum/speakers/page.tsx
@@ -55,8 +55,8 @@ const Page = () => {
   };
 
   return (
-    <div className="max-w-5xl mx-auto flex flex-col px-4 lg:px-0 gap-6">
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+    <div className="flex flex-col px-4 lg:px-0 gap-6">
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       <div className="py-4">
         <div
@@ -68,7 +68,7 @@ const Page = () => {
 
       {/* Keynote Speakers Section */}
       <h2 className="text-2xl font-bold">Keynote Speakers</h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto px-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-4">
         {displayedKeyNoteSpeakers?.map((person: any) => (
           <MemberCard
             key={person.id}
@@ -90,11 +90,11 @@ const Page = () => {
         </div>
       )}
 
-      <Divider className="bg-black p-0 m-0 h-[1px] w-full max-w-5xl mx-auto" />
+      <Divider className="bg-black p-0 m-0 h-[1px] w-full" />
 
       {/* Speakers Section */}
       <h2 className="text-2xl font-bold">Speakers</h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto px-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 px-4">
         {displayedSpeakers?.map((person: any) => (
           <MemberCard
             key={person.id}

diff --git a/website2/src/app/legal/layout.tsx b/website2/src/app/legal/layout.tsx
@@ -2,6 +2,7 @@ import { Metadata } from 'next';
 import React from 'react';
 
 import MainLayout from '@/components/layouts/MainLayout';
+import mainConfig from '@/configs/mainConfigs';
 import TabSection from '@/views/legal/Tabsection';
 
 export const metadata: Metadata = {
@@ -51,7 +52,9 @@ const LegalPageLayout: React.FC<LegalPageLayoutProps> = ({ children }) => {
   return (
     <MainLayout>
       <TabSection />
-      <main className="legal-page-content">{children}</main>
+      <main className={`${mainConfig.containerClass} legal-page-content`}>
+        {children}
+      </main>
     </MainLayout>
   );
 };

diff --git a/website2/src/app/products/analytics/AnalyticsPage.tsx b/website2/src/app/products/analytics/AnalyticsPage.tsx
@@ -6,6 +6,7 @@ import React from 'react';
 import { BiDownload } from 'react-icons/bi';
 
 import { CustomButton } from '@/components/ui';
+import mainConfig from '@/configs/mainConfigs';
 
 // Define motion variants for different animations
 const containerVariants = {
@@ -49,7 +50,9 @@ const AnalyticsPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+        <div
+          className={`${mainConfig.containerClass} grid grid-cols-1 md:grid-cols-2 gap-12 items-center`}
+        >
           {/* Text Content */}
           <motion.div className="space-y-6" variants={itemVariants}>
             <p className="text-gray-500 mb-2 text-[14px]">
@@ -85,7 +88,7 @@ const AnalyticsPage = () => {
 
       {/* Unlock Air Quality Insights Section */}
       <motion.section
-        className="max-w-5xl mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-8"
+        className={`${mainConfig.containerClass} px-4 grid grid-cols-1 lg:grid-cols-2 gap-8`}
         initial="hidden"
         whileInView="visible"
         viewport={{ once: true, amount: 0.2 }}
@@ -117,7 +120,9 @@ const AnalyticsPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="flex flex-col-reverse max-w-5xl mx-auto lg:flex-row items-center lg:items-start relative">
+        <div
+          className={`flex flex-col-reverse ${mainConfig.containerClass} lg:flex-row items-center lg:items-start relative`}
+        >
           {/* Card Section */}
           <motion.div
             className="bg-green-50 relative p-6 rounded-lg shadow-md md:w-[630px] md:-top-10 lg:max-w-md lg:absolute lg:left-0 lg:top-8 z-10"
@@ -189,7 +194,9 @@ const AnalyticsPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="flex flex-col max-w-5xl mx-auto lg:flex-row items-center lg:items-start relative">
+        <div
+          className={`flex flex-col ${mainConfig.containerClass} lg:flex-row items-center lg:items-start relative`}
+        >
           {/* Image Section */}
           <motion.div
             className="mt-12 lg:mt-0 lg:mr-[300px] w-full"
@@ -235,7 +242,7 @@ const AnalyticsPage = () => {
         viewport={{ once: true, amount: 0.2 }}
         variants={containerVariants}
       >
-        <div className="max-w-5xl mx-auto space-y-8">
+        <div className={`${mainConfig.containerClass} space-y-8`}>
           {/* Description and Button */}
           <motion.div
             className="text-center flex flex-col items-center space-y-6"