Connect the storefront to Meshkee catalog, blogs, and static image slots.

Wire homepage specials, product/blog pages, instant search, and the customer portal so the live pharmacy site can be managed from the dashboard.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/page.tsx

@@ -1,6 +1,3 @@
-import { TopBar } from "@/components/layout/TopBar";
-import { Header } from "@/components/layout/Header";
-import { Footer } from "@/components/layout/Footer";
 import { Hero } from "@/components/home/Hero";
 import { FeaturedCategories } from "@/components/home/FeaturedCategories";
 import { SiteFeatures } from "@/components/home/SiteFeatures";
@@ -9,47 +6,103 @@ import { BannerRow } from "@/components/home/BannerRow";
 import { AboutDoctor } from "@/components/home/AboutDoctor";
 import { BlogCarousel } from "@/components/home/BlogCarousel";
 import { FaqPreview } from "@/components/home/FaqPreview";
-import { specialSale, topSelling, twoBanners, tripleBanners, yeganehProducts } from "@/lib/data";
-import { getLogoSrc, getSlides } from "@/lib/media";
+import { categories, heroBanners, specialSale, twoBanners, tripleBanners, yeganehProducts } from "@/lib/data";
+import { getSlides } from "@/lib/media";
+import { fetchStaticImageSlots, overlaySlotImages, pickSlot } from "@/lib/static-images";
+import { fetchBlogs } from "@/lib/blog";
+import { fetchSpecialProducts } from "@/lib/store";
 
-export default function HomePage() {
-  const slides = getSlides();
-  const logoSrc = getLogoSrc();
+export const revalidate = 60;
+
+const placeholderSlides = [
+  { id: "slide-1", image: "/placeholders/slider-1.svg", href: "#" },
+  { id: "slide-2", image: "/placeholders/slider-2.svg", href: "#" },
+  { id: "slide-3", image: "/placeholders/slider-3.svg", href: "#" },
+];
+
+export default async function HomePage() {
+  const [slots, sale, vitamins, bodybuilding, blogs] = await Promise.all([
+    fetchStaticImageSlots("home"),
+    fetchSpecialProducts("special-sale"),
+    fetchSpecialProducts("multi-vitamin"),
+    fetchSpecialProducts("body-building-supplement"),
+    fetchBlogs({ pageSize: 8 }),
+  ]);
+  const localSlides = getSlides();
+
+  const slider = overlaySlotImages(
+    pickSlot(slots, "slider"),
+    localSlides.length ? localSlides : placeholderSlides,
+    "slider",
+  );
+  const belowSlider = overlaySlotImages(
+    pickSlot(slots, "two-banner-below-slider"),
+    heroBanners.map((banner) => ({ id: banner.id, image: banner.image, href: banner.href })),
+    "two-banner-below-slider",
+  );
+  const categoryItems = overlaySlotImages(
+    pickSlot(slots, "categories"),
+    categories.map((category) => ({
+      id: category.id,
+      image: category.image,
+      href: category.href,
+      title: category.title,
+    })),
+    "categories",
+  );
+  const twoBannerRow = overlaySlotImages(
+    pickSlot(slots, "two-banner-row"),
+    twoBanners.map((banner) => ({ id: banner.id, image: banner.image, href: banner.href })),
+    "two-banner-row",
+  );
+  const threeBannerRow = overlaySlotImages(
+    pickSlot(slots, "three-banner-row"),
+    tripleBanners.map((banner) => ({ id: banner.id, image: banner.image, href: banner.href })),
+    "three-banner-row",
+  );
+  const aboutImage = overlaySlotImages(
+    pickSlot(slots, "about-us-image"),
+    [{ id: "about", image: "/placeholders/doctor.svg" }],
+    "about-us-image",
+  );
 
   return (
     <>
-      <TopBar />
-      <Header logoSrc={logoSrc} />
-      <main className="pb-12">
-        <Hero slides={slides} />
-        <FeaturedCategories />
-        <SiteFeatures />
-        <ProductCarousel
-          id="special-sale"
-          title="فروش ویژه"
-          subtitle="تخفیف‌های منتخب امروز داروخانه"
-          products={specialSale}
-          accent="sale"
-        />
-        <BannerRow banners={twoBanners} columns={2} />
-        <ProductCarousel
-          id="top-selling"
-          title="پرفروش‌ترین محصولات"
-          subtitle="پیشنهاد ویژه مشتریان"
-          products={topSelling}
-        />
-        <BannerRow banners={tripleBanners} columns={3} />
-        <ProductCarousel
-          id="yeganeh"
-          title="محصولات برند یگانه"
-          subtitle="مکمل‌های منتخب Yeganeh"
-          products={yeganehProducts}
-        />
-        <AboutDoctor />
-        <BlogCarousel />
-        <FaqPreview />
-      </main>
-      <Footer logoSrc={logoSrc} />
+      <Hero
+        slides={slider.items}
+        banners={belowSlider.items}
+        sliderAspectRatio={slider.aspectRatio}
+        bannerAspectRatio={belowSlider.aspectRatio}
+      />
+      <FeaturedCategories items={categoryItems.items} aspectRatio={categoryItems.aspectRatio} />
+      <SiteFeatures />
+      <ProductCarousel
+        id="special-sale"
+        title={sale.special?.title || "فروش ویژه"}
+        subtitle="تخفیف‌های منتخب امروز داروخانه"
+        products={sale.products.length ? sale.products : specialSale}
+        href="/products"
+        accent="sale"
+      />
+      <BannerRow banners={twoBannerRow.items} columns={2} aspectRatio={twoBannerRow.aspectRatio} />
+      <ProductCarousel
+        id="multi-vitamin"
+        title={vitamins.special?.title || "مولتی ویتامین‌ها"}
+        subtitle="مکمل‌های ویتامینه منتخب"
+        products={vitamins.products.length ? vitamins.products : yeganehProducts}
+        href="/products"
+      />
+      <BannerRow banners={threeBannerRow.items} columns={3} aspectRatio={threeBannerRow.aspectRatio} />
+      <ProductCarousel
+        id="body-building-supplement"
+        title={bodybuilding.special?.title || "مکمل‌های بدنسازی"}
+        subtitle="پروتئین، کراتین و مکمل ورزشی"
+        products={bodybuilding.products.length ? bodybuilding.products : specialSale}
+        href="/products"
+      />
+      <AboutDoctor image={aboutImage.items[0]} aspectRatio={aboutImage.aspectRatio} />
+      <BlogCarousel posts={blogs.items} />
+      <FaqPreview />
     </>
   );
 }