From 8f2dc936630d97f2d4e5831e39137b083308c642 Mon Sep 17 00:00:00 2001 From: Beilin Date: Sat, 10 Jan 2026 01:51:30 +0300 Subject: [PATCH] departments --- src/App.jsx | 14 +- src/Components/Nav/Navbar.jsx | 6 +- .../DepartmentDetail3/DepartmentDetail3.jsx | 994 +++++++++--------- .../DepartmentDetail4/DepartmentDetail4.jsx | 587 +++++++++++ .../DepartmentDetail5/DepartmentDetail5.jsx | 608 +++++++++++ .../Sections/Departments/Departments.jsx | 41 +- src/Components/Sections/Home/Home.jsx | 24 +- src/assets/Images/d23.jpg | Bin 0 -> 114564 bytes src/assets/Images/d24.png | Bin 0 -> 663242 bytes src/assets/Images/d25.jpeg | Bin 0 -> 33579 bytes src/assets/Images/d26.jpeg | Bin 0 -> 88843 bytes 11 files changed, 1730 insertions(+), 544 deletions(-) create mode 100644 src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx create mode 100644 src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx create mode 100644 src/assets/Images/d23.jpg create mode 100644 src/assets/Images/d24.png create mode 100644 src/assets/Images/d25.jpeg create mode 100644 src/assets/Images/d26.jpeg diff --git a/src/App.jsx b/src/App.jsx index 13faf51..4651c9e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -106,8 +106,9 @@ import Footer from "./Components/Nav/Footer"; import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2"; import ImagePreloader from "./Components/ImagePreloader"; import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas"; - -// المكون الرئيسي الذي يظهر في الصفحة الرئيسية +import DepartmentDetail3 from "./Components/Sections/DepartmentDetail3/DepartmentDetail3"; +import DepartmentDetail4 from "./Components/Sections/DepartmentDetail4/DepartmentDetail4"; +import DepartmentDetail5 from "./Components/Sections/DepartmentDetail5/DepartmentDetail5"; const MainPage = ({ theme }) => { return (
@@ -145,6 +146,11 @@ function RouterView({ theme, toggleTheme }) { /> } /> } /> + } /> + } /> + } /> + + @@ -157,6 +163,10 @@ function Layout({ theme, toggleTheme }) { const excludedExactPaths = [ "/department-detail2", + "/department-detail3" , + "/department-detail4" , + "/department-detail5" , + ]; const excludedPrefixes = ["/departments/"]; diff --git a/src/Components/Nav/Navbar.jsx b/src/Components/Nav/Navbar.jsx index 2731245..8e79054 100644 --- a/src/Components/Nav/Navbar.jsx +++ b/src/Components/Nav/Navbar.jsx @@ -1219,11 +1219,7 @@ const Navbar = ({ toggleTheme, currentTheme }) => {
{/* Logo - from second code */} - TPS Logo +
    diff --git a/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx b/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx index 6d9c5ac..e56172d 100644 --- a/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx +++ b/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx @@ -1,551 +1,551 @@ -// import React, { useState, useEffect, useRef, useCallback } from "react"; -// import { motion, AnimatePresence } from "framer-motion"; -// import d14 from "../../../../src/assets/Images/d14.jpeg"; -// import d15 from "../../../../src/assets/Images/d15.jpeg"; -// import d16 from "../../../../src/assets/Images/d16.jpeg"; -// import d7 from "../../../../src/assets/Images/d7.jpeg"; +import React, { useState, useEffect, useRef, useCallback } from "react"; +import { motion, AnimatePresence } from "framer-motion"; +import d14 from "../../../../src/assets/Images/d14.jpg" +import d15 from "../../../../src/assets/Images/d15.jpg" +import d16 from "../../../../src/assets/Images/d16.jpg"; +import d7 from "../../../../src/assets/Images/d7.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); +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]); + 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; + 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); + while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild); + svgEl.setAttribute("width", wrapper.scrollWidth); + svgEl.setAttribute("height", wrapper.offsetHeight); -// if (!itemsRefs || itemsRefs.length < 2) return; + 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 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 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 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"); + 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); + 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; + 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 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 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 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 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 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 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 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 itemRect = item.getBoundingClientRect(); + const containerRect = scrollContainer.getBoundingClientRect(); + const scrollLeft = scrollContainer.scrollLeft; -// const targetScroll = -// scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2; + const targetScroll = + scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2; -// scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" }); -// setActiveItem(index); -// }, -// [itemsRefs, setActiveItem] -// ); + 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); -// }; + 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); + useEffect(() => { + const t = setTimeout(() => { + drawCurvedLines(); + setActiveItem(0); + }, 100); -// const scrollContainer = scrollRef.current; -// let scrollTimeout = null; + const scrollContainer = scrollRef.current; + let scrollTimeout = null; -// const onScroll = () => { -// clearTimeout(scrollTimeout); -// scrollTimeout = setTimeout(() => { -// const containerRect = scrollContainer.getBoundingClientRect(); -// const containerCenter = containerRect.left + containerRect.width / 2; + const onScroll = () => { + clearTimeout(scrollTimeout); + scrollTimeout = setTimeout(() => { + const containerRect = scrollContainer.getBoundingClientRect(); + const containerCenter = containerRect.left + containerRect.width / 2; -// let closestIndex = 0; -// let closestDistance = Infinity; + 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; -// } -// }); + 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 (closestIndex !== currentIndex) { + setActiveItem(closestIndex); + } + }, 150); + }; -// if (scrollContainer) scrollContainer.addEventListener("scroll", onScroll); -// const onResize = () => setTimeout(drawCurvedLines, 120); -// window.addEventListener("resize", onResize); + 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]); + return () => { + clearTimeout(t); + if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll); + window.removeEventListener("resize", onResize); + }; + }, [itemsRefs, drawCurvedLines, setActiveItem]); -// useEffect(() => { -// setTimeout(() => drawCurvedLines(), 120); -// }, [itemsRefs, drawCurvedLines, projects.length]); + 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; } -// } + 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; } -// `; + .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%)" }; + const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" }; -// return ( -//
    -// -//
    -//
    -// {!plain && ( -//
    -//

    -// {mainTitle} -//

    -//

    {subtitle}

    -//
    -// )} + 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}
      • -// ))} -//
    -//
    -//
    -// ))} -//
    -//
    +
    +
    +
    + + {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}
      • + ))} +
    +
    +
    + ))} +
    +
    -//
    -// -// -//
    -//
    -//
    -//
    -//
    -// ); -// } +
    + + +
    +
    +
    + +
