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,112 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import SiteHeader from "@/components/home/SiteHeader";
+import SiteFooter from "@/components/home/SiteFooter";
+import AboutSection from "@/components/home/AboutSection";
+import PartnerCta from "@/components/home/PartnerCta";
+import ProductListHero from "@/components/products/ProductListHero";
+import { ABOUT_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: ABOUT_PAGE.lead,
+};
+
+export default async function AboutPage() {
+  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={ABOUT_PAGE.titleFa}
+          titleEn={ABOUT_PAGE.titleEn}
+          heroImage={home.heroSlides[0]?.image || ABOUT_PAGE.heroImage}
+          breadcrumbs={ABOUT_PAGE.breadcrumbs}
+        />
+      </div>
+
+      <AboutSection
+        titleFa={home.about.titleFa}
+        titleEn={home.about.titleEn}
+        lead={home.about.lead}
+        body={home.about.body}
+        image={home.about.image}
+        imageSecondary={home.about.imageSecondary}
+      />
+
+      <section className="mx-auto max-w-[1200px] px-4 py-12 sm:px-6 sm:py-16 lg:px-8">
+        <div className="grid gap-10 lg:grid-cols-2 lg:gap-14 lg:items-start">
+          <div>
+            <h2 className="font-doran text-2xl font-light text-ink">
+              {ABOUT_PAGE.storyTitleFa}
+            </h2>
+            <p
+              dir="ltr"
+              className="mt-1 font-montserrat text-[10px] uppercase tracking-[0.16em] text-muted"
+            >
+              {ABOUT_PAGE.storyTitleEn}
+            </p>
+            <p className="mt-6 text-sm leading-8 text-ink/80">
+              {ABOUT_PAGE.story}
+            </p>
+            <Link
+              href="/contact"
+              className="mt-8 inline-flex border border-ink px-5 py-2.5 text-sm transition-colors hover:bg-ink hover:text-white"
+            >
+              تماس با ما
+            </Link>
+          </div>
+          <ul className="space-y-6">
+            {ABOUT_PAGE.values.map((value) => (
+              <li
+                key={value.titleEn}
+                className="border border-line bg-[#f7f7f5] p-5"
+              >
+                <p className="text-base text-ink">{value.titleFa}</p>
+                <p
+                  dir="ltr"
+                  className="mt-1 font-montserrat text-[10px] uppercase tracking-[0.16em] text-muted"
+                >
+                  {value.titleEn}
+                </p>
+                <p className="mt-3 text-sm leading-7 text-ink/75">
+                  {value.body}
+                </p>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="relative mt-12 aspect-[21/9] overflow-hidden bg-[#f3f3f1]">
+          <Image
+            src={home.about.imageSecondary || ABOUT_PAGE.imageSecondary}
+            alt=""
+            fill
+            sizes="100vw"
+            className="object-cover"
+          />
+        </div>
+      </section>
+
+      <PartnerCta />
+      <SiteFooter paymentBadges={home.paymentBadges} />
+    </main>
+  );
+}