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

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

src/components/home/HeroSlider.tsx

@@ -17,7 +17,7 @@ const FALLBACK_SLIDES: HeroSlideData[] = [
   {
     id: "autumn",
     image: "/images/home/banners/hero.jpg",
-    imagePosition: "object-[center_20%]",
+    imagePosition: "object-[center_top]",
     title: "برای بانویی که خودش انتخاب میکند.",
     subtitle: "made for her",
     cta: { label: "کالکشن پاییزه", href: "/products?collection=autumn" },
@@ -25,7 +25,7 @@ const FALLBACK_SLIDES: HeroSlideData[] = [
   {
     id: "new",
     image: "/images/home/banners/hero.jpg",
-    imagePosition: "object-[center_40%]",
+    imagePosition: "object-[center_top]",
     title: "جدیدترین‌های فصل همین حالا ببینید.",
     subtitle: "new arrivals",
     cta: { label: "جدیدترین‌ها", href: "/products?sort=newest" },
@@ -33,7 +33,7 @@ const FALLBACK_SLIDES: HeroSlideData[] = [
   {
     id: "sale",
     image: "/images/home/banners/hero.jpg",
-    imagePosition: "object-[center_55%]",
+    imagePosition: "object-[center_top]",
     title: "فروش ویژه تا ۷۰٪ تخفیف",
     subtitle: "up to 70% off",
     cta: { label: "مشاهده تخفیف‌ها", href: "/products?sale=1" },
@@ -83,7 +83,7 @@ export default function HeroSlider({ slides }: HeroSliderProps) {
 
   return (
     <section
-      className="relative h-[min(100dvh,1081px)] min-h-[560px] w-full overflow-hidden bg-[#ebe6df]"
+      className="relative h-[calc(100dvh-7.5rem)] min-h-[480px] w-full overflow-hidden bg-[#ebe6df] sm:h-[calc(100dvh-8.25rem)]"
       onMouseEnter={() => setPaused(true)}
       onMouseLeave={() => setPaused(false)}
     >