+ ); +} -// const defaultProjects = [ -// { -// year: "2019–2022", -// items: [ -// "صيانة وإعادة تأهيل مراكز خدمة، مباني إقليمية، وغرف الصرافات الآلية لشركتي Syriatel وMTN" -// ] -// }, -// { -// year: "2023", -// items: [ -// "صيانة منشآت ومبانٍ إدارية لشركات REXOS وSTC" -// ] -// } -// ]; +const defaultProjects = [ + { + year: "2019–2022", + items: [ + "صيانة وإعادة تأهيل مراكز خدمة، مباني إقليمية، وغرف الصرافات الآلية لشركتي Syriatel وMTN" + ] + }, + { + year: "2023", + items: [ + "صيانة منشآت ومبانٍ إدارية لشركات REXOS وSTC" + ] + } +]; -// export default function DepartmentDetail2() { -// const [active, setActive] = useState(null); +export default function DepartmentDetail3() { + const [active, setActive] = useState(null); -// const buttons = [ -// { id: 1, title: "قسم اعادة التاهيل وصيانه المباني", key: "expertise" }, -// { id: 3, title: "الاعمال المنفذة", key: "works" }, -// ]; + const buttons = [ + { id: 1, title: "قسم اعادة التاهيل وصيانه المباني", key: "expertise" }, + { id: 3, title: "الاعمال المنفذة", key: "works" }, + ]; -// const expertiseItems = [ -// { -// icon: ( -// -// -// -// ), -// text: "الصيانة الدورية والطارئة." -// }, -// { -// icon: ( -// -// -// -// ), -// text: "إعادة التأهيل والترميم (أعمال مدنية ومعمارية)." -// }, -// { -// icon: ( -// -// -// -// ), -// text: "أعمال الكهرباء والميكانيك والتحكم." -// }, -// { -// icon: ( -// -// -// -// ), -// text: "أعمال العزل والحماية." -// }, -// { -// icon: ( -// -// -// -// ), -// text: "الإدارة وصيانة المباني والمنشآت على المدى الطويل." -// }, -// { -// icon: ( -// -// -// -// ), -// text: "الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ." -// } -// ]; + const expertiseItems = [ + { + icon: ( + + + + ), + text: "الصيانة الدورية والطارئة." + }, + { + icon: ( + + + + ), + text: "إعادة التأهيل والترميم (أعمال مدنية ومعمارية)." + }, + { + icon: ( + + + + ), + text: "أعمال الكهرباء والميكانيك والتحكم." + }, + { + icon: ( + + + + ), + text: "أعمال العزل والحماية." + }, + { + icon: ( + + + + ), + text: "الإدارة وصيانة المباني والمنشآت على المدى الطويل." + }, + { + icon: ( + + + + ), + text: "الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ." + } + ]; -// const displayItems = expertiseItems; -// const heroImage = active === null ? d14 : active === "expertise" ? d15 : active === "works" ? d16 : d7; + const displayItems = expertiseItems; + const heroImage = active === null ? d14 : active === "expertise" ? d15 : active === "works" ? d16 : d7; -// const handleButtonClick = (key) => { -// setActive((prev) => (prev === key ? null : key)); -// }; + const handleButtonClick = (key) => { + setActive((prev) => (prev === key ? null : key)); + }; -// return ( -//
-//
-//
-// -// -// مرافق سكنية وخدمية + return ( +
+
+
+ + + مرافق سكنية وخدمية -// + -//
-//
-// -// {active === "expertise" ? ( -// -//
قسم اعادة التاهيل وصيانه المباني
-//

