Rahaf/REXNT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added images for cdn and edit Imagepreload
All checks were successful
Build frontend / build (push) Successful in 25s
Details

Browse Source
This commit is contained in:
Rahaf
2026-01-20 22:54:08 +03:00
parent 057d118b66
commit 69a2ed83c5
12 changed files with 145 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/Components/ImagePreloader.jsx
View File

@ -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
// home1,
// home1Mobile,
// home2,
// home2Mobile,
// home3,
// home4,
// home4Mobile,
// home5,
// home6,
// home6Mobile,
// home7,
// home7Mobile,
// home8,
// home8Mobile,
// home9,
// home10,
// Services images
// gasStation,
"https://i.imgur.com/KIwqp1N.png",
"https://i.imgur.com/zO4GbnB.png",
"https://i.imgur.com/SIUgWI7.png",
"https://i.imgur.com/sh4F6Xb.png",
"https://i.imgur.com/Y5Gdv4g.jpeg",
"https://i.imgur.com/v3AYLPX.jpeg",
"https://i.imgur.com/i072paW.jpeg",
"https://i.imgur.com/wf4IUNt.jpeg",
"https://i.imgur.com/yY52DzL.jpeg",
"https://i.imgur.com/o1xvcUP.jpeg",
"https://i.imgur.com/R4UR5d2.png",
"https://i.imgur.com/ZhYek8J.jpeg",
"https://i.imgur.com/BPHfMW8.jpeg",
"https://i.imgur.com/ufkwKge.jpeg",
"https://i.imgur.com/zovmMp5.jpeg",
"https://i.imgur.com/02uxTxi.jpeg",
"https://i.imgur.com/tdPRx3S.jpeg",
"https://i.imgur.com/HK3zHq4.jpeg",
"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 }) => {

13
src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
View File

@ -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 d2 from "../../../../src/assets/Images/d2.jpeg";
import d3 from "../../../../src/assets/Images/d3.jpeg";
import d4 from "../../../../src/assets/Images/d4.jpeg";
// import d1 from "https://imgur.com/Y5Gdv4g";
// import d2 from "https://imgur.com/v3AYLPX";
// import d3 from "https://imgur.com/i072paW";
// 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,

29
src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx
View File

@ -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">

17
src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx
View File

@ -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 d15 from "../../../../src/assets/Images/d15.jpg";
import d16 from "../../../../src/assets/Images/d16.jpg";
import d7 from "../../../../src/assets/Images/d7.jpeg";
// import d14 from "../../../../src/assets/Images/d14.jpg";
// import d15 from "../../../../src/assets/Images/d15.jpg";
// import d16 from "../../../../src/assets/Images/d16.jpg";
// 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);

19
src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx
View File

@ -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 d23 from "../../../../src/assets/Images/d23.jpg";
import d24 from "../../../../src/assets/Images/d24.png";
// import d17 from "../../../../src/assets/Images/d17.png";
// import d23 from "../../../../src/assets/Images/d23.jpg";
// 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;

20
src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx
View File

@ -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 d25 from "../../../../src/assets/Images/d25.jpeg";
import d26 from "../../../../src/assets/Images/d26.jpeg";
// import d18 from "../../../../src/assets/Images/d18.jpg";
// import d25 from "../../../../src/assets/Images/d25.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;

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

@ -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 d27 from "../../../../src/assets/Images/d27.jpeg";
import d28 from "../../../../src/assets/Images/d28.jpeg";
import d29 from "../../../../src/assets/Images/d29.jpeg";
import d30 from "../../../../src/assets/Images/d30.png";
// import d19 from "../../../../src/assets/Images/d19.jpeg";
// import d27 from "../../../../src/assets/Images/d27.jpeg";
// import d28 from "../../../../src/assets/Images/d28.jpeg";
// import d29 from "../../../../src/assets/Images/d29.jpeg";
// 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 });

18
src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
View File

@ -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 d31 from "../../../../src/assets/Images/d31.jpeg";
import d32 from "../../../../src/assets/Images/d32.jpeg";
// import d20 from "../../../../src/assets/Images/d20.jpeg";
// import d31 from "../../../../src/assets/Images/d31.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) => {

12
src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
View File

@ -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 d34 from "../../../../src/assets/Images/d34.jpg";
import d33 from "../../../../src/assets/Images/d33.png";
// import d21 from "../../../../src/assets/Images/d21.jpeg";
// import d34 from "../../../../src/assets/Images/d34.jpg";
// 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) => {

10
src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx
View File

@ -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 d35 from "../../../../src/assets/Images/d35.jpeg";
import d36 from "../../../../src/assets/Images/d36.jpg";
// import d22 from "../../../../src/assets/Images/d22.jpg";
// import d35 from "../../../../src/assets/Images/d35.jpeg";
// 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,

32
src/Components/Sections/Departments/Departments.jsx
View File

@ -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 d7 from "../../../../src/assets/Images/d7.jpeg";
import d14 from "../../../../src/assets/Images/d14.jpg";
import d17 from "../../../../src/assets/Images/d17.png";
import d18 from "../../../../src/assets/Images/d18.jpg";
import d19 from "../../../../src/assets/Images/d19.jpeg";
import d20 from "../../../../src/assets/Images/d20.jpeg";
import d21 from "../../../../src/assets/Images/d21.jpeg";
import d22 from "../../../../src/assets/Images/d22.jpg";
// import d1 from "../../../../src/assets/Images/d1.jpeg";
// import d7 from "../../../../src/assets/Images/d7.jpeg";
// import d14 from "../../../../src/assets/Images/d14.jpg";
// import d17 from "../../../../src/assets/Images/d17.png";
// import d18 from "../../../../src/assets/Images/d18.jpg";
// import d19 from "../../../../src/assets/Images/d19.jpeg";
// import d20 from "../../../../src/assets/Images/d20.jpeg";
// import d21 from "../../../../src/assets/Images/d21.jpeg";
// 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 = [
{

13
src/Components/Sections/Home/Home.jsx
View File

@ -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 TPSlogo from "../../../assets/Images/TPS-logo.png";
import NSC from "../../../assets/Images/NSC.png";
import LOGO from "../../../assets/Images/LOGO.png";
// import REXNT from "https://i.imgur.com/KIwqp1N.png";
// import TPSlogo from "https://i.imgur.com/zO4GbnB.png";
// import NSC from "https://i.imgur.com/SIUgWI7.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();