Add new updated site

frontend/src/components/home/FeaturedProjects.tsx

@@ -36,33 +36,36 @@ export function FeaturedProjects() {
       <div className="mx-auto max-w-site px-6 lg:px-10">
         <SectionHeading title={heading.title} lead={heading.lead} headingKey="featured_projects" />
 
-        {/* دکمه‌های فیلتر کپسولی شیشه‌ای مات */}
-        <div className="mt-10 flex flex-wrap items-center gap-3" role="tablist" aria-label="فیلتر وضعیت پروژه">
-          {FILTERS.map((filter) => {
+        {/* دکمه‌های فیلتر مینیمال و شیشه‌ای (بدون کادر) */}
+        <div className="mt-10 flex items-center justify-center gap-4 md:gap-6" role="tablist" aria-label="فیلتر وضعیت پروژه">
+          {FILTERS.map((filter, index) => {
             const isSelected = status === filter.key
             return (
-              <button
-                key={filter.key}
-                type="button"
-                role="tab"
-                aria-selected={isSelected}
-                onClick={() => setStatus(filter.key)}
-                className={`group relative flex items-center justify-center overflow-hidden rounded-full px-7 py-3 text-sm transition-all duration-300 ease-out active:scale-95 cursor-pointer select-none ${
-                  isSelected
-                    ? 'border border-copper bg-copper font-bold text-char shadow-[0_0_25px_rgba(197,143,92,0.45),inset_0_1px_1px_rgba(255,255,255,0.4)]'
-                    : 'border border-white/15 bg-white/[0.04] font-light text-ivory/70 backdrop-blur-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)] hover:border-copper/60 hover:bg-white/[0.08] hover:text-ivory hover:shadow-[0_0_20px_rgba(197,143,92,0.2)]'
-                }`}
-              >
-                {/* خط بازتاب نوری لبه شیشه */}
-                <span className="pointer-events-none absolute -top-1/2 left-0 right-0 h-full rounded-full bg-gradient-to-b from-white/20 to-transparent" />
-
-                <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 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>
@@ -94,7 +97,7 @@ export function FeaturedProjects() {
           </AnimatePresence>
         </div>
 
-        {/* دکمه مشاهده همه پروژه‌ها: کپسولی شیشه‌ای با گوی آیکون متحرک */}
+        {/* دکمه مشاهده همه پروژه‌ها */}
         {heading.cta_label && heading.cta_href && (
           <Reveal delay={0.1}>
             <div className="mt-12 flex justify-center">