From 258a92fdfc9d4f8c27723988ec85dc97053b7911 Mon Sep 17 00:00:00 2001
From: karim1safan <iibdae.almubtadi@gmail.com>
Date: Sun, 17 May 2026 18:36:40 +0300
Subject: [PATCH] feat: add scroll-to-top button functionality in Landing
 component

---
 .../src/pages/public/Landing.jsx              | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/RestroHub-FrontEnd/src/pages/public/Landing.jsx b/RestroHub-FrontEnd/src/pages/public/Landing.jsx
index cbbaedb..127291b 100644
--- a/RestroHub-FrontEnd/src/pages/public/Landing.jsx
+++ b/RestroHub-FrontEnd/src/pages/public/Landing.jsx
@@ -18,11 +18,29 @@ import {
   CheckCircle2,
   UserPlus,
   ShoppingCart,
-  Sparkles
+  Sparkles,
+  ArrowUp
 } from 'lucide-react';
 
 const Landing = () => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  // show scroll top 
+  const [showScrollTop, setShowScrollTop] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setShowScrollTop(window.scrollY > 400);
+    window.addEventListener('scroll', onScroll);
+    onScroll();
+
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+
   const { isDark, toggle } = useTheme();
   // ============================
   // DATA
@@ -212,6 +230,20 @@ const plans = [
   return (
     <div className="min-h-screen bg-white dark:bg-slate-900 dark:text-slate-100">
 
+
+      {/* adding scroll-up */}
+      
+      {showScrollTop && (
+        <button
+          type="button"
+          onClick={scrollToTop}
+          aria-label="Scroll to top"
+          className="fixed bottom-6 right-6 z-50 inline-flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-white shadow-lg shadow-blue-300/40 transition-all hover:-translate-y-1 hover:bg-blue-700"
+        >
+          <ArrowUp className="h-5 w-5" />
+        </button>
+      )}
+
       {/* ================================================ */}
       {/* NAVBAR                                           */}
       {/* ================================================ */}