diff --git a/index.html b/index.html index a583265..c346e03 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,9 @@ - - - rexnt + + + Rexnt @@ -13,4 +13,7 @@ - \ No newline at end of file + + + + diff --git a/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx b/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx index f800864..de465ed 100644 --- a/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx +++ b/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx @@ -1,10 +1,15 @@ import React, { useState, useEffect, useRef, useCallback } from "react"; import { motion, AnimatePresence } from "framer-motion"; +import { useTranslation } from "react-i18next"; +import "../../../../src/i18n"; // احتفظت بالاستيراد كما طلبت + +// استيراد الصور كما كانت في واجهتك import d1 from "../../../../src/assets/Images/d1.jpeg"; import d2 from "../../../../src/assets/Images/d2.jpeg"; import d3 from "../../../../src/assets/Images/d3.jpeg"; import d4 from "../../../../src/assets/Images/d4.jpeg"; +/* -------------------- ProjectsTimeline (مضمن داخل نفس الملف كما في واجهتك) -------------------- */ function ProjectsTimeline({ projects, mainTitle = "المشاريع المنفذة", @@ -290,6 +295,8 @@ function ProjectsTimeline({ ); } +/* -------------------- نهاية ProjectsTimeline -------------------- */ + const defaultProjects = [ { year: "1999-2015", @@ -326,135 +333,45 @@ const defaultProjects = [ ]; export default function DepartmentDetail() { + const { t } = useTranslation(); const [active, setActive] = useState(null); const buttons = [ - { id: 1, title: "اختصاص القسم", key: "expertise" }, - { id: 2, title: "خدمات القسم", key: "services" }, - { id: 3, title: "الاعمال المنفذة", key: "works" }, + { id: 1, title: t("department.buttons.expertise"), key: "expertise" }, + { id: 2, title: t("department.buttons.services"), key: "services" }, + { id: 3, title: t("department.buttons.works"), key: "works" }, ]; - const expertiseItems = [ - { - icon: ( - - - - ), - text: "دراسات الجدوى الاقتصادية وتحليل الربحية والمخاطر للمشاريع الصناعية والهندسية" - }, - { - icon: ( - - - - ), - text: "الدراسات الهندسية الأولية والنهائية والتفصيلية" - }, - { - icon: ( - - - - ), - text: "تصميم المخططات التنفيذية" - }, - { - icon: ( - - - - ), - text: "تنفيذ الأعمال المدنية والمعمارية والمعدنية للمنشآت الصناعية" - }, - { - icon: ( - - - - ), - text: "تصنيع وتركيب خطوط الإنتاج محلياً أو خطوط الانتاج المستوردة" - }, - { - icon: ( - - - - ), - text: "تنفيذ الأعمال الميكانيكية والكهربائية وأنظمة التحكم" - }, - { - icon: ( - - - - ), - text: "الإشراف على التشغيل التجريبي وتدريب الكوادر الفنية" - } + const expertiseItems = t("department.expertiseItems", { returnObjects: true }) || [ + "دراسات الجدوى الاقتصادية وتحليل الربحية والمخاطر للمشاريع الصناعية والهندسية", + "الدراسات الهندسية الأولية والنهائية والتفصيلية", + "تصميم المخططات التنفيذية", + "تنفيذ الأعمال المدنية والمعمارية والمعدنية للمنشآت الصناعية", + "تصنيع وتركيب خطوط الإنتاج محلياً أو خطوط الانتاج المستوردة", + "تنفيذ الأعمال الميكانيكية والكهربائية وأنظمة التحكم", + "الإشراف على التشغيل التجريبي وتدريب الكوادر الفنية", ]; - const servicesItems = [ - { - icon: ( - - - - - ), - text: "الصيانة الدورية والوقائية." - }, - { - icon: ( - - - - - ), - text: "الصيانة الطارئة ومعالجة الأعطال." - }, - { - icon: ( - - - - ), - text: "إعادة التأهيل والتحديث الفني للمنشآت." - }, - { - icon: ( - - - - ), - text: "فحص وتقييم الحالة الفنية للتجهيزات والآلات." - }, - { - icon: ( - - - - ), - text: "أعمال التفتيش الفني والهندسي وفق المعايير العالمية." - }, - { - icon: ( - - - - ), - text: "رفع كفاءة التشغيل وتقليل تكاليف الأعطال" - } + const servicesItems = t("department.servicesItems", { returnObjects: true }) || [ + "الصيانة الدورية والوقائية.", + "الصيانة الطارئة ومعالجة الأعطال.", + "إعادة التأهيل والتحديث الفني للمنشآت.", + "فحص وتقييم الحالة الفنية للتجهيزات والآلات.", + "أعمال التفتيش الفني والهندسي وفق المعايير العالمية.", + "رفع كفاءة التشغيل وتقليل تكاليف الأعطال", ]; + 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 handleButtonClick = (key) => { setActive((prev) => (prev === key ? null : key)); }; - const displayItems = active === "services" ? servicesItems : expertiseItems; - const heroImage = active === "expertise" ? d2 : active === "services" ? d3 : active === "works" ? d4 : d1; - return ( -
+
@@ -468,7 +385,7 @@ export default function DepartmentDetail() { > منشآت صناعية @@ -484,25 +401,46 @@ export default function DepartmentDetail() { {active === "expertise" ? ( -
اختصاص القسم
-

حلول متكاملة للمنشآت الصناعية

-

يختص هذا القسم بتقديم حلول متكاملة لتنفيذ المنشآت الصناعية وخطوط الانتاج وصيانتها بمختلف أنواعها، ويشمل:

+
+ {t("department.hero.expertiseBadge") || "اختصاص القسم"} +
+

+ {t("department.hero.expertiseTitle") || "حلول متكاملة للمنشآت الصناعية"} +

+

+ {t("department.hero.expertiseSubtitle") || + "يختص هذا القسم بتقديم حلول متكاملة لتنفيذ المنشآت الصناعية وخطوط الانتاج وصيانتها بمختلف أنواعها، ويشمل:"} +

) : active === "services" ? ( -
خدمات القسم
-

خدمات الصيانة للمنشآت وخطوط الإنتاج

-

يتضمن هذا القسم خدمات الصيانة الشاملة والدورية للمنشآت الصناعية وخطوط الانتاج، وتشمل:

+
+ {t("department.hero.servicesBadge") || "خدمات القسم"} +
+

+ {t("department.hero.servicesTitle") || "خدمات الصيانة للمنشآت وخطوط الإنتاج"} +

+

+ {t("department.hero.servicesSubtitle") || "يتضمن هذا القسم خدمات الصيانة الشاملة والدورية للمنشآت الصناعية وخطوط الانتاج، وتشمل:"} +

) : active === "works" ? ( -
الاعمال المنفذة
-

الاعمال المنفذة

-

عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.

+
+ {t("department.hero.worksBadge") || "الأعمال المنفذة"} +
+

+ {t("department.hero.worksTitle") || "الأعمال المنفذة"} +

+

+ {t("department.hero.worksSubtitle") || "عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة."} +

) : ( -

قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج

+

+ {t("department.sectionTitle") || "قسم إنشاء وصيانة المنشآت الصناعية وخطوط الإنتاج"} +

)} @@ -542,7 +480,7 @@ export default function DepartmentDetail() {

{b.title}

- انقر للاطّلاع على التفاصيل + {t("department.clickForDetails")} @@ -592,7 +530,7 @@ export default function DepartmentDetail() {

{b.title}

-

انقر للاطّلاع على التفاصيل

+

{t("department.clickForDetails")}

@@ -615,11 +553,11 @@ export default function DepartmentDetail() { - العودة للقائمة الرئيسية + {t("department.backToMenu")}
- +
) : ( @@ -628,11 +566,11 @@ export default function DepartmentDetail() { - العودة للقائمة الرئيسية + {t("department.backToMenu")}
- {displayItems.map((item, index) => ( + {displayItems.map((text, index) => (
- {item.icon} +
-

{item.text}

+

{text}

@@ -666,7 +604,7 @@ export default function DepartmentDetail() {
- خدمات احترافية متكاملة + Professional integrated services
diff --git a/src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx b/src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx index caa1c15..36c8c59 100644 --- a/src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx +++ b/src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx @@ -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 (
-
+
{!plain && (

- {mainTitle} + {computedMainTitle}

-

{subtitle}

+

{computedSubtitle}

)}
-
+
{projects.map((project, idx) => ( @@ -281,8 +290,8 @@ function ProjectsTimeline({
- - + +
@@ -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() { ), - text: "تنفيذ المجمعات السكنية والمناطق الخدمية." }, { icon: ( @@ -320,7 +347,6 @@ export default function DepartmentDetail2() { ), - text: ". الأبنية الإدارية والتجارية." }, { icon: ( @@ -328,7 +354,6 @@ export default function DepartmentDetail2() { ), - text: ". الأبنية مسبقة الصنع والساندويش بانل والهنغارات والكرفانات المتنقلة وغرف التبريد" }, { icon: ( @@ -336,7 +361,6 @@ export default function DepartmentDetail2() { ), - text: "الأعمال المدنية والمعمارية المتكاملة." }, { icon: ( @@ -344,7 +368,6 @@ export default function DepartmentDetail2() { ), - text: ". الإكساء الداخلي والخارجي." }, { icon: ( @@ -352,9 +375,10 @@ export default function DepartmentDetail2() { ), - 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 ( -
+ // نستخدم dir من i18n حتى يتغير اتجاه الوثيقة تلقائياً حسب اللغة +
@@ -378,7 +403,7 @@ export default function DepartmentDetail2() { > مرافق سكنية وخدمية @@ -393,20 +418,20 @@ export default function DepartmentDetail2() {
{active === "expertise" ? ( - -
اختصاص القسم
-

حلول متكاملة للمشاريع السكنية والخدمية

-

يتضمن هذا القسم تنفيذ المشاريع السكنية والخدمية بمختلف أنواعها، ويشمل:

+ +
{t("departmentDetail2.hero.expertiseBadge")}
+

{t("departmentDetail2.hero.expertiseTitle")}

+

{t("departmentDetail2.hero.expertiseSubtitle")}

 ) : active === "works" ? ( -
الاعمال المنفذة
-

الاعمال المنفذة

-

عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.

+
{t("departmentDetail2.hero.worksBadge")}
+

{t("departmentDetail2.hero.worksTitle")}

+

{t("departmentDetail2.hero.worksSubtitle")}

 ) : ( -

قسم تنفيذ المرافق السكنيه والخدمية

+

{t("departmentDetail2.hero.defaultTitle")}

 )} @@ -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`} >
@@ -446,7 +471,7 @@ export default function DepartmentDetail2() {

{b.title}

- انقر للاطّلاع على التفاصيل + {t("departmentDetail2.buttons.clickForDetails")} @@ -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`} >

{b.id}

{b.title}

-

انقر للاطّلاع على التفاصيل

+

{t("departmentDetail2.buttons.clickForDetails")}

@@ -515,11 +540,11 @@ export default function DepartmentDetail2() { ) : active === "works" ? ( - 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"> + 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 ? '' : ''}`}> - العودة للقائمة الرئيسية + {t("departmentDetail2.buttons.backToMenu")}
@@ -528,11 +553,11 @@ export default function DepartmentDetail2() { ) : ( - 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"> + 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 ? '' : ''}`}> - العودة للقائمة الرئيسية + {t("departmentDetail2.buttons.backToMenu")}
@@ -570,7 +595,7 @@ export default function DepartmentDetail2() {
- خدمات احترافية متكاملة + {t("departmentDetail2.ui.servicesProfessional")}
diff --git a/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx b/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx index 177861d..273aac2 100644 --- a/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx +++ b/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx @@ -1,5 +1,7 @@ +// DepartmentDetail3.jsx import React, { useState, useEffect, useRef, useCallback } from "react"; import { motion, AnimatePresence } from "framer-motion"; +import { useTranslation } from "react-i18next"; import d14 from "../../../../src/assets/Images/d14.jpg"; import d15 from "../../../../src/assets/Images/d15.jpg"; import d16 from "../../../../src/assets/Images/d16.jpg"; @@ -10,6 +12,7 @@ function ProjectsTimeline({ mainTitle = "المشاريع المنفذة", subtitle = "خط زمني شامل للأعمال والإنجازات", plain = false, + rtl = true, // new prop to control direction }) { const wrapperRef = useRef(null); const scrollRef = useRef(null); @@ -193,7 +196,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%; overflow-y: hidden; } + .projects-timeline-root { direction: ${rtl ? "rtl" : "ltr"}; min-height: 100%; overflow-y: hidden; } .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; } @@ -210,9 +213,9 @@ 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); } + .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); } @@ -251,7 +254,7 @@ function ProjectsTimeline({ )}
-
+
{projects.map((project, idx) => ( @@ -281,8 +284,8 @@ function ProjectsTimeline({
- - + +
@@ -291,7 +294,7 @@ function ProjectsTimeline({ ); } -const defaultProjects = [ +const defaultProjectsFallback = [ { year: "2019–2022", items: [ @@ -307,65 +310,70 @@ const defaultProjects = [ ]; export default function DepartmentDetail3() { + const { t, i18n } = useTranslation(); const [active, setActive] = useState(null); + // detect direction using i18n helper (works with supported languages) + 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" }, - { id: 3, title: "الاعمال المنفذة", key: "works" }, + { id: 1, title: t("departmentDetail3.buttons.1"), key: "expertise" }, + { id: 3, title: t("departmentDetail3.buttons.3"), key: "works" }, ]; - const expertiseItems = [ - { - icon: ( - + const expertiseItemsRaw = t("departmentDetail3.expertiseItems", { returnObjects: true }); + const expertiseItems = Array.isArray(expertiseItemsRaw) && expertiseItemsRaw.length > 0 ? expertiseItemsRaw : [ + "الصيانة الدورية والطارئة.", + "إعادة التأهيل والترميم (أعمال مدنية ومعمارية).", + "أعمال الكهرباء والميكانيك وأنظمة التحكم.", + "أعمال العزل والحماية.", + "الإدارة وصيانة المباني والمنشآت على المدى الطويل.", + "الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ." + ]; + + const displayItems = expertiseItems.map((text, idx) => { + const icons = [ + ( + ), - text: "الصيانة الدورية والطارئة." - }, - { - icon: ( - + ( + ), - text: "إعادة التأهيل والترميم (أعمال مدنية ومعمارية)." - }, - { - icon: ( - + ( + ), - text: "أعمال الكهرباء والميكانيك والتحكم." - }, - { - icon: ( - + ( + ), - text: "أعمال العزل والحماية." - }, - { - icon: ( - + ( + ), - text: "الإدارة وصيانة المباني والمنشآت على المدى الطويل." - }, - { - icon: ( - + ( + - ), - text: "الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ." - } - ]; + ) + ]; + + const icon = icons[idx % icons.length] || icons[0]; + + return { icon, text }; + }); + + const timelineProjectsRaw = t("departmentDetail3.projectsTimeline.defaultProjects", { returnObjects: true }); + const timelineProjects = Array.isArray(timelineProjectsRaw) && timelineProjectsRaw.length > 0 ? timelineProjectsRaw : defaultProjectsFallback; - const displayItems = expertiseItems; const heroImage = active === null ? d14 : active === "expertise" ? d15 : active === "works" ? d16 : d7; const handleButtonClick = (key) => { @@ -373,7 +381,7 @@ export default function DepartmentDetail3() { }; return ( -
+
@@ -387,7 +395,7 @@ export default function DepartmentDetail3() { > مرافق سكنية وخدمية @@ -403,19 +411,19 @@ export default function DepartmentDetail3() { {active === "expertise" ? ( -
قسم اعادة التاهيل وصيانه المباني
-

قسم اعادة التاهيل وصيانه المباني

-

يقدم هذا القسم خدمات صيانة متكاملة للمباني السكنية والخدمية والإدارية والصناعية، وتشمل:

+
{t("departmentDetail3.hero.expertiseBadge")}
+

{t("departmentDetail3.hero.expertiseTitle")}

+

{t("departmentDetail3.hero.expertiseSubtitle")}

 ) : active === "works" ? ( -
الاعمال المنفذة
-

الاعمال المنفذة

-

عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.

+
{t("departmentDetail3.hero.worksBadge")}
+

{t("departmentDetail3.hero.worksTitle")}

+

{t("departmentDetail3.hero.worksSubtitle")}

 ) : ( -

قسم اعادة التاهيل وصيانه المباني

+

{t("departmentDetail3.hero.defaultTitle")}

 )} @@ -443,7 +451,7 @@ export default function DepartmentDetail3() { 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`} >
@@ -455,7 +463,7 @@ export default function DepartmentDetail3() {

{b.title}

- انقر للاطّلاع على التفاصيل + {t("departmentDetail3.buttons.clickForDetails")} @@ -498,7 +506,7 @@ export default function DepartmentDetail3() { transition={{ delay: index * 0.05, duration: 0.35 }} whileHover={{ scale: 1.02 }} onClick={() => handleButtonClick(b.key)} - className="group relative rounded-2xl p-4 shadow-2xl border border-transparent flex flex-col text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/90" + className={`group relative rounded-2xl p-4 shadow-2xl border border-transparent flex flex-col ${isRTL ? "text-right" : "text-left"} focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/90`} >

@@ -507,7 +515,7 @@ export default function DepartmentDetail3() {

{b.title}

-

انقر للاطّلاع على التفاصيل

+

{t("departmentDetail3.buttons.clickForDetails")}

@@ -531,11 +539,11 @@ export default function DepartmentDetail3() { - العودة للقائمة الرئيسية + {t("departmentDetail3.buttons.backToMenu")}
- +
) : ( @@ -544,7 +552,7 @@ export default function DepartmentDetail3() { - العودة للقائمة الرئيسية + {t("departmentDetail3.buttons.backToMenu")}
@@ -557,7 +565,7 @@ export default function DepartmentDetail3() { transition={{ delay: index * 0.08, duration: 0.5 }} className="relative group" > -
+
{item.icon} @@ -582,7 +590,7 @@ export default function DepartmentDetail3() {
- خدمات احترافية متكاملة + {t("departmentDetail3.ui.servicesProfessional")}
diff --git a/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx b/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx index 563f0f6..bd36f46 100644 --- a/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx +++ b/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx @@ -1,14 +1,20 @@ +// DepartmentDetail4.jsx import React, { useState, useEffect, useRef, useCallback } from "react"; import { motion, AnimatePresence } from "framer-motion"; +import { useTranslation } from "react-i18next"; import d17 from "../../../../src/assets/Images/d17.png"; import d23 from "../../../../src/assets/Images/d23.jpg"; import d24 from "../../../../src/assets/Images/d24.png"; +/** + * ProjectsTimeline: same structure as your original component but supports RTL/LTR via `rtl` prop. + */ function ProjectsTimeline({ projects, mainTitle = "المشاريع المنفذة", subtitle = "خط زمني شامل للأعمال والإنجازات", plain = false, + rtl = true }) { const wrapperRef = useRef(null); const scrollRef = useRef(null); @@ -192,15 +198,13 @@ 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; } .svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; } .timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; flex:0 0 auto; } - .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%); - background-clip: padding-box; - } + .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%); background-clip: padding-box; } .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; } .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); } .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; } @@ -209,9 +213,9 @@ 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); } + .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); } @@ -234,7 +238,7 @@ function ProjectsTimeline({ .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-right:10px; padding:6px 10px; } + .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); } .svg-container { display:block; } @@ -254,7 +258,7 @@ function ProjectsTimeline({
{!plain && (
-

+

{mainTitle}

{subtitle}

@@ -262,7 +266,7 @@ function ProjectsTimeline({ )}
-
+
{projects.map((project, idx) => ( @@ -292,8 +296,8 @@ function ProjectsTimeline({
- - + +
@@ -302,117 +306,78 @@ function ProjectsTimeline({ ); } +/** defaultProjects used when translations aren't found */ const defaultProjects = [ { year: "2009", items: [ "دراسة وإشراف محطة معالجة الغاز الطبيعي في معمل الصهر عدرا 2009", - "دراسة وإشراف محطات فصل الغازات في معمل الصهر عدرا 2009", - ], + "دراسة وإشراف محطات فصل الغازات في معمل الصهر عدرا 2009" + ] }, { year: "2022", items: [ - "الصيانة الدورية والطارئة لمستودعات وقود شركتي Syriatel-MTN في كل سورية من عام 2022 ومستمر الى الآن", - ], + "الصيانة الدورية والطارئة لمستودعات وقود شركتي Syriatel-MTN في كل سورية من عام 2022 ومستمر الى الآن" + ] }, { year: "2023", - items: ["إنشاء محطة الكيروسين في مطار اللاذقية المدني 2023"], + items: ["إنشاء محطة الكيروسين في مطار اللاذقية المدني 2023"] }, { year: "2024", items: [ "إنشاء مستودع الوقود الاستراتيجي بسعة 1 مليون لتر – ريف دمشق 2024", - "الصيانة الدورية والطارئة لمستودع وقود مرفأ طرطوس من عام 2024 ومستمر الى الآن", - ], - }, + "الصيانة الدورية والطارئة لمستودع وقود مرفأ طرطوس من عام 2024 ومستمر الى الآن" + ] + } ]; export default function DepartmentDetail4() { + const { t, i18n } = useTranslation(); const [active, setActive] = useState(null); + // determine direction dynamically + 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" }, - { id: 3, title: "الاعمال المنفذة", key: "works" }, + { id: 1, title: t("departmentDetail4.buttons.1"), key: "expertise" }, + { id: 3, title: t("departmentDetail4.buttons.3"), key: "works" } ]; - const expertiseItems = [ - { - icon: ( - - - - ), - text: "دراسات إنشاء وتطوير محطات الوقود." - }, - { - icon: ( - - - - ), - text: "تنفيذ الأعمال المدنية والميكانيكية والكهربائية وأنظمة التحكم في محطات الوقود." - }, - { - icon: ( - - - - ), - text: "صيانة محطات الوقود والمنشآت النفطية دورية وطارئة." - }, - { - icon: ( - - - - ), - text: "صيانة المضخات والعدادات ومعايرتها." - }, - { - icon: ( - - - - ), - text: "تنظيف والتفتيش الفني وصيانة خزانات الوقود وتقييم عمرها الفني." - }, - { - icon: ( - - - - ), - text: "توريد وتركيب التجهيزات المقاومة للانفجار (Explosion Proof)." - }, - { - icon: ( - - - - ), - text: "الالتزام الصارم بإجراءات السلامة المهنية والصحة والبيئة." - }, - { - icon: ( - - - - ), - text: "الجاهزية للعمل على مدار 24/7 في جميع المحافظات." - }, - { - icon: ( - - - - ), - text: "تقديم وتركيب أنظمة المراقبة والإنذار المبكر والإطفاء الآلي والتأريض." - }, + // get expertise items from translations (array) + const expertiseItemsRaw = t("departmentDetail4.expertiseItems", { returnObjects: true }); + const expertiseItems = Array.isArray(expertiseItemsRaw) && expertiseItemsRaw.length > 0 ? expertiseItemsRaw : [ + "دراسات إنشاء وتطوير محطات الوقود.", + "تنفيذ الأعمال المدنية والميكانيكية والكهربائية وأنظمة التحكم في محطات الوقود.", + "صيانة محطات الوقود والمنشآت النفطية دورية وطارئة.", + "صيانة المضخات والعدادات ومعايرتها.", + "تنظيف والتفتيش الفني وصيانة خزانات الوقود وتقييم عمرها الفني.", + "توريد وتركيب التجهيزات المقاومة للانفجار (Explosion Proof).", + "الالتزام الصارم بإجراءات السلامة المهنية والصحة والبيئة.", + "الجاهزية للعمل على مدار 24/7 في جميع المحافظات.", + "تقديم وتركيب أنظمة المراقبة والإنذار المبكر والإطفاء الآلي والتأريض." ]; - const displayItems = expertiseItems; + const displayItems = expertiseItems.map((text, idx) => { + // reuse the same icon set approach (choose icon by index) + const icons = [ + (), + (), + (), + (), + () + ]; + const icon = icons[idx % icons.length] || icons[0]; + return { icon, text }; + }); + + // timeline projects from translations or fallback + const timelineProjectsRaw = t("departmentDetail4.projectsTimeline.defaultProjects", { returnObjects: true }); + const timelineProjects = Array.isArray(timelineProjectsRaw) && timelineProjectsRaw.length > 0 ? timelineProjectsRaw : defaultProjects; + const heroImage = active === "expertise" ? d23 : active === "works" ? d24 : d17; const handleButtonClick = (key) => { @@ -420,7 +385,7 @@ export default function DepartmentDetail4() { }; return ( -
+
@@ -434,7 +399,7 @@ export default function DepartmentDetail4() { > مرافق وخدمات محطات الوقود @@ -450,19 +415,19 @@ export default function DepartmentDetail4() { {active === "expertise" ? ( -
اختصاص القسم
-

يعد من الأقسام الأساسية في الشركة، ويقدم خدمات متخصصة تشمل:

-

الاطّلاع على البطاقات أدناه للحصول على تفاصيل كل خدمة.

+
{t("departmentDetail4.hero.expertiseBadge")}
+

{t("departmentDetail4.hero.expertiseTitle")}

+

{t("departmentDetail4.hero.expertiseSubtitle")}

 ) : active === "works" ? ( -
الاعمال المنفذة
-

الاعمال المنفذة

-

عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.

+
{t("departmentDetail4.hero.worksBadge")}
+

{t("departmentDetail4.hero.worksTitle")}

+

{t("departmentDetail4.hero.worksSubtitle")}

 ) : ( -

قسم محطات الوقود وصيانة المنشات النفطية

+

{t("departmentDetail4.hero.defaultTitle")}

 )} @@ -490,7 +455,7 @@ export default function DepartmentDetail4() { 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`} >
@@ -502,7 +467,7 @@ export default function DepartmentDetail4() {

{b.title}

- انقر للاطّلاع على التفاصيل + {t("departmentDetail4.buttons.clickForDetails")} @@ -545,14 +510,14 @@ export default function DepartmentDetail4() { 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`} >

{b.id}

{b.title}

-

انقر للاطّلاع على التفاصيل

+

{t("departmentDetail4.buttons.clickForDetails")}

@@ -575,11 +540,11 @@ export default function DepartmentDetail4() { - العودة للقائمة الرئيسية + {t("departmentDetail4.buttons.backToMenu")}
- +
) : ( @@ -588,7 +553,7 @@ export default function DepartmentDetail4() { - العودة للقائمة الرئيسية + {t("departmentDetail4.buttons.backToMenu")}
@@ -601,7 +566,7 @@ export default function DepartmentDetail4() { transition={{ delay: index * 0.08, duration: 0.5 }} className="relative group" > -
+
{item.icon} @@ -626,7 +591,7 @@ export default function DepartmentDetail4() {
- خدمات احترافية متكاملة + {t("departmentDetail4.ui.servicesProfessional")}
diff --git a/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx b/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx index 51584a8..b12bfb2 100644 --- a/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx +++ b/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx @@ -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({ )}
-
+
{projects.map((project, idx) => ( @@ -290,8 +298,8 @@ function ProjectsTimeline({
- - + +
@@ -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: ( - - - - ), - text: "إجراء الفحوصات غير الإتلافية (NDT) للكشف عن العيوب الخفية في المكونات المعدنية.", - }, - { - icon: ( - - - - ), - text: "فحص اللحامات باستخدام:", - }, - { - icon: ( - - - - ), - text: "Ultrasonic Testing (UT) - الفحص بالموجات فوق الصوتية.", - }, - { - icon: ( - - - - ), - text: "Magnetic Particle Testing (MT) - الفحص بالجسيمات المغناطيسية.", - }, - { - icon: ( - - - - ), - text: "Penetrant Testing (PT) - الفحص بالسوائل المتغلغلة.", - }, - { - icon: ( - - - - ), - text: "Visual Testing (VT) - الفحص البصري وتقييم جودة اللحام ومطابقته للمواصفات.", - }, - { - icon: ( - - - - ), - text: "تدقيق ومطابقة المخططات التكنولوجية والهندسية لأعمال التصنيع المعدني، الميكانيكي، الكهربائي ومنظومات التحكم.", - }, - { - icon: ( - - - - ), - text: "تدقيق ومطابقة جاهزية المعدات الهندسية وملائمتها للمعايير العالمية.", - }, - { - icon: ( - - - - ), - 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 = [ + (), + (), + (), + (), + () + ]; + 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 ( -
+
@@ -450,7 +418,7 @@ export default function DepartmentDetail5() { > مرافق وخدمات التفتيش والفحص @@ -466,19 +434,19 @@ export default function DepartmentDetail5() { {active === "expertise" ? ( -
اختصاص القسم
-

يقدم خدمات الفحص والتفتيش الهندسي وفق المعايير الدولية المعتمدة، ويشمل:

-

الاطّلاع على البطاقات أدناه للحصول على تفاصيل كل خدمة.

+
{t("departmentDetail5.hero.expertiseBadge")}
+

{t("departmentDetail5.hero.expertiseTitle")}

+

{t("departmentDetail5.hero.expertiseSubtitle")}

 ) : active === "works" ? ( -
الاعمال المنفذة
-

الاعمال المنفذة

-

عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.

+
{t("departmentDetail5.hero.worksBadge")}
+

{t("departmentDetail5.hero.worksTitle")}

+

{t("departmentDetail5.hero.worksSubtitle")}

 ) : ( -

قسم التفتيش والفحص الفني و الهندسي

+

{t("departmentDetail5.hero.defaultTitle")}

 )} @@ -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`} > -
+
-
@@ -519,7 +486,7 @@ export default function DepartmentDetail5() {

{b.title}

- انقر للاطّلاع على التفاصيل + {t("departmentDetail5.buttons.clickForDetails")} @@ -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`} >

{b.id}

{b.title}

-

انقر للاطّلاع على التفاصيل

+

{t("departmentDetail5.buttons.clickForDetails")}

@@ -592,11 +559,11 @@ export default function DepartmentDetail5() { - العودة للقائمة الرئيسية + {t("departmentDetail5.buttons.backToMenu")}
- +
) : ( @@ -605,7 +572,7 @@ export default function DepartmentDetail5() { - العودة للقائمة الرئيسية + {t("departmentDetail5.buttons.backToMenu")}
@@ -618,7 +585,7 @@ export default function DepartmentDetail5() { transition={{ delay: index * 0.08, duration: 0.5 }} className="relative group" > -
+
{item.icon} @@ -643,7 +610,7 @@ export default function DepartmentDetail5() {
- خدمات احترافية متكاملة + {t("departmentDetail5.ui.servicesProfessional")}
diff --git a/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx b/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx index 3f804d5..760c52b 100644 --- a/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx +++ b/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx @@ -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 ( -
+
@@ -265,7 +270,7 @@ function ProjectsTimeline({ )}
-
+
{projects.map((project, idx) => ( @@ -295,8 +300,8 @@ function ProjectsTimeline({
- - + +
@@ -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 ( -
+
@@ -423,7 +358,7 @@ export default function DepartmentDetail6() { > مرافق ومشروعات استراتيجية @@ -438,20 +373,20 @@ export default function DepartmentDetail6() {
{active === "expertise" ? ( - -
خدمات القسم
-

خدمات القسم

-

الاطّلاع على البطاقات أدناه للحصول على تفاصيل كل خدمة.

+ +
{t("departmentDetail6.hero.expertiseBadge")}
+

{t("departmentDetail6.hero.expertiseTitle")}

+

{t("departmentDetail6.hero.expertiseSubtitle")}

 ) : active === "works" ? ( - -
الاعمال المنفذة
-

الاعمال المنفذة

-

عرض مشروعاتنا وخط الزمن الخاص بالأعمال المنفذة.

+ +
{t("departmentDetail6.hero.worksBadge")}
+

{t("departmentDetail6.hero.worksTitle")}

+

{t("departmentDetail6.hero.worksSubtitle")}

 ) : ( - -

قسم المشاريع الاستراتيجية

+ +

{t("departmentDetail6.hero.defaultTitle")}

 )} @@ -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`} >
@@ -492,7 +427,7 @@ export default function DepartmentDetail6() {

{b.title}

- انقر للاطّلاع على التفاصيل + {ui.clickToView} @@ -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`} >

{b.id}

{b.title}

-

انقر للاطّلاع على التفاصيل

+

{ui.clickToView}

@@ -561,24 +496,33 @@ export default function DepartmentDetail6() { ) : active === "works" ? ( - 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"> + 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'}`}> - العودة للقائمة الرئيسية + {backToMenu}
- +
) : ( - 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"> + 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'}`}> - العودة للقائمة الرئيسية + {backToMenu}
@@ -616,7 +560,7 @@ export default function DepartmentDetail6() {
- خدمات احترافية متكاملة + {t("departmentDetail6.ui.servicesProfessional")}
diff --git a/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx b/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx index 7ad1fbe..fc39036 100644 --- a/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx +++ b/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx @@ -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 d20 from "../../../../src/assets/Images/d20.jpeg"; import d31 from "../../../../src/assets/Images/d31.jpeg"; import d32 from "../../../../src/assets/Images/d32.jpeg"; @@ -9,6 +10,10 @@ function ProjectsTimeline({ mainTitle = "المشاريع المنفذة", subtitle = "خط زمني شامل للأعمال والإنجازات", plain = false, + dir = "rtl", + scrollLabel = "خط زمني قابل للتمرير", + prevLabel = "السابق", + nextLabel = "التالي" }) { const wrapperRef = useRef(null); const scrollRef = useRef(null); @@ -190,7 +195,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; } @@ -246,7 +251,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 ( -
+
@@ -260,7 +265,7 @@ function ProjectsTimeline({ )}
-
+
{projects.map((project, idx) => ( @@ -290,8 +295,8 @@ function ProjectsTimeline({
- - + +
@@ -300,93 +305,75 @@ function ProjectsTimeline({ ); } -const defaultProjects = [ - { - year: "1999-2009", - items: [ - "المنشآت المعدنية لمعامل درفلة الحديد: معامل الوهيب - العربية - الدولية", - "أعمال تصنيع وإمداد هياكل ومكونات خطوط درفلة وحدات الحديد", - ], - }, - { - year: "2015", - items: [ - "تنفيذ الأعمال المعدنية لمشروع إنشاء مصنع الأسمنت المتحدة", - ], - }, - { - year: "2021", - items: [ - "تصنيع وتنفيذ هياكل معدنية وروافع جسرية وخزانات مياه صناعية", - ], - }, - { - year: "2022", - items: [ - "تنفيذ هنغارات معدنية وإسمنتية عالية التحصين", - ], - }, -]; - +/* DepartmentDetail7 component: معدّل لاستخدام i18n */ export default function DepartmentDetail7() { + const { t, i18n } = useTranslation(); + const isRTL = i18n.dir() === "rtl"; + const [active, setActive] = useState(null); - const buttons = [ - { id: 1, title: "اختصاص القسم", key: "expertise" }, - { id: 2, title: "الاعمال المنفذة", key: "works" }, + // صور البطل + const heroImages = { + default: d20, + expertise: d31, + works: d32 + }; + + // جلب الأزرار/البيانات من الترجمة + const buttons = t("departmentDetail7.buttons", { returnObjects: true }); + const projectsTimeline = t("departmentDetail7.projectsTimeline.defaultProjects", { returnObjects: true }); + const expertiseTexts = t("departmentDetail7.expertiseItems", { returnObjects: true }); + const hero = t("departmentDetail7.hero", { returnObjects: true }); + const ui = t("departmentDetail7.ui", { returnObjects: true }); + const backToMenu = t("departmentDetail7.backToMenu"); + + // أيقونات ثابتة (مثل الملف الأصلي) — سنطابقها مع النصوص حسب الترتيب + const icons = [ + ( + + + + ), + ( + + + + ), + ( + + + + ), + ( + + + + ), + ( + + + + ) ]; - const expertiseItems = [ - { - icon: ( - - - - ), - text: "تصميم وتصنيع وتنفيذ الهياكل المعدنية." - }, - { - icon: ( - - - - ), - text: "تنفيذ الأعمال المعدنية للمصانع والمنشآت الصناعية." - }, - { - icon: ( - - - - ), - text: "تصنيع وتركيب الروافع الجسرية المتحركة والثابتة." - }, - { - icon: ( - - - - ), - text: "تصنيع خزانات المياه الصناعية وخزانات الفايبر." - }, - { - icon: ( - - - - ), - text: "تقديم حلول دعم صناعي متكاملة للمشاريع الكبرى." - }, - ]; + // خلق عناصر الخدمات بدمج الأيقونات مع النصوص (نحافظ على ترتيب الأيقونات كما في النسخة الأصلية) + const expertiseItems = expertiseTexts.map((text, idx) => { + const icon = icons[idx] || icons[icons.length - 1]; // fallback للأيقونة الأخيرة إن نقصت + return { icon, text }; + }); + + useEffect(() => { + // تهيئة أي شيء عند تغير اللغة إن احتجنا (لا تغيير للواجهة هنا) + }, [i18n.language]); const handleButtonClick = (key) => { setActive((prev) => (prev === key ? null : key)); }; - const heroImage = active === "expertise" ? d31 : active === "works" ? d32 : d20; + const heroImage = active === "expertise" ? heroImages.expertise : active === "works" ? heroImages.works : heroImages.default; return ( -
+
@@ -400,7 +387,7 @@ export default function DepartmentDetail7() { > قسم الأعمال المعدنية @@ -415,22 +402,20 @@ export default function DepartmentDetail7() {
{active === "expertise" ? ( - -
اختصاص القسم
-

قسم الاعمال المعدنية والدعم الصناعي

-

- يختص هذا القسم بتنفيذ وتصنيع الأعمال المعدنية والداعمة للمشاريع الصناعية والخدمية، ويشمل: -

+ +
{hero.expertiseBadge}
+

{hero.expertiseTitle}

+

{hero.expertiseSubtitle}

 ) : active === "works" ? ( - -
الأعمال المنفذة
-

الأعمال المنفذة

-

عرض لمشروعاتنا وأمثلة على الأعمال المعدنية المنفذة عبر السنين.

+ +
{hero.worksBadge}
+

{hero.worksTitle}

+

{hero.worksSubtitle}

 ) : ( - -

قسم الاعمال المعدنية والدعم الصناعي

+ +

{hero.defaultTitle}

 )} @@ -458,7 +443,7 @@ export default function DepartmentDetail7() { 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/85 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/85 backdrop-blur-sm`} >
@@ -470,7 +455,7 @@ export default function DepartmentDetail7() {

{b.title}

- انقر للاطّلاع على التفاصيل + {ui.clickToView} @@ -513,14 +498,14 @@ export default function DepartmentDetail7() { 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`} >

{b.id}

{b.title}

-

انقر للاطّلاع على التفاصيل

+

{ui.clickToView}

@@ -539,24 +524,33 @@ export default function DepartmentDetail7() { ) : active === "works" ? ( - 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"> + 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'}`}> - العودة للقائمة الرئيسية + {backToMenu}
- +
) : ( - 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"> + 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'}`}> - العودة للقائمة الرئيسية + {backToMenu}
@@ -593,7 +587,7 @@ export default function DepartmentDetail7() {
- للمزيد من الأمثلة راجع قسم "الأعمال المنفذة". + {ui.servicesProfessional}
diff --git a/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx b/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx index 185634c..394483a 100644 --- a/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx +++ b/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx @@ -1,20 +1,27 @@ -import React, { useState, useEffect, useRef, useCallback } from "react"; +import React, { useState, useEffect } from "react"; import { motion, AnimatePresence } from "framer-motion"; +import { useTranslation } from "react-i18next"; import d21 from "../../../../src/assets/Images/d21.jpeg"; import d34 from "../../../../src/assets/Images/d34.jpg"; import d33 from "../../../../src/assets/Images/d33.png"; +import { useRef, useCallback, useState as useStateLocal } from "react"; + function ProjectsTimeline({ projects, mainTitle = "المشاريع المنفذة", subtitle = "خط زمني شامل للأعمال والإنجازات", plain = false, + dir = "rtl", + scrollLabel = "خط زمني قابل للتمرير", + prevLabel = "السابق", + nextLabel = "التالي" }) { const wrapperRef = useRef(null); const scrollRef = useRef(null); const svgRef = useRef(null); - const [itemsRefs, setItemsRefs] = useState([]); - const [currentIndex, setCurrentIndex] = useState(0); + const [itemsRefs, setItemsRefs] = useStateLocal([]); + const [currentIndex, setCurrentIndex] = useStateLocal(0); useEffect(() => { setItemsRefs((r) => { @@ -190,25 +197,25 @@ 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; } .svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; } - .timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:6; flex:0 0 auto; } - .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:8; backdrop-filter: blur(8px) saturate(120%); background-clip: padding-box; } + .timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; flex:0 0 auto; } + .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%); background-clip: padding-box; } .year-circle::after { content: ''; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(249,115,22,0.08); opacity:0; transition:all .6s ease; } .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); } .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; } @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} } - .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); box-sizing:border-box; z-index:12; } + .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); box-sizing:border-box; } .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:18px; left:50%; transform: translateX(-50%); display:flex; gap:20px; z-index:3; pointer-events:auto; } + .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); } @@ -222,24 +229,21 @@ function ProjectsTimeline({ .timeline-item { margin:0 14px; } .year-circle { width:84px; height:84px; font-size:14px; } .timeline-item.active .year-circle { width:116px; height:116px; font-size:18px; } - .project-card { min-width:220px; max-width:88vw; padding:18px; margin-top:18px; } - .project-card { width: calc(86vw); min-width:unset; } + .project-card { min-width:240px; max-width:320px; padding:18px; margin-top:18px; } .project-text { font-size:13px; line-height:1.6; } .scroll-btn { width:48px; height:48px; font-size:20px; } - .scroll-indicator { bottom:8px; } + .scroll-indicator { bottom:18px; } .svg-container { display:block; } - .timeline-item { align-items:center; } } @media (max-width:420px){ .timeline-wrapper { padding:14px 12px; align-items:flex-start; } .timeline-item { margin:0 8px; } - .project-card { width: calc(100vw - 48px); max-width:100%; min-width:120px; padding:12px; margin-top:12px; border-radius:14px; } + .project-card { width: calc(100vw - 64px); 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; } .year-circle { width:54px !important; height:54px !important; font-size:12px !important; } .timeline-item.active .year-circle { width:86px !important; height:86px !important; font-size:15px !important; transform: translateY(-8px) scale(1.02); } - .scroll-indicator { bottom:6px; } - .timeline-item { align-items:center; } + .scroll-indicator { bottom:24px; } } .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; } @@ -249,7 +253,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 ( -
+
@@ -263,7 +267,7 @@ function ProjectsTimeline({ )}
-
+
{projects.map((project, idx) => ( @@ -293,8 +297,8 @@ function ProjectsTimeline({
- - + +
@@ -303,91 +307,62 @@ function ProjectsTimeline({ ); } -const defaultProjects = [ - { - year: "2009-2024", - items: [ - "تأمين وتجهيز مواد ومعدات لمشاريع صناعية", - ], - }, - { - year: "2024", - items: [ - "تجهيز المستودعات والمباني الإدارية بالمفروشات والتجهيزات والأنظمة اللازمة", - ], - }, - { - year: "2024", - items: [ - "إدارة لوجستية لمشاريع متعددة المواقع", - ], - }, - { - year: "2023", - items: [ - "الدراسات الهندسية والفنية وتنفيذ سكن الإيواء لمتضرري الزلزال: 1000 شقة سكنية مسبق الصنع", - ], - }, -]; - +/* DepartmentDetail8 component: يقرأ النصوص من i18n ويضبط الاتجاه/المحاذاة */ export default function DepartmentDetail8() { + const { t, i18n } = useTranslation(); + const isRTL = i18n.dir() === "rtl"; + const [active, setActive] = useState(null); - const buttons = [ - { id: 1, title: "اختصاص القسم", key: "expertise" }, - { id: 2, title: "الاعمال المنفذة", key: "works" }, + const hero = t("departmentDetail8.hero", { returnObjects: true }); + const buttons = t("departmentDetail8.buttons", { returnObjects: true }); + const projectsTimeline = t("departmentDetail8.projectsTimeline.defaultProjects", { returnObjects: true }); + const expertiseTexts = t("departmentDetail8.expertiseItems", { returnObjects: true }); + const ui = t("departmentDetail8.ui", { returnObjects: true }); + const backToMenu = t("departmentDetail8.backToMenu"); + const scrollLabels = t("departmentDetail8.scroll", { returnObjects: true }); + + const icons = [ + ( + + + + ), + ( + + + + ), + ( + + + + ), + ( + + + + ), + ( + + + + ), + ( + + + + ) ]; - const expertiseItems = [ - { - icon: ( - - - - ), - text: "تأمين الخدمات اللوجستية من مركبات النقل والإقامة المتنقلة والثابتة للموظفين والخبراء وفق المتطلبات." - }, - { - icon: ( - - - - ), - text: "إدارة سلاسل التوريد." - }, - { - icon: ( - - - - ), - text: "توريد المعدات والمواد الأولية." - }, - { - icon: ( - - - - ), - text: "التنسيق مع الموردين والمصنعين." - }, - { - icon: ( - - - - ), - text: "إدارة المخازن والمستودعات." - }, - { - icon: ( - - - - ), - text: "دعم العمليات التشغيلية للمشاريع الصناعية والنفطية والهندسية." - }, - ]; + const expertiseItems = expertiseTexts.map((text, idx) => { + const icon = icons[idx] || icons[icons.length - 1]; + return { icon, text }; + }); + + useEffect(() => { + // أي تهيئة مرتبطة باللغة إذا احتجنا + }, [i18n.language]); const handleButtonClick = (key) => { setActive((prev) => (prev === key ? null : key)); @@ -396,7 +371,7 @@ export default function DepartmentDetail8() { const heroImage = active === "expertise" ? d34 : active === "works" ? d33 : d21; return ( -
+
@@ -410,7 +385,7 @@ export default function DepartmentDetail8() { > قسم الخدمات والدعم اللوجستي @@ -425,22 +400,20 @@ export default function DepartmentDetail8() {
{active === "expertise" ? ( - -
اختصاص القسم
-

قسم الخدمات والدعم اللوجستي

-

- يوفر هذا القسم الدعم اللوجستي اللازم للشركات الهندسية والصناعية والتجارية خلال فترة انطلاقتها ولتنفيذ وإدارة المشاريع بكفاءة، ويشمل: -

+ +
{hero.expertiseBadge}
+

{hero.expertiseTitle}

+

{hero.expertiseSubtitle}

 ) : active === "works" ? ( - -
الأعمال المنفذة
-

الأعمال المنفذة

-

عرض لمشروعاتنا وأمثلة على الأعمال اللوجستية المنفذة.

+ +
{hero.worksBadge}
+

{hero.worksTitle}

+

{hero.worksSubtitle}

 ) : ( - -

قسم الخدمات والدعم اللوجستي

+ +

{hero.defaultTitle}

 )} @@ -468,7 +441,7 @@ export default function DepartmentDetail8() { 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/85 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/85 backdrop-blur-sm`} >
@@ -480,7 +453,7 @@ export default function DepartmentDetail8() {

{b.title}

- انقر للاطّلاع على التفاصيل + {ui.clickToView} @@ -523,14 +496,14 @@ export default function DepartmentDetail8() { 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`} >

{b.id}

{b.title}

-

انقر للاطّلاع على التفاصيل

+

{ui.clickToView}

@@ -549,24 +522,33 @@ export default function DepartmentDetail8() { ) : active === "works" ? ( - 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"> + 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'}`}> - العودة للقائمة الرئيسية + {backToMenu}
- +
) : ( - 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"> + 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'}`}> - العودة للقائمة الرئيسية + {backToMenu}
@@ -603,7 +585,7 @@ export default function DepartmentDetail8() {
- لمزيد من الأمثلة راجع قسم "الأعمال المنفذة". + {ui.servicesProfessional}
diff --git a/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx b/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx index 1884837..8f37004 100644 --- a/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx +++ b/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx @@ -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() { ), - text: "تصميم وتنفيذ أنظمة التحكم الصناعية." + text: expertiseTexts[0] || "تصميم وتنفيذ أنظمة التحكم الصناعية." }, { icon: ( @@ -343,7 +321,7 @@ export default function DepartmentDetail9() { ), - text: "أتمتة خطوط الإنتاج والمنشآت وأنظمة المراقبة التشغيلية مع توريد التجهيزات اللازمة." + text: expertiseTexts[1] || "أتمتة خطوط الإنتاج والمنشآت وأنظمة المراقبة التشغيلية مع توريد التجهيزات اللازمة." }, { icon: ( @@ -352,7 +330,7 @@ export default function DepartmentDetail9() { ), - text: "أنظمة SCADA و PLC." + text: expertiseTexts[2] || "أنظمة SCADA و PLC." }, { icon: ( @@ -360,7 +338,7 @@ export default function DepartmentDetail9() { ), - text: "تطوير وتنفيذ أنظمة إدارة محطات الوقود (FMS)." + text: expertiseTexts[3] || "تطوير وتنفيذ أنظمة إدارة محطات الوقود (FMS)." }, { icon: ( @@ -368,7 +346,7 @@ export default function DepartmentDetail9() { ), - text: "ربط الأنظمة التشغيلية بالحلول البرمجية." + text: expertiseTexts[4] || "ربط الأنظمة التشغيلية بالحلول البرمجية." }, { icon: ( @@ -377,18 +355,20 @@ export default function DepartmentDetail9() { ), - 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 ( -
+
@@ -402,7 +382,7 @@ export default function DepartmentDetail9() { > قسم الأتمتة والتحكم @@ -418,21 +398,21 @@ export default function DepartmentDetail9() { {active === "expertise" ? ( -
اختصاص القسم
-

قسم الأتمتة والتحكم

+
{t("departmentDetail9.hero.expertiseBadge")}
+

{t("departmentDetail9.hero.expertiseTitle")}

- يختص هذا القسم بتقديم حلول الأتمتة والتحكم والتحول الرقمي لجميع المنشآت الصناعية والهندسية وخطوط الإنتاج، ويشمل: + {t("departmentDetail9.hero.expertiseSubtitle")}

) : active === "works" ? ( -
الأعمال المنفذة
-

الأعمال المنفذة

-

أمثلة على أنظمة أتمتة وتحكم ونظم رقمية نفذناها للعملاء.

+
{t("departmentDetail9.hero.worksBadge")}
+

{t("departmentDetail9.hero.worksTitle")}

+

{t("departmentDetail9.hero.worksSubtitle")}

 ) : ( -

قسم الأتمتة والتحكم

+

{t("departmentDetail9.hero.defaultTitle")}

 )} @@ -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`} >
@@ -463,9 +443,9 @@ export default function DepartmentDetail9() {

{b.title}

- انقر للاطّلاع على التفاصيل + {t("departmentDetail9.ui.clickToView") || "انقر للاطّلاع على التفاصيل"} - +

@@ -490,13 +470,7 @@ export default function DepartmentDetail9() {
{!active && ( - +
{buttons.map((b, index) => (

{b.title}

-

انقر للاطّلاع على التفاصيل

+

{t("departmentDetail9.ui.clickToView") || "انقر للاطّلاع على التفاصيل"}

- + ))} @@ -532,9 +506,9 @@ export default function DepartmentDetail9() { ) : active === "works" ? ( - 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"> + 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}`}> - العودة للقائمة الرئيسية + {t("departmentDetail9.backToMenu")}
@@ -543,9 +517,9 @@ export default function DepartmentDetail9() { ) : ( - 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"> + 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}`}> - العودة للقائمة الرئيسية + {t("departmentDetail9.backToMenu")}
@@ -573,7 +547,7 @@ export default function DepartmentDetail9() {
- للاطلاع على المزيد من الأعمال راجع "الأعمال المنفذة". + {t("departmentDetail9.ui.servicesProfessional")}
diff --git a/src/Components/Sections/Departments/Departments.jsx b/src/Components/Sections/Departments/Departments.jsx index e36d71f..61e2d69 100644 --- a/src/Components/Sections/Departments/Departments.jsx +++ b/src/Components/Sections/Departments/Departments.jsx @@ -8,6 +8,7 @@ import { useVelocity, } from "framer-motion"; import { useNavigate } from "react-router-dom"; +import { useTranslation } from "react-i18next"; import d1 from "../../../../src/assets/Images/d1.jpeg"; import d7 from "../../../../src/assets/Images/d7.jpeg"; @@ -31,9 +32,10 @@ const departments = [ { id: 9, title: "قسم الاتمتة والتحكم", image: d22 }, ]; -function DepartmentCard({ dept, offset }) { +function DepartmentCard({ dept, offset, index }) { const navigate = useNavigate(); const wrapperRef = useRef(null); + const { t } = useTranslation(); const rotateX = useMotionValue(0); const rotateY = useMotionValue(0); @@ -108,6 +110,8 @@ function DepartmentCard({ dept, offset }) { } }; + const translatedTitle = t(`departments.list.${dept.id - 1}`, { defaultValue: dept.title }); + return (
- {dept.title} + {translatedTitle}

- أقسامنا + {t('departments.heading', { defaultValue: 'أقسامنا' })}

@@ -170,6 +176,7 @@ export default function Departments() { ))} diff --git a/src/Components/Sections/Home/Home.jsx b/src/Components/Sections/Home/Home.jsx index a2c6ca9..b14cacf 100644 --- a/src/Components/Sections/Home/Home.jsx +++ b/src/Components/Sections/Home/Home.jsx @@ -1,9 +1,12 @@ import React, { useEffect, useState, useRef } from "react"; import styled from 'styled-components'; +import { useTranslation } from 'react-i18next'; export default function EngineeringHeroFlowbite() { + const { t, i18n } = useTranslation(); + const defaultConfig = { - main_title: "شريكك الهندسي لتنفيذ وإدارة المشاريع باحتراف", + main_title: "عندما تطلب الرؤية مستشارًا, ويحتاج المخطط منفذًا استراتيجيًا…نكون القرار بالقيادة من الرؤية حتى التسليم", subtitle: "حلول متكاملة تشمل التصميم، التنفيذ، التشغيل، والصيانة\nللمشاريع الصناعية والمدنية، وفق أحدث المعايير والتقنيات", primary_color: "#e67e22", @@ -15,7 +18,11 @@ export default function EngineeringHeroFlowbite() { font_size: 16, }; - const [config, setConfig] = useState(defaultConfig); + const [config, setConfig] = useState({ + ...defaultConfig, + main_title: t ? t('hero.main_title') : defaultConfig.main_title, + subtitle: t ? t('hero.subtitle') : defaultConfig.subtitle, + }); const [isMounted, setIsMounted] = useState(false); const mainTitleRef = useRef(null); @@ -33,10 +40,32 @@ export default function EngineeringHeroFlowbite() { }, []); useEffect(() => { - const t = setTimeout(() => setIsMounted(true), 60); - return () => clearTimeout(t); + const tId = setTimeout(() => setIsMounted(true), 60); + return () => clearTimeout(tId); }, []); + useEffect(() => { + const updateFromI18n = () => { + const lang = i18n.language || 'en'; + let main = t('hero.main_title'); + if (lang && lang.startsWith('en')) { + main = main.replace(/[—–]/g, ' - '); + } + setConfig((c) => ({ + ...c, + main_title: main, + subtitle: t('hero.subtitle'), + })); + document.documentElement.lang = lang; + document.documentElement.dir = lang.startsWith('ar') ? 'rtl' : 'ltr'; + }; + updateFromI18n(); + i18n.on && i18n.on('languageChanged', updateFromI18n); + return () => { + i18n.off && i18n.off('languageChanged', updateFromI18n); + }; + }, [i18n, t]); + useEffect(() => { const main = mainTitleRef.current; const sub = subtitleRef.current; @@ -45,17 +74,17 @@ export default function EngineeringHeroFlowbite() { const baseSize = config.font_size || defaultConfig.font_size; const applyStyles = () => { + const lang = i18n.language || 'en'; + const isArabic = lang.startsWith('ar'); const width = typeof window !== "undefined" ? window.innerWidth : 1024; - - // Make the *base font size* responsive: smaller on small screens - // fine-grained breakpoints so we avoid abrupt jumps const responsiveBase = width <= 400 ? baseSize * 0.78 : width <= 640 ? baseSize * 0.88 : width <= 1024 ? baseSize * 0.96 : baseSize; - - // multipliers: smaller on small screens - const headingMultiplier = width <= 640 ? 3.0 : 3.8; + const headingMultiplier = width <= 640 ? 2.6 : 3.2; const subtitleMultiplier = width <= 640 ? 0.95 : 1.1; - - // expose base to CSS (some rules reference --base) + const mainText = (config.main_title || defaultConfig.main_title).replace(/\s+/g, " ").trim(); + const mainTextLength = mainText.length; + const lengthFactor = mainTextLength > 100 ? 0.78 : mainTextLength > 70 ? 0.86 : 1.0; + const maxFont = 68; + const minFont = Math.max( Math.round(responsiveBase * 1.6), 14 ); const root = document.documentElement; root.style.setProperty('--base', `${responsiveBase}px`); @@ -71,13 +100,17 @@ export default function EngineeringHeroFlowbite() { .slice(1) .join("
")}`; } - main.style.fontFamily = font; - // use responsiveBase so the font becomes smaller on small screens - main.style.fontSize = `${responsiveBase * headingMultiplier}px`; + const computedSize = Math.min(Math.max(Math.round(responsiveBase * headingMultiplier * lengthFactor), minFont), maxFont); + main.style.fontSize = `${computedSize}px`; main.style.color = config.text_color || defaultConfig.text_color; main.style.fontWeight = 800; - main.style.textAlign = "right"; + main.style.textAlign = isArabic ? "right" : "left"; + main.style.whiteSpace = "normal"; + main.style.wordBreak = "break-word"; + main.style.overflowWrap = "anywhere"; + main.style.direction = isArabic ? "rtl" : "ltr"; + main.style.display = "block"; } if (sub) { @@ -86,107 +119,28 @@ export default function EngineeringHeroFlowbite() { .map((s) => `
${s.trim()}
`) .join(""); sub.style.fontFamily = font; - sub.style.fontSize = `${responsiveBase * subtitleMultiplier}px`; + const subSize = Math.round(responsiveBase * subtitleMultiplier); + sub.style.fontSize = `${subSize}px`; sub.style.color = config.text_color || defaultConfig.text_color; - sub.style.textAlign = "right"; + sub.style.textAlign = isArabic ? "right" : "left"; sub.style.maxWidth = "800px"; + sub.style.whiteSpace = "normal"; + sub.style.wordBreak = "break-word"; + sub.style.overflowWrap = "anywhere"; + sub.style.direction = isArabic ? "rtl" : "ltr"; + sub.style.display = "block"; } - // keep CSS variables synced root.style.setProperty("--ehb-primary", config.primary_color || defaultConfig.primary_color); root.style.setProperty("--ehb-background", config.background_color || defaultConfig.background_color); root.style.setProperty("--ehb-surface", config.secondary_surface || defaultConfig.secondary_surface); root.style.setProperty("--ehb-action", config.secondary_action || defaultConfig.secondary_action); }; - // initial apply applyStyles(); - - // update on resize so that small-screen changes reactively apply window.addEventListener("resize", applyStyles); return () => window.removeEventListener("resize", applyStyles); - }, [config]); - - useEffect(() => { - const element = { - defaultConfig, - onConfigChange: async (newCfg) => { - setConfig((c) => ({ ...c, ...newCfg })); - }, - mapToCapabilities: (cfg) => ({ - recolorables: [ - { - get: () => cfg.background_color || defaultConfig.background_color, - set: (value) => { - cfg.background_color = value; - window?.elementSdk?.setConfig?.({ background_color: value }); - setConfig({ ...cfg }); - }, - }, - { - get: () => cfg.secondary_surface || defaultConfig.secondary_surface, - set: (value) => { - cfg.secondary_surface = value; - window?.elementSdk?.setConfig?.({ secondary_surface: value }); - setConfig({ ...cfg }); - }, - }, - { - get: () => cfg.text_color || defaultConfig.text_color, - set: (value) => { - cfg.text_color = value; - window?.elementSdk?.setConfig?.({ text_color: value }); - setConfig({ ...cfg }); - }, - }, - { - get: () => cfg.primary_color || defaultConfig.primary_color, - set: (value) => { - cfg.primary_color = value; - window?.elementSdk?.setConfig?.({ primary_color: value }); - setConfig({ ...cfg }); - }, - }, - { - get: () => cfg.secondary_action || defaultConfig.secondary_action, - set: (value) => { - cfg.secondary_action = value; - window?.elementSdk?.setConfig?.({ secondary_action: value }); - setConfig({ ...cfg }); - }, - }, - ], - borderables: [], - fontEditable: { - get: () => cfg.font_family || defaultConfig.font_family, - set: (value) => { - cfg.font_family = value; - window?.elementSdk?.setConfig?.({ font_family: value }); - setConfig({ ...cfg }); - }, - }, - fontSizeable: { - get: () => cfg.font_size || defaultConfig.font_size, - set: (value) => { - cfg.font_size = value; - window?.elementSdk?.setConfig?.({ font_size: value }); - setConfig({ ...cfg }); - }, - }, - }), - mapToEditPanelValues: (cfg) => - new Map([ - ["main_title", cfg.main_title || defaultConfig.main_title], - ["subtitle", cfg.subtitle || defaultConfig.subtitle], - ]), - }; - - if (window?.elementSdk?.init) { - try { - window.elementSdk.init(element); - } catch (e) {} - } - }, []); + }, [config, i18n.language]); const goToDepartments = (e) => { e && e.preventDefault && e.preventDefault(); @@ -198,11 +152,11 @@ export default function EngineeringHeroFlowbite() { } }; - const OrangeActionButton = ({ onClick, children }) => { + const OrangeActionButton = ({ onClick }) => { return ( -