95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { ContactForm } from "@/components/ContactForm";
|
|
import { PageHero } from "@/components/PageHero";
|
|
import { IconInstagram, IconPhone, IconPin, IconTelegram, IconWhatsapp } from "@/components/Icons";
|
|
import { SITE } from "@/lib/site";
|
|
|
|
export const metadata: Metadata = {
|
|
title: `تماس با ما | ${SITE.nameFa}`,
|
|
description: SITE.address,
|
|
};
|
|
|
|
const contacts = [
|
|
{
|
|
href: `tel:${SITE.phone}`,
|
|
label: SITE.phoneDisplay,
|
|
dir: "ltr" as const,
|
|
numeric: true,
|
|
icon: IconPhone,
|
|
},
|
|
{
|
|
href: SITE.whatsapp,
|
|
label: SITE.phoneDisplay,
|
|
dir: "ltr" as const,
|
|
numeric: true,
|
|
icon: IconWhatsapp,
|
|
},
|
|
{
|
|
href: SITE.instagram,
|
|
label: SITE.instagramHandle,
|
|
dir: "ltr" as const,
|
|
numeric: false,
|
|
icon: IconInstagram,
|
|
},
|
|
{
|
|
href: SITE.telegram,
|
|
label: SITE.telegramHandle,
|
|
dir: "ltr" as const,
|
|
numeric: false,
|
|
icon: IconTelegram,
|
|
},
|
|
{
|
|
href: undefined,
|
|
label: SITE.address,
|
|
dir: undefined,
|
|
numeric: false,
|
|
icon: IconPin,
|
|
},
|
|
];
|
|
|
|
export default function ContactPage() {
|
|
return (
|
|
<>
|
|
<PageHero title="تماس با ما" english="Contact Us" />
|
|
<section className="container-site py-10 md:py-14">
|
|
<div className="grid gap-8 lg:grid-cols-[280px_1fr] items-start">
|
|
<div className="rounded-2xl border border-black/5 divide-y divide-black/5">
|
|
{contacts.map((item) => {
|
|
const Icon = item.icon;
|
|
const content = (
|
|
<>
|
|
<span className="grid place-items-center size-10 rounded-full bg-zinc-50 text-brand shrink-0">
|
|
<Icon className="w-5 h-5" />
|
|
</span>
|
|
<span dir={item.dir} className={item.numeric ? "font-oswald tracking-wide" : ""}>
|
|
{item.label}
|
|
</span>
|
|
</>
|
|
);
|
|
|
|
if (!item.href) {
|
|
return (
|
|
<div key={item.label} className="flex items-center gap-3 px-4 py-4 text-sm">
|
|
{content}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<a
|
|
key={item.href + item.label}
|
|
href={item.href}
|
|
className="flex items-center gap-3 px-4 py-4 text-sm hover:text-brand"
|
|
>
|
|
{content}
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
<ContactForm />
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|