six bug

blocks/feature97.tsx

@@ -36,27 +36,40 @@ interface Feature97Props {
 
 const Feature97 = ({ className }: Feature97Props) => {
   return (
-    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
-      <div className="container">
-        <div className="mx-auto flex max-w-xl flex-col gap-6 text-center">
-          <h2 className="text-xl font-semibold">فرایندها را استاندارد و سریع کنید</h2>
-          <p className="text-lg">
+    <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 flex w-full min-w-0 max-w-xl flex-col gap-6 text-center">
+          <h2 className="max-w-full text-xl font-semibold text-balance break-words">
+            فرایندها را استاندارد و سریع کنید
+          </h2>
+          <p className="max-w-full text-lg text-pretty break-words">
             اتوماسیون را در کل سازمان یکپارچه کنید
           </p>
-          <div className="flex flex-col justify-center gap-2 sm:flex-row">
-            <Button variant="outline">فرایند هوشمند</Button>
-            <Button>
-              <Plus className="ms-2 h-auto w-4" />
-              قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
+          <div className="flex w-full min-w-0 flex-col justify-center gap-2 sm:flex-row sm:flex-wrap sm:items-start">
+            <Button variant="outline" className="w-full shrink-0 sm:w-auto">
+              فرایند هوشمند
+            </Button>
+            <Button className="h-auto min-w-0 max-w-full whitespace-normal px-4 py-2 text-start text-pretty break-words sm:flex-1">
+              <Plus className="ms-2 size-4 shrink-0 self-start" />
+              <span className="min-w-0">
+                قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود.
+                تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
+              </span>
             </Button>
           </div>
         </div>
-        <div className="mx-auto mt-20 grid max-w-5xl gap-20 md:grid-cols-2">
+        <div className="mx-auto mt-20 grid w-full min-w-0 max-w-5xl gap-12 md:grid-cols-2 md:gap-20">
           {highlights.map((item) => (
-            <div key={item.title} className="text-center">
-              <item.icon className="mx-auto h-auto w-7" />
-              <h3 className="mt-4 mb-2 text-xl font-semibold">{item.title}</h3>
-              <p>{item.description}</p>
+            <div key={item.title} className="min-w-0 max-w-full text-center">
+              <item.icon className="mx-auto size-7" />
+              <h3 className="mt-4 mb-2 text-xl font-semibold break-words">
+                {item.title}
+              </h3>
+              <p className="text-pretty break-words">{item.description}</p>
             </div>
           ))}
         </div>