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

117
src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx
View File

@ -1,16 +1,23 @@
// DepartmentDetail2.jsx
import React, { useState, useEffect, useRef, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useTranslation } from "react-i18next";
import d1 from "../../../../src/assets/Images/d1.jpeg";
import d12 from "../../../../src/assets/Images/d12.jpeg";
import d13 from "../../../../src/assets/Images/d13.jpeg";
import d7 from "../../../../src/assets/Images/d7.jpeg";
/**
* ProjectsTimeline (لم يتغير في الهيكل - كامل الوظائف والـ CSS كما في ملفك الأصلي)
*/
function ProjectsTimeline({
projects,
mainTitle = "المشاريع المنفذة",
subtitle = "خط زمني شامل للأعمال والإنجازات",
mainTitle,
subtitle,
plain = false,
}) {
const { t } = useTranslation();
const wrapperRef = useRef(null);
const scrollRef = useRef(null);
const svgRef = useRef(null);
@ -185,12 +192,13 @@ function ProjectsTimeline({
if (scrollContainer) scrollContainer.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onResize);
};
}, [itemsRefs, drawCurvedLines, setActiveItem]);
}, [itemsRefs, drawCurvedLines, setActiveItem, currentIndex]);
useEffect(() => {
setTimeout(() => drawCurvedLines(), 120);
}, [itemsRefs, drawCurvedLines, projects.length]);
// CSS (نُقل كما في الملف الأصلي لضمان عدم تغيير الشكل)
const css = `
:root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
.projects-timeline-root { direction: rtl; min-height: 100%; overflow-y: hidden; }
@ -234,24 +242,25 @@ 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 computedMainTitle = mainTitle ?? t("departmentDetail2.hero.defaultTitle");
const computedSubtitle = subtitle ?? t("departmentDetail2.hero.expertiseSubtitle");
return (
<div className={`projects-timeline-root w-full h-full ${plain ? "plain-bleed" : ""}`}>
<style>{css}</style>
<main className="w-full h-full overflow-hidden" style={mainStyle}>
<main className="w-full h-full overflow-hidden" style={plain ? { background: "#ffffff", paddingBottom: 0 } : { background: "linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 30%, var(--bg-end) 60%)" }}>
<div className="h-full flex flex-col">
{!plain && (
<header className="text-center py-8 px-4">
<h1 id="main-title" className={` ${plain ? "text-3xl md:text-4xl font-bold text-gray-900" : "text-5xl font-bold text-white"} mb-3`} style={plain ? { textShadow: "none" } : { textShadow: "0 4px 20px rgba(0,0,0,0.3)" }}>
{mainTitle}
{computedMainTitle}
</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"}`}>{computedSubtitle}</p>
</header>
)}
<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={t("departmentDetail2.scroll.ariaLabel")}>
<div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
{projects.map((project, idx) => (
@ -281,8 +290,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={t("departmentDetail2.scroll.prev")} onClick={onPrev} disabled={currentIndex === 0} title={t("departmentDetail2.scroll.prev")}>◄</button>
<button className="scroll-btn" aria-label={t("departmentDetail2.scroll.next")} onClick={onNext} disabled={currentIndex === projects.length - 1} title={t("departmentDetail2.scroll.next")}>►</button>
</div>
</div>
</div>
@ -291,20 +300,39 @@ function ProjectsTimeline({
);
}
const defaultProjects = [
{ year: "2016", items: ["تنفيذ أبنية خدمية وإدارية ومشاريع إعادة تأهيل."] },
{ year: "2017", items: ["إنشاء مدينة معارض ومكاتب سيارات (200) مكتب - المدينة الصناعية اللاذقية"] },
{ year: "2023", items: ["تصميم وتنفيذ مشروع 1000 شقة سكنية (مساكن الإيواء) بإشراف الهلال الأحمر الإماراتي"] },
];
/**
* DepartmentDetail2 — الواجهة الرئيسية
* يحافظ الشكل الأصلي بالكامل، مع استبدال كل النصوص بمفاتيح الترجمة.
*/
export default function DepartmentDetail2() {
const [active, setActive] = useState(null);
const { t, i18n } = useTranslation();
const isRTL = i18n.dir && i18n.dir() === "rtl";
// نحاول أخذ قوائم المشاريع/الميزات من ملف الترجمة، وإن لم توجد نستخدم الافتراضي
const defaultProjects =
t("departmentDetail2.projectsTimeline.defaultProjects", { returnObjects: true }) || [
{ year: "2016", items: ["تنفيذ أبنية خدمية وإدارية ومشاريع إعادة تأهيل."] },
{ year: "2017", items: ["إنشاء مدينة معارض ومكاتب سيارات (200) مكتب - المدينة الصناعية اللاذقية"] },
{ year: "2023", items: ["تصميم وتنفيذ مشروع 1000 شقة سكنية (مساكن الإيواء) بإشراف الهلال الأحمر الإماراتي"] },
];
// عناوين الأزرار من الترجمة
const buttons = [
{ id: 1, title: "اختصاص القسم", key: "expertise" },
{ id: 3, title: "الاعمال المنفذة", key: "works" },
{ id: 1, title: t("departmentDetail2.buttons.1"), key: "expertise" },
{ id: 3, title: t("departmentDetail2.buttons.3"), key: "works" },
];
// نصوص الخبرات من الترجمة (مصفوفة نصية)
const expertiseTexts = t("departmentDetail2.expertiseItems", { returnObjects: true }) || [
"تنفيذ المجمعات السكنية والمناطق الخدمية.",
". الأبنية الإدارية والتجارية.",
". الأبنية مسبقة الصنع والساندويچ بانل والهنغارات والكرفانات المتنقلة وغرف التبريد",
"الأعمال المدنية والمعمارية المتكاملة.",
". الإكساء الداخلي والخارجي.",
". الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ.",
];
// نُعيد بناء عناصر الخبرة مع الاحتفاظ بالأيقونات كما كانت في الأصل
const expertiseItems = [
{
icon: (
@ -312,7 +340,6 @@ export default function DepartmentDetail2() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
),
text: "تنفيذ المجمعات السكنية والمناطق الخدمية."
},
{
icon: (
@ -320,7 +347,6 @@ export default function DepartmentDetail2() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
),
text: ". الأبنية الإدارية والتجارية."
},
{
icon: (
@ -328,7 +354,6 @@ export default function DepartmentDetail2() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
</svg>
),
text: ". الأبنية مسبقة الصنع والساندويش بانل والهنغارات والكرفانات المتنقلة وغرف التبريد"
},
{
icon: (
@ -336,7 +361,6 @@ export default function DepartmentDetail2() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
</svg>
),
text: "الأعمال المدنية والمعمارية المتكاملة."
},
{
icon: (
@ -344,7 +368,6 @@ export default function DepartmentDetail2() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
),
text: ". الإكساء الداخلي والخارجي."
},
{
icon: (
@ -352,9 +375,10 @@ export default function DepartmentDetail2() {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
),
text: ". الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ."
}
];
},
].map((item, idx) => ({ ...item, text: expertiseTexts[idx] || "" }));
const [active, setActive] = useState(null);
const displayItems = expertiseItems;
const heroImage = active === "expertise" ? d12 : active === "works" ? d13 : d7;
@ -364,7 +388,8 @@ export default function DepartmentDetail2() {
};
return (
<div dir="rtl" className="w-full min-h-screen bg-white pb-12">
// نستخدم dir من i18n حتى يتغير اتجاه الوثيقة تلقائياً حسب اللغة
<div dir={i18n.dir()} className="w-full min-h-screen bg-white pb-12">
<section className="relative">
<div className="w-full">
<AnimatePresence mode="wait">
@ -378,7 +403,7 @@ export default function DepartmentDetail2() {
>
<img
src={heroImage}
alt="مرافق سكنية وخدمية"
alt={t("departmentDetail2.hero.heroAlt")}
className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
/>
@ -393,20 +418,20 @@ export default function DepartmentDetail2() {
<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
<AnimatePresence mode="wait">
{active === "expertise" ? (
<motion.div key="expertise-title" initial={{ opacity: 0, x: -50 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 50 }} transition={{ duration: 0.5 }} className="text-white max-w-4xl">
<div className="inline-block mb-4 px-5 py-2 bg-gradient-to-r from-amber-500 to-orange-600 rounded-full text-xs sm:text-sm font-bold tracking-wide shadow-2xl">اختصاص القسم</div>
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight mb-3 sm:mb-6">حلول متكاملة للمشاريع السكنية والخدمية</h2>
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">يتضمن هذا القسم تنفيذ المشاريع السكنية والخدمية بمختلف أنواعها، ويشمل:</p>
<motion.div 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 ? '' : ''}`}>
<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("departmentDetail2.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("departmentDetail2.hero.expertiseTitle")}</h2>
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail2.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("departmentDetail2.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("departmentDetail2.hero.worksTitle")}</h2>
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold drop-shadow-lg">{t("departmentDetail2.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("departmentDetail2.hero.defaultTitle")}</h2>
</motion.div>
)}
</AnimatePresence>
@ -434,7 +459,7 @@ export default function DepartmentDetail2() {
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-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
@ -446,7 +471,7 @@ export default function DepartmentDetail2() {
<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("departmentDetail2.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>
@ -489,14 +514,14 @@ export default function DepartmentDetail2() {
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("departmentDetail2.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"/>
@ -515,11 +540,11 @@ export default function DepartmentDetail2() {
<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">
<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 ${isRTL ? '' : ''}`}>
<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("departmentDetail2.buttons.backToMenu")}</span>
</motion.button>
<div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
@ -528,11 +553,11 @@ export default function DepartmentDetail2() {
</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">
<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 ${isRTL ? '' : ''}`}>
<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("departmentDetail2.buttons.backToMenu")}</span>
</motion.button>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
@ -570,7 +595,7 @@ export default function DepartmentDetail2() {
<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("departmentDetail2.ui.servicesProfessional")}</span>
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
</div>
</motion.div>