some edit

blocks/feature242.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronLeft, ChevronRight, Plus } from "lucide-react";
+import { ChevronRight, Plus } from "lucide-react";
 import React from "react";
 
 import { Button } from "@/components/ui/button";
@@ -9,6 +9,8 @@ import {
   Carousel,
   CarouselContent,
   CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
 } from "@/components/ui/carousel";
 import { cn } from "@/lib/utils";
 
@@ -149,32 +151,9 @@ const Feature242 = ({ className }: Feature242Props) => {
                 </span>
               </div>
 
-              {/*
-                Embla RTL: scrollNext/scrollPrev are index-based, so default
-                ChevronLeft→prev / ChevronRight→next feels reversed visually.
-                Match arrow direction to movement by swapping handlers.
-              */}
               <div className="relative z-10 flex gap-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="icon"
-                  className="size-10 rounded-full"
-                  onClick={() => api?.scrollNext()}
-                  aria-label="اسلاید بعدی"
-                >
-                  <ChevronLeft className="size-4" />
-                </Button>
-                <Button
-                  type="button"
-                  variant="default"
-                  size="icon"
-                  className="size-10 rounded-full"
-                  onClick={() => api?.scrollPrev()}
-                  aria-label="اسلاید قبلی"
-                >
-                  <ChevronRight className="size-4" />
-                </Button>
+                <CarouselPrevious className="static size-10 translate-y-0 rtl:rotate-180" />
+                <CarouselNext className="static size-10 translate-y-0 rtl:rotate-180" />
               </div>
             </div>
           </Carousel>