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

Edit image and home
All checks were successful
Build frontend / build (push) Successful in 1m7s
Details

Browse Source
This commit is contained in:
Rahaf
2026-01-21 22:38:31 +03:00
parent 69a2ed83c5
commit 28d089534b
13 changed files with 394 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.jsx
View File

@ -15,7 +15,7 @@ import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentD
import Contact from "./Components/Sections/Contact/Contact"; import Contact from "./Components/Sections/Contact/Contact";
import Footer from "./Components/Nav/Footer"; import Footer from "./Components/Nav/Footer";
import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2"; import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";
import ImagePreloader from "./Components/ImagePreloader"; // import ImagePreloader from "./Components/ImagePreloader";
import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas"; import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas";
import DepartmentDetail3 from "./Components/Sections/DepartmentDetail3/DepartmentDetail3"; import DepartmentDetail3 from "./Components/Sections/DepartmentDetail3/DepartmentDetail3";
import DepartmentDetail4 from "./Components/Sections/DepartmentDetail4/DepartmentDetail4"; import DepartmentDetail4 from "./Components/Sections/DepartmentDetail4/DepartmentDetail4";
@ -156,11 +156,9 @@ const App = () => {
}; };
return ( return (
<ImagePreloader>
<BrowserRouter> <BrowserRouter>
<Layout theme={theme} toggleTheme={toggleTheme} /> <Layout theme={theme} toggleTheme={toggleTheme} />
</BrowserRouter> </BrowserRouter>
</ImagePreloader>
); );
}; };

604
src/Components/ImagePreloader.jsx
View File

