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/FeaturedCategories.tsx

@@ -1,9 +1,45 @@
+import type { ReactNode } from "react";
 import Link from "next/link";
 import { Container } from "@/components/Container";
-import { Placeholder } from "@/components/Placeholder";
+import { SlotMedia } from "@/components/SlotMedia";
 import { categories } from "@/lib/data";
+import type { SlotMediaItem } from "@/lib/static-images";
+
+function CardWrap({ href, children }: { href?: string; children: ReactNode }) {
+  const className =
+    "group flex flex-col items-center gap-2 rounded-2xl bg-white p-3 text-center transition hover:-translate-y-0.5";
+  if (!href) return <div className={className}>{children}</div>;
+  if (href.startsWith("/") || href.startsWith("#")) {
+    return (
+      <Link href={href} className={className}>
+        {children}
+      </Link>
+    );
+  }
+  return (
+    <a href={href} className={className}>
+      {children}
+    </a>
+  );
+}
+
+export function FeaturedCategories({
+  items,
+  aspectRatio,
+}: {
+  items?: SlotMediaItem[];
+  aspectRatio?: string;
+}) {
+  const list: SlotMediaItem[] =
+    items && items.length > 0
+      ? items
+      : categories.map((category) => ({
+          id: category.id,
+          image: category.image,
+          href: category.href,
+          title: category.title,
+        }));
 
-export function FeaturedCategories() {
   return (
     <section id="categories" className="pt-10">
       <Container>
@@ -14,19 +50,23 @@ export function FeaturedCategories() {
           </div>
         </div>
         <div className="grid grid-cols-4 gap-3 md:grid-cols-8">
-          {categories.map((category) => (
-            <Link
-              key={category.id}
-              href={category.href}
-              className="group flex flex-col items-center gap-2 rounded-2xl bg-white p-3 text-center transition hover:-translate-y-0.5"
-            >
+          {list.map((category) => (
+            <CardWrap key={category.id} href={category.href}>
               <span className="grid size-[72px] place-items-center overflow-hidden rounded-2xl bg-sky sm:size-[84px]">
-                <Placeholder src={category.image} className="size-full object-cover" />
+                <SlotMedia
+                  src={category.image}
+                  fallbackSrc={category.fallbackSrc}
+                  aspectRatio={aspectRatio}
+                  className="size-full overflow-hidden rounded-2xl"
+                  imgClassName="absolute inset-0 size-full object-cover"
+                />
               </span>
-              <span className="text-[12px] font-medium text-ink group-hover:text-primary sm:text-[13px]">
-                {category.title}
-              </span>
-            </Link>
+              {category.title ? (
+                <span className="text-[12px] font-medium text-ink group-hover:text-primary sm:text-[13px]">
+                  {category.title}
+                </span>
+              ) : null}
+            </CardWrap>
           ))}
         </div>
       </Container>