103 lines
3.8 KiB
TypeScript
103 lines
3.8 KiB
TypeScript
import { Mail, MapPin, MessageCircle, Phone } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Contact7Props {
|
|
title?: string;
|
|
description?: string;
|
|
emailLabel?: string;
|
|
emailDescription?: string;
|
|
email?: string;
|
|
officeLabel?: string;
|
|
officeDescription?: string;
|
|
officeAddress?: string;
|
|
phoneLabel?: string;
|
|
phoneDescription?: string;
|
|
phone?: string;
|
|
chatLabel?: string;
|
|
chatDescription?: string;
|
|
chatLink?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const Contact7 = ({
|
|
title = "تماس با ما",
|
|
description = "سوال دارید یا به کمک نیاز دارید؟ از طریق هر یک از راه‌های زیر با ما در ارتباط باشید.",
|
|
emailLabel = "ایمیل",
|
|
emailDescription = "در روزهای کاری، حداکثر تا ۲۴ ساعت به ایمیل‌ها پاسخ می‌دهیم.",
|
|
email = "hello@example.com",
|
|
officeLabel = "دفتر",
|
|
officeDescription = "برای برگزاری جلسه حضوری، با هماهنگی قبلی به دفتر مراجعه کنید.",
|
|
officeAddress = "تهران، خیابان ولیعصر",
|
|
phoneLabel = "تلفن",
|
|
phoneDescription = "در روزهای کاری از ساعت ۹ تا ۱۷ پاسخ‌گوی تماس‌های شما هستیم.",
|
|
phone = "۲۱-۱۲۳۴۵۶۷۸",
|
|
chatLabel = "چت زنده",
|
|
chatDescription = "برای دریافت راهنمایی فوری با کارشناسان پشتیبانی گفتگو کنید.",
|
|
chatLink = "شروع گفتگو",
|
|
className,
|
|
}: Contact7Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="mb-14">
|
|
<h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
|
|
{title}
|
|
</h1>
|
|
<p className="text-muted-foreground">{description}</p>
|
|
</div>
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<div className="rounded-xl bg-muted/50 p-8">
|
|
<Mail className="mb-4 size-5 text-muted-foreground" />
|
|
<p className="mb-1 font-medium">{emailLabel}</p>
|
|
<p className="mb-4 text-sm text-muted-foreground">
|
|
{emailDescription}
|
|
</p>
|
|
<a
|
|
href={`mailto:${email}`}
|
|
className="hover:underline"
|
|
dir="rtl"
|
|
>
|
|
{email}
|
|
</a>
|
|
</div>
|
|
<div className="rounded-xl bg-muted/50 p-8">
|
|
<MapPin className="mb-4 size-5 text-muted-foreground" />
|
|
<p className="mb-1 font-medium">{officeLabel}</p>
|
|
<p className="mb-4 text-sm text-muted-foreground">
|
|
{officeDescription}
|
|
</p>
|
|
<a href="#" className="hover:underline">
|
|
{officeAddress}
|
|
</a>
|
|
</div>
|
|
<div className="rounded-xl bg-muted/50 p-8">
|
|
<Phone className="mb-4 size-5 text-muted-foreground" />
|
|
<p className="mb-1 font-medium">{phoneLabel}</p>
|
|
<p className="mb-4 text-sm text-muted-foreground">
|
|
{phoneDescription}
|
|
</p>
|
|
<a href={`tel:${phone}`} className="hover:underline" dir="rtl">
|
|
{phone}
|
|
</a>
|
|
</div>
|
|
<div className="rounded-xl bg-muted/50 p-8">
|
|
<MessageCircle className="mb-4 size-5 text-muted-foreground" />
|
|
<p className="mb-1 font-medium">{chatLabel}</p>
|
|
<p className="mb-4 text-sm text-muted-foreground">
|
|
{chatDescription}
|
|
</p>
|
|
<a href="#" className="hover:underline">
|
|
{chatLink}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Contact7 };
|