@ -1,328 +1,328 @@
import { useState, useEffect } from "react"; // import { useState, useEffect } from "react";
// List all critical images that need to be preloaded // // List all critical images that need to be preloaded
const imagesToPreload = [ // const imagesToPreload = [
"https://i.imgur.com/KIwqp1N.png", // "https://i.imgur.com/KIwqp1N.png",
"https://i.imgur.com/zO4GbnB.png", // "https://i.imgur.com/zO4GbnB.png",
"https://i.imgur.com/SIUgWI7.png", // "https://i.imgur.com/SIUgWI7.png",
"https://i.imgur.com/sh4F6Xb.png", // "https://i.imgur.com/sh4F6Xb.png",
"https://i.imgur.com/Y5Gdv4g.jpeg", // "https://i.imgur.com/Y5Gdv4g.jpeg",
"https://i.imgur.com/v3AYLPX.jpeg", // "https://i.imgur.com/v3AYLPX.jpeg",
"https://i.imgur.com/i072paW.jpeg", // "https://i.imgur.com/i072paW.jpeg",
"https://i.imgur.com/wf4IUNt.jpeg", // "https://i.imgur.com/wf4IUNt.jpeg",
"https://i.imgur.com/yY52DzL.jpeg", // "https://i.imgur.com/yY52DzL.jpeg",
"https://i.imgur.com/o1xvcUP.jpeg", // "https://i.imgur.com/o1xvcUP.jpeg",
"https://i.imgur.com/R4UR5d2.png", // "https://i.imgur.com/R4UR5d2.png",
"https://i.imgur.com/ZhYek8J.jpeg", // "https://i.imgur.com/ZhYek8J.jpeg",
"https://i.imgur.com/BPHfMW8.jpeg", // "https://i.imgur.com/BPHfMW8.jpeg",
"https://i.imgur.com/ufkwKge.jpeg", // "https://i.imgur.com/ufkwKge.jpeg",
"https://i.imgur.com/zovmMp5.jpeg", // "https://i.imgur.com/zovmMp5.jpeg",
"https://i.imgur.com/02uxTxi.jpeg", // "https://i.imgur.com/02uxTxi.jpeg",
"https://i.imgur.com/tdPRx3S.jpeg", // "https://i.imgur.com/tdPRx3S.jpeg",
"https://i.imgur.com/HK3zHq4.jpeg", // "https://i.imgur.com/HK3zHq4.jpeg",
"https://i.imgur.com/uAaae7s.jpeg", // "https://i.imgur.com/uAaae7s.jpeg",
"https://i.imgur.com/0Pk2UCo.png", // "https://i.imgur.com/0Pk2UCo.png",
"https://i.imgur.com/voi0eQI.jpeg", // "https://i.imgur.com/voi0eQI.jpeg",
"https://i.imgur.com/L9ygJdP.jpeg", // "https://i.imgur.com/L9ygJdP.jpeg",
"https://i.imgur.com/MvjtBCL.jpeg", // "https://i.imgur.com/MvjtBCL.jpeg",
"https://i.imgur.com/ekFWpZ1.jpeg", // "https://i.imgur.com/ekFWpZ1.jpeg",
"https://i.imgur.com/doxdYIX.jpeg", // "https://i.imgur.com/doxdYIX.jpeg",
"https://i.imgur.com/xsT3ZV8.png", // "https://i.imgur.com/xsT3ZV8.png",
"https://i.imgur.com/Bte4bPE.jpeg", // "https://i.imgur.com/Bte4bPE.jpeg",
"https://i.imgur.com/QlbXMye.jpeg", // "https://i.imgur.com/QlbXMye.jpeg",
"https://i.imgur.com/P2EY4jw.jpeg", // "https://i.imgur.com/P2EY4jw.jpeg",
"https://i.imgur.com/8qeT81T.png", // "https://i.imgur.com/8qeT81T.png",
"https://i.imgur.com/NDp2kuS.jpeg", // "https://i.imgur.com/NDp2kuS.jpeg",
"https://i.imgur.com/zSHOy11.jpeg", // "https://i.imgur.com/zSHOy11.jpeg",
"https://i.imgur.com/guqu8T6.jpeg", // "https://i.imgur.com/guqu8T6.jpeg",
"https://i.imgur.com/aoFA4iX.jpeg" // "https://i.imgur.com/aoFA4iX.jpeg"
]; // ];
const ImagePreloader = ({ children }) => { // const ImagePreloader = ({ children }) => {
const [imagesLoaded, setImagesLoaded] = useState(false); // const [imagesLoaded, setImagesLoaded] = useState(false);
const [progress, setProgress] = useState(0); // const [progress, setProgress] = useState(0);
useEffect(() => { // useEffect(() => {
let loadedCount = 0; // let loadedCount = 0;
const totalImages = imagesToPreload.length; // const totalImages = imagesToPreload.length;
const preloadImages = async () => { // const preloadImages = async () => {
try { // try {
const loadImage = (src) => { // const loadImage = (src) => {
return new Promise((resolve, reject) => { // return new Promise((resolve, reject) => {
const img = new Image(); // const img = new Image();
img.src = src; // img.src = src;
img.onload = () => { // img.onload = () => {
loadedCount++; // loadedCount++;
setProgress(Math.floor((loadedCount / totalImages) * 100)); // setProgress(Math.floor((loadedCount / totalImages) * 100));
resolve(); // resolve();
}; // };
img.onerror = reject; // img.onerror = reject;
}); // });
}; // };
await Promise.all(imagesToPreload.map(loadImage)); // await Promise.all(imagesToPreload.map(loadImage));
setImagesLoaded(true); // setImagesLoaded(true);
} catch (error) { // } catch (error) {
console.error("Failed to preload images:", error); // console.error("Failed to preload images:", error);
// Continue anyway after a timeout // // Continue anyway after a timeout
setTimeout(() => setImagesLoaded(true), 3000); // setTimeout(() => setImagesLoaded(true), 3000);
} // }
}; // };
preloadImages(); // preloadImages();
}, []); // }, []);
if (!imagesLoaded) { // if (!imagesLoaded) {
return ( // return (
<div className="fixed inset-0 bg-gradient-to-b from-[#0A2540] to-[#10375C] flex flex-col items-center justify-center z-50"> // <div className="fixed inset-0 bg-gradient-to-b from-[#0A2540] to-[#10375C] flex flex-col items-center justify-center z-50">
{/* Animated background effect */} // {/* Animated background effect */}
<div className="absolute inset-0 overflow-hidden opacity-10"> // <div className="absolute inset-0 overflow-hidden opacity-10">
<div className="absolute top-0 left-0 w-full h-full"> // <div className="absolute top-0 left-0 w-full h-full">
{[...Array(20)].map((_, i) => ( // {[...Array(20)].map((_, i) => (
<div // <div
key={i} // key={i}
className="absolute rounded-full bg-white/30" // className="absolute rounded-full bg-white/30"
style={{ // style={{
width: `${Math.random() * 10 + 5}px`, // width: `${Math.random() * 10 + 5}px`,
height: `${Math.random() * 10 + 5}px`, // height: `${Math.random() * 10 + 5}px`,
top: `${Math.random() * 100}%`, // top: `${Math.random() * 100}%`,
left: `${Math.random() * 100}%`, // left: `${Math.random() * 100}%`,
animationDuration: `${Math.random() * 10 + 10}s`, // animationDuration: `${Math.random() * 10 + 10}s`,
animationDelay: `${Math.random() * 5}s`, // animationDelay: `${Math.random() * 5}s`,
}} // }}
/> // />
))} // ))}
</div> // </div>
</div> // </div>
{/* Company logo or branding could go here */} // {/* Company logo or branding could go here */}
<div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider"> // <div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider">
TPS // TPS
</div> // </div>
{/* 3D-style Fuel Tank */} // {/* 3D-style Fuel Tank */}
<div className="relative w-72 h-56 mb-8 perspective-800"> // <div className="relative w-72 h-56 mb-8 perspective-800">
{/* Tank body with 3D effect */} // {/* Tank body with 3D effect */}
<div // <div
className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl" // className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl"
style={{ // style={{
background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)", // background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)",
boxShadow: // boxShadow:
"inset 0 0 15px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3)", // "inset 0 0 15px rgba(0,0,0,0.5), 0 10px 20px rgba(0,0,0,0.3)",
border: "1px solid rgba(255,255,255,0.1)", // border: "1px solid rgba(255,255,255,0.1)",
}} // }}
> // >
{/* Glass effect overlay */} // {/* Glass effect overlay */}
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div> // <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>
{/* Tank Cap with metallic effect */} // {/* Tank Cap with metallic effect */}
<div // <div
className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md" // className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md"
style={{ // style={{
background: // background:
"linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)", // "linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)",
boxShadow: "0 -2px 5px rgba(0,0,0,0.2)", // boxShadow: "0 -2px 5px rgba(0,0,0,0.2)",
}} // }}
> // >
<div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-[#0A2540]/30 rounded-full"></div> // <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-6 h-1 bg-[#0A2540]/30 rounded-full"></div>
</div> // </div>
{/* Fuel Level with dynamic wave effect */} // {/* Fuel Level with dynamic wave effect */}
<div // <div
className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out" // className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out"
style={{ // style={{
height: `${progress}%`, // height: `${progress}%`,
background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)", // background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)",
boxShadow: "0 -5px 15px rgba(235,131,23,0.3)", // boxShadow: "0 -5px 15px rgba(235,131,23,0.3)",
}} // }}
> // >
{/* Animated wave effect at the top of fuel */} // {/* Animated wave effect at the top of fuel */}
<div className="absolute -top-2 left-0 w-full h-4 animate-wave"> // <div className="absolute -top-2 left-0 w-full h-4 animate-wave">
<div // <div
className="relative w-[200%] h-full" // className="relative w-[200%] h-full"
style={{ // style={{
backgroundImage: // backgroundImage:
"linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)", // "linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
backgroundSize: "50% 100%", // backgroundSize: "50% 100%",
animation: "moveWave 3s linear infinite", // animation: "moveWave 3s linear infinite",
}} // }}
></div> // ></div>
</div> // </div>
{/* Bubbles with varied animations */} // {/* Bubbles with varied animations */}
{[...Array(8)].map((_, i) => ( // {[...Array(8)].map((_, i) => (
<div // <div
key={i} // key={i}
className="absolute rounded-full bg-white/20" // className="absolute rounded-full bg-white/20"
style={{ // style={{
width: `${Math.random() * 6 + 2}px`, // width: `${Math.random() * 6 + 2}px`,
height: `${Math.random() * 6 + 2}px`, // height: `${Math.random() * 6 + 2}px`,
bottom: `${Math.random() * 80}%`, // bottom: `${Math.random() * 80}%`,
left: `${Math.random() * 90 + 5}%`, // left: `${Math.random() * 90 + 5}%`,
animation: `bubble ${ // animation: `bubble ${
Math.random() * 3 + 2 // Math.random() * 3 + 2
}s ease-in infinite ${Math.random() * 2}s`, // }s ease-in infinite ${Math.random() * 2}s`,
}} // }}
/> // />
))} // ))}
</div> // </div>
{/* Tank level markings with glow effect */} // {/* Tank level markings with glow effect */}
<div className="absolute top-0 left-0 h-full w-full flex flex-col justify-between pointer-events-none"> // <div className="absolute top-0 left-0 h-full w-full flex flex-col justify-between pointer-events-none">
{[...Array(4)].map((_, i) => ( // {[...Array(4)].map((_, i) => (
<div // <div
key={i} // key={i}
className="w-full border-b border-[#F3C623]/20 h-1/4" // className="w-full border-b border-[#F3C623]/20 h-1/4"
style={{ // style={{
boxShadow: // boxShadow:
progress > 75 - i * 25 // progress > 75 - i * 25
? "0 1px 3px rgba(243,198,35,0.3)" // ? "0 1px 3px rgba(243,198,35,0.3)"
: "none", // : "none",
}} // }}
> // >
<div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div> // <div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div>
</div> // </div>
))} // ))}
</div> // </div>
</div> // </div>
{/* Fuel Gauge with realistic dial */} // {/* Fuel Gauge with realistic dial */}
<div // <div
className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center" // className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center"
style={{ // style={{
background: // background:
"radial-gradient(circle at center, #102A45 0%, #0A2540 70%)", // "radial-gradient(circle at center, #102A45 0%, #0A2540 70%)",
boxShadow: // boxShadow:
"inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2)", // "inset 0 0 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.2)",
border: "2px solid rgba(235,131,23,0.7)", // border: "2px solid rgba(235,131,23,0.7)",
}} // }}
> // >
{/* Gauge markings */} // {/* Gauge markings */}
{[...Array(9)].map((_, i) => { // {[...Array(9)].map((_, i) => {
const rotation = -135 + i * 30; // const rotation = -135 + i * 30;
const isLarge = i % 2 === 0; // const isLarge = i % 2 === 0;
return ( // return (
<div // <div
key={i} // key={i}
className={`absolute w-${isLarge ? "1.5" : "1"} h-${ // className={`absolute w-${isLarge ? "1.5" : "1"} h-${
isLarge ? "3" : "2" // isLarge ? "3" : "2"
} bg-[#F3C623]/${isLarge ? "70" : "40"}`} // } bg-[#F3C623]/${isLarge ? "70" : "40"}`}
style={{ // style={{
transform: `rotate(${rotation}deg) translateY(-7px)`, // transform: `rotate(${rotation}deg) translateY(-7px)`,
transformOrigin: "bottom center", // transformOrigin: "bottom center",
}} // }}
/> // />
); // );
})} // })}
{/* Gauge needle with smooth animation */} // {/* Gauge needle with smooth animation */}
<div // <div
className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom" // className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom"
style={{ // style={{
transform: `rotate(${-135 + progress * 2.7}deg)`, // transform: `rotate(${-135 + progress * 2.7}deg)`,
transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)", // transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
boxShadow: "0 0 5px rgba(243,198,35,0.5)", // boxShadow: "0 0 5px rgba(243,198,35,0.5)",
}} // }}
> // >
<div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-[#F3C623] shadow-lg"></div> // <div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-2 h-2 rounded-full bg-[#F3C623] shadow-lg"></div>
</div> // </div>
{/* Center pin */} // {/* Center pin */}
<div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div> // <div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div>
{/* E and F indicators */} // {/* E and F indicators */}
<div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold"> // <div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold">
E // E
</div> // </div>
<div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold"> // <div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold">
F // F
</div> // </div>
</div> // </div>
</div> // </div>
{/* Progress indicator with animated glow */} // {/* Progress indicator with animated glow */}
<div className="relative"> // <div className="relative">
<p // <p
className="text-white text-2xl font-bold" // className="text-white text-2xl font-bold"
style={{ // style={{
textShadow: "0 0 10px rgba(255,255,255,0.3)", // textShadow: "0 0 10px rgba(255,255,255,0.3)",
}} // }}
> // >
{progress}% // {progress}%
</p> // </p>
<div // <div
className="absolute -inset-4 rounded-full opacity-0" // className="absolute -inset-4 rounded-full opacity-0"
style={{ // style={{
background: // background:
"radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)", // "radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)",
animation: "pulse 2s ease-in-out infinite", // animation: "pulse 2s ease-in-out infinite",
}} // }}
></div> // ></div>
</div> // </div>
<p className="mt-2 text-gray-300 font-medium tracking-wide"> // <p className="mt-2 text-gray-300 font-medium tracking-wide">
Filling your tank... // Filling your tank...
</p> // </p>
{/* Advanced animations */} // {/* Advanced animations */}
{/* <style jsx>{` // {/* <style jsx>{`
@keyframes bubble { // @keyframes bubble {
0% { // 0% {
transform: translateY(0) scale(0.8); // transform: translateY(0) scale(0.8);
opacity: 0; // opacity: 0;
} // }
20% { // 20% {
opacity: 0.8; // opacity: 0.8;
transform: translateY(-10px) scale(1); // transform: translateY(-10px) scale(1);
} // }
80% { // 80% {
opacity: 0.8; // opacity: 0.8;
transform: translateY(-30px) scale(0.9); // transform: translateY(-30px) scale(0.9);
} // }
100% { // 100% {
transform: translateY(-40px) scale(0.3); // transform: translateY(-40px) scale(0.3);
opacity: 0; // opacity: 0;
} // }
} // }
@keyframes pulse { // @keyframes pulse {
0% { // 0% {
opacity: 0; // opacity: 0;
transform: scale(0.8); // transform: scale(0.8);
} // }
50% { // 50% {
opacity: 0.5; // opacity: 0.5;
transform: scale(1.1); // transform: scale(1.1);
} // }
100% { // 100% {
opacity: 0; // opacity: 0;
transform: scale(0.8); // transform: scale(0.8);
} // }
} // }
@keyframes moveWave { // @keyframes moveWave {
0% { // 0% {
transform: translateX(0); // transform: translateX(0);
} // }
100% { // 100% {
transform: translateX(-50%); // transform: translateX(-50%);
} // }
} // }
.perspective-800 { // .perspective-800 {
perspective: 800px; // perspective: 800px;
} // }
.animate-wave { // .animate-wave {
overflow: hidden; // overflow: hidden;
} // }
`}</style> */} // `}</style> */}
</div> // </div>
); // );
} // }
return <>{children}</>; // return <>{children}</>;
}; // };
export default ImagePreloader; // export default ImagePreloader;

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

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

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

@ -2,15 +2,15 @@ import React, { useState, useEffect, useRef, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { useTranslation } from "react-i18next"; 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 d1="https://i.imgur.com/Y5Gdv4g.jpeg";
const d12="https://i.imgur.com/guqu8T6.jpeg"; // const d12="https://i.imgur.com/guqu8T6.jpeg";
const d13 ="https://i.imgur.com/aoFA4iX.jpeg"; // const d13 ="https://i.imgur.com/aoFA4iX.jpeg";
const d7="https://i.imgur.com/yY52DzL.jpeg"; // const d7="https://i.imgur.com/yY52DzL.jpeg";
function ProjectsTimeline({ function ProjectsTimeline({

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

@ -1,16 +1,15 @@
import React, { useState, useEffect, useRef, useCallback } from "react"; import React, { useState, useEffect, useRef, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { useTranslation } from "react-i18next"; 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 d14="https://i.imgur.com/o1xvcUP.jpeg"; // const d15="https://i.imgur.com/NDp2kuS.jpeg";
const d15="https://i.imgur.com/NDp2kuS.jpeg"; // const d16 ="https://i.imgur.com/zSHOy11.jpeg";
const d16 ="https://i.imgur.com/zSHOy11.jpeg"; // const d7="https://i.imgur.com/yY52DzL.jpeg";
const d7="https://i.imgur.com/yY52DzL.jpeg";
function ProjectsTimeline({ function ProjectsTimeline({
projects, projects,

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

@ -1,13 +1,13 @@
import React, { useState, useEffect, useRef, useCallback } from "react"; import React, { useState, useEffect, useRef, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { useTranslation } from "react-i18next"; 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 d17="https://i.imgur.com/R4UR5d2.png";
const d23="https://i.imgur.com/P2EY4jw.jpeg"; // const d23="https://i.imgur.com/P2EY4jw.jpeg";
const d24="https://i.imgur.com/8qeT81T.png"; // const d24="https://i.imgur.com/8qeT81T.png";
function ProjectsTimeline({ function ProjectsTimeline({
projects, projects,

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

@ -1,14 +1,14 @@
import React, { useState, useEffect, useRef, useCallback } from "react"; import React, { useState, useEffect, useRef, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { useTranslation } from "react-i18next"; 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 d18="https://i.imgur.com/ZhYek8J.jpeg";
const d25="https://i.imgur.com/Bte4bPE.jpeg"; // const d25="https://i.imgur.com/Bte4bPE.jpeg";
const d26="https://i.imgur.com/QlbXMye.jpeg"; // const d26="https://i.imgur.com/QlbXMye.jpeg";
function ProjectsTimeline({ function ProjectsTimeline({

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

@ -1,17 +1,17 @@
import React, { useState, useEffect, useRef, useCallback } from "react"; import React, { useState, useEffect, useRef, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { useTranslation } from "react-i18next"; 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 d19 ="https://i.imgur.com/BPHfMW8.jpeg";
const d27="https://i.imgur.com/MvjtBCL.jpeg"; // const d27="https://i.imgur.com/MvjtBCL.jpeg";
const d28="https://i.imgur.com/ekFWpZ1.jpeg"; // const d28="https://i.imgur.com/ekFWpZ1.jpeg";
const d29="https://i.imgur.com/doxdYIX.jpeg"; // const d29="https://i.imgur.com/doxdYIX.jpeg";
const d30="https://i.imgur.com/xsT3ZV8.png"; // const d30="https://i.imgur.com/xsT3ZV8.png";
function ProjectsTimeline({ function ProjectsTimeline({
projects, projects,
mainTitle = "المشاريع المنفذة", mainTitle = "المشاريع المنفذة",

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

@ -1,13 +1,13 @@
import React, { useState, useEffect, useRef, useCallback } from "react"; import React, { useState, useEffect, useRef, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { useTranslation } from "react-i18next"; 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 d20="https://i.imgur.com/ufkwKge.jpeg";
const d31="https://i.imgur.com/voi0eQI.jpeg"; // const d31="https://i.imgur.com/voi0eQI.jpeg";
const d32="https://i.imgur.com/L9ygJdP.jpeg"; // const d32="https://i.imgur.com/L9ygJdP.jpeg";
function ProjectsTimeline({ function ProjectsTimeline({
projects, projects,

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

@ -1,13 +1,13 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { useTranslation } from "react-i18next"; 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 d21="https://i.imgur.com/zovmMp5.jpeg";
const d34="https://i.imgur.com/uAaae7s.jpeg"; // const d34="https://i.imgur.com/uAaae7s.jpeg";
const d33="https://i.imgur.com/0Pk2UCo.png"; // const d33="https://i.imgur.com/0Pk2UCo.png";
import { useRef, useCallback, useState as useStateLocal } from "react"; import { useRef, useCallback, useState as useStateLocal } from "react";

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

@ -1,13 +1,13 @@
import React, { useState, useEffect, useRef, useCallback } from "react"; import React, { useState, useEffect, useRef, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { useTranslation } from "react-i18next"; 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 d22="https://i.imgur.com/02uxTxi.jpeg";
const d35="https://i.imgur.com/tdPRx3S.jpeg"; // const d35="https://i.imgur.com/tdPRx3S.jpeg";
const d36="https://i.imgur.com/HK3zHq4.jpeg"; // const d36="https://i.imgur.com/HK3zHq4.jpeg";
function ProjectsTimeline({ function ProjectsTimeline({
projects, projects,

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

@ -10,27 +10,26 @@ import {
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next"; 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 d1 ="https://i.imgur.com/Y5Gdv4g.jpeg";
const d7="https://i.imgur.com/yY52DzL.jpeg"; // const d7="https://i.imgur.com/yY52DzL.jpeg";
const d14="https://i.imgur.com/o1xvcUP.jpeg"; // const d14="https://i.imgur.com/o1xvcUP.jpeg";
const d17="https://i.imgur.com/R4UR5d2.png"; // const d17="https://i.imgur.com/R4UR5d2.png";
const d18="https://i.imgur.com/ZhYek8J.jpeg"; // const d18="https://i.imgur.com/ZhYek8J.jpeg";
const d19 ="https://i.imgur.com/BPHfMW8.jpeg"; // const d19 ="https://i.imgur.com/BPHfMW8.jpeg";
const d20="https://i.imgur.com/ufkwKge.jpeg"; // const d20="https://i.imgur.com/ufkwKge.jpeg";
const d21="https://i.imgur.com/zovmMp5.jpeg"; // const d21="https://i.imgur.com/zovmMp5.jpeg";
const d22="https://i.imgur.com/02uxTxi.jpeg"; // const d22="https://i.imgur.com/02uxTxi.jpeg";

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

@ -1,15 +1,15 @@
import React, { useEffect, useState, useRef } from "react"; import React, { useEffect, useState, useRef } from "react";
import styled from "styled-components"; import styled from "styled-components";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
// import REXNT from "https://i.imgur.com/KIwqp1N.png"; import REXNT from "../../../assets/Images/REXNT.png";
// import TPSlogo from "https://i.imgur.com/zO4GbnB.png"; import TPSlogo from "../../../assets/Images/TPS-logo.png";
// import NSC from "https://i.imgur.com/SIUgWI7.png"; import NSC from "../../../assets/Images/NSC.png";
// import LOGO from "https://i.imgur.com/sh4F6Xb.png"; import LOGO from "../../../assets/Images/LOGO.png";
const REXNT = "https://i.imgur.com/KIwqp1N.png"; // const REXNT = "https://i.imgur.com/KIwqp1N.png";
const TPSlogo = "https://i.imgur.com/zO4GbnB.png"; // const TPSlogo = "https://i.imgur.com/zO4GbnB.png";
const NSC = "https://i.imgur.com/SIUgWI7.png"; // const NSC = "https://i.imgur.com/SIUgWI7.png";
const LOGO = "https://i.imgur.com/sh4F6Xb.png"; // const LOGO = "https://i.imgur.com/sh4F6Xb.png";
export default function EngineeringHeroFlowbite() { export default function EngineeringHeroFlowbite() {
const { t, i18n } = useTranslation(); const { t, i18n } = useTranslation();
@ -230,7 +230,7 @@ export default function EngineeringHeroFlowbite() {
:root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e; --base: 16px } :root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e; --base: 16px }
.hero-section{position:relative;width:100%;height:100%;overflow:hidden} .hero-section{position:relative;width:100%;height:100%;overflow:hidden}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background: linear-gradient(135deg, #57acd9 0%, rgba(55, 65, 81, 0.85) 50%, #47718b 100%);z-index:3} .hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(35deg, #57acd900 0%, rgb(151 162 179 / 0%) 50%, #47718b 100%);z-index:3}
.hero-layout{position:relative;z-index:10;height:100%;display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,4vw,40px);gap:2rem;direction:ltr;flex-direction:row} .hero-layout{position:relative;z-index:10;height:100%;display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,4vw,40px);gap:2rem;direction:ltr;flex-direction:row}
.hero-layout.layout-ltr{flex-direction:row-reverse} .hero-layout.layout-ltr{flex-direction:row-reverse}
.hero-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px;position:relative;flex-direction:column} .hero-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px;position:relative;flex-direction:column}