Add new updated site

frontend/src/pages/Projects.tsx

@@ -26,8 +26,9 @@ export function Projects() {
   const doneLabel = useStatusLabel('done');
   const progressLabel = useStatusLabel('progress');
   const FILTERS: {key: ProjectStatus;label: string;}[] = [
-  { key: 'done', label: doneLabel },
-  { key: 'progress', label: progressLabel }];
+    { key: 'done', label: doneLabel },
+    { key: 'progress', label: progressLabel }
+  ];
   const [status, setStatus] = useState<ProjectStatus>('done');
   const list = projects.filter((p) => p.status === status);
 
@@ -35,47 +36,51 @@ export function Projects() {
     <>
       <PageHero pageKey="projects" />
       
-
       <section className="bg-ink py-24 lg:py-32" aria-label="فهرست پروژه‌ها">
         <div className="mx-auto max-w-site px-6 lg:px-10">
-          <div className="flex flex-wrap gap-3" role="tablist" aria-label="فیلتر وضعیت پروژه">
-            {FILTERS.map((filter) =>
-            <button
-              key={filter.key}
-              type="button"
-              role="tab"
-              aria-selected={status === filter.key}
-              onClick={() => setStatus(filter.key)}
-              className={`group relative overflow-hidden border px-7 py-3 text-sm transition-colors duration-300 ease-lux ${
-              status === filter.key ?
-              'border-copper bg-copper font-bold text-char' :
-              'border-ivory/15 font-light text-ivory/65'}`
-              }>
-              
-                {status !== filter.key &&
-              <span
-                aria-hidden="true"
-                className="absolute inset-0 translate-y-full bg-copper transition-transform duration-300 ease-lux group-hover:translate-y-0" />
-
-              }
-                <span className="relative z-10 transition-colors duration-300 ease-lux group-hover:text-char">
-                  <InlineEdit
-                    value={filter.label}
-                    onSave={(v) => saveStatusLabel(filter.key, v)}
-                  />
-                </span>
-              </button>
-            )}
+          
+          {/* دکمه‌های فیلتر مینیمال و شیشه‌ای (وسط‌چین و بدون کادر) */}
+          <div className="flex items-center justify-center gap-4 md:gap-6" role="tablist" aria-label="فیلتر وضعیت پروژه">
+            {FILTERS.map((filter, index) => {
+              const isSelected = status === filter.key;
+              return (
+                <React.Fragment key={filter.key}>
+                  {/* خط جداکننده بین دکمه‌ها */}
+                  {index > 0 && (
+                    <span className="h-6 w-[2px] rounded-full bg-ivory/10" aria-hidden="true" />
+                  )}
+                  
+                  <button
+                    type="button"
+                    role="tab"
+                    aria-selected={isSelected}
+                    onClick={() => setStatus(filter.key)}
+                    className={`group relative rounded-lg px-6 py-2.5 text-sm font-medium transition-all duration-300 ease-lux active:scale-95 cursor-pointer select-none backdrop-blur-md ${
+                      isSelected
+                        ? 'bg-copper/15 text-copper shadow-[0_4px_15px_rgba(197,143,92,0.1)]'
+                        : 'bg-transparent text-ivory/60 hover:bg-white/5 hover:text-ivory'
+                    }`}
+                  >
+                    <span className="relative z-10 transition-colors duration-300 ease-out">
+                      <InlineEdit
+                        value={filter.label}
+                        onSave={(v) => saveStatusLabel(filter.key, v)}
+                      />
+                    </span>
+                  </button>
+                </React.Fragment>
+              );
+            })}
           </div>
 
           <div className="mt-12 grid gap-6 lg:grid-cols-3">
-            {list.map((project, i) =>
-            <Reveal key={project.id} delay={0.05 * i} className="h-full">
+            {list.map((project, i) => (
+              <Reveal key={project.id} delay={0.05 * i} className="h-full">
                 <EditableItem resource="projects" item={project} className="h-full">
                   <ProjectCard project={project} imageClass="h-80" />
                 </EditableItem>
               </Reveal>
-            )}
+            ))}
             <AddItemButton resource="projects" />
           </div>
         </div>
@@ -83,6 +88,6 @@ export function Projects() {
 
       <Gallery />
       <ContactSection />
-    </>);
-
+    </>
+  );
 }