six bug

blocks/feature148.tsx

@@ -7,8 +7,7 @@ import { cn } from "@/lib/utils";
 const utilities = [
   {
     title: "تاریخچه مشتری",
-    description:
-      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+    description: "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
     image: "/block-media/shadcnblocks/block/placeholder-1.svg",
     imageAlt: "مدیریت تیکت",
   },
@@ -28,15 +27,13 @@ const utilities = [
   },
   {
     title: "پایگاه دانش",
-    description:
-      "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
+    description: "مشتریان و تیم با مقالات راهنما سریع‌تر به پاسخ می‌رسند.",
     image: "/block-media/shadcnblocks/block/placeholder-4.svg",
     imageAlt: "مدیریت تیکت",
   },
   {
     title: "پاسخ آماده",
-    description:
-      "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
+    description: "پاسخ‌های پرتکرار را ذخیره کنید و با یک کلیک ارسال کنید.",
     image: "/block-media/shadcnblocks/block/placeholder-5.svg",
     imageAlt: "داشبورد رضایت",
   },
@@ -55,30 +52,46 @@ interface Feature148Props {
 
 const Feature148 = ({ className }: Feature148Props) => {
   return (
-    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
-      <div className="container">
-        <div className="m-auto mb-24 max-w-xl text-center">
-          <h2 className="mb-6 text-3xl font-semibold lg:text-2xll">
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "relative w-full max-w-full overflow-hidden py-32",
+        className,
+      )}
+    >
+      <div className="container min-w-0 max-w-full">
+        <div className="mx-auto mb-16 flex w-full min-w-0 max-w-xl flex-col items-center text-center md:mb-24">
+          <h2 className="mb-6 max-w-full text-3xl font-semibold text-balance break-words lg:text-2xll">
             زمان حل مسئله را کوتاه کنید
           </h2>
-          <p className="m-auto max-w-3xl text-lg lg:text-xl">
+          <p className="mx-auto max-w-full text-lg text-pretty break-words lg:text-xl">
             کیفیت پاسخگویی را قابل اندازه‌گیری کنید
           </p>
-          <Button asChild className="mt-8 rounded-xl" size="lg">
-            <a href="#">تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار می‌گیرند.</a>
+          <p className="mt-4 max-w-full text-sm text-pretty break-words text-muted-foreground md:text-base">
+            تیکت‌های مهم بر اساس قرارداد یا شدت مسئله در صف بالاتر قرار
+            می‌گیرند.
+          </p>
+          <Button asChild className="mt-8 max-w-full rounded-xl" size="lg">
+            <a href="#">مشاهده امکانات</a>
           </Button>
         </div>
-        <div className="mt-11 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <div className="mt-11 grid w-full min-w-0 grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           {utilities.map((utility) => (
-            <Card key={utility.title} className="border-0 pt-0">
+            <Card
+              key={utility.title}
+              className="min-w-0 max-w-full overflow-hidden border-0 pt-0"
+            >
               <img
                 src={utility.image}
                 alt={utility.imageAlt}
-                className="aspect-video w-full rounded-t-xl object-cover"
+                className="aspect-video w-full max-w-full rounded-t-xl object-cover"
               />
-              <div className="p-5 text-start">
-                <p className="mb-1 font-medium">{utility.title}</p>
-                <p className="text-muted-foreground">{utility.description}</p>
+              <div className="min-w-0 p-5 text-start">
+                <p className="mb-1 font-medium break-words">{utility.title}</p>
+                <p className="text-pretty break-words text-muted-foreground">
+                  {utility.description}
+                </p>
               </div>
             </Card>
           ))}