my changes

src/App.jsx

@@ -1,32 +1,65 @@
+// App.jsx
 import React from "react";
+import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
+import { AnimatePresence, LayoutGroup } from "framer-motion";
+
 import "./i18n";
+import "./App.css";
+
 import Navbar from "./Components/Nav/Navbar";
 import Home from "./Components/Sections/Home/Home";
 import Services from "./Components/Sections/Services/Services";
 import About from "./Components/Sections/About/About";
+import Departments from "./Components/Sections/Departments/Departments";
+import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentDetail"; // صفحة التفاصيل (مقدّمة سابقاً)
 import Contact from "./Components/Sections/Contact/Contact";
-import ImagePreloader from "./Components/ImagePreloader";
+// import ImagePreloader from "./Components/ImagePreloader";
 import Footer from "./Components/Nav/Footer";
-import "./App.css";
 
-const App = () => {
 
+
+const MainPage = () => {
   return (
-    <ImagePreloader>
       <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
         <div className="flex flex-col min-h-screen">
           <Navbar />
           <main className="flex-grow">
             <Home />
+
             <Services />
             <About />
+            <Departments />
             <Contact />
           </main>
           <Footer />
         </div>
       </div>
-    </ImagePreloader>
   );
 };
 
-export default App;
+// Router view (نستخدم useLocation مع AnimatePresence لعمل انتقالات سلسة بين المسارات)
+function RouterView() {
+  const location = useLocation();
+
+  return (
+    <LayoutGroup>
+      <AnimatePresence mode="wait">
+        <Routes location={location} key={location.pathname}>
+          <Route path="/" element={<MainPage />} />
+          <Route path="/departments/1" element={<DepartmentDetail />} />
+          {/* أضف مسارات إضافية هنا إذا احتجت */}
+        </Routes>
+      </AnimatePresence>
+    </LayoutGroup>
+  );
+}
+
+const App = () => {
+  return (
+    <BrowserRouter>
+      <RouterView />
+    </BrowserRouter>
+  );
+};
+
+export default App;