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

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+import Link from "next/link";
+import { Placeholder } from "@/components/Placeholder";
+import { parseAspectRatio } from "@/lib/static-images";
+
+type SlotMediaProps = {
+  src: string;
+  alt?: string;
+  href?: string;
+  fallbackSrc?: string;
+  aspectRatio?: string;
+  className?: string;
+  imgClassName?: string;
+  fill?: boolean;
+};
+
+function wrap(href: string | undefined, children: ReactNode, className?: string) {
+  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 SlotMedia({
+  src,
+  alt = "",
+  href,
+  fallbackSrc,
+  aspectRatio,
+  className = "",
+  imgClassName = "absolute inset-0 h-full w-full object-cover",
+  fill = false,
+}: SlotMediaProps) {
+  const image = <Placeholder src={src} fallbackSrc={fallbackSrc} alt={alt} className={imgClassName} />;
+
+  if (fill) {
+    return wrap(href, image, `absolute inset-0 ${className}`.trim());
+  }
+
+  const ratio = parseAspectRatio(aspectRatio);
+  return wrap(
+    href,
+    <span className="relative block h-full w-full overflow-hidden" style={ratio ? { aspectRatio: ratio } : undefined}>
+      {image}
+    </span>,
+    className,
+  );
+}