Add animated Back-to-Top button

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

@@ -3,6 +3,7 @@ import Footer from "../../components/Footer";
 import Dashboard from "../../components/Dashboard";
 import Chatbot from "../chatbot/chatbot";
 import SocialMediaFeed from "@/components/SocialMediaFeed";
+import BackToTopButton from "@/components/BackToTopButton";
 import PartnersSection from "@/components/PartnersSection";
 import TestimonialsSection from "@/components/TestimonialsSection";
 import CityMetricCard from "@/components/CityMetricCard";
@@ -18,6 +19,7 @@ const Home = () => {
       <TestimonialsSection />
       <PartnersSection />
       <SocialMediaFeed />
+      <BackToTopButton />
       <Chatbot />
       <Footer />
 

next_webapp/src/components/BackToTopButton.jsx

@@ -0,0 +1,43 @@
+"use client";
+import { useEffect, useState } from "react";
+import { IoChevronUp } from "react-icons/io5";
+
+export default function BackToTopButton() {
+  const [visible, setVisible] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+
+    const toggleVisibility = () => {
+      setVisible(window.scrollY > 300);
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+    toggleVisibility();
+
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <button
+      onClick={() =>
+        window.scrollTo({
+          top: 0,
+          behavior: "smooth",
+        })
+      }
+      aria-label="Back to top"
+      title="Back to top"
+      className={`fixed right-4 bottom-24 z-[9998] text-3xl text-white bg-green-600 rounded-full p-3 shadow-lg hover:bg-green-700 transition-all duration-300 ease-in-out ${
+        visible
+          ? "opacity-100 translate-y-0 pointer-events-auto"
+          : "opacity-0 translate-y-3 pointer-events-none"
+      }`}
+    >
+      <IoChevronUp />
+    </button>
+  );
+}