Added images for cdn and edit Imagepreload

src/Components/ImagePreloader.jsx

@@ -1,49 +1,41 @@
 import { useState, useEffect } from "react";
 
-// Import all images statically
-// import home1 from "../assets/home1.jpg";
-// import home1Mobile from "../assets/home1-2.jpg";
-// import home2 from "../assets/home2.jpg";
-// import home2Mobile from "../assets/home2-2.jpg";
-// import home3 from "../assets/home3.png";
-// import home4 from "../assets/home4.png";
-// // import home4Mobile from "../assets/home4-2.jpg";
-// import home5 from "../assets/home5.png";
-// import home6 from "../assets/home6.jpg";
-// import home6Mobile from "../assets/home6-2.jpg";
-// import home7 from "../assets/home7.jpg";
-// import home7Mobile from "../assets/home7-2.jpg";
-// import home8 from "../assets/home8.jpg";
-// import home8Mobile from "../assets/home8-2.jpg";
-// import home9 from "../assets/home9.jpg";
-// import home10 from "../assets/home10.jpg";
-
-// Services images
-// import gasStation from "../assets/Images/gasstation.jpg";
-
-
 // List all critical images that need to be preloaded
 const imagesToPreload = [
-  // Home images
+  "https://i.imgur.com/KIwqp1N.png",
-  // home1,
+  "https://i.imgur.com/zO4GbnB.png",
-  // home1Mobile,
+  "https://i.imgur.com/SIUgWI7.png",
-  // home2,
+  "https://i.imgur.com/sh4F6Xb.png",
-  // home2Mobile,
+  "https://i.imgur.com/Y5Gdv4g.jpeg",
-  // home3,
+  "https://i.imgur.com/v3AYLPX.jpeg",
-  // home4,
+  "https://i.imgur.com/i072paW.jpeg",
-  // home4Mobile,
+  "https://i.imgur.com/wf4IUNt.jpeg",
-  // home5,
+  "https://i.imgur.com/yY52DzL.jpeg",   
-  // home6,
+  "https://i.imgur.com/o1xvcUP.jpeg",   
-  // home6Mobile,
+  "https://i.imgur.com/R4UR5d2.png",    
-  // home7,
+  "https://i.imgur.com/ZhYek8J.jpeg",   
-  // home7Mobile,
+  "https://i.imgur.com/BPHfMW8.jpeg",   
-  // home8,
+  "https://i.imgur.com/ufkwKge.jpeg",   
-  // home8Mobile,
+  "https://i.imgur.com/zovmMp5.jpeg",   
-  // home9,
+  "https://i.imgur.com/02uxTxi.jpeg",   
-  // home10,
+  "https://i.imgur.com/tdPRx3S.jpeg",
-  // Services images
+  "https://i.imgur.com/HK3zHq4.jpeg",
-  // gasStation,
+  "https://i.imgur.com/uAaae7s.jpeg",
-
+  "https://i.imgur.com/0Pk2UCo.png",
+  "https://i.imgur.com/voi0eQI.jpeg",
+  "https://i.imgur.com/L9ygJdP.jpeg",
+  "https://i.imgur.com/MvjtBCL.jpeg",
+  "https://i.imgur.com/ekFWpZ1.jpeg",
+  "https://i.imgur.com/doxdYIX.jpeg",
+  "https://i.imgur.com/xsT3ZV8.png",
+  "https://i.imgur.com/Bte4bPE.jpeg",
+  "https://i.imgur.com/QlbXMye.jpeg",
+  "https://i.imgur.com/P2EY4jw.jpeg",
+  "https://i.imgur.com/8qeT81T.png",
+  "https://i.imgur.com/NDp2kuS.jpeg",
+  "https://i.imgur.com/zSHOy11.jpeg",
+  "https://i.imgur.com/guqu8T6.jpeg",
+  "https://i.imgur.com/aoFA4iX.jpeg"
 ];
 
 const ImagePreloader = ({ children }) => {

src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx

@@ -3,10 +3,15 @@ import { motion, AnimatePresence } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import "../../../../src/i18n";
 
-import d1 from "../../../../src/assets/Images/d1.jpeg";
+// import d1 from "https://imgur.com/Y5Gdv4g";
-import d2 from "../../../../src/assets/Images/d2.jpeg";
+// import d2 from "https://imgur.com/v3AYLPX";
-import d3 from "../../../../src/assets/Images/d3.jpeg";
+// import d3 from "https://imgur.com/i072paW";
-import d4 from "../../../../src/assets/Images/d4.jpeg";
+// import d4 from "https://imgur.com/wf4IUNt";
+
+const d1 ="https://i.imgur.com/Y5Gdv4g.jpeg";
+const d2 = "https://i.imgur.com/v3AYLPX.jpeg";
+const d3="https://i.imgur.com/i072paW.jpeg";
+const d4="https://i.imgur.com/wf4IUNt.jpeg";
 
 function ProjectsTimeline({
   projects,

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 d1 from "../../../../src/assets/Images/d1.jpeg";
-import d12 from "../../../../src/assets/Images/d12.jpeg";
+// import d12 from "../../../../src/assets/Images/d12.jpeg";
-import d13 from "../../../../src/assets/Images/d13.jpeg";
+// import d13 from "../../../../src/assets/Images/d13.jpeg";
-import d7 from "../../../../src/assets/Images/d7.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">

src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx

@@ -1,18 +1,23 @@
-// 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 d14 from "../../../../src/assets/Images/d14.jpg";
-import d15 from "../../../../src/assets/Images/d15.jpg";
+// import d15 from "../../../../src/assets/Images/d15.jpg";
-import d16 from "../../../../src/assets/Images/d16.jpg";
+// import d16 from "../../../../src/assets/Images/d16.jpg";
-import d7 from "../../../../src/assets/Images/d7.jpeg";
+// import d7 from "../../../../src/assets/Images/d7.jpeg";
+
+
+const d14="https://i.imgur.com/o1xvcUP.jpeg";
+const d15="https://i.imgur.com/NDp2kuS.jpeg";
+const d16 ="https://i.imgur.com/zSHOy11.jpeg";
+const d7="https://i.imgur.com/yY52DzL.jpeg";
 
 function ProjectsTimeline({
   projects,
   mainTitle = "المشاريع المنفذة",
   subtitle = "خط زمني شامل للأعمال والإنجازات",
   plain = false,
-  rtl = true, // new prop to control direction
+  rtl = true,
 }) {
   const wrapperRef = useRef(null);
   const scrollRef = useRef(null);

src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx

@@ -1,14 +1,14 @@
-// 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 d17 from "../../../../src/assets/Images/d17.png";
-import d23 from "../../../../src/assets/Images/d23.jpg";
+// import d23 from "../../../../src/assets/Images/d23.jpg";
-import d24 from "../../../../src/assets/Images/d24.png";
+// import d24 from "../../../../src/assets/Images/d24.png";
+
+const d17="https://i.imgur.com/R4UR5d2.png";
+const d23="https://i.imgur.com/P2EY4jw.jpeg";
+const d24="https://i.imgur.com/8qeT81T.png";
 
-/**
- * ProjectsTimeline: same structure as your original component but supports RTL/LTR via `rtl` prop.
- */
 function ProjectsTimeline({
   projects,
   mainTitle = "المشاريع المنفذة",
@@ -306,7 +306,6 @@ function ProjectsTimeline({
   );
 }
 
-/** defaultProjects used when translations aren't found */
 const defaultProjects = [
   {
     year: "2009",
@@ -338,7 +337,6 @@ 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";
 
@@ -347,7 +345,6 @@ export default function DepartmentDetail4() {
     { id: 3, title: t("departmentDetail4.buttons.3"), key: "works" }
   ];
 
-  // get expertise items from translations (array)
   const expertiseItemsRaw = t("departmentDetail4.expertiseItems", { returnObjects: true });
   const expertiseItems = Array.isArray(expertiseItemsRaw) && expertiseItemsRaw.length > 0 ? expertiseItemsRaw : [
     "دراسات إنشاء وتطوير محطات الوقود.",
@@ -362,7 +359,6 @@ export default function DepartmentDetail4() {
   ];
 
   const displayItems = expertiseItems.map((text, idx) => {
-    // reuse the same icon set approach (choose icon by index)
     const icons = [
       (<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`i-${idx}-1`}><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>),
       (<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" key={`i-${idx}-2`}><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>),
@@ -374,7 +370,6 @@ export default function DepartmentDetail4() {
     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;
 

src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx

@@ -1,14 +1,16 @@
-// 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 d18 from "../../../../src/assets/Images/d18.jpg";
-import d25 from "../../../../src/assets/Images/d25.jpeg";
+// import d25 from "../../../../src/assets/Images/d25.jpeg";
-import d26 from "../../../../src/assets/Images/d26.jpeg";
+// import d26 from "../../../../src/assets/Images/d26.jpeg";
+
+
+const d18="https://i.imgur.com/ZhYek8J.jpeg";
+const d25="https://i.imgur.com/Bte4bPE.jpeg";
+const d26="https://i.imgur.com/QlbXMye.jpeg";
+
 
-/**
- * ProjectsTimeline: same logic as original, accepts rtl prop to flip text-align and small behaviors.
- */
 function ProjectsTimeline({
   projects,
   mainTitle = "المشاريع المنفذة",
@@ -308,7 +310,6 @@ function ProjectsTimeline({
   );
 }
 
-/** fallback timeline (used if translations missing) */
 const defaultProjects = [
   {
     year: "2009-2010",
@@ -358,7 +359,6 @@ 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";
 
@@ -367,7 +367,6 @@ export default function DepartmentDetail5() {
     { id: 3, title: t("departmentDetail5.buttons.3"), key: "works", img: d26 }
   ];
 
-  // expertise items (translation array)
   const expertiseItemsRaw = t("departmentDetail5.expertiseItems", { returnObjects: true });
   const expertiseItems = Array.isArray(expertiseItemsRaw) && expertiseItemsRaw.length > 0 ? expertiseItemsRaw : [
     "إجراء الفحوصات غير الإتلافية (NDT) للكشف عن العيوب الخفية في المكونات المعدنية.",
@@ -393,7 +392,6 @@ export default function DepartmentDetail5() {
     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;
 

src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx

@@ -1,12 +1,17 @@
 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 d19 from "../../../../src/assets/Images/d19.jpeg";
-import d27 from "../../../../src/assets/Images/d27.jpeg";
+// import d27 from "../../../../src/assets/Images/d27.jpeg";
-import d28 from "../../../../src/assets/Images/d28.jpeg";
+// import d28 from "../../../../src/assets/Images/d28.jpeg";
-import d29 from "../../../../src/assets/Images/d29.jpeg";
+// import d29 from "../../../../src/assets/Images/d29.jpeg";
-import d30 from "../../../../src/assets/Images/d30.png";
+// import d30 from "../../../../src/assets/Images/d30.png";
 
+const d19 ="https://i.imgur.com/BPHfMW8.jpeg";
+const d27="https://i.imgur.com/MvjtBCL.jpeg";
+const d28="https://i.imgur.com/ekFWpZ1.jpeg";
+const d29="https://i.imgur.com/doxdYIX.jpeg";
+const d30="https://i.imgur.com/xsT3ZV8.png";
 function ProjectsTimeline({
   projects,
   mainTitle = "المشاريع المنفذة",
@@ -387,13 +392,11 @@ export default function DepartmentDetail6() {
     return () => clearInterval(tInterval);
   }, []);
 
-  // buttons from translations (array)
   const buttons = [
     { id: 1, title: t("departmentDetail6.buttons.1"), key: "expertise" },
     { id: 3, title: t("departmentDetail6.buttons.3"), key: "works" },
   ];
 
-  // card groups from translations
   const cardGroupsRaw = t("departmentDetail6.cardGroups", {
     returnObjects: true,
   });
@@ -432,7 +435,6 @@ 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 });

src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx

@@ -1,9 +1,13 @@
 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 d20 from "../../../../src/assets/Images/d20.jpeg";
-import d31 from "../../../../src/assets/Images/d31.jpeg";
+// import d31 from "../../../../src/assets/Images/d31.jpeg";
-import d32 from "../../../../src/assets/Images/d32.jpeg";
+// import d32 from "../../../../src/assets/Images/d32.jpeg";
+
+const d20="https://i.imgur.com/ufkwKge.jpeg";
+const d31="https://i.imgur.com/voi0eQI.jpeg";
+const d32="https://i.imgur.com/L9ygJdP.jpeg";
 
 function ProjectsTimeline({
   projects,
@@ -305,21 +309,18 @@ function ProjectsTimeline({
   );
 }
 
-/* DepartmentDetail7 component: معدّل لاستخدام i18n */
 export default function DepartmentDetail7() {
   const { t, i18n } = useTranslation();
   const isRTL = i18n.dir() === "rtl";
 
   const [active, setActive] = useState(null);
 
-  // صور البطل
   const heroImages = {
     default: d20,
     expertise: d31,
     works: d32
   };
 
-  // جلب الأزرار/البيانات من الترجمة
   const buttons = [
     { id: 1, title: t("departmentDetail7.buttons.1"), key: "expertise" },
     { id: 2, title: t("departmentDetail7.buttons.2"), key: "works" },
@@ -331,7 +332,6 @@ export default function DepartmentDetail7() {
   const ui = t("departmentDetail7.ui", { returnObjects: true });
   const backToMenu = t("departmentDetail7.backToMenu");
 
-  // أيقونات ثابتة (مثل الملف الأصلي) — سنطابقها مع النصوص حسب الترتيب
   const icons = [
     (
       <svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -360,14 +360,12 @@ export default function DepartmentDetail7() {
     )
   ];
 
-  // خلق عناصر الخدمات بدمج الأيقونات مع النصوص (نحافظ على ترتيب الأيقونات كما في النسخة الأصلية)
   const expertiseItems = expertiseTexts.map((text, idx) => {
-    const icon = icons[idx] || icons[icons.length - 1]; // fallback للأيقونة الأخيرة إن نقصت
+    const icon = icons[idx] || icons[icons.length - 1]; 
     return { icon, text };
   });
 
   useEffect(() => {
-    // تهيئة أي شيء عند تغير اللغة إن احتجنا (لا تغيير للواجهة هنا)
   }, [i18n.language]);
 
   const handleButtonClick = (key) => {

src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx

@@ -1,9 +1,13 @@
 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 d21 from "../../../../src/assets/Images/d21.jpeg";
-import d34 from "../../../../src/assets/Images/d34.jpg";
+// import d34 from "../../../../src/assets/Images/d34.jpg";
-import d33 from "../../../../src/assets/Images/d33.png";
+// import d33 from "../../../../src/assets/Images/d33.png";
+
+const d21="https://i.imgur.com/zovmMp5.jpeg";
+const d34="https://i.imgur.com/uAaae7s.jpeg";
+const d33="https://i.imgur.com/0Pk2UCo.png";
 
 import { useRef, useCallback, useState as useStateLocal } from "react";
 
@@ -370,7 +374,6 @@ function ProjectsTimeline({
   );
 }
 
-/* DepartmentDetail8 component: يقرأ النصوص من i18n ويضبط الاتجاه/المحاذاة */
 export default function DepartmentDetail8() {
   const { t, i18n } = useTranslation();
   const isRTL = i18n.dir() === "rtl";
@@ -490,7 +493,6 @@ export default function DepartmentDetail8() {
   });
 
   useEffect(() => {
-    // أي تهيئة مرتبطة باللغة إذا احتجنا
   }, [i18n.language]);
 
   const handleButtonClick = (key) => {

src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx

@@ -1,9 +1,13 @@
 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 d22 from "../../../../src/assets/Images/d22.jpg";
-import d35 from "../../../../src/assets/Images/d35.jpeg";
+// import d35 from "../../../../src/assets/Images/d35.jpeg";
-import d36 from "../../../../src/assets/Images/d36.jpg";
+// import d36 from "../../../../src/assets/Images/d36.jpg";
+
+const d22="https://i.imgur.com/02uxTxi.jpeg";
+const d35="https://i.imgur.com/tdPRx3S.jpeg";
+const d36="https://i.imgur.com/HK3zHq4.jpeg";
 
 function ProjectsTimeline({
   projects,

src/Components/Sections/Departments/Departments.jsx

@@ -10,15 +10,29 @@ import {
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
-import d1 from "../../../../src/assets/Images/d1.jpeg";
+// import d1 from "../../../../src/assets/Images/d1.jpeg";
-import d7 from "../../../../src/assets/Images/d7.jpeg";
+// import d7 from "../../../../src/assets/Images/d7.jpeg";
-import d14 from "../../../../src/assets/Images/d14.jpg";
+// import d14 from "../../../../src/assets/Images/d14.jpg";
-import d17 from "../../../../src/assets/Images/d17.png";
+// import d17 from "../../../../src/assets/Images/d17.png";
-import d18 from "../../../../src/assets/Images/d18.jpg";
+// import d18 from "../../../../src/assets/Images/d18.jpg";
-import d19 from "../../../../src/assets/Images/d19.jpeg";
+// import d19 from "../../../../src/assets/Images/d19.jpeg";
-import d20 from "../../../../src/assets/Images/d20.jpeg";
+// import d20 from "../../../../src/assets/Images/d20.jpeg";
-import d21 from "../../../../src/assets/Images/d21.jpeg";
+// import d21 from "../../../../src/assets/Images/d21.jpeg";
-import d22 from "../../../../src/assets/Images/d22.jpg";
+// import d22 from "../../../../src/assets/Images/d22.jpg";
+
+
+const d1 ="https://i.imgur.com/Y5Gdv4g.jpeg";
+const d7="https://i.imgur.com/yY52DzL.jpeg";
+const d14="https://i.imgur.com/o1xvcUP.jpeg";
+const d17="https://i.imgur.com/R4UR5d2.png";
+const d18="https://i.imgur.com/ZhYek8J.jpeg";
+const d19 ="https://i.imgur.com/BPHfMW8.jpeg";
+const d20="https://i.imgur.com/ufkwKge.jpeg";
+const d21="https://i.imgur.com/zovmMp5.jpeg";
+const d22="https://i.imgur.com/02uxTxi.jpeg";
+
+
+
 
 const departments = [
   {

src/Components/Sections/Home/Home.jsx

@@ -1,10 +1,15 @@
 import React, { useEffect, useState, useRef } from "react";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
-import REXNT from "../../../assets/Images/REXNT.png";
+// import REXNT from "https://i.imgur.com/KIwqp1N.png";
-import TPSlogo from "../../../assets/Images/TPS-logo.png";
+// import TPSlogo from "https://i.imgur.com/zO4GbnB.png";
-import NSC from "../../../assets/Images/NSC.png";
+// import NSC from "https://i.imgur.com/SIUgWI7.png";
-import LOGO from "../../../assets/Images/LOGO.png";
+// import LOGO from "https://i.imgur.com/sh4F6Xb.png";
+
+const REXNT = "https://i.imgur.com/KIwqp1N.png";
+const TPSlogo = "https://i.imgur.com/zO4GbnB.png";
+const NSC = "https://i.imgur.com/SIUgWI7.png";
+const LOGO = "https://i.imgur.com/sh4F6Xb.png";
 export default function EngineeringHeroFlowbite() {
   const { t, i18n } = useTranslation();