Initial commit: BRB Store Next.js storefront with Meshkee image slots.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-21 12:13:41 +03:30
commit cfa21cbee9
79 changed files with 9482 additions and 0 deletions
@@ -0,0 +1,93 @@
+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>
+    </>
+  );
+}