fixing depts
This commit is contained in:
111
src/App.jsx
111
src/App.jsx
@ -1,92 +1,3 @@
|
||||
// import React from "react";
|
||||
// import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
|
||||
// import { AnimatePresence, LayoutGroup } from "framer-motion";
|
||||
|
||||
// import "./i18n";
|
||||
// import "./App.css";
|
||||
|
||||
// import Navbar from "./Components/Nav/Navbar";
|
||||
// import Home from "./Components/Sections/Home/Home";
|
||||
// import Services from "./Components/Sections/Services/Services";
|
||||
// import About from "./Components/Sections/About/About";
|
||||
// import Departments from "./Components/Sections/Departments/Departments";
|
||||
// import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentDetail";
|
||||
// import Contact from "./Components/Sections/Contact/Contact";
|
||||
// import Footer from "./Components/Nav/Footer";
|
||||
// import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";
|
||||
|
||||
// const MainPage = () => {
|
||||
// return (
|
||||
// <div className="min-h-screen bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
|
||||
// <div className="flex flex-col min-h-screen">
|
||||
// <main className="flex-grow">
|
||||
// <Home />
|
||||
// <Services />
|
||||
// <About />
|
||||
// <Departments />
|
||||
// <Contact />
|
||||
// </main>
|
||||
// <Footer />
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// function RouterView() {
|
||||
// const location = useLocation();
|
||||
|
||||
// return (
|
||||
// <LayoutGroup>
|
||||
// <AnimatePresence mode="wait" initial={false}>
|
||||
// <Routes location={location} key={location.pathname}>
|
||||
// <Route path="/" element={<MainPage />} />
|
||||
// <Route path="/departments/:id" element={<DepartmentDetail />} />
|
||||
// <Route path="/department-detail2" element={<DepartmentDetail2 />} />
|
||||
// </Routes>
|
||||
// </AnimatePresence>
|
||||
// </LayoutGroup>
|
||||
// );
|
||||
// }
|
||||
|
||||
// function Layout() {
|
||||
// const location = useLocation();
|
||||
|
||||
// const excludedExactPaths = [
|
||||
// "/department-detail2",
|
||||
// ];
|
||||
|
||||
// const excludedPrefixes = ["/departments/"];
|
||||
|
||||
// const isExcludedExact = excludedExactPaths.includes(location.pathname);
|
||||
// const isExcludedPrefix = excludedPrefixes.some((p) => location.pathname.startsWith(p));
|
||||
|
||||
// const hideNavbar = isExcludedExact || isExcludedPrefix;
|
||||
|
||||
// const navbarHeight = hideNavbar ? 0 : 56;
|
||||
|
||||
// return (
|
||||
// <>
|
||||
// {!hideNavbar && <Navbar />}
|
||||
|
||||
// <div style={{ paddingTop: navbarHeight }}>
|
||||
// <RouterView />
|
||||
// </div>
|
||||
// </>
|
||||
// );
|
||||
// }
|
||||
|
||||
// const App = () => {
|
||||
// return (
|
||||
// <BrowserRouter>
|
||||
// <Layout />
|
||||
// </BrowserRouter>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default App;
|
||||
|
||||
|
||||
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
|
||||
@ -109,6 +20,12 @@ 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";
|
||||
import DepartmentDetail6 from "./Components/Sections/DepartmentDetail6/DepartmentDetail6";
|
||||
import DepartmentDetail7 from "./Components/Sections/DepartmentDetail7/DepartmentDetail7";
|
||||
import DepartmentDetail8 from "./Components/Sections/DepartmentDetail8/DepartmentDetail8";
|
||||
import DepartmentDetail9 from "./Components/Sections/DepartmentDetail9/DepartmentDetail9";
|
||||
|
||||
|
||||
const MainPage = ({ theme }) => {
|
||||
return (
|
||||
<div className="min-h-screen bg-transparent">
|
||||
@ -125,7 +42,6 @@ const MainPage = ({ theme }) => {
|
||||
);
|
||||
};
|
||||
|
||||
// مكون الراوتر الداخلي
|
||||
function RouterView({ theme, toggleTheme }) {
|
||||
const location = useLocation();
|
||||
|
||||
@ -149,7 +65,11 @@ function RouterView({ theme, toggleTheme }) {
|
||||
<Route path="/department-detail3" element={<DepartmentDetail3 />} />
|
||||
<Route path="/department-detail4" element={<DepartmentDetail4 />} />
|
||||
<Route path="/department-detail5" element={<DepartmentDetail5/>} />
|
||||
<Route path="/department-detail6" element={<DepartmentDetail6/>} />
|
||||
<Route path="/department-detail7" element={<DepartmentDetail7/>} />
|
||||
|
||||
<Route path="/department-detail8" element={<DepartmentDetail8/>} />
|
||||
<Route path="/department-detail9" element={<DepartmentDetail9/>} />
|
||||
|
||||
</Routes>
|
||||
</AnimatePresence>
|
||||
@ -157,7 +77,6 @@ function RouterView({ theme, toggleTheme }) {
|
||||
);
|
||||
}
|
||||
|
||||
// المكون الذي يتحكم في التخطيط
|
||||
function Layout({ theme, toggleTheme }) {
|
||||
const location = useLocation();
|
||||
|
||||
@ -166,7 +85,10 @@ function Layout({ theme, toggleTheme }) {
|
||||
"/department-detail3" ,
|
||||
"/department-detail4" ,
|
||||
"/department-detail5" ,
|
||||
|
||||
"/department-detail6" ,
|
||||
"/department-detail7",
|
||||
"/department-detail8",
|
||||
"/department-detail9"
|
||||
];
|
||||
|
||||
const excludedPrefixes = ["/departments/"];
|
||||
@ -185,19 +107,16 @@ function Layout({ theme, toggleTheme }) {
|
||||
<div style={{ paddingTop: navbarHeight }}>
|
||||
<RouterView theme={theme} toggleTheme={toggleTheme} />
|
||||
|
||||
{/* إظهار Footer فقط في الصفحة الرئيسية */}
|
||||
{location.pathname === "/" && <Footer />}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// المكون الرئيسي للتطبيق
|
||||
const App = () => {
|
||||
const [theme, setTheme] = useState("light");
|
||||
|
||||
useEffect(() => {
|
||||
// تتبع الثيم لأغراض التصحيح
|
||||
console.log("Current theme:", theme);
|
||||
console.log("HTML has dark class:", document.documentElement.classList.contains('dark'));
|
||||
|
||||
@ -210,7 +129,6 @@ const App = () => {
|
||||
}
|
||||
}, [theme]);
|
||||
|
||||
// تهيئة الثيم من localStorage
|
||||
useEffect(() => {
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
@ -224,7 +142,6 @@ const App = () => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
// دالة تبديل الثيم
|
||||
const toggleTheme = () => {
|
||||
const newTheme = theme === "light" ? "dark" : "light";
|
||||
setTheme(newTheme);
|
||||
|
||||
@ -341,7 +341,6 @@ export default function DepartmentDetail5() {
|
||||
{ id: 3, title: "الاعمال المنفذة", key: "works", img: d26 },
|
||||
];
|
||||
|
||||
// New expertise items based on user's content
|
||||
const expertiseItems = [
|
||||
{
|
||||
icon: (
|
||||
|
||||
575
src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx
Normal file
575
src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx
Normal file
@ -0,0 +1,575 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import d19 from "../../../../src/assets/Images/d19.jpeg";
|
||||
import d27 from "../../../../src/assets/Images/d27.jpeg";
|
||||
import d28 from "../../../../src/assets/Images/d28.jpeg";
|
||||
import d29 from "../../../../src/assets/Images/d29.jpeg";
|
||||
import d30 from "../../../../src/assets/Images/d30.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 (
|
||||
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
|
||||
<style>{css}</style>
|
||||
<main className="w-full h-full overflow-hidden" style={mainStyle}>
|
||||
<div className="h-full flex flex-col">
|
||||
{!plain && (
|
||||
<header className="text-center py-8 px-4">
|
||||
<h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
|
||||
{mainTitle}
|
||||
</h1>
|
||||
<p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
|
||||
</header>
|
||||
)}
|
||||
|
||||
<div className="flex-1 relative">
|
||||
<div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label="خط زمني قابل للتمرير">
|
||||
<div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
|
||||
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
|
||||
{projects.map((project, idx) => (
|
||||
<div
|
||||
className="timeline-item"
|
||||
key={idx}
|
||||
ref={itemsRefs[idx]}
|
||||
data-index={idx}
|
||||
onClick={() => scrollToItem(idx)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
|
||||
}}
|
||||
>
|
||||
<div className="year-circle">{project.year}</div>
|
||||
<div className="project-card">
|
||||
<ul className="project-text" aria-live="polite">
|
||||
{project.items.map((it, i) => (
|
||||
<li key={i}>• {it}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="scroll-indicator">
|
||||
<button className="scroll-btn" aria-label="السابق" onClick={onPrev} disabled={currentIndex === 0} title="السابق">◄</button>
|
||||
<button className="scroll-btn" aria-label="التالي" onClick={onNext} disabled={currentIndex === projects.length - 1} title="التالي">►</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const defaultProjects = [
|
||||
{
|
||||
year: "1999-2015",
|
||||
items: [
|
||||
"تنفيذ محطات معالجة المياه الصناعية لمعامل صهر ودرفلة الحديد الوهيب - العربية - الدولية - حديد للصهر - حديد (1999-2015).",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2009",
|
||||
items: [
|
||||
"محطة تحويل 66/20 ك.ف لأعمال درفلة الحديد الوهيب - العربية (2009).",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2015",
|
||||
items: [
|
||||
"الإشراف على تنفيذ محطة التحويل 230/66 و66/20 ك.ف لمعامل صهر ودرفلة الحديد (2015).",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2018",
|
||||
items: [
|
||||
"تجهيز وتنفيذ شبكات مياه الشرب لـ22 قرية ريف اللاذقية الشمالي - 73 كم (2018).",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2019",
|
||||
items: [
|
||||
"أعمال الصيانة وإعادة التأهيل منشأة الفوسفات مرفأ طرطوس (2019).",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2021",
|
||||
items: [
|
||||
"دراسة مشروع إعادة تأهيل منجم الملح الصخري في دير الزور (2021).",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2022",
|
||||
items: [
|
||||
"دراسة وتنفيذ محطة الضخ والتصفية لسد 16 تشرين (اللاذقية) (2022).",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2023",
|
||||
items: [
|
||||
"دراسة وتنفيذ مجموعة الطاقة الشمسية 3.6 ميغا لمطحنة غرين كوست (2023).",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function DepartmentDetail6() {
|
||||
const [active, setActive] = useState(null);
|
||||
|
||||
const cycleImgs = [d28, d27, d29];
|
||||
const [cycleIndex, setCycleIndex] = useState(0);
|
||||
useEffect(() => {
|
||||
const t = setInterval(() => setCycleIndex((i) => (i + 1) % cycleImgs.length), 3000);
|
||||
return () => clearInterval(t);
|
||||
}, []);
|
||||
|
||||
const buttons = [
|
||||
{ id: 1, title: "خدمات القسم", key: "expertise" },
|
||||
{ id: 3, title: "الاعمال المنفذه", key: "works", img: d30 },
|
||||
];
|
||||
|
||||
const cardGroups = [
|
||||
{
|
||||
title: "1- محطات المعالجة وتصفية المياه",
|
||||
items: [
|
||||
"تنفيذ محطات تصفية ومعالجة وضخ المياه الصالحة للشرب والاستخدام.",
|
||||
"تنفيذ محطات معالجة المياه الصناعية وفق المتطلبات الفنية والتشغيلية.",
|
||||
"الإشراف على التشغيل التجريبي ورفع كفاءة الأداء التشغيلي للمحطات.",
|
||||
"الالتزام بالمعايير البيئية ومعايير الجودة والسلامة المهنية المعتمدة.",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "2- محطات الطاقة الكهروضوئية",
|
||||
items: [
|
||||
"دراسة وتصميم وتنفيذ مشاريع الطاقة البديلة (الكهروضوئية / الريحية).",
|
||||
"تنفيذ المحطات الكهروضوئية وأنظمة الطاقة الشمسية.",
|
||||
"تصميم وتنفيذ منظومات الكهرباء والتحكم والمحولات الكهربائية.",
|
||||
"ربط أنظمة الطاقة الكهربائية مع أنظمة الطاقة البديلة.",
|
||||
"الإشراف على التشغيل والصيانة الدورية للمنظومات الطاقية.",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "3- منشآت الفوسفات",
|
||||
items: [
|
||||
"إعادة تأهيل خطوط تفريغ وتعبئة الفوسفات من مرحلة تفريغ القطارات وحتى تحميل الفوسفت على البواخر.",
|
||||
"تنفيذ أعمال الصيانة الميكانيكية والكهربائية والتحكم وأعمال اللحام والمعالجة المعدنية لمنظومات التفريغ والنقل والتعبئة.",
|
||||
"فحص وتقييم الحالة الفنية للمعدات والمنشآت، وإعادة ضبط المنظومات التشغيلية ورفع الجاهزية والكفاءة التشغيلية.",
|
||||
"تطبيق متطلبات السلامة خلال أعمال التنفيذ والتشغيل.",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const heroImage = active === "expertise" ? cycleImgs[cycleIndex] : active === "works" ? d30 : d19;
|
||||
|
||||
const handleButtonClick = (key) => {
|
||||
setActive((prev) => (prev === key ? null : key));
|
||||
};
|
||||
|
||||
return (
|
||||
<div dir="rtl" className="w-full min-h-screen bg-white pb-12">
|
||||
<section className="relative">
|
||||
<div className="w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={active}
|
||||
initial={{ opacity: 0, scale: 1.05 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.98 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className={`relative ${active ? 'h-80 sm:h-96 md:h-[540px] lg:h-[680px]' : 'h-72 sm:h-80 md:h-[480px] lg:h-[580px]'} overflow-visible`}
|
||||
>
|
||||
<img
|
||||
src={heroImage}
|
||||
alt="مرافق ومشروعات استراتيجية"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.25, duration: 0.45 }}
|
||||
className="absolute inset-0 bg-gradient-to-r from-slate-900/90 via-slate-800/75 to-slate-900/60 z-5"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0 z-10 flex items-center pointer-events-none">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
{active === "expertise" ? (
|
||||
<motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">خدمات القسم</div>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">خدمات القسم</h2>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">الاطّلاع على البطاقات أدناه للحصول على تفاصيل كل خدمة.</p>
|
||||
</motion.div>
|
||||
) : active === "works" ? (
|
||||
<motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">الاعمال المنفذة</div>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">الاعمال المنفذة</h2>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">قسم المشاريع الاستراتيجية</h2>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto" style={{ zIndex: 99999 }}>
|
||||
<AnimatePresence>
|
||||
{!active && (
|
||||
<motion.div
|
||||
key="floating-buttons"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 10 }}
|
||||
transition={{ duration: 0.45 }}
|
||||
className="w-full max-w-7xl mx-auto"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
|
||||
{buttons.map((b, index) => (
|
||||
<motion.button
|
||||
key={b.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.08, duration: 0.5 }}
|
||||
whileHover={{ scale: 1.03, y: -6, transition: { duration: 0.2 } }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
onClick={() => 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"
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
|
||||
<div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
|
||||
{b.id}
|
||||
</div>
|
||||
<h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">{b.title}</h3>
|
||||
</div>
|
||||
<p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
|
||||
<span>انقر للاطّلاع على التفاصيل</span>
|
||||
<svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 z-10">
|
||||
<svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
|
||||
<path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
|
||||
</svg>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
|
||||
<AnimatePresence mode="wait">
|
||||
{!active ? (
|
||||
<motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
|
||||
) : active === "works" ? (
|
||||
<motion.div key="timeline-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
|
||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => 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">
|
||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
<span>العودة للقائمة الرئيسية</span>
|
||||
</motion.button>
|
||||
|
||||
<div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
|
||||
<ProjectsTimeline projects={defaultProjects} plain={true} />
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="details-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
|
||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => 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">
|
||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
<span>العودة للقائمة الرئيسية</span>
|
||||
</motion.button>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{cardGroups.map((group, gIndex) => (
|
||||
<div key={gIndex} className="bg-white rounded-2xl p-4 sm:p-6 shadow-lg border border-gray-100">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-3">{group.title}</h3>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{group.items.map((text, idx) => (
|
||||
<motion.div key={idx} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.2 }} transition={{ delay: idx * 0.06, duration: 0.4 }} className="relative group">
|
||||
<div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
|
||||
<div className="relative flex-shrink-0">
|
||||
<motion.div whileHover={{ rotate: 360, scale: 1.03 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"/></svg>
|
||||
</motion.div>
|
||||
<div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 pt-1">
|
||||
<p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium">{text}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
|
||||
<svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center">
|
||||
<div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
|
||||
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
|
||||
<span className="text-xs sm:text-sm font-medium">خدمات احترافية متكاملة</span>
|
||||
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
555
src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
Normal file
555
src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
Normal file
@ -0,0 +1,555 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import d20 from "../../../../src/assets/Images/d20.jpeg";
|
||||
import d31 from "../../../../src/assets/Images/d31.jpeg";
|
||||
import d32 from "../../../../src/assets/Images/d32.jpeg";
|
||||
|
||||
function ProjectsTimeline({
|
||||
projects,
|
||||
mainTitle = "المشاريع المنفذة",
|
||||
subtitle = "خط زمني شامل للأعمال والإنجازات",
|
||||
plain = false,
|
||||
}) {
|
||||
const wrapperRef = useRef(null);
|
||||
const scrollRef = useRef(null);
|
||||
const svgRef = useRef(null);
|
||||
const [itemsRefs, setItemsRefs] = useState([]);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
setItemsRefs((r) => {
|
||||
const arr = Array(projects.length).fill().map((_, i) => r[i] || React.createRef());
|
||||
return arr;
|
||||
});
|
||||
}, [projects.length]);
|
||||
|
||||
const drawCurvedLines = useCallback(() => {
|
||||
const svgEl = svgRef.current;
|
||||
const wrapper = wrapperRef.current;
|
||||
if (!svgEl || !wrapper) return;
|
||||
|
||||
while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
|
||||
svgEl.setAttribute("width", wrapper.scrollWidth);
|
||||
svgEl.setAttribute("height", wrapper.offsetHeight);
|
||||
|
||||
if (!itemsRefs || itemsRefs.length < 2) return;
|
||||
|
||||
const svgNS = "http://www.w3.org/2000/svg";
|
||||
const defs = document.createElementNS(svgNS, "defs");
|
||||
const gradient = document.createElementNS(svgNS, "linearGradient");
|
||||
gradient.setAttribute("id", "timeline-gradient");
|
||||
gradient.setAttribute("x1", "0%");
|
||||
gradient.setAttribute("y1", "0%");
|
||||
gradient.setAttribute("x2", "100%");
|
||||
gradient.setAttribute("y2", "0%");
|
||||
|
||||
const stop1 = document.createElementNS(svgNS, "stop");
|
||||
stop1.setAttribute("offset", "0%");
|
||||
stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
|
||||
|
||||
const stop2 = document.createElementNS(svgNS, "stop");
|
||||
stop2.setAttribute("offset", "50%");
|
||||
stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
|
||||
|
||||
const stop3 = document.createElementNS(svgNS, "stop");
|
||||
stop3.setAttribute("offset", "100%");
|
||||
stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
|
||||
|
||||
gradient.appendChild(stop1);
|
||||
gradient.appendChild(stop2);
|
||||
gradient.appendChild(stop3);
|
||||
defs.appendChild(gradient);
|
||||
svgEl.appendChild(defs);
|
||||
|
||||
for (let i = 0; i < itemsRefs.length - 1; i++) {
|
||||
const item1 = itemsRefs[i].current;
|
||||
const item2 = itemsRefs[i + 1].current;
|
||||
if (!item1 || !item2) continue;
|
||||
|
||||
const circle1 = item1.querySelector(".year-circle");
|
||||
const circle2 = item2.querySelector(".year-circle");
|
||||
if (!circle1 || !circle2) continue;
|
||||
|
||||
const rect1 = circle1.getBoundingClientRect();
|
||||
const rect2 = circle2.getBoundingClientRect();
|
||||
const wrapperRect = wrapper.getBoundingClientRect();
|
||||
|
||||
const x1 = rect1.left - wrapperRect.left + rect1.width / 2;
|
||||
const y1 = rect1.top - wrapperRect.top + rect1.height / 2;
|
||||
const x2 = rect2.left - wrapperRect.left + rect2.width / 2;
|
||||
const y2 = rect2.top - wrapperRect.top + rect2.height / 2;
|
||||
|
||||
const controlPointOffset = Math.abs(x2 - x1) * 0.4;
|
||||
const cx1 = x1 - controlPointOffset;
|
||||
const cy1 = y1 - 40;
|
||||
const cx2 = x2 + controlPointOffset;
|
||||
const cy2 = y2 - 40;
|
||||
|
||||
const path = document.createElementNS(svgNS, "path");
|
||||
const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
|
||||
path.setAttribute("d", d);
|
||||
path.setAttribute("stroke", "url(#timeline-gradient)");
|
||||
path.setAttribute("stroke-width", "4");
|
||||
path.setAttribute("fill", "none");
|
||||
path.setAttribute("stroke-linecap", "round");
|
||||
path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
|
||||
svgEl.appendChild(path);
|
||||
}
|
||||
}, [itemsRefs]);
|
||||
|
||||
const setActiveItem = useCallback(
|
||||
(index) => {
|
||||
setCurrentIndex(index);
|
||||
itemsRefs.forEach((ref, i) => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
if (i === index) el.classList.add("active");
|
||||
else el.classList.remove("active");
|
||||
});
|
||||
},
|
||||
[itemsRefs]
|
||||
);
|
||||
|
||||
const scrollToItem = useCallback(
|
||||
(index) => {
|
||||
if (index < 0 || index >= itemsRefs.length) return;
|
||||
const scrollContainer = scrollRef.current;
|
||||
const item = itemsRefs[index].current;
|
||||
if (!scrollContainer || !item) return;
|
||||
|
||||
const itemRect = item.getBoundingClientRect();
|
||||
const containerRect = scrollContainer.getBoundingClientRect();
|
||||
const scrollLeft = scrollContainer.scrollLeft;
|
||||
|
||||
const targetScroll =
|
||||
scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
|
||||
|
||||
scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
|
||||
setActiveItem(index);
|
||||
},
|
||||
[itemsRefs, setActiveItem]
|
||||
);
|
||||
|
||||
const onPrev = () => {
|
||||
if (currentIndex > 0) scrollToItem(currentIndex - 1);
|
||||
};
|
||||
const onNext = () => {
|
||||
if (currentIndex < itemsRefs.length - 1) scrollToItem(currentIndex + 1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => {
|
||||
drawCurvedLines();
|
||||
setActiveItem(0);
|
||||
}, 100);
|
||||
|
||||
const scrollContainer = scrollRef.current;
|
||||
let scrollTimeout = null;
|
||||
|
||||
const onScroll = () => {
|
||||
clearTimeout(scrollTimeout);
|
||||
scrollTimeout = setTimeout(() => {
|
||||
const containerRect = scrollContainer.getBoundingClientRect();
|
||||
const containerCenter = containerRect.left + containerRect.width / 2;
|
||||
|
||||
let closestIndex = 0;
|
||||
let closestDistance = Infinity;
|
||||
|
||||
itemsRefs.forEach((ref, index) => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const itemRect = el.getBoundingClientRect();
|
||||
const itemCenter = itemRect.left + itemRect.width / 2;
|
||||
const distance = Math.abs(containerCenter - itemCenter);
|
||||
if (distance < closestDistance) {
|
||||
closestDistance = distance;
|
||||
closestIndex = index;
|
||||
}
|
||||
});
|
||||
|
||||
if (closestIndex !== currentIndex) {
|
||||
setActiveItem(closestIndex);
|
||||
}
|
||||
}, 150);
|
||||
};
|
||||
|
||||
if (scrollContainer) scrollContainer.addEventListener("scroll", onScroll);
|
||||
const onResize = () => setTimeout(drawCurvedLines, 120);
|
||||
window.addEventListener("resize", onResize);
|
||||
|
||||
return () => {
|
||||
clearTimeout(t);
|
||||
if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
|
||||
window.removeEventListener("resize", onResize);
|
||||
};
|
||||
}, [itemsRefs, drawCurvedLines, setActiveItem]);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => drawCurvedLines(), 120);
|
||||
}, [itemsRefs, drawCurvedLines, projects.length]);
|
||||
|
||||
const css = `
|
||||
:root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
|
||||
.projects-timeline-root { direction: rtl; min-height: 100%; }
|
||||
.timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
|
||||
.timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
|
||||
.timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
|
||||
.svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
|
||||
.timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
|
||||
.year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
|
||||
.timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
|
||||
.timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
|
||||
@keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
|
||||
.project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
|
||||
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
|
||||
.timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
|
||||
.timeline-item.active .project-card::before { opacity:1; }
|
||||
.project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
|
||||
.project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
|
||||
.timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
|
||||
.scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
|
||||
.scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
|
||||
.scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
|
||||
.scroll-btn:active:not(:disabled){ transform: scale(1.05); }
|
||||
.scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
|
||||
@media (max-width:768px){
|
||||
.timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
|
||||
.timeline-item { margin:0 18px; }
|
||||
.year-circle { width:90px; height:90px; font-size:15px; }
|
||||
.timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
|
||||
.project-card { min-width:260px; max-width:300px; padding:20px; }
|
||||
.project-text { font-size:13px; }
|
||||
.scroll-btn { width:48px; height:48px; font-size:20px; }
|
||||
}
|
||||
|
||||
.projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
|
||||
.projects-timeline-root.plain-bleed .project-card { max-width:420px; }
|
||||
`;
|
||||
|
||||
const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
|
||||
|
||||
return (
|
||||
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
|
||||
<style>{css}</style>
|
||||
<main className="w-full h-full overflow-hidden" style={mainStyle}>
|
||||
<div className="h-full flex flex-col">
|
||||
{!plain && (
|
||||
<header className="text-center py-8 px-4">
|
||||
<h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
|
||||
{mainTitle}
|
||||
</h1>
|
||||
<p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
|
||||
</header>
|
||||
)}
|
||||
|
||||
<div className="flex-1 relative">
|
||||
<div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label="خط زمني قابل للتمرير">
|
||||
<div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
|
||||
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
|
||||
{projects.map((project, idx) => (
|
||||
<div
|
||||
className="timeline-item"
|
||||
key={idx}
|
||||
ref={itemsRefs[idx]}
|
||||
data-index={idx}
|
||||
onClick={() => scrollToItem(idx)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
|
||||
}}
|
||||
>
|
||||
<div className="year-circle">{project.year}</div>
|
||||
<div className="project-card">
|
||||
<ul className="project-text" aria-live="polite">
|
||||
{project.items.map((it, i) => (
|
||||
<li key={i}>• {it}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="scroll-indicator">
|
||||
<button className="scroll-btn" aria-label="السابق" onClick={onPrev} disabled={currentIndex === 0} title="السابق">◄</button>
|
||||
<button className="scroll-btn" aria-label="التالي" onClick={onNext} disabled={currentIndex === projects.length - 1} title="التالي">►</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const defaultProjects = [
|
||||
{
|
||||
year: "1999-2009",
|
||||
items: [
|
||||
"المنشآت المعدنية لمعامل درفلة الحديد: معامل الوهيب - العربية - الدولية",
|
||||
"أعمال تصنيع وإمداد هياكل ومكونات خطوط درفلة وحدات الحديد",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2015",
|
||||
items: [
|
||||
"تنفيذ الأعمال المعدنية لمشروع إنشاء مصنع الأسمنت المتحدة",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2021",
|
||||
items: [
|
||||
"تصنيع وتنفيذ هياكل معدنية وروافع جسرية وخزانات مياه صناعية",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2022",
|
||||
items: [
|
||||
"تنفيذ هنغارات معدنية وإسمنتية عالية التحصين",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function DepartmentDetail7() {
|
||||
const [active, setActive] = useState(null);
|
||||
|
||||
const buttons = [
|
||||
{ id: 1, title: "اختصاص القسم", key: "expertise" },
|
||||
{ id: 2, title: "الاعمال المنفذة", key: "works" },
|
||||
];
|
||||
|
||||
// أيقونات متناسبة مع كل بطاقة — مأخوذة من الكود السابق
|
||||
const expertiseItems = [
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
||||
</svg>
|
||||
),
|
||||
text: "تصميم وتصنيع وتنفيذ الهياكل المعدنية."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
),
|
||||
text: "تنفيذ الأعمال المعدنية للمصانع والمنشآت الصناعية."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
|
||||
</svg>
|
||||
),
|
||||
text: "تصنيع وتركيب الروافع الجسرية المتحركة والثابتة."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
|
||||
</svg>
|
||||
),
|
||||
text: "تصنيع خزانات المياه الصناعية وخزانات الفايبر."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
),
|
||||
text: "تقديم حلول دعم صناعي متكاملة للمشاريع الكبرى."
|
||||
},
|
||||
];
|
||||
|
||||
const handleButtonClick = (key) => {
|
||||
setActive((prev) => (prev === key ? null : key));
|
||||
};
|
||||
|
||||
const heroImage = active === "expertise" ? d31 : active === "works" ? d32 : d20;
|
||||
|
||||
return (
|
||||
<div dir="rtl" className="w-full min-h-screen bg-white pb-12">
|
||||
<section className="relative">
|
||||
<div className="w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={active}
|
||||
initial={{ opacity: 0, scale: 1.05 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.98 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="relative h-72 sm:h-80 md:h-[480px] lg:h-[580px] overflow-visible"
|
||||
>
|
||||
<img
|
||||
src={heroImage}
|
||||
alt="قسم الأعمال المعدنية"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.25, duration: 0.45 }}
|
||||
className="absolute inset-0 bg-gradient-to-r from-slate-900/85 via-slate-800/70 to-slate-900/55 z-5"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0 z-10 flex items-center pointer-events-none">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
{active === "expertise" ? (
|
||||
<motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">اختصاص القسم</div>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">قسم الاعمال المعدنية والدعم الصناعي</h2>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
|
||||
يختص هذا القسم بتنفيذ وتصنيع الأعمال المعدنية والداعمة للمشاريع الصناعية والخدمية، ويشمل:
|
||||
</p>
|
||||
</motion.div>
|
||||
) : active === "works" ? (
|
||||
<motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">الأعمال المنفذة</div>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">الأعمال المنفذة</h2>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">عرض لمشروعاتنا وأمثلة على الأعمال المعدنية المنفذة عبر السنين.</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">قسم الاعمال المعدنية والدعم الصناعي</h2>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto" style={{ zIndex: 99999 }}>
|
||||
<AnimatePresence>
|
||||
{!active && (
|
||||
<motion.div
|
||||
key="floating-buttons"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 10 }}
|
||||
transition={{ duration: 0.45 }}
|
||||
className="w-full max-w-7xl mx-auto"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
|
||||
{buttons.map((b, index) => (
|
||||
<motion.button
|
||||
key={b.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.08, duration: 0.5 }}
|
||||
whileHover={{ scale: 1.03, y: -6, transition: { duration: 0.2 } }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
onClick={() => handleButtonClick(b.key)}
|
||||
className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm"
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
|
||||
<div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
|
||||
{b.id}
|
||||
</div>
|
||||
<h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">{b.title}</h3>
|
||||
</div>
|
||||
<p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
|
||||
<span>انقر للاطّلاع على التفاصيل</span>
|
||||
<svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 z-10">
|
||||
<svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
|
||||
<path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
|
||||
</svg>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
|
||||
<AnimatePresence mode="wait">
|
||||
{!active ? (
|
||||
<motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
|
||||
) : active === "works" ? (
|
||||
<motion.div key="timeline-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
|
||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => 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">
|
||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
<span>العودة للقائمة الرئيسية</span>
|
||||
</motion.button>
|
||||
|
||||
<div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
|
||||
<ProjectsTimeline projects={defaultProjects} plain={true} />
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="details-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
|
||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => 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">
|
||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
<span>العودة للقائمة الرئيسية</span>
|
||||
</motion.button>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
|
||||
{expertiseItems.map((item, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, amount: 0.25 }}
|
||||
transition={{ delay: idx * 0.06, duration: 0.45 }}
|
||||
className="relative group"
|
||||
>
|
||||
<div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
|
||||
<div className="relative flex-shrink-0">
|
||||
<motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
|
||||
{item.icon}
|
||||
</motion.div>
|
||||
<div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 pt-1">
|
||||
<p className="text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">{item.text}</p>
|
||||
</div>
|
||||
|
||||
<motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
|
||||
<svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-2 sm:mt-6 pt-4 border-t-2 border-gray-100 text-center col-span-full">
|
||||
<div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
|
||||
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
|
||||
<span className="text-xs sm:text-sm font-medium">للمزيد من الأمثلة راجع قسم "الأعمال المنفذة".</span>
|
||||
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
563
src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
Normal file
563
src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
Normal file
@ -0,0 +1,563 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import d21 from "../../../../src/assets/Images/d21.jpeg";
|
||||
import d34 from "../../../../src/assets/Images/d34.jpg";
|
||||
import d33 from "../../../../src/assets/Images/d33.png";
|
||||
|
||||
function ProjectsTimeline({
|
||||
projects,
|
||||
mainTitle = "المشاريع المنفذة",
|
||||
subtitle = "خط زمني شامل للأعمال والإنجازات",
|
||||
plain = false,
|
||||
}) {
|
||||
const wrapperRef = useRef(null);
|
||||
const scrollRef = useRef(null);
|
||||
const svgRef = useRef(null);
|
||||
const [itemsRefs, setItemsRefs] = useState([]);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
setItemsRefs((r) => {
|
||||
const arr = Array(projects.length).fill().map((_, i) => r[i] || React.createRef());
|
||||
return arr;
|
||||
});
|
||||
}, [projects.length]);
|
||||
|
||||
const drawCurvedLines = useCallback(() => {
|
||||
const svgEl = svgRef.current;
|
||||
const wrapper = wrapperRef.current;
|
||||
if (!svgEl || !wrapper) return;
|
||||
|
||||
while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
|
||||
svgEl.setAttribute("width", wrapper.scrollWidth);
|
||||
svgEl.setAttribute("height", wrapper.offsetHeight);
|
||||
|
||||
if (!itemsRefs || itemsRefs.length < 2) return;
|
||||
|
||||
const svgNS = "http://www.w3.org/2000/svg";
|
||||
const defs = document.createElementNS(svgNS, "defs");
|
||||
const gradient = document.createElementNS(svgNS, "linearGradient");
|
||||
gradient.setAttribute("id", "timeline-gradient");
|
||||
gradient.setAttribute("x1", "0%");
|
||||
gradient.setAttribute("y1", "0%");
|
||||
gradient.setAttribute("x2", "100%");
|
||||
gradient.setAttribute("y2", "0%");
|
||||
|
||||
const stop1 = document.createElementNS(svgNS, "stop");
|
||||
stop1.setAttribute("offset", "0%");
|
||||
stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
|
||||
|
||||
const stop2 = document.createElementNS(svgNS, "stop");
|
||||
stop2.setAttribute("offset", "50%");
|
||||
stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
|
||||
|
||||
const stop3 = document.createElementNS(svgNS, "stop");
|
||||
stop3.setAttribute("offset", "100%");
|
||||
stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
|
||||
|
||||
gradient.appendChild(stop1);
|
||||
gradient.appendChild(stop2);
|
||||
gradient.appendChild(stop3);
|
||||
defs.appendChild(gradient);
|
||||
svgEl.appendChild(defs);
|
||||
|
||||
for (let i = 0; i < itemsRefs.length - 1; i++) {
|
||||
const item1 = itemsRefs[i].current;
|
||||
const item2 = itemsRefs[i + 1].current;
|
||||
if (!item1 || !item2) continue;
|
||||
|
||||
const circle1 = item1.querySelector(".year-circle");
|
||||
const circle2 = item2.querySelector(".year-circle");
|
||||
if (!circle1 || !circle2) continue;
|
||||
|
||||
const rect1 = circle1.getBoundingClientRect();
|
||||
const rect2 = circle2.getBoundingClientRect();
|
||||
const wrapperRect = wrapper.getBoundingClientRect();
|
||||
|
||||
const x1 = rect1.left - wrapperRect.left + rect1.width / 2;
|
||||
const y1 = rect1.top - wrapperRect.top + rect1.height / 2;
|
||||
const x2 = rect2.left - wrapperRect.left + rect2.width / 2;
|
||||
const y2 = rect2.top - wrapperRect.top + rect2.height / 2;
|
||||
|
||||
const controlPointOffset = Math.abs(x2 - x1) * 0.4;
|
||||
const cx1 = x1 - controlPointOffset;
|
||||
const cy1 = y1 - 40;
|
||||
const cx2 = x2 + controlPointOffset;
|
||||
const cy2 = y2 - 40;
|
||||
|
||||
const path = document.createElementNS(svgNS, "path");
|
||||
const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
|
||||
path.setAttribute("d", d);
|
||||
path.setAttribute("stroke", "url(#timeline-gradient)");
|
||||
path.setAttribute("stroke-width", "4");
|
||||
path.setAttribute("fill", "none");
|
||||
path.setAttribute("stroke-linecap", "round");
|
||||
path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
|
||||
svgEl.appendChild(path);
|
||||
}
|
||||
}, [itemsRefs]);
|
||||
|
||||
const setActiveItem = useCallback(
|
||||
(index) => {
|
||||
setCurrentIndex(index);
|
||||
itemsRefs.forEach((ref, i) => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
if (i === index) el.classList.add("active");
|
||||
else el.classList.remove("active");
|
||||
});
|
||||
},
|
||||
[itemsRefs]
|
||||
);
|
||||
|
||||
const scrollToItem = useCallback(
|
||||
(index) => {
|
||||
if (index < 0 || index >= itemsRefs.length) return;
|
||||
const scrollContainer = scrollRef.current;
|
||||
const item = itemsRefs[index].current;
|
||||
if (!scrollContainer || !item) return;
|
||||
|
||||
const itemRect = item.getBoundingClientRect();
|
||||
const containerRect = scrollContainer.getBoundingClientRect();
|
||||
const scrollLeft = scrollContainer.scrollLeft;
|
||||
|
||||
const targetScroll =
|
||||
scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
|
||||
|
||||
scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
|
||||
setActiveItem(index);
|
||||
},
|
||||
[itemsRefs, setActiveItem]
|
||||
);
|
||||
|
||||
const onPrev = () => {
|
||||
if (currentIndex > 0) scrollToItem(currentIndex - 1);
|
||||
};
|
||||
const onNext = () => {
|
||||
if (currentIndex < itemsRefs.length - 1) scrollToItem(currentIndex + 1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => {
|
||||
drawCurvedLines();
|
||||
setActiveItem(0);
|
||||
}, 100);
|
||||
|
||||
const scrollContainer = scrollRef.current;
|
||||
let scrollTimeout = null;
|
||||
|
||||
const onScroll = () => {
|
||||
clearTimeout(scrollTimeout);
|
||||
scrollTimeout = setTimeout(() => {
|
||||
const containerRect = scrollContainer.getBoundingClientRect();
|
||||
const containerCenter = containerRect.left + containerRect.width / 2;
|
||||
|
||||
let closestIndex = 0;
|
||||
let closestDistance = Infinity;
|
||||
|
||||
itemsRefs.forEach((ref, index) => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const itemRect = el.getBoundingClientRect();
|
||||
const itemCenter = itemRect.left + itemRect.width / 2;
|
||||
const distance = Math.abs(containerCenter - itemCenter);
|
||||
if (distance < closestDistance) {
|
||||
closestDistance = distance;
|
||||
closestIndex = index;
|
||||
}
|
||||
});
|
||||
|
||||
if (closestIndex !== currentIndex) {
|
||||
setActiveItem(closestIndex);
|
||||
}
|
||||
}, 150);
|
||||
};
|
||||
|
||||
if (scrollContainer) scrollContainer.addEventListener("scroll", onScroll);
|
||||
const onResize = () => setTimeout(drawCurvedLines, 120);
|
||||
window.addEventListener("resize", onResize);
|
||||
|
||||
return () => {
|
||||
clearTimeout(t);
|
||||
if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
|
||||
window.removeEventListener("resize", onResize);
|
||||
};
|
||||
}, [itemsRefs, drawCurvedLines, setActiveItem]);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => drawCurvedLines(), 120);
|
||||
}, [itemsRefs, drawCurvedLines, projects.length]);
|
||||
|
||||
const css = `
|
||||
:root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
|
||||
.projects-timeline-root { direction: rtl; min-height: 100%; }
|
||||
.timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
|
||||
.timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
|
||||
.timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
|
||||
.svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
|
||||
.timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
|
||||
.year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
|
||||
.timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
|
||||
.timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
|
||||
@keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
|
||||
.project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
|
||||
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
|
||||
.timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
|
||||
.timeline-item.active .project-card::before { opacity:1; }
|
||||
.project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
|
||||
.project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
|
||||
.timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
|
||||
.scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
|
||||
.scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
|
||||
.scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
|
||||
.scroll-btn:active:not(:disabled){ transform: scale(1.05); }
|
||||
.scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
|
||||
@media (max-width:768px){
|
||||
.timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
|
||||
.timeline-item { margin:0 18px; }
|
||||
.year-circle { width:90px; height:90px; font-size:15px; }
|
||||
.timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
|
||||
.project-card { min-width:260px; max-width:300px; padding:20px; }
|
||||
.project-text { font-size:13px; }
|
||||
.scroll-btn { width:48px; height:48px; font-size:20px; }
|
||||
}
|
||||
|
||||
.projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
|
||||
.projects-timeline-root.plain-bleed .project-card { max-width:420px; }
|
||||
`;
|
||||
|
||||
const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
|
||||
|
||||
return (
|
||||
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
|
||||
<style>{css}</style>
|
||||
<main className="w-full h-full overflow-hidden" style={mainStyle}>
|
||||
<div className="h-full flex flex-col">
|
||||
{!plain && (
|
||||
<header className="text-center py-8 px-4">
|
||||
<h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
|
||||
{mainTitle}
|
||||
</h1>
|
||||
<p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
|
||||
</header>
|
||||
)}
|
||||
|
||||
<div className="flex-1 relative">
|
||||
<div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label="خط زمني قابل للتمرير">
|
||||
<div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
|
||||
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
|
||||
{projects.map((project, idx) => (
|
||||
<div
|
||||
className="timeline-item"
|
||||
key={idx}
|
||||
ref={itemsRefs[idx]}
|
||||
data-index={idx}
|
||||
onClick={() => scrollToItem(idx)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
|
||||
}}
|
||||
>
|
||||
<div className="year-circle">{project.year}</div>
|
||||
<div className="project-card">
|
||||
<ul className="project-text" aria-live="polite">
|
||||
{project.items.map((it, i) => (
|
||||
<li key={i}>• {it}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="scroll-indicator">
|
||||
<button className="scroll-btn" aria-label="السابق" onClick={onPrev} disabled={currentIndex === 0} title="السابق">◄</button>
|
||||
<button className="scroll-btn" aria-label="التالي" onClick={onNext} disabled={currentIndex === projects.length - 1} title="التالي">►</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const defaultProjects = [
|
||||
{
|
||||
year: "2009-2024",
|
||||
items: [
|
||||
"تأمين وتجهيز مواد ومعدات لمشاريع صناعية",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2024",
|
||||
items: [
|
||||
"تجهيز المستودعات والمباني الإدارية بالمفروشات والتجهيزات والأنظمة اللازمة",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2024",
|
||||
items: [
|
||||
"إدارة لوجستية لمشاريع متعددة المواقع",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2023",
|
||||
items: [
|
||||
"الدراسات الهندسية والفنية وتنفيذ سكن الإيواء لمتضرري الزلزال: 1000 شقة سكنية مسبق الصنع",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function DepartmentDetail8() {
|
||||
const [active, setActive] = useState(null);
|
||||
|
||||
const buttons = [
|
||||
{ id: 1, title: "اختصاص القسم", key: "expertise" },
|
||||
{ id: 2, title: "الاعمال المنفذة", key: "works" },
|
||||
];
|
||||
|
||||
const expertiseItems = [
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M3 7h13l3 3v7a1 1 0 01-1 1h-1a2 2 0 11-4 0H9a2 2 0 11-4 0H4a1 1 0 01-1-1V7zM16 7v4" />
|
||||
</svg>
|
||||
),
|
||||
text: "تأمين الخدمات اللوجستية من مركبات النقل والإقامة المتنقلة والثابتة للموظفين والخبراء وفق المتطلبات."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M4 7h4l4 5 4-5h4M5 19a2 2 0 104 0 2 2 0 00-4 0zm10 0a2 2 0 104 0 2 2 0 00-4 0z" />
|
||||
</svg>
|
||||
),
|
||||
text: "إدارة سلاسل التوريد."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M3 7l9-4 9 4-9 4-9-4zM21 8v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8" />
|
||||
</svg>
|
||||
),
|
||||
text: "توريد المعدات والمواد الأولية."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M3 12l4 4 8-8 4 4M14 7l3-3M7 17l-3 3" />
|
||||
</svg>
|
||||
),
|
||||
text: "التنسيق مع الموردين والمصنعين."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
// warehouse
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M3 9l9-5 9 5v8a2 2 0 01-2 2H5a2 2 0 01-2-2V9zM9 22V12" />
|
||||
</svg>
|
||||
),
|
||||
text: "إدارة المخازن والمستودعات."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
// gears / operations support
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M12 8v4l2 2M6.16 4.94l1.42 1.42M17.42 4.94l-1.42 1.42M4 13h2M18 13h2M6.16 19.06l1.42-1.42M17.42 19.06l-1.42-1.42" />
|
||||
</svg>
|
||||
),
|
||||
text: "دعم العمليات التشغيلية للمشاريع الصناعية والنفطية والهندسية."
|
||||
},
|
||||
];
|
||||
|
||||
const handleButtonClick = (key) => {
|
||||
setActive((prev) => (prev === key ? null : key));
|
||||
};
|
||||
|
||||
const heroImage = active === "expertise" ? d34 : active === "works" ? d33 : d21;
|
||||
|
||||
return (
|
||||
<div dir="rtl" className="w-full min-h-screen bg-white pb-12">
|
||||
<section className="relative">
|
||||
<div className="w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={active}
|
||||
initial={{ opacity: 0, scale: 1.05 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.98 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="relative h-72 sm:h-80 md:h-[480px] lg:h-[580px] overflow-visible"
|
||||
>
|
||||
<img
|
||||
src={heroImage}
|
||||
alt="قسم الخدمات والدعم اللوجستي"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.25, duration: 0.45 }}
|
||||
className="absolute inset-0 bg-gradient-to-r from-slate-900/85 via-slate-800/70 to-slate-900/55 z-5"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0 z-10 flex items-center pointer-events-none">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
{active === "expertise" ? (
|
||||
<motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">اختصاص القسم</div>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">قسم الخدمات والدعم اللوجستي</h2>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
|
||||
يوفر هذا القسم الدعم اللوجستي اللازم للشركات الهندسية والصناعية والتجارية خلال فترة انطلاقتها ولتنفيذ وإدارة المشاريع بكفاءة، ويشمل:
|
||||
</p>
|
||||
</motion.div>
|
||||
) : active === "works" ? (
|
||||
<motion.div key="works-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">الأعمال المنفذة</div>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">الأعمال المنفذة</h2>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">عرض لمشروعاتنا وأمثلة على الأعمال اللوجستية المنفذة.</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="default-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">قسم الخدمات والدعم اللوجستي</h2>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto" style={{ zIndex: 99999 }}>
|
||||
<AnimatePresence>
|
||||
{!active && (
|
||||
<motion.div
|
||||
key="floating-buttons"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 10 }}
|
||||
transition={{ duration: 0.45 }}
|
||||
className="w-full max-w-7xl mx-auto"
|
||||
>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
|
||||
{buttons.map((b, index) => (
|
||||
<motion.button
|
||||
key={b.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: index * 0.08, duration: 0.5 }}
|
||||
whileHover={{ scale: 1.03, y: -6, transition: { duration: 0.2 } }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
onClick={() => handleButtonClick(b.key)}
|
||||
className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm"
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
|
||||
<div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
|
||||
{b.id}
|
||||
</div>
|
||||
<h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">{b.title}</h3>
|
||||
</div>
|
||||
<p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
|
||||
<span>انقر للاطّلاع على التفاصيل</span>
|
||||
<svg className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 z-10">
|
||||
<svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
|
||||
<path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
|
||||
</svg>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
|
||||
<AnimatePresence mode="wait">
|
||||
{!active ? (
|
||||
<motion.div key="buttons-spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
|
||||
) : active === "works" ? (
|
||||
<motion.div key="timeline-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
|
||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.15, duration: 0.45 }} onClick={() => 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">
|
||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
<span>العودة للقائمة الرئيسية</span>
|
||||
</motion.button>
|
||||
|
||||
<div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
|
||||
<ProjectsTimeline projects={defaultProjects} plain={true} />
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="details-view" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
|
||||
<motion.button initial={{ opacity: 0, x: 20 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.08, duration: 0.45 }} onClick={() => 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">
|
||||
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
<span>العودة للقائمة الرئيسية</span>
|
||||
</motion.button>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
|
||||
{expertiseItems.map((item, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, amount: 0.25 }}
|
||||
transition={{ delay: idx * 0.06, duration: 0.45 }}
|
||||
className="relative group"
|
||||
>
|
||||
<div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
|
||||
<div className="relative flex-shrink-0">
|
||||
<motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
|
||||
{item.icon}
|
||||
</motion.div>
|
||||
<div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 pt-1">
|
||||
<p className="text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">{item.text}</p>
|
||||
</div>
|
||||
|
||||
<motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
|
||||
<svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-2 sm:mt-6 pt-4 border-t-2 border-gray-100 text-center col-span-full">
|
||||
<div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
|
||||
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
|
||||
<span className="text-xs sm:text-sm font-medium">لمزيد من الأمثلة راجع قسم "الأعمال المنفذة".</span>
|
||||
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
549
src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx
Normal file
549
src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx
Normal file
@ -0,0 +1,549 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import d22 from "../../../../src/assets/Images/d22.jpg";
|
||||
import d35 from "../../../../src/assets/Images/d35.jpeg";
|
||||
import d36 from "../../../../src/assets/Images/d36.jpg";
|
||||
|
||||
function ProjectsTimeline({
|
||||
projects,
|
||||
mainTitle = "المشاريع المنفذة",
|
||||
subtitle = "خط زمني شامل للأعمال والإنجازات",
|
||||
plain = false,
|
||||
}) {
|
||||
const wrapperRef = useRef(null);
|
||||
const scrollRef = useRef(null);
|
||||
const svgRef = useRef(null);
|
||||
const [itemsRefs, setItemsRefs] = useState([]);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
setItemsRefs((r) => {
|
||||
const arr = Array(projects.length).fill().map((_, i) => r[i] || React.createRef());
|
||||
return arr;
|
||||
});
|
||||
}, [projects.length]);
|
||||
|
||||
const drawCurvedLines = useCallback(() => {
|
||||
const svgEl = svgRef.current;
|
||||
const wrapper = wrapperRef.current;
|
||||
if (!svgEl || !wrapper) return;
|
||||
|
||||
while (svgEl.firstChild) svgEl.removeChild(svgEl.firstChild);
|
||||
svgEl.setAttribute("width", wrapper.scrollWidth);
|
||||
svgEl.setAttribute("height", wrapper.offsetHeight);
|
||||
|
||||
if (!itemsRefs || itemsRefs.length < 2) return;
|
||||
|
||||
const svgNS = "http://www.w3.org/2000/svg";
|
||||
const defs = document.createElementNS(svgNS, "defs");
|
||||
const gradient = document.createElementNS(svgNS, "linearGradient");
|
||||
gradient.setAttribute("id", "timeline-gradient");
|
||||
gradient.setAttribute("x1", "0%");
|
||||
gradient.setAttribute("y1", "0%");
|
||||
gradient.setAttribute("x2", "100%");
|
||||
gradient.setAttribute("y2", "0%");
|
||||
|
||||
const stop1 = document.createElementNS(svgNS, "stop");
|
||||
stop1.setAttribute("offset", "0%");
|
||||
stop1.setAttribute("style", "stop-color:#0f172a;stop-opacity:1");
|
||||
|
||||
const stop2 = document.createElementNS(svgNS, "stop");
|
||||
stop2.setAttribute("offset", "50%");
|
||||
stop2.setAttribute("style", "stop-color:#f97316;stop-opacity:1");
|
||||
|
||||
const stop3 = document.createElementNS(svgNS, "stop");
|
||||
stop3.setAttribute("offset", "100%");
|
||||
stop3.setAttribute("style", "stop-color:#9ca3af;stop-opacity:1");
|
||||
|
||||
gradient.appendChild(stop1);
|
||||
gradient.appendChild(stop2);
|
||||
gradient.appendChild(stop3);
|
||||
defs.appendChild(gradient);
|
||||
svgEl.appendChild(defs);
|
||||
|
||||
for (let i = 0; i < itemsRefs.length - 1; i++) {
|
||||
const item1 = itemsRefs[i].current;
|
||||
const item2 = itemsRefs[i + 1].current;
|
||||
if (!item1 || !item2) continue;
|
||||
|
||||
const circle1 = item1.querySelector(".year-circle");
|
||||
const circle2 = item2.querySelector(".year-circle");
|
||||
if (!circle1 || !circle2) continue;
|
||||
|
||||
const rect1 = circle1.getBoundingClientRect();
|
||||
const rect2 = circle2.getBoundingClientRect();
|
||||
const wrapperRect = wrapper.getBoundingClientRect();
|
||||
|
||||
const x1 = rect1.left - wrapperRect.left + rect1.width / 2;
|
||||
const y1 = rect1.top - wrapperRect.top + rect1.height / 2;
|
||||
const x2 = rect2.left - wrapperRect.left + rect2.width / 2;
|
||||
const y2 = rect2.top - wrapperRect.top + rect2.height / 2;
|
||||
|
||||
const controlPointOffset = Math.abs(x2 - x1) * 0.4;
|
||||
const cx1 = x1 - controlPointOffset;
|
||||
const cy1 = y1 - 40;
|
||||
const cx2 = x2 + controlPointOffset;
|
||||
const cy2 = y2 - 40;
|
||||
|
||||
const path = document.createElementNS(svgNS, "path");
|
||||
const d = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
|
||||
path.setAttribute("d", d);
|
||||
path.setAttribute("stroke", "url(#timeline-gradient)");
|
||||
path.setAttribute("stroke-width", "4");
|
||||
path.setAttribute("fill", "none");
|
||||
path.setAttribute("stroke-linecap", "round");
|
||||
path.style.filter = "drop-shadow(0 2px 8px rgba(15,23,42,0.22))";
|
||||
svgEl.appendChild(path);
|
||||
}
|
||||
}, [itemsRefs]);
|
||||
|
||||
const setActiveItem = useCallback(
|
||||
(index) => {
|
||||
setCurrentIndex(index);
|
||||
itemsRefs.forEach((ref, i) => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
if (i === index) el.classList.add("active");
|
||||
else el.classList.remove("active");
|
||||
});
|
||||
},
|
||||
[itemsRefs]
|
||||
);
|
||||
|
||||
const scrollToItem = useCallback(
|
||||
(index) => {
|
||||
if (index < 0 || index >= itemsRefs.length) return;
|
||||
const scrollContainer = scrollRef.current;
|
||||
const item = itemsRefs[index].current;
|
||||
if (!scrollContainer || !item) return;
|
||||
|
||||
const itemRect = item.getBoundingClientRect();
|
||||
const containerRect = scrollContainer.getBoundingClientRect();
|
||||
const scrollLeft = scrollContainer.scrollLeft;
|
||||
|
||||
const targetScroll =
|
||||
scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
|
||||
|
||||
scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
|
||||
setActiveItem(index);
|
||||
},
|
||||
[itemsRefs, setActiveItem]
|
||||
);
|
||||
|
||||
const onPrev = () => {
|
||||
if (currentIndex > 0) scrollToItem(currentIndex - 1);
|
||||
};
|
||||
const onNext = () => {
|
||||
if (currentIndex < itemsRefs.length - 1) scrollToItem(currentIndex + 1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => {
|
||||
drawCurvedLines();
|
||||
setActiveItem(0);
|
||||
}, 100);
|
||||
|
||||
const scrollContainer = scrollRef.current;
|
||||
let scrollTimeout = null;
|
||||
|
||||
const onScroll = () => {
|
||||
clearTimeout(scrollTimeout);
|
||||
scrollTimeout = setTimeout(() => {
|
||||
const containerRect = scrollContainer.getBoundingClientRect();
|
||||
const containerCenter = containerRect.left + containerRect.width / 2;
|
||||
|
||||
let closestIndex = 0;
|
||||
let closestDistance = Infinity;
|
||||
|
||||
itemsRefs.forEach((ref, index) => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
const itemRect = el.getBoundingClientRect();
|
||||
const itemCenter = itemRect.left + itemRect.width / 2;
|
||||
const distance = Math.abs(containerCenter - itemCenter);
|
||||
if (distance < closestDistance) {
|
||||
closestDistance = distance;
|
||||
closestIndex = index;
|
||||
}
|
||||
});
|
||||
|
||||
if (closestIndex !== currentIndex) {
|
||||
setActiveItem(closestIndex);
|
||||
}
|
||||
}, 150);
|
||||
};
|
||||
|
||||
if (scrollContainer) scrollContainer.addEventListener("scroll", onScroll);
|
||||
const onResize = () => setTimeout(drawCurvedLines, 120);
|
||||
window.addEventListener("resize", onResize);
|
||||
|
||||
return () => {
|
||||
clearTimeout(t);
|
||||
if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
|
||||
window.removeEventListener("resize", onResize);
|
||||
};
|
||||
}, [itemsRefs, drawCurvedLines, setActiveItem]);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => drawCurvedLines(), 120);
|
||||
}, [itemsRefs, drawCurvedLines, projects.length]);
|
||||
|
||||
const css = `
|
||||
:root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
|
||||
.projects-timeline-root { direction: rtl; min-height: 100%; }
|
||||
.timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
|
||||
.timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
|
||||
.timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
|
||||
.svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
|
||||
.timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
|
||||
.year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; }
|
||||
.timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
|
||||
.timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
|
||||
@keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
|
||||
.project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
|
||||
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
|
||||
.timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
|
||||
.timeline-item.active .project-card::before { opacity:1; }
|
||||
.project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
|
||||
.project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
|
||||
.timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
|
||||
.scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
|
||||
.scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
|
||||
.scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
|
||||
.scroll-btn:active:not(:disabled){ transform: scale(1.05); }
|
||||
.scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
|
||||
@media (max-width:768px){
|
||||
.timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
|
||||
.timeline-item { margin:0 18px; }
|
||||
.year-circle { width:90px; height:90px; font-size:15px; }
|
||||
.timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
|
||||
.project-card { min-width:260px; max-width:300px; padding:20px; }
|
||||
.project-text { font-size:13px; }
|
||||
.scroll-btn { width:48px; height:48px; font-size:20px; }
|
||||
}
|
||||
|
||||
.projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
|
||||
.projects-timeline-root.plain-bleed .project-card { max-width:420px; }
|
||||
`;
|
||||
|
||||
const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
|
||||
|
||||
return (
|
||||
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
|
||||
<style>{css}</style>
|
||||
<main className="w-full h-full overflow-hidden" style={mainStyle}>
|
||||
<div className="h-full flex flex-col">
|
||||
{!plain && (
|
||||
<header className="text-center py-8 px-4">
|
||||
<h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
|
||||
{mainTitle}
|
||||
</h1>
|
||||
<p id="subtitle" className={`${plain ? "text-base text-gray-700" : "text-xl text-white opacity-90"}`}>{subtitle}</p>
|
||||
</header>
|
||||
)}
|
||||
|
||||
<div className="flex-1 relative">
|
||||
<div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label="خط زمني قابل للتمرير">
|
||||
<div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
|
||||
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
|
||||
{projects.map((project, idx) => (
|
||||
<div
|
||||
className="timeline-item"
|
||||
key={idx}
|
||||
ref={itemsRefs[idx]}
|
||||
data-index={idx}
|
||||
onClick={() => scrollToItem(idx)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") scrollToItem(idx);
|
||||
}}
|
||||
>
|
||||
<div className="year-circle">{project.year}</div>
|
||||
<div className="project-card">
|
||||
<ul className="project-text" aria-live="polite">
|
||||
{project.items.map((it, i) => (
|
||||
<li key={i}>• {it}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="scroll-indicator">
|
||||
<button className="scroll-btn" aria-label="السابق" onClick={onPrev} disabled={currentIndex === 0} title="السابق">◄</button>
|
||||
<button className="scroll-btn" aria-label="التالي" onClick={onNext} disabled={currentIndex === projects.length - 1} title="التالي">►</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const defaultProjects = [
|
||||
{
|
||||
year: "1999-2015",
|
||||
items: [
|
||||
"أتمتة منظومات التحكم و التشغيل لمعاهد صهر ودرفلة الحديد (الوهيب - العربية - الدولية).",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2023",
|
||||
items: [
|
||||
"أتمتة التحكم بالتجهيزات الصناعية وخطوط الإنتاج للفحص والمعايرة والتشغيل عبر تابلت.",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2023-2024",
|
||||
items: [
|
||||
"إنشاء وتطوير نظام FMS منصب في مستودعات وقود استراتيجية (جارٍ التشغيل حالياً).",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2024",
|
||||
items: [
|
||||
"أتمتة منظومات التحكم و التشغيل لخطوط الإنتاج (أمثلة: ألانام لإنتاج البكتيريا العضوية - الساروت لإنتاج الأدوية البيطرية).",
|
||||
"إنشاء أنظمة ERP لشركات (PEA - REXOS).",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function DepartmentDetail9() {
|
||||
const [active, setActive] = useState(null);
|
||||
|
||||
const buttons = [
|
||||
{ id: 1, title: "اختصاص القسم", key: "expertise" },
|
||||
{ id: 2, title: "الاعمال المنفذة", key: "works" },
|
||||
];
|
||||
|
||||
const expertiseItems = [
|
||||
{
|
||||
icon: (
|
||||
// control panel / PLC-like
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<rect x="3" y="4" width="18" height="16" rx="2" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M7 8h.01M11 8h.01M15 8h.01M7 12h10" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
),
|
||||
text: "تصميم وتنفيذ أنظمة التحكم الصناعية."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
// automation line
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M3 7h4l2 6h6l2-6h4M5 21h14" />
|
||||
</svg>
|
||||
),
|
||||
text: "أتمتة خطوط الإنتاج والمنشآت وأنظمة المراقبة التشغيلية مع توريد التجهيزات اللازمة."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
// SCADA/monitor
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<rect x="2" y="3" width="20" height="14" rx="1.5" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M8 21h8M12 17v4" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
),
|
||||
text: "أنظمة SCADA و PLC."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
// fuel management / station icon
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M3 7v10a2 2 0 002 2h10l4-4V7a2 2 0 00-2-2H5a2 2 0 00-2 2zM16 3v4" />
|
||||
</svg>
|
||||
),
|
||||
text: "تطوير وتنفيذ أنظمة إدارة محطات الوقود (FMS)."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
// integration / link
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M10 14a3 3 0 104 0M4 10a4 4 0 018 0M20 14a4 4 0 00-8 0" />
|
||||
</svg>
|
||||
),
|
||||
text: "ربط الأنظمة التشغيلية بالحلول البرمجية."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
// analytics / predict
|
||||
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M3 3v18h18" />
|
||||
<path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M7 14l3-3 4 4 5-7" />
|
||||
</svg>
|
||||
),
|
||||
text: "تحليل الأعطال والتنبؤ بالمشاكل قبل حدوثها، ورفع كفاءة التشغيل وتقليل الفاقد والتكاليف."
|
||||
},
|
||||
];
|
||||
|
||||
const handleButtonClick = (key) => {
|
||||
setActive((prev) => (prev === key ? null : key));
|
||||
};
|
||||
|
||||
const heroImage = active === "expertise" ? d35 : active === "works" ? d36 : d22;
|
||||
|
||||
return (
|
||||
<div dir="rtl" className="w-full min-h-screen bg-white pb-12">
|
||||
<section className="relative">
|
||||
<div className="w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={active}
|
||||
initial={{ opacity: 0, scale: 1.03 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.98 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="relative h-72 sm:h-80 md:h-[480px] lg:h-[580px] overflow-visible"
|
||||
>
|
||||
<img
|
||||
src={heroImage}
|
||||
alt="قسم الأتمتة والتحكم"
|
||||
className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.18, duration: 0.45 }}
|
||||
className="absolute inset-0 bg-gradient-to-r from-slate-900/85 via-slate-800/70 to-slate-900/55 z-5"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0 z-10 flex items-center pointer-events-none">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
{active === "expertise" ? (
|
||||
<motion.div key="exp" initial={{ opacity: 0, x: -40 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 40 }} transition={{ duration: 0.45 }} className="text-white max-w-4xl">
|
||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">اختصاص القسم</div>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold leading-tight mb-3 sm:mb-6">قسم الأتمتة والتحكم</h2>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold">
|
||||
يختص هذا القسم بتقديم حلول الأتمتة والتحكم والتحول الرقمي لجميع المنشآت الصناعية والهندسية وخطوط الإنتاج، ويشمل:
|
||||
</p>
|
||||
</motion.div>
|
||||
) : active === "works" ? (
|
||||
<motion.div key="works" initial={{ opacity: 0, x: -40 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 40 }} transition={{ duration: 0.45 }} className="text-white max-w-4xl">
|
||||
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">الأعمال المنفذة</div>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold leading-tight mb-3 sm:mb-6">الأعمال المنفذة</h2>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold">أمثلة على أنظمة أتمتة وتحكم ونظم رقمية نفذناها للعملاء.</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="def" initial={{ opacity: 0, x: -40 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 40 }} transition={{ duration: 0.45 }} className="text-white max-w-4xl">
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold leading-tight">قسم الأتمتة والتحكم</h2>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto" style={{ zIndex: 99999 }}>
|
||||
<AnimatePresence>
|
||||
{!active && (
|
||||
<motion.div key="buttons" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.45 }} className="w-full max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
|
||||
{buttons.map((b, i) => (
|
||||
<motion.button
|
||||
key={b.id}
|
||||
initial={{ opacity: 0, y: 18 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.06, duration: 0.45 }}
|
||||
onClick={() => handleButtonClick(b.key)}
|
||||
whileHover={{ scale: 1.03, y: -6 }}
|
||||
className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/85 backdrop-blur-sm"
|
||||
>
|
||||
<div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl">
|
||||
{b.id}
|
||||
</div>
|
||||
<h3 className="text-sm sm:text-base font-bold text-gray-800">{b.title}</h3>
|
||||
</div>
|
||||
<p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2">
|
||||
<span>انقر للاطّلاع على التفاصيل</span>
|
||||
<svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 z-10">
|
||||
<svg className="w-full h-12 sm:h-16 md:h-24" viewBox="0 0 1200 120" preserveAspectRatio="none">
|
||||
<path d="M0,0 C300,80 900,80 1200,0 L1200,120 L0,120 Z" fill="#ffffff" opacity="1"/>
|
||||
</svg>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
|
||||
<AnimatePresence mode="wait">
|
||||
{!active ? (
|
||||
<motion.div key="spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
|
||||
) : active === "works" ? (
|
||||
<motion.div key="timeline" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
|
||||
<motion.button onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/></svg>
|
||||
<span>العودة للقائمة الرئيسية</span>
|
||||
</motion.button>
|
||||
|
||||
<div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
|
||||
<ProjectsTimeline projects={defaultProjects} plain={true} />
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="details" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
|
||||
<motion.button onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2">
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/></svg>
|
||||
<span>العودة للقائمة الرئيسية</span>
|
||||
</motion.button>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
|
||||
{expertiseItems.map((item, idx) => (
|
||||
<motion.div key={idx} initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, amount: 0.25 }} transition={{ delay: idx * 0.06, duration: 0.45 }} className="relative group">
|
||||
<div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
|
||||
<div className="relative flex-shrink-0">
|
||||
<motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg relative z-10">
|
||||
{item.icon}
|
||||
</motion.div>
|
||||
<div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-25 transition-opacity duration-300" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 pt-1">
|
||||
<p className="text-sm md:text-base text-gray-800 leading-relaxed font-medium">{item.text}</p>
|
||||
</div>
|
||||
|
||||
<motion.div initial={{ opacity: 0, x: -8 }} whileHover={{ opacity: 1, x: 0 }} className="flex-shrink-0 text-amber-500 opacity-0 group-hover:opacity-100 transition-all duration-300">
|
||||
<svg className="w-4 h-4 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/></svg>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-2 sm:mt-6 pt-4 border-t-2 border-gray-100 text-center col-span-full">
|
||||
<div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
|
||||
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
|
||||
<span className="text-xs sm:text-sm font-medium">للاطلاع على المزيد من الأعمال راجع "الأعمال المنفذة".</span>
|
||||
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -80,6 +80,22 @@ function DepartmentCard({ dept, offset }) {
|
||||
const y = useTransform([velocityParallax, progressParallax], ([v, p]) => v + p);
|
||||
|
||||
const handleClick = () => {
|
||||
if (dept.id === 1) {
|
||||
navigate("/departments/:id");
|
||||
}
|
||||
if (dept.id === 9) {
|
||||
navigate("/department-detail9");
|
||||
}
|
||||
if (dept.id === 8) {
|
||||
navigate("/department-detail8");
|
||||
}
|
||||
if (dept.id === 7) {
|
||||
navigate("/department-detail7");
|
||||
}
|
||||
if (dept.id === 6) {
|
||||
navigate("/department-detail6");
|
||||
}
|
||||
|
||||
if (dept.id === 5) {
|
||||
navigate("/department-detail5");
|
||||
}
|
||||
|
||||
BIN
src/assets/Images/d27.jpeg
Normal file
BIN
src/assets/Images/d27.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
BIN
src/assets/Images/d28.jpeg
Normal file
BIN
src/assets/Images/d28.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
BIN
src/assets/Images/d29.jpeg
Normal file
BIN
src/assets/Images/d29.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
src/assets/Images/d30.png
Normal file
BIN
src/assets/Images/d30.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 732 KiB |
BIN
src/assets/Images/d31.jpeg
Normal file
BIN
src/assets/Images/d31.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
src/assets/Images/d32.jpeg
Normal file
BIN
src/assets/Images/d32.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
src/assets/Images/d33.png
Normal file
BIN
src/assets/Images/d33.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 825 KiB |
BIN
src/assets/Images/d34.jpg
Normal file
BIN
src/assets/Images/d34.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
src/assets/Images/d35.jpeg
Normal file
BIN
src/assets/Images/d35.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
src/assets/Images/d36.jpg
Normal file
BIN
src/assets/Images/d36.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Reference in New Issue
Block a user