141 lines
4.8 KiB
TypeScript
141 lines
4.8 KiB
TypeScript
import { ExternalLink, Mail, MapPin, Phone } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Office {
|
|
id: string;
|
|
region: string;
|
|
city: string;
|
|
address: string;
|
|
phone: string;
|
|
email: string;
|
|
mapImage: string;
|
|
}
|
|
|
|
interface Contact24Props {
|
|
title?: string;
|
|
description?: string;
|
|
offices?: Office[];
|
|
className?: string;
|
|
}
|
|
|
|
const Contact24 = ({
|
|
title = "حضور سازمانی در مناطق کلیدی",
|
|
description = "دفاتر منطقهای ما استقرار CRM، پشتیبانی سازمانی و هماهنگی فروش را برای مشتریان enterprise در سراسر جهان پوشش میدهند.",
|
|
offices = [
|
|
{
|
|
id: "1",
|
|
region: "خاورمیانه",
|
|
city: "تهران",
|
|
address: "Valiasr St, District 6, Tehran, Iran",
|
|
phone: "۲۱-۱۲۳۴۵۶۷۸",
|
|
email: "tehran@company.com",
|
|
mapImage: "/block-media/shadcnblocks/block/maps/map-2.png",
|
|
},
|
|
{
|
|
id: "2",
|
|
region: "آمریکای شمالی",
|
|
city: "نیویورک",
|
|
address: "350 Fifth Avenue, Suite 4200, New York, NY 10118",
|
|
phone: "+1 (212) 555-0123",
|
|
email: "nyc@company.com",
|
|
mapImage: "/block-media/shadcnblocks/block/maps/map-2.png",
|
|
},
|
|
{
|
|
id: "3",
|
|
region: "اروپا",
|
|
city: "لندن",
|
|
address: "25 Bank Street, Canary Wharf, London E14 5JP",
|
|
phone: "+44 20 7555 0123",
|
|
email: "london@company.com",
|
|
mapImage: "/block-media/shadcnblocks/block/maps/map-3.png",
|
|
},
|
|
{
|
|
id: "4",
|
|
region: "آسیا و اقیانوسیه",
|
|
city: "سنگاپور",
|
|
address: "1 Raffles Place, Tower 2, Singapore 048616",
|
|
phone: "+65 6555 0123",
|
|
email: "singapore@company.com",
|
|
mapImage: "/block-media/shadcnblocks/block/maps/map-4.png",
|
|
},
|
|
],
|
|
className,
|
|
}: Contact24Props) => {
|
|
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 text-center">
|
|
<h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
|
|
{title}
|
|
</h1>
|
|
<p className="mx-auto max-w-2xl text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
{offices.map((office) => (
|
|
<div
|
|
key={office.id}
|
|
className="group overflow-hidden rounded-xl border bg-background"
|
|
>
|
|
<div className="relative h-48 overflow-hidden">
|
|
<img
|
|
src={office.mapImage}
|
|
alt={`نقشه دفتر سازمانی ${office.city}`}
|
|
className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent" />
|
|
<div className="absolute bottom-4 start-4">
|
|
<p className="text-xs font-medium tracking-wider text-muted-foreground">
|
|
{office.region}
|
|
</p>
|
|
<h3 className="text-xl font-semibold">{office.city}</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
<div className="mb-5 space-y-3 text-sm">
|
|
<div className="flex items-start gap-3">
|
|
<MapPin className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
|
|
<span dir="rtl" className="text-start">
|
|
{office.address}
|
|
</span>
|
|
</div>
|
|
<a
|
|
href={`tel:${office.phone}`}
|
|
className="flex items-center gap-3 hover:underline"
|
|
dir="rtl"
|
|
>
|
|
<Phone className="size-4 shrink-0 text-muted-foreground" />
|
|
{office.phone}
|
|
</a>
|
|
<a
|
|
href={`mailto:${office.email}`}
|
|
className="flex items-center gap-3 hover:underline"
|
|
dir="rtl"
|
|
>
|
|
<Mail className="size-4 shrink-0 text-muted-foreground" />
|
|
{office.email}
|
|
</a>
|
|
</div>
|
|
|
|
<Button variant="outline" className="w-full gap-2">
|
|
<ExternalLink className="size-4" />
|
|
مشاهده روی نقشه
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Contact24 };
|