translation

src/Components/Sections/Departments/Departments.jsx

@@ -8,6 +8,7 @@ import {
   useVelocity,
 } from "framer-motion";
 import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 import d1 from "../../../../src/assets/Images/d1.jpeg";
 import d7 from "../../../../src/assets/Images/d7.jpeg";
@@ -31,9 +32,10 @@ const departments = [
   { id: 9, title: "قسم الاتمتة والتحكم", image: d22 },
 ];
 
-function DepartmentCard({ dept, offset }) {
+function DepartmentCard({ dept, offset, index }) {
   const navigate = useNavigate();
   const wrapperRef = useRef(null);
+  const { t } = useTranslation();
 
   const rotateX = useMotionValue(0);
   const rotateY = useMotionValue(0);
@@ -108,6 +110,8 @@ function DepartmentCard({ dept, offset }) {
     }
   };
 
+  const translatedTitle = t(`departments.list.${dept.id - 1}`, { defaultValue: dept.title });
+
   return (
     <div
       ref={wrapperRef}
@@ -121,13 +125,13 @@ function DepartmentCard({ dept, offset }) {
           style={{ translateZ: titleZ }}
           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}
+          {translatedTitle}
         </motion.span>
       </div>
 
       <motion.img
         src={dept.image}
-        alt={dept.title}
+        alt={translatedTitle}
         draggable={false}
         onClick={handleClick}
         style={{
@@ -145,11 +149,13 @@ function DepartmentCard({ dept, offset }) {
 }
 
 export default function Departments() {
+  const { t } = useTranslation();
+
   return (
     <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">
-          أقسامنا
+          {t('departments.heading', { defaultValue: 'أقسامنا' })}
         </h1>
       </header>
 
@@ -170,6 +176,7 @@ export default function Departments() {
               <DepartmentCard
                 dept={dept}
                 offset={index % 2 === 0 ? "" : "md:translate-y-16"}
+                index={index}
               />
             </motion.div>
           ))}