قسم اعادة التاهيل وصيانه المباني

-//

يقدم هذا القسم خدمات صيانة متكاملة للمباني السكنية والخدمية والإدارية والصناعية، وتشمل:

-// -// ) : active === "works" ? ( -// -//
الاعمال المنفذة
-//

الاعمال المنفذة

-//

عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.

-// -// ) : ( -// -//

قسم اعادة التاهيل وصيانه المباني

-// -// )} -// -//
-//
+
+
+ + {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}

-//
-//

-// انقر للاطّلاع على التفاصيل -// -// -// -//

-//
-// -// ))} -//
-// -// )} -// -//
+
+ + {!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"> -// -// -// -// العودة للقائمة الرئيسية -// +
+ + {!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"> -// -// -// -// العودة للقائمة الرئيسية -// +
+ +
+ + ) : ( + + 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) => ( -// -//
-//
-// -// {item.icon} -// -//
-//
+
+ {displayItems.map((item, index) => ( + +
+
+ + {item.icon} + +
+
-//
-//

{item.text}

-//
+
+

{item.text}

+
-// -// -// -// -// -//
-// -// ))} -//
+ + + + + +
+ + ))} +
-// -//
-//
-// خدمات احترافية متكاملة -//
-//
-// -// -// )} -// -//
-//
-// ); -// } + +
+
+ خدمات احترافية متكاملة +
+
+ + + )} + + +
+ ); +} diff --git a/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx b/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx new file mode 100644 index 0000000..f36c638 --- /dev/null +++ b/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx @@ -0,0 +1,587 @@ +import React, { useState, useEffect, useRef, useCallback } from "react"; +import { motion, AnimatePresence } from "framer-motion"; +import d17 from "../../../../src/assets/Images/d17.png"; +import d23 from "../../../../src/assets/Images/d23.jpg"; +import d24 from "../../../../src/assets/Images/d24.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 ( +
+ +
+
+ {!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}
    • + ))} +
