+
+
+
+
+ );
+}
+
+const defaultProjects = [
+ {
+ year: "1999-2015",
+ items: [
+ "تنفيذ محطات معالجة المياه الصناعية لمعامل صهر ودرفلة الحديد الوهيب - العربية - الدولية - حديد للصهر - حديد (1999-2015).",
+ ],
+ },
+ {
+ year: "2009",
+ items: [
+ "محطة تحويل 66/20 ك.ف لأعمال درفلة الحديد الوهيب - العربية (2009).",
+ ],
+ },
+ {
+ year: "2015",
+ items: [
+ "الإشراف على تنفيذ محطة التحويل 230/66 و66/20 ك.ف لمعامل صهر ودرفلة الحديد (2015).",
+ ],
+ },
+ {
+ year: "2018",
+ items: [
+ "تجهيز وتنفيذ شبكات مياه الشرب لـ22 قرية ريف اللاذقية الشمالي - 73 كم (2018).",
+ ],
+ },
+ {
+ year: "2019",
+ items: [
+ "أعمال الصيانة وإعادة التأهيل منشأة الفوسفات مرفأ طرطوس (2019).",
+ ],
+ },
+ {
+ year: "2021",
+ items: [
+ "دراسة مشروع إعادة تأهيل منجم الملح الصخري في دير الزور (2021).",
+ ],
+ },
+ {
+ year: "2022",
+ items: [
+ "دراسة وتنفيذ محطة الضخ والتصفية لسد 16 تشرين (اللاذقية) (2022).",
+ ],
+ },
+ {
+ year: "2023",
+ items: [
+ "دراسة وتنفيذ مجموعة الطاقة الشمسية 3.6 ميغا لمطحنة غرين كوست (2023).",
+ ],
+ },
+];
+
+export default function DepartmentDetail6() {
+ const [active, setActive] = useState(null);
+
+ const cycleImgs = [d28, d27, d29];
+ const [cycleIndex, setCycleIndex] = useState(0);
+ useEffect(() => {
+ const t = setInterval(() => setCycleIndex((i) => (i + 1) % cycleImgs.length), 3000);
+ return () => clearInterval(t);
+ }, []);
+
+ const buttons = [
+ { id: 1, title: "خدمات القسم", key: "expertise" },
+ { id: 3, title: "الاعمال المنفذه", key: "works", img: d30 },
+ ];
+
+ const cardGroups = [
+ {
+ title: "1- محطات المعالجة وتصفية المياه",
+ items: [
+ "تنفيذ محطات تصفية ومعالجة وضخ المياه الصالحة للشرب والاستخدام.",
+ "تنفيذ محطات معالجة المياه الصناعية وفق المتطلبات الفنية والتشغيلية.",
+ "الإشراف على التشغيل التجريبي ورفع كفاءة الأداء التشغيلي للمحطات.",
+ "الالتزام بالمعايير البيئية ومعايير الجودة والسلامة المهنية المعتمدة.",
+ ],
+ },
+ {
+ title: "2- محطات الطاقة الكهروضوئية",
+ items: [
+ "دراسة وتصميم وتنفيذ مشاريع الطاقة البديلة (الكهروضوئية / الريحية).",
+ "تنفيذ المحطات الكهروضوئية وأنظمة الطاقة الشمسية.",
+ "تصميم وتنفيذ منظومات الكهرباء والتحكم والمحولات الكهربائية.",
+ "ربط أنظمة الطاقة الكهربائية مع أنظمة الطاقة البديلة.",
+ "الإشراف على التشغيل والصيانة الدورية للمنظومات الطاقية.",
+ ],
+ },
+ {
+ title: "3- منشآت الفوسفات",
+ items: [
+ "إعادة تأهيل خطوط تفريغ وتعبئة الفوسفات من مرحلة تفريغ القطارات وحتى تحميل الفوسفت على البواخر.",
+ "تنفيذ أعمال الصيانة الميكانيكية والكهربائية والتحكم وأعمال اللحام والمعالجة المعدنية لمنظومات التفريغ والنقل والتعبئة.",
+ "فحص وتقييم الحالة الفنية للمعدات والمنشآت، وإعادة ضبط المنظومات التشغيلية ورفع الجاهزية والكفاءة التشغيلية.",
+ "تطبيق متطلبات السلامة خلال أعمال التنفيذ والتشغيل.",
+ ],
+ },
+ ];
+
+ const heroImage = active === "expertise" ? cycleImgs[cycleIndex] : active === "works" ? d30 : d19;
+
+ const handleButtonClick = (key) => {
+ setActive((prev) => (prev === key ? null : key));
+ };
+
+ return (
+
+ {!plain && (
+
+
+ )}
+
+
+ + {mainTitle} +
+{subtitle}
+
+
+
+
+
+
+
+ {projects.map((project, idx) => (
+
+ scrollToItem(idx)}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
+ }}
+ >
+
+ ))}
+ {project.year}
+
+
+ -
+ {project.items.map((it, i) => (
+
- • {it} + ))} +
+
+
+
+
+
+
+
+
+
+ {!active ? (
+
+ setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
+
+ العودة للقائمة الرئيسية
+
+
+
+ ) : (
+
+ setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
+
+ العودة للقائمة الرئيسية
+
+
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx b/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
new file mode 100644
index 0000000..43fbad3
--- /dev/null
+++ b/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
@@ -0,0 +1,555 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import d20 from "../../../../src/assets/Images/d20.jpeg";
+import d31 from "../../../../src/assets/Images/d31.jpeg";
+import d32 from "../../../../src/assets/Images/d32.jpeg";
+
+function ProjectsTimeline({
+ projects,
+ mainTitle = "المشاريع المنفذة",
+ subtitle = "خط زمني شامل للأعمال والإنجازات",
+ plain = false,
+}) {
+ const wrapperRef = useRef(null);
+ const scrollRef = useRef(null);
+ const svgRef = useRef(null);
+ const [itemsRefs, setItemsRefs] = useState([]);
+ const [currentIndex, setCurrentIndex] = useState(0);
+
+ useEffect(() => {
+ setItemsRefs((r) => {
+ const arr = Array(projects.length).fill().map((_, i) => r[i] || React.createRef());
+ return arr;
+ });
+ }, [projects.length]);
+
+ const drawCurvedLines = useCallback(() => {
+ const svgEl = svgRef.current;
+ const wrapper = wrapperRef.current;
+ if (!svgEl || !wrapper) return;
+
+ while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
+ svgEl.setAttribute("width", wrapper.scrollWidth);
+ svgEl.setAttribute("height", wrapper.offsetHeight);
+
+ if (!itemsRefs || itemsRefs.length < 2) return;
+
+ const svgNS = "http://www.w3.org/2000/svg";
+ const defs = document.createElementNS(svgNS, "defs");
+ const gradient = document.createElementNS(svgNS, "linearGradient");
+ gradient.setAttribute("id", "timeline-gradient");
+ gradient.setAttribute("x1", "0%");
+ gradient.setAttribute("y1", "0%");
+ gradient.setAttribute("x2", "100%");
+ gradient.setAttribute("y2", "0%");
+
+ const stop1 = document.createElementNS(svgNS, "stop");
+ stop1.setAttribute("offset", "0%");
+ stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
+
+ const stop2 = document.createElementNS(svgNS, "stop");
+ stop2.setAttribute("offset", "50%");
+ stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
+
+ const stop3 = document.createElementNS(svgNS, "stop");
+ stop3.setAttribute("offset", "100%");
+ stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
+
+ gradient.appendChild(stop1);
+ gradient.appendChild(stop2);
+ gradient.appendChild(stop3);
+ defs.appendChild(gradient);
+ svgEl.appendChild(defs);
+
+ for (let i = 0; i < itemsRefs.length - 1; i++) {
+ const item1 = itemsRefs[i].current;
+ const item2 = itemsRefs[i + 1].current;
+ if (!item1 || !item2) continue;
+
+ const circle1 = item1.querySelector(".year-circle");
+ const circle2 = item2.querySelector(".year-circle");
+ if (!circle1 || !circle2) continue;
+
+ const rect1 = circle1.getBoundingClientRect();
+ const rect2 = circle2.getBoundingClientRect();
+ const wrapperRect = wrapper.getBoundingClientRect();
+
+ const x1 = rect1.left - wrapperRect.left + rect1.width / 2;
+ const y1 = rect1.top - wrapperRect.top + rect1.height / 2;
+ const x2 = rect2.left - wrapperRect.left + rect2.width / 2;
+ const y2 = rect2.top - wrapperRect.top + rect2.height / 2;
+
+ const controlPointOffset = Math.abs(x2 - x1) * 0.4;
+ const cx1 = x1 - controlPointOffset;
+ const cy1 = y1 - 40;
+ const cx2 = x2 + controlPointOffset;
+ const cy2 = y2 - 40;
+
+ const path = document.createElementNS(svgNS, "path");
+ const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
+ path.setAttribute("d", d);
+ path.setAttribute("stroke", "url(#timeline-gradient)");
+ path.setAttribute("stroke-width", "4");
+ path.setAttribute("fill", "none");
+ path.setAttribute("stroke-linecap", "round");
+ path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
+ svgEl.appendChild(path);
+ }
+ }, [itemsRefs]);
+
+ const setActiveItem = useCallback(
+ (index) => {
+ setCurrentIndex(index);
+ itemsRefs.forEach((ref, i) => {
+ const el = ref.current;
+ if (!el) return;
+ if (i === index) el.classList.add("active");
+ else el.classList.remove("active");
+ });
+ },
+ [itemsRefs]
+ );
+
+ const scrollToItem = useCallback(
+ (index) => {
+ if (index < 0 || index >= itemsRefs.length) return;
+ const scrollContainer = scrollRef.current;
+ const item = itemsRefs[index].current;
+ if (!scrollContainer || !item) return;
+
+ const itemRect = item.getBoundingClientRect();
+ const containerRect = scrollContainer.getBoundingClientRect();
+ const scrollLeft = scrollContainer.scrollLeft;
+
+ const targetScroll =
+ scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
+
+ scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
+ setActiveItem(index);
+ },
+ [itemsRefs, setActiveItem]
+ );
+
+ const onPrev = () => {
+ if (currentIndex > 0) scrollToItem(currentIndex - 1);
+ };
+ const onNext = () => {
+ if (currentIndex < itemsRefs.length - 1) scrollToItem(currentIndex + 1);
+ };
+
+ useEffect(() => {
+ const t = setTimeout(() => {
+ drawCurvedLines();
+ setActiveItem(0);
+ }, 100);
+
+ const scrollContainer = scrollRef.current;
+ let scrollTimeout = null;
+
+ const onScroll = () => {
+ clearTimeout(scrollTimeout);
+ scrollTimeout = setTimeout(() => {
+ const containerRect = scrollContainer.getBoundingClientRect();
+ const containerCenter = containerRect.left + containerRect.width / 2;
+
+ let closestIndex = 0;
+ let closestDistance = Infinity;
+
+ itemsRefs.forEach((ref, index) => {
+ const el = ref.current;
+ if (!el) return;
+ const itemRect = el.getBoundingClientRect();
+ const itemCenter = itemRect.left + itemRect.width / 2;
+ const distance = Math.abs(containerCenter - itemCenter);
+ if (distance < closestDistance) {
+ closestDistance = distance;
+ closestIndex = index;
+ }
+ });
+
+ if (closestIndex !== currentIndex) {
+ setActiveItem(closestIndex);
+ }
+ }, 150);
+ };
+
+ if (scrollContainer) scrollContainer.addEventListener("scroll", onScroll);
+ const onResize = () => setTimeout(drawCurvedLines, 120);
+ window.addEventListener("resize", onResize);
+
+ return () => {
+ clearTimeout(t);
+ if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
+ window.removeEventListener("resize", onResize);
+ };
+ }, [itemsRefs, drawCurvedLines, setActiveItem]);
+
+ useEffect(() => {
+ setTimeout(() => drawCurvedLines(), 120);
+ }, [itemsRefs, drawCurvedLines, projects.length]);
+
+ const css = `
+ :root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
+ .projects-timeline-root { direction: rtl; min-height: 100%; }
+ .timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
+ .timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
+ .timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
+ .svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
+ .timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
+ .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
+ background-clip: padding-box;
+ }
+ .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
+ .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
+ .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
+ @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
+ .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
+ .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
+ .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
+ .timeline-item.active .project-card::before { opacity:1; }
+ .project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
+ .project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
+ .timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
+ .scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
+ .scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
+ .scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
+ .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
+ .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
+ @media (max-width:768px){
+ .timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
+ .timeline-item { margin:0 18px; }
+ .year-circle { width:90px; height:90px; font-size:15px; }
+ .timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
+ .project-card { min-width:260px; max-width:300px; padding:20px; }
+ .project-text { font-size:13px; }
+ .scroll-btn { width:48px; height:48px; font-size:20px; }
+ }
+
+ .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
+ .projects-timeline-root.plain-bleed .project-card { max-width:420px; }
+ `;
+
+ const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
+
+ return (
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ {active === "expertise" ? (
+
+
+ ) : active === "works" ? (
+
+
+ ) : (
+
+
+ )}
+
+
+ خدمات القسم
+ خدمات القسم
+الاطّلاع على البطاقات أدناه للحصول على تفاصيل كل خدمة.
+الاعمال المنفذة
+ الاعمال المنفذة
+عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.
+قسم المشاريع الاستراتيجية
+
+
+ {!active && (
+
+
+ )}
+
+
+
+
+ {buttons.map((b, index) => (
+ handleButtonClick(b.key)}
+ className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm"
+ >
+
+
+
+
+ ))}
+
+
+
+
+
+
+ {b.id}
+
+ {b.title}
++ انقر للاطّلاع على التفاصيل + +
+
+
+
+
+
+
+ {cardGroups.map((group, gIndex) => (
+
+
+
+
+ ))}
+ {group.title}
+
+ {group.items.map((text, idx) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {text}
+
+
+
+
+
+ خدمات احترافية متكاملة
+
+
+
+
+
+
+
+ );
+}
+
+const defaultProjects = [
+ {
+ year: "1999-2009",
+ items: [
+ "المنشآت المعدنية لمعامل درفلة الحديد: معامل الوهيب - العربية - الدولية",
+ "أعمال تصنيع وإمداد هياكل ومكونات خطوط درفلة وحدات الحديد",
+ ],
+ },
+ {
+ year: "2015",
+ items: [
+ "تنفيذ الأعمال المعدنية لمشروع إنشاء مصنع الأسمنت المتحدة",
+ ],
+ },
+ {
+ year: "2021",
+ items: [
+ "تصنيع وتنفيذ هياكل معدنية وروافع جسرية وخزانات مياه صناعية",
+ ],
+ },
+ {
+ year: "2022",
+ items: [
+ "تنفيذ هنغارات معدنية وإسمنتية عالية التحصين",
+ ],
+ },
+];
+
+export default function DepartmentDetail7() {
+ const [active, setActive] = useState(null);
+
+ const buttons = [
+ { id: 1, title: "اختصاص القسم", key: "expertise" },
+ { id: 2, title: "الاعمال المنفذة", key: "works" },
+ ];
+
+ // أيقونات متناسبة مع كل بطاقة — مأخوذة من الكود السابق
+ const expertiseItems = [
+ {
+ icon: (
+
+ ),
+ text: "تصميم وتصنيع وتنفيذ الهياكل المعدنية."
+ },
+ {
+ icon: (
+
+ ),
+ text: "تنفيذ الأعمال المعدنية للمصانع والمنشآت الصناعية."
+ },
+ {
+ icon: (
+
+ ),
+ text: "تصنيع وتركيب الروافع الجسرية المتحركة والثابتة."
+ },
+ {
+ icon: (
+
+ ),
+ text: "تصنيع خزانات المياه الصناعية وخزانات الفايبر."
+ },
+ {
+ icon: (
+
+ ),
+ text: "تقديم حلول دعم صناعي متكاملة للمشاريع الكبرى."
+ },
+ ];
+
+ const handleButtonClick = (key) => {
+ setActive((prev) => (prev === key ? null : key));
+ };
+
+ const heroImage = active === "expertise" ? d31 : active === "works" ? d32 : d20;
+
+ return (
+
+ {!plain && (
+
+
+ )}
+
+
+ + {mainTitle} +
+{subtitle}
+
+
+
+
+
+
+
+ {projects.map((project, idx) => (
+
+ scrollToItem(idx)}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
+ }}
+ >
+
+ ))}
+ {project.year}
+
+
+ -
+ {project.items.map((it, i) => (
+
- • {it} + ))} +
+
+
+
+
+
+
+
+
+
+ {!active ? (
+
+ setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
+
+ العودة للقائمة الرئيسية
+
+
+
+ ) : (
+
+ setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
+
+ العودة للقائمة الرئيسية
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx b/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
new file mode 100644
index 0000000..ae33193
--- /dev/null
+++ b/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
@@ -0,0 +1,563 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import d21 from "../../../../src/assets/Images/d21.jpeg";
+import d34 from "../../../../src/assets/Images/d34.jpg";
+import d33 from "../../../../src/assets/Images/d33.png";
+
+function ProjectsTimeline({
+ projects,
+ mainTitle = "المشاريع المنفذة",
+ subtitle = "خط زمني شامل للأعمال والإنجازات",
+ plain = false,
+}) {
+ const wrapperRef = useRef(null);
+ const scrollRef = useRef(null);
+ const svgRef = useRef(null);
+ const [itemsRefs, setItemsRefs] = useState([]);
+ const [currentIndex, setCurrentIndex] = useState(0);
+
+ useEffect(() => {
+ setItemsRefs((r) => {
+ const arr = Array(projects.length).fill().map((_, i) => r[i] || React.createRef());
+ return arr;
+ });
+ }, [projects.length]);
+
+ const drawCurvedLines = useCallback(() => {
+ const svgEl = svgRef.current;
+ const wrapper = wrapperRef.current;
+ if (!svgEl || !wrapper) return;
+
+ while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
+ svgEl.setAttribute("width", wrapper.scrollWidth);
+ svgEl.setAttribute("height", wrapper.offsetHeight);
+
+ if (!itemsRefs || itemsRefs.length < 2) return;
+
+ const svgNS = "http://www.w3.org/2000/svg";
+ const defs = document.createElementNS(svgNS, "defs");
+ const gradient = document.createElementNS(svgNS, "linearGradient");
+ gradient.setAttribute("id", "timeline-gradient");
+ gradient.setAttribute("x1", "0%");
+ gradient.setAttribute("y1", "0%");
+ gradient.setAttribute("x2", "100%");
+ gradient.setAttribute("y2", "0%");
+
+ const stop1 = document.createElementNS(svgNS, "stop");
+ stop1.setAttribute("offset", "0%");
+ stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
+
+ const stop2 = document.createElementNS(svgNS, "stop");
+ stop2.setAttribute("offset", "50%");
+ stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
+
+ const stop3 = document.createElementNS(svgNS, "stop");
+ stop3.setAttribute("offset", "100%");
+ stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
+
+ gradient.appendChild(stop1);
+ gradient.appendChild(stop2);
+ gradient.appendChild(stop3);
+ defs.appendChild(gradient);
+ svgEl.appendChild(defs);
+
+ for (let i = 0; i < itemsRefs.length - 1; i++) {
+ const item1 = itemsRefs[i].current;
+ const item2 = itemsRefs[i + 1].current;
+ if (!item1 || !item2) continue;
+
+ const circle1 = item1.querySelector(".year-circle");
+ const circle2 = item2.querySelector(".year-circle");
+ if (!circle1 || !circle2) continue;
+
+ const rect1 = circle1.getBoundingClientRect();
+ const rect2 = circle2.getBoundingClientRect();
+ const wrapperRect = wrapper.getBoundingClientRect();
+
+ const x1 = rect1.left - wrapperRect.left + rect1.width / 2;
+ const y1 = rect1.top - wrapperRect.top + rect1.height / 2;
+ const x2 = rect2.left - wrapperRect.left + rect2.width / 2;
+ const y2 = rect2.top - wrapperRect.top + rect2.height / 2;
+
+ const controlPointOffset = Math.abs(x2 - x1) * 0.4;
+ const cx1 = x1 - controlPointOffset;
+ const cy1 = y1 - 40;
+ const cx2 = x2 + controlPointOffset;
+ const cy2 = y2 - 40;
+
+ const path = document.createElementNS(svgNS, "path");
+ const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
+ path.setAttribute("d", d);
+ path.setAttribute("stroke", "url(#timeline-gradient)");
+ path.setAttribute("stroke-width", "4");
+ path.setAttribute("fill", "none");
+ path.setAttribute("stroke-linecap", "round");
+ path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
+ svgEl.appendChild(path);
+ }
+ }, [itemsRefs]);
+
+ const setActiveItem = useCallback(
+ (index) => {
+ setCurrentIndex(index);
+ itemsRefs.forEach((ref, i) => {
+ const el = ref.current;
+ if (!el) return;
+ if (i === index) el.classList.add("active");
+ else el.classList.remove("active");
+ });
+ },
+ [itemsRefs]
+ );
+
+ const scrollToItem = useCallback(
+ (index) => {
+ if (index < 0 || index >= itemsRefs.length) return;
+ const scrollContainer = scrollRef.current;
+ const item = itemsRefs[index].current;
+ if (!scrollContainer || !item) return;
+
+ const itemRect = item.getBoundingClientRect();
+ const containerRect = scrollContainer.getBoundingClientRect();
+ const scrollLeft = scrollContainer.scrollLeft;
+
+ const targetScroll =
+ scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
+
+ scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
+ setActiveItem(index);
+ },
+ [itemsRefs, setActiveItem]
+ );
+
+ const onPrev = () => {
+ if (currentIndex > 0) scrollToItem(currentIndex - 1);
+ };
+ const onNext = () => {
+ if (currentIndex < itemsRefs.length - 1) scrollToItem(currentIndex + 1);
+ };
+
+ useEffect(() => {
+ const t = setTimeout(() => {
+ drawCurvedLines();
+ setActiveItem(0);
+ }, 100);
+
+ const scrollContainer = scrollRef.current;
+ let scrollTimeout = null;
+
+ const onScroll = () => {
+ clearTimeout(scrollTimeout);
+ scrollTimeout = setTimeout(() => {
+ const containerRect = scrollContainer.getBoundingClientRect();
+ const containerCenter = containerRect.left + containerRect.width / 2;
+
+ let closestIndex = 0;
+ let closestDistance = Infinity;
+
+ itemsRefs.forEach((ref, index) => {
+ const el = ref.current;
+ if (!el) return;
+ const itemRect = el.getBoundingClientRect();
+ const itemCenter = itemRect.left + itemRect.width / 2;
+ const distance = Math.abs(containerCenter - itemCenter);
+ if (distance < closestDistance) {
+ closestDistance = distance;
+ closestIndex = index;
+ }
+ });
+
+ if (closestIndex !== currentIndex) {
+ setActiveItem(closestIndex);
+ }
+ }, 150);
+ };
+
+ if (scrollContainer) scrollContainer.addEventListener("scroll", onScroll);
+ const onResize = () => setTimeout(drawCurvedLines, 120);
+ window.addEventListener("resize", onResize);
+
+ return () => {
+ clearTimeout(t);
+ if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
+ window.removeEventListener("resize", onResize);
+ };
+ }, [itemsRefs, drawCurvedLines, setActiveItem]);
+
+ useEffect(() => {
+ setTimeout(() => drawCurvedLines(), 120);
+ }, [itemsRefs, drawCurvedLines, projects.length]);
+
+ const css = `
+ :root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
+ .projects-timeline-root { direction: rtl; min-height: 100%; }
+ .timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
+ .timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
+ .timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
+ .svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
+ .timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
+ .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
+ background-clip: padding-box;
+ }
+ .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
+ .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
+ .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
+ @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
+ .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
+ .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
+ .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
+ .timeline-item.active .project-card::before { opacity:1; }
+ .project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
+ .project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
+ .timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
+ .scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
+ .scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
+ .scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
+ .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
+ .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
+ @media (max-width:768px){
+ .timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
+ .timeline-item { margin:0 18px; }
+ .year-circle { width:90px; height:90px; font-size:15px; }
+ .timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
+ .project-card { min-width:260px; max-width:300px; padding:20px; }
+ .project-text { font-size:13px; }
+ .scroll-btn { width:48px; height:48px; font-size:20px; }
+ }
+
+ .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
+ .projects-timeline-root.plain-bleed .project-card { max-width:420px; }
+ `;
+
+ const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {active === "expertise" ? (
+
+
+ ) : active === "works" ? (
+
+
+ ) : (
+
+
+ )}
+
+
+ اختصاص القسم
+ قسم الاعمال المعدنية والدعم الصناعي
++ يختص هذا القسم بتنفيذ وتصنيع الأعمال المعدنية والداعمة للمشاريع الصناعية والخدمية، ويشمل: +
+الأعمال المنفذة
+ الأعمال المنفذة
+عرض لمشروعاتنا وأمثلة على الأعمال المعدنية المنفذة عبر السنين.
+قسم الاعمال المعدنية والدعم الصناعي
+
+
+ {!active && (
+
+
+ )}
+
+
+
+
+ {buttons.map((b, index) => (
+ handleButtonClick(b.key)}
+ className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm"
+ >
+
+
+
+ ))}
+
+
+
+
+
+
+ {b.id}
+
+ {b.title}
++ انقر للاطّلاع على التفاصيل + +
+
+
+
+
+
+
+ {expertiseItems.map((item, idx) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ {item.icon}
+
+
+
+
+
+
+
+ {item.text}
+
+
+ للمزيد من الأمثلة راجع قسم "الأعمال المنفذة".
+
+
+
+
+
+
+
+ );
+}
+
+const defaultProjects = [
+ {
+ year: "2009-2024",
+ items: [
+ "تأمين وتجهيز مواد ومعدات لمشاريع صناعية",
+ ],
+ },
+ {
+ year: "2024",
+ items: [
+ "تجهيز المستودعات والمباني الإدارية بالمفروشات والتجهيزات والأنظمة اللازمة",
+ ],
+ },
+ {
+ year: "2024",
+ items: [
+ "إدارة لوجستية لمشاريع متعددة المواقع",
+ ],
+ },
+ {
+ year: "2023",
+ items: [
+ "الدراسات الهندسية والفنية وتنفيذ سكن الإيواء لمتضرري الزلزال: 1000 شقة سكنية مسبق الصنع",
+ ],
+ },
+];
+
+export default function DepartmentDetail8() {
+ const [active, setActive] = useState(null);
+
+ const buttons = [
+ { id: 1, title: "اختصاص القسم", key: "expertise" },
+ { id: 2, title: "الاعمال المنفذة", key: "works" },
+ ];
+
+ const expertiseItems = [
+ {
+ icon: (
+
+ ),
+ text: "تأمين الخدمات اللوجستية من مركبات النقل والإقامة المتنقلة والثابتة للموظفين والخبراء وفق المتطلبات."
+ },
+ {
+ icon: (
+
+ ),
+ text: "إدارة سلاسل التوريد."
+ },
+ {
+ icon: (
+
+ ),
+ text: "توريد المعدات والمواد الأولية."
+ },
+ {
+ icon: (
+
+ ),
+ text: "التنسيق مع الموردين والمصنعين."
+ },
+ {
+ icon: (
+ // warehouse
+
+ ),
+ text: "إدارة المخازن والمستودعات."
+ },
+ {
+ icon: (
+ // gears / operations support
+
+ ),
+ text: "دعم العمليات التشغيلية للمشاريع الصناعية والنفطية والهندسية."
+ },
+ ];
+
+ const handleButtonClick = (key) => {
+ setActive((prev) => (prev === key ? null : key));
+ };
+
+ const heroImage = active === "expertise" ? d34 : active === "works" ? d33 : d21;
+
+ return (
+
+ {!plain && (
+
+
+ )}
+
+
+ + {mainTitle} +
+{subtitle}
+
+
+
+
+
+
+
+ {projects.map((project, idx) => (
+
+ scrollToItem(idx)}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
+ }}
+ >
+
+ ))}
+ {project.year}
+
+
+ -
+ {project.items.map((it, i) => (
+
- • {it} + ))} +
+
+
+
+
+
+
+
+
+
+ {!active ? (
+
+ setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
+
+ العودة للقائمة الرئيسية
+
+
+
+ ) : (
+
+ setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 sm:mb-8 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 mr-0 md:-mr-4">
+
+ العودة للقائمة الرئيسية
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx b/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx
new file mode 100644
index 0000000..048cde7
--- /dev/null
+++ b/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx
@@ -0,0 +1,549 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import d22 from "../../../../src/assets/Images/d22.jpg";
+import d35 from "../../../../src/assets/Images/d35.jpeg";
+import d36 from "../../../../src/assets/Images/d36.jpg";
+
+function ProjectsTimeline({
+ projects,
+ mainTitle = "المشاريع المنفذة",
+ subtitle = "خط زمني شامل للأعمال والإنجازات",
+ plain = false,
+}) {
+ const wrapperRef = useRef(null);
+ const scrollRef = useRef(null);
+ const svgRef = useRef(null);
+ const [itemsRefs, setItemsRefs] = useState([]);
+ const [currentIndex, setCurrentIndex] = useState(0);
+
+ useEffect(() => {
+ setItemsRefs((r) => {
+ const arr = Array(projects.length).fill().map((_, i) => r[i] || React.createRef());
+ return arr;
+ });
+ }, [projects.length]);
+
+ const drawCurvedLines = useCallback(() => {
+ const svgEl = svgRef.current;
+ const wrapper = wrapperRef.current;
+ if (!svgEl || !wrapper) return;
+
+ while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
+ svgEl.setAttribute("width", wrapper.scrollWidth);
+ svgEl.setAttribute("height", wrapper.offsetHeight);
+
+ if (!itemsRefs || itemsRefs.length < 2) return;
+
+ const svgNS = "http://www.w3.org/2000/svg";
+ const defs = document.createElementNS(svgNS, "defs");
+ const gradient = document.createElementNS(svgNS, "linearGradient");
+ gradient.setAttribute("id", "timeline-gradient");
+ gradient.setAttribute("x1", "0%");
+ gradient.setAttribute("y1", "0%");
+ gradient.setAttribute("x2", "100%");
+ gradient.setAttribute("y2", "0%");
+
+ const stop1 = document.createElementNS(svgNS, "stop");
+ stop1.setAttribute("offset", "0%");
+ stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
+
+ const stop2 = document.createElementNS(svgNS, "stop");
+ stop2.setAttribute("offset", "50%");
+ stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
+
+ const stop3 = document.createElementNS(svgNS, "stop");
+ stop3.setAttribute("offset", "100%");
+ stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
+
+ gradient.appendChild(stop1);
+ gradient.appendChild(stop2);
+ gradient.appendChild(stop3);
+ defs.appendChild(gradient);
+ svgEl.appendChild(defs);
+
+ for (let i = 0; i < itemsRefs.length - 1; i++) {
+ const item1 = itemsRefs[i].current;
+ const item2 = itemsRefs[i + 1].current;
+ if (!item1 || !item2) continue;
+
+ const circle1 = item1.querySelector(".year-circle");
+ const circle2 = item2.querySelector(".year-circle");
+ if (!circle1 || !circle2) continue;
+
+ const rect1 = circle1.getBoundingClientRect();
+ const rect2 = circle2.getBoundingClientRect();
+ const wrapperRect = wrapper.getBoundingClientRect();
+
+ const x1 = rect1.left - wrapperRect.left + rect1.width / 2;
+ const y1 = rect1.top - wrapperRect.top + rect1.height / 2;
+ const x2 = rect2.left - wrapperRect.left + rect2.width / 2;
+ const y2 = rect2.top - wrapperRect.top + rect2.height / 2;
+
+ const controlPointOffset = Math.abs(x2 - x1) * 0.4;
+ const cx1 = x1 - controlPointOffset;
+ const cy1 = y1 - 40;
+ const cx2 = x2 + controlPointOffset;
+ const cy2 = y2 - 40;
+
+ const path = document.createElementNS(svgNS, "path");
+ const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
+ path.setAttribute("d", d);
+ path.setAttribute("stroke", "url(#timeline-gradient)");
+ path.setAttribute("stroke-width", "4");
+ path.setAttribute("fill", "none");
+ path.setAttribute("stroke-linecap", "round");
+ path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
+ svgEl.appendChild(path);
+ }
+ }, [itemsRefs]);
+
+ const setActiveItem = useCallback(
+ (index) => {
+ setCurrentIndex(index);
+ itemsRefs.forEach((ref, i) => {
+ const el = ref.current;
+ if (!el) return;
+ if (i === index) el.classList.add("active");
+ else el.classList.remove("active");
+ });
+ },
+ [itemsRefs]
+ );
+
+ const scrollToItem = useCallback(
+ (index) => {
+ if (index < 0 || index >= itemsRefs.length) return;
+ const scrollContainer = scrollRef.current;
+ const item = itemsRefs[index].current;
+ if (!scrollContainer || !item) return;
+
+ const itemRect = item.getBoundingClientRect();
+ const containerRect = scrollContainer.getBoundingClientRect();
+ const scrollLeft = scrollContainer.scrollLeft;
+
+ const targetScroll =
+ scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
+
+ scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
+ setActiveItem(index);
+ },
+ [itemsRefs, setActiveItem]
+ );
+
+ const onPrev = () => {
+ if (currentIndex > 0) scrollToItem(currentIndex - 1);
+ };
+ const onNext = () => {
+ if (currentIndex < itemsRefs.length - 1) scrollToItem(currentIndex + 1);
+ };
+
+ useEffect(() => {
+ const t = setTimeout(() => {
+ drawCurvedLines();
+ setActiveItem(0);
+ }, 100);
+
+ const scrollContainer = scrollRef.current;
+ let scrollTimeout = null;
+
+ const onScroll = () => {
+ clearTimeout(scrollTimeout);
+ scrollTimeout = setTimeout(() => {
+ const containerRect = scrollContainer.getBoundingClientRect();
+ const containerCenter = containerRect.left + containerRect.width / 2;
+
+ let closestIndex = 0;
+ let closestDistance = Infinity;
+
+ itemsRefs.forEach((ref, index) => {
+ const el = ref.current;
+ if (!el) return;
+ const itemRect = el.getBoundingClientRect();
+ const itemCenter = itemRect.left + itemRect.width / 2;
+ const distance = Math.abs(containerCenter - itemCenter);
+ if (distance < closestDistance) {
+ closestDistance = distance;
+ closestIndex = index;
+ }
+ });
+
+ if (closestIndex !== currentIndex) {
+ setActiveItem(closestIndex);
+ }
+ }, 150);
+ };
+
+ if (scrollContainer) scrollContainer.addEventListener("scroll", onScroll);
+ const onResize = () => setTimeout(drawCurvedLines, 120);
+ window.addEventListener("resize", onResize);
+
+ return () => {
+ clearTimeout(t);
+ if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
+ window.removeEventListener("resize", onResize);
+ };
+ }, [itemsRefs, drawCurvedLines, setActiveItem]);
+
+ useEffect(() => {
+ setTimeout(() => drawCurvedLines(), 120);
+ }, [itemsRefs, drawCurvedLines, projects.length]);
+
+ const css = `
+ :root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
+ .projects-timeline-root { direction: rtl; min-height: 100%; }
+ .timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
+ .timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
+ .timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
+ .svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
+ .timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
+ .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
+ background-clip: padding-box;
+ }
+ .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
+ .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
+ .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
+ @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
+ .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
+ .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
+ .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
+ .timeline-item.active .project-card::before { opacity:1; }
+ .project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
+ .project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
+ .timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
+ .scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
+ .scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
+ .scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
+ .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
+ .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
+ @media (max-width:768px){
+ .timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
+ .timeline-item { margin:0 18px; }
+ .year-circle { width:90px; height:90px; font-size:15px; }
+ .timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
+ .project-card { min-width:260px; max-width:300px; padding:20px; }
+ .project-text { font-size:13px; }
+ .scroll-btn { width:48px; height:48px; font-size:20px; }
+ }
+
+ .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
+ .projects-timeline-root.plain-bleed .project-card { max-width:420px; }
+ `;
+
+ const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {active === "expertise" ? (
+
+
+ ) : active === "works" ? (
+
+
+ ) : (
+
+
+ )}
+
+
+ اختصاص القسم
+ قسم الخدمات والدعم اللوجستي
++ يوفر هذا القسم الدعم اللوجستي اللازم للشركات الهندسية والصناعية والتجارية خلال فترة انطلاقتها ولتنفيذ وإدارة المشاريع بكفاءة، ويشمل: +
+الأعمال المنفذة
+ الأعمال المنفذة
+عرض لمشروعاتنا وأمثلة على الأعمال اللوجستية المنفذة.
+قسم الخدمات والدعم اللوجستي
+
+
+ {!active && (
+
+
+ )}
+
+
+
+
+ {buttons.map((b, index) => (
+ handleButtonClick(b.key)}
+ className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm"
+ >
+
+
+
+ ))}
+
+
+
+
+
+
+ {b.id}
+
+ {b.title}
++ انقر للاطّلاع على التفاصيل + +
+
+
+
+
+
+
+ {expertiseItems.map((item, idx) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ {item.icon}
+
+
+
+
+
+
+
+ {item.text}
+
+
+ لمزيد من الأمثلة راجع قسم "الأعمال المنفذة".
+
+
+
+
+
+
+
+ );
+}
+
+const defaultProjects = [
+ {
+ year: "1999-2015",
+ items: [
+ "أتمتة منظومات التحكم و التشغيل لمعاهد صهر ودرفلة الحديد (الوهيب - العربية - الدولية).",
+ ],
+ },
+ {
+ year: "2023",
+ items: [
+ "أتمتة التحكم بالتجهيزات الصناعية وخطوط الإنتاج للفحص والمعايرة والتشغيل عبر تابلت.",
+ ],
+ },
+ {
+ year: "2023-2024",
+ items: [
+ "إنشاء وتطوير نظام FMS منصب في مستودعات وقود استراتيجية (جارٍ التشغيل حالياً).",
+ ],
+ },
+ {
+ year: "2024",
+ items: [
+ "أتمتة منظومات التحكم و التشغيل لخطوط الإنتاج (أمثلة: ألانام لإنتاج البكتيريا العضوية - الساروت لإنتاج الأدوية البيطرية).",
+ "إنشاء أنظمة ERP لشركات (PEA - REXOS).",
+ ],
+ },
+];
+
+export default function DepartmentDetail9() {
+ const [active, setActive] = useState(null);
+
+ const buttons = [
+ { id: 1, title: "اختصاص القسم", key: "expertise" },
+ { id: 2, title: "الاعمال المنفذة", key: "works" },
+ ];
+
+ const expertiseItems = [
+ {
+ icon: (
+ // control panel / PLC-like
+
+ ),
+ text: "تصميم وتنفيذ أنظمة التحكم الصناعية."
+ },
+ {
+ icon: (
+ // automation line
+
+ ),
+ text: "أتمتة خطوط الإنتاج والمنشآت وأنظمة المراقبة التشغيلية مع توريد التجهيزات اللازمة."
+ },
+ {
+ icon: (
+ // SCADA/monitor
+
+ ),
+ text: "أنظمة SCADA و PLC."
+ },
+ {
+ icon: (
+ // fuel management / station icon
+
+ ),
+ text: "تطوير وتنفيذ أنظمة إدارة محطات الوقود (FMS)."
+ },
+ {
+ icon: (
+ // integration / link
+
+ ),
+ text: "ربط الأنظمة التشغيلية بالحلول البرمجية."
+ },
+ {
+ icon: (
+ // analytics / predict
+
+ ),
+ text: "تحليل الأعطال والتنبؤ بالمشاكل قبل حدوثها، ورفع كفاءة التشغيل وتقليل الفاقد والتكاليف."
+ },
+ ];
+
+ const handleButtonClick = (key) => {
+ setActive((prev) => (prev === key ? null : key));
+ };
+
+ const heroImage = active === "expertise" ? d35 : active === "works" ? d36 : d22;
+
+ return (
+
+ {!plain && (
+
+
+ )}
+
+
+ + {mainTitle} +
+{subtitle}
+
+
+
+
+
+
+
+ {projects.map((project, idx) => (
+
+ scrollToItem(idx)}
+ role="button"
+ tabIndex={0}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
+ }}
+ >
+
+ ))}
+ {project.year}
+
+
+ -
+ {project.items.map((it, i) => (
+
- • {it} + ))} +
+
+
+
+
+
+
+
+
+
+ {!active ? (
+
+ setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2">
+
+ العودة للقائمة الرئيسية
+
+
+
+ ) : (
+
+ setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2">
+
+ العودة للقائمة الرئيسية
+
+
+
+ )}
+
+
+
+ );
+}
diff --git a/src/Components/Sections/Departments/Departments.jsx b/src/Components/Sections/Departments/Departments.jsx
index 44b97e4..c74bfd8 100644
--- a/src/Components/Sections/Departments/Departments.jsx
+++ b/src/Components/Sections/Departments/Departments.jsx
@@ -80,6 +80,22 @@ function DepartmentCard({ dept, offset }) {
const y = useTransform([velocityParallax, progressParallax], ([v, p]) => v + p);
const handleClick = () => {
+ if (dept.id === 1) {
+ navigate("/departments/:id");
+ }
+ if (dept.id === 9) {
+ navigate("/department-detail9");
+ }
+ if (dept.id === 8) {
+ navigate("/department-detail8");
+ }
+ if (dept.id === 7) {
+ navigate("/department-detail7");
+ }
+ if (dept.id === 6) {
+ navigate("/department-detail6");
+ }
+
if (dept.id === 5) {
navigate("/department-detail5");
}
diff --git a/src/assets/Images/d27.jpeg b/src/assets/Images/d27.jpeg
new file mode 100644
index 0000000..0244c22
Binary files /dev/null and b/src/assets/Images/d27.jpeg differ
diff --git a/src/assets/Images/d28.jpeg b/src/assets/Images/d28.jpeg
new file mode 100644
index 0000000..1337c41
Binary files /dev/null and b/src/assets/Images/d28.jpeg differ
diff --git a/src/assets/Images/d29.jpeg b/src/assets/Images/d29.jpeg
new file mode 100644
index 0000000..aa4aac1
Binary files /dev/null and b/src/assets/Images/d29.jpeg differ
diff --git a/src/assets/Images/d30.png b/src/assets/Images/d30.png
new file mode 100644
index 0000000..67732a5
Binary files /dev/null and b/src/assets/Images/d30.png differ
diff --git a/src/assets/Images/d31.jpeg b/src/assets/Images/d31.jpeg
new file mode 100644
index 0000000..a737b1f
Binary files /dev/null and b/src/assets/Images/d31.jpeg differ
diff --git a/src/assets/Images/d32.jpeg b/src/assets/Images/d32.jpeg
new file mode 100644
index 0000000..333854e
Binary files /dev/null and b/src/assets/Images/d32.jpeg differ
diff --git a/src/assets/Images/d33.png b/src/assets/Images/d33.png
new file mode 100644
index 0000000..bed574d
Binary files /dev/null and b/src/assets/Images/d33.png differ
diff --git a/src/assets/Images/d34.jpg b/src/assets/Images/d34.jpg
new file mode 100644
index 0000000..7302b70
Binary files /dev/null and b/src/assets/Images/d34.jpg differ
diff --git a/src/assets/Images/d35.jpeg b/src/assets/Images/d35.jpeg
new file mode 100644
index 0000000..67b8750
Binary files /dev/null and b/src/assets/Images/d35.jpeg differ
diff --git a/src/assets/Images/d36.jpg b/src/assets/Images/d36.jpg
new file mode 100644
index 0000000..e0cc751
Binary files /dev/null and b/src/assets/Images/d36.jpg differ
+
+
+
+
+
+
+
+
+
+
+
+
+ {active === "expertise" ? (
+
+
+ ) : active === "works" ? (
+
+
+ ) : (
+
+
+ )}
+
+
+ اختصاص القسم
+ قسم الأتمتة والتحكم
++ يختص هذا القسم بتقديم حلول الأتمتة والتحكم والتحول الرقمي لجميع المنشآت الصناعية والهندسية وخطوط الإنتاج، ويشمل: +
+الأعمال المنفذة
+ الأعمال المنفذة
+أمثلة على أنظمة أتمتة وتحكم ونظم رقمية نفذناها للعملاء.
+قسم الأتمتة والتحكم
+
+
+ {!active && (
+
+
+ )}
+
+
+
+
+ {buttons.map((b, i) => (
+ handleButtonClick(b.key)}
+ whileHover={{ scale: 1.03, y: -6 }}
+ className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm"
+ >
+
+
+ ))}
+
+
+
+
+
+
+ {b.id}
+
+ {b.title}
++ انقر للاطّلاع على التفاصيل + +
+
+
+
+
+
+
+ {expertiseItems.map((item, idx) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ {item.icon}
+
+
+
+
+
+
+
+ {item.text}
+
+
+ للاطلاع على المزيد من الأعمال راجع "الأعمال المنفذة".
+
+
+