93 lines
3.7 KiB
TypeScript
93 lines
3.7 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { site } from "@/data/site";
|
|
import { PageHeader } from "@/components/ui/PageHeader";
|
|
import { Container } from "@/components/ui/Container";
|
|
import { ContactForm } from "@/components/contact/ContactForm";
|
|
import { MailIcon, MapPinIcon, PhoneIcon } from "@/components/icons";
|
|
|
|
const mapQuery = encodeURIComponent(site.address);
|
|
const mapEmbedSrc = `https://maps.google.com/maps?q=${mapQuery}&hl=fa&z=${site.map.zoom}&output=embed`;
|
|
const mapLink = `https://www.google.com/maps/search/?api=1&query=${mapQuery}`;
|
|
|
|
export const metadata: Metadata = {
|
|
title: "تماس با ما",
|
|
description: `${site.address} — تلفن ${site.phones.join(" و ")}`,
|
|
alternates: { canonical: "/contact" },
|
|
};
|
|
|
|
export default function ContactPage() {
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
title="تماس با ما"
|
|
titleEn="CONTACT US"
|
|
description="در دسترس هستیم. در صورت نیاز به کمک سریع با ما تماس بگیرید."
|
|
/>
|
|
<Container className="grid gap-8 py-10 lg:grid-cols-2">
|
|
<div className="rounded-xl border border-line bg-white p-6">
|
|
<h2 className="mb-5 text-lg font-extrabold text-navy">اطلاعات تماس</h2>
|
|
<ul className="space-y-5 text-[15px] leading-8">
|
|
<li className="flex gap-3">
|
|
<span className="mt-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-navy text-white">
|
|
<MapPinIcon className="h-4 w-4" />
|
|
</span>
|
|
<div>
|
|
<p className="text-xs font-bold text-navy">آدرس</p>
|
|
<p className="text-muted">{site.address}</p>
|
|
</div>
|
|
</li>
|
|
<li className="flex gap-3">
|
|
<span className="mt-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-navy text-white">
|
|
<PhoneIcon className="h-4 w-4" />
|
|
</span>
|
|
<div>
|
|
<p className="text-xs font-bold text-navy">تلفن</p>
|
|
<p className="text-navy">{site.phones.join(" — ")}</p>
|
|
<p className="text-sm text-muted">فکس: {site.fax}</p>
|
|
</div>
|
|
</li>
|
|
<li className="flex gap-3">
|
|
<span className="mt-1 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-navy text-white">
|
|
<MailIcon className="h-4 w-4" />
|
|
</span>
|
|
<div>
|
|
<p className="text-xs font-bold text-navy">ایمیل</p>
|
|
<div className="space-y-0.5 font-display text-sm tracking-wide">
|
|
{site.emails.map((email) => (
|
|
<p key={email}>
|
|
<a href={`mailto:${email}`} className="text-muted hover:text-navy">
|
|
{email}
|
|
</a>
|
|
</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<ContactForm />
|
|
</Container>
|
|
<Container className="pb-14">
|
|
<div className="overflow-hidden rounded-xl border border-line">
|
|
<iframe
|
|
title="موقعیت شرکت فنی مهندسی سپهر صنعت"
|
|
src={mapEmbedSrc}
|
|
className="h-[240px] w-full border-0 sm:h-[380px]"
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
/>
|
|
</div>
|
|
<a
|
|
href={mapLink}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="mt-3 inline-flex items-center gap-2 text-sm font-bold text-brand hover:text-navy"
|
|
>
|
|
<MapPinIcon className="h-4 w-4" />
|
|
مشاهده در نقشه
|
|
</a>
|
|
</Container>
|
|
</>
|
|
);
|
|
}
|