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

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

components/Brands.tsx

@@ -0,0 +1,21 @@
+import Image from "next/image";
+import { brands } from "@/lib/data";
+import { Carousel } from "./Carousel";
+
+export function Brands() {
+  return (
+    <section className="container-site mt-12">
+      <h2 className="section-title mb-6">برندها</h2>
+      <Carousel ariaLabel="برندها">
+        {brands.map((brand) => (
+          <div
+            key={brand.name}
+            className="snap-start shrink-0 w-[168px] sm:w-[196px] h-[108px] rounded-xl bg-white border border-black/5 grid place-items-center px-3"
+          >
+            <Image src={brand.image} alt={brand.name} width={180} height={80} className="max-h-[72px] w-auto object-contain" />
+          </div>
+        ))}
+      </Carousel>
+    </section>
+  );
+}