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

translation

Browse Source
This commit is contained in:
Beilin
2026-01-13 03:58:08 +03:00
parent 6987f87a92
commit 3e82aab933
14 changed files with 2049 additions and 1326 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx
View File

@ -1,14 +1,20 @@
// DepartmentDetail5.jsx
import React, { useState, useEffect, useRef, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useTranslation } from "react-i18next";
import d18 from "../../../../src/assets/Images/d18.jpg";
import d25 from "../../../../src/assets/Images/d25.jpeg";
import d26 from "../../../../src/assets/Images/d26.jpeg";
/**
* ProjectsTimeline: same logic as original, accepts rtl prop to flip text-align and small behaviors.
*/
function ProjectsTimeline({
projects,
mainTitle = "المشاريع المنفذة",
subtitle = "خط زمني شامل للأعمال والإنجازات",
plain = false,
rtl = true
}) {
const wrapperRef = useRef(null);
const scrollRef = useRef(null);
@ -192,7 +198,7 @@ function ProjectsTimeline({
const css = `
:root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
.projects-timeline-root { direction: rtl; min-height: 100%; }
.projects-timeline-root { direction: ${rtl ? "rtl" : "ltr"}; min-height: 100%; }
.timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
.timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
@ -209,34 +215,36 @@ function ProjectsTimeline({
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
.timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
.timeline-item.active .project-card::before { opacity:1; }
.project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; }
.project-text li { margin-bottom:12px; padding-right:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
.timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(-4px); }
.scroll-indicator { position:absolute; bottom:8px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
.project-text { font-size:15px; line-height:2; color:#0b1220; font-weight:600; text-align: ${rtl ? "right" : "left"}; }
.project-text li { margin-bottom:12px; padding-inline:12px; transition:all .3s ease; border-radius:8px; padding:8px 12px; }
.timeline-item.active .project-text li:hover { background: rgba(249,115,22,.06); transform: translateX(${rtl ? "-4px" : "4px"}); }
.scroll-indicator { position:absolute; bottom:30px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:10; }
.scroll-btn { background: linear-gradient(135deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.82) 100%); border:none; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; color:var(--accent); box-shadow:0 6px 20px rgba(2,6,23,.35); transition:all .4s cubic-bezier(.34,1.56,.64,1); backdrop-filter: blur(6px); }
.scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
.scroll-btn:active:not(:disabled){ transform: scale(1.05); }
.scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
@media (max-width:768px){
.timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; align-items:flex-start; }
.timeline-item { margin:0 18px; }
.year-circle { width:90px; height:90px; font-size:15px; }
.timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
.project-card { min-width:260px; max-width:320px; padding:18px; margin-top:18px; }
.timeline-wrapper { padding:clamp(18px,4vw,36px) 16px; align-items:flex-start; }
.timeline-item { margin:0 12px; }
.year-circle { width:64px !important; height:64px !important; font-size:13px !important; }
.timeline-item.active .year-circle { width:96px !important; height:96px !important; font-size:16px !important; transform: translateY(-10px) scale(1.02); }
.project-card { width: clamp(160px, 72vw, 300px); padding:16px; margin-top:18px; }
.project-text { font-size:13px; line-height:1.6; }
.scroll-btn { width:48px; height:48px; font-size:20px; }
.scroll-indicator { bottom:10px; }
.scroll-btn { width:44px; height:44px; font-size:18px; }
.scroll-indicator { position:relative; bottom:auto; left:auto; transform:none; margin:12px auto 0; justify-content:center; }
.projects-timeline-root { overflow-y: hidden; }
}
@media (max-width:420px){
.timeline-wrapper { padding:16px 12px; align-items:flex-start; }
.timeline-item { margin:0 10px; }
.project-card { width: calc(100vw - 56px); max-width:340px; min-width:140px; padding:12px; margin-top:12px; border-radius:14px; }
.project-text { font-size:13px; line-height:1.4; }
.project-text li { margin-bottom:8px; padding-right:10px; padding:6px 10px; }
.timeline-wrapper { padding:18px 12px; }
.timeline-item { margin:0 8px; }
.project-card { width: calc(100vw - 56px); max-width:320px; min-width:140px; padding:12px; margin-top:12px; border-radius:14px; }
.project-text { font-size:12px; line-height:1.4; }
.project-text li { margin-bottom:8px; padding-inline:10px; padding:6px 10px; }
.year-circle { width:56px !important; height:56px !important; font-size:12px !important; }
.timeline-item.active .year-circle { width:88px !important; height:88px !important; font-size:15px !important; transform: translateY(-8px) scale(1.02); }
.scroll-indicator { bottom:6px; }
.svg-container { display:block; }
.scroll-indicator { bottom:12px; }
}
.projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
@ -260,7 +268,7 @@ function ProjectsTimeline({
)}
<div className="flex-1 relative">
<div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label="خط زمني قابل للتمرير">
<div className="timeline-scroll h-full" id="timeline-scroll" ref={scrollRef} aria-label={rtl ? "خط زمني قابل للتمرير" : "Scrollable timeline"}>
<div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
{projects.map((project, idx) => (
@ -290,8 +298,8 @@ 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={rtl ? "السابق" : "Previous"} onClick={onPrev} disabled={currentIndex === 0} title={rtl ? "السابق" : "Previous"}>◄</button>
<button className="scroll-btn" aria-label={rtl ? "التالي" : "Next"} onClick={onNext} disabled={currentIndex === projects.length - 1} title={rtl ? "التالي" : "Next"}>►</button>
</div>
</div>
</div>
@ -300,135 +308,95 @@ function ProjectsTimeline({
);
}
/** fallback timeline (used if translations missing) */
const defaultProjects = [
{
year: "2009-2010",
items: [
"تدقيق ومطابقة المخططات الهندسية والتكنولوجية لخطوط الدرفلة وصهر الحد - الشركة المصنعة: دانييلي (إيطاليا) 2009-2010",
],
"تدقيق ومطابقة المخططات الهندسية والتكنولوجية لخطوط الدرفلة وصهر الحد - الشركة المصنعة: دانييلي (إيطاليا) 2009-2010"
]
},
{
year: "2007-2008",
items: [
"تدقيق ومطابقة المخططات الهندسية والتكنولوجية - الشركة المصنعة: SMS (إيطاليا) 2007-2008",
],
"تدقيق ومطابقة المخططات الهندسية والتكنولوجية - الشركة المصنعة: SMS (إيطاليا) 2007-2008"
]
},
{
year: "2015",
items: [
"التفتيش والاختبارات لخطوط والخزانات لدى الشركة السورية لنقل النفط (2015)",
],
"التفتيش والاختبارات لخطوط والخزانات لدى الشركة السورية لنقل النفط (2015)"
]
},
{
year: "2018",
items: [
"التفتيش الفني والاختبارات لخزانات غاز الراموسة في حلب (2018)",
],
"التفتيش الفني والاختبارات لخزانات غاز الراموسة في حلب (2018)"
]
},
{
year: "2022",
items: [
"التفتيش الفني والاختبارات لقواعد وهيكل الفرن في معمل المتحدة للأسمنت - أبو الشامات (2022)",
],
"التفتيش الفني والاختبارات لقواعد وهيكل الفرن في معمل المتحدة للأسمنت - أبو الشامات (2022)"
]
},
{
year: "2017-2019",
items: [
"التفتيش الفني والاختبارات لخزانات شركة محروقات سادكوب شنشار - بوقا - عدرا (2017-2019)",
],
"التفتيش الفني والاختبارات لخزانات شركة محروقات سادكوب شنشار - بوقا - عدرا (2017-2019)"
]
},
{
year: "2023-2024",
items: [
"إجراء الفحص الفني لخزانات مستودعات وقود MTN-SYRIATEL الاستراتيجية والثانوية (2023-2024)",
],
},
"إجراء الفحص الفني لخزانات مستودعات وقود MTN-SYRIATEL الاستراتيجية والثانوية (2023-2024)"
]
}
];
export default function DepartmentDetail5() {
const { t, i18n } = useTranslation();
const [active, setActive] = useState(null);
// direction: rely on i18n.dir() if available, otherwise language prefix
const isRTL = typeof i18n.dir === "function" ? i18n.dir() === "rtl" : (i18n.language || "").startsWith("ar");
const dir = isRTL ? "rtl" : "ltr";
const buttons = [
{ id: 1, title: "اختصاص القسم", key: "expertise", img: d25 },
{ id: 3, title: "الاعمال المنفذة", key: "works", img: d26 },
{ id: 1, title: t("departmentDetail5.buttons.1"), key: "expertise", img: d25 },
{ id: 3, title: t("departmentDetail5.buttons.3"), key: "works", img: d26 }
];
const expertiseItems = [
{
icon: (
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 8v4l3 3" />
</svg>
),
text: "إجراء الفحوصات غير الإتلافية (NDT) للكشف عن العيوب الخفية في المكونات المعدنية.",
},
{
icon: (
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M3 7h18M3 12h18M3 17h18" />
</svg>
),
text: "فحص اللحامات باستخدام:",
},
{
icon: (
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z" />
</svg>
),
text: "Ultrasonic Testing (UT) - الفحص بالموجات فوق الصوتية.",
},
{
icon: (
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z" />
</svg>
),
text: "Magnetic Particle Testing (MT) - الفحص بالجسيمات المغناطيسية.",
},
{
icon: (
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 7h16M4 12h16M4 17h8" />
</svg>
),
text: "Penetrant Testing (PT) - الفحص بالسوائل المتغلغلة.",
},
{
icon: (
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M5 12h14M12 5v14" />
</svg>
),
text: "Visual Testing (VT) - الفحص البصري وتقييم جودة اللحام ومطابقته للمواصفات.",
},
{
icon: (
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M3 7h18M3 12h18M3 17h18" />
</svg>
),
text: "تدقيق ومطابقة المخططات التكنولوجية والهندسية لأعمال التصنيع المعدني، الميكانيكي، الكهربائي ومنظومات التحكم.",
},
{
icon: (
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 8v4l3 3" />
</svg>
),
text: "تدقيق ومطابقة جاهزية المعدات الهندسية وملائمتها للمعايير العالمية.",
},
{
icon: (
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z" />
</svg>
),
text: "الالتزام بتطبيق معايير السلامة المهنية والجودة أثناء تنفيذ أعمال التفتيش.",
},
// expertise items (translation array)
const expertiseItemsRaw = t("departmentDetail5.expertiseItems", { returnObjects: true });
const expertiseItems = Array.isArray(expertiseItemsRaw) && expertiseItemsRaw.length > 0 ? expertiseItemsRaw : [
"إجراء الفحوصات غير الإتلافية (NDT) للكشف عن العيوب الخفية في المكونات المعدنية.",
"فحص اللحامات باستخدام:",
"Ultrasonic Testing (UT) - الفحص بالموجات فوق الصوتية.",
"Magnetic Particle Testing (MT) - الفحص بالجسيمات المغناطيسية.",
"Penetrant Testing (PT) - الفحص بالسوائل المتغلغلة.",
"Visual Testing (VT) - الفحص البصري وتقييم جودة اللحام ومطابقته للمواصفات.",
"تدقيق ومطابقة المخططات التكنولوجية والهندسية لأعمال التصنيع المعدني، الميكانيكي، الكهربائي ومنظومات التحكم.",
"تدقيق ومطابقة جاهزية المعدات الهندسية وملائمتها للمعايير العالمية.",
"الالتزام بتطبيق معايير السلامة المهنية والجودة أثناء تنفيذ أعمال التفتيش."
];
const displayItems = expertiseItems;
const displayItems = expertiseItems.map((text, idx) => {
const icons = [
(<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`ic-${idx}-1`}><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 8v4l3 3" /></svg>),
(<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`ic-${idx}-2`}><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M3 7h18M3 12h18M3 17h18" /></svg>),
(<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`ic-${idx}-3`}><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z" /></svg>),
(<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`ic-${idx}-4`}><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z" /></svg>),
(<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`ic-${idx}-5`}><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 7h16M4 12h16M4 17h8" /></svg>)
];
const icon = icons[idx % icons.length] || icons[0];
return { icon, text };
});
// timeline translations or fallback
const timelineProjectsRaw = t("departmentDetail5.projectsTimeline.defaultProjects", { returnObjects: true });
const timelineProjects = Array.isArray(timelineProjectsRaw) && timelineProjectsRaw.length > 0 ? timelineProjectsRaw : defaultProjects;
const heroImage = active === "expertise" ? d25 : active === "works" ? d26 : d18;
const handleButtonClick = (key) => {
@ -436,7 +404,7 @@ export default function DepartmentDetail5() {
};
return (
<div dir="rtl" className="w-full min-h-screen bg-white pb-12">
<div dir={dir} className="w-full min-h-screen bg-white pb-12">
<section className="relative">
<div className="w-full">
<AnimatePresence mode="wait">
@ -450,7 +418,7 @@ export default function DepartmentDetail5() {
>
<img
src={heroImage}
alt="مرافق وخدمات التفتيش والفحص"
alt={t("departmentDetail5.hero.heroAlt")}
className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
/>
@ -466,19 +434,19 @@ export default function DepartmentDetail5() {
<AnimatePresence mode="wait">
{active === "expertise" ? (
<motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">اختصاص القسم</div>
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">يقدم خدمات الفحص والتفتيش الهندسي وفق المعايير الدولية المعتمدة، ويشمل:</h2>
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">الاطّلاع على البطاقات أدناه للحصول على تفاصيل كل خدمة.</p>
<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("departmentDetail5.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("departmentDetail5.hero.expertiseTitle")}</h2>
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail5.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">
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">الاعمال المنفذة</div>
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">الاعمال المنفذة</h2>
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.</p>
<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("departmentDetail5.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("departmentDetail5.hero.worksTitle")}</h2>
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail5.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">
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">قسم التفتيش والفحص الفني و الهندسي</h2>
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">{t("departmentDetail5.hero.defaultTitle")}</h2>
</motion.div>
)}
</AnimatePresence>
@ -506,11 +474,10 @@ export default function DepartmentDetail5() {
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"
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-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
<div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
<div className="relative z-10">
<div className="flex items-center gap-3 mb-3">
<div className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-xl group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">
@ -519,7 +486,7 @@ export default function DepartmentDetail5() {
<h3 className="text-sm sm:text-base font-bold text-gray-800 group-hover:text-amber-700 transition-colors duration-300">{b.title}</h3>
</div>
<p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2 group-hover:text-amber-600 transition-colors duration-300">
<span>انقر للاطّلاع على التفاصيل</span>
<span>{t("departmentDetail5.buttons.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>
@ -562,14 +529,14 @@ export default function DepartmentDetail5() {
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 text-right 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">انقر للاطّلاع على التفاصيل</p>
<p className="text-xs text-gray-600 mt-1">{t("departmentDetail5.buttons.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"/>
@ -592,11 +559,11 @@ export default function DepartmentDetail5() {
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
</svg>
<span>العودة للقائمة الرئيسية</span>
<span>{t("departmentDetail5.buttons.backToMenu")}</span>
</motion.button>
<div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
<ProjectsTimeline projects={defaultProjects} plain={true} />
<ProjectsTimeline projects={timelineProjects} plain={true} rtl={isRTL} />
</div>
</motion.div>
) : (
@ -605,7 +572,7 @@ export default function DepartmentDetail5() {
<svg className="w-5 h-5 sm:w-6 sm:h-6 transition-transform group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
</svg>
<span>العودة للقائمة الرئيسية</span>
<span>{t("departmentDetail5.buttons.backToMenu")}</span>
</motion.button>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
@ -618,7 +585,7 @@ export default function DepartmentDetail5() {
transition={{ delay: index * 0.08, duration: 0.5 }}
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 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 ${isRTL ? "text-right" : "text-left"}`}>
<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 text-base sm:text-2xl font-extrabold shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
{item.icon}
@ -643,7 +610,7 @@ export default function DepartmentDetail5() {
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-8 sm:mt-12 pt-6 border-t-2 border-gray-100 text-center">
<div className="inline-flex items-center gap-2 sm:gap-3 text-gray-500">
<div className="w-2 h-2 bg-amber-500 rounded-full animate-pulse" />
<span className="text-xs sm:text-sm font-medium">خدمات احترافية متكاملة</span>
<span className="text-xs sm:text-sm font-medium">{t("departmentDetail5.ui.servicesProfessional")}</span>
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
</div>
</motion.div>