fix some bug in some blocks

blocks/feature82.tsx

@@ -37,31 +37,35 @@ interface Feature82Props {
 
 const Feature82 = ({ className }: Feature82Props) => {
   return (
-    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
-      <div className="container">
-        <div className="grid place-items-center items-center gap-4 lg:grid-cols-5 lg:gap-16">
-          <h1 className="text-center text-xl font-semibold text-balance lg:col-span-2 lg:text-start lg:text-2xll">
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("relative w-full overflow-hidden py-32", className)}
+    >
+      <div className="container min-w-0">
+        <div className="grid min-w-0 place-items-center items-center gap-4 lg:grid-cols-5 lg:gap-16">
+          <h1 className="min-w-0 text-center text-xl font-semibold text-balance lg:col-span-2 lg:text-start lg:text-2xll">
             فرایندها را استاندارد و سریع کنید
           </h1>
-          <p className="text-center text-lg text-muted-foreground lg:col-span-2 lg:text-start">
+          <p className="min-w-0 text-center text-lg text-balance text-muted-foreground lg:col-span-2 lg:text-start">
             قوانین ساده تعریف کنید تا وظایف تکراری بدون دخالت دست انجام شود. تیم روی تصمیم‌های مهم تمرکز می‌کند و سرعت اجرا بالاتر می‌رود.
           </p>
-          <Button className="mx-auto w-fit lg:mx-0 lg:ms-auto">
+          <Button className="mx-auto h-auto max-w-full whitespace-normal text-balance lg:mx-0 lg:ms-auto">
             فرایندهای بین‌تیمی را در یک بوم بصری طراحی کنید. هر مرحله قابل ردیابی است و گلوگاه‌ها قبل از تأخیر جدی مشخص می‌شوند.
           </Button>
         </div>
         <Separator className="mt-8 mb-12" />
-        <ul className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4 lg:gap-20">
+        <ul className="grid min-w-0 grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4 lg:gap-20">
           {integrations.map((integration) => (
-            <li key={integration.title}>
-              <div>
+            <li key={integration.title} className="min-w-0">
+              <div className="min-w-0">
                 <img
                   src={integration.image}
                   alt={`لوگوی ${integration.title}`}
                   className="h-auto w-16"
                 />
                 <h3 className="my-2 text-xl font-bold">{integration.title}</h3>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-sm text-balance text-muted-foreground">
                   {integration.description}
                 </p>
               </div>
@@ -70,10 +74,10 @@ const Feature82 = ({ className }: Feature82Props) => {
         </ul>
         <a
           href="#"
-          className="mt-12 flex items-center justify-center gap-1 text-lg font-semibold underline"
+          className="mt-12 flex flex-wrap items-center justify-center gap-1 text-lg font-semibold underline"
         >
           اتوماسیون را در کل سازمان یکپارچه کنید
-          <ArrowRight className="h-auto w-4 rtl:rotate-180" />
+          <ArrowRight className="h-auto w-4 shrink-0 rtl:rotate-180" />
         </a>
       </div>
     </section>