Edit image and home

2026-01-21 22:38:31 +03:00
parent 69a2ed83c5
commit 28d089534b
13 changed files with 394 additions and 398 deletions
--- a/src/App.jsx
+++ b/src/App.jsx
@ -15,7 +15,7 @@ import DepartmentDetail from "./Components/Sections/DepartmentDetail/DepartmentD
 import Contact from "./Components/Sections/Contact/Contact";
 import Footer from "./Components/Nav/Footer";
 import DepartmentDetail2 from "./Components/Sections/DepartmentDetail2/DepartmentDetail2";
-import ImagePreloader from "./Components/ImagePreloader";
+// import ImagePreloader from "./Components/ImagePreloader";
 import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas";
 import DepartmentDetail3 from "./Components/Sections/DepartmentDetail3/DepartmentDetail3";
 import DepartmentDetail4 from "./Components/Sections/DepartmentDetail4/DepartmentDetail4";
@ -156,11 +156,9 @@ const App = () => {
  };

  return (
-    <ImagePreloader>
      <BrowserRouter>
        <Layout theme={theme} toggleTheme={toggleTheme} />
      </BrowserRouter>
-    </ImagePreloader>
  );
 };

--- a/src/Components/ImagePreloader.jsx
+++ b/src/Components/ImagePreloader.jsx
@ -1,328 +1,328 @@
-import { useState, useEffect } from "react";
+// import { useState, useEffect } from "react";

-// List all critical images that need to be preloaded
-const imagesToPreload = [
-  "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"
-];
+// // List all critical images that need to be preloaded
+// const imagesToPreload = [
+//   "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 }) => {
-  const [imagesLoaded, setImagesLoaded] = useState(false);
-  const [progress, setProgress] = useState(0);
+// const ImagePreloader = ({ children }) => {
+//   const [imagesLoaded, setImagesLoaded] = useState(false);
+//   const [progress, setProgress] = useState(0);

-  useEffect(() => {
-    let loadedCount = 0;
-    const totalImages = imagesToPreload.length;
+//   useEffect(() => {
+//     let loadedCount = 0;
+//     const totalImages = imagesToPreload.length;

-    const preloadImages = async () => {
-      try {
-        const loadImage = (src) => {
-          return new Promise((resolve, reject) => {
-            const img = new Image();
-            img.src = src;
-            img.onload = () => {
-              loadedCount++;
-              setProgress(Math.floor((loadedCount / totalImages) * 100));
-              resolve();
-            };
-            img.onerror = reject;
-          });
-        };
+//     const preloadImages = async () => {
+//       try {
+//         const loadImage = (src) => {
+//           return new Promise((resolve, reject) => {
+//             const img = new Image();
+//             img.src = src;
+//             img.onload = () => {
+//               loadedCount++;
+//               setProgress(Math.floor((loadedCount / totalImages) * 100));
+//               resolve();
+//             };
+//             img.onerror = reject;
+//           });
+//         };

-        await Promise.all(imagesToPreload.map(loadImage));
-        setImagesLoaded(true);
-      } catch (error) {
-        console.error("Failed to preload images:", error);
-        // Continue anyway after a timeout
-        setTimeout(() => setImagesLoaded(true), 3000);
-      }
-    };
+//         await Promise.all(imagesToPreload.map(loadImage));
+//         setImagesLoaded(true);
+//       } catch (error) {
+//         console.error("Failed to preload images:", error);
+//         // Continue anyway after a timeout
+//         setTimeout(() => setImagesLoaded(true), 3000);
+//       }
+//     };

-    preloadImages();
-  }, []);
+//     preloadImages();
+//   }, []);

