correction

frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

frontend/next.config.ts

@@ -1,7 +1,8 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from "next"
 
 const nextConfig: NextConfig = {
   reactStrictMode: false,
-};
+}
+
+export default nextConfig
 
-export default nextConfig;

frontend/package.json

@@ -13,14 +13,14 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-toast": "^1.2.6",
     "@shadcn/ui": "^0.0.4",
-    "axios": "^1.7.7",
+    "axios": "^1.8.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "html2canvas": "^1.4.1",
     "leaflet": "^1.9.4",
     "leaflet-draw": "^1.0.4",
-    "leaflet-geosearch": "^4.0.0",
+    "leaflet-geosearch": "^4.2.0",
     "lucide-react": "^0.475.0",
     "next": "^15.1.7",
     "papaparse": "^5.5.2",
@@ -29,7 +29,8 @@
     "react-icons": "^5.3.0",
     "react-leaflet": "^4.2.1",
     "recharts": "^2.15.1",
-    "tailwind-merge": "^3.0.1"
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/leaflet": "^1.9.14",
@@ -41,7 +42,7 @@
     "eslint": "^8",
     "eslint-config-next": "15.0.2",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5"
   }
 }

frontend/src/app/Loading.tsx

@@ -1,25 +1,24 @@
-import React from "react";
-
-const Loading = () => {
-  return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-50">
-      <div className="relative w-32 h-32 animate-pulse">
-        {/* AirQo Logo Shape */}
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="w-28 h-28 bg-blue-600 rounded-full flex items-center justify-center">
-            <div className="w-24 h-24 bg-blue-600 rounded-t-full rounded-b-lg rounded-l-lg rounded-r-full flex items-center justify-center">
-              <span className="text-white font-bold text-2xl">airqo</span>
-            </div>
-          </div>
-        </div>
-
-        {/* Ripple Effect */}
-        <div className="absolute inset-0">
-          <div className="w-full h-full bg-blue-500/20 rounded-full animate-ping"></div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Loading;
+const Loading = () => {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-50">
+      <div className="relative w-32 h-32 animate-pulse">
+        {/* AirQo Logo Shape */}
+        <div className="absolute inset-0 flex items-center justify-center">
+          <div className="w-28 h-28 bg-blue-600 rounded-full flex items-center justify-center">
+            <div className="w-24 h-24 bg-blue-600 rounded-t-full rounded-b-lg rounded-l-lg rounded-r-full flex items-center justify-center">
+              <span className="text-white font-bold text-2xl">airqo</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Ripple Effect */}
+        <div className="absolute inset-0">
+          <div className="w-full h-full bg-blue-500/20 rounded-full animate-ping"></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Loading
+

frontend/src/app/about/page.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Suspense } from "react" 
+import { Suspense } from "react"
 import { FeatureCard } from "@/components/feature-card"
 import { Users, HeartHandshake, Ruler, Share2, Mail, Phone, MapPin, Twitter, Linkedin } from "lucide-react"
 import Navigation from "@/components/navigation/navigation"
@@ -12,9 +12,9 @@ function AboutContent() {
 
       <div className="mb-12 text-justify">
         <p className="text-lg mb-4">
-          AirQo is a pioneering initiative dedicated to improving air quality monitoring and management across Africa. 
+          AirQo is a pioneering initiative dedicated to improving air quality monitoring and management across Africa.
           <strong>
-             Our mission is to efficiently collect, analyze and forecast air quality data to international standards and
+            Our mission is to efficiently collect, analyze and forecast air quality data to international standards and
             work with partners to reduce air pollution and raise awareness of its effects in African cities.
           </strong>
         </p>
@@ -26,7 +26,7 @@ function AboutContent() {
       </div>
 
       <h2 className="text-3xl font-semibold mb-6 text-center">Our Core Values</h2>
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
         <FeatureCard
           title="Citizen Focus"
           description="At AirQo, we believe that the main beneficiary of our work should be the citizen."
@@ -63,7 +63,7 @@ function AboutContent() {
       <div className="bg-blue-50 p-8 rounded-lg mb-12">
         <h2 className="text-3xl font-semibold mb-6 text-center">Get in Touch</h2>
         <p className="text-center text-gray-600 mb-8">
-        We&apos;d love to hear from you! Reach out with questions, feedback, or collaboration ideas.
+          We&apos;d love to hear from you! Reach out with questions, feedback, or collaboration ideas.
         </p>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
           {/* Contact Information */}
@@ -133,11 +133,10 @@ function AboutContent() {
     </div>
   )
 }
-
 
 export default function AboutPage() {
   return (
-    <div> 
+    <div>
       <Suspense fallback={<div>Loading navigation...</div>}>
         <Navigation />
       </Suspense>