six bug

blocks/feature215b.tsx

@@ -11,13 +11,13 @@ import {
 } from "lucide-react";
 import { useRef } from "react";
 
-import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 interface HorizontalCardItem {
   id: string;
   video: string;
+  poster: string;
   Icon: LucideIcon;
   title: string;
   link: string;
@@ -28,6 +28,7 @@ const CARDS: HorizontalCardItem[] = [
   {
     id: "design-system",
     video: "/block-media/shadcnblocks/block/video-1.mp4",
+    poster: "/block-media/shadcnblocks/block/placeholder-1.svg",
     Icon: Eye,
     title: "لاگ اجرا",
     link: "#",
@@ -37,6 +38,7 @@ const CARDS: HorizontalCardItem[] = [
   {
     id: "framework-agnostic",
     video: "/block-media/shadcnblocks/block/video-2.mp4",
+    poster: "/block-media/shadcnblocks/block/placeholder-2.svg",
     Icon: Languages,
     title: "قالب آماده",
     link: "#",
@@ -45,7 +47,8 @@ const CARDS: HorizontalCardItem[] = [
   },
   {
     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: "#",
@@ -54,7 +57,8 @@ const CARDS: HorizontalCardItem[] = [
   },
   {
     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: "#",
@@ -63,7 +67,8 @@ const CARDS: HorizontalCardItem[] = [
   },
   {
     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: "#",
@@ -72,7 +77,8 @@ const CARDS: HorizontalCardItem[] = [
   },
   {
     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: "#",
@@ -83,6 +89,7 @@ const CARDS: HorizontalCardItem[] = [
 
 const HorizontalCard = ({
   video,
+  poster,
   Icon,
   title,
   link,
@@ -92,11 +99,9 @@ const HorizontalCard = ({
 
   return (
     <div
-      className="group flex flex-col gap-6 border-b border-border py-8 last:border-b-0 md:flex-row md:items-center"
+      className="group flex min-w-0 flex-col gap-6 border-b border-border py-8 last:border-b-0 md:flex-row md:items-center"
       onMouseEnter={() => {
-        if (videoRef.current) {
-          videoRef.current.play();
-        }
+        void videoRef.current?.play();
       }}
       onMouseLeave={() => {
         if (videoRef.current) {
@@ -105,25 +110,29 @@ const HorizontalCard = ({
         }
       }}
     >
-      <div className="md:w-1/3">
-        <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-lg">
+      <div className="min-w-0 md:w-1/3">
+        <div className="aspect-video w-full overflow-hidden rounded-lg bg-muted">
           <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-1 flex-col gap-4 text-start md:ps-6">
+      <div className="flex min-w-0 flex-1 flex-col gap-4 text-start md:ps-6">
         <div className="flex items-center gap-3">
           <div className="flex size-8 shrink-0 rounded-md bg-primary">
             <Icon className="m-auto size-4 text-primary-foreground" />
           </div>
-          <h3 className="text-xl font-semibold">{title}</h3>
+          <h3 className="text-xl font-semibold text-pretty">{title}</h3>
         </div>
 
         <p className="leading-relaxed text-pretty text-muted-foreground">
@@ -146,8 +155,12 @@ interface Feature215bProps {
 
 const Feature215b = ({ className }: Feature215bProps) => {
   return (
-    <section dir="rtl" lang="fa" className={cn("py-20", className)}>
-      <div className="container">
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-full overflow-x-hidden py-20", className)}
+    >
+      <div className="container min-w-0 px-4 sm:px-6">
         <div className="mx-auto mb-12 max-w-3xl text-center">
           <h2 className="mb-4 text-3xl font-bold text-balance xl:text-2xll">
             فرایندها را استاندارد و سریع کنید
@@ -157,7 +170,7 @@ const Feature215b = ({ className }: Feature215bProps) => {
           </p>
         </div>
 
-        <div className="mx-auto max-w-4xl">
+        <div className="mx-auto max-w-4xl min-w-0">
           {CARDS.map((item) => (
             <HorizontalCard key={item.id} {...item} />
           ))}