feat: update UI to glassmorphic design and copper theme

frontend/src/pages/ProjectDetail.tsx

@@ -6,15 +6,28 @@ import { ButtonLink } from '../components/Button'
 import { ProjectCard } from '../components/ProjectCard'
 import { ContactSection } from '../components/ContactSection'
 import { Lightbox } from '../components/Lightbox'
-import { STATUS_LABEL } from '../data/site'
-import { useSite } from '../api'
+import { useEffect } from 'react';
+import { useSite, useStatusLabel } from '../api';
+import { applySeo } from '../seo';
 
 export function ProjectDetail() {
   const { slug } = useParams<{ slug: string }>()
-  const { projects } = useSite()
+  const { projects, brand } = useSite()
   const project = projects.find((p) => p.slug === slug)
+  const statusLabel = useStatusLabel(project?.status ?? '')
   const [lightbox, setLightbox] = useState<number | null>(null)
 
+  // عنوان تب، توضیح متا و OG از خود پروژه
+  useEffect(() => {
+    if (!project) return;
+    applySeo({
+      title: `${project.title} | ${brand}`,
+      description: project.summary,
+      path: `/projects/${project.slug}`,
+      image: project.image,
+    });
+  }, [project?.id]);
+
   if (!project) {
     return (
       <section className="flex min-h-[70vh] flex-col items-center justify-center px-6 text-center">
@@ -74,7 +87,7 @@ export function ProjectDetail() {
           <Reveal className="order-1">
             <span className="flex items-center gap-3 text-sm font-light text-copper">
               <span aria-hidden="true" className="h-px w-8 bg-copper" />
-              {STATUS_LABEL[project.status]}
+              {statusLabel}
             </span>
             <h2 className="mt-4 text-3xl font-bold text-ivory">درباره پروژه</h2>