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

Merge branch 'main' of http://45.93.137.91:3000/Rahaf/REXNT
All checks were successful
Build frontend / build (push) Successful in 32s
Details

Browse Source
This commit is contained in:
Beilin
2026-01-13 22:04:11 +03:00
parent a96b4fd326 5cf1e54c58
commit a7c577ee09
4 changed files with 724 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

396
src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
View File

@ -128,7 +128,11 @@ function ProjectsTimeline({
const scrollLeft = scrollContainer.scrollLeft;
const targetScroll =
scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
scrollLeft +
itemRect.left -
containerRect.left -
containerRect.width / 2 +
itemRect.width / 2;
scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
setActiveItem(index);
@ -185,7 +189,8 @@ function ProjectsTimeline({
return () => {
clearTimeout(t);
if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
if (scrollContainer)
scrollContainer.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onResize);
};
}, [itemsRefs, drawCurvedLines, setActiveItem]);
@ -236,25 +241,64 @@ function ProjectsTimeline({
.projects-timeline-root.plain-bleed .project-card { max-width:420px; }
`;
const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
const mainStyle = plain
? { background: "#ffffff", paddingBottom: 0 }
: {
background:
"linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)",
};
return (
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
<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)" }}>
<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>
<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}>
<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
@ -283,8 +327,24 @@ function ProjectsTimeline({
</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>
<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>
@ -293,7 +353,6 @@ function ProjectsTimeline({
);
}
const defaultProjects = [
{
year: "1999-2015",
@ -305,7 +364,10 @@ const defaultProjects = [
],
},
{ year: "2001", items: ["أعمال تشغيل وصيانة الدورة لمعمل الوهيب ستوك إير"] },
{ year: "2002", items: ["أعمال تشغيل وصيانة الدورة لمعمل العربية لدرفلة إير"] },
{
year: "2002",
items: ["أعمال تشغيل وصيانة الدورة لمعمل العربية لدرفلة إير"],
},
{ year: "2004", items: ["أعمال متنوعة في مجال الدرفلة والتصنيع"] },
{
year: "2016",
@ -314,7 +376,10 @@ const defaultProjects = [
"أي أم، التايتيك - التروت، تصميم وتنفيذ",
],
},
{ year: "2016-2017", items: ["التدريب العالمي 600 طن/يوم", "التدريب للصناعات الغذائية"] },
{
year: "2016-2017",
items: ["التدريب العالمي 600 طن/يوم", "التدريب للصناعات الغذائية"],
},
{ year: "2017", items: ["دراسة تأهيلية معمل الشمس (العسافي - حمص)"] },
{
year: "2019",
@ -324,8 +389,17 @@ const defaultProjects = [
],
},
{ year: "2020", items: ["استكمال دراسة تأهيلية للصم وقياس الشمس"] },
{ year: "2021", items: ["منشأ تيسير لمعمل المتحدة، تصميم الاسور - أبو الشامات"] },
{ year: "2022", items: ["استكمال منشأ تيسير لمعمل المتحدة", "معمل المثنى للتصنيع السريع - طرطوس"] },
{
year: "2021",
items: ["منشأ تيسير لمعمل المتحدة، تصميم الاسور - أبو الشامات"],
},
{
year: "2022",
items: [
"استكمال منشأ تيسير لمعمل المتحدة",
"معمل المثنى للتصنيع السريع - طرطوس",
],
},
{ year: "2023", items: ["مشاريع متنوعة في مجال التصنيع والدرفلة"] },
];
@ -339,7 +413,12 @@ export default function DepartmentDetail() {
{ id: 3, title: t("department.buttons.works"), key: "works" },
];
const expertiseItems = t("department.expertiseItems", { returnObjects: true }) || [
const expertiseItemsRaw = t("department.expertiseItems", {
returnObjects: true,
});
const expertiseItems = Array.isArray(expertiseItemsRaw)
? expertiseItemsRaw
: [
"دراسات الجدوى الاقتصادية وتحليل الربحية والمخاطر للمشاريع الصناعية والهندسية",
"الدراسات الهندسية الأولية والنهائية والتفصيلية",
"تصميم المخططات التنفيذية",
@ -349,7 +428,12 @@ export default function DepartmentDetail() {
"الإشراف على التشغيل التجريبي وتدريب الكوادر الفنية",
];
const servicesItems = t("department.servicesItems", { returnObjects: true }) || [
const servicesItemsRaw = t("department.servicesItems", {
returnObjects: true,
});
const servicesItems = Array.isArray(servicesItemsRaw)
? servicesItemsRaw
: [
"الصيانة الدورية والوقائية.",
"الصيانة الطارئة ومعالجة الأعطال.",
"إعادة التأهيل والتحديث الفني للمنشآت.",
@ -358,10 +442,18 @@ export default function DepartmentDetail() {
"رفع كفاءة التشغيل وتقليل تكاليف الأعطال",
];
const defaultProjectsTranslated = t("department.defaultProjects", { returnObjects: true }) || defaultProjects;
const defaultProjectsTranslated =
t("department.defaultProjects", { returnObjects: true }) || defaultProjects;
const displayItems = active === "services" ? servicesItems : expertiseItems;
const heroImage = active === "expertise" ? d2 : active === "services" ? d3 : active === "works" ? d4 : d1;
const heroImage =
active === "expertise"
? d2
: active === "services"
? d3
: active === "works"
? d4
: d1;
const handleButtonClick = (key) => {
setActive((prev) => (prev === key ? null : key));
@ -397,12 +489,21 @@ export default function DepartmentDetail() {
<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">
<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">
{t("department.hero.expertiseBadge") || "اختصاص القسم"}
{t("department.hero.expertiseBadge") ||
"اختصاص القسم"}
</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">
{t("department.hero.expertiseTitle") || "حلول متكاملة للمنشآت الصناعية"}
{t("department.hero.expertiseTitle") ||
"حلول متكاملة للمنشآت الصناعية"}
</h2>
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
{t("department.hero.expertiseSubtitle") ||
@ -410,19 +511,35 @@ export default function DepartmentDetail() {
</p>
</motion.div>
) : active === "services" ? (
<motion.div key="services-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">
<motion.div
key="services-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">
{t("department.hero.servicesBadge") || "خدمات القسم"}
</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">
{t("department.hero.servicesTitle") || "خدمات الصيانة للمنشآت وخطوط الإنتاج"}
{t("department.hero.servicesTitle") ||
"خدمات الصيانة للمنشآت وخطوط الإنتاج"}
</h2>
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
{t("department.hero.servicesSubtitle") || "يتضمن هذا القسم خدمات الصيانة الشاملة والدورية للمنشآت الصناعية وخطوط الانتاج، وتشمل:"}
{t("department.hero.servicesSubtitle") ||
"يتضمن هذا القسم خدمات الصيانة الشاملة والدورية للمنشآت الصناعية وخطوط الانتاج، وتشمل:"}
</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">
<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">
{t("department.hero.worksBadge") || "الأعمال المنفذة"}
</div>
@ -430,13 +547,22 @@ export default function DepartmentDetail() {
{t("department.hero.worksTitle") || "الأعمال المنفذة"}
</h2>
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
{t("department.hero.worksSubtitle") || "عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة."}
{t("department.hero.worksSubtitle") ||
"عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة."}
</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">
<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">
{t("department.sectionTitle") || "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج"}
{t("department.sectionTitle") ||
"قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج"}
</h2>
</motion.div>
)}
@ -444,7 +570,10 @@ export default function DepartmentDetail() {
</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 hidden md:block" style={{ zIndex: 99999 }}>
<div
className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block"
style={{ zIndex: 99999 }}
>
<AnimatePresence>
{!active && (
<motion.div
@ -462,7 +591,11 @@ export default function DepartmentDetail() {
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 } }}
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"
@ -474,12 +607,24 @@ export default function DepartmentDetail() {
<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>
<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>{t("department.clickForDetails")}</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
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>
@ -492,8 +637,16 @@ export default function DepartmentDetail() {
</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
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>
@ -526,11 +679,25 @@ export default function DepartmentDetail() {
{b.id}
</div>
<div className="flex-1">
<h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
<p className="text-xs text-gray-600 mt-1">{t("department.clickForDetails")}</p>
<h3 className="text-sm font-bold text-gray-800">
{b.title}
</h3>
<p className="text-xs text-gray-600 mt-1">
{t("department.clickForDetails")}
</p>
</div>
<svg className="w-5 h-5 text-amber-500" 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
className="w-5 h-5 text-amber-500"
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>
</motion.button>
))}
@ -543,25 +710,92 @@ export default function DepartmentDetail() {
<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" />
<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"/>
<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>{t("department.backToMenu")}</span>
</motion.button>
<div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
<ProjectsTimeline projects={defaultProjectsTranslated} plain={true} />
<div
style={{
position: "relative",
left: "50%",
right: "50%",
marginLeft: "-50vw",
marginRight: "-50vw",
width: "100vw",
}}
>
<ProjectsTimeline
projects={defaultProjectsTranslated}
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"/>
<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>{t("department.backToMenu")}</span>
</motion.button>
@ -578,19 +812,51 @@ export default function DepartmentDetail() {
>
<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">
<svg className="w-6 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>
<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"
>
<svg
className="w-6 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>
</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 group-hover:text-gray-900 transition-colors duration-300">{text}</p>
<p className="text-xs sm:text-sm md:text-base text-gray-800 leading-relaxed font-medium group-hover:text-gray-900 transition-colors duration-300">
{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.5" d="M15 19l-7-7 7-7"/>
<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.5"
d="M15 19l-7-7 7-7"
/>
</svg>
</motion.div>
</div>
@ -598,11 +864,21 @@ export default function DepartmentDetail() {
))}
</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">
<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">Professional integrated services</span>
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
<span className="text-xs sm:text-sm font-medium">
Professional integrated services
</span>
<div
className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"
style={{ animationDelay: "0.5s" }}
/>
</div>
</motion.div>
</motion.div>

427
src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx
View File

@ -15,7 +15,7 @@ function ProjectsTimeline({
dir = "rtl",
scrollLabel = "خط زمني قابل للتمرير",
prevLabel = "السابق",
nextLabel = "التالي"
nextLabel = "التالي",
}) {
const wrapperRef = useRef(null);
const scrollRef = useRef(null);
@ -131,7 +131,11 @@ function ProjectsTimeline({
const scrollLeft = scrollContainer.scrollLeft;
const targetScroll =
scrollLeft + itemRect.left - containerRect.left - containerRect.width / 2 + itemRect.width / 2;
scrollLeft +
itemRect.left -
containerRect.left -
containerRect.width / 2 +
itemRect.width / 2;
scrollContainer.scrollTo({ left: targetScroll, behavior: "smooth" });
setActiveItem(index);
@ -188,7 +192,8 @@ function ProjectsTimeline({
return () => {
clearTimeout(t);
if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
if (scrollContainer)
scrollContainer.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onResize);
};
}, [itemsRefs, drawCurvedLines, setActiveItem]);
@ -253,25 +258,65 @@ function ProjectsTimeline({
.projects-timeline-root.plain-bleed .project-card { max-width:420px; }
`;
const mainStyle = plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" };
const mainStyle = plain
? { background: "#ffffff", paddingBottom: 0 }
: {
background:
"linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)",
};
return (
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`} dir={dir}>
<div
className={`projects-timeline-root w-full h-full ${
plain ? "plain-bleed" : ""
}`}
dir={dir}
>
<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)" }}>
<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>
<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={scrollLabel}>
<div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
<div
className="timeline-scroll h-full"
id="timeline-scroll"
ref={scrollRef}
aria-label={scrollLabel}
>
<div
className="timeline-wrapper"
id="timeline-wrapper"
ref={wrapperRef}
>
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
{projects.map((project, idx) => (
<div
@ -300,8 +345,24 @@ function ProjectsTimeline({
</div>
<div className="scroll-indicator">
<button className="scroll-btn" aria-label={prevLabel} onClick={onPrev} disabled={currentIndex === 0} title={prevLabel}>◄</button>
<button className="scroll-btn" aria-label={nextLabel} onClick={onNext} disabled={currentIndex === projects.length - 1} title={nextLabel}>►</button>
<button
className="scroll-btn"
aria-label={prevLabel}
onClick={onPrev}
disabled={currentIndex === 0}
title={prevLabel}
>
◄
</button>
<button
className="scroll-btn"
aria-label={nextLabel}
onClick={onNext}
disabled={currentIndex === projects.length - 1}
title={nextLabel}
>
►
</button>
</div>
</div>
</div>
@ -319,7 +380,10 @@ export default function DepartmentDetail6() {
const cycleImgs = [d28, d27, d29];
const [cycleIndex, setCycleIndex] = useState(0);
useEffect(() => {
const tInterval = setInterval(() => setCycleIndex((i) => (i + 1) % cycleImgs.length), 3000);
const tInterval = setInterval(
() => setCycleIndex((i) => (i + 1) % cycleImgs.length),
3000
);
return () => clearInterval(tInterval);
}, []);
@ -330,11 +394,39 @@ export default function DepartmentDetail6() {
];
// card groups from translations
const cardGroups = t("departmentDetail6.cardGroups", { returnObjects: true });
const cardGroupsRaw = t("departmentDetail6.cardGroups", {
returnObjects: true,
});
const projectsTimeline = t("departmentDetail6.projectsTimeline.defaultProjects", { returnObjects: true });
const expertiseItemsRaw = t("departmentDetail6.expertiseItems", {
returnObjects: true,
});
const validExpertiseItems = Array.isArray(expertiseItemsRaw)
? expertiseItemsRaw
: [];
const heroImage = active === "expertise" ? cycleImgs[cycleIndex] : active === "works" ? d30 : d19;
const cardGroups = Array.isArray(cardGroupsRaw)
? cardGroupsRaw
: [
{
title:
t("departmentDetail6.hero.expertiseBadge") ||
"Department Expertise",
items: validExpertiseItems,
},
];
const projectsTimeline = t(
"departmentDetail6.projectsTimeline.defaultProjects",
{ returnObjects: true }
);
const heroImage =
active === "expertise"
? cycleImgs[cycleIndex]
: active === "works"
? d30
: d19;
const handleButtonClick = (key) => {
setActive((prev) => (prev === key ? null : key));
@ -347,7 +439,10 @@ export default function DepartmentDetail6() {
const backToMenu = t("departmentDetail6.backToMenu");
return (
<div dir={isRTL ? "rtl" : "ltr"} className="w-full min-h-screen bg-white pb-12">
<div
dir={isRTL ? "rtl" : "ltr"}
className="w-full min-h-screen bg-white pb-12"
>
<section className="relative">
<div className="w-full">
<AnimatePresence mode="wait">
@ -357,7 +452,11 @@ export default function DepartmentDetail6() {
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`}
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}
@ -376,27 +475,71 @@ export default function DepartmentDetail6() {
<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 ${isRTL ? 'text-right' : 'text-left'}`}>
<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">{t("departmentDetail6.hero.expertiseBadge")}</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">{t("departmentDetail6.hero.expertiseTitle")}</h2>
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail6.hero.expertiseSubtitle")}</p>
<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 ${
isRTL ? "text-right" : "text-left"
}`}
>
<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">
{t("departmentDetail6.hero.expertiseBadge")}
</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">
{t("departmentDetail6.hero.expertiseTitle")}
</h2>
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
{t("departmentDetail6.hero.expertiseSubtitle")}
</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 ${isRTL ? 'text-right' : 'text-left'}`}>
<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">{t("departmentDetail6.hero.worksBadge")}</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">{t("departmentDetail6.hero.worksTitle")}</h2>
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail6.hero.worksSubtitle")}</p>
<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 ${
isRTL ? "text-right" : "text-left"
}`}
>
<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">
{t("departmentDetail6.hero.worksBadge")}
</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">
{t("departmentDetail6.hero.worksTitle")}
</h2>
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">
{t("departmentDetail6.hero.worksSubtitle")}
</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 ${isRTL ? 'text-right' : 'text-left'}`}>
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">{t("departmentDetail6.hero.defaultTitle")}</h2>
<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 ${
isRTL ? "text-right" : "text-left"
}`}
>
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">
{t("departmentDetail6.hero.defaultTitle")}
</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 hidden md:block" style={{ zIndex: 99999 }}>
<div
className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block"
style={{ zIndex: 99999 }}
>
<AnimatePresence>
{!active && (
<motion.div
@ -414,10 +557,16 @@ export default function DepartmentDetail6() {
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 } }}
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 ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm`}
className={`group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full ${
isRTL ? "text-right" : "text-left"
} 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" />
@ -427,12 +576,24 @@ export default function DepartmentDetail6() {
<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>
<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>{ui.clickToView}</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
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>
@ -445,8 +606,16 @@ export default function DepartmentDetail6() {
</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
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>
@ -473,17 +642,33 @@ export default function DepartmentDetail6() {
transition={{ delay: index * 0.05, duration: 0.35 }}
whileHover={{ scale: 1.02 }}
onClick={() => handleButtonClick(b.key)}
className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${isRTL ? 'text-right' : 'text-left'} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
className={`group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 ${
isRTL ? "text-right" : "text-left"
} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90`}
>
<div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
{b.id}
</div>
<div className="flex-1">
<h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
<p className="text-xs text-gray-600 mt-1">{ui.clickToView}</p>
<h3 className="text-sm font-bold text-gray-800">
{b.title}
</h3>
<p className="text-xs text-gray-600 mt-1">
{ui.clickToView}
</p>
</div>
<svg className="w-5 h-5 text-amber-500" 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
className="w-5 h-5 text-amber-500"
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>
</motion.button>
))}
@ -496,21 +681,63 @@ export default function DepartmentDetail6() {
<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" />
<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 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-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"/>
<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 ${
isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-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>{backToMenu}</span>
</motion.button>
<div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
<div
style={{
position: "relative",
left: "50%",
right: "50%",
marginLeft: "-50vw",
marginRight: "-50vw",
width: "100vw",
}}
>
<ProjectsTimeline
projects={projectsTimeline}
plain={true}
dir={isRTL ? 'rtl' : 'ltr'}
dir={isRTL ? "rtl" : "ltr"}
mainTitle={t("departmentDetail6.hero.worksTitle")}
subtitle={t("departmentDetail6.hero.worksSubtitle")}
scrollLabel={t("departmentDetail6.scroll.ariaLabel")}
@ -520,36 +747,102 @@ export default function DepartmentDetail6() {
</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 ${isRTL ? 'mr-0 md:-mr-4' : 'ml-0 md:-ml-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"/>
<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 ${
isRTL ? "mr-0 md:-mr-4" : "ml-0 md:-ml-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>{backToMenu}</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
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">
<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
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>
<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
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>
@ -560,11 +853,21 @@ export default function DepartmentDetail6() {
))}
</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">
<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">{t("departmentDetail6.ui.servicesProfessional")}</span>
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
<span className="text-xs sm:text-sm font-medium">
{t("departmentDetail6.ui.servicesProfessional")}
</span>
<div
className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"
style={{ animationDelay: "0.5s" }}
/>
</div>
</motion.div>
</motion.div>

3
src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
View File

@ -325,7 +325,8 @@ export default function DepartmentDetail7() {
{ id: 2, title: t("departmentDetail7.buttons.2"), key: "works" },
];
const projectsTimeline = t("departmentDetail7.projectsTimeline.defaultProjects", { returnObjects: true });
const expertiseTexts = t("departmentDetail7.expertiseItems", { returnObjects: true });
const expertiseTextsRaw = t("departmentDetail7.expertiseItems", { returnObjects: true });
const expertiseTexts = Array.isArray(expertiseTextsRaw) ? expertiseTextsRaw : [];
const hero = t("departmentDetail7.hero", { returnObjects: true });
const ui = t("departmentDetail7.ui", { returnObjects: true });
const backToMenu = t("departmentDetail7.backToMenu");

5
src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
View File

@ -387,9 +387,12 @@ export default function DepartmentDetail8() {
"departmentDetail8.projectsTimeline.defaultProjects",
{ returnObjects: true }
);
const expertiseTexts = t("departmentDetail8.expertiseItems", {
const expertiseTextsRaw = t("departmentDetail8.expertiseItems", {
returnObjects: true,
});
const expertiseTexts = Array.isArray(expertiseTextsRaw)
? expertiseTextsRaw
: [];
const ui = t("departmentDetail8.ui", { returnObjects: true });
const backToMenu = t("departmentDetail8.backToMenu");
const scrollLabels = t("departmentDetail8.scroll", { returnObjects: true });