Connect storefront to backend catalog, search, and home slots.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-27 18:30:52 +03:30
parent 2f857f1a90
commit 0074ab6629
106 changed files with 5920 additions and 81 deletions
@@ -0,0 +1,109 @@
+import type { Metadata } from "next";
+import SiteHeader from "@/components/home/SiteHeader";
+import SiteFooter from "@/components/home/SiteFooter";
+import PartnerCta from "@/components/home/PartnerCta";
+import ProductListHero from "@/components/products/ProductListHero";
+import ContactForm from "@/components/contact/ContactForm";
+import { CONTACT_PAGE } from "@/data/pages";
+import { mapHomeSlots } from "@/lib/map-home-slots";
+import { fetchPublicWebsiteSlots } from "@/lib/website-slots";
+import {
+  fetchPublicCategories,
+  mapCategoriesToMegaTabs,
+} from "@/lib/categories-api";
+
+export const metadata: Metadata = {
+  title: "تماس با ما | مانا کالکشن",
+  description: CONTACT_PAGE.lead,
+};
+
+export default async function ContactPage() {
+  const [slotItems, apiCategories] = await Promise.all([
+    fetchPublicWebsiteSlots(),
+    fetchPublicCategories(),
+  ]);
+  const home = mapHomeSlots(slotItems);
+  const megaTabs = mapCategoriesToMegaTabs(
+    apiCategories,
+    home.megaTabs.map((t) => ({ image: t.image })),
+  );
+
+  return (
+    <main className="home-page min-h-dvh bg-white text-ink">
+      <div className="relative">
+        <SiteHeader megaTabs={megaTabs.length ? megaTabs : home.megaTabs} />
+        <ProductListHero
+          titleFa={CONTACT_PAGE.titleFa}
+          titleEn={CONTACT_PAGE.titleEn}
+          heroImage={home.heroSlides[0]?.image || CONTACT_PAGE.heroImage}
+          breadcrumbs={CONTACT_PAGE.breadcrumbs}
+        />
+      </div>
+
+      <div className="mx-auto max-w-[1200px] px-4 py-12 sm:px-6 sm:py-16 lg:px-8">
+        <div className="grid grid-cols-1 gap-10 lg:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)] lg:gap-14">
+          <aside className="space-y-6 border border-line bg-[#f7f7f5] p-6 sm:p-8">
+            <div>
+              <h2 className="font-doran text-2xl font-light text-ink">
+                اطلاعات تماس
+              </h2>
+              <p
+                dir="ltr"
+                className="mt-1 font-montserrat text-[10px] uppercase tracking-[0.16em] text-muted"
+              >
+                Get in touch
+              </p>
+            </div>
+
+            <dl className="space-y-4 text-sm leading-7">
+              <div>
+                <dt className="text-muted">آدرس</dt>
+                <dd className="text-ink">{CONTACT_PAGE.address}</dd>
+              </div>
+              <div>
+                <dt className="text-muted">تلفن فروشگاه</dt>
+                <dd dir="ltr" className="font-montserrat text-ink">
+                  {CONTACT_PAGE.phoneStore}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-muted">تلفن همراه</dt>
+                <dd dir="ltr" className="font-montserrat text-ink">
+                  {CONTACT_PAGE.phoneMobile}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-muted">ایمیل</dt>
+                <dd dir="ltr" className="font-montserrat text-ink">
+                  {CONTACT_PAGE.email}
+                </dd>
+              </div>
+              <div>
+                <dt className="text-muted">ساعات پاسخگویی</dt>
+                <dd className="text-ink">{CONTACT_PAGE.hours}</dd>
+              </div>
+            </dl>
+          </aside>
+
+          <div>
+            <h2 className="font-doran text-2xl font-light text-ink">
+              فرم تماس
+            </h2>
+            <p
+              dir="ltr"
+              className="mt-1 font-montserrat text-[10px] uppercase tracking-[0.16em] text-muted"
+            >
+              Send a message
+            </p>
+            <div className="mt-6">
+              <ContactForm />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <PartnerCta />
+      <SiteFooter paymentBadges={home.paymentBadges} />
+    </main>
+  );
+}