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,77 @@
+import Image from "next/image";
+import { ABOUT } from "@/data/home";
+
+type AboutSectionProps = {
+  titleFa?: string;
+  titleEn?: string;
+  lead?: string;
+  body?: string;
+  image?: string;
+  imageSecondary?: string;
+};
+
+export default function AboutSection({
+  titleFa = ABOUT.titleFa,
+  titleEn = ABOUT.titleEn,
+  lead = ABOUT.lead,
+  body = ABOUT.body,
+  image = ABOUT.image,
+  imageSecondary = ABOUT.imageSecondary,
+}: AboutSectionProps) {
+  return (
+    <section id="about" dir="rtl" className="scroll-mt-24 bg-white py-16 lg:py-24">
+      <div className="mx-auto grid max-w-[1200px] items-center gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:gap-16 lg:px-8">
+        <div className="relative mx-auto w-full max-w-[520px] lg:mx-0">
+          <div
+            aria-hidden
+            className="absolute -inset-x-4 top-8 bottom-0 -z-0 rounded-[5px] border border-ink/15 bg-[#f3f3f3] sm:-inset-x-6 lg:inset-x-0 lg:-start-8 lg:end-12 lg:top-12"
+            style={{
+              backgroundImage:
+                "radial-gradient(circle, rgba(10,10,10,0.14) 1px, transparent 1.2px)",
+              backgroundSize: "14px 14px",
+            }}
+          />
+
+          <div className="relative z-10 aspect-[4/5] w-[78%] overflow-hidden rounded-[5px] bg-[#ebe6df]">
+            <Image
+              src={image}
+              alt={titleFa}
+              fill
+              sizes="(max-width: 1024px) 70vw, 380px"
+              className="object-cover object-[center_18%]"
+            />
+          </div>
+
+          <div className="absolute bottom-0 end-0 z-20 aspect-[3/4] w-[48%] overflow-hidden rounded-[5px] border border-white shadow-[0_12px_40px_rgba(0,0,0,0.12)]">
+            <Image
+              src={imageSecondary}
+              alt=""
+              fill
+              sizes="(max-width: 1024px) 40vw, 240px"
+              className="object-cover object-top"
+            />
+          </div>
+        </div>
+
+        <div className="relative text-right">
+          <p
+            dir="ltr"
+            aria-hidden
+            className="pointer-events-none absolute -top-4 start-0 font-doran text-[clamp(2rem,5vw,3.5rem)] font-normal tracking-[0.08em] text-ink/10"
+          >
+            {titleEn}
+          </p>
+          <h2 className="font-doran relative text-[clamp(1.75rem,3vw,2.5rem)] font-light text-ink">
+            {titleFa}
+          </h2>
+          <p className="font-doran mt-4 text-base font-medium text-ink sm:text-lg">
+            {lead}
+          </p>
+          <p className="mt-4 text-sm font-light leading-8 text-ink/75 sm:text-[15px] sm:leading-8">
+            {body}
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}