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 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

68
src/Components/Sections/DepartmentDetail6/DepartmentDetail6.jsx
View File

@ -219,14 +219,29 @@ function ProjectsTimeline({
.scroll-btn:hover:not(:disabled){ background: linear-gradient(135deg,#fff 0%,#fff8f2 100%); transform: scale(1.12); box-shadow:0 10px 35px rgba(15,23,42,.22); }
.scroll-btn:active:not(:disabled){ transform: scale(1.05); }
.scroll-btn:disabled { opacity:.4; cursor:not-allowed; }
@media (max-width:1024px){
.timeline-wrapper { padding:clamp(36px,5vw,80px) 24px; }
}
@media (max-width:768px){
.timeline-wrapper { padding:clamp(36px,6vw,80px) 24px; }
.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-text { font-size:13px; }
.timeline-wrapper { padding:clamp(28px,5vw,60px) 20px; align-items:flex-start; }
.timeline-item { margin:0 14px; }
.year-circle { width:84px; height:84px; font-size:14px; }
.timeline-item.active .year-circle { width:116px; height:116px; font-size:18px; }
.project-card { min-width:240px; max-width:320px; padding:18px; margin-top:18px; }
.project-text { font-size:13px; line-height:1.6; }
.scroll-btn { width:48px; height:48px; font-size:20px; }
.scroll-indicator { bottom:18px; }
.svg-container { display:block; }
}
@media (max-width:420px){
.timeline-wrapper { padding:14px 12px; align-items:flex-start; }
.timeline-item { margin:0 8px; }
.project-card { width: calc(100vw - 64px); max-width:340px; min-width:140px; padding:12px; margin-top:12px; border-radius:14px; }
.project-text { font-size:13px; line-height:1.4; }
.project-text li { margin-bottom:8px; padding-right:10px; padding:6px 10px; }
.year-circle { width:54px !important; height:54px !important; font-size:12px !important; }
.timeline-item.active .year-circle { width:86px !important; height:86px !important; font-size:15px !important; transform: translateY(-8px) scale(1.02); }
.scroll-indicator { bottom:24px; }
}
.projects-timeline-root.plain-bleed .timeline-wrapper { padding:clamp(48px,6vw,120px) 24px; }
@ -443,7 +458,7 @@ export default function DepartmentDetail6() {
</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>
{!active && (
<motion.div
@ -501,6 +516,45 @@ export default function DepartmentDetail6() {
</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.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">
<AnimatePresence mode="wait">
{!active ? (