Build the Salar Store storefront and connect products, blogs, and home specials to the Meshkee API.

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

components/ProductShelf.tsx

@@ -0,0 +1,38 @@
+import Image from "next/image";
+import type { Product } from "@/lib/data";
+import { Carousel } from "./Carousel";
+import { ProductCard } from "./ProductCard";
+
+type Props = {
+  id?: string;
+  image: string;
+  products: Product[];
+  ariaLabel: string;
+  tone?: "red" | "blue";
+};
+
+const gradients = {
+  red: "linear-gradient(90deg, #ff3b3b 0%, #fc2424 45%, #d91010 100%)",
+  blue: "linear-gradient(90deg, #4db3ff 0%, #1e88e5 48%, #0d5fb8 100%)",
+};
+
+export function ProductShelf({ id, image, products, ariaLabel, tone = "red" }: Props) {
+  return (
+    <section id={id} className="container-site mt-10">
+      <div className="rounded-2xl p-4 md:p-5" style={{ background: gradients[tone] }}>
+        <div className="flex items-stretch gap-3">
+          <div className="relative w-[150px] sm:w-[190px] shrink-0 min-h-[300px]">
+            <Image src={image} alt="" fill sizes="190px" className="object-contain object-center" />
+          </div>
+          <Carousel ariaLabel={ariaLabel} className="min-w-0 flex-1 py-1" tight>
+            {products.map((product) => (
+              <div key={product.id} className="snap-start shrink-0 w-[180px] sm:w-[200px]">
+                <ProductCard product={product} />
+              </div>
+            ))}
+          </Carousel>
+        </div>
+      </div>
+    </section>
+  );
+}