Open the leather banner to the full viewport on scroll and align homepage frames.

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

src/components/home/ProductCard.tsx

@@ -5,6 +5,9 @@ import Link from "next/link";
 import type { Product } from "@/data/home";
 import { productPath } from "@/lib/product-path";
 
+const FALLBACK_DESC =
+  "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.";
+
 type ProductCardProps = {
   product: Product;
   className?: string;
@@ -13,6 +16,10 @@ type ProductCardProps = {
 export default function ProductCard({ product, className = "" }: ProductCardProps) {
   const href = product.href ?? productPath(product);
   const hoverSrc = product.imageHover;
+  const colors = product.colors ?? [];
+  const sizes = product.sizes ?? [];
+  const hasVars = colors.length > 0 || sizes.length > 0;
+  const description = product.description?.trim() || FALLBACK_DESC;
 
   return (
     <article
@@ -45,7 +52,7 @@ export default function ProductCard({ product, className = "" }: ProductCardProp
           </span>
         </span>
 
-        <span className="flex shrink-0 flex-col gap-2 px-3.5 pb-3.5 pt-1">
+        <span className="flex shrink-0 flex-col gap-1.5 px-3.5 pb-3.5 pt-1">
           <span className="w-full text-right">
             <span className="line-clamp-1 block text-[15px] font-medium text-ink">
               {product.nameFa}
@@ -58,14 +65,48 @@ export default function ProductCard({ product, className = "" }: ProductCardProp
             </span>
           </span>
 
-          <span
-            dir="ltr"
-            className="mt-1 flex items-baseline justify-start gap-1.5 border-t border-ink/15 pt-3 pb-0.5 transition-colors duration-300 ease-out group-hover:border-ink"
-          >
-            <span className="font-montserrat text-base font-normal leading-none text-ink sm:text-[17px]">
-              {product.price}
+          {hasVars ? (
+            <span className="flex flex-wrap items-center justify-start gap-2">
+              {sizes.length > 0 ? (
+                <span className="flex items-center gap-1" aria-label="سایزها" dir="ltr">
+                  {sizes.slice(0, 5).map((size) => (
+                    <span
+                      key={size.id}
+                      title={size.labelFa}
+                      className="inline-flex h-5 min-w-5 items-center justify-center rounded-[3px] border border-ink/20 px-1 font-montserrat text-[9px] font-medium uppercase leading-none text-ink"
+                    >
+                      {size.labelFa}
+                    </span>
+                  ))}
+                </span>
+              ) : null}
+              {colors.length > 0 ? (
+                <span className="flex items-center gap-1" aria-label="رنگ‌های موجود">
+                  {colors.slice(0, 6).map((color) => (
+                    <span
+                      key={color.id}
+                      title={color.labelFa}
+                      className="inline-block size-3.5 shrink-0 rounded-full border border-black/10"
+                      style={{ background: color.swatch || "#ccc" }}
+                    />
+                  ))}
+                </span>
+              ) : null}
             </span>
-            <span className="text-[9px] leading-none text-[#878787]">IRT</span>
+          ) : null}
+
+          <span
+            aria-hidden
+            className="mt-0.5 block h-px w-full bg-ink/10 transition-colors duration-300 ease-out group-hover:bg-ink/35"
+          />
+
+          {/* Vars occupy ~1 line — clamp desc to 1 so the image height stays even */}
+          <span
+            className={`${
+              hasVars ? "line-clamp-1" : "line-clamp-2"
+            } text-right text-[11px] font-light leading-relaxed text-[#6e6e6e]`}
+          >
+            {description}
           </span>
         </span>
       </Link>