import React, { useEffect, useState, useRef } from "react"; import { Button, Dropdown } from "flowbite-react"; export default function EngineeringHeroFlowbite() { const defaultConfig = { main_title: "حلول هندسية متكاملة", subtitle: "نصمم ونبني المستقبل بخبرة ودقة واحترافية", primary_color: "#e67e22", background_color: "#000000", text_color: "#ffffff", secondary_surface: "#95a5a6", secondary_action: "#34495e", font_family: "Cairo", font_size: 16, }; const [config, setConfig] = useState(defaultConfig); const [dropdownOpen, setDropdownOpen] = useState(false); const mainTitleRef = useRef(null); const subtitleRef = useRef(null); useEffect(() => { const id = "cairo-font-link"; if (!document.getElementById(id)) { 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"; document.head.appendChild(link); } }, []); useEffect(() => { const main = mainTitleRef.current; const sub = subtitleRef.current; const baseFontStack = "Arial, sans-serif"; const font = (config.font_family || defaultConfig.font_family) + ", " + baseFontStack; const baseSize = config.font_size || defaultConfig.font_size; if (main) { main.textContent = config.main_title || defaultConfig.main_title; main.style.fontFamily = font; main.style.fontSize = `${baseSize * 4}px`; main.style.color = config.text_color || defaultConfig.text_color; } if (sub) { sub.textContent = config.subtitle || defaultConfig.subtitle; sub.style.fontFamily = font; sub.style.fontSize = `${baseSize * 1.75}px`; sub.style.color = config.text_color || defaultConfig.text_color; } const root = document.documentElement; 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); }, [config]); useEffect(() => { const element = { defaultConfig, onConfigChange: async (newCfg) => { setConfig((c) => ({ ...c, ...newCfg })); }, mapToCapabilities: (cfg) => ({ recolorables: [ { get: () => cfg.background_color || defaultConfig.background_color, set: (value) => { cfg.background_color = value; window?.elementSdk?.setConfig?.({ background_color: value }); setConfig({ ...cfg }); }, }, { get: () => cfg.secondary_surface || defaultConfig.secondary_surface, set: (value) => { cfg.secondary_surface = value; window?.elementSdk?.setConfig?.({ secondary_surface: value }); setConfig({ ...cfg }); }, }, { get: () => cfg.text_color || defaultConfig.text_color, set: (value) => { cfg.text_color = value; window?.elementSdk?.setConfig?.({ text_color: value }); setConfig({ ...cfg }); }, }, { get: () => cfg.primary_color || defaultConfig.primary_color, set: (value) => { cfg.primary_color = value; window?.elementSdk?.setConfig?.({ primary_color: value }); setConfig({ ...cfg }); }, }, { get: () => cfg.secondary_action || defaultConfig.secondary_action, set: (value) => { cfg.secondary_action = value; window?.elementSdk?.setConfig?.({ secondary_action: value }); setConfig({ ...cfg }); }, }, ], borderables: [], fontEditable: { get: () => cfg.font_family || defaultConfig.font_family, set: (value) => { cfg.font_family = value; window?.elementSdk?.setConfig?.({ font_family: value }); setConfig({ ...cfg }); }, }, fontSizeable: { get: () => cfg.font_size || defaultConfig.font_size, set: (value) => { cfg.font_size = value; window?.elementSdk?.setConfig?.({ font_size: value }); setConfig({ ...cfg }); }, }, }), mapToEditPanelValues: (cfg) => new Map([ ["main_title", cfg.main_title || defaultConfig.main_title], ["subtitle", cfg.subtitle || defaultConfig.subtitle], ]), }; if (window?.elementSdk?.init) { try { window.elementSdk.init(element); } catch (e) {} } }, []); return (
TPS logo
NSC logo
LOGO
REXNT
{/* removed the previous hero-image background as requested */}
REXNT

{dropdownOpen && ( )}

); }