six bug

2026-07-27 12:56:06 +03:30
parent d5488386ff
commit 1cea5b78cb
45 changed files with 1406 additions and 936 deletions
@@ -12,7 +12,6 @@ import {
 } from "lucide-react";
 import { useRef } from "react";

-import { AspectRatio } from "@/components/ui/aspect-ratio";
 import {
  Card,
  CardContent,
@@ -31,6 +30,7 @@ import { cn } from "@/lib/utils";
 interface CarouselCardItem {
  id: string;
  video: string;
+  poster: string;
  Icon: LucideIcon;
  title: string;
  link: string;
@@ -41,6 +41,7 @@ const CARDS: CarouselCardItem[] = [
  {
    id: "design-system",
    video: "/block-media/shadcnblocks/block/video-1.mp4",
+    poster: "/block-media/shadcnblocks/block/placeholder-1.svg",
    Icon: Eye,
    title: "همکاری فروش و بازاریابی",
    link: "#",
@@ -50,6 +51,7 @@ const CARDS: CarouselCardItem[] = [
  {
    id: "framework-agnostic",
    video: "/block-media/shadcnblocks/block/video-2.mp4",
+    poster: "/block-media/shadcnblocks/block/placeholder-2.svg",
    Icon: Languages,
    title: "اولویت‌بندی سرنخ",
    link: "#",
@@ -58,7 +60,8 @@ const CARDS: CarouselCardItem[] = [
  },
  {
    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: "#",
@@ -67,7 +70,8 @@ const CARDS: CarouselCardItem[] = [
  },
  {
    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: "#",
@@ -76,7 +80,8 @@ const CARDS: CarouselCardItem[] = [
  },
  {
    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: "#",
@@ -85,7 +90,8 @@ const CARDS: CarouselCardItem[] = [
  },
  {
    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: "#",
@@ -94,7 +100,8 @@ const CARDS: CarouselCardItem[] = [
  },
  {
    id: "typescript",
-    video: "/block-media/shadcnblocks/block/video-6.mp4",
+    video: "/block-media/shadcnblocks/block/video-1.mp4",
+    poster: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    Icon: Captions,
    title: "اتوماسیون پیگیری",
    link: "#",
@@ -103,17 +110,22 @@ const CARDS: CarouselCardItem[] = [
  },
 ];

-const CarouselCard = ({ video, Icon, title, link, summary }: CarouselCardItem) => {
+const CarouselCard = ({
+  video,
+  poster,
+  Icon,
+  title,
+  link,
+  summary,
+}: CarouselCardItem) => {
  const videoRef = useRef<HTMLVideoElement | null>(null);

  return (
    <a
      href={link}
-      className="group block h-full"
+      className="group block h-full min-w-0"
      onMouseEnter={() => {
-        if (videoRef.current) {
-          videoRef.current.play();
-        }
+        void videoRef.current?.play();
      }}
      onMouseLeave={() => {
        if (videoRef.current) {
@@ -122,28 +134,29 @@ const CarouselCard = ({ video, Icon, title, link, summary }: CarouselCardItem) =
        }
      }}
    >
-      <Card className="h-full min-h-[24rem] bg-muted p-8 shadow-none transition-all group-hover:shadow-md">
-        <CardContent className="p-0">
-          <div className="relative">
-            <AspectRatio
-              ratio={16 / 9}
-              className="overflow-hidden rounded-[0.5rem]"
-            >
+      <Card className="h-full min-h-0 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:min-h-[22rem] sm:p-6 lg:min-h-[24rem] lg:p-8">
+        <CardContent className="min-w-0 p-0">
+          <div className="relative min-w-0">
+            <div className="aspect-video w-full min-w-0 overflow-hidden rounded-lg bg-background">
              <video
-                src={video}
-                className="block size-full object-cover object-center"
                ref={videoRef}
+                className="block size-full max-w-full object-cover object-center"
+                src={video}
+                poster={poster}
                controls={false}
                muted
+                loop
+                playsInline
+                preload="metadata"
                aria-label={title}
              />
-            </AspectRatio>
-            <div className="absolute -start-2 -top-3 flex size-9 rounded-[0.5rem] bg-primary">
+            </div>
+            <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-sm leading-[150%] tracking-[-0.36px] text-pretty">
@@ -162,36 +175,45 @@ interface Feature215Props {

 const Feature215 = ({ className }: Feature215Props) => {
  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 text-xl font-semibold text-balance xl:text-2xll">
            پیش‌بینی درآمد را دقیق‌تر کنید
          </h2>
-          <p className="text-center text-xl text-pretty text-muted-foreground">
-            الگوهای موفق فروش را در کل سازمان تکرار کنید. داده لحظه‌ای نشان می‌دهد کدام مرحله بیشترین افت تبدیل را دارد.
+          <p className="text-center text-base text-pretty text-muted-foreground 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 md:basis-1/2 lg:basis-1/3"
+                className="min-w-0 basis-[85%] sm:basis-1/2 lg:basis-1/3"
              >
                <CarouselCard {...item} />
              </CarouselItem>
            ))}
          </CarouselContent>
-          <div className="mt-8 flex w-full justify-center 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: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>