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

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

src/app/page.tsx

@@ -1,6 +1,7 @@
 import SiteHeader from "@/components/home/SiteHeader";
 import HeroSlider from "@/components/home/HeroSlider";
-import CategoryStrip from "@/components/home/CategoryStrip";
+// import CategoryStrip from "@/components/home/CategoryStrip";
+import CategoryBento from "@/components/home/CategoryBento";
 import ProductRow from "@/components/home/ProductRow";
 import LeatherBanner from "@/components/home/LeatherBanner";
 import PartnerCta from "@/components/home/PartnerCta";
@@ -54,7 +55,8 @@ export default async function HomePage() {
         <HeroSlider slides={home.heroSlides} />
       </div>
 
-      <CategoryStrip categories={categories} />
+      {/* <CategoryStrip categories={categories} /> */}
+      <CategoryBento categories={categories} />
 
       <div className="flex flex-col gap-10 lg:gap-14">
         <ProductRow
@@ -64,16 +66,15 @@ export default async function HomePage() {
           promoSlot={home.promoSale}
         />
 
-        <div>
-          <LeatherBanner
-            image={home.leather.image}
-            nameFa={home.leather.nameFa}
-            nameEn={home.leather.nameEn}
-            linkText={home.leather.linkText}
-            link={home.leather.link}
-          />
+        <LeatherBanner
+          image={home.leather.image}
+          nameFa={home.leather.nameFa}
+          nameEn={home.leather.nameEn}
+          linkText={home.leather.linkText}
+          link={home.leather.link}
+        >
           <PartnerCta />
-        </div>
+        </LeatherBanner>
 
         <ProductRow
           products={discountProducts}
@@ -86,6 +87,7 @@ export default async function HomePage() {
         <ProductRow
           products={autumnProducts}
           promo="autumn"
+          layout="overlay-grid"
           stagger
           promoSlot={home.promoAutumn}
         />