reui-blocks/blocks/signup7.tsx

import { CheckSquare, FolderKanban, Users } from "lucide-react";
import { FcGoogle } from "react-icons/fc";

import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface Signup7Props {
  className?: string;
  heading?: string;
  description?: string;
  googleText?: string;
  dividerText?: string;
  emailButtonText?: string;
  ssoButtonText?: string;
  loginPromptText?: string;
  loginUrl?: string;
  loginLinkText?: string;
  termsIntroText?: string;
  termsLinkText?: string;
  termsUrl?: string;
  termsConnectorText?: string;
  privacyLinkText?: string;
  privacyUrl?: string;
  badgeMonthlyAlt?: string;
  badgeProductHuntAlt?: string;
  previewImageAlt?: string;
  feature1Title?: string;
  feature1Description?: string;
  feature2Title?: string;
  feature2Description?: string;
  feature3Title?: string;
  feature3Description?: string;
}

const Signup7 = ({
  className,
  heading = "حساب کاربری خود را همین امروز ایجاد کنید",
  description = "پلن پایه برای استفاده شخصی. پلن‌های حرفه‌ای برای تیم‌ها و کسب‌وکارها.",
  googleText = "ادامه با گوگل",
  dividerText = "یا",
  emailButtonText = "ادامه با ایمیل",
  ssoButtonText = "یا ورود یکپارچه سازمانی (SSO)",
  loginPromptText = "قبلاً ثبت‌نام کرده‌اید؟",
  loginUrl = "/#",
  loginLinkText = "ورود به حساب",
  termsIntroText = "با ادامه، با",
  termsLinkText = "شرایط خدمات",
  termsUrl = "/#",
  termsConnectorText = "و",
  privacyLinkText = "سیاست حریم خصوصی",
  privacyUrl = "/#",
  badgeMonthlyAlt = "نشان ماهانه Product Hunt",
  badgeProductHuntAlt = "نشان Product Hunt",
  previewImageAlt = "پیش‌نمایش محصول",
  feature1Title = "فضاهای کاری را منظم کنید",
  feature1Description =
    "همه کارها را در یک داشبورد متمرکز نگه دارید.",
  feature2Title = "پیگیری وظایف و مهلت‌ها",
  feature2Description =
    "اولویت‌ها را تعیین کنید و پیشرفت همه پروژه‌ها را رصد کنید.",
  feature3Title = "همکاری با تیم",
  feature3Description =
    "اسناد را به‌اشتراک بگذارید و با هم‌تیمی‌ها به‌صورت لحظه‌ای ارتباط بگیرید.",
}: Signup7Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-muted/60 py-32 2xl:bg-background", className)}
    >
      <div className="container lg:max-w-[1400px] lg:px-0 2xl:px-8">
        <div className="grid rounded-2xl border-border lg:grid-cols-2 lg:bg-muted/30 2xl:border 2xl:py-10">
          <div className="mx-auto flex max-w-xl flex-col justify-between lg:px-20">
            <div className="lg:mt-24">
              <div className="flex flex-col gap-2">
                <h1 className="text-xl font-bold">{heading}</h1>
                <p className="font-medium text-muted-foreground">
                  {description}
                </p>
              </div>
              <div className="mt-16 flex flex-col gap-6">
                <Button type="button">
                  <FcGoogle />
                  {googleText}
                </Button>
                <div className="flex items-center gap-2">
                  <Separator className="flex-1" />
                  <span className="text-sm text-muted-foreground">
                    {dividerText}
                  </span>
                  <Separator className="flex-1" />
                </div>
                <div className="flex flex-col gap-2">
                  <Button type="button" variant="outline">
                    {emailButtonText}
                  </Button>
                  <Button
                    type="button"
                    variant="ghost"
                    className="text-muted-foreground hover:text-primary"
                  >
                    {ssoButtonText}
                  </Button>
                </div>
              </div>
            </div>
            <div className="mt-10 space-y-2">
              <p className="text-sm text-muted-foreground">
                {loginPromptText}{" "}
                <a href={loginUrl} className="text-primary">
                  {loginLinkText}
                </a>
              </p>
              <p className="text-sm text-muted-foreground">
                {termsIntroText}{" "}
                <a href={termsUrl} className="text-primary">
                  {termsLinkText}
                </a>{" "}
                {termsConnectorText}{" "}
                <a href={privacyUrl} className="text-primary">
                  {privacyLinkText}
                </a>
                .
              </p>
            </div>
          </div>
          <div className="rounded-s-2xl border-border pt-14 lg:border-y lg:border-s lg:bg-muted/60 lg:py-8 lg:ps-12">
            <div className="mx-auto flex max-w-xl justify-between gap-4 lg:mx-0 lg:max-w-none lg:justify-start lg:gap-8">
              <div className="flex flex-row items-center gap-4">
                <img
                  src="/block-media/shadcnblocks/block/logos/ph-monthly.svg"
                  alt={badgeMonthlyAlt}
                  className="h-10"
                />
                <img
                  src="/block-media/shadcnblocks/block/logos/producthunt-badge.png"
                  alt={badgeProductHuntAlt}
                  className="h-10"
                />
              </div>
            </div>
            <div className="mt-6 hidden rounded-s-xl border-y border-s border-dashed border-border bg-muted py-1.5 ps-1.5 lg:block">
              <img
                src="/block-media/shadcnblocks/block/placeholder-dark-1.svg"
                alt={previewImageAlt}
                className="max-h-[450px] w-full rounded-s-xl border-y border-s border-border object-cover"
              />
            </div>
            <div className="mt-8 me-3 hidden grid-cols-3 gap-3 lg:grid">
              <div>
                <FolderKanban className="mb-1 size-4" />
                <p className="text-sm font-medium">{feature1Title}</p>
                <p className="text-sm text-muted-foreground">
                  {feature1Description}
                </p>
              </div>
              <div>
                <CheckSquare className="mb-1 size-4" />
                <p className="text-sm font-medium">{feature2Title}</p>
                <p className="text-sm text-muted-foreground">
                  {feature2Description}
                </p>
              </div>
              <div>
                <Users className="mb-1 size-4" />
                <p className="text-sm font-medium">{feature3Title}</p>
                <p className="text-sm text-muted-foreground">
                  {feature3Description}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Signup7 };