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

1040
src/Components/Nav/Navbar.jsx
View File

File diff suppressed because it is too large Load Diff

58
src/Components/Sections/DepartmentDetail/DepartmentDetail.jsx
View File

@ -206,7 +206,7 @@ function ProjectsTimeline({
.timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); } .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
.timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; } .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
@keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} } @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
.project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); } .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; width: clamp(240px, 36vw, 420px); max-width:92vw; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; } .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
.timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); } .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
.timeline-item.active .project-card::before { opacity:1; } .timeline-item.active .project-card::before { opacity:1; }
@ -219,13 +219,14 @@ function ProjectsTimeline({
.scroll-btn:active:not(:disabled){ transform: scale(1.05); } .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
.scroll-btn:disabled { opacity:.4; cursor:not-allowed; } .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
@media (max-width:768px){ @media (max-width:768px){
.timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; } .timeline-wrapper { padding:clamp(24px,6vw,80px) 16px; }
.timeline-item { margin:0 18px; } .timeline-item { margin:0 12px; }
.year-circle { width:90px; height:90px; font-size:15px; } .year-circle { width:64px !important; height:64px !important; font-size:13px !important; }
.timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; } .timeline-item.active .year-circle { width:96px !important; height:96px !important; font-size:16px !important; transform: translateY(-10px) scale(1.02); }
.project-card { min-width:260px; max-width:300px; padding:20px; } .project-card { width: clamp(160px, 72vw, 280px); padding:16px; margin-top:20px; }
.project-text { font-size:13px; } .project-text { font-size:13px; line-height:1.6; }
.scroll-btn { width:48px; height:48px; font-size:20px; } .scroll-btn { width:44px; height:44px; font-size:18px; }
.projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(36px,6vw,80px) 16px; }
} }
.projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; } .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
@ -508,7 +509,7 @@ export default function DepartmentDetail() {
</div> </div>
</div> </div>
<div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto" style={{ zIndex: 99999 }}> <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
<AnimatePresence> <AnimatePresence>
{!active && ( {!active && (
<motion.div <motion.div
@ -565,6 +566,45 @@ export default function DepartmentDetail() {
</div> </div>
</section> </section>
<div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
<AnimatePresence mode="wait">
{!active && (
<motion.div
key="floating-buttons-mobile"
initial={{ opacity: 0, y: 6 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 6 }}
transition={{ duration: 0.4 }}
>
<div className="grid grid-cols-1 gap-3">
{buttons.map((b, index) => (
<motion.button
key={b.id}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.05, duration: 0.35 }}
whileHover={{ scale: 1.02 }}
onClick={() => handleButtonClick(b.key)}
className="group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90"
>
<div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
{b.id}
</div>
<div className="flex-1">
<h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
<p className="text-xs text-gray-600 mt-1">انقر للاطّلاع على التفاصيل</p>
</div>
<svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
</svg>
</motion.button>
))}
</div>
</motion.div>
)}
</AnimatePresence>
</div>
<section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20"> <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
{!active ? ( {!active ? (

67
src/Components/Sections/DepartmentDetail2/DepartmentDetail2.jsx
View File

@ -193,11 +193,11 @@ function ProjectsTimeline({
const css = ` const css = `
:root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af} :root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
.projects-timeline-root { direction: rtl; min-height: 100%; } .projects-timeline-root { direction: rtl; min-height: 100%; overflow-y: hidden; }
.timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.timeline-scroll::-webkit-scrollbar{ display:none; height:0; } .timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
.timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; } .timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
.svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; } .svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; max-width:100%; }
.timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; } .timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
.year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%); .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
background-clip: padding-box; background-clip: padding-box;
@ -206,7 +206,7 @@ function ProjectsTimeline({
.timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); } .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
.timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; } .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
@keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} } @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
.project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); } .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; width: clamp(240px, 40vw, 420px); max-width:92vw; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; } .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
.timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); } .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
.timeline-item.active .project-card::before { opacity:1; } .timeline-item.active .project-card::before { opacity:1; }
@ -219,13 +219,15 @@ function ProjectsTimeline({
.scroll-btn:active:not(:disabled){ transform: scale(1.05); } .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
.scroll-btn:disabled { opacity:.4; cursor:not-allowed; } .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
@media (max-width:768px){ @media (max-width:768px){
.timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; } .timeline-wrapper { padding:clamp(18px,4vw,36px) 16px; }
.timeline-item { margin:0 18px; } .timeline-item { margin:0 12px; }
.year-circle { width:90px; height:90px; font-size:15px; } .year-circle { width:64px !important; height:64px !important; font-size:13px !important; }
.timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; } .timeline-item.active .year-circle { width:96px !important; height:96px !important; font-size:16px !important; transform: translateY(-10px) scale(1.02); }
.project-card { min-width:260px; max-width:300px; padding:20px; } .project-card { width: clamp(160px, 72vw, 300px); padding:16px; margin-top:18px; }
.project-text { font-size:13px; } .project-text { font-size:13px; line-height:1.6; }
.scroll-btn { width:48px; height:48px; font-size:20px; } .scroll-btn { width:44px; height:44px; font-size:18px; }
.scroll-indicator { position:relative; bottom:auto; left:auto; transform:none; margin:12px auto 0; justify-content:center; }
.projects-timeline-root { overflow-y: hidden; }
} }
.projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; } .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
@ -411,7 +413,7 @@ export default function DepartmentDetail2() {
</div> </div>
</div> </div>
<div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto" style={{ zIndex: 99999 }}> <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
<AnimatePresence> <AnimatePresence>
{!active && ( {!active && (
<motion.div <motion.div
@ -434,7 +436,7 @@ export default function DepartmentDetail2() {
onClick={() => handleButtonClick(b.key)} onClick={() => handleButtonClick(b.key)}
className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm" className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm"
> >
<div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" /> <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
<div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" /> <div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
<div className="relative z-10"> <div className="relative z-10">
<div className="flex items-center gap-3 mb-3"> <div className="flex items-center gap-3 mb-3">
@ -468,6 +470,45 @@ export default function DepartmentDetail2() {
</div> </div>
</section> </section>
<div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
<AnimatePresence mode="wait">
{!active && (
<motion.div
key="floating-buttons-mobile"
initial={{ opacity: 0, y: 6 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 6 }}
transition={{ duration: 0.4 }}
>
<div className="grid grid-cols-1 gap-3">
{buttons.map((b, index) => (
<motion.button
key={b.id}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.05, duration: 0.35 }}
whileHover={{ scale: 1.02 }}
onClick={() => handleButtonClick(b.key)}
className="group relative rounded-2xl p-3 shadow-md border border-transparent flex items-center gap-3 text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-200 overflow-hidden bg-white/90"
>
<div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
{b.id}
</div>
<div className="flex-1">
<h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
<p className="text-xs text-gray-600 mt-1">انقر للاطّلاع على التفاصيل</p>
</div>
<svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
</svg>
</motion.button>
))}
</div>
</motion.div>
)}
</AnimatePresence>
</div>
<section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20"> <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
{!active ? ( {!active ? (
@ -506,7 +547,7 @@ export default function DepartmentDetail2() {
> >
<div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white"> <div className="relative flex items-start gap-3 sm:gap-6 rounded-2xl p-3 sm:p-6 border-r-4 border-amber-400 hover:border-orange-500 hover:shadow-xl transition-all duration-300 bg-white">
<div className="relative flex-shrink-0"> <div className="relative flex-shrink-0">
<motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10"> <motion.div whileHover={{ rotate: 360, scale: 1.08 }} transition={{ duration: 0.6 }} className="w-10 h-10 sm:w-14 sm:h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base sm:text-2xl font-extrabold shadow-lg group-hover:shadow-2xl transition-shadow duration-300 relative z-10">
{item.icon} {item.icon}
</motion.div> </motion.div>
<div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" /> <div className="absolute inset-0 bg-amber-500 rounded-xl blur-xl opacity-0 group-hover:opacity-30 transition-opacity duration-300" />

72
src/Components/Sections/DepartmentDetail3/DepartmentDetail3.jsx
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef, useCallback } from "react"; import React, { useState, useEffect, useRef, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import d14 from "../../../../src/assets/Images/d14.jpg" import d14 from "../../../../src/assets/Images/d14.jpg";
import d15 from "../../../../src/assets/Images/d15.jpg" import d15 from "../../../../src/assets/Images/d15.jpg";
import d16 from "../../../../src/assets/Images/d16.jpg"; import d16 from "../../../../src/assets/Images/d16.jpg";
import d7 from "../../../../src/assets/Images/d7.jpeg"; import d7 from "../../../../src/assets/Images/d7.jpeg";
@ -193,11 +193,11 @@ function ProjectsTimeline({
const css = ` const css = `
:root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af} :root{--bg-start:#0b1220;--bg-mid:#102033;--bg-end:#2b3a4a;--accent:#f97316;--muted:#9ca3af}
.projects-timeline-root { direction: rtl; min-height: 100%; } .projects-timeline-root { direction: rtl; min-height: 100%; overflow-y: hidden; }
.timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .timeline-scroll { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.timeline-scroll::-webkit-scrollbar{ display:none; height:0; } .timeline-scroll::-webkit-scrollbar{ display:none; height:0; }
.timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; } .timeline-wrapper { display:flex; align-items:center; position:relative; padding:clamp(48px,6vw,120px) clamp(12px,4vw,120px); min-width:max-content; }
.svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; } .svg-container { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; max-width:100%; }
.timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; } .timeline-item { position:relative; display:flex; flex-direction:column; align-items:center; margin:0 clamp(20px,4vw,60px); transition:all .6s cubic-bezier(.34,1.56,.64,1); z-index:1; }
.year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%); .year-circle { width:clamp(72px,9vw,150px); height:clamp(72px,9vw,150px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(14px,1.6vw,24px); font-weight:700; background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); color:var(--bg-start); box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.04); transition:all .6s cubic-bezier(.34,1.56,.64,1); cursor:pointer; border:1px solid rgba(255,255,255,0.08); position:relative; z-index:2; backdrop-filter: blur(8px) saturate(120%);
background-clip: padding-box; background-clip: padding-box;
@ -206,7 +206,7 @@ function ProjectsTimeline({
.timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); } .timeline-item.active .year-circle { width:clamp(110px,14vw,200px); height:clamp(110px,14vw,200px); font-size:clamp(18px,2.2vw,28px); box-shadow:0 18px 60px rgba(15,23,42,.5), inset 0 2px 6px rgba(255,255,255,0.04); border-color: rgba(249,115,22,0.18); transform: translateY(-15px) scale(1.03); }
.timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; } .timeline-item.active .year-circle::after { opacity:1; inset:-12px; animation: ripple 2s ease-out infinite; }
@keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} } @keyframes ripple { 0%{ transform: scale(1); opacity:.6;} 100%{ transform: scale(1.25); opacity:0;} }
.project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; min-width:320px; max-width:420px; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); } .project-card { margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border-radius:18px; padding:26px; width: clamp(240px, 40vw, 420px); max-width:92vw; box-shadow:0 12px 40px rgba(2,6,23,.45); opacity:.9; transform: scale(.98) translateY(8px); transition:all .6s cubic-bezier(.34,1.56,.64,1); border:1px solid rgba(255,255,255,.06); position:relative; overflow:hidden; backdrop-filter: blur(8px) saturate(120%); }
.project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; } .project-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: linear-gradient(to left, var(--accent), #b91c1c, var(--muted)); opacity:0; transition:opacity .6s ease; }
.timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); } .timeline-item.active .project-card { opacity:1; transform: scale(1) translateY(0); box-shadow:0 28px 80px rgba(2,6,23,.5),0 6px 18px rgba(0,0,0,.08); border-color: rgba(249,115,22,.14); }
.timeline-item.active .project-card::before { opacity:1; } .timeline-item.active .project-card::before { opacity:1; }
@ -219,13 +219,15 @@ function ProjectsTimeline({
.scroll-btn:active:not(:disabled){ transform: scale(1.05); } .scroll-btn:active:not(:disabled){ transform: scale(1.05); }
.scroll-btn:disabled { opacity:.4; cursor:not-allowed; } .scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
@media (max-width:768px){ @media (max-width:768px){
.timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; } .timeline-wrapper { padding:clamp(18px,4vw,36px) 16px; }
.timeline-item { margin:0 18px; } .timeline-item { margin:0 12px; }
.year-circle { width:90px; height:90px; font-size:15px; } .year-circle { width:64px !important; height:64px !important; font-size:13px !important; }
.timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; } .timeline-item.active .year-circle { width:96px !important; height:96px !important; font-size:16px !important; transform: translateY(-10px) scale(1.02); }
.project-card { min-width:260px; max-width:300px; padding:20px; } .project-card { width: clamp(160px, 72vw, 300px); padding:16px; margin-top:18px; }
.project-text { font-size:13px; } .project-text { font-size:13px; line-height:1.6; }
.scroll-btn { width:48px; height:48px; font-size:20px; } .scroll-btn { width:44px; height:44px; font-size:18px; }
.scroll-indicator { position:relative; bottom:auto; left:auto; transform:none; margin:12px auto 0; justify-content:center; }
.projects-timeline-root { overflow-y: hidden; }
} }
.projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; } .projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
@ -420,7 +422,7 @@ export default function DepartmentDetail3() {
</div> </div>
</div> </div>
<div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto" style={{ zIndex: 99999 }}> <div className="absolute left-1/2 bottom-0 transform -translate-x-1/2 translate-y-1/2 w-full px-4 pointer-events-auto hidden md:block" style={{ zIndex: 99999 }}>
<AnimatePresence> <AnimatePresence>
{!active && ( {!active && (
<motion.div <motion.div
@ -443,7 +445,7 @@ export default function DepartmentDetail3() {
onClick={() => handleButtonClick(b.key)} onClick={() => handleButtonClick(b.key)}
className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm" className="group relative rounded-2xl p-4 sm:p-6 shadow-2xl border border-transparent flex flex-col h-full text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/80 backdrop-blur-sm"
> >
<div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500/10 to-orange-600/10 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" /> <div className="absolute top-0 right-0 w-20 h-20 sm:w-24 sm:h-24 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full -mr-12 -mt-12 group-hover:scale-125 transition-transform duration-500" />
<div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" /> <div className="absolute top-0 right-0 w-2 h-0 bg-gradient-to-b from-amber-500 to-orange-600 rounded-r-2xl group-hover:h-full transition-all duration-500" />
<div className="relative z-10"> <div className="relative z-10">
<div className="flex items-center gap-3 mb-3"> <div className="flex items-center gap-3 mb-3">
@ -477,6 +479,48 @@ export default function DepartmentDetail3() {
</div> </div>
</section> </section>
<div className="block md:hidden w-full max-w-7xl mx-auto px-4 sm:px-6 py-6">
<AnimatePresence mode="wait">
{!active && (
<motion.div
key="floating-buttons-mobile"
initial={{ opacity: 0, y: 6 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 6 }}
transition={{ duration: 0.4 }}
>
<div className="grid grid-cols-1 gap-3">
{buttons.map((b, index) => (
<motion.button
key={b.id}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.05, duration: 0.35 }}
whileHover={{ scale: 1.02 }}
onClick={() => handleButtonClick(b.key)}
className="group relative rounded-2xl p-4 shadow-2xl border border-transparent flex flex-col text-right focus:outline-none focus:ring-4 focus:ring-amber-200 transition-all duration-300 overflow-hidden bg-white/90"
>
<div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full -mr-10 -mt-10 group-hover:scale-110 transition-transform duration-300" />
<div className="relative z-10 flex items-center gap-3">
<div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center text-white text-base font-extrabold shadow">
{b.id}
</div>
<div className="flex-1">
<h3 className="text-sm font-bold text-gray-800">{b.title}</h3>
<p className="text-xs text-gray-600 mt-1">انقر للاطّلاع على التفاصيل</p>
</div>
<svg className="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M15 19l-7-7 7-7"/>
</svg>
</div>
</motion.button>
))}
</div>
</motion.div>
)}
</AnimatePresence>
</div>
<section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20"> <section className="max-w-7xl mx-auto px-4 sm:px-6 md:px-6 -mt-6 md:-mt-8 relative z-20">
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
{!active ? ( {!active ? (

25
src/Components/Sections/Departments/Departments.jsx
View File

@ -95,7 +95,6 @@ function DepartmentCard({ dept, offset }) {
if (dept.id === 6) { if (dept.id === 6) {
navigate("/department-detail6"); navigate("/department-detail6");
} }
if (dept.id === 5) { if (dept.id === 5) {
navigate("/department-detail5"); navigate("/department-detail5");
} }
@ -117,13 +116,10 @@ function DepartmentCard({ dept, offset }) {
style={{ perspective: 1400 }} style={{ perspective: 1400 }}
className={`relative w-full ${offset}`} className={`relative w-full ${offset}`}
> >
<div className="absolute bottom-6 right-[-32px] z-40 pointer-events-none max-w-xs"> <div className="absolute bottom-4 sm:bottom-6 right-[-8px] sm:right-[-16px] md:right-[-32px] z-40 pointer-events-none max-w-xs">
<motion.span <motion.span
style={{ translateZ: titleZ }} style={{ translateZ: titleZ }}
className="block text-2xl md:text-3xl font-extrabold leading-snug className="block text-lg sm:text-xl md:text-2xl lg:text-3xl font-extrabold leading-snug text-white drop-shadow-lg bg-gradient-to-tr from-black/60 via-black/30 to-transparent px-2 sm:px-3 py-1 rounded-lg"
text-white drop-shadow-lg
bg-gradient-to-tr from-black/60 via-black/30 to-transparent
px-3 py-1 rounded-lg"
> >
{dept.title} {dept.title}
</motion.span> </motion.span>
@ -142,9 +138,7 @@ function DepartmentCard({ dept, offset }) {
transformStyle: "preserve-3d", transformStyle: "preserve-3d",
boxShadow: "0 18px 50px rgba(2,6,23,0.12), 0 6px 18px rgba(2,6,23,0.06)", boxShadow: "0 18px 50px rgba(2,6,23,0.12), 0 6px 18px rgba(2,6,23,0.06)",
}} }}
// مهم: لا تضع خلفية صلبة هنا — اجعلها نصف شفافة حتى يظهر الكانفس وراءها className="cursor-pointer w-full h-56 sm:h-72 md:h-96 lg:h-[28rem] object-cover rounded-2xl bg-white/20 backdrop-blur-md border border-white/10"
className="cursor-pointer w-full h-96 object-cover rounded-2xl
bg-white/20 backdrop-blur-md border border-white/10"
/> />
</div> </div>
); );
@ -152,18 +146,15 @@ function DepartmentCard({ dept, offset }) {
export default function Departments() { export default function Departments() {
return ( return (
// لا تضف أي خلفية هنا — دع الكانفس العالمي يظهر <section id="departments" className="min-h-screen text-black bg-transparent" dir="rtl">
<section className="min-h-screen text-black bg-transparent" dir="rtl"> <header className="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 pt-10 sm:pt-12 relative z-20">
<header className="max-w-6xl mx-auto px-6 pt-12 relative z-20"> <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-[#041c40] via-[#57acd9] to-[#041c40] drop-shadow-lg">
<h1 className="text-5xl font-extrabold text-transparent bg-clip-text
bg-gradient-to-r from-[#041c40] via-[#57acd9] to-[#041c40]
drop-shadow-lg">
أقسامنا أقسامنا
</h1> </h1>
</header> </header>
<main className="max-w-6xl mx-auto px-6 py-20 relative z-20"> <main className="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 py-12 sm:py-16 md:py-20 relative z-20">
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-48"> <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 md:gap-x-16 gap-y-10 sm:gap-y-16 md:gap-y-48">
{departments.map((dept, index) => ( {departments.map((dept, index) => (
<motion.div <motion.div
key={dept.id} key={dept.id}

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

@ -33,7 +33,6 @@ export default function EngineeringHeroFlowbite() {
}, []); }, []);
useEffect(() => { useEffect(() => {
// slight delay to ensure mount then trigger animations
const t = setTimeout(() => setIsMounted(true), 60); const t = setTimeout(() => setIsMounted(true), 60);
return () => clearTimeout(t); return () => clearTimeout(t);
}, []); }, []);
@ -45,6 +44,21 @@ export default function EngineeringHeroFlowbite() {
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 baseSize = config.font_size || defaultConfig.font_size;
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) { if (main) {
const headingText = (config.main_title || defaultConfig.main_title) const headingText = (config.main_title || defaultConfig.main_title)
.split("\n") .split("\n")
@ -59,7 +73,8 @@ export default function EngineeringHeroFlowbite() {
} }
main.style.fontFamily = font; main.style.fontFamily = font;
main.style.fontSize = `${baseSize * 3.8}px`; // 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.color = config.text_color || defaultConfig.text_color;
main.style.fontWeight = 800; main.style.fontWeight = 800;
main.style.textAlign = "right"; main.style.textAlign = "right";
@ -71,17 +86,25 @@ export default function EngineeringHeroFlowbite() {
.map((s) => `<div>${s.trim()}</div>`) .map((s) => `<div>${s.trim()}</div>`)
.join(""); .join("");
sub.style.fontFamily = font; sub.style.fontFamily = font;
sub.style.fontSize = `${baseSize * 1.1}px`; sub.style.fontSize = `${responsiveBase * subtitleMultiplier}px`;
sub.style.color = config.text_color || defaultConfig.text_color; sub.style.color = config.text_color || defaultConfig.text_color;
sub.style.textAlign = "right"; sub.style.textAlign = "right";
sub.style.maxWidth = "800px"; sub.style.maxWidth = "800px";
} }
const root = document.documentElement; // keep CSS variables synced
root.style.setProperty("--ehb-primary", config.primary_color || defaultConfig.primary_color); 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-background", config.background_color || defaultConfig.background_color);
root.style.setProperty("--ehb-surface", config.secondary_surface || defaultConfig.secondary_surface); 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-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]); }, [config]);
useEffect(() => { useEffect(() => {
@ -189,14 +212,14 @@ export default function EngineeringHeroFlowbite() {
}; };
return ( return (
// خلفية الحاوية شفافة حتى يظهر الـ BackgroundCanvas في مستوى التطبيق
<div dir="rtl" className="h-screen w-full overflow-hidden content-container" style={{ background: "transparent" }}> <div dir="rtl" className="h-screen w-full overflow-hidden content-container" style={{ background: "transparent" }}>
<style>{` <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-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-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} .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 */ /* BIG IMAGE: slide-in slower, with delay */
@ -212,12 +235,12 @@ export default function EngineeringHeroFlowbite() {
100% { transform: translateX(0) scale(1); opacity: 1; } 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-logos{display:flex;gap:18px;margin-top:20px;align-items:flex-end;justify-content:flex-start}
.partner-bubble{ .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-origin:center;
transform: translateY(10px) scale(0.9); transform: translateY(10px) scale(0.95);
opacity: 0; opacity: 0;
will-change: transform, opacity; will-change: transform, opacity;
} }
@ -226,7 +249,7 @@ export default function EngineeringHeroFlowbite() {
popIn 900ms cubic-bezier(.2,.9,.2,1) both, popIn 900ms cubic-bezier(.2,.9,.2,1) both,
floatBubble 5s ease-in-out 1100ms infinite; 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)} .partner-bubble:hover{transform:translateY(-10px) scale(1.08);box-shadow:0 34px 72px rgba(0,0,0,0.55)}
@keyframes popIn { @keyframes popIn {
@ -265,11 +288,16 @@ export default function EngineeringHeroFlowbite() {
.partner-strip{gap:10px;padding:8px;border-radius:10px} .partner-strip{gap:10px;padding:8px;border-radius:10px}
.partner-item img{max-height:24px} .partner-item img{max-height:24px}
.partner-logos{gap:12px} .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 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-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; } .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); } 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){ @media (max-width: 768px){
.hero-layout{flex-direction:column;align-items:center;text-align:center} .hero-layout{flex-direction:column;align-items:center;text-align:center}
.hero-content{align-items: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 */ /* BUTTON: slower pop-in */
@ -364,8 +391,6 @@ export default function EngineeringHeroFlowbite() {
`}</style> `}</style>
<div className={`hero-section ${isMounted ? "is-mounted" : ""}`}> <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-overlay" />
<div className="hero-layout"> <div className="hero-layout">
<div className="hero-left"> <div className="hero-left">