Add Shirzad Group storefront connected to the Meshkee Website API.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-17 09:28:26 +03:30
parent d44cfb3802
commit 8dcb899d8a
122 changed files with 2681 additions and 100 deletions
@@ -0,0 +1,62 @@
+import { HeroSlider } from "@/components/HeroSlider";
+import { SlotBanner } from "@/components/SlotBanner";
+import { site } from "@/data/site";
+import { padSlotImages, slotImages, type StaticImageSlot } from "@/lib/static-images";
+
+type Props = {
+  slider?: StaticImageSlot;
+  beside?: StaticImageSlot;
+};
+
+const sliderFallback = {
+  src: "/images/banners/hero.jpg",
+  alt: site.slogan,
+  href: "/products",
+  width: 1538,
+  height: 870,
+};
+
+const besideFallbacks = [
+  {
+    src: "/images/banners/side-chicks.jpg",
+    alt: "انواع تخم نطفه‌دار",
+    href: "/products?categoryId=548",
+    width: 370,
+    height: 205,
+  },
+  {
+    src: "/images/banners/side-eggs.jpg",
+    alt: "انواع تخم مرغ",
+    href: "/products?categoryId=548",
+    width: 370,
+    height: 205,
+  },
+];
+
+export function Hero({ slider, beside }: Props) {
+  const besideImages = padSlotImages(beside, 2).slice(0, 2);
+
+  return (
+    <section className="mx-auto grid max-w-7xl gap-4 px-4 py-6 lg:grid-cols-[2fr_1fr]">
+      <h1 className="sr-only">{site.name}</h1>
+      <HeroSlider
+        images={slotImages(slider)}
+        aspectRatio={slider?.aspectRatio}
+        fallback={sliderFallback}
+        imageClassName="h-full min-h-[280px] w-full object-cover sm:min-h-[360px]"
+      />
+
+      <div className="grid gap-4">
+        {besideImages.map((image, index) => (
+          <SlotBanner
+            key={image?.id ?? besideFallbacks[index].src}
+            image={image}
+            fallback={besideFallbacks[index]}
+            aspectRatio={beside?.aspectRatio}
+            imageClassName="h-full min-h-[160px] w-full object-cover"
+          />
+        ))}
+      </div>
+    </section>
+  );
+}