edited the home to fix the images import

2026-01-13 19:14:59 +03:00
parent e9ae4e7bf6
commit 062a4257e4
1 changed files with 155 additions and 53 deletions
--- a/src/Components/Sections/Home/Home.jsx
+++ b/src/Components/Sections/Home/Home.jsx
@ -1,12 +1,16 @@
 import React, { useEffect, useState, useRef } from "react";
-import styled from 'styled-components';
-import { useTranslation } from 'react-i18next';
-
+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";
 export default function EngineeringHeroFlowbite() {
  const { t, i18n } = useTranslation();

  const defaultConfig = {
-    main_title: "عندما تطلب الرؤية مستشارًا,  ويحتاج المخطط منفذًا استراتيجيًا…نكون القرار بالقيادة من الرؤية حتى التسليم",
+    main_title:
+      "عندما تطلب الرؤية مستشارًا,  ويحتاج المخطط منفذًا استراتيجيًا…نكون القرار بالقيادة من الرؤية حتى التسليم",
    subtitle:
      "حلول متكاملة تشمل التصميم، التنفيذ، التشغيل، والصيانة\nللمشاريع الصناعية والمدنية، وفق أحدث المعايير والتقنيات",
    primary_color: "#e67e22",
@ -20,8 +24,8 @@ export default function EngineeringHeroFlowbite() {

  const [config, setConfig] = useState({
    ...defaultConfig,
-    main_title: t ? t('hero.main_title') : defaultConfig.main_title,
-    subtitle: t ? t('hero.subtitle') : defaultConfig.subtitle,
+    main_title: t ? t("hero.main_title") : defaultConfig.main_title,
+    subtitle: t ? t("hero.subtitle") : defaultConfig.subtitle,
  });
  const [isMounted, setIsMounted] = useState(false);

@ -34,7 +38,8 @@ export default function EngineeringHeroFlowbite() {
      const link = document.createElement("link");
      link.id = id;
      link.rel = "stylesheet";
-      link.href = "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
+      link.href =
+        "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
      document.head.appendChild(link);
    }
  }, []);
@ -46,23 +51,23 @@ export default function EngineeringHeroFlowbite() {

  useEffect(() => {
    const updateFromI18n = () => {
-      const lang = i18n.language || 'en';
-      let main = t('hero.main_title');
-      if (lang && lang.startsWith('en')) {
-        main = main.replace(/[—–]/g, ' - ');
+      const lang = i18n.language || "en";
+      let main = t("hero.main_title");
+      if (lang && lang.startsWith("en")) {
+        main = main.replace(/[—–]/g, " - ");
      }
      setConfig((c) => ({
        ...c,
        main_title: main,
-        subtitle: t('hero.subtitle'),
+        subtitle: t("hero.subtitle"),
      }));
      document.documentElement.lang = lang;
-      document.documentElement.dir = lang.startsWith('ar') ? 'rtl' : 'ltr';
+      document.documentElement.dir = lang.startsWith("ar") ? "rtl" : "ltr";
    };
    updateFromI18n();
-    i18n.on && i18n.on('languageChanged', updateFromI18n);
+    i18n.on && i18n.on("languageChanged", updateFromI18n);
    return () => {
-      i18n.off && i18n.off('languageChanged', updateFromI18n);
+      i18n.off && i18n.off("languageChanged", updateFromI18n);
    };
  }, [i18n, t]);

@ -70,23 +75,34 @@ export default function EngineeringHeroFlowbite() {
    const main = mainTitleRef.current;
    const sub = subtitleRef.current;
    const baseFontStack = "Arial, sans-serif";
-    const font = (config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
+    const font =
+      (config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
    const baseSize = config.font_size || defaultConfig.font_size;

    const applyStyles = () => {
-      const lang = i18n.language || 'en';
-      const isArabic = lang.startsWith('ar');
+      const lang = i18n.language || "en";
+      const isArabic = lang.startsWith("ar");
      const width = typeof window !== "undefined" ? window.innerWidth : 1024;
-      const responsiveBase = width <= 400 ? baseSize * 0.78 : width <= 640 ? baseSize * 0.88 : width <= 1024 ? baseSize * 0.96 : baseSize;
+      const responsiveBase =
+        width <= 400
+          ? baseSize * 0.78
+          : width <= 640
+          ? baseSize * 0.88
+          : width <= 1024
+          ? baseSize * 0.96
+          : baseSize;
      const headingMultiplier = width <= 640 ? 2.6 : 3.2;
      const subtitleMultiplier = width <= 640 ? 0.95 : 1.1;
-      const mainText = (config.main_title || defaultConfig.main_title).replace(/\s+/g, " ").trim();
+      const mainText = (config.main_title || defaultConfig.main_title)
+        .replace(/\s+/g, " ")
+        .trim();
      const mainTextLength = mainText.length;
-      const lengthFactor = mainTextLength > 100 ? 0.78 : mainTextLength > 70 ? 0.86 : 1.0;
+      const lengthFactor =
+        mainTextLength > 100 ? 0.78 : mainTextLength > 70 ? 0.86 : 1.0;
      const maxFont = 68;
-      const minFont = Math.max( Math.round(responsiveBase * 1.6), 14 );
+      const minFont = Math.max(Math.round(responsiveBase * 1.6), 14);
      const root = document.documentElement;
-      root.style.setProperty('--base', `${responsiveBase}px`);
+      root.style.setProperty("--base", `${responsiveBase}px`);

      if (main) {
        const headingText = (config.main_title || defaultConfig.main_title)
@ -96,12 +112,20 @@ export default function EngineeringHeroFlowbite() {
        if (headingText.length === 1) {
          main.textContent = headingText[0];
        } else {
-          main.innerHTML = `<span style="display:block;line-height:1.02">${headingText[0]}</span><span style="display:block;font-weight:700;opacity:0.95;margin-top:6px">${headingText
+          main.innerHTML = `<span style="display:block;line-height:1.02">${
+            headingText[0]
+          }</span><span style="display:block;font-weight:700;opacity:0.95;margin-top:6px">${headingText
            .slice(1)
            .join("<br/>")}</span>`;
        }
        main.style.fontFamily = font;
-        const computedSize = Math.min(Math.max(Math.round(responsiveBase * headingMultiplier * lengthFactor), minFont), maxFont);
+        const computedSize = Math.min(
+          Math.max(
+            Math.round(responsiveBase * headingMultiplier * lengthFactor),
+            minFont
+          ),
+          maxFont
+        );
        main.style.fontSize = `${computedSize}px`;
        main.style.color = config.text_color || defaultConfig.text_color;
        main.style.fontWeight = 800;
@ -131,10 +155,22 @@ export default function EngineeringHeroFlowbite() {
        sub.style.display = "block";
      }

-      root.style.setProperty("--ehb-primary", config.primary_color || defaultConfig.primary_color);
-      root.style.setProperty("--ehb-background", config.background_color || defaultConfig.background_color);
-      root.style.setProperty("--ehb-surface", config.secondary_surface || defaultConfig.secondary_surface);
-      root.style.setProperty("--ehb-action", config.secondary_action || defaultConfig.secondary_action);
+      root.style.setProperty(
+        "--ehb-primary",
+        config.primary_color || defaultConfig.primary_color
+      );
+      root.style.setProperty(
+        "--ehb-background",
+        config.background_color || defaultConfig.background_color
+      );
+      root.style.setProperty(
+        "--ehb-surface",
+        config.secondary_surface || defaultConfig.secondary_surface
+      );
+      root.style.setProperty(
+        "--ehb-action",
+        config.secondary_action || defaultConfig.secondary_action
+      );
    };

    applyStyles();
@ -155,20 +191,37 @@ export default function EngineeringHeroFlowbite() {
  const OrangeActionButton = ({ onClick }) => {
    return (
      <StyledWrapper>
-        <button className="button" onClick={onClick} aria-label={t('hero.action')}>
-          {t('hero.action')}
-          <svg className="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
-            <path fillRule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z" clipRule="evenodd" />
+        <button
+          className="button"
+          onClick={onClick}
+          aria-label={t("hero.action")}
+        >
+          {t("hero.action")}
+          <svg
+            className="icon"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            aria-hidden
+          >
+            <path
+              fillRule="evenodd"
+              d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z"
+              clipRule="evenodd"
+            />
          </svg>
        </button>
      </StyledWrapper>
    );
  };

-  const isArabic = i18n.language && i18n.language.startsWith('ar');
+  const isArabic = i18n.language && i18n.language.startsWith("ar");

  return (
-    <div dir={isArabic ? "rtl" : "ltr"} className="h-screen w-full overflow-hidden content-container" style={{ background: "transparent" }}>
+    <div
+      dir={isArabic ? "rtl" : "ltr"}
+      className="h-screen w-full overflow-hidden content-container"
+      style={{ background: "transparent" }}
+    >
      <style>{` 
        :root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e; --base: 16px }

@ -328,25 +381,57 @@ export default function EngineeringHeroFlowbite() {

      <div className={`hero-section ${isMounted ? "is-mounted" : ""}`}>
        <div className="hero-overlay" />
-        <div className={`hero-layout ${isArabic ? '' : 'layout-ltr'}`}>
+        <div className={`hero-layout ${isArabic ? "" : "layout-ltr"}`}>
          <div className="hero-left">
-            <img src="src/assets/Images/REXNT.png" alt="REXNT" />
+            <img src={REXNT} alt="REXNT" />
            <div className="partner-logos" aria-hidden>
-              <div className="partner-bubble" style={{ animationDelay: "0ms" }} aria-label="شريك TPS">
-                <img src="src/assets/Images/TPS-logo.png" alt="TPS" />
+              <div
+                className="partner-bubble"
+                style={{ animationDelay: "0ms" }}
+                aria-label="شريك TPS"
+              >
+                <img src={TPSlogo} alt="TPS" />
              </div>
-              <div className="partner-bubble" style={{ animationDelay: "180ms" }} aria-label="شريك NSC">
-                <img src="src/assets/Images/NSC.png" alt="NSC" />
+              <div
+                className="partner-bubble"
+                style={{ animationDelay: "180ms" }}
+                aria-label="شريك NSC"
+              >
+                <img src={NSC} alt="NSC" />
              </div>
-              <div className="partner-bubble" style={{ animationDelay: "360ms" }} aria-label="شريك LOGO">
-                <img src="src/assets/Images/LOGO.png" alt="LOGO" />
+              <div
+                className="partner-bubble"
+                style={{ animationDelay: "360ms" }}
+                aria-label="شريك LOGO"
+              >
+                <img src={LOGO} alt="LOGO" />
              </div>
            </div>
          </div>

-          <div className={`hero-content ${isArabic ? 'content-rtl' : 'content-ltr'}`}>
-            <h1 ref={mainTitleRef} className="hero-title text-white" style={{ fontWeight: 800, marginBottom: 16, textShadow: "2px 2px 10px rgba(0,0,0,0.6)" }} />
-            <p ref={subtitleRef} className="hero-subtitle text-white" style={{ maxWidth: 800, textShadow: "1px 1px 6px rgba(0,0,0,0.45)", lineHeight: 1.6 }} />
+          <div
+            className={`hero-content ${
+              isArabic ? "content-rtl" : "content-ltr"
+            }`}
+          >
+            <h1
+              ref={mainTitleRef}
+              className="hero-title text-white"
+              style={{
+                fontWeight: 800,
+                marginBottom: 16,
+                textShadow: "2px 2px 10px rgba(0,0,0,0.6)",
+              }}
+            />
+            <p
+              ref={subtitleRef}
+              className="hero-subtitle text-white"
+              style={{
+                maxWidth: 800,
+                textShadow: "1px 1px 6px rgba(0,0,0,0.45)",
+                lineHeight: 1.6,
+              }}
+            />
            <div className="action-wrapper" style={{ marginTop: 18 }}>
              <OrangeActionButton onClick={goToDepartments} />
            </div>
@ -379,11 +464,22 @@ const StyledWrapper = styled.div`
    cursor: pointer;
  }

-  .icon { width: 24px; height: 24px; transition: all 0.3s ease-in-out; }
+  .icon {
+    width: 24px;
+    height: 24px;
+    transition: all 0.3s ease-in-out;
+  }

-  .button:hover { transform: scale(1.05); border-color: #fff9; }
-  .button:hover .icon { transform: translate(4px); }
-  .button:hover::before { animation: shine 1.5s ease-out infinite; }
+  .button:hover {
+    transform: scale(1.05);
+    border-color: #fff9;
+  }
+  .button:hover .icon {
+    transform: translate(4px);
+  }
+  .button:hover::before {
+    animation: shine 1.5s ease-out infinite;
+  }

  .button::before {
    content: "";
@ -402,8 +498,14 @@ const StyledWrapper = styled.div`
  }

  @keyframes shine {
-    0% { left: -100px; }
-    60% { left: 100%; }
-    to { left: 100%; }
+    0% {
+      left: -100px;
+    }
+    60% {
+      left: 100%;
+    }
+    to {
+      left: 100%;
+    }
  }
 `;