Rahaf/REXNT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nav+ departments+ home

Browse Source
This commit is contained in:
Beilin
2026-01-09 20:12:38 +03:00
parent 22840a6ba2
commit eec832ac17
33 changed files with 2814 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/Components/Sections/Departments/Departments.jsx
View File

@ -11,34 +11,35 @@ 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";
import d7 from "../../../../src/assets/Images/d7.jpeg";
import d14 from "../../../../src/assets/Images/d14.jpg";
import d17 from "../../../../src/assets/Images/d17.png";
import d18 from "../../../../src/assets/Images/d18.jpg";
import d19 from "../../../../src/assets/Images/d19.jpeg";
import d20 from "../../../../src/assets/Images/d20.jpeg";
import d21 from "../../../../src/assets/Images/d21.jpeg";
import d22 from "../../../../src/assets/Images/d22.jpg";
// بيانات الأقسام
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 },
{ id: 2, title: "قسم تنفيذ المرافق السكنية والخدمية", image: d7 },
{ id: 3, title: "قسم اعادة تأهيل وصيانة المباني", image: d14 },
{ id: 4, title: "قسم محطات الوقود وصيانة المنشآت النفطية", image: d17 },
{ id: 5, title: "قسم التفتيش والفحص الفني والهندسي", image: d18 },
{ id: 6, title: "قسم المشاريع الاستراتيجية", image: d19 },
{ id: 7, title: "قسم الاعمال المعدنية والدعم الصناعي", image: d20 },
{ id: 8, title: "قسم الخدمات والدعم اللوجستي", image: d21 },
{ id: 9, title: "قسم الاتمتة والتحكم", image: d22 },
];
// بطاقة القسم
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);
@ -66,7 +67,6 @@ function DepartmentCard({ dept, offset }) {
scale.set(1);
};
// scroll parallax
const { scrollY, scrollYProgress } = useScroll({ target: wrapperRef });
const velocity = useVelocity(scrollY);
const smoothVelocity = useSpring(velocity, {
@ -91,6 +91,14 @@ function DepartmentCard({ dept, offset }) {
([v, p]) => v + p
);
const handleClick = () => {
if (dept.id === 2) {
navigate("/department-detail2");
} else {
navigate(`/departments/${dept.id}`);
}
};
return (
<div
ref={wrapperRef}
@ -99,7 +107,6 @@ function DepartmentCard({ dept, offset }) {
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 }}
@ -112,12 +119,11 @@ function DepartmentCard({ dept, offset }) {
</motion.span>
</div>
{/* الصورة */}
<motion.img
src={dept.image}
alt={dept.title}
draggable={false}
onClick={() => navigate(`/departments/${dept.id}`)}
onClick={handleClick}
style={{
rotateX: rx,
rotateY: ry,