From 062a4257e4534f24a069e0e352a15dbf9e80c627 Mon Sep 17 00:00:00 2001 From: mouazkh Date: Tue, 13 Jan 2026 19:14:59 +0300 Subject: [PATCH] edited the home to fix the images import --- src/Components/Sections/Home/Home.jsx | 208 +++++++++++++++++++------- 1 file changed, 155 insertions(+), 53 deletions(-) diff --git a/src/Components/Sections/Home/Home.jsx b/src/Components/Sections/Home/Home.jsx index ab1d9d6..1718eff 100644 --- 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 = `${headingText[0]}${headingText + main.innerHTML = `${ + headingText[0] + }${headingText .slice(1) .join("
")}`; } 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 ( -