create banner

src/components/home/BrandGroupCarousels.tsx

@@ -0,0 +1,42 @@
+import { Carousel } from "@/components/ui/Carousel";
+import { ProductCard } from "@/components/ui/ProductCard";
+import { SectionTitle } from "@/components/ui/SectionTitle";
+import { EmptyState } from "@/components/ui/EmptyState";
+import type { ProductGroup } from "@/lib/meshkee";
+
+export function BrandGroupCarousels({ brandGroups }: { brandGroups: ProductGroup[] }) {
+  if (brandGroups.length === 0) {
+    return (
+      <section className="py-10 md:py-14">
+        <div className="mx-auto max-w-7xl px-4">
+          <SectionTitle title="محصولات برندها" enTitle="Brand Collections" />
+          <EmptyState message="هنوز محصولی برای برندها ثبت نشده است." />
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <>
+      {brandGroups.map((group) => (
+        <section key={group.id} className="py-10 md:py-14">
+          <div className="mx-auto max-w-7xl px-4">
+            <SectionTitle title={group.title} enTitle={group.title} action="مشاهده همه" />
+            <Carousel ariaLabel={`کاروسل ${group.title}`}>
+              {group.items.map((product) => (
+                <ProductCard
+                  key={product.id}
+                  name={product.name}
+                  brand={product.brand ?? ""}
+                  price={product.price}
+                  image={product.image ?? "/images/placeholder.svg"}
+                  variant="brand"
+                />
+              ))}
+            </Carousel>
+          </div>
+        </section>
+      ))}
+    </>
+  );
+}