+
+
+ ))} +
+
+ +
+ + +
+
+
+
+
+ ); +} + +const defaultProjects = [ + { + year: "2009", + items: [ + "دراسة وإشراف محطة معالجة الغاز الطبيعي في معمل الصهر عدرا 2009", + "دراسة وإشراف محطات فصل الغازات في معمل الصهر عدرا 2009", + ], + }, + { + year: "2022", + items: [ + "الصيانة الدورية والطارئة لمستودعات وقود شركتي Syriatel-MTN في كل سورية من عام 2022 ومستمر الى الآن", + ], + }, + { + year: "2023", + items: ["إنشاء محطة الكيروسين في مطار اللاذقية المدني 2023"], + }, + { + year: "2024", + items: [ + "إنشاء مستودع الوقود الاستراتيجي بسعة 1 مليون لتر – ريف دمشق 2024", + "الصيانة الدورية والطارئة لمستودع وقود مرفأ طرطوس من عام 2024 ومستمر الى الآن", + ], + }, +]; + +export default function DepartmentDetail4() { + const [active, setActive] = useState(null); + + const buttons = [ + { id: 1, title: "اختصاص القسم", key: "expertise" }, + { id: 3, title: "الاعمال المنفذة", key: "works" }, + ]; + + // New expertise items as per user's provided bullets + const expertiseItems = [ + { + icon: ( + + + + ), + text: "دراسات إنشاء وتطوير محطات الوقود." + }, + { + icon: ( + + + + ), + text: "تنفيذ الأعمال المدنية والميكانيكية والكهربائية وأنظمة التحكم في محطات الوقود." + }, + { + icon: ( + + + + ), + text: "صيانة محطات الوقود والمنشآت النفطية دورية وطارئة." + }, + { + icon: ( + + + + ), + text: "صيانة المضخات والعدادات ومعايرتها." + }, + { + icon: ( + + + + ), + text: "تنظيف والتفتيش الفني وصيانة خزانات الوقود وتقييم عمرها الفني." + }, + { + icon: ( + + + + ), + text: "توريد وتركيب التجهيزات المقاومة للانفجار (Explosion Proof)." + }, + { + icon: ( + + + + ), + text: "الالتزام الصارم بإجراءات السلامة المهنية والصحة والبيئة." + }, + { + icon: ( + + + + ), + text: "الجاهزية للعمل على مدار 24/7 في جميع المحافظات." + }, + { + icon: ( + + + + ), + text: "تقديم وتركيب أنظمة المراقبة والإنذار المبكر والإطفاء الآلي والتأريض." + }, + ]; + + const displayItems = expertiseItems; + const heroImage = active === "expertise" ? d23 : active === "works" ? d24 : d17; + + const handleButtonClick = (key) => { + setActive((prev) => (prev === key ? null : key)); + }; + + 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}

+
+

+ انقر للاطّلاع على التفاصيل + + + +

+
+ + ))} +
+ + )} + +
+ +
+ + + +
+ + +
+
+ +
+ + {!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) => ( + +
+
+ + {item.icon} + +
+
+ +
+

{item.text}

+
+ + + + + + +
+ + ))} +
+ + +
+
+ خدمات احترافية متكاملة +
+
+ + + )} + +
+
+ ); +} diff --git a/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx b/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx new file mode 100644 index 0000000..66ca61e --- /dev/null +++ b/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx @@ -0,0 +1,608 @@ +import React, { useState, useEffect, useRef, useCallback } from "react"; +import { motion, AnimatePresence } from "framer-motion"; +import d18 from "../../../../src/assets/Images/d18.jpg"; +import d25 from "../../../../src/assets/Images/d25.jpeg"; +import d26 from "../../../../src/assets/Images/d26.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 ( +
+ +
+
+ {!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}
    • + ))} +
