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>

components/home/BannerRow.tsx

@@ -1,18 +1,29 @@
-import Link from "next/link";
 import { Container } from "@/components/Container";
-import { Placeholder } from "@/components/Placeholder";
+import { SlotMedia } from "@/components/SlotMedia";
+import type { SlotMediaItem } from "@/lib/static-images";
 
-type Banner = { id: string; image: string; href: string };
-
-export function BannerRow({ banners, columns }: { banners: Banner[]; columns: 2 | 3 }) {
+export function BannerRow({
+  banners,
+  columns,
+  aspectRatio,
+}: {
+  banners?: SlotMediaItem[];
+  columns: 2 | 3;
+  aspectRatio?: string;
+}) {
   return (
     <section className="pt-8">
       <Container>
         <div className={`grid gap-3 ${columns === 3 ? "sm:grid-cols-3" : "sm:grid-cols-2"}`}>
-          {banners.map((banner) => (
-            <Link key={banner.id} href={banner.href} className="overflow-hidden rounded-xl bg-sky">
-              <Placeholder src={banner.image} className="h-[100px] w-full object-cover sm:h-[118px]" />
-            </Link>
+          {(banners ?? []).map((banner) => (
+            <SlotMedia
+              key={banner.id}
+              src={banner.image}
+              href={banner.href}
+              fallbackSrc={banner.fallbackSrc}
+              aspectRatio={aspectRatio}
+              className={`rounded-xl bg-sky ${!aspectRatio ? "h-[100px] sm:h-[118px]" : ""}`}
+            />
           ))}
         </div>
       </Container>