six bug

blocks/feature215a.tsx

@@ -11,7 +11,6 @@ import {
 } from "lucide-react";
 import { useRef } from "react";
 
-import { AspectRatio } from "@/components/ui/aspect-ratio";
 import {
   Card,
   CardContent,
@@ -23,6 +22,7 @@ import { cn } from "@/lib/utils";
 interface GridCardItem {
   id: string;
   video: string;
+  poster: string;
   Icon: LucideIcon;
   title: string;
   link: string;
@@ -33,15 +33,16 @@ const CARDS: GridCardItem[] = [
   {
     id: "design-system",
     video: "/block-media/shadcnblocks/block/video-1.mp4",
+    poster: "/block-media/shadcnblocks/block/placeholder-1.svg",
     Icon: Eye,
     title: "ردیابی UTM",
     link: "#",
-    summary:
-      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
+    summary: "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
   },
   {
     id: "framework-agnostic",
     video: "/block-media/shadcnblocks/block/video-2.mp4",
+    poster: "/block-media/shadcnblocks/block/placeholder-2.svg",
     Icon: Languages,
     title: "گزارش ROI",
     link: "#",
@@ -50,7 +51,8 @@ const CARDS: GridCardItem[] = [
   },
   {
     id: "interactive",
-    video: "/block-media/shadcnblocks/block/video-3.mp4",
+    video: "/block-media/shadcnblocks/block/landscape.mp4",
+    poster: "/block-media/shadcnblocks/block/placeholder-3.svg",
     Icon: AudioLines,
     title: "مدیریت کمپین",
     link: "#",
@@ -59,7 +61,8 @@ const CARDS: GridCardItem[] = [
   },
   {
     id: "minimal-setup",
-    video: "/block-media/shadcnblocks/block/video-4.mp4",
+    video: "/block-media/shadcnblocks/block/video-1.mp4",
+    poster: "/block-media/shadcnblocks/block/placeholder-4.svg",
     Icon: ListMinus,
     title: "سگمنت‌بندی مخاطب",
     link: "#",
@@ -68,35 +71,40 @@ const CARDS: GridCardItem[] = [
   },
   {
     id: "accessibility",
-    video: "/block-media/shadcnblocks/block/video-5.mp4",
+    video: "/block-media/shadcnblocks/block/video-2.mp4",
+    poster: "/block-media/shadcnblocks/block/placeholder-5.svg",
     Icon: ScanFace,
     title: "تحلیل کانال",
     link: "#",
-    summary:
-      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
+    summary: "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
   },
   {
     id: "documentation",
-    video: "/block-media/shadcnblocks/block/video-6.mp4",
+    video: "/block-media/shadcnblocks/block/landscape.mp4",
+    poster: "/block-media/shadcnblocks/block/placeholder-6.svg",
     Icon: TextQuote,
     title: "اتوماسیون ایمیل",
     link: "#",
-    summary:
-      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
+    summary: "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
   },
 ];
 
-const GridCard = ({ video, Icon, title, link, summary }: GridCardItem) => {
+const GridCard = ({
+  video,
+  poster,
+  Icon,
+  title,
+  link,
+  summary,
+}: GridCardItem) => {
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
   return (
     <a
       href={link}
-      className="group block"
+      className="group block min-w-0"
       onMouseEnter={() => {
-        if (videoRef.current) {
-          videoRef.current.play();
-        }
+        void videoRef.current?.play();
       }}
       onMouseLeave={() => {
         if (videoRef.current) {
@@ -105,22 +113,26 @@ const GridCard = ({ video, Icon, title, link, summary }: GridCardItem) => {
         }
       }}
     >
-      <Card className="h-full bg-muted transition-all duration-200 hover:shadow-lg">
-        <CardContent>
-          <div className="relative mb-4">
-            <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-md">
+      <Card className="h-full min-w-0 gap-0 overflow-hidden border-0 bg-muted py-0! shadow-none ring-0 transition-all duration-200 hover:shadow-lg">
+        <CardContent className="min-w-0 p-4 sm:p-6">
+          <div className="relative mb-4 min-w-0">
+            <div className="aspect-video w-full overflow-hidden rounded-md bg-background">
               <video
-                src={video}
-                className="block size-full object-cover object-center"
                 ref={videoRef}
+                src={video}
+                poster={poster}
+                className="block size-full max-w-full object-cover object-center"
                 controls={false}
                 muted
+                loop
+                playsInline
+                preload="metadata"
                 aria-label={title}
               />
-            </AspectRatio>
+            </div>
           </div>
-          <div className="flex flex-col gap-2 text-start">
-            <CardTitle className="flex items-center gap-2 text-lg font-medium text-foreground">
+          <div className="flex min-w-0 flex-col gap-2 text-start">
+            <CardTitle className="flex items-center gap-2 text-lg font-medium text-pretty text-foreground">
               <Icon className="size-6 shrink-0 rounded-sm bg-primary stroke-primary-foreground p-1" />
               {title}
             </CardTitle>
@@ -140,17 +152,26 @@ interface Feature215aProps {
 
 const Feature215a = ({ className }: Feature215aProps) => {
   return (
-    <section dir="rtl" lang="fa" className={cn("py-24", className)}>
-      <div className="container">
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "w-full max-w-full overflow-x-hidden py-24",
+        className,
+      )}
+    >
+      <div className="container min-w-0 px-4 sm:px-6">
         <div className="mx-auto mb-16 flex max-w-[47.5rem] flex-col gap-4 text-center">
           <h2 className="text-3xl font-bold text-balance xl:text-2xll">
             کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
           </h2>
           <p className="text-lg text-pretty text-muted-foreground">
-            کمپین‌ها، محتوا و عملکرد کانال‌ها در یک پنل واحد دیده می‌شود. تیم بازاریابی سریع‌تر تست می‌کند، بهینه می‌کند و ROI هر فعالیت را شفاف گزارش می‌دهد.
+            کمپین‌ها، محتوا و عملکرد کانال‌ها در یک پنل واحد دیده می‌شود. تیم
+            بازاریابی سریع‌تر تست می‌کند، بهینه می‌کند و ROI هر فعالیت را شفاف
+            گزارش می‌دهد.
           </p>
         </div>
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid min-w-0 gap-6 md:grid-cols-2 lg:grid-cols-3">
           {CARDS.map((item) => (
             <GridCard key={item.id} {...item} />
           ))}