+
+
+ ))} +
+
+ +
+ + +
+
+
+
+
+ ); +} + +const defaultProjects = [ + { + year: "2009-2010", + items: [ + "تدقيق ومطابقة المخططات الهندسية والتكنولوجية لخطوط الدرفلة وصهر الحد - الشركة المصنعة: دانييلي (إيطاليا) 2009-2010", + ], + }, + { + year: "2007-2008", + items: [ + "تدقيق ومطابقة المخططات الهندسية والتكنولوجية - الشركة المصنعة: SMS (إيطاليا) 2007-2008", + ], + }, + { + year: "2015", + items: [ + "التفتيش والاختبارات لخطوط والخزانات لدى الشركة السورية لنقل النفط (2015)", + ], + }, + { + year: "2018", + items: [ + "التفتيش الفني والاختبارات لخزانات غاز الراموسة في حلب (2018)", + ], + }, + { + year: "2022", + items: [ + "التفتيش الفني والاختبارات لقواعد وهيكل الفرن في معمل المتحدة للأسمنت - أبو الشامات (2022)", + ], + }, + { + year: "2017-2019", + items: [ + "التفتيش الفني والاختبارات لخزانات شركة محروقات سادكوب شنشار - بوقا - عدرا (2017-2019)", + ], + }, + { + year: "2023-2024", + items: [ + "إجراء الفحص الفني لخزانات مستودعات وقود MTN-SYRIATEL الاستراتيجية والثانوية (2023-2024)", + ], + }, +]; + +export default function DepartmentDetail5() { + const [active, setActive] = useState(null); + + const buttons = [ + { id: 1, title: "اختصاص القسم", key: "expertise", img: d25 }, + { id: 3, title: "الاعمال المنفذة", key: "works", img: d26 }, + ]; + + // New expertise items based on user's content + const expertiseItems = [ + { + icon: ( + + + + ), + text: "إجراء الفحوصات غير الإتلافية (NDT) للكشف عن العيوب الخفية في المكونات المعدنية.", + }, + { + icon: ( + + + + ), + text: "فحص اللحامات باستخدام:", + }, + { + icon: ( + + + + ), + text: "Ultrasonic Testing (UT) - الفحص بالموجات فوق الصوتية.", + }, + { + icon: ( + + + + ), + text: "Magnetic Particle Testing (MT) - الفحص بالجسيمات المغناطيسية.", + }, + { + icon: ( + + + + ), + text: "Penetrant Testing (PT) - الفحص بالسوائل المتغلغلة.", + }, + { + icon: ( + + + + ), + text: "Visual Testing (VT) - الفحص البصري وتقييم جودة اللحام ومطابقته للمواصفات.", + }, + { + icon: ( + + + + ), + text: "تدقيق ومطابقة المخططات التكنولوجية والهندسية لأعمال التصنيع المعدني، الميكانيكي، الكهربائي ومنظومات التحكم.", + }, + { + icon: ( + + + + ), + text: "تدقيق ومطابقة جاهزية المعدات الهندسية وملائمتها للمعايير العالمية.", + }, + { + icon: ( + + + + ), + text: "الالتزام بتطبيق معايير السلامة المهنية والجودة أثناء تنفيذ أعمال التفتيش.", + }, + ]; + + const displayItems = expertiseItems; + const heroImage = active === "expertise" ? d25 : active === "works" ? d26 : d18; + + const handleButtonClick = (key) => { + setActive((prev) => (prev === key ? null : key)); + }; + + 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" + > + {/* image badge (uses provided image for each button) */} + {/* decorative badge (matching previous interface) */} +
+
+ +
+
+
+ {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) => ( + +
+
+ + {item.icon} + +
+
+ +
+

{item.text}

+
+ + + + + + +
+ + ))} +
+ + +
+
+ خدمات احترافية متكاملة +
+
+ + + )} + +
+
+ ); +} diff --git a/src/Components/Sections/Departments/Departments.jsx b/src/Components/Sections/Departments/Departments.jsx index a0ff311..44b97e4 100644 --- a/src/Components/Sections/Departments/Departments.jsx +++ b/src/Components/Sections/Departments/Departments.jsx @@ -75,25 +75,22 @@ function DepartmentCard({ dept, offset }) { [-45, 0, 45] ); - const progressParallax = useTransform( - scrollYProgress, - [0, 1], - [15, -15] - ); + const progressParallax = useTransform(scrollYProgress, [0, 1], [15, -15]); - const y = useTransform( - [velocityParallax, progressParallax], - ([v, p]) => v + p - ); + const y = useTransform([velocityParallax, progressParallax], ([v, p]) => v + p); const handleClick = () => { + if (dept.id === 5) { + navigate("/department-detail5"); + } + if (dept.id === 4) { + navigate("/department-detail4"); + } if (dept.id === 3) { navigate("/department-detail3"); } else if (dept.id === 2) { navigate("/department-detail2"); - } else { - navigate(`/departments/${dept.id}`); - } + } }; return ( @@ -127,10 +124,11 @@ function DepartmentCard({ dept, offset }) { 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)", + 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" + // مهم: لا تضع خلفية صلبة هنا — اجعلها نصف شفافة حتى يظهر الكانفس وراءها + className="cursor-pointer w-full h-96 object-cover rounded-2xl + bg-white/20 backdrop-blur-md border border-white/10" />
); @@ -138,12 +136,17 @@ function DepartmentCard({ dept, offset }) { export default function Departments() { return ( -
-
-

أقسامنا

+ // لا تضف أي خلفية هنا — دع الكانفس العالمي يظهر +
+
+

+ أقسامنا +

-
+
{departments.map((dept, index) => ( { const id = "cairo-font-link"; @@ -192,7 +189,8 @@ export default function EngineeringHeroFlowbite() { }; return ( -
+ // خلفية الحاوية شفافة حتى يظهر الـ BackgroundCanvas في مستوى التطبيق +