feat: implement MainLayout with secret admin redirect and create DashboardLayout for admin portal navigation

Author: TusharSaini999

Frontend/package-lock.json

@@ -13,21 +13,19 @@
   "dependencies": {
     "@marsidev/react-turnstile": "^1.5.3",
     "@reduxjs/toolkit": "^2.12.0",
-    "@tailwindcss/vite": "^4.3.0",
     "@tinymce/tinymce-react": "^6.3.0",
     "axios": "^1.18.1",
-    "framer-motion": "^12.39.0",
     "lucide-react": "^1.25.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.81.0",
     "react-redux": "^9.3.0",
     "react-router-dom": "^7.15.1",
-    "react-scroll": "^1.9.3",
     "tinymce": "^8.7.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.3.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",

Frontend/package.json

@@ -3,7 +3,6 @@ import { Outlet, useNavigate, useLocation } from "react-router-dom";
 import Navbar from "./Navbar";
 import Footer from "./Footer"; // Import the new component
 import contentData from "../data/content.json";
-import { AnimatePresence, motion } from "framer-motion";
 
 const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 
@@ -33,20 +32,10 @@ const MainLayout = () => {
     <div className="app-shell flex flex-col min-h-screen">
       <Navbar layout={layout} />
 
-
       <Suspense fallback={<div className="flex h-[60vh] items-center justify-center"><div className="animate-spin h-8 w-8 border-4 border-accent border-t-transparent rounded-full"></div></div>}>
-        <AnimatePresence mode="popLayout" initial={false}>
-          <motion.main
-            key={location.pathname}
-            initial={{ opacity: 0, y: 15 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -15 }}
-            transition={{ duration: 0.25, ease: "easeOut" }}
-            className="w-full mx-auto flex-1 border-x border-border bg-bg-soft"
-          >
-            <Outlet />
-          </motion.main>
-        </AnimatePresence>
+        <main className="w-full mx-auto flex-1 border-x border-border bg-bg-soft">
+          <Outlet />
+        </main>
       </Suspense>
 
       <Footer layout={layout} onFooterClick={handleFooterClick} />

Frontend/src/layout/MainLayout.jsx

@@ -29,9 +29,14 @@ export default function DashboardLayout() {
   const location = useLocation();
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
-  // Close sidebar on route change (mobile)
+  const contentRef = React.useRef(null);
+
+  // Close sidebar and reset scroll to top on route change
   useEffect(() => {
     setIsSidebarOpen(false);
+    if (contentRef.current) {
+      contentRef.current.scrollTop = 0;
+    }
   }, [location.pathname]);
 
   const navItems = [
@@ -142,7 +147,7 @@ export default function DashboardLayout() {
           </div>
         </header>
 
-        <div className="relative z-10 flex-1 overflow-y-auto">
+        <div ref={contentRef} className="relative z-10 flex-1 overflow-y-auto">
           <Outlet />
         </div>
       </main>

Frontend/src/pages/admin/DashboardLayout.jsx

@@ -12,7 +12,6 @@ export default defineConfig({
       "react",
       "react-dom",
       "react-router-dom",
-      "framer-motion",
       "lucide-react",
       "@reduxjs/toolkit",
       "react-redux",