my changes

src/Components/Sections/Departments/Departments.jsx

@@ -0,0 +1,167 @@
+import React, { useRef } from "react";
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  useTransform,
+  useScroll,
+  useVelocity,
+} from "framer-motion";
+import { useNavigate } from "react-router-dom";
+
+// images
+import d1 from "../../../../src/assets/Images/d1.jpeg";
+import d2 from "../../../../src/assets/Images/d2.jpeg";
+import d3 from "../../../../src/assets/Images/d3.jpeg";
+import d4 from "../../../../src/assets/Images/d4.jpeg";
+import d5 from "../../../../src/assets/Images/d5.jpeg";
+import d6 from "../../../../src/assets/Images/d6.jpeg";
+import d7 from "../../../../src/assets/Images/d7.png";
+import d8 from "../../../../src/assets/Images/d8.png";
+import d9 from "../../../../src/assets/Images/d9.png";
+
+// بيانات الأقسام
+const departments = [
+  { id: 1, title: "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج", image: d1 },
+  { id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d2 },
+  { id: 3, title: "قسم اعادة تأهيل وصيانة المباني", image: d3 },
+  { id: 4, title: "قسم محطات الوقود وصيانة المنشآت النفطية", image: d4 },
+  { id: 5, title: "قسم التفتيش والفحص الفني والهندسي", image: d5 },
+  { id: 6, title: "قسم المشاريع الاستراتيجية", image: d6 },
+  { id: 7, title: "قسم الاعمال المعدنية والدعم الصناعي", image: d7 },
+  { id: 8, title: "قسم الخدمات والدعم اللوجستي", image: d8 },
+  { id: 9, title: "قسم الاتمتة والتحكم", image: d9 },
+];
+
+// بطاقة القسم
+function DepartmentCard({ dept, offset }) {
+  const navigate = useNavigate();
+  const wrapperRef = useRef(null);
+
+  // mouse tilt
+  const rotateX = useMotionValue(0);
+  const rotateY = useMotionValue(0);
+  const scale = useMotionValue(1);
+
+  const rx = useSpring(rotateX, { stiffness: 180, damping: 22 });
+  const ry = useSpring(rotateY, { stiffness: 180, damping: 22 });
+  const s = useSpring(scale, { stiffness: 180, damping: 24 });
+
+  const titleZ = useTransform(s, [1, 1.05], [0, 36]);
+
+  const onMove = (e) => {
+    if (!wrapperRef.current) return;
+    const rect = wrapperRef.current.getBoundingClientRect();
+    const x = (e.clientX - rect.left - rect.width / 2) / rect.width;
+    const y = (e.clientY - rect.top - rect.height / 2) / rect.height;
+
+    rotateY.set(-x * 28);
+    rotateX.set(y * 12);
+    scale.set(1.05);
+  };
+
+  const onLeave = () => {
+    rotateX.set(0);
+    rotateY.set(0);
+    scale.set(1);
+  };
+
+  // scroll parallax
+  const { scrollY, scrollYProgress } = useScroll({ target: wrapperRef });
+  const velocity = useVelocity(scrollY);
+  const smoothVelocity = useSpring(velocity, {
+    stiffness: 600,
+    damping: 90,
+  });
+
+  const velocityParallax = useTransform(
+    smoothVelocity,
+    [-3000, 0, 3000],
+    [-45, 0, 45]
+  );
+
+  const progressParallax = useTransform(
+    scrollYProgress,
+    [0, 1],
+    [15, -15]
+  );
+
+  const y = useTransform(
+    [velocityParallax, progressParallax],
+    ([v, p]) => v + p
+  );
+
+  return (
+    <div
+      ref={wrapperRef}
+      onMouseMove={onMove}
+      onMouseLeave={onLeave}
+      style={{ perspective: 1400 }}
+      className={`relative w-full ${offset}`}
+    >
+      {/* العنوان */}
+      <div className="absolute bottom-6 right-[-32px] z-40 pointer-events-none max-w-xs">
+        <motion.span
+          style={{ translateZ: titleZ }}
+          className="block text-2xl md:text-3xl font-extrabold leading-snug
+                     text-white drop-shadow-lg
+                     bg-gradient-to-tr from-black/60 via-black/30 to-transparent
+                     px-3 py-1 rounded-lg"
+        >
+          {dept.title}
+        </motion.span>
+      </div>
+
+      {/* الصورة */}
+      <motion.img
+        src={dept.image}
+        alt={dept.title}
+        draggable={false}
+        onClick={() => navigate(`/departments/${dept.id}`)}
+        style={{
+          rotateX: rx,
+          rotateY: ry,
+          scale: s,
+          y,
+          transformStyle: "preserve-3d",
+          boxShadow:
+            "0 18px 50px rgba(2,6,23,0.12), 0 6px 18px rgba(2,6,23,0.06)",
+        }}
+        className="cursor-pointer w-full h-96 object-cover rounded-2xl"
+      />
+    </div>
+  );
+}
+
+export default function Departments() {
+  return (
+    <section className="min-h-screen bg-white text-black" dir="rtl">
+      <header className="max-w-6xl mx-auto px-6 pt-12">
+        <h1 className="text-4xl font-extrabold">أقسامنا</h1>
+      </header>
+
+      <main className="max-w-6xl mx-auto px-6 py-20">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-48">
+          {departments.map((dept, index) => (
+            <motion.div
+              key={dept.id}
+              initial={{ opacity: 0, y: 24 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: false, amount: 0.25 }}
+              transition={{
+                duration: 0.7,
+                ease: "easeOut",
+                delay: index * 0.06,
+              }}
+            >
+              <DepartmentCard
+                dept={dept}
+                offset={index % 2 === 0 ? "" : "md:translate-y-16"}
+              />
+            </motion.div>
+          ))}
+        </div>
+      </main>
+    </section>
+  );
+}