-  if (!imagesLoaded) {
-    return (
-      <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 */}
-        <div className="absolute inset-0 overflow-hidden opacity-10">
-          <div className="absolute top-0 left-0 w-full h-full">
-            {[...Array(20)].map((_, i) => (
-              <div
-                key={i}
-                className="absolute rounded-full bg-white/30"
-                style={{
-                  width: `${Math.random() * 10 + 5}px`,
-                  height: `${Math.random() * 10 + 5}px`,
-                  top: `${Math.random() * 100}%`,
-                  left: `${Math.random() * 100}%`,
-                  animationDuration: `${Math.random() * 10 + 10}s`,
-                  animationDelay: `${Math.random() * 5}s`,
-                }}
-              />
-            ))}
-          </div>
-        </div>
+//   if (!imagesLoaded) {
+//     return (
+//       <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 */}
+//         <div className="absolute inset-0 overflow-hidden opacity-10">
+//           <div className="absolute top-0 left-0 w-full h-full">
+//             {[...Array(20)].map((_, i) => (
+//               <div
+//                 key={i}
+//                 className="absolute rounded-full bg-white/30"
+//                 style={{
+//                   width: `${Math.random() * 10 + 5}px`,
+//                   height: `${Math.random() * 10 + 5}px`,
+//                   top: `${Math.random() * 100}%`,
+//                   left: `${Math.random() * 100}%`,
+//                   animationDuration: `${Math.random() * 10 + 10}s`,
+//                   animationDelay: `${Math.random() * 5}s`,
+//                 }}
+//               />
+//             ))}
+//           </div>
+//         </div>

-        {/* Company logo or branding could go here */}
-        <div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider">
-          TPS
-        </div>
+//         {/* Company logo or branding could go here */}
+//         <div className="mb-12 text-[#F3C623] text-3xl font-bold tracking-wider">
+//           TPS
+//         </div>

-        {/* 3D-style Fuel Tank */}
-        <div className="relative w-72 h-56 mb-8 perspective-800">
-          {/* Tank body with 3D effect */}
-          <div
-            className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl"
-            style={{
-              background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)",
-              boxShadow:
-                "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)",
-            }}
-          >
-            {/* Glass effect overlay */}
-            <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>
+//         {/* 3D-style Fuel Tank */}
+//         <div className="relative w-72 h-56 mb-8 perspective-800">
+//           {/* Tank body with 3D effect */}
+//           <div
+//             className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-56 h-40 rounded-lg overflow-hidden shadow-2xl"
+//             style={{
+//               background: "linear-gradient(145deg, #0A2540 0%, #102A45 100%)",
+//               boxShadow:
+//                 "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)",
+//             }}
+//           >
+//             {/* Glass effect overlay */}
+//             <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent pointer-events-none"></div>

