From d5488386ff53fb00ee6e3a015299cd8de64e092f Mon Sep 17 00:00:00 2001
From: "mr.sabri" <mohammadrezasabri029@gmail.com>
Date: Sat, 25 Jul 2026 09:13:00 +0330
Subject: [PATCH] fix bug in feature 261

---
 blocks/feature261.tsx | 82 ++++++++++++++++++++-----------------------
 1 file changed, 38 insertions(+), 44 deletions(-)

diff --git a/blocks/feature261.tsx b/blocks/feature261.tsx
index a5a29ad..325b60b 100644
--- a/blocks/feature261.tsx
+++ b/blocks/feature261.tsx
@@ -14,18 +14,18 @@ interface Feature261Props {
 const Feature261 = ({ className }: Feature261Props) => {
   return (
     <section dir="rtl" lang="fa" className={cn("py-32", className)}>
-      <div className="container">
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-6 lg:grid-cols-12">
-          <div className="relative h-60 overflow-hidden rounded-3xl md:col-span-2 md:row-span-2 md:h-[400px] lg:col-span-4 lg:h-full">
+      <div className="container min-w-0">
+        <div className="grid min-w-0 grid-cols-1 gap-4 md:grid-cols-6 lg:grid-cols-12">
+          <div className="relative h-60 min-w-0 overflow-hidden rounded-3xl md:col-span-2 md:row-span-2 md:h-[400px] lg:col-span-4 lg:h-full">
             <img
-              src="/block-media/shadcnblocks/block/photos/Minimalist Concrete Wall with Shadows.jpeg"
+              src="/block-media/shadcnblocks/block/photos/vasilis-karkalas-qOaeVSKyhhE-unsplash.jpg"
               alt="گزارش مالی یکپارچه"
               className="absolute inset-0 size-full object-cover"
             />
             <div className="absolute inset-0" />
-            <div className="absolute start-6 bottom-6 z-10 text-white">
-              <p className="text-lg font-medium text-balance">
-                گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+            <div className="absolute inset-x-6 bottom-6 z-10 max-w-full text-white">
+              <p className="text-lg leading-snug font-medium text-balance break-words">
+                گزارش یکپارچه، سهم هر بخش از سودآوری را شفاف می‌کند.
               </p>
             </div>
             <div className="absolute end-6 top-6 z-10">
@@ -35,36 +35,34 @@ const Feature261 = ({ className }: Feature261Props) => {
             </div>
           </div>
 
-          <div className="relative h-60 overflow-hidden rounded-3xl border md:col-span-2 md:row-span-2 md:h-[400px] lg:col-span-4 lg:h-full">
+          <div className="relative h-60 min-w-0 overflow-hidden rounded-3xl border md:col-span-2 md:row-span-2 md:h-[400px] lg:col-span-4 lg:h-full">
             <img
               src="/block-media/shadcnblocks/block/placeholder-1.svg"
               alt="داشبورد ERP"
               className="absolute inset-0 size-full object-cover"
             />
-            <div className="absolute start-6 end-6 bottom-6 z-10 text-start">
-              <h2 className="text-sm leading-tight font-medium text-balance md:text-base lg:text-xl">
+            <div className="absolute inset-x-6 bottom-6 z-10 max-w-full text-start">
+              <h2 className="text-sm leading-snug font-medium text-balance break-words md:text-base lg:text-xl">
                 عملیات سازمان را یکپارچه کنید
               </h2>
             </div>
           </div>
 
-          <Card className="col-span-1 rounded-3xl md:col-span-2 md:row-span-1 md:h-[192px] lg:col-span-2">
-            <CardContent className="flex h-full flex-col justify-center p-4 text-start md:p-6">
-              <div className="mb-2 text-xl font-bold md:text-xl lg:text-2xll">
+          <Card className="col-span-1 min-w-0 overflow-hidden rounded-3xl py-0 md:col-span-2 md:row-span-1 md:h-[192px] lg:col-span-2">
+            <CardContent className="flex h-full min-w-0 flex-col justify-center gap-2 p-4 text-start md:p-5">
+              <div className="text-xl font-bold md:text-xl lg:text-2xll">
                 ۹۵
                 <span className="align-top text-xl md:text-xl lg:text-3xl">
                   ٪
                 </span>
               </div>
-              <p className="text-sm leading-tight text-pretty md:text-sm">
-                مالی، انبار، خرید و فروش در یک پلتفرم به هم متصل می‌شود. مدیریت با دید end-to-end، سریع‌تر تصمیم می‌گیرد.
-                <br />
-                گردش سند و تأیید چندمرحله‌ای، کنترل داخلی را تقویت می‌کند و خطا را قبل از ثبت نهایی کاهش می‌دهد.
+              <p className="line-clamp-4 text-sm leading-snug text-pretty break-words text-muted-foreground">
+                مالی، انبار، خرید و فروش در یک پلتفرم؛ تصمیم‌گیری سریع‌تر با دید end-to-end.
               </p>
             </CardContent>
           </Card>
 
-          <div className="relative col-span-1 h-60 overflow-hidden rounded-3xl border md:col-span-2 md:row-span-1 md:h-[192px] lg:col-span-2">
+          <div className="relative col-span-1 h-60 min-w-0 overflow-hidden rounded-3xl border md:col-span-2 md:row-span-1 md:h-[192px] lg:col-span-2">
             <img
               src="/block-media/shadcnblocks/block/placeholder-2.svg"
               alt="مدیریت عملیات"
@@ -72,25 +70,23 @@ const Feature261 = ({ className }: Feature261Props) => {
             />
           </div>
 
-          <Card className="col-span-1 rounded-3xl bg-muted md:col-span-4 md:row-span-1 md:h-[300px] lg:col-span-4">
-            <CardContent className="h-full p-4 text-start md:p-5">
-              <div className="flex h-full flex-col justify-end">
-                <div className="space-y-2">
-                  <div className="text-xl font-normal md:text-2xll lg:text-2xll">
-                    یکپارچگی
-                  </div>
-                  <div className="text-muted-foreground">
-                    گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
-                  </div>
-                  <Button>مالی، انبار، خرید و فروش در یک پلتفرم به هم متصل می‌شود. مدیریت با دید end-to-end، سریع‌تر تصمیم می‌گیرد.</Button>
+          <Card className="col-span-1 min-w-0 overflow-hidden rounded-3xl bg-muted py-0 md:col-span-4 md:row-span-1 md:h-[300px] lg:col-span-4">
+            <CardContent className="flex h-full min-w-0 flex-col justify-end gap-3 p-4 text-start md:p-5">
+              <div className="min-w-0 space-y-2">
+                <div className="text-xl font-normal md:text-2xll">
+                  یکپارچگی
                 </div>
+                <p className="line-clamp-3 text-sm leading-snug text-pretty break-words text-muted-foreground md:text-base">
+                  ببینید کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+                </p>
+                <Button className="max-w-full">مشاهده گزارش‌ها</Button>
               </div>
             </CardContent>
           </Card>
 
-          <Card className="col-span-1 rounded-3xl md:col-span-2 md:row-span-1 md:h-[300px] lg:col-span-3">
-            <CardContent className="flex h-full flex-col justify-center p-4 text-start md:p-5">
-              <div className="mb-3">
+          <Card className="col-span-1 min-w-0 overflow-hidden rounded-3xl py-0 md:col-span-2 md:row-span-1 md:h-[300px] lg:col-span-3">
+            <CardContent className="flex h-full min-w-0 flex-col justify-center gap-3 p-4 text-start md:p-5">
+              <div>
                 <span className="text-xl font-bold md:text-3xl lg:text-2xll">
                   ERP
                 </span>
@@ -98,8 +94,8 @@ const Feature261 = ({ className }: Feature261Props) => {
                   +
                 </span>
               </div>
-              <p className="mb-4 text-sm md:text-sm">ERP</p>
-              <div className="flex -space-x-2 rtl:space-x-reverse">
+              <p className="text-sm text-muted-foreground">تیم عملیات</p>
+              <div className="flex min-w-0 flex-wrap -space-x-2 rtl:space-x-reverse">
                 {AVATAR_IDS.map((id) => (
                   <Avatar
                     key={id}
@@ -116,7 +112,7 @@ const Feature261 = ({ className }: Feature261Props) => {
             </CardContent>
           </Card>
 
-          <Card className="relative col-span-1 h-60 overflow-hidden rounded-3xl md:col-span-3 md:row-span-1 md:h-[300px] lg:col-span-5">
+          <Card className="relative col-span-1 h-60 min-w-0 overflow-hidden rounded-3xl py-0 md:col-span-3 md:row-span-1 md:h-[300px] lg:col-span-5">
             <img
               src="/block-media/shadcnblocks/block/placeholder-3.svg"
               alt="گزارش مالی یکپارچه"
@@ -124,29 +120,27 @@ const Feature261 = ({ className }: Feature261Props) => {
             />
           </Card>
 
-          <Card className="relative col-span-1 h-60 overflow-hidden rounded-3xl md:col-span-3 md:row-span-1 md:h-[300px] lg:col-span-4">
+          <Card className="relative col-span-1 h-60 min-w-0 overflow-hidden rounded-3xl py-0 md:col-span-3 md:row-span-1 md:h-[300px] lg:col-span-4">
             <img
-              src="/block-media/shadcnblocks/block/photos/Geometric Staircase and Concrete Wall.jpeg"
+              src="/block-media/shadcnblocks/block/photos/studio-republic-fotKKqWNMQ4-unsplash.jpg"
               alt="داشبورد ERP"
               className="absolute inset-0 size-full object-cover"
             />
             <div className="absolute inset-0 bg-linear-to-r from-black/60 via-black/30 to-transparent rtl:bg-linear-to-l" />
             <div className="absolute inset-0 z-10 flex items-center justify-start p-4 md:p-6">
-              <div className="text-start text-white">
+              <div className="min-w-0 max-w-full text-start text-white">
                 <div className="mb-2 flex items-center gap-2 md:gap-3">
-                  <div className="flex size-6 items-center justify-center rounded-full bg-white/20 md:size-7">
+                  <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-white/20 md:size-7">
                     <Clock className="size-3 md:size-4" />
                   </div>
                   <span className="text-base font-semibold md:text-lg">
                     ERP
                   </span>
                 </div>
-                <p className="text-sm text-pretty opacity-90 md:text-sm">
-                  گردش سند و تأیید چندمرحله‌ای، کنترل داخلی را تقویت می‌کند و خطا را قبل از ثبت نهایی کاهش می‌دهد.
+                <p className="line-clamp-4 text-sm leading-snug text-pretty break-words opacity-90">
+                  گردش سند و تأیید چندمرحله‌ای، کنترل داخلی را تقویت می‌کند.
                   <br />
-                  <span className="text-sm font-semibold md:text-sm">
-                    از خرید تا فروش در یک سیستم
-                  </span>
+                  <span className="font-semibold">از خرید تا فروش در یک سیستم</span>
                 </p>
               </div>
             </div>