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

fix: guard projects and items mapping to prevent TypeError on button click
All checks were successful
Build frontend / build (push) Successful in 34s
Details

Browse Source
This commit is contained in:
mouazkh
2026-01-13 21:48:14 +03:00
parent 88ab4119e8
commit 5cf1e54c58
4 changed files with 724 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useTranslation } from "react-i18next";
import "../../../../src/i18n";
import "../../../../src/i18n";
import d1 from "../../../../src/assets/Images/d1.jpeg";
import d2 from "../../../../src/assets/Images/d2.jpeg";
@ -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,29 +413,47 @@ 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
: [
"دراسات الجدوى الاقتصادية وتحليل الربحية والمخاطر للمشاريع الصناعية والهندسية",
"الدراسات الهندسية الأولية والنهائية والتفصيلية",
"تصميم المخططات التنفيذية",
"تنفيذ الأعمال المدنية والمعمارية والمعدنية للمنشآت الصناعية",
"تصنيع وتركيب خطوط الإنتاج محلياً أو خطوط الانتاج المستوردة",
"تنفيذ الأعمال الميكانيكية والكهربائية وأنظمة التحكم",
"الإشراف على التشغيل التجريبي وتدريب الكوادر الفنية",
];
const servicesItems = t("department.servicesItems", { returnObjects: true }) || [
"الصيانة الدورية والوقائية.",
"الصيانة الطارئة ومعالجة الأعطال.",
"إعادة التأهيل والتحديث الفني للمنشآت.",
"فحص وتقييم الحالة الفنية للتجهيزات والآلات.",
"أعمال التفتيش الفني والهندسي وفق المعايير العالمية.",
"رفع كفاءة التشغيل وتقليل تكاليف الأعطال",
];
const servicesItemsRaw = t("department.servicesItems", {
returnObjects: true,
});
const servicesItems = Array.isArray(servicesItemsRaw)
? servicesItemsRaw
: [
"الصيانة الدورية والوقائية.",
"الصيانة الطارئة ومعالجة الأعطال.",
"إعادة التأهيل والتحديث الفني للمنشآت.",
"فحص وتقييم الحالة الفنية للتجهيزات والآلات.",
"أعمال التفتيش الفني والهندسي وفق المعايير العالمية.",
"رفع كفاءة التشغيل وتقليل تكاليف الأعطال",
];
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>

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

@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef, useCallback } from "react";
import React, { useState, useEffect, useRef, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useTranslation } from "react-i18next";
import d19 from "../../../../src/assets/Images/d19.jpeg";
@ -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 });