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

departments

Browse Source
This commit is contained in:
Beilin
2026-01-10 01:51:30 +03:00
parent 645149a6ef
commit 8f2dc93663
11 changed files with 1730 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,25 +75,22 @@ function DepartmentCard({ dept, offset }) {
[-45, 0, 45]
);
const progressParallax = useTransform(
scrollYProgress,
[0, 1],
[15, -15]
);
const progressParallax = useTransform(scrollYProgress, [0, 1], [15, -15]);
const y = useTransform(
[velocityParallax, progressParallax],
([v, p]) => v + p
);
const y = useTransform([velocityParallax, progressParallax], ([v, p]) => v + p);
const handleClick = () => {
if (dept.id === 5) {
navigate("/department-detail5");
}
if (dept.id === 4) {
navigate("/department-detail4");
}
if (dept.id === 3) {
navigate("/department-detail3");
} else if (dept.id === 2) {
navigate("/department-detail2");
} else {
navigate(`/departments/${dept.id}`);
}
}
};
return (
@ -127,10 +124,11 @@ function DepartmentCard({ dept, offset }) {
scale: s,
y,
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-96 object-cover rounded-2xl"
// مهم: لا تضع خلفية صلبة هنا — اجعلها نصف شفافة حتى يظهر الكانفس وراءها
className="cursor-pointer w-full h-96 object-cover rounded-2xl
bg-white/20 backdrop-blur-md border border-white/10"
/>
</div>
);
@ -138,12 +136,17 @@ function DepartmentCard({ dept, offset }) {
export default function Departments() {
return (
<section className="min-h-screen bg-white text-black" dir="rtl">
<header className="max-w-6xl mx-auto px-6 pt-12">
<h1 className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-orange-500 to-orange-600">أقسامنا</h1>
// لا تضف أي خلفية هنا — دع الكانفس العالمي يظهر
<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">
أقسامنا
</h1>
</header>
<main className="max-w-6xl mx-auto px-6 py-20">
<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">
{departments.map((dept, index) => (
<motion.div