Connect the storefront to the Meshkee Website API.

Products, blog, search, mega menu, and home carousels now read live tenant data, and login goes to the customer portal.

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

src/components/ProductGallery.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useState } from "react";
+import { Placeholder } from "@/components/Placeholder";
+
+export function ProductGallery({ images, title }: { images: string[]; title: string }) {
+  const gallery = images.filter(Boolean);
+  const [active, setActive] = useState(0);
+  const current = gallery[active] || gallery[0];
+
+  if (!current) return null;
+
+  return (
+    <div>
+      <Placeholder src={current} alt={title} width={720} height={720} rounded="rounded-3xl" />
+      {gallery.length > 1 ? (
+        <div className="mt-3 flex flex-wrap gap-2">
+          {gallery.slice(0, 8).map((image, index) => (
+            <button
+              key={`${image}-${index}`}
+              type="button"
+              onClick={() => setActive(index)}
+              className={`overflow-hidden rounded-2xl ${
+                index === active ? "ring-2 ring-purple-600" : "ring-1 ring-line"
+              }`}
+            >
+              <Placeholder src={image} alt="" width={72} height={72} rounded="rounded-none" className="size-[72px] object-cover" />
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}