fixing depts

This commit is contained in:
2026-01-12 09:21:50 +03:00
parent 6423d42ea9
commit b41f4c335c
6 changed files with 526 additions and 947 deletions

View File

@ -89,24 +89,23 @@ function DepartmentCard({ dept, offset }) {
if (dept.id === 8) {
navigate("/department-detail8");
}
if (dept.id === 7) {
if (dept.id === 7) {
navigate("/department-detail7");
}
if (dept.id === 6) {
navigate("/department-detail6");
}
if (dept.id === 5) {
if (dept.id === 5) {
navigate("/department-detail5");
}
if (dept.id === 4) {
if (dept.id === 4) {
navigate("/department-detail4");
}
if (dept.id === 3) {
navigate("/department-detail3");
} else if (dept.id === 2) {
navigate("/department-detail2");
}
}
};
return (
@ -117,13 +116,10 @@ function DepartmentCard({ dept, offset }) {
style={{ perspective: 1400 }}
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
style={{ translateZ: titleZ }}
className="block text-2xl md:text-3xl font-extrabold leading-snug
text-white drop-shadow-lg
bg-gradient-to-tr from-black/60 via-black/30 to-transparent
px-3 py-1 rounded-lg"
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"
>
{dept.title}
</motion.span>
@ -142,9 +138,7 @@ function DepartmentCard({ dept, offset }) {
transformStyle: "preserve-3d",
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-96 object-cover rounded-2xl
bg-white/20 backdrop-blur-md border border-white/10"
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"
/>
</div>
);
@ -152,18 +146,15 @@ function DepartmentCard({ dept, offset }) {
export default function Departments() {
return (
// لا تضف أي خلفية هنا — دع الكانفس العالمي يظهر
<section className="min-h-screen text-black bg-transparent" dir="rtl">
<header className="max-w-6xl mx-auto px-6 pt-12 relative z-20">
<h1 className="text-5xl font-extrabold text-transparent bg-clip-text
bg-gradient-to-r from-[#041c40] via-[#57acd9] to-[#041c40]
drop-shadow-lg">
<section id="departments" 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">
<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>
</header>
<main className="max-w-6xl mx-auto px-6 py-20 relative z-20">
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-48">
<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-8 md:gap-x-16 gap-y-10 sm:gap-y-16 md:gap-y-48">
{departments.map((dept, index) => (
<motion.div
key={dept.id}