Add global page loader with spinner and smooth UX delay

next_webapp/src/app/[locale]/loading.tsx

@@ -0,0 +1,25 @@
+"use client";
+import { useEffect, useState } from "react";
+
+export default function Loading() {
+  const [show, setShow] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShow(false);
+    }, 1000); // change time 
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!show) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-white">
+      <div className="flex flex-col items-center gap-4">
+        <div className="h-12 w-12 animate-spin rounded-full border-4 border-green-200 border-t-green-600"></div>
+        <p className="text-sm font-semibold text-green-600">Loading...</p>
+      </div>
+    </div>
+  );
+}

next_webapp/src/app/[locale]/page.tsx

@@ -8,6 +8,7 @@ import PartnersSection from "@/components/PartnersSection";
 import TestimonialsSection from "@/components/TestimonialsSection";
 import CityMetricCard from "@/components/CityMetricCard";
 import Insights from "@/components/Insights";
+import BackToTopButton from "@/components/BackToTopButton";
 
 const Home = () => {
   return (
@@ -21,6 +22,7 @@ const Home = () => {
       <SocialMediaFeed />
       <BackToTopButton />
       <Chatbot />
+      <BackToTopButton />
       <Footer />
 
     </div>

next_webapp/src/app/chatbot/chatbot.css

@@ -18,7 +18,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #4CAF50; 
+    color: rgb(76, 175, 80); 
 }
 
 .textarea1 {
@@ -29,7 +29,7 @@
     font-weight: inherit; 
     line-height: inherit; 
     letter-spacing: inherit; 
-    color: green; 
+    color: rgb(0, 128, 0); 
     margin: 0; 
     padding: 8px; 
     width: 100%;