six bug

blocks/feature192.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { type SVGProps, useId } from "react";
-import { useState } from "react";
+import { type SVGProps, useId, useState } from "react";
 
 import {
   Accordion,
@@ -9,60 +8,67 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { cn } from "@/lib/utils";
 
 const FEATURES = [
   {
     id: "move-money",
     title: "طبقه‌بندی خودکار",
-    description:
-      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+    description: "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
     image: "/block-media/shadcnblocks/block/placeholder-1.svg",
     imageAlt: "دستیار هوش مصنوعی",
   },
   {
     id: "card-program",
     title: "پیش‌بینی ریزش",
-    description:
-      "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
+    description: "مشتریان در معرض ریزش را زودتر شناسایی کنید.",
     image: "/block-media/shadcnblocks/block/placeholder-2.svg",
     imageAlt: "پیشنهادهای هوشمند",
   },
   {
     id: "lend-money",
     title: "جستجوی معنایی",
-    description:
-      "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
+    description: "متن‌های طولانی را در چند ثانیه به نکات کلیدی تبدیل کنید.",
     image: "/block-media/shadcnblocks/block/placeholder-3.svg",
     imageAlt: "تحلیل با AI",
   },
   {
     id: "data-analytics",
     title: "تولید محتوا",
-    description:
-      "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
+    description: "بهترین پاسخ را بر اساس زمینه مکالمه پیشنهاد دهید.",
     image: "/block-media/shadcnblocks/block/placeholder-4.svg",
     imageAlt: "دستیار هوش مصنوعی",
   },
   {
     id: "compliance",
     title: "تحلیل احساس",
-    description:
-      "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
+    description: "درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.",
     image: "/block-media/shadcnblocks/block/placeholder-5.svg",
     imageAlt: "پیشنهادهای هوشمند",
   },
 ];
 
-export function Feature192() {
+interface Feature192Props {
+  className?: string;
+}
+
+const Feature192 = ({ className }: Feature192Props) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   return (
-    <section dir="rtl" lang="fa" className="container max-w-5xl py-32">
-      <div className="relative overflow-hidden rounded-3xl border bg-linear-to-bl from-gradient-1/20 to-transparent rtl:bg-linear-to-br py-5 sm:py-6 lg:py-8">
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "container w-full min-w-0 max-w-5xl overflow-x-hidden py-32",
+        className,
+      )}
+    >
+      <div className="relative overflow-hidden rounded-3xl border bg-linear-to-bl from-gradient-1/20 to-transparent py-5 rtl:bg-linear-to-br sm:py-6 lg:py-8">
         <div className="absolute inset-0 z-[-1]">
           <PlusSigns className="h-full w-full text-foreground/[0.05]" />
         </div>
-        <div className="sm:px-6 lg:px-8">
+        <div className="min-w-0 sm:px-6 lg:px-8">
           <div className="px-5 text-start sm:px-0">
             <h3 className="font-mono text-sm font-semibold text-accent-foreground">
               دستیار گفتگو
@@ -71,10 +77,10 @@ export function Feature192() {
               با هوش مصنوعی سریع‌تر تصمیم بگیرید
             </h2>
           </div>
-          <div className="mt-10 flex gap-12 overflow-hidden sm:mt-16 lg:mt-20">
+          <div className="mt-10 flex min-w-0 gap-8 overflow-hidden sm:mt-16 sm:gap-12 lg:mt-20">
             <Accordion
               type="single"
-              className="flex-1"
+              className="min-w-0 flex-1"
               defaultValue="0"
               onValueChange={(value) => setSelectedIndex(Number(value))}
             >
@@ -85,7 +91,7 @@ export function Feature192() {
                   className="border-black/20 dark:border-white/20"
                 >
                   <AccordionTrigger className="px-5 text-start hover:no-underline sm:px-0">
-                    <span className="text-xl font-bold opacity-80">
+                    <span className="text-lg font-bold opacity-80 sm:text-xl">
                       {feature.title}
                     </span>
                   </AccordionTrigger>
@@ -93,22 +99,22 @@ export function Feature192() {
                     <p className="px-5 text-pretty leading-relaxed font-medium text-muted-foreground sm:px-0">
                       {feature.description}
                     </p>
-                    <div className="relative mt-4 translate-x-5 rtl:-translate-x-5 sm:hidden">
+                    <div className="mt-4 overflow-hidden ps-5 sm:hidden">
                       <img
                         src={feature.image}
                         alt={feature.imageAlt}
-                        className="h-[240px] w-full rounded-2xl object-cover shadow-lg"
+                        className="h-[200px] w-full max-w-full rounded-2xl object-cover shadow-lg sm:h-[240px]"
                       />
                     </div>
                   </AccordionContent>
                 </AccordionItem>
               ))}
             </Accordion>
-            <div className="relative hidden sm:block sm:flex-1">
+            <div className="relative hidden min-w-0 flex-1 sm:block">
               <img
                 src={FEATURES[selectedIndex].image}
                 alt={FEATURES[selectedIndex].imageAlt}
-                className="rounded-2xl object-cover shadow-lg"
+                className="h-auto w-full max-w-full rounded-2xl object-cover shadow-lg"
               />
             </div>
           </div>
@@ -116,7 +122,7 @@ export function Feature192() {
       </div>
     </section>
   );
-}
+};
 
 interface PlusSignsProps extends SVGProps<SVGSVGElement> {
   className?: string;
@@ -162,3 +168,5 @@ const PlusSigns = ({ className, ...props }: PlusSignsProps) => {
     </svg>
   );
 };
+
+export { Feature192 };