فرانت‌اند: نسخه انگلیسی با مسیر /en/ — مسیریابی دوزبانه، دیکشنری رابط، بومی‌سازی داده، تغییر زبان در هدر، ویرایش انگلیسی در پنل و پشتیبانی LTR

frontend/src/components/ProjectCard.tsx

@@ -2,17 +2,19 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import { ArrowLeftIcon } from 'lucide-react'
 import { useStatusLabel } from '../api'
+import { useLang } from '../i18n/lang'
 
 export function ProjectCard({ project }: any) {
   const isOngoing = project.status === 'progress'
   const statusText = useStatusLabel(project.status)
+  const { t, href, lang } = useLang()
 
   const dotColor = isOngoing ? 'bg-copper animate-pulse' : 'bg-ivory/60'
   const textColor = isOngoing ? 'text-copper' : 'text-ivory/90'
 
   return (
     <article className="group flex h-full flex-col overflow-hidden rounded-2xl border border-white/10 bg-char/85 backdrop-blur-xl shadow-[0_10px_30px_rgba(0,0,0,0.3)] transition-all duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-[0_20px_40px_rgba(0,0,0,0.6),0_0_30px_rgba(197,143,92,0.2)] focus:outline-none focus-visible:ring-2 focus-visible:ring-copper">
-      <Link to={`/projects/${project.slug || '#'}`} className="flex h-full flex-col focus:outline-none">
+      <Link to={href(`/projects/${project.slug || '#'}`)} className="flex h-full flex-col focus:outline-none">
         
         {/* کادر تصویر به همراه نشانگر وضعیت کپسولی و گوی دکمه شیشه‌ای */}
         <div className="relative aspect-[4/3] w-full overflow-hidden">
@@ -23,14 +25,14 @@ export function ProjectCard({ project }: any) {
           />
 
           {/* نشانگر وضعیت کپسولی شیشه‌ای */}
-          <div className={`absolute right-4 top-4 flex items-center gap-2 rounded-full border border-white/15 bg-ink/75 px-4 py-1.5 text-xs font-light backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_4px_15px_rgba(0,0,0,0.4)] ${textColor}`}>
+          <div className={`absolute top-4 ltr:left-4 rtl:right-4 flex items-center gap-2 rounded-full border border-white/15 bg-ink/75 px-4 py-1.5 text-xs font-light backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_4px_15px_rgba(0,0,0,0.4)] ${textColor}`}>
             <span className={`h-2 w-2 rounded-full ${dotColor} ${isOngoing ? 'shadow-[0_0_10px_rgba(197,143,92,0.9)]' : ''}`} />
             {statusText}
           </div>
 
           {/* گوی دکمه شیشه‌ای شناور برای ورود به پروژه */}
-          <div className="absolute bottom-4 left-4 flex h-11 w-11 items-center justify-center rounded-full border border-white/25 bg-ink/65 text-copper backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_6px_20px_rgba(0,0,0,0.4)] transition-all duration-400 ease-lux group-hover:scale-110 group-hover:border-copper group-hover:bg-copper group-hover:text-char group-hover:shadow-[0_0_25px_rgba(197,143,92,0.6)]">
-            <ArrowLeftIcon className="h-5 w-5 transition-transform duration-300 group-hover:-translate-x-0.5" />
+          <div className="absolute bottom-4 ltr:right-4 rtl:left-4 flex h-11 w-11 items-center justify-center rounded-full border border-white/25 bg-ink/65 text-copper backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_6px_20px_rgba(0,0,0,0.4)] transition-all duration-400 ease-lux group-hover:scale-110 group-hover:border-copper group-hover:bg-copper group-hover:text-char group-hover:shadow-[0_0_25px_rgba(197,143,92,0.6)]">
+            <ArrowLeftIcon className="h-5 w-5 ltr:-scale-x-100 transition-transform duration-300 rtl:group-hover:-translate-x-0.5 ltr:group-hover:translate-x-0.5" />
           </div>
         </div>
 
@@ -47,8 +49,9 @@ export function ProjectCard({ project }: any) {
           <div className="my-6 h-px w-full bg-white/10" />
 
           <div className="mt-auto flex items-center justify-between text-sm font-light text-ivory/60">
-            <span>سال: {project.year}</span>
-            <span>{project.area} متر مربع</span>
+            <span>{t('yearLabel')} {project.year}</span>
+            {/* واحد زیربنا در محتوای انگلیسی داخل خود مقدار است — فقط در فارسی اضافه می‌شود */}
+            <span>{lang === 'fa' ? `${project.area} ${t('sqm')}` : project.area}</span>
           </div>
         </div>
       </Link>