six bug

2026-07-27 12:56:06 +03:30
parent d5488386ff
commit 1cea5b78cb
45 changed files with 1406 additions and 936 deletions
@@ -51,7 +51,8 @@ const features: {
  },
  {
    title: "ردیابی زمان",
-    description: "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
+    description:
+      "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
    icon: PenTool,
  },
  {
@@ -71,7 +72,8 @@ const features: {
  },
  {
    title: "برد Kanban",
-    description: "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
+    description:
+      "وضعیت هر کار را در یک نما ببینید و گلوگاه‌ها را زودتر پیدا کنید.",
    icon: Users,
  },
 ];
@@ -83,10 +85,19 @@ function FeatureCard({
  className,
 }: (typeof features)[number] & { className?: string }) {
  return (
-    <div className={cn("flex flex-col rounded-xl border p-5 md:p-7", className)}>
-      <Icon className="h-auto w-8 md:w-12" />
-      <h3 className="mt-5 mb-2.5 font-semibold md:text-xl">{title}</h3>
-      <p className="text-sm text-muted-foreground md:text-base">{description}</p>
+    <div
+      className={cn(
+        "flex min-w-0 flex-col rounded-xl border p-5 md:p-7",
+        className,
+      )}
+    >
+      <Icon className="h-auto w-8 shrink-0 md:w-12" />
+      <h3 className="mt-5 mb-2.5 font-semibold break-words md:text-xl">
+        {title}
+      </h3>
+      <p className="text-sm text-pretty break-words text-muted-foreground md:text-base">
+        {description}
+      </p>
    </div>
  );
 }
@@ -100,10 +111,17 @@ const Feature114 = ({ className }: Feature114Props) => {
  const secondHalf = features.slice(features.length / 2);

  return (
-    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
-      <div className="container">
-        <div className="grid items-center gap-20 md:grid-cols-2">
-          <div className="flex flex-col items-center gap-5 text-center md:items-start md:text-start">
+    <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="grid w-full min-w-0 items-center gap-12 md:grid-cols-2 md:gap-12 lg:gap-20">
+          <div className="flex min-w-0 flex-col items-center gap-5 text-center md:items-start md:text-start">
            <span className="inline-flex items-center -space-x-4 rtl:space-x-reverse">
              {avatars.map((src, index) => (
                <Avatar key={src} className="size-11 border lg:size-16">
@@ -114,34 +132,41 @@ const Feature114 = ({ className }: Feature114Props) => {
                </Avatar>
              ))}
            </span>
-            <h1 className="text-3xl font-semibold md:text-2xll">
+            <h1 className="max-w-full text-3xl font-semibold text-balance break-words md:text-2xll">
              همکاری از راه دور را ساده کنید
            </h1>
-            <p className="text-muted-foreground md:text-lg">
+            <p className="max-w-full text-pretty break-words text-muted-foreground md:text-lg">
              هر عضو بداند چه زمانی چه کاری دارد
            </p>
-            <Button size="lg" className="w-fit gap-2">
-              اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.
-              <MoveRight className="h-auto w-5 rtl:rotate-180" />
+            <p className="max-w-full text-sm text-pretty break-words text-muted-foreground md:text-base">
+              اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم
+              می‌کنند.
+            </p>
+            <Button size="lg" className="w-fit max-w-full gap-2">
+              شروع همکاری
+              <MoveRight className="size-5 shrink-0 rtl:rotate-180" />
            </Button>
-            <div className="grid grid-cols-2 justify-between gap-4 pt-10 text-start md:gap-20">
-              <div className="flex flex-col gap-1">
-                <h2 className="text-3xl font-semibold md:text-2xll">
+            <div className="grid w-full min-w-0 grid-cols-2 justify-between gap-4 pt-10 text-start md:gap-8 lg:gap-20">
+              <div className="flex min-w-0 flex-col gap-1">
+                <h2 className="text-3xl font-semibold break-words md:text-2xll">
                  {(85).toLocaleString("fa-IR")}٪
                </h2>
-                <p className="text-muted-foreground md:text-lg">
+                <p className="text-sm text-pretty break-words text-muted-foreground md:text-lg">
                  تصمیم‌ها را سریع‌تر هماهنگ کنید
                </p>
              </div>
-              <div className="flex flex-col gap-1">
-                <h2 className="text-3xl font-semibold md:text-2xll">
+              <div className="flex min-w-0 flex-col gap-1">
+                <h2 className="text-3xl font-semibold break-words md:text-2xll">
                  {(25000).toLocaleString("fa-IR")}+
                </h2>
-                <p className="text-muted-foreground md:text-lg">تیم‌ها را در یک فضای مشترک هم‌راستا کنید</p>
+                <p className="text-sm text-pretty break-words text-muted-foreground md:text-lg">
+                  تیم‌ها را در یک فضای مشترک هم‌راستا کنید
+                </p>
              </div>
            </div>
          </div>
-          <div className="grid gap-4 md:gap-7 lg:grid-cols-2">
+
+          <div className="grid w-full min-w-0 gap-4 overflow-hidden md:gap-7 lg:grid-cols-2">
            <Carousel
              opts={{
                loop: true,
@@ -153,11 +178,11 @@ const Feature114 = ({ className }: Feature114Props) => {
                }),
              ]}
              orientation="vertical"
-              className="pointer-events-none relative lg:hidden"
+              className="pointer-events-none relative w-full min-w-0 lg:hidden"
            >
-              <CarouselContent className="max-h-[600px]">
+              <CarouselContent className="mt-0 max-h-[600px]">
                {features.map((feature) => (
-                  <CarouselItem key={feature.title}>
+                  <CarouselItem key={feature.title} className="pt-4">
                    <FeatureCard {...feature} />
                  </CarouselItem>
                ))}
@@ -175,11 +200,11 @@ const Feature114 = ({ className }: Feature114Props) => {
                }),
              ]}
              orientation="vertical"
-              className="pointer-events-none relative hidden lg:block"
+              className="pointer-events-none relative hidden w-full min-w-0 lg:block"
            >
-              <CarouselContent className="max-h-[600px]">
+              <CarouselContent className="mt-0 max-h-[600px]">
                {firstHalf.map((feature) => (
-                  <CarouselItem key={feature.title}>
+                  <CarouselItem key={feature.title} className="pt-4">
                    <FeatureCard {...feature} className="p-4 md:p-7" />
                  </CarouselItem>
                ))}
@@ -197,11 +222,11 @@ const Feature114 = ({ className }: Feature114Props) => {
                }),
              ]}
              orientation="vertical"
-              className="pointer-events-none relative hidden lg:block"
+              className="pointer-events-none relative hidden w-full min-w-0 lg:block"
            >
-              <CarouselContent className="max-h-[600px]">
+              <CarouselContent className="mt-0 max-h-[600px]">
                {secondHalf.map((feature) => (
-                  <CarouselItem key={feature.title}>
+                  <CarouselItem key={feature.title} className="pt-4">
                    <FeatureCard {...feature} className="p-4 md:p-7" />
                  </CarouselItem>
                ))}