Added images for cdn and edit Imagepreload

src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx

@@ -1,16 +1,18 @@
-// 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";
+// 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";
+
+const d1="https://i.imgur.com/Y5Gdv4g.jpeg";
+const d12="https://i.imgur.com/guqu8T6.jpeg";
+const d13 ="https://i.imgur.com/aoFA4iX.jpeg";
+const d7="https://i.imgur.com/yY52DzL.jpeg";
+
 
-/**
- * ProjectsTimeline (لم يتغير في الهيكل - كامل الوظائف والـ CSS كما في ملفك الأصلي)
- */
 function ProjectsTimeline({
   projects,
   mainTitle,
@@ -198,7 +200,6 @@ function ProjectsTimeline({
     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; }
@@ -300,15 +301,11 @@ function ProjectsTimeline({
   );
 }
 
-/**
- * DepartmentDetail2 — الواجهة الرئيسية
- * يحافظ الشكل الأصلي بالكامل، مع استبدال كل النصوص بمفاتيح الترجمة.
- */
+
 export default function DepartmentDetail2() {
   const { t, i18n } = useTranslation();
   const isRTL = i18n.dir && i18n.dir() === "rtl";
 
-  // نحاول أخذ قوائم المشاريع/الميزات من ملف الترجمة، وإن لم توجد نستخدم الافتراضي
   const defaultProjects =
     t("departmentDetail2.projectsTimeline.defaultProjects", { returnObjects: true }) || [
       { year: "2016", items: ["تنفيذ أبنية خدمية وإدارية ومشاريع إعادة تأهيل."] },
@@ -316,13 +313,11 @@ export default function DepartmentDetail2() {
       { year: "2023", items: ["تصميم وتنفيذ مشروع 1000 شقة سكنية (مساكن الإيواء) بإشراف الهلال الأحمر الإماراتي"] },
     ];
 
-  // عناوين الأزرار من الترجمة
   const buttons = [
     { 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 }) || [
     "تنفيذ المجمعات السكنية والمناطق الخدمية.",
     ". الأبنية الإدارية والتجارية.",
@@ -332,7 +327,6 @@ export default function DepartmentDetail2() {
     ". الالتزام بمعايير الجودة والسلامة المهنية في التنفيذ.",
   ];
 
-  // نُعيد بناء عناصر الخبرة مع الاحتفاظ بالأيقونات كما كانت في الأصل
   const expertiseItems = [
     {
       icon: (
@@ -388,7 +382,6 @@ export default function DepartmentDetail2() {
   };
 
   return (
-    // نستخدم dir من i18n حتى يتغير اتجاه الوثيقة تلقائياً حسب اللغة
     <div dir={i18n.dir()} className="w-full min-h-screen bg-white pb-12">
       <section className="relative">
         <div className="w-full">