-            {/* Tank Cap with metallic effect */}
-            <div
-              className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md"
-              style={{
-                background:
-                  "linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)",
-                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>
+//             {/* Tank Cap with metallic effect */}
+//             <div
+//               className="absolute -top-3 left-1/2 transform -translate-x-1/2 w-10 h-6 rounded-t-md"
+//               style={{
+//                 background:
+//                   "linear-gradient(to bottom, #F3C623 0%, #EB8317 100%)",
+//                 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>

-            {/* Fuel Level with dynamic wave effect */}
-            <div
-              className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out"
-              style={{
-                height: `${progress}%`,
-                background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)",
-                boxShadow: "0 -5px 15px rgba(235,131,23,0.3)",
-              }}
-            >
-              {/* Animated wave effect at the top of fuel */}
-              <div className="absolute -top-2 left-0 w-full h-4 animate-wave">
-                <div
-                  className="relative w-[200%] h-full"
-                  style={{
-                    backgroundImage:
-                      "linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
-                    backgroundSize: "50% 100%",
-                    animation: "moveWave 3s linear infinite",
-                  }}
-                ></div>
-              </div>
+//             {/* Fuel Level with dynamic wave effect */}
+//             <div
+//               className="absolute bottom-0 left-0 right-0 transition-all duration-500 ease-out"
+//               style={{
+//                 height: `${progress}%`,
+//                 background: "linear-gradient(to top, #EB8317 0%, #F3C623 100%)",
+//                 boxShadow: "0 -5px 15px rgba(235,131,23,0.3)",
+//               }}
+//             >
+//               {/* Animated wave effect at the top of fuel */}
+//               <div className="absolute -top-2 left-0 w-full h-4 animate-wave">
+//                 <div
+//                   className="relative w-[200%] h-full"
+//                   style={{
+//                     backgroundImage:
+//                       "linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
+//                     backgroundSize: "50% 100%",
+//                     animation: "moveWave 3s linear infinite",
+//                   }}
+//                 ></div>
+//               </div>

-              {/* Bubbles with varied animations */}
-              {[...Array(8)].map((_, i) => (
-                <div
-                  key={i}
-                  className="absolute rounded-full bg-white/20"
-                  style={{
-                    width: `${Math.random() * 6 + 2}px`,
-                    height: `${Math.random() * 6 + 2}px`,
-                    bottom: `${Math.random() * 80}%`,
-                    left: `${Math.random() * 90 + 5}%`,
-                    animation: `bubble ${
-                      Math.random() * 3 + 2
-                    }s ease-in infinite ${Math.random() * 2}s`,
-                  }}
-                />
-              ))}
-            </div>
+//               {/* Bubbles with varied animations */}
+//               {[...Array(8)].map((_, i) => (
+//                 <div
+//                   key={i}
+//                   className="absolute rounded-full bg-white/20"
+//                   style={{
+//                     width: `${Math.random() * 6 + 2}px`,
+//                     height: `${Math.random() * 6 + 2}px`,
+//                     bottom: `${Math.random() * 80}%`,
+//                     left: `${Math.random() * 90 + 5}%`,
+//                     animation: `bubble ${
+//                       Math.random() * 3 + 2
+//                     }s ease-in infinite ${Math.random() * 2}s`,
+//                   }}
+//                 />
+//               ))}
+//             </div>

-            {/* 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">
-              {[...Array(4)].map((_, i) => (
-                <div
-                  key={i}
-                  className="w-full border-b border-[#F3C623]/20 h-1/4"
-                  style={{
-                    boxShadow:
-                      progress > 75 - i * 25
-                        ? "0 1px 3px rgba(243,198,35,0.3)"
-                        : "none",
-                  }}
-                >
-                  <div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div>
-                </div>
-              ))}
-            </div>
-          </div>
+//             {/* 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">
+//               {[...Array(4)].map((_, i) => (
+//                 <div
+//                   key={i}
+//                   className="w-full border-b border-[#F3C623]/20 h-1/4"
+//                   style={{
+//                     boxShadow:
+//                       progress > 75 - i * 25
+//                         ? "0 1px 3px rgba(243,198,35,0.3)"
+//                         : "none",
+//                   }}
+//                 >
+//                   <div className="absolute right-0 w-2 h-0.5 bg-[#F3C623]/40"></div>
+//                 </div>
+//               ))}
+//             </div>
+//           </div>

-          {/* Fuel Gauge with realistic dial */}
-          <div
-            className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center"
-            style={{
-              background:
-                "radial-gradient(circle at center, #102A45 0%, #0A2540 70%)",
-              boxShadow:
-                "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)",
-            }}
-          >
-            {/* Gauge markings */}
-            {[...Array(9)].map((_, i) => {
-              const rotation = -135 + i * 30;
-              const isLarge = i % 2 === 0;
-              return (
-                <div
-                  key={i}
-                  className={`absolute w-${isLarge ? "1.5" : "1"} h-${
-                    isLarge ? "3" : "2"
-                  } bg-[#F3C623]/${isLarge ? "70" : "40"}`}
-                  style={{
-                    transform: `rotate(${rotation}deg) translateY(-7px)`,
-                    transformOrigin: "bottom center",
-                  }}
-                />
-              );
-            })}
+//           {/* Fuel Gauge with realistic dial */}
+//           <div
+//             className="absolute top-0 right-0 w-20 h-20 rounded-full flex items-center justify-center"
+//             style={{
+//               background:
+//                 "radial-gradient(circle at center, #102A45 0%, #0A2540 70%)",
+//               boxShadow:
+//                 "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)",
+//             }}
+//           >
+//             {/* Gauge markings */}
+//             {[...Array(9)].map((_, i) => {
+//               const rotation = -135 + i * 30;
+//               const isLarge = i % 2 === 0;
+//               return (
+//                 <div
+//                   key={i}
+//                   className={`absolute w-${isLarge ? "1.5" : "1"} h-${
+//                     isLarge ? "3" : "2"
+//                   } bg-[#F3C623]/${isLarge ? "70" : "40"}`}
+//                   style={{
+//                     transform: `rotate(${rotation}deg) translateY(-7px)`,
+//                     transformOrigin: "bottom center",
+//                   }}
+//                 />
+//               );
+//             })}

-            {/* Gauge needle with smooth animation */}
-            <div
-              className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom"
-              style={{
-                transform: `rotate(${-135 + progress * 2.7}deg)`,
-                transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
-                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>
+//             {/* Gauge needle with smooth animation */}
+//             <div
+//               className="absolute w-1 h-9 bg-gradient-to-t from-[#EB8317] to-[#F3C623] rounded-t-full origin-bottom"
+//               style={{
+//                 transform: `rotate(${-135 + progress * 2.7}deg)`,
+//                 transition: "transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)",
+//                 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>

-            {/* Center pin */}
-            <div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div>
+//             {/* Center pin */}
+//             <div className="absolute w-4 h-4 bg-[#0A2540] rounded-full border-2 border-[#EB8317] shadow-inner"></div>

-            {/* E and F indicators */}
-            <div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold">
-              E
-            </div>
-            <div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold">
-              F
-            </div>
-          </div>
-        </div>
+//             {/* E and F indicators */}
+//             <div className="absolute bottom-4 left-4 text-[#F3C623]/70 text-xs font-bold">
+//               E
+//             </div>
+//             <div className="absolute bottom-4 right-4 text-[#F3C623]/70 text-xs font-bold">
+//               F
+//             </div>
+//           </div>
+//         </div>

-        {/* Progress indicator with animated glow */}
-        <div className="relative">
-          <p
-            className="text-white text-2xl font-bold"
-            style={{
-              textShadow: "0 0 10px rgba(255,255,255,0.3)",
-            }}
-          >
-            {progress}%
-          </p>
-          <div
-            className="absolute -inset-4 rounded-full opacity-0"
-            style={{
-              background:
-                "radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)",
-              animation: "pulse 2s ease-in-out infinite",
-            }}
-          ></div>
-        </div>
+//         {/* Progress indicator with animated glow */}
+//         <div className="relative">
+//           <p
+//             className="text-white text-2xl font-bold"
+//             style={{
+//               textShadow: "0 0 10px rgba(255,255,255,0.3)",
+//             }}
+//           >
+//             {progress}%
+//           </p>
+//           <div
+//             className="absolute -inset-4 rounded-full opacity-0"
+//             style={{
+//               background:
+//                 "radial-gradient(circle, rgba(243,198,35,0.3) 0%, transparent 70%)",
+//               animation: "pulse 2s ease-in-out infinite",
+//             }}
+//           ></div>
+//         </div>

-        <p className="mt-2 text-gray-300 font-medium tracking-wide">
-          Filling your tank...
-        </p>
+//         <p className="mt-2 text-gray-300 font-medium tracking-wide">
+//           Filling your tank...
+//         </p>

-        {/* Advanced animations */}
-        {/* <style jsx>{`
-          @keyframes bubble {
-            0% {
-              transform: translateY(0) scale(0.8);
-              opacity: 0;
-            }
-            20% {
-              opacity: 0.8;
-              transform: translateY(-10px) scale(1);
-            }
-            80% {
-              opacity: 0.8;
-              transform: translateY(-30px) scale(0.9);
-            }
-            100% {
-              transform: translateY(-40px) scale(0.3);
-              opacity: 0;
-            }
-          }
+//         {/* Advanced animations */}
+//         {/* <style jsx>{`
+//           @keyframes bubble {
+//             0% {
+//               transform: translateY(0) scale(0.8);
+//               opacity: 0;
+//             }
+//             20% {
+//               opacity: 0.8;
+//               transform: translateY(-10px) scale(1);
+//             }
+//             80% {
+//               opacity: 0.8;
+//               transform: translateY(-30px) scale(0.9);
+//             }
+//             100% {
+//               transform: translateY(-40px) scale(0.3);
+//               opacity: 0;
+//             }
+//           }

-          @keyframes pulse {
-            0% {
-              opacity: 0;
-              transform: scale(0.8);
-            }
-            50% {
-              opacity: 0.5;
-              transform: scale(1.1);
-            }
-            100% {
-              opacity: 0;
-              transform: scale(0.8);
-            }
-          }
+//           @keyframes pulse {
+//             0% {
+//               opacity: 0;
+//               transform: scale(0.8);
+//             }
+//             50% {
+//               opacity: 0.5;
+//               transform: scale(1.1);
+//             }
+//             100% {
+//               opacity: 0;
+//               transform: scale(0.8);
+//             }
+//           }

-          @keyframes moveWave {
-            0% {
-              transform: translateX(0);
-            }
-            100% {
-              transform: translateX(-50%);
-            }
-          }
+//           @keyframes moveWave {
+//             0% {
+//               transform: translateX(0);
+//             }
+//             100% {
+//               transform: translateX(-50%);
+//             }
+//           }

-          .perspective-800 {
-            perspective: 800px;
-          }
+//           .perspective-800 {
+//             perspective: 800px;
+//           }

-          .animate-wave {
-            overflow: hidden;
-          }
-        `}</style> */}
-      </div>
-    );
-  }
+//           .animate-wave {
+//             overflow: hidden;
+//           }
+//         `}</style> */}
+//       </div>
+//     );
+//   }

-  return <>{children}</>;
-};
+//   return <>{children}</>;
+// };

-export default ImagePreloader;
+// export default ImagePreloader;
--- a/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
+++ b/src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
@ -3,15 +3,15 @@ import { motion, AnimatePresence } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import "../../../../src/i18n";

-// 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";
+import d1 from "../../../assets/Images/d1.jpeg";
+import d2 from "../../../assets/Images/d2.jpeg";
+import d3 from "../../../assets/Images/d3.jpeg";
+import d4 from "../../../assets/Images/d4.jpeg";

-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";
+// 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,
--- a/src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx
+++ b/src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx
@ -2,15 +2,15 @@ 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";
+// 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";


 function ProjectsTimeline({
--- a/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx
+++ b/src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx
@ -1,16 +1,15 @@
 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";
+// 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,
--- a/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx
+++ b/src/Components/Sections/DepartmentDetail4/DepartmentDetail4.jsx
@ -1,13 +1,13 @@
 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";
+// const d17="https://i.imgur.com/R4UR5d2.png";
+// const d23="https://i.imgur.com/P2EY4jw.jpeg";
+// const d24="https://i.imgur.com/8qeT81T.png";

 function ProjectsTimeline({
  projects,
--- a/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx
+++ b/src/Components/Sections/DepartmentDetail5/DepartmentDetail5.jsx
@ -1,14 +1,14 @@
 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";
+// const d18="https://i.imgur.com/ZhYek8J.jpeg";
+// const d25="https://i.imgur.com/Bte4bPE.jpeg";
+// const d26="https://i.imgur.com/QlbXMye.jpeg";


 function ProjectsTimeline({
--- a/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx
+++ b/src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx
@ -1,17 +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";
+// 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 = "المشاريع المنفذة",
--- a/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
+++ b/src/Components/Sections/DepartmentDetail7/DepartmentDetail7.jsx
@ -1,13 +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";
+// 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,
--- a/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
+++ b/src/Components/Sections/DepartmentDetail8/DepartmentDetail8.jsx
@ -1,13 +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";
+// 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";

--- a/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx
+++ b/src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx
@ -1,13 +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";
+// 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,
--- a/src/Components/Sections/Departments/Departments.jsx
+++ b/src/Components/Sections/Departments/Departments.jsx
@ -10,27 +10,26 @@ 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 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";



--- a/src/Components/Sections/Home/Home.jsx
+++ b/src/Components/Sections/Home/Home.jsx
@ -1,15 +1,15 @@
 import React, { useEffect, useState, useRef } from "react";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
-// 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";
+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";

-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";
+// 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();

@ -230,7 +230,7 @@ export default function EngineeringHeroFlowbite() {
        :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-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.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}