+ {/* left: spacer (removed TPS image as requested) */}
+
- {/* الجانب الأيمن */}
-
+ {/* center: 3D nav card */}
+
+
+
+
+ {navItems.map((item) => (
+ -
+ setActiveSection(item.key)}
+ onClick={() => {
+ setActiveSection(item.key);
+ setMenuOpen(false);
+ }}
+ className={`nav-item relative inline-flex items-center text-base md:text-lg font-semibold px-6 py-3 rounded-full transition-all duration-300 focus:outline-none select-none
+ ${
+ activeSection === item.key
+ ? "text-yellow-500"
+ : "text-gray-800 dark:text-white"
+ }
+ `}
+ role="link"
+ aria-current={activeSection === item.key ? "page" : undefined}
+ >
+ {/* glow layer */}
+
+
+ {item.label}
+
+
+ ))}
+
+
+
+
+
+ {/* right: controls (dark mode, language toggle, mobile) */}
+
+ onClick={toggleDarkMode}
+ type="button"
+ className="inline-flex items-center p-2 w-11 h-11 justify-center text-sm text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200"
+ aria-label={isDarkMode ? "Light Mode" : "Dark Mode"}
+ title={isDarkMode ? "Light Mode" : "Dark Mode"}
+ >
+ {isDarkMode ? (
+
+ ) : (
+
+ )}
+
- {/* Language Switcher */}
-
+ {/* Language toggle (only EN / AR) with a globe + letters icon */}
+
- {/* زر القائمة للجوال */}
-
+ {/* mobile menu toggle */}
+
+
- {/* روابط الأقسام */}
-
+
+ {/* inline CSS for 3D / hover visual polish */}
+
);
};
diff --git a/src/Components/Sections/AnimatedRoutes/AnimatedRoutes.jsx b/src/Components/Sections/AnimatedRoutes/AnimatedRoutes.jsx
new file mode 100644
index 0000000..c0eb669
--- /dev/null
+++ b/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 (
+
+
+ {/* key مهم حتى يعمل خروج/دخول الصفحة مع الانتقال */}
+
+ } />
+ } />
+
+
+
+ );
+}
diff --git a/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx b/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
new file mode 100644
index 0000000..694f1ff
--- /dev/null
+++ b/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
@@ -0,0 +1,641 @@
+// DepartmentDetail.jsx
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+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";
+
+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:#ea580c;stop-opacity:1");
+
+ const stop2 = document.createElementNS(svgNS, "stop");
+ stop2.setAttribute("offset", "50%");
+ stop2.setAttribute("style", "stop-color:#dc2626;stop-opacity:1");
+
+ const stop3 = document.createElementNS(svgNS, "stop");
+ stop3.setAttribute("offset", "100%");
+ stop3.setAttribute("style", "stop-color:#b91c1c;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(251, 191, 36, 0.3))";
+ 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:#0f172a;--bg-mid:#1e293b;--bg-end:#334155}
+ .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: thin; scrollbar-color: rgba(0,0,0,.2) transparent; }
+ .timeline-scroll::-webkit-scrollbar{ height:10px;}
+ .timeline-scroll::-webkit-scrollbar-track{ background: transparent; border-radius:10px; margin:0 8px;}
+ .timeline-scroll::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); border-radius:10px; border:2px solid transparent; background-clip:padding-box;}
+ .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,#dc2626 0%,#b91c1c 50%,#991b1b 100%); color:white; box-shadow:0 8px 25px rgba(220,38,38,.4); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:5px solid rgba(255,255,255,.25); position:relative; z-index:2; backdrop-filter: blur(10px); }
+ .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(220,38,38,.3); 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 15px 50px rgba(220,38,38,.5); border-color: rgba(255,255,255,.5); transform: translateY(-15px) scale(1.05); animation: glow 2s ease-in-out infinite; }
+ .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
+ @keyframes glow { 0%,100%{ filter: brightness(1);} 50%{ filter: brightness(1.15);} }
+ @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.3); opacity:0;} }
+ .project-card { margin-top:40px; background: #ffffff; border-radius:20px; padding:28px; min-width:320px; max-width:380px; box-shadow:0 8px 30px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04); opacity:.6; transform: scale(.92) translateY(10px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(251,191,36,.1); position:relative; overflow:hidden;}
+ .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left,#dc2626,#b91c1c,#991b1b); opacity:0; transition:opacity .6s ease;}
+ .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 20px 60px rgba(0,0,0,.12),0 5px 15px rgba(0,0,0,.06),0 0 0 1px rgba(220,38,38,.15); border-color: rgba(220,38,38,.25); }
+ .timeline-item.active .project-card::before { opacity:1; }
+ .project-text { font-size:15px; line-height:2; color:#1f2937; font-weight:500; }
+ .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(220,38,38,.08); 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,.95) 0%, rgba(255,255,255,.85) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:#dc2626; box-shadow:0 6px 20px rgba(0,0,0,.15); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(10px); }
+ .scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fee2e2 100%); transform: scale(1.15); box-shadow:0 10px 35px rgba(220,38,38,.25); }
+ .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%, #475569 100%)" };
+
+ return (
+
+
+
+
+ {!plain && (
+
+
+ {mainTitle}
+
+ {subtitle}
+
+ )}
+
+
+
+
+ );
+}
+
+const defaultProjects = [
+ {
+ year: "1999-2015",
+ items: [
+ "دراسة وتصميم وتنفيذ خطوط السور والدرفلة (الوهيب)",
+ "العربية للدرفلة",
+ "العولية للدرفلة",
+ "معهد الإدارة العليا للسور والدرفلة",
+ ],
+ },
+ { year: "2001", items: ["أعمال تشغيل وصيانة الدورة لمعمل الوهيب ستوك إير"] },
+ { year: "2002", items: ["أعمال تشغيل وصيانة الدورة لمعمل العربية لدرفلة إير"] },
+ { year: "2004", items: ["أعمال متنوعة في مجال الدرفلة والتصنيع"] },
+ {
+ year: "2016",
+ items: [
+ "دراسة وتصميم وتنفيذ خطوط السور والدرفلة (الأنام)",
+ "أي أم، التايتيك - التروت، تصميم وتنفيذ",
+ ],
+ },
+ { year: "2016-2017", items: ["التدريب العالمي 600 طن/يوم", "التدريب للصناعات الغذائية"] },
+ { year: "2017", items: ["دراسة تأهيلية معمل الشمس (العسافي - حمص)"] },
+ {
+ year: "2019",
+ items: [
+ "إعادة تأهيل وصيانة مقومات تحميل وصيانة الستوك في مرفأ طرطوس",
+ "دراسة تأهيلية للصم وقياس الشمس (طرطوس - حمص)",
+ ],
+ },
+ { year: "2020", items: ["استكمال دراسة تأهيلية للصم وقياس الشمس"] },
+ { year: "2021", items: ["منشأ تيسير لمعمل المتحدة، تصميم الاسور - أبو الشامات"] },
+ { year: "2022", items: ["استكمال منشأ تيسير لمعمل المتحدة", "معمل المثنى للتصنيع السريع - طرطوس"] },
+ { year: "2023", items: ["مشاريع متنوعة في مجال التصنيع والدرفلة"] },
+];
+
+export default function DepartmentDetail() {
+ const [active, setActive] = useState(null);
+
+ const buttons = [
+ { id: 1, title: "اختصاص القسم", key: "expertise" },
+ { id: 2, title: "خدمات القسم", key: "services" },
+ { id: 3, title: "الاعمال المنفذة", key: "works" },
+ ];
+
+ const expertiseItems = [
+ {
+ icon: (
+
+ ),
+ text: "دراسات الجدوى الاقتصادية وتحليل الربحية والمخاطر للمشاريع الصناعية والهندسية"
+ },
+ {
+ icon: (
+
+ ),
+ text: "الدراسات الهندسية الأولية والنهائية والتفصيلية"
+ },
+ {
+ icon: (
+
+ ),
+ text: "تصميم المخططات التنفيذية"
+ },
+ {
+ icon: (
+
+ ),
+ text: "تنفيذ الأعمال المدنية والمعمارية والمعدنية للمنشآت الصناعية"
+ },
+ {
+ icon: (
+
+ ),
+ text: "تصنيع وتركيب خطوط الإنتاج محلياً أو خطوط الانتاج المستوردة"
+ },
+ {
+ icon: (
+
+ ),
+ text: "تنفيذ الأعمال الميكانيكية والكهربائية وأنظمة التحكم"
+ },
+ {
+ icon: (
+
+ ),
+ text: "الإشراف على التشغيل التجريبي وتدريب الكوادر الفنية"
+ }
+ ];
+
+ const servicesItems = [
+ {
+ icon: (
+
+ ),
+ text: "الصيانة الدورية والوقائية."
+ },
+ {
+ icon: (
+
+ ),
+ text: "الصيانة الطارئة ومعالجة الأعطال."
+ },
+ {
+ icon: (
+
+ ),
+ text: "إعادة التأهيل والتحديث الفني للمنشآت."
+ },
+ {
+ icon: (
+
+ ),
+ text: "فحص وتقييم الحالة الفنية للتجهيزات والآلات."
+ },
+ {
+ icon: (
+
+ ),
+ text: "أعمال التفتيش الفني والهندسي وفق المعايير العالمية."
+ },
+ {
+ icon: (
+
+ ),
+ text: "رفع كفاءة التشغيل وتقليل تكاليف الأعطال"
+ }
+ ];
+
+ const handleButtonClick = (key) => {
+ setActive((prev) => (prev === key ? null : key));
+ };
+
+ const displayItems = active === "services" ? servicesItems : expertiseItems;
+ const heroImage = active === "expertise" ? d2 : active === "services" ? d3 : active === "works" ? d4 : d1;
+
+ return (
+
+
+
+
+
+ 
+
+
+
+
+
+
+ {active === "expertise" ? (
+
+ اختصاص القسم
+ حلول متكاملة للمنشآت الصناعية
+ يختص هذا القسم بتقديم حلول متكاملة لتنفيذ المنشآت الصناعية وخطوط الانتاج وصيانتها بمختلف أنواعها، ويشمل:
+
+ ) : active === "services" ? (
+
+ خدمات القسم
+ خدمات الصيانة للمنشآت وخطوط الإنتاج
+ يتضمن هذا القسم خدمات الصيانة الشاملة والدورية للمنشآت الصناعية وخطوط الانتاج، وتشمل:
+
+ ) : 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}
+
+
+ انقر للاطّلاع على التفاصيل
+
+
+
+ ))}
+
+
+
+
+
+
+ {!active ? (
+
+ ) : active === "works" ? (
+
+ 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">
+
+ العودة للقائمة الرئيسية
+
+
+
+ {displayItems.map((item, index) => (
+
+
+
+ ))}
+
+
+
خدمات احترافية متكاملة
+
+
+
+ );
+}
diff --git a/src/Components/Sections/Departments/Departments.jsx b/src/Components/Sections/Departments/Departments.jsx
new file mode 100644
index 0000000..c9767d7
--- /dev/null
+++ b/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 (
+
+ {/* العنوان */}
+
+
+ {dept.title}
+
+
+
+ {/* الصورة */}
+
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"
+ />
+
+ );
+}
+
+export default function Departments() {
+ return (
+
+
+
+
+
+ {departments.map((dept, index) => (
+
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/Components/Sections/Home/Home.jsx b/src/Components/Sections/Home/Home.jsx
index 0d10785..09cd481 100644
--- a/src/Components/Sections/Home/Home.jsx
+++ b/src/Components/Sections/Home/Home.jsx
@@ -1,279 +1,265 @@
-import React, { useState, useEffect } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { Element } from "react-scroll";
+import React, { useEffect, useState, useRef } from "react";
+import { Button, Dropdown } from "flowbite-react";
-import { FaWhatsapp, FaPhone, FaEnvelope } from "react-icons/fa";
-import { useTranslation } from "react-i18next";
-import "../../../index.css";
+export default function EngineeringHeroFlowbite() {
+ const defaultConfig = {
+ main_title: "حلول هندسية متكاملة",
+ subtitle: "نصمم ونبني المستقبل بخبرة ودقة واحترافية",
+ primary_color: "#e67e22",
+ background_color: "#000000",
+ text_color: "#ffffff",
+ secondary_surface: "#95a5a6",
+ secondary_action: "#34495e",
+ font_family: "Cairo",
+ font_size: 16,
+ };
-
-const home1 = "https://i.imgur.com/g4fVyLj.jpg";
-const home1Mobile = "https://i.imgur.com/NNeCIAj.jpg";
-
-const home2 = "https://i.imgur.com/d9enpvc.jpg";
-const home2Mobile = "https://i.imgur.com/a85P9Q8.jpg";
-
-const home3 = "https://i.imgur.com/nWTJcjz.jpg";
-
-const home4 = "https://i.imgur.com/btajXYO.jpg";
-const home4Mobile = "https://i.imgur.com/BZnHa4v.jpg";
-
-const home6 = "https://i.imgur.com/gtwlzDA.jpg";
-const home6Mobile = "https://i.imgur.com/xs8OB15.jpg";
-
-const home7 = "https://i.imgur.com/kSErZeJ.jpg";
-const home7Mobile = "https://i.imgur.com/02ftPiK.jpg";
-
-const home8 = "https://i.imgur.com/0gsQF8L.jpg";
-const home8Mobile = "https://i.imgur.com/vey37dG.jpg";
-
-
-const containerVariants = {
- hidden: { opacity: 0 },
- visible: {
- opacity: 1,
- transition: { staggerChildren: 0.3, when: "beforeChildren" },
- },
-};
-
-const itemVariants = {
- hidden: { opacity: 0, y: 20 },
- visible: { opacity: 1, y: 0, transition: { duration: 0.8 } },
-};
-
-const Home = () => {
- const { t } = useTranslation();
- const [currentIndex, setCurrentIndex] = useState(0);
- const [menuOpen, setMenuOpen] = useState(false);
- const [isMobile, setIsMobile] = useState(false);
-
- const phrases = t("home.phrases", { returnObjects: true });
+ const [config, setConfig] = useState(defaultConfig);
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const mainTitleRef = useRef(null);
+ const subtitleRef = useRef(null);
useEffect(() => {
- const updateSize = () => setIsMobile(window.innerWidth < 640);
- updateSize();
- window.addEventListener("resize", updateSize);
- return () => window.removeEventListener("resize", updateSize);
+ const id = "cairo-font-link";
+ if (!document.getElementById(id)) {
+ const link = document.createElement("link");
+ link.id = id;
+ link.rel = "stylesheet";
+ link.href = "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
+ document.head.appendChild(link);
+ }
}, []);
useEffect(() => {
- const interval = setInterval(() => {
- setCurrentIndex((prev) => (prev + 1) % phrases.length);
- }, 4000);
- return () => clearInterval(interval);
- }, [phrases.length]);
+ const main = mainTitleRef.current;
+ const sub = subtitleRef.current;
+ const baseFontStack = "Arial, sans-serif";
+ const font = (config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
+ const baseSize = config.font_size || defaultConfig.font_size;
- const nextPhrase = () => {
- setCurrentIndex((prev) => (prev + 1) % phrases.length);
- };
-
- const prevPhrase = () => {
- setCurrentIndex((prev) => (prev - 1 + phrases.length) % phrases.length);
- };
-
- const getBackgroundImage = () => {
- switch (currentIndex) {
- case 0:
- return isMobile ? home2Mobile : home2;
- case 1:
- return home3;
- case 2:
- return isMobile ? home4Mobile : home4;
- case 3:
- return isMobile ? home6Mobile : home6;
- case 4:
- return isMobile ? home8Mobile : home8;
- case 5:
- return isMobile ? home7Mobile : home7;
- case 6:
- return isMobile ? home1Mobile : home1;
- default:
- return "";
+ if (main) {
+ main.textContent = config.main_title || defaultConfig.main_title;
+ main.style.fontFamily = font;
+ main.style.fontSize = `${baseSize * 4}px`;
+ main.style.color = config.text_color || defaultConfig.text_color;
}
- };
+
+ if (sub) {
+ sub.textContent = config.subtitle || defaultConfig.subtitle;
+ sub.style.fontFamily = font;
+ sub.style.fontSize = `${baseSize * 1.75}px`;
+ sub.style.color = config.text_color || defaultConfig.text_color;
+ }
+
+ const root = document.documentElement;
+ root.style.setProperty("--ehb-primary", config.primary_color || defaultConfig.primary_color);
+ root.style.setProperty("--ehb-background", config.background_color || defaultConfig.background_color);
+ root.style.setProperty("--ehb-surface", config.secondary_surface || defaultConfig.secondary_surface);
+ root.style.setProperty("--ehb-action", config.secondary_action || defaultConfig.secondary_action);
+ }, [config]);
+
+ useEffect(() => {
+ const element = {
+ defaultConfig,
+ onConfigChange: async (newCfg) => {
+ setConfig((c) => ({ ...c, ...newCfg }));
+ },
+ mapToCapabilities: (cfg) => ({
+ recolorables: [
+ {
+ get: () => cfg.background_color || defaultConfig.background_color,
+ set: (value) => {
+ cfg.background_color = value;
+ window?.elementSdk?.setConfig?.({ background_color: value });
+ setConfig({ ...cfg });
+ },
+ },
+ {
+ get: () => cfg.secondary_surface || defaultConfig.secondary_surface,
+ set: (value) => {
+ cfg.secondary_surface = value;
+ window?.elementSdk?.setConfig?.({ secondary_surface: value });
+ setConfig({ ...cfg });
+ },
+ },
+ {
+ get: () => cfg.text_color || defaultConfig.text_color,
+ set: (value) => {
+ cfg.text_color = value;
+ window?.elementSdk?.setConfig?.({ text_color: value });
+ setConfig({ ...cfg });
+ },
+ },
+ {
+ get: () => cfg.primary_color || defaultConfig.primary_color,
+ set: (value) => {
+ cfg.primary_color = value;
+ window?.elementSdk?.setConfig?.({ primary_color: value });
+ setConfig({ ...cfg });
+ },
+ },
+ {
+ get: () => cfg.secondary_action || defaultConfig.secondary_action,
+ set: (value) => {
+ cfg.secondary_action = value;
+ window?.elementSdk?.setConfig?.({ secondary_action: value });
+ setConfig({ ...cfg });
+ },
+ },
+ ],
+ borderables: [],
+ fontEditable: {
+ get: () => cfg.font_family || defaultConfig.font_family,
+ set: (value) => {
+ cfg.font_family = value;
+ window?.elementSdk?.setConfig?.({ font_family: value });
+ setConfig({ ...cfg });
+ },
+ },
+ fontSizeable: {
+ get: () => cfg.font_size || defaultConfig.font_size,
+ set: (value) => {
+ cfg.font_size = value;
+ window?.elementSdk?.setConfig?.({ font_size: value });
+ setConfig({ ...cfg });
+ },
+ },
+ }),
+ mapToEditPanelValues: (cfg) =>
+ new Map([
+ ["main_title", cfg.main_title || defaultConfig.main_title],
+ ["subtitle", cfg.subtitle || defaultConfig.subtitle],
+ ]),
+ };
+
+ if (window?.elementSdk?.init) {
+ try {
+ window.elementSdk.init(element);
+ } catch (e) {}
+ }
+ }, []);
return (
-
-
- {/* الخلفية */}
-
-
+
+
+
+
-
- );
-};
-export default Home;
+
+ {/* removed the previous hero-image background as requested */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {dropdownOpen && (
+
+ )}
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/assets/Images/d1.jpeg b/src/assets/Images/d1.jpeg
new file mode 100644
index 0000000..4e13167
Binary files /dev/null and b/src/assets/Images/d1.jpeg differ
diff --git a/src/assets/Images/d10.png b/src/assets/Images/d10.png
new file mode 100644
index 0000000..41f1fd7
Binary files /dev/null and b/src/assets/Images/d10.png differ
diff --git a/src/assets/Images/d11.png b/src/assets/Images/d11.png
new file mode 100644
index 0000000..0013ef2
Binary files /dev/null and b/src/assets/Images/d11.png differ
diff --git a/src/assets/Images/d2.jpeg b/src/assets/Images/d2.jpeg
new file mode 100644
index 0000000..ca0ce39
Binary files /dev/null and b/src/assets/Images/d2.jpeg differ
diff --git a/src/assets/Images/d3.jpeg b/src/assets/Images/d3.jpeg
new file mode 100644
index 0000000..c864f47
Binary files /dev/null and b/src/assets/Images/d3.jpeg differ
diff --git a/src/assets/Images/d4.jpeg b/src/assets/Images/d4.jpeg
new file mode 100644
index 0000000..8ceba47
Binary files /dev/null and b/src/assets/Images/d4.jpeg differ
diff --git a/src/assets/Images/d5.jpeg b/src/assets/Images/d5.jpeg
new file mode 100644
index 0000000..6da8115
Binary files /dev/null and b/src/assets/Images/d5.jpeg differ
diff --git a/src/assets/Images/d6.jpeg b/src/assets/Images/d6.jpeg
new file mode 100644
index 0000000..ceae380
Binary files /dev/null and b/src/assets/Images/d6.jpeg differ
diff --git a/src/assets/Images/d7.png b/src/assets/Images/d7.png
new file mode 100644
index 0000000..d1c8dad
Binary files /dev/null and b/src/assets/Images/d7.png differ
diff --git a/src/assets/Images/d8.png b/src/assets/Images/d8.png
new file mode 100644
index 0000000..0f5fd2c
Binary files /dev/null and b/src/assets/Images/d8.png differ
diff --git a/src/assets/Images/d9.png b/src/assets/Images/d9.png
new file mode 100644
index 0000000..7abaf7b
Binary files /dev/null and b/src/assets/Images/d9.png differ
diff --git a/src/assets/Images/gasstation.jpg b/src/assets/Images/gasstation.jpg
deleted file mode 100644
index 0e44a51..0000000
Binary files a/src/assets/Images/gasstation.jpg and /dev/null differ
diff --git a/src/assets/LOGO.png b/src/assets/LOGO.png
new file mode 100644
index 0000000..d6ad400
Binary files /dev/null and b/src/assets/LOGO.png differ
diff --git a/src/assets/NSC.png b/src/assets/NSC.png
new file mode 100644
index 0000000..c255ef3
Binary files /dev/null and b/src/assets/NSC.png differ
diff --git a/src/assets/REXNT.png b/src/assets/REXNT.png
new file mode 100644
index 0000000..e44893f
Binary files /dev/null and b/src/assets/REXNT.png differ