some edit

blocks/feature216.tsx

@@ -153,7 +153,6 @@ const Feature216 = ({ className }: Feature216Props) => {
   const [buttonPosition, setButtonPosition] = useState<number>(0);
   // Rightmost tab in RTL (`justify-start`) is the first item.
   const [tabValue, setTabValue] = useState<TabValue>(TAB_ITEMS[0].value);
-  const triggerRefs = useRef<HTMLButtonElement[]>([]);
   const imageRef = useRef<HTMLDivElement | null>(null);
 
   const updateBottom = () => {
@@ -178,10 +177,6 @@ const Feature216 = ({ className }: Feature216Props) => {
   };
 
   const handleTabNavigation = (direction: "next" | "prev") => {
-    triggerRefs.current.forEach((ref) => {
-      ref.classList.add("grayscale-[1]", "opacity-[0.2]");
-    });
-
     const currentIndex = getCurrentTabIndex();
     if (currentIndex === -1) return;
 
@@ -207,21 +202,19 @@ const Feature216 = ({ className }: Feature216Props) => {
         <h2 className="mb-10 text-center text-3xl font-light text-balance md:text-xl">
           شاخص‌های کلیدی را یکجا ببینید
         </h2>
-        <Tabs value={tabValue} onValueChange={onValueChange} className="w-full">
+        <Tabs
+          dir="rtl"
+          value={tabValue}
+          onValueChange={onValueChange}
+          className="w-full"
+        >
           <TabsList className="hidden !h-auto w-full !justify-start items-end gap-12 bg-transparent pb-10 xl:flex">
             {TAB_ITEMS.map((trigger, index) => {
               const Icon = trigger.icon;
 
               return (
                 <TabsTrigger
-                  ref={(el) => {
-                    if (el) {
-                      triggerRefs.current[index] = el;
-                    } else {
-                      delete triggerRefs.current[index];
-                    }
-                  }}
-                  className="flex !h-auto flex-col items-center gap-5 !border-none !bg-transparent p-0 opacity-[0.2] !shadow-none grayscale-[1] hover:!bg-transparent hover:opacity-[0.5] hover:grayscale-[0] data-[state=active]:!bg-transparent data-[state=active]:opacity-100 data-[state=active]:!shadow-none data-[state=active]:grayscale-0 dark:!bg-transparent dark:data-[state=active]:!bg-transparent"
+                  className="flex !h-auto !flex-none shrink-0 flex-col items-center gap-5 !border-none !bg-transparent p-0 opacity-[0.2] !shadow-none grayscale hover:!bg-transparent hover:opacity-50 hover:grayscale-0 data-[state=active]:!bg-transparent data-[state=active]:opacity-100 data-[state=active]:!shadow-none data-[state=active]:grayscale-0 dark:!bg-transparent dark:data-[state=active]:!bg-transparent"
                   key={trigger.id}
                   value={trigger.value}
                   data-index={index}