Add Torob tags, Meshkee SEO routes, and updated static-image slots.

Product pages emit crawler-readable meta, public URLs use id plus Farsi slugs, and the homepage catalog matches the dashboard slot keys.

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

components/Brands.tsx

@@ -1,20 +1,56 @@
 import Image from "next/image";
+import { SlotImage } from "@/components/SlotImage";
 import { brands } from "@/lib/data";
+import type { StaticImageWithUrl } from "@/lib/static-images";
+import { slotAlt, slotAspectStyle } from "@/lib/static-images";
 import { Carousel } from "./Carousel";
 
-export function Brands() {
+type Props = {
+  images?: StaticImageWithUrl[];
+  aspectRatio?: string;
+};
+
+export function Brands({ images = [], aspectRatio }: Props) {
   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>
-        ))}
+        {images.length > 0
+          ? images.map((image) => {
+              const card = (
+                <div
+                  className="snap-start shrink-0 w-[168px] sm:w-[196px] rounded-xl bg-white border border-black/5 grid place-items-center px-3"
+                  style={slotAspectStyle(aspectRatio, "2:1")}
+                >
+                  <SlotImage
+                    image={{ ...image, linkUrl: null }}
+                    alt={slotAlt(image, "برند")}
+                    imgClassName="max-h-[72px] w-auto object-contain"
+                  />
+                </div>
+              );
+              return image.linkUrl ? (
+                <a key={image.id} href={image.linkUrl} className="snap-start shrink-0">
+                  {card}
+                </a>
+              ) : (
+                <div key={image.id}>{card}</div>
+              );
+            })
+          : 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>
   );