Edit joints in background

Added check DarkMode in home for switch light and dark

src/App.css

@@ -21,12 +21,12 @@
 
 .text-gray-900,
 .dark\:text-white {
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    text-shadow: 0 1px 2px #041c40;
 }
 
 .dark .text-gray-900,
 .dark .dark\:text-white {
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    text-shadow: 0 1px 2px #041c40;
 }
 
 .bg-opacity-95 {

src/Components/BackgroundCanvas/BackgroundCanvas.jsx

@@ -27,9 +27,9 @@ const BackgroundCanvas = ({ theme = "light" }) => {
       this.bone_length = 150;
       const shapes = ["circle", "triangle", "square", "pentagon"];
       this.shape = shapes[Math.floor(Math.random() * shapes.length)];
-      this.size = Math.random() * 4 + 3;
+      this.size = Math.random() * 3 + 2;
       this.angle = 0;
-      this.angularSpeed = (Math.random() - 0.5) * 0.1;
+      this.angularSpeed = (Math.random() - 0.5) * 0.5;
       this.pulse = Math.random() * Math.PI * 2;
     }
   }
@@ -57,7 +57,7 @@ const BackgroundCanvas = ({ theme = "light" }) => {
       joint.position.y += joint.vector.y * joint.speed;
 
       joint.angle += joint.angularSpeed;
-      joint.pulse += 0.05;
+      joint.pulse += 0.03;
 
       if (joint.position.x < 0) joint.position.x = world.width;
       if (joint.position.x > world.width) joint.position.x = 0;
@@ -76,7 +76,7 @@ const BackgroundCanvas = ({ theme = "light" }) => {
       pointColor = "#e06923";
     } else {
       backgroundColor = "#f1f1f1ff";
-      lineColor = "rgba(49, 49, 49, 0.3)"; // More subtle lines
+      lineColor = "rgba(49, 49, 49, 0.3)"; 
       pointColor = "#041c40";
     }
 
@@ -193,7 +193,7 @@ const BackgroundCanvas = ({ theme = "light" }) => {
     );
 
     const isMobile = window.innerWidth < 768;
-    const numberOfJoints = isMobile ? 150 : 600;
+    const numberOfJoints = isMobile ? 120 : 500;
     jointsRef.current = generateJoints(
       numberOfJoints,
       worldRef.current.width,
@@ -202,8 +202,8 @@ const BackgroundCanvas = ({ theme = "light" }) => {
 
     if (isMobile) {
       jointsRef.current.forEach((joint) => {
-        joint.bone_length = 120;
-        joint.speed = 0.4;
+        joint.bone_length = 80;
+        joint.speed = 0.3;
       });
     }
   };

src/Components/Sections/Home/Home.jsx

@@ -35,9 +35,33 @@ export default function EngineeringHeroFlowbite() {
   });
   const [isMounted, setIsMounted] = useState(false);
 
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
   const mainTitleRef = useRef(null);
   const subtitleRef = useRef(null);
 
+
+  const checkDarkMode = () => {
+    return document.documentElement.classList.contains("dark");
+  };
+
+  const updateTextColors = () => {
+    const main = mainTitleRef.current;
+    const sub = subtitleRef.current;
+    const darkMode = checkDarkMode();
+    
+    if (main) {
+      main.style.color = darkMode ? "#ffffff" : "#041c40";
+    }
+    
+    if (sub) {
+      sub.style.color = darkMode ? "#ffffff" : "#041c40";
+    }
+    
+    setIsDarkMode(darkMode);
+  };
+
+
   useEffect(() => {
     const id = "cairo-font-link";
     if (!document.getElementById(id)) {
@@ -77,6 +101,25 @@ export default function EngineeringHeroFlowbite() {
     };
   }, [i18n, t]);
 
+
+useEffect(() => {
+    const observer = new MutationObserver(() => {
+      updateTextColors();
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    updateTextColors();
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+
   useEffect(() => {
     const main = mainTitleRef.current;
     const sub = subtitleRef.current;
@@ -109,8 +152,12 @@ export default function EngineeringHeroFlowbite() {
       const minFont = Math.max(Math.round(responsiveBase * 1.6), 14);
       const root = document.documentElement;
       const isDark = root.classList.contains("dark");
+
+        const textColor = isDark ? "#ffffff" : "#041c40";
+
       root.style.setProperty("--base", `${responsiveBase}px`);
 
+
       if (main) {
         const headingText = (config.main_title || defaultConfig.main_title)
           .split("\n")
@@ -134,9 +181,8 @@ export default function EngineeringHeroFlowbite() {
           maxFont,
         );
         main.style.fontSize = `${computedSize}px`;
-        main.style.color = isDark
-          ? config.text_color || defaultConfig.text_color
-          : config.light_text_color || defaultConfig.light_text_color;
+        main.style.color = textColor;
+    
         main.style.fontWeight = 800;
         main.style.textAlign = isArabic ? "right" : "left";
         main.style.whiteSpace = "normal";
@@ -144,7 +190,7 @@ export default function EngineeringHeroFlowbite() {
         main.style.overflowWrap = "anywhere";
         main.style.direction = isArabic ? "rtl" : "ltr";
         main.style.display = "block";
-        main.style.textShadow = isDark ? "0 4px 10px rgba(0,0,0,0.5)" : "none";
+        main.style.textShadow = checkDarkMode() ? "0 4px 10px rgba(0,0,0,0.5)" : "none";
       }
 
       if (sub) {
@@ -155,9 +201,8 @@ export default function EngineeringHeroFlowbite() {
         sub.style.fontFamily = font;
         const subSize = Math.round(responsiveBase * subtitleMultiplier);
         sub.style.fontSize = `${subSize}px`;
-        sub.style.color = isDark
-          ? config.text_color || defaultConfig.text_color
-          : config.light_text_color || defaultConfig.light_text_color;
+        sub.style.color = textColor;
+
         sub.style.textAlign = isArabic ? "right" : "left";
         sub.style.maxWidth = "800px";
         sub.style.whiteSpace = "normal";
@@ -183,6 +228,7 @@ export default function EngineeringHeroFlowbite() {
         "--ehb-action",
         config.secondary_action || defaultConfig.secondary_action,
       );
+      updateTextColors();
     };
 
     applyStyles();

src/index.css

@@ -3,45 +3,39 @@
 @tailwind utilities;
 @import url("https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&display=swap");
 @layer base {
-  :root {
-    overflow-y: scroll !important;
-    --primary: #041c40;
-    --secondary: #e06923;
-    --tertiary: #313131;
-    --bg-color: #e3e8ec;
-    --text-color: #313131;
-    --border-color: #d1c9be;
-  }
-  .dark {
-    overflow-y: scroll !important;
-    --primary: #041c40;
-    --secondary: #e06923;
-    --tertiary: #313131;
-    --bg-color: #313131;
-    --text-color: #f5eee6;
-    --border-color: #4a4a4a;
-  }
-  body {
-    overflow-y: scroll !important;
-    margin: 0;
-    padding: 0;
-    min-height: 100vh;
-    width: 100vw;
-    overflow-x: hidden;
-    font-family:
-      "Cairo",
-      system-ui,
-      -apple-system,
-      sans-serif;
-    color: var(--text-color);
-    background-color: var(--bg-color);
-    transition:
-      background-color 0.3s ease,
-      color 0.3s ease;
-  }
-  html {
-    overflow-y: scroll !important;
-    scroll-behavior: smooth;
-    overflow-x: hidden;
-  }
-}
+     :root {
+        overflow-y: scroll !important;
+        --primary: #041c40;
+        --secondary: #e06923;
+        --tertiary: #313131;
+        --bg-color: #e3e8ec;
+        --text-color: #041c40;
+        --border-color: #d1c9be;
+    }
+    .dark {
+        overflow-y: scroll !important;
+        --primary: #041c40;
+        --secondary: #e06923;
+        --tertiary: #313131;
+        --bg-color: #313131;
+        --text-color: #f5eee6;
+        --border-color: #4a4a4a;
+    }
+    body {
+        overflow-y: scroll !important;
+        margin: 0;
+        padding: 0;
+        min-height: 100vh;
+        width: 100vw;
+        overflow-x: hidden;
+        font-family: "Cairo", system-ui, -apple-system, sans-serif;
+        color: var(--text-color);
+        background-color: var(--bg-color);
+        transition: background-color 0.3s ease, color 0.3s ease;
+    }
+    html {
+        overflow-y: scroll !important;
+        scroll-behavior: smooth;
+        overflow-x: hidden;
+    }
+}