reui-blocks/blocks/timeline13.tsx

import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";

interface Timeline13Props {
  className?: string;
}

const formatPercent = (value: number) =>
  `${value.toLocaleString("fa-IR")}٪`;

const Timeline13 = ({ className }: Timeline13Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col text-start">
          <h1 className="mb-2 text-3xl font-semibold md:text-2xll">
            مسیر تا عرضه محصول
          </h1>
          <p className="max-w-2xl text-muted-foreground">
            مراحل ضروری برای رساندن ایده نوآورانه به بازار و تضمین عرضه
            موفق محصول را دنبال کنید.
          </p>
        </div>
        <div className="mt-8 flex flex-col gap-6 rounded-xl border border-border bg-card p-4 sm:p-8 lg:p-11">
          <div className="contents items-center justify-between sm:flex">
            <h2 className="text-xl font-semibold tracking-tight">
              راهنمایی از پیشگامان صنعت
            </h2>
            <Button className="order-last">درخواست دمو</Button>
          </div>
          <div className="mt-3 flex gap-4 sm:flex-col">
            <div className="relative">
              <div className="grid h-full w-4 justify-center gap-10 sm:h-4 sm:w-auto sm:grid-cols-3 sm:items-center">
                <div
                  className="absolute inset-0 start-1/2 w-px -translate-x-1/2 bg-ring sm:inset-auto sm:start-auto sm:h-px sm:w-full sm:translate-x-0"
                />
                <span className="relative top-3 size-2 rounded-full bg-ring sm:top-0" />
                <span className="relative top-3 size-2 rounded-full bg-ring sm:top-0" />
                <span className="relative top-3 size-2 rounded-full bg-ring sm:top-0" />
              </div>
              <div
                className="animate-timeline-reveal absolute inset-0 grid h-full w-4 justify-center gap-10 sm:h-4 sm:w-auto sm:grid-cols-3 sm:items-center"
              >
                <div
                  className="absolute inset-0 start-1/2 w-px -translate-x-1/2 bg-primary sm:inset-auto sm:start-auto sm:h-px sm:w-full sm:translate-x-0"
                />
                <span className="relative top-3 size-2 rounded-full bg-primary sm:top-0" />
                <span className="relative top-3 size-2 rounded-full bg-primary sm:top-0" />
                <span className="relative top-3 size-2 rounded-full bg-primary sm:top-0" />
              </div>
            </div>
            <div className="grid gap-10 sm:grid-cols-3">
              <div className="flex h-full flex-col justify-between gap-4 text-start">
                <div className="flex flex-col">
                  <div className="flex h-8 w-fit items-center gap-px overflow-hidden rounded-md border border-border bg-border text-sm font-medium">
                    <span className="grid h-full place-items-center bg-background px-2">
                      ۱
                    </span>
                    <span className="grid h-full place-items-center bg-background px-2">
                      ایده‌پردازی
                    </span>
                  </div>
                  <h3 className="mt-5 font-medium">
                    ایده را مطرح و اعتبارسنجی کنید
                  </h3>
                  <p className="mt-2 text-sm text-muted-foreground">
                    با تحقیق بازار، مصاحبه با مشتری و تحلیل رقبا، ایده محصول
                    خود را پالایش کنید.
                  </p>
                </div>
                <div>
                  <div className="flex items-center gap-2">
                    <Progress
                      value={15}
                      className="h-1 flex-1 rtl:scale-x-[-1]"
                    />
                    <span className="w-8 text-end text-xs text-muted-foreground">
                      {formatPercent(15)}
                    </span>
                  </div>
                  <p className="mt-1 text-xs text-muted-foreground">
                    حدود ۲ هفته
                  </p>
                </div>
              </div>
              <div className="flex h-full flex-col justify-between gap-4 text-start">
                <div className="flex flex-col">
                  <div className="flex h-8 w-fit items-center gap-px overflow-hidden rounded-md border border-border bg-border text-sm font-medium">
                    <span className="grid h-full place-items-center bg-background px-2">
                      ۲
                    </span>
                    <span className="grid h-full place-items-center bg-background px-2">
                      توسعه
                    </span>
                  </div>
                  <h3 className="mt-5 font-medium">نسخه اولیه را بسازید</h3>
                  <p className="mt-2 text-sm text-muted-foreground">
                    طراحی، نمونه‌سازی و توسعه حداقل محصول قابل عرضه. بر اساس
                    بازخورد و آزمایش اولیه سریع تکرار کنید.
                  </p>
                </div>
                <div>
                  <div className="flex items-center gap-2">
                    <Progress
                      value={85}
                      className="h-1 flex-1 rtl:scale-x-[-1]"
                    />
                    <span className="w-8 text-end text-xs text-muted-foreground">
                      {formatPercent(85)}
                    </span>
                  </div>
                  <p className="mt-1 text-xs text-muted-foreground">
                    حدود ۶ هفته
                  </p>
                </div>
              </div>
              <div className="flex h-full flex-col justify-between gap-4 text-start">
                <div className="flex flex-col">
                  <div className="flex h-8 w-fit items-center gap-px overflow-hidden rounded-md border border-border bg-border text-sm font-medium">
                    <span className="grid h-full place-items-center bg-background px-2">
                      ۰۳
                    </span>
                    <span className="grid h-full place-items-center bg-background px-2">
                      عرضه
                    </span>
                  </div>
                  <h3 className="mt-5 font-medium">ورود به بازار</h3>
                  <p className="mt-2 text-sm text-muted-foreground">
                    طرح عرضه را با کمپین‌های بازاریابی، ارتباط‌گیری و پشتیبانی
                    مشتری اجرا کنید تا اثر و پذیرش بیشینه شود.
                  </p>
                </div>
                <div>
                  <div className="flex items-center gap-2">
                    <Progress
                      value={100}
                      className="h-1 flex-1 rtl:scale-x-[-1]"
                    />
                    <span className="w-8 text-end text-xs text-muted-foreground">
                      {formatPercent(100)}
                    </span>
                  </div>
                  <p className="mt-1 text-xs text-muted-foreground">
                    عرضه تکمیل شد
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>
        {`
        /* Mobile: Top to bottom animation */
        @keyframes timeline-reveal-mobile {
          from {
            clip-path: inset(0 0 100% 0);
          }
          to {
            clip-path: inset(0% 0 0 0);
          }
        }
        
        /* Desktop: reveal along timeline (LTR) */
        @keyframes timeline-reveal-desktop {
          from {
            clip-path: inset(0 100% 0 0);
          }
          to {
            clip-path: inset(0 0% 0 0);
          }
        }

        /* Desktop: reveal along timeline (RTL) */
        @keyframes timeline-reveal-desktop-rtl {
          from {
            clip-path: inset(0 0 0 100%);
          }
          to {
            clip-path: inset(0 0 0 0%);
          }
        }
        
        .animate-timeline-reveal {
          animation: timeline-reveal-mobile 5s linear;
        }
        
        @media (min-width: 640px) {
          .animate-timeline-reveal {
            animation: timeline-reveal-desktop 5s linear;
          }

          [dir="rtl"] .animate-timeline-reveal {
            animation: timeline-reveal-desktop-rtl 5s linear;
          }
        }
        `}
      </style>
    </section>
  );
};

export { Timeline13 };