my changes

src/Components/Sections/AnimatedRoutes/AnimatedRoutes.jsx

@@ -0,0 +1,22 @@
+// AnimatedRoutes.jsx
+import React from "react";
+import { Routes, Route, useLocation } from "react-router-dom";
+import { AnimatePresence, LayoutGroup } from "framer-motion";
+import Departments from "./Departments";
+import DepartmentDetail from "./DepartmentDetail";
+
+export default function AnimatedRoutes() {
+  const location = useLocation();
+
+  return (
+    <LayoutGroup>
+      <AnimatePresence mode="wait">
+        {/* key مهم حتى يعمل خروج/دخول الصفحة مع الانتقال */}
+        <Routes location={location} key={location.pathname}>
+          <Route path="/" element={<Departments />} />
+          <Route path="/departments/1" element={<DepartmentDetail />} />
+        </Routes>
+      </AnimatePresence>
+    </LayoutGroup>
+  );
+}