94 lines
4.1 KiB
TypeScript
94 lines
4.1 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { Mail, MapPin, Send } from "lucide-react";
|
|
import { Container } from "@/components/Container";
|
|
import { ContactForm } from "@/components/contact/ContactForm";
|
|
import { PageHero } from "@/components/layout/PageHero";
|
|
import { Placeholder } from "@/components/Placeholder";
|
|
import { branches, phones, site } from "@/lib/data";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "ارتباط با ما",
|
|
description: "آدرس شعب، تلفن و فرم تماس فروشگاه و تعمیرگاه برادران برقعی در قم.",
|
|
};
|
|
|
|
export default function ContactPage() {
|
|
return (
|
|
<>
|
|
<PageHero kicker="Contact us" title="ارتباط با ما" image="/images/lifestyle/theme-photos-Klby0nxseY8-unsplash.jpg" />
|
|
|
|
<section className="py-16 sm:py-20">
|
|
<Container>
|
|
<p className="max-w-2xl text-[16px] leading-8 text-muted">
|
|
مجموعه ی فروشگاه و تعمیرگاه برادران برقعی دارای فعالیت در زمینه های فروش لوازم خانگی، فروش قطعات لوازم خانگی
|
|
و تعمیرات آنها می باشد.
|
|
</p>
|
|
|
|
<div className="mt-10 grid gap-5 md:grid-cols-2">
|
|
{branches.map((branch) => (
|
|
<article key={branch.id} className="overflow-hidden rounded-2xl border border-line">
|
|
<div className="relative aspect-[16/7]">
|
|
<Placeholder src={branch.image} alt={branch.title} className="h-full w-full object-cover" />
|
|
</div>
|
|
<div className="flex gap-3 p-5">
|
|
<MapPin className="mt-1 size-5 shrink-0 text-brand" />
|
|
<div>
|
|
<h2 className="text-[16px] font-bold">{branch.title}</h2>
|
|
<p className="mt-1 text-[14px] leading-7 text-muted">{branch.address}</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
<section className="bg-paper py-16 sm:py-20">
|
|
<Container className="grid gap-12 lg:grid-cols-12">
|
|
<div className="lg:col-span-5">
|
|
<h2 className="text-[22px] font-bold">تلفن و تلگرام</h2>
|
|
<ul className="mt-6 divide-y divide-line overflow-hidden rounded-2xl border border-line bg-white">
|
|
{phones.map((phone) => (
|
|
<li key={phone.value} className="flex items-center justify-between gap-3 px-4 py-3">
|
|
<span className="text-[12px] text-muted">{phone.label}</span>
|
|
<a href={phone.href} className="font-latin text-[16px] font-medium hover:text-brand" dir="ltr">
|
|
{phone.value}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="mt-6 space-y-3 text-[14px]">
|
|
<a href={`mailto:${site.email}`} className="flex items-center gap-2 hover:text-brand">
|
|
<Mail className="size-4 text-brand" />
|
|
{site.emailLabel}
|
|
</a>
|
|
<a
|
|
href={site.telegram}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="flex items-center gap-2 hover:text-brand"
|
|
>
|
|
<Send className="size-4 text-brand" />
|
|
کانال تلگرام borgheeibrothers
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-2xl bg-white p-6 sm:p-8 lg:col-span-7">
|
|
<h2 className="mb-2 text-[22px] font-bold">پیام ارسال کنید</h2>
|
|
<p className="mb-6 text-[13px] text-muted">نام، شماره و پیام — پاسخ از شعبه قم.</p>
|
|
<ContactForm />
|
|
<div className="mt-8 overflow-hidden rounded-2xl">
|
|
<iframe
|
|
title="موقعیت فروشگاه برادران برقعی"
|
|
src={site.map.embed}
|
|
className="h-[280px] w-full"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|