reui-blocks/blocks/contact3.tsx

import {
  MessageCircleDashed,
  MessagesSquare,
  ScanFace,
  Users,
} from "lucide-react";

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

interface Contact3Props {
  className?: string;
}

const Contact3 = ({ className }: Contact3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="text-center">
          <h1 className="mb-7 text-xl font-bold md:text-2xll">تماس با ما</h1>
          <div className="flex flex-col justify-center gap-2 sm:flex-row">
            <Button size="lg">درخواست دمو</Button>
            <Button variant="outline" size="lg">
              شروع دوره آزمایشی رایگان
            </Button>
          </div>
          <p className="mt-4 text-sm text-muted-foreground">
            نیازی به وارد کردن اطلاعات پرداخت نیست
          </p>
        </div>
        <div className="mt-28 grid gap-16 md:grid-cols-2">
          <div>
            <MessagesSquare className="mb-5 h-8 w-auto" />
            <p className="mb-2 font-bold md:text-xl">پشتیبانی فنی</p>
            <p className="mb-6 text-sm text-muted-foreground md:text-base">
              اگر در استفاده از محصول با مشکلی روبه‌رو شده‌اید، تیم پشتیبانی آماده پاسخ‌گویی و راهنمایی شماست.
                                      </p>
            <a href="#" className="font-semibold hover:underline">
              تماس با پشتیبانی
            </a>
          </div>
          <div>
            <Users className="mb-5 h-8 w-auto" />
            <p className="mb-2 font-bold md:text-xl">مشاوره فروش</p>
            <p className="mb-6 text-sm text-muted-foreground md:text-base">
              برای دریافت دمو، استعلام قیمت یا انتخاب بهترین پلن، با کارشناسان فروش در ارتباط باشید.
                                      </p>
            <a href="#" className="font-semibold hover:underline">
              صحبت با فروش
            </a>
          </div>
          <div>
            <MessageCircleDashed className="mb-5 h-8 w-auto" />
            <p className="mb-2 font-bold md:text-xl">همکاری و ارتباطات</p>
            <p className="mb-6 text-sm text-muted-foreground md:text-base">
              برای همکاری، امور رسانه‌ای یا سایر درخواست‌ها از طریق فرم تماس با ما در ارتباط باشید.
                                      </p>
            <a href="#" className="font-semibold hover:underline">
              تماس با ما
            </a>
          </div>
          <div>
            <ScanFace className="mb-5 h-8 w-auto" />
            <p className="mb-2 font-bold md:text-xl">تأیید اطلاعات</p>
            <p className="mb-6 text-sm text-muted-foreground md:text-base">
              در صورت نیاز به تأیید اطلاعات یا استعلام‌های رسمی، از طریق سامانه احراز هویت اقدام کنید.
                                      </p>
            <a href="#" className="font-semibold hover:underline">
              شروع احراز هویت
            </a>
          </div>
        </div>
        <div className="mt-28">
          <h1 className="mb-16 text-center text-xl font-bold md:text-xl">
            دفاتر و نمایندگی‌های ما
                                </h1>
          <div className="mx-auto grid max-w-7xl gap-7 sm:grid-cols-2 md:grid-cols-3 lg:px-14">
            <div className="rounded-lg border p-5">
              <div className="mb-2 flex items-center">
                <div className="ms-2 h-5 w-7 rounded-sm bg-blue-500"></div>
                <p className="font-bold sm:text-lg">نیویورک، آمریکا</p>
              </div>
              <p
                className="text-sm text-muted-foreground sm:text-base"
                dir="rtl"
              >
                123 5th Ave, New York, NY 10001
              </p>
            </div>
            <div className="rounded-lg border p-5">
              <div className="mb-2 flex items-center">
                <div className="ms-2 h-5 w-7 rounded-sm bg-red-500"></div>
                <p className="font-bold sm:text-lg">لندن، بریتانیا</p>
              </div>
              <p
                className="text-sm text-muted-foreground sm:text-base"
                dir="rtl"
              >
                50 Oxford St, London W1D 1BS, United Kingdom
              </p>
            </div>
            <div className="rounded-lg border p-5">
              <div className="mb-2 flex items-center">
                <div className="ms-2 h-5 w-7 rounded-sm bg-green-500"></div>
                <p className="font-bold sm:text-lg">توکیو، ژاپن</p>
              </div>
              <p
                className="text-sm text-muted-foreground sm:text-base"
                dir="rtl"
              >
                2-7-5 Kyobashi, Chuo-ku, Tokyo 104-0031, Japan
              </p>
            </div>
            <div className="rounded-lg border p-5">
              <div className="mb-2 flex items-center">
                <div className="ms-2 h-5 w-7 rounded-sm bg-yellow-500"></div>
                <p className="font-bold sm:text-lg">سیدنی، استرالیا</p>
              </div>
              <p
                className="text-sm text-muted-foreground sm:text-base"
                dir="rtl"
              >
                100 George St, Sydney NSW 2000, Australia
              </p>
            </div>
            <div className="rounded-lg border p-5">
              <div className="mb-2 flex items-center">
                <div className="ms-2 h-5 w-7 rounded-sm bg-purple-500"></div>
                <p className="font-bold sm:text-lg">برلین، آلمان</p>
              </div>
              <p
                className="text-sm text-muted-foreground sm:text-base"
                dir="rtl"
              >
                Unter den Linden 52, 10117 Berlin, Germany
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Contact3 };