reui-blocks/blocks/resource3.tsx

import {
  CheckCircle2,
  Facebook,
  Home,
  Instagram,
  Linkedin,
  Twitter,
} from "lucide-react";

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface Resource3Props {
  className?: string;
}

const Resource3 = ({ className }: Resource3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="/" aria-label="صفحه اصلی">
                <Home className="h-4 w-4" />
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="/">کامپوننت‌ها</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>محصولات</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
        <h1 className="mt-7 text-start text-3xl font-semibold md:text-2xll">
          قرارداد حرفه‌ای خدمات
        </h1>
        <div className="relative mt-12 grid gap-16 md:grid-cols-2">
          <article className="order-2 mx-auto prose text-start md:order-1 dark:prose-invert">
            <div>
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="تصویر نمونه سند"
                className="mt-0 mb-8 aspect-video w-full rounded-lg object-cover"
              />
            </div>
            <h1>شرایط و ضوابط قرارداد خدمات</h1>
            <p>
              این سند چارچوب حقوقی همکاری بین ارائه‌دهنده خدمات نرم‌افزاری و
              مشتری سازمانی را تعریف می‌کند. شامل دامنه کار، تحویل‌دادنی‌ها،
              زمان‌بندی پرداخت و شرایط فسخ است.
            </p>
            <h2>دامنه خدمات</h2>
            <p>
              ارائه‌دهنده متعهد به پیاده‌سازی، پیکربندی و آموزش{" "}
              <a href="#">پلتفرم سامانه مدیریت ارتباط با مشتری</a> مطابق مشخصات فنی پیوست می‌شود.
            </p>
            <blockquote>
              هر تغییر در دامنه کار پس از امضای قرارداد، از طریق درخواست تغییر
              (Change Request) با برآورد هزینه و زمان جداگانه انجام می‌شود.
            </blockquote>
            <h3>تحویل‌دادنی‌ها</h3>
            <p>
              تحویل‌دادنی‌های اصلی قرارداد شامل موارد زیر است:
            </p>
            <ul>
              <li>پیکربندی اولیه سامانه مدیریت ارتباط با مشتری و یکپارچه‌سازی با ایمیل</li>
              <li>مهاجرت داده مشتریان موجود (حداکثر ۱۰,۰۰۰ رکورد)</li>
              <li>آموزش ۲ جلسه‌ای برای تیم فروش (حداکثر ۱۵ نفر)</li>
            </ul>
            <p>
              هر تحویل‌دادنی پس از تأیید کتبی مشتری، به‌عنوان پذیرفته‌شده
              ثبت می‌شود.
            </p>
            <h3>زمان‌بندی و پرداخت</h3>
            <p>
              پروژه در ۳ فاز اجرا می‌شود و پرداخت‌ها بر اساس تحویل هر فاز
              انجام می‌گیرد:
            </p>
            <p>
              فاز ۱ (پیکربندی): ۴۰٪ — فاز ۲ (مهاجرت داده): ۳۵٪ — فاز ۳
              (آموزش و تحویل نهایی): ۲۵٪
            </p>
            <h3>ضمانت و پشتیبانی</h3>
            <p>
              ارائه‌دهنده ۹۰ روز پس از تحویل نهایی، رفع باگ و پشتیبانی فنی
              رایگان ارائه می‌دهد. پشتیبانی مداوم طبق قرارداد SLA جداگانه
              قابل تمدید است.
            </p>
            <div>
              <table>
                <thead>
                  <tr>
                    <th>سطح SLA</th>
                    <th>زمان پاسخ</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>بحرانی</td>
                    <td>۲ ساعت</td>
                  </tr>
                  <tr className="m-0 border-t p-0 even:bg-muted">
                    <td>بالا</td>
                    <td>۸ ساعت</td>
                  </tr>
                  <tr className="m-0 border-t p-0 even:bg-muted">
                    <td>عادی</td>
                    <td>۲۴ ساعت</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p>
              مشتری متعهد است نماینده فنی اختصاص دهد و دسترسی‌های لازم برای
              یکپارچه‌سازی را ظرف ۵ روز کاری فراهم کند.
            </p>
            <p>
              این قرارداد از تاریخ امضا به مدت ۱۲ ماه معتبر است و با
              توافق طرفین قابل تمدید می‌باشد.
            </p>
          </article>
          <div className="order-1 h-fit text-start md:sticky md:top-20 md:order-2">
            <p className="mb-2 text-lg font-semibold">بریده‌ای از سند</p>
            <p className="text-muted-foreground">
              قالب جامع قرارداد خدمات برای ارائه‌دهندگان حرفه‌ای و مشتریان
              آن‌ها. این سند دامنه کار، تحویل‌دادنی‌ها، زمان‌بندی و شرایط
              خدمات را مشخص می‌کند تا انتظارات شفاف باشد و منافع هر دو طرف
              حفظ شود.
            </p>
            <Button size="lg" className="mt-6">
              دانلود سند
            </Button>
            <Separator className="my-6" />
            <div className="flex gap-3">
              <Avatar className="size-10 rounded-full border">
                <AvatarImage
                  src="/block-media/shadcnblocks/block/avatar-2.webp"
                  alt="رضا محمدی"
                />
              </Avatar>
              <div>
                <h2 className="text-sm font-medium">بازبینی‌شده توسط رضا محمدی</h2>
                <p className="text-sm text-muted-foreground">مشاور حقوقی</p>
              </div>
            </div>
            <Separator className="my-6" />
            <p className="mb-4 text-sm font-medium">ویژگی‌های کلیدی</p>
            <ul className="flex flex-col gap-2">
              <li className="flex items-center gap-2">
                <CheckCircle2 className="size-4 shrink-0" />
                <p>شرایط قابل سفارشی‌سازی</p>
              </li>
              <li className="flex items-center gap-2">
                <CheckCircle2 className="size-4 shrink-0" />
                <p>امضای دیجیتال</p>
              </li>
              <li className="flex items-center gap-2">
                <CheckCircle2 className="size-4 shrink-0" />
                <p>پیگیری سند</p>
              </li>
            </ul>
            <Separator className="my-6" />
            <div className="flex items-center justify-between gap-4">
              <p className="text-sm font-medium">اشتراک‌گذاری این قالب</p>
              <ul className="flex gap-2">
                <li>
                  <a
                    href="#"
                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
                    aria-label="اشتراک در فیسبوک"
                  >
                    <Facebook className="size-4" />
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
                    aria-label="اشتراک در توییتر"
                  >
                    <Twitter className="size-4" />
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
                    aria-label="اشتراک در لینکدین"
                  >
                    <Linkedin className="size-4" />
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="inline-flex rounded-full border p-2 transition-colors hover:bg-muted"
                    aria-label="اشتراک در اینستاگرام"
                  >
                    <Instagram className="size-4" />
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Resource3 };