six bug

blocks/feature214.tsx

@@ -10,7 +10,6 @@ import {
   ScanFace,
   TextQuote,
 } from "lucide-react";
-import { useRef } from "react";
 
 import {
   Card,
@@ -29,7 +28,8 @@ import { cn } from "@/lib/utils";
 
 interface CarouselCardItem {
   id: string;
-  video: string;
+  image: string;
+  imageAlt: string;
   Icon: LucideIcon;
   title: string;
   link: string;
@@ -39,7 +39,8 @@ interface CarouselCardItem {
 const CARDS: CarouselCardItem[] = [
   {
     id: "code-analysis",
-    video: "/block-media/shadcnblocks/block/video-1.mp4",
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
     Icon: Eye,
     title: "پروفایل ۳۶۰ درجه مشتری",
     link: "#",
@@ -48,7 +49,8 @@ const CARDS: CarouselCardItem[] = [
   },
   {
     id: "multi-language",
-    video: "/block-media/shadcnblocks/block/video-6.mp4",
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "نمای پایپ‌لاین فروش",
     Icon: Languages,
     title: "اتوماسیون مراحل فروش",
     link: "#",
@@ -57,7 +59,8 @@ const CARDS: CarouselCardItem[] = [
   },
   {
     id: "refactoring",
-    video: "/block-media/shadcnblocks/block/video-7-640_360_30fps.mp4",
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "پروفایل یکپارچه مشتری",
     Icon: AudioLines,
     title: "پیش‌بینی درآمد",
     link: "#",
@@ -66,7 +69,8 @@ const CARDS: CarouselCardItem[] = [
   },
   {
     id: "code-cleanup",
-    video: "/block-media/shadcnblocks/block/video-5.mp4",
+    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
     Icon: ListMinus,
     title: "یادآور پیگیری هوشمند",
     link: "#",
@@ -75,7 +79,8 @@ const CARDS: CarouselCardItem[] = [
   },
   {
     id: "security-scanner",
-    video: "/block-media/shadcnblocks/block/video-1.mp4",
+    image: "/block-media/shadcnblocks/block/placeholder-5.svg",
+    imageAlt: "نمای پایپ‌لاین فروش",
     Icon: ScanFace,
     title: "تقسیم خودکار سرنخ",
     link: "#",
@@ -84,7 +89,8 @@ const CARDS: CarouselCardItem[] = [
   },
   {
     id: "documentation",
-    video: "/block-media/shadcnblocks/block/video-6.mp4",
+    image: "/block-media/shadcnblocks/block/placeholder-6.svg",
+    imageAlt: "پروفایل یکپارچه مشتری",
     Icon: TextQuote,
     title: "گزارش عملکرد فروش",
     link: "#",
@@ -93,7 +99,8 @@ const CARDS: CarouselCardItem[] = [
   },
   {
     id: "code-suggestions",
-    video: "/block-media/shadcnblocks/block/video-7-640_360_30fps.mp4",
+    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
+    imageAlt: "داشبورد مدیریت ارتباط با مشتری",
     Icon: Captions,
     title: "مدیریت قرارداد",
     link: "#",
@@ -102,47 +109,35 @@ const CARDS: CarouselCardItem[] = [
   },
 ];
 
-const CarouselCard = ({ video, Icon, title, link, summary }: CarouselCardItem) => {
-  const videoRef = useRef<HTMLVideoElement | null>(null);
-
+const CarouselCard = ({
+  image,
+  imageAlt,
+  Icon,
+  title,
+  link,
+  summary,
+}: CarouselCardItem) => {
   return (
-    <a
-      href={link}
-      className="group block h-full"
-      onMouseEnter={() => {
-        if (videoRef.current) {
-          videoRef.current.play();
-        }
-      }}
-      onMouseLeave={() => {
-        if (videoRef.current) {
-          videoRef.current.pause();
-          videoRef.current.currentTime = 0;
-        }
-      }}
-    >
-      <Card className="min-h-[39.75rem] bg-muted p-8 shadow-none transition-all group-hover:shadow-md">
-        <CardContent className="p-0">
-          <div className="relative">
-            <div className="h-[20rem] w-full overflow-hidden rounded-[0.5rem]">
-              <video
-                src={video}
-                className="block size-full object-cover object-center"
-                ref={videoRef}
-                controls={false}
-                muted
-                aria-label={title}
+    <a href={link} className="group block h-full min-w-0">
+      <Card className="h-full min-w-0 gap-0 overflow-hidden rounded-xl border-0 bg-muted p-4 py-4! shadow-none ring-0 transition-all group-hover:shadow-md sm:p-6 lg:min-h-[39.75rem] lg:p-8">
+        <CardContent className="min-w-0 p-0">
+          <div className="relative min-w-0">
+            <div className="h-48 w-full min-w-0 overflow-hidden rounded-lg sm:h-56 lg:h-[20rem]">
+              <img
+                src={image}
+                alt={imageAlt}
+                className="block size-full max-w-full object-cover object-center"
               />
             </div>
-            <div className="absolute -start-2 -top-3 flex size-9 rounded-[0.5rem] bg-primary">
+            <div className="absolute -start-1 -top-2 flex size-8 rounded-lg bg-primary sm:-start-2 sm:-top-3 sm:size-9 sm:rounded-[0.5rem]">
               <Icon className="m-auto size-4 stroke-primary-foreground" />
             </div>
           </div>
-          <div className="mt-8 flex flex-col gap-2 text-start">
-            <CardTitle className="text-xl leading-[130%] font-normal tracking-[-0.48px] text-foreground">
+          <div className="mt-6 flex min-w-0 flex-col gap-2 text-start sm:mt-8">
+            <CardTitle className="text-lg leading-[130%] font-normal tracking-[-0.48px] text-pretty text-foreground sm:text-xl">
               {title}
             </CardTitle>
-            <CardDescription className="text-lg leading-[150%] tracking-[-0.36px] text-pretty">
+            <CardDescription className="text-sm leading-[150%] tracking-[-0.36px] text-pretty sm:text-base lg:text-lg">
               {summary}
             </CardDescription>
           </div>
@@ -158,36 +153,46 @@ interface Feature214Props {
 
 const Feature214 = ({ className }: Feature214Props) => {
   return (
-    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
-      <div className="container">
-        <div className="mx-auto mb-16 flex max-w-[47.5rem] flex-col gap-6">
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "w-full max-w-full overflow-x-hidden py-20 sm:py-32",
+        className,
+      )}
+    >
+      <div className="container min-w-0 px-4 sm:px-6">
+        <div className="mx-auto mb-10 flex max-w-[47.5rem] flex-col gap-4 sm:mb-16 sm:gap-6">
           <h2 className="text-center font-serif text-xl text-balance md:text-2xll xl:text-2xll">
             هر سرنخ را تا قرارداد دنبال کنید
           </h2>
-          <p className="text-center text-xl text-pretty">
-            پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر می‌رود.
+          <p className="text-center text-base text-pretty sm:text-lg md:text-xl">
+            پروفایل یکپارچه مشتری، تاریخچه تماس و وضعیت معامله را همزمان نشان
+            می‌دهد. تیم‌ها با دید مشترک، هماهنگ‌تر پیش می‌روند و نرخ تبدیل بالاتر
+            می‌رود.
           </p>
         </div>
+
         <Carousel
           opts={{
             align: "start",
             direction: "rtl",
           }}
-          className="w-full"
+          className="w-full min-w-0 max-w-full"
         >
-          <CarouselContent className="py-4">
+          <CarouselContent className="py-2 sm:py-4">
             {CARDS.map((item) => (
               <CarouselItem
                 key={item.id}
-                className="basis-full sm:basis-1/2 lg:basis-1/3 xl:basis-1/4"
+                className="min-w-0 basis-[85%] sm:basis-1/2 lg:basis-1/3 xl:basis-1/4"
               >
                 <CarouselCard {...item} />
               </CarouselItem>
             ))}
           </CarouselContent>
-          <div className="mt-8 flex w-full justify-end gap-4">
-            <CarouselPrevious className="static size-12" />
-            <CarouselNext className="static size-12" />
+          <div className="mt-6 flex w-full min-w-0 justify-center gap-3 sm:mt-8 sm:justify-end sm:gap-4">
+            <CarouselPrevious className="static size-10 translate-y-0 sm:size-12 rtl:rotate-180" />
+            <CarouselNext className="static size-10 translate-y-0 sm:size-12 rtl:rotate-180" />
           </div>
         </Carousel>
       </div>