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

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

@ -1,5 +1,6 @@
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";
import d27 from "../../../../src/assets/Images/d27.jpeg";
import d28 from "../../../../src/assets/Images/d28.jpeg";
@ -11,6 +12,10 @@ function ProjectsTimeline({
mainTitle = "المشاريع المنفذة",
subtitle = "خط زمني شامل للأعمال والإنجازات",
plain = false,
dir = "rtl",
scrollLabel = "خط زمني قابل للتمرير",
prevLabel = "السابق",
nextLabel = "التالي"
}) {
const wrapperRef = useRef(null);
const scrollRef = useRef(null);
@ -194,7 +199,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: ${dir}; 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; }
@ -251,7 +256,7 @@ function ProjectsTimeline({
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" : ""}`} dir={dir}>
<style>{css}</style>
<main className="w-full h-full overflow-hidden" style={mainStyle}>
<div className="h-full flex flex-col">
@ -265,7 +270,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={scrollLabel}>
<div className="timeline-wrapper" id="timeline-wrapper" ref={wrapperRef}>
<svg className="svg-container" id="timeline-svg" ref={svgRef} />
{projects.map((project, idx) => (
@ -295,8 +300,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={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>
@ -305,102 +310,26 @@ function ProjectsTimeline({
);
}
const defaultProjects = [
{
year: "1999-2015",
items: [
"تنفيذ محطات معالجة المياه الصناعية لمعامل صهر ودرفلة الحديد الوهيب - العربية - الدولية - حديد للصهر - حديد (1999-2015).",
],
},
{
year: "2009",
items: [
"محطة تحويل 66/20 ك.ف لأعمال درفلة الحديد الوهيب - العربية (2009).",
],
},
{
year: "2015",
items: [
"الإشراف على تنفيذ محطة التحويل 230/66 و66/20 ك.ف لمعامل صهر ودرفلة الحديد (2015).",
],
},
{
year: "2018",
items: [
"تجهيز وتنفيذ شبكات مياه الشرب لـ22 قرية ريف اللاذقية الشمالي - 73 كم (2018).",
],
},
{
year: "2019",
items: [
"أعمال الصيانة وإعادة التأهيل منشأة الفوسفات مرفأ طرطوس (2019).",
],
},
{
year: "2021",
items: [
"دراسة مشروع إعادة تأهيل منجم الملح الصخري في دير الزور (2021).",
],
},
{
year: "2022",
items: [
"دراسة وتنفيذ محطة الضخ والتصفية لسد 16 تشرين (اللاذقية) (2022).",
],
},
{
year: "2023",
items: [
"دراسة وتنفيذ مجموعة الطاقة الشمسية 3.6 ميغا لمطحنة غرين كوست (2023).",
],
},
];
export default function DepartmentDetail6() {
const { t, i18n } = useTranslation();
const isRTL = i18n.dir() === "rtl";
const [active, setActive] = useState(null);
const cycleImgs = [d28, d27, d29];
const [cycleIndex, setCycleIndex] = useState(0);
useEffect(() => {
const t = setInterval(() => setCycleIndex((i) => (i + 1) % cycleImgs.length), 3000);
return () => clearInterval(t);
const tInterval = setInterval(() => setCycleIndex((i) => (i + 1) % cycleImgs.length), 3000);
return () => clearInterval(tInterval);
}, []);
const buttons = [
{ id: 1, title: "خدمات القسم", key: "expertise" },
{ id: 3, title: "الاعمال المنفذه", key: "works", img: d30 },
];
// buttons from translations (array)
const buttons = t("departmentDetail6.buttons", { returnObjects: true });
const cardGroups = [
{
title: "1- محطات المعالجة وتصفية المياه",
items: [
"تنفيذ محطات تصفية ومعالجة وضخ المياه الصالحة للشرب والاستخدام.",
"تنفيذ محطات معالجة المياه الصناعية وفق المتطلبات الفنية والتشغيلية.",
"الإشراف على التشغيل التجريبي ورفع كفاءة الأداء التشغيلي للمحطات.",
"الالتزام بالمعايير البيئية ومعايير الجودة والسلامة المهنية المعتمدة.",
],
},
{
title: "2- محطات الطاقة الكهروضوئية",
items: [
"دراسة وتصميم وتنفيذ مشاريع الطاقة البديلة (الكهروضوئية / الريحية).",
"تنفيذ المحطات الكهروضوئية وأنظمة الطاقة الشمسية.",
"تصميم وتنفيذ منظومات الكهرباء والتحكم والمحولات الكهربائية.",
"ربط أنظمة الطاقة الكهربائية مع أنظمة الطاقة البديلة.",
"الإشراف على التشغيل والصيانة الدورية للمنظومات الطاقية.",
],
},
{
title: "3- منشآت الفوسفات",
items: [
"إعادة تأهيل خطوط تفريغ وتعبئة الفوسفات من مرحلة تفريغ القطارات وحتى تحميل الفوسفت على البواخر.",
"تنفيذ أعمال الصيانة الميكانيكية والكهربائية والتحكم وأعمال اللحام والمعالجة المعدنية لمنظومات التفريغ والنقل والتعبئة.",
"فحص وتقييم الحالة الفنية للمعدات والمنشآت، وإعادة ضبط المنظومات التشغيلية ورفع الجاهزية والكفاءة التشغيلية.",
"تطبيق متطلبات السلامة خلال أعمال التنفيذ والتشغيل.",
],
},
];
// card groups from translations
const cardGroups = t("departmentDetail6.cardGroups", { returnObjects: true });
const projectsTimeline = t("departmentDetail6.projectsTimeline.defaultProjects", { returnObjects: true });
const heroImage = active === "expertise" ? cycleImgs[cycleIndex] : active === "works" ? d30 : d19;
@ -408,8 +337,14 @@ export default function DepartmentDetail6() {
setActive((prev) => (prev === key ? null : key));
};
// translated text fragments
const hero = t("departmentDetail6.hero", { returnObjects: true });
const ui = t("departmentDetail6.ui", { returnObjects: true });
const scroll = t("departmentDetail6.scroll", { returnObjects: true });
const backToMenu = t("departmentDetail6.backToMenu");
return (
<div dir="rtl" 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">
@ -423,7 +358,7 @@ export default function DepartmentDetail6() {
>
<img
src={heroImage}
alt="مرافق ومشروعات استراتيجية"
alt={t("departmentDetail6.hero.heroAlt")}
className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
/>
@ -438,20 +373,20 @@ 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">
<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 ? '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">
<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="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">
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold drop-shadow-2xl leading-tight">قسم المشاريع الاستراتيجية</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>
@ -479,7 +414,7 @@ export default function DepartmentDetail6() {
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" />
@ -492,7 +427,7 @@ export default function DepartmentDetail6() {
<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>{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>
@ -535,14 +470,14 @@ 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 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">{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"/>
@ -561,24 +496,33 @@ export default function DepartmentDetail6() {
<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 ${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>العودة للقائمة الرئيسية</span>
<span>{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={projectsTimeline}
plain={true}
dir={isRTL ? 'rtl' : 'ltr'}
mainTitle={t("departmentDetail6.hero.worksTitle")}
subtitle={t("departmentDetail6.hero.worksSubtitle")}
scrollLabel={t("departmentDetail6.scroll.ariaLabel")}
prevLabel={t("departmentDetail6.scroll.prev")}
nextLabel={t("departmentDetail6.scroll.next")}
/>
</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">
<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>العودة للقائمة الرئيسية</span>
<span>{backToMenu}</span>
</motion.button>
<div className="grid grid-cols-1 gap-6">
@ -616,7 +560,7 @@ export default function DepartmentDetail6() {
<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("departmentDetail6.ui.servicesProfessional")}</span>
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
</div>
</motion.div>