Build the Salar Store storefront and connect products, blogs, and home specials to the Meshkee API.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-16 01:36:29 +03:30
parent 2783305f07
commit 7d26eaa838
113 changed files with 3269 additions and 96 deletions
@@ -0,0 +1,94 @@
+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>
+    </>
+  );
+}