translation
This commit is contained in:
@ -1,5 +1,6 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import d22 from "../../../../src/assets/Images/d22.jpg";
|
||||
import d35 from "../../../../src/assets/Images/d35.jpeg";
|
||||
import d36 from "../../../../src/assets/Images/d36.jpg";
|
||||
@ -291,40 +292,17 @@ function ProjectsTimeline({
|
||||
);
|
||||
}
|
||||
|
||||
const defaultProjects = [
|
||||
{
|
||||
year: "1999-2015",
|
||||
items: [
|
||||
"أتمتة منظومات التحكم و التشغيل لمعاهد صهر ودرفلة الحديد (الوهيب - العربية - الدولية).",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2023",
|
||||
items: [
|
||||
"أتمتة التحكم بالتجهيزات الصناعية وخطوط الإنتاج للفحص والمعايرة والتشغيل عبر تابلت.",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2023-2024",
|
||||
items: [
|
||||
"إنشاء وتطوير نظام FMS منصب في مستودعات وقود استراتيجية (جارٍ التشغيل حالياً).",
|
||||
],
|
||||
},
|
||||
{
|
||||
year: "2024",
|
||||
items: [
|
||||
"أتمتة منظومات التحكم و التشغيل لخطوط الإنتاج (أمثلة: ألانام لإنتاج البكتيريا العضوية - الساروت لإنتاج الأدوية البيطرية).",
|
||||
"إنشاء أنظمة ERP لشركات (PEA - REXOS).",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function DepartmentDetail9() {
|
||||
const { t, i18n } = useTranslation();
|
||||
const dir = i18n.dir(); // 'rtl' or 'ltr'
|
||||
const [active, setActive] = useState(null);
|
||||
|
||||
const defaultProjects = t("departmentDetail9.projectsTimeline.defaultProjects", { returnObjects: true });
|
||||
const expertiseTexts = t("departmentDetail9.expertiseItems", { returnObjects: true });
|
||||
|
||||
const buttons = [
|
||||
{ id: 1, title: "اختصاص القسم", key: "expertise" },
|
||||
{ id: 2, title: "الاعمال المنفذة", key: "works" },
|
||||
{ id: 1, title: t("departmentDetail9.buttons.1"), key: "expertise" },
|
||||
{ id: 2, title: t("departmentDetail9.buttons.2"), key: "works" },
|
||||
];
|
||||
|
||||
const expertiseItems = [
|
||||
@ -335,7 +313,7 @@ export default function DepartmentDetail9() {
|
||||
<path d="M7 8h.01M11 8h.01M15 8h.01M7 12h10" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
),
|
||||
text: "تصميم وتنفيذ أنظمة التحكم الصناعية."
|
||||
text: expertiseTexts[0] || "تصميم وتنفيذ أنظمة التحكم الصناعية."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
@ -343,7 +321,7 @@ export default function DepartmentDetail9() {
|
||||
<path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M3 7h4l2 6h6l2-6h4M5 21h14" />
|
||||
</svg>
|
||||
),
|
||||
text: "أتمتة خطوط الإنتاج والمنشآت وأنظمة المراقبة التشغيلية مع توريد التجهيزات اللازمة."
|
||||
text: expertiseTexts[1] || "أتمتة خطوط الإنتاج والمنشآت وأنظمة المراقبة التشغيلية مع توريد التجهيزات اللازمة."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
@ -352,7 +330,7 @@ export default function DepartmentDetail9() {
|
||||
<path d="M8 21h8M12 17v4" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
),
|
||||
text: "أنظمة SCADA و PLC."
|
||||
text: expertiseTexts[2] || "أنظمة SCADA و PLC."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
@ -360,7 +338,7 @@ export default function DepartmentDetail9() {
|
||||
<path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M3 7v10a2 2 0 002 2h10l4-4V7a2 2 0 00-2-2H5a2 2 0 00-2 2zM16 3v4" />
|
||||
</svg>
|
||||
),
|
||||
text: "تطوير وتنفيذ أنظمة إدارة محطات الوقود (FMS)."
|
||||
text: expertiseTexts[3] || "تطوير وتنفيذ أنظمة إدارة محطات الوقود (FMS)."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
@ -368,7 +346,7 @@ export default function DepartmentDetail9() {
|
||||
<path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M10 14a3 3 0 104 0M4 10a4 4 0 018 0M20 14a4 4 0 00-8 0" />
|
||||
</svg>
|
||||
),
|
||||
text: "ربط الأنظمة التشغيلية بالحلول البرمجية."
|
||||
text: expertiseTexts[4] || "ربط الأنظمة التشغيلية بالحلول البرمجية."
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
@ -377,18 +355,20 @@ export default function DepartmentDetail9() {
|
||||
<path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M7 14l3-3 4 4 5-7" />
|
||||
</svg>
|
||||
),
|
||||
text: "تحليل الأعطال والتنبؤ بالمشاكل قبل حدوثها، ورفع كفاءة التشغيل وتقليل الفاقد والتكاليف."
|
||||
text: expertiseTexts[5] || "تحليل الأعطال والتنبؤ بالمشاكل قبل حدوثها، ورفع كفاءة التشغيل وتقليل الفاقد والتكاليف."
|
||||
},
|
||||
];
|
||||
|
||||
const heroImage = active === "expertise" ? d35 : active === "works" ? d36 : d22;
|
||||
|
||||
const handleButtonClick = (key) => {
|
||||
setActive((prev) => (prev === key ? null : key));
|
||||
};
|
||||
|
||||
const heroImage = active === "expertise" ? d35 : active === "works" ? d36 : d22;
|
||||
const backButtonMargin = dir === "rtl" ? "mr-0 md:-mr-4" : "ml-0 md:-ml-4";
|
||||
|
||||
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">
|
||||
@ -402,7 +382,7 @@ export default function DepartmentDetail9() {
|
||||
>
|
||||
<img
|
||||
src={heroImage}
|
||||
alt="قسم الأتمتة والتحكم"
|
||||
alt={t("departmentDetail9.hero.heroAlt")}
|
||||
className="absolute inset-0 w-full h-full object-cover object-center z-0 brightness-90"
|
||||
/>
|
||||
|
||||
@ -418,21 +398,21 @@ export default function DepartmentDetail9() {
|
||||
<AnimatePresence mode="wait">
|
||||
{active === "expertise" ? (
|
||||
<motion.div key="exp" initial={{ opacity: 0, x: -40 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 40 }} transition={{ duration: 0.45 }} 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 leading-tight mb-3 sm:mb-6">قسم الأتمتة والتحكم</h2>
|
||||
<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("departmentDetail9.hero.expertiseBadge")}</div>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold leading-tight mb-3 sm:mb-6">{t("departmentDetail9.hero.expertiseTitle")}</h2>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold">
|
||||
يختص هذا القسم بتقديم حلول الأتمتة والتحكم والتحول الرقمي لجميع المنشآت الصناعية والهندسية وخطوط الإنتاج، ويشمل:
|
||||
{t("departmentDetail9.hero.expertiseSubtitle")}
|
||||
</p>
|
||||
</motion.div>
|
||||
) : active === "works" ? (
|
||||
<motion.div key="works" initial={{ opacity: 0, x: -40 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 40 }} transition={{ duration: 0.45 }} 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 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">أمثلة على أنظمة أتمتة وتحكم ونظم رقمية نفذناها للعملاء.</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("departmentDetail9.hero.worksBadge")}</div>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold leading-tight mb-3 sm:mb-6">{t("departmentDetail9.hero.worksTitle")}</h2>
|
||||
<p className="text-xs sm:text-sm md:text-xl text-gray-200 leading-relaxed font-semibold">{t("departmentDetail9.hero.worksSubtitle")}</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="def" initial={{ opacity: 0, x: -40 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 40 }} transition={{ duration: 0.45 }} className="text-white max-w-4xl">
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold leading-tight">قسم الأتمتة والتحكم</h2>
|
||||
<h2 className="text-xl sm:text-2xl md:text-4xl lg:text-5xl font-extrabold leading-tight">{t("departmentDetail9.hero.defaultTitle")}</h2>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
@ -452,7 +432,7 @@ export default function DepartmentDetail9() {
|
||||
transition={{ delay: i * 0.06, duration: 0.45 }}
|
||||
onClick={() => handleButtonClick(b.key)}
|
||||
whileHover={{ scale: 1.03, y: -6 }}
|
||||
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/85 backdrop-blur-sm"
|
||||
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/85 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/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
|
||||
<div className="relative z-10">
|
||||
@ -463,9 +443,9 @@ export default function DepartmentDetail9() {
|
||||
<h3 className="text-sm sm:text-base font-bold text-gray-800">{b.title}</h3>
|
||||
</div>
|
||||
<p className="text-xs sm:text-sm text-gray-600 mt-auto flex items-center gap-2">
|
||||
<span>انقر للاطّلاع على التفاصيل</span>
|
||||
<span>{t("departmentDetail9.ui.clickToView") || "انقر للاطّلاع على التفاصيل"}</span>
|
||||
<svg className="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</p>
|
||||
</div>
|
||||
@ -490,13 +470,7 @@ export default function DepartmentDetail9() {
|
||||
<div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
|
||||
<AnimatePresence mode="wait">
|
||||
{!active && (
|
||||
<motion.div
|
||||
key="floating-buttons-mobile"
|
||||
initial={{ opacity: 0, y: 6 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 6 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
>
|
||||
<motion.div key="floating-buttons-mobile" initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 6 }} transition={{ duration: 0.4 }}>
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{buttons.map((b, index) => (
|
||||
<motion.button
|
||||
@ -513,10 +487,10 @@ export default function DepartmentDetail9() {
|
||||
</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("departmentDetail9.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.2" d="M15 19l-7-7 7-7"/>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</motion.button>
|
||||
))}
|
||||
@ -532,9 +506,9 @@ export default function DepartmentDetail9() {
|
||||
<motion.div key="spacer" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.25 }} className="h-0" />
|
||||
) : active === "works" ? (
|
||||
<motion.div key="timeline" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} transition={{ duration: 0.45 }} className="w-full">
|
||||
<motion.button onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2">
|
||||
<motion.button onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${backButtonMargin}`}>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/></svg>
|
||||
<span>العودة للقائمة الرئيسية</span>
|
||||
<span>{t("departmentDetail9.backToMenu")}</span>
|
||||
</motion.button>
|
||||
|
||||
<div style={{ position: 'relative', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw', width: '100vw' }}>
|
||||
@ -543,9 +517,9 @@ export default function DepartmentDetail9() {
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="details" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.45 }} className="w-full">
|
||||
<motion.button onClick={() => setActive(null)} whileHover={{ x: 8 }} className="inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2">
|
||||
<motion.button onClick={() => setActive(null)} whileHover={{ x: 8 }} className={`inline-flex items-center gap-3 text-amber-600 hover:text-amber-700 font-bold mb-6 group text-sm sm:text-base focus:outline-none focus:ring-2 focus:ring-amber-200 rounded-lg px-3 py-2 ${backButtonMargin}`}>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.2" d="M15 19l-7-7 7-7"/></svg>
|
||||
<span>العودة للقائمة الرئيسية</span>
|
||||
<span>{t("departmentDetail9.backToMenu")}</span>
|
||||
</motion.button>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
|
||||
@ -573,7 +547,7 @@ export default function DepartmentDetail9() {
|
||||
<motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.6, duration: 0.45 }} className="mt-2 sm:mt-6 pt-4 border-t-2 border-gray-100 text-center col-span-full">
|
||||
<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("departmentDetail9.ui.servicesProfessional")}</span>
|
||||
<div className="w-2 h-2 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: "0.5s" }} />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
Reference in New Issue
Block a user