six bug

blocks/feature181.tsx

@@ -1,53 +1,33 @@
 "use client";
 
-import {
-  ArrowRight,
-  BadgeCheck,
-  Clock,
-  Pyramid,
-  Sparkle,
-  Zap,
-} from "lucide-react";
+import { ArrowRight, Clock } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
-interface DataItem {
-  title: string;
-  description: string;
-  image: string;
-  icon: React.ReactNode;
-}
-
-const DATA: DataItem[] = [
+const DATA = [
   {
     title: "موجودی انبار",
     description:
       "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
-    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
-    icon: <Zap className="size-5" />,
+    duration: "۵ دقیقه",
   },
   {
     title: "بازگشت مشتری",
-    description:
-      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
-    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
-    icon: <Pyramid className="size-5" />,
+    description: "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
+    duration: "۵ دقیقه",
   },
   {
     title: "صفحه فرود",
     description:
       "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
-    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
-    icon: <Sparkle className="size-5" />,
+    duration: "۵ دقیقه",
   },
   {
     title: "گزارش فروش",
-    description:
-      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
-    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
-    icon: <BadgeCheck className="size-5" />,
+    description: "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
+    duration: "۵ دقیقه",
   },
 ];
 
@@ -57,40 +37,56 @@ interface Feature181Props {
 
 const Feature181 = ({ className }: Feature181Props) => {
   return (
-    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
-      <div className="container">
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "w-full max-w-full overflow-x-hidden py-32",
+        className,
+      )}
+    >
+      <div className="container min-w-0">
         <div className="text-start">
-          <h2 className="mb-6 text-3xl font-semibold text-balance lg:text-xl">
+          <h2 className="mb-6 text-3xl font-semibold text-balance md:text-4xl">
             فروش آنلاین را مقیاس‌پذیر کنید
           </h2>
-          <Button className="me-4 rounded-full">
+          <Button className="rounded-full">
             شروع کنید
             <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
           </Button>
         </div>
 
-        <div className="mt-12 grid md:grid-cols-2 lg:grid-cols-4">
+        <div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
           {DATA.map((feature, index) => (
             <div
               key={feature.title}
-              className="mt-0 flex flex-col border-s px-6 sm:mt-4 md:mt-6"
+              className={cn(
+                "flex min-w-0 flex-col px-4 py-8 sm:px-6 md:py-0 md:pt-6",
+                index < DATA.length - 1 && "border-b md:border-b-0",
+                "md:border-s",
+              )}
             >
-              <div className="relative">
-                <h1 className="mb-16 bg-linear-to-e from-white to-transparent bg-clip-text text-9xl">
+              <div className="relative min-w-0 overflow-hidden">
+                <p className="mb-10 text-6xl font-medium sm:mb-14 sm:text-8xl lg:mb-16 lg:text-9xl">
                   {(index + 1).toLocaleString("fa-IR", {
                     minimumIntegerDigits: 2,
                   })}
-                </h1>
-                <div className="absolute inset-0 bg-linear-to-e from-white to-transparent opacity-100" />
+                </p>
+                <div className="pointer-events-none absolute inset-0 bg-linear-to-e from-transparent to-background" />
               </div>
 
-              <p className="text-md mt-4 mb-2 font-semibold">{feature.title}</p>
-              <p className="text-md mb-6 text-pretty text-muted-foreground">
+              <p className="mt-2 mb-2 text-base font-semibold sm:mt-4">
+                {feature.title}
+              </p>
+              <p className="mb-6 text-sm text-pretty text-muted-foreground sm:text-base">
                 {feature.description}
               </p>
-              <Badge variant="outline" className="w-fit gap-2 py-2">
-                <Clock className="size-4" />
-                مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
+              <Badge
+                variant="outline"
+                className="h-auto w-fit max-w-full gap-2 py-2 whitespace-normal"
+              >
+                <Clock className="size-4 shrink-0" />
+                {feature.duration}
               </Badge>
             </div>
           ))}