six bug

2026-07-27 12:56:06 +03:30
parent d5488386ff
commit 1cea5b78cb
45 changed files with 1406 additions and 936 deletions
@@ -7,8 +7,6 @@ const steps = [
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    alt: "تقویم تیم",
-    imageClassName:
-      "z-10 aspect-video w-full rounded-xl border object-cover min-[960px]:max-h-56 min-[960px]:w-auto",
  },
  {
    title: "چک‌لیست تحویل",
@@ -16,8 +14,6 @@ const steps = [
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    alt: "فضای همکاری تیمی",
-    imageClassName:
-      "z-10 max-h-56 w-full rounded-xl border object-cover min-[960px]:aspect-video min-[960px]:w-auto",
  },
  {
    title: "گزارش پیشرفت",
@@ -25,19 +21,23 @@ const steps = [
      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    alt: "برد مدیریت پروژه",
-    imageClassName:
-      "z-10 max-h-56 w-full rounded-xl border object-cover min-[960px]:aspect-video min-[960px]:w-auto",
  },
 ];

-function StepConnector({ index }: { index: number }) {
+function StepNumber({ index }: { index: number }) {
+  return (
+    <span className="relative z-10 flex size-10 shrink-0 items-center justify-center rounded-full border bg-background font-mono text-lg">
+      {(index + 1).toLocaleString("fa-IR")}
+    </span>
+  );
+}
+
+function DesktopStepConnector({ index }: { index: number }) {
  if (index === 0) {
    return (
-      <div className="flex flex-col items-center justify-between gap-1">
+      <div className="hidden flex-col items-center justify-between gap-1 min-[960px]:flex">
        <span className="h-20 shrink-0" />
-        <span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-muted/50 font-mono text-lg">
-          {(index + 1).toLocaleString("fa-IR")}
-        </span>
+        <StepNumber index={index} />
        <span className="h-20 w-[3px] shrink-0 bg-linear-to-b from-transparent to-primary opacity-70" />
      </div>
    );
@@ -45,24 +45,20 @@ function StepConnector({ index }: { index: number }) {

  if (index === steps.length - 1) {
    return (
-      <div className="flex flex-col items-center justify-between gap-1">
+      <div className="hidden flex-col items-center justify-between gap-1 min-[960px]:flex">
        <span className="h-20 w-[3px] shrink-0 bg-linear-to-t from-transparent to-primary opacity-70" />
-        <span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-muted/50 font-mono text-lg">
-          {(index + 1).toLocaleString("fa-IR")}
-        </span>
+        <StepNumber index={index} />
        <span className="h-20 shrink-0" />
      </div>
    );
  }

  return (
-    <div className="relative flex flex-col items-center justify-between gap-1">
+    <div className="relative hidden flex-col items-center justify-between gap-1 min-[960px]:flex">
      <span className="absolute -top-8 mx-auto h-8 w-[3px] shrink-0 bg-primary opacity-70" />
      <span className="absolute -bottom-8 mx-auto h-8 w-[3px] shrink-0 bg-primary opacity-70" />
      <span className="h-20 w-[3px] shrink-0 bg-primary opacity-70" />
-      <span className="flex size-10 shrink-0 items-center justify-center rounded-full border bg-muted/50 font-mono text-lg">
-        {(index + 1).toLocaleString("fa-IR")}
-      </span>
+      <StepNumber index={index} />
      <span className="h-20 w-[3px] shrink-0 bg-primary opacity-70" />
    </div>
  );
@@ -74,34 +70,61 @@ interface Feature102Props {

 const Feature102 = ({ className }: Feature102Props) => {
  return (
-    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
-      <div className="container">
-        <div className="mx-auto flex max-w-3xl flex-col justify-center gap-7 md:text-center">
-          <h2 className="text-xl md:text-xl">همکاری از راه دور را ساده کنید</h2>
-          <p className="text-sm text-muted-foreground md:text-base">
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn(
+        "relative w-full max-w-full overflow-hidden py-32",
+        className,
+      )}
+    >
+      <div className="container min-w-0 max-w-full">
+        <div className="mx-auto flex w-full min-w-0 max-w-3xl flex-col justify-center gap-7 md:text-center">
+          <h2 className="max-w-full text-xl text-balance break-words md:text-xl">
+            همکاری از راه دور را ساده کنید
+          </h2>
+          <p className="max-w-full text-sm text-pretty break-words text-muted-foreground md:text-base">
            هر عضو بداند چه زمانی چه کاری دارد
          </p>
        </div>
-        <div className="mx-auto mt-14 flex max-w-5xl flex-col gap-4 lg:px-16">
+
+        <div className="mx-auto mt-14 flex w-full min-w-0 max-w-5xl flex-col gap-10 min-[960px]:gap-4 lg:px-16">
          {steps.map((step, index) => (
            <div
              key={step.title}
-              className="flex flex-col items-center justify-between min-[960px]:flex-row min-[960px]:gap-10"
+              className="relative flex w-full min-w-0 gap-4 min-[960px]:items-center min-[960px]:gap-10"
            >
-              <div className="flex gap-4 min-[960px]:max-w-md">
-                <StepConnector index={index} />
-                <div className="flex flex-col justify-center gap-5 px-0 min-[960px]:gap-6 min-[960px]:px-4 min-[960px]:py-4">
-                  <h3 className="text-xl min-[960px]:text-xl">{step.title}</h3>
-                  <p className="text-sm text-muted-foreground min-[960px]:text-base">
+              {index < steps.length - 1 ? (
+                <span
+                  aria-hidden
+                  className="absolute top-10 bottom-[-2.5rem] start-0 flex w-10 justify-center min-[960px]:hidden"
+                >
+                  <span className="w-[3px] bg-primary/70" />
+                </span>
+              ) : null}
+
+              <div className="relative z-10 flex shrink-0 flex-col items-center">
+                <div className="min-[960px]:hidden">
+                  <StepNumber index={index} />
+                </div>
+                <DesktopStepConnector index={index} />
+              </div>
+
+              <div className="flex min-w-0 flex-1 flex-col gap-5 min-[960px]:flex-row min-[960px]:items-center min-[960px]:justify-between min-[960px]:gap-10">
+                <div className="flex min-w-0 flex-col justify-center gap-5 min-[960px]:max-w-md min-[960px]:gap-6 min-[960px]:px-4 min-[960px]:py-4">
+                  <h3 className="text-xl break-words min-[960px]:text-xl">
+                    {step.title}
+                  </h3>
+                  <p className="text-sm text-pretty break-words text-muted-foreground min-[960px]:text-base">
                    {step.description}
                  </p>
                </div>
+                <img
+                  src={step.image}
+                  alt={step.alt}
+                  className="relative z-10 aspect-video w-full max-w-full rounded-xl border object-cover min-[960px]:max-h-56 min-[960px]:w-auto min-[960px]:shrink-0"
+                />
              </div>
-              <img
-                src={step.image}
-                alt={step.alt}
-                className={step.imageClassName}
-              />
            </div>
          ))}
        </div>