Rahaf/REXNT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixing depts

Browse Source
This commit is contained in:
Beilin
2026-01-12 09:21:50 +03:00
parent 6423d42ea9
commit b41f4c335c
6 changed files with 526 additions and 947 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/Components/Sections/Home/Home.jsx
View File

@ -33,7 +33,6 @@ export default function EngineeringHeroFlowbite() {
}, []);
useEffect(() => {
// slight delay to ensure mount then trigger animations
const t = setTimeout(() => setIsMounted(true), 60);
return () => clearTimeout(t);
}, []);
@ -45,43 +44,67 @@ export default function EngineeringHeroFlowbite() {
const font = (config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
const baseSize = config.font_size || defaultConfig.font_size;
if (main) {
const headingText = (config.main_title || defaultConfig.main_title)
.split("\n")
.map((s) => s.trim())
.filter(Boolean);
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
.slice(1)
.join("<br/>")}</span>`;
const applyStyles = () => {
const width = typeof window !== "undefined" ? window.innerWidth : 1024;
// Make the *base font size* responsive: smaller on small screens
// fine-grained breakpoints so we avoid abrupt jumps
const responsiveBase = width <= 400 ? baseSize * 0.78 : width <= 640 ? baseSize * 0.88 : width <= 1024 ? baseSize * 0.96 : baseSize;
// multipliers: smaller on small screens
const headingMultiplier = width <= 640 ? 3.0 : 3.8;
const subtitleMultiplier = width <= 640 ? 0.95 : 1.1;
// expose base to CSS (some rules reference --base)
const root = document.documentElement;
root.style.setProperty('--base', `${responsiveBase}px`);
if (main) {
const headingText = (config.main_title || defaultConfig.main_title)
.split("\n")
.map((s) => s.trim())
.filter(Boolean);
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
.slice(1)
.join("<br/>")}</span>`;
}
main.style.fontFamily = font;
// use responsiveBase so the font becomes smaller on small screens
main.style.fontSize = `${responsiveBase * headingMultiplier}px`;
main.style.color = config.text_color || defaultConfig.text_color;
main.style.fontWeight = 800;
main.style.textAlign = "right";
}
main.style.fontFamily = font;
main.style.fontSize = `${baseSize * 3.8}px`;
main.style.color = config.text_color || defaultConfig.text_color;
main.style.fontWeight = 800;
main.style.textAlign = "right";
}
if (sub) {
sub.innerHTML = (config.subtitle || defaultConfig.subtitle)
.split("\n")
.map((s) => `<div>${s.trim()}</div>`)
.join("");
sub.style.fontFamily = font;
sub.style.fontSize = `${responsiveBase * subtitleMultiplier}px`;
sub.style.color = config.text_color || defaultConfig.text_color;
sub.style.textAlign = "right";
sub.style.maxWidth = "800px";
}
if (sub) {
sub.innerHTML = (config.subtitle || defaultConfig.subtitle)
.split("\n")
.map((s) => `<div>${s.trim()}</div>`)
.join("");
sub.style.fontFamily = font;
sub.style.fontSize = `${baseSize * 1.1}px`;
sub.style.color = config.text_color || defaultConfig.text_color;
sub.style.textAlign = "right";
sub.style.maxWidth = "800px";
}
// keep CSS variables synced
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);
};
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);
// initial apply
applyStyles();
// update on resize so that small-screen changes reactively apply
window.addEventListener("resize", applyStyles);
return () => window.removeEventListener("resize", applyStyles);
}, [config]);
useEffect(() => {
@ -189,14 +212,14 @@ export default function EngineeringHeroFlowbite() {
};
return (
// خلفية الحاوية شفافة حتى يظهر الـ BackgroundCanvas في مستوى التطبيق
<div dir="rtl" 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 }
: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(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0.35));z-index:3}
.hero-layout{position:relative;z-index:10;height:100%;display:flex;align-items:center;justify-content:space-between;padding:40px;gap:2rem;direction:ltr;flex-direction:row}
/* use clamp for padding so layout breathes on small screens */
.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-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px;position:relative;flex-direction:column}
/* BIG IMAGE: slide-in slower, with delay */
@ -212,12 +235,12 @@ export default function EngineeringHeroFlowbite() {
100% { transform: translateX(0) scale(1); opacity: 1; }
}
/* partner bubbles - pop slower and float slower */
/* partner bubbles - pop slower and float slower (made slightly larger and lighter background) */
.partner-logos{display:flex;gap:18px;margin-top:20px;align-items:flex-end;justify-content:flex-start}
.partner-bubble{
width:110px;height:110px;border-radius:9999px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,0.45);backdrop-filter: blur(4px);transition:transform 420ms cubic-bezier(.2,.9,.2,1),box-shadow 420ms;
width:132px;height:132px;border-radius:9999px;background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.06));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,0.45);backdrop-filter: blur(4px);transition:transform 420ms cubic-bezier(.2,.9,.2,1),box-shadow 420ms;
transform-origin:center;
transform: translateY(10px) scale(0.9);
transform: translateY(10px) scale(0.95);
opacity: 0;
will-change: transform, opacity;
}
@ -226,7 +249,7 @@ export default function EngineeringHeroFlowbite() {
popIn 900ms cubic-bezier(.2,.9,.2,1) both,
floatBubble 5s ease-in-out 1100ms infinite;
}
.partner-bubble img{max-width:72%;max-height:72%;object-fit:contain;filter:grayscale(0.06) saturate(0.95)}
.partner-bubble img{max-width:78%;max-height:78%;object-fit:contain;filter:grayscale(0.06) saturate(0.95)}
.partner-bubble:hover{transform:translateY(-10px) scale(1.08);box-shadow:0 34px 72px rgba(0,0,0,0.55)}
@keyframes popIn {
@ -265,11 +288,16 @@ export default function EngineeringHeroFlowbite() {
.partner-strip{gap:10px;padding:8px;border-radius:10px}
.partner-item img{max-height:24px}
.partner-logos{gap:12px}
.partner-bubble{width:84px;height:84px}
/* make the partner bubbles slightly smaller (already present) */
.partner-bubble{width:100px;height:100px}
/* reduce the three bubble images a bit more on small screens only */
.partner-bubble img{max-width:64%;max-height:64%}
/* reduce spacing for smaller screens */
.hero-layout{gap:1rem}
}
/* HERO TEXT: slide from right (slower) */
.hero-content{flex:1;z-index:15;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:40px}
.hero-content{flex:1;z-index:15;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:clamp(12px,3.5vw,40px)}
.hero-title{ opacity:1; transform: translateX(0) translateY(0) scale(1); will-change: transform, opacity; }
.hero-subtitle{ opacity:1; transform: translateX(0) translateY(0) scale(1); will-change: transform, opacity; }
@ -289,13 +317,12 @@ export default function EngineeringHeroFlowbite() {
100% { opacity:1; transform: translateX(0) translateY(0) scale(1); }
}
.navy-glow{position:absolute;pointer-events:none;filter:blur(120px);z-index:4;opacity:1}
.navy-glow.bottom-left{left:0;bottom:0;width:80vh;height:80vh;background:radial-gradient(circle at 10% 90%, rgba(6,23,58,0.98), rgba(6,23,58,0.7), rgba(6,23,58,0.35) 40%, rgba(6,23,58,0) 70%)}
.navy-glow.top-right{right:0;top:0;width:70vh;height:70vh;background:radial-gradient(circle at 90% 10%, rgba(6,23,58,0.95), rgba(6,23,58,0.6), rgba(6,23,58,0.3) 40%, rgba(6,23,58,0) 70%)}
@media (max-width: 768px){
.hero-layout{flex-direction:column;align-items:center;text-align:center}
.hero-content{align-items:center}
.hero-title{font-size:calc(var(--base,16px) * 2.2) !important}
/* fallback if JS hasn't run yet: use --base variable */
.hero-title{font-size:calc(var(--base,16px) * 2.0) !important}
.hero-subtitle{font-size:calc(var(--base,16px) * 1.0) !important}
}
/* BUTTON: slower pop-in */
@ -364,8 +391,6 @@ export default function EngineeringHeroFlowbite() {
`}</style>
<div className={`hero-section ${isMounted ? "is-mounted" : ""}`}>
<div className="navy-glow bottom-left" />
<div className="navy-glow top-right" />
<div className="hero-overlay" />
<div className="hero-layout">
<div className="hero-left">