hamzeh/REXNT
2
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 11:27:13 +03:00
parent b41f4c335c
commit 4ee30601b5
6 changed files with 362 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/Components/Sections/DepartmentDetail9/DepartmentDetail9.jsx
View File

@ -220,9 +220,14 @@ function ProjectsTimeline({
.timeline-item { margin:0 18px; }
.year-circle { width:90px; height:90px; font-size:15px; }
.timeline-item.active .year-circle { width:120px; height:120px; font-size:19px; }
.project-card { min-width:260px; max-width:300px; padding:20px; }
.project-card { min-width:unset; max-width:88vw; padding:18px; margin-top:18px; width:calc(86vw); }
.project-text { font-size:13px; }
.scroll-btn { width:48px; height:48px; font-size:20px; }
.scroll-indicator { bottom:8px; }
}
@media (max-width:420px){
.project-card { width: calc(100vw - 48px); max-width:100%; min-width:120px; padding:12px; margin-top:12px; border-radius:14px; }
.scroll-indicator { bottom:6px; }
}
.projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
@ -325,7 +330,6 @@ export default function DepartmentDetail9() {
const expertiseItems = [
{
icon: (
// control panel / PLC-like
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<rect x="3" y="4" width="18" height="16" rx="2" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M7 8h.01M11 8h.01M15 8h.01M7 12h10" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
@ -335,7 +339,6 @@ export default function DepartmentDetail9() {
},
{
icon: (
// automation line
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M3 7h4l2 6h6l2-6h4M5 21h14" />
</svg>
@ -344,7 +347,6 @@ export default function DepartmentDetail9() {
},
{
icon: (
// SCADA/monitor
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<rect x="2" y="3" width="20" height="14" rx="1.5" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M8 21h8M12 17v4" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
@ -354,7 +356,6 @@ export default function DepartmentDetail9() {
},
{
icon: (
// fuel management / station icon
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M3 7v10a2 2 0 002 2h10l4-4V7a2 2 0 00-2-2H5a2 2 0 00-2 2zM16 3v4" />
</svg>
@ -363,7 +364,6 @@ export default function DepartmentDetail9() {
},
{
icon: (
// integration / link
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M10 14a3 3 0 104 0M4 10a4 4 0 018 0M20 14a4 4 0 00-8 0" />
</svg>
@ -372,7 +372,6 @@ export default function DepartmentDetail9() {
},
{
icon: (
// analytics / predict
<svg className="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M3 3v18h18" />
<path strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" d="M7 14l3-3 4 4 5-7" />
@ -440,7 +439,7 @@ export default function DepartmentDetail9() {
</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 sm:block" style={{ zIndex: 99999 }}>
<AnimatePresence>
{!active && (
<motion.div key="buttons" initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.45 }} className="w-full max-w-7xl mx-auto">
@ -488,6 +487,45 @@ export default function DepartmentDetail9() {
</div>
</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.2" 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">
<AnimatePresence mode="wait">
{!active ? (