six bug

blocks/feature149.tsx

@@ -9,55 +9,70 @@ interface Feature149Props {
 
 const Feature149 = ({ className }: Feature149Props) => {
   return (
-    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
-      <div className="container">
-        <div className="relative isolate flex flex-col md:flex-row md:gap-0">
+    <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="relative isolate flex w-full min-w-0 flex-col gap-3 md:flex-row md:gap-0">
           <img
             src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
             alt="دستیار هوش مصنوعی"
-            className="absolute top-0 start-0 z-[-1] h-full w-full rounded-2xl object-cover"
+            className="absolute inset-0 z-[-1] hidden size-full rounded-2xl object-cover md:block"
           />
 
-          <div className="group relative flex h-[300px] w-full cursor-pointer flex-col items-start gap-6 p-6 md:h-[600px] md:w-1/2 md:p-10 md:transition-[width] hover:md:w-2/3">
-            <div className="md:backdrop-blur-0 md:group-hover:backdrop-blur-0 absolute top-0 start-0 z-[-1] h-full w-full rounded-t-[20px] bg-linear-to-b from-black/40 to-black/30 backdrop-filter transition-all duration-500 ease-out group-hover:from-black/30 group-hover:to-black/20 group-hover:backdrop-blur-[2px] md:rounded-2xl md:from-black/40 md:to-black/30 md:transition-colors md:duration-300 group-hover:md:from-black/50 group-hover:md:to-black/40" />
+          <div className="group relative flex min-h-[320px] w-full min-w-0 cursor-pointer flex-col items-start justify-end gap-3 overflow-hidden rounded-2xl p-5 sm:min-h-[360px] sm:gap-4 sm:p-6 md:h-[600px] md:w-1/2 md:justify-start md:gap-6 md:p-10 md:transition-[width] hover:md:w-2/3">
+            <img
+              src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
+              alt=""
+              aria-hidden
+              className="absolute inset-0 z-[-2] size-full object-cover md:hidden"
+            />
+            <div className="absolute inset-0 z-[-1] rounded-2xl bg-linear-to-b from-black/40 to-black/50 backdrop-blur-[2px] transition-all duration-500 ease-out group-hover:from-black/30 group-hover:to-black/40 md:rounded-2xl md:from-black/40 md:to-black/30 md:backdrop-blur-0 md:transition-colors md:duration-300 group-hover:md:from-black/50 group-hover:md:to-black/40 md:group-hover:backdrop-blur-0" />
             <Button
               variant="outline"
-              className="rounded-full border-white/20 bg-background/10 text-white hover:bg-background/20"
+              className="h-auto max-w-full rounded-full border-white/20 bg-background/10 px-3 py-1.5 text-xs whitespace-normal text-white hover:bg-background/20 sm:text-sm"
             >
-              درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید.
+              دسته‌بندی خودکار
             </Button>
-            <h1 className="text-3xl font-bold text-white md:text-2xll">
+            <h2 className="max-w-full text-2xl font-bold text-balance break-words text-white sm:text-3xl md:text-2xll">
               با هوش مصنوعی سریع‌تر تصمیم بگیرید
-            </h1>
-            <p className="max-w-md text-start text-white/90">
-              کارهای تکراری را به AI بسپارید
+            </h2>
+            <p className="max-w-md text-start text-sm text-pretty break-words text-white/90 sm:text-base">
+              درخواست‌ها را خودکار دسته‌بندی کنید و به تیم مناسب بفرستید. کارهای
+              تکراری را به AI بسپارید.
             </p>
           </div>
 
-          <div className="relative hidden h-[600px] w-5 bg-background md:block">
+          <div className="relative hidden h-[600px] w-5 shrink-0 bg-background md:block">
             <div className="absolute top-0 start-[-40px] h-[40px] w-[40px] rounded-[1rem] shadow-[-10px_-10px_0_0_var(--background)]" />
             <div className="absolute top-0 end-[-40px] h-[40px] w-[40px] rounded-[1rem] shadow-[10px_-10px_0_0_var(--background)]" />
             <div className="absolute bottom-0 start-[-40px] h-[40px] w-[40px] rounded-[1rem] shadow-[-10px_10px_0_0_var(--background)]" />
             <div className="absolute end-[-40px] bottom-0 h-[40px] w-[40px] rounded-[1rem] shadow-[10px_10px_0_0_var(--background)]" />
           </div>
 
-          <div
-            className="group relative flex h-[300px] w-full cursor-pointer flex-col items-start gap-6 p-6 md:h-[600px] md:w-1/2 md:p-10 md:transition-[width] hover:md:w-2/3"
-            onClick={() => {
-              console.log("click");
-            }}
-          >
-            <div className="md:backdrop-blur-0 md:group-hover:backdrop-blur-0 absolute top-0 start-0 z-[-1] h-full w-full rounded-b-[20px] bg-linear-to-t from-black/40 to-black/30 backdrop-filter transition-all duration-500 ease-out group-hover:from-black/30 group-hover:to-black/20 group-hover:backdrop-blur-[2px] md:rounded-2xl md:from-black/40 md:to-black/30 md:transition-colors md:duration-300 group-hover:md:from-black/50 group-hover:md:to-black/40" />
+          <div className="group relative flex min-h-[320px] w-full min-w-0 cursor-pointer flex-col items-start justify-end gap-3 overflow-hidden rounded-2xl p-5 sm:min-h-[360px] sm:gap-4 sm:p-6 md:h-[600px] md:w-1/2 md:justify-start md:gap-6 md:p-10 md:transition-[width] hover:md:w-2/3">
+            <img
+              src="/block-media/shadcnblocks/block/photos/simone-hutsch-9jsQcDsxyqA-unsplash.jpg"
+              alt=""
+              aria-hidden
+              className="absolute inset-0 z-[-2] size-full object-cover object-[center_70%] md:hidden"
+            />
+            <div className="absolute inset-0 z-[-1] rounded-2xl bg-linear-to-t from-black/50 to-black/40 backdrop-blur-[2px] transition-all duration-500 ease-out group-hover:from-black/40 group-hover:to-black/30 md:rounded-2xl md:from-black/40 md:to-black/30 md:backdrop-blur-0 md:transition-colors md:duration-300 group-hover:md:from-black/50 group-hover:md:to-black/40 md:group-hover:backdrop-blur-0" />
             <Button
               variant="outline"
-              className="rounded-full border-white/20 bg-background/10 text-white hover:bg-background/20"
+              className="h-auto max-w-full rounded-full border-white/20 bg-background/10 px-3 py-1.5 text-xs whitespace-normal text-white hover:bg-background/20 sm:text-sm"
             >
               اتوماسیون AI
             </Button>
-            <h1 className="text-3xl font-bold text-white md:text-2xll">
+            <h2 className="max-w-full text-2xl font-bold text-balance break-words text-white sm:text-3xl md:text-2xll">
               پیشنهادهایی که واقعاً مفیدند
-            </h1>
-            <p className="max-w-md text-start text-white/90">
+            </h2>
+            <p className="max-w-md text-start text-sm text-pretty break-words text-white/90 sm:text-base">
               داده را به بینش عملی تبدیل کنید
             </p>
           </div>