111 lines
3.5 KiB
TypeScript
111 lines
3.5 KiB
TypeScript
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 BilingualTitle from "@/components/ui/BilingualTitle";
|
|
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-background 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>
|
|
<BilingualTitle
|
|
titleFa={ABOUT_PAGE.storyTitleFa}
|
|
titleEn={ABOUT_PAGE.storyTitleEn}
|
|
size="md"
|
|
align="end"
|
|
/>
|
|
<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"
|
|
>
|
|
<BilingualTitle
|
|
titleFa={value.titleFa}
|
|
titleEn={value.titleEn}
|
|
as="p"
|
|
size="md"
|
|
align="end"
|
|
/>
|
|
<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>
|
|
);
|
|
}
|