.

src/views/base/home/desktop/components/DesktopBannersPanel.vue

@@ -4,17 +4,29 @@ import DesktopHomeSection from './DesktopHomeSection.vue'
 import BannerSlider from '../../components/BannerSlider.vue'
 import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
 
+withDefaults(
+  defineProps<{
+    embedded?: boolean
+  }>(),
+  {
+    embedded: false,
+  },
+)
+
 const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
 </script>
 
 <template>
-  <DesktopHomeSection
+  <component
+    :is="embedded ? 'div' : DesktopHomeSection"
     v-if="ctx.bannerEnabled.value && ctx.banners.value?.length"
-    title="بنرها"
+    :title="embedded ? undefined : 'بنرها'"
+    class="dhome-banners"
+    :class="{ 'dhome-banners--embedded': embedded }"
   >
     <BannerSlider
       :banners="ctx.banners.value"
       @bannerClick="ctx.handleBannerClick"
     />
-  </DesktopHomeSection>
+  </component>
 </template>

src/views/base/home/desktop/components/DesktopChartSection.vue

@@ -4,6 +4,15 @@ import { useHomePageContext } from '../../composables/useHomePage'
 import PriceChart from '../../components/PriceChart.vue'
 import DesktopHomeSection from './DesktopHomeSection.vue'
 
+const props = withDefaults(
+  defineProps<{
+    embedded?: boolean
+  }>(),
+  {
+    embedded: false,
+  },
+)
+
 const ctx = useHomePageContext()
 
 const chartLayout = computed(() => (toValue(ctx.isBoursecuHomeLayout) ? 'boursecu' : 'default'))
@@ -13,7 +22,11 @@ const selectedChartMetal = computed(() => toValue(ctx.selectedChartMetal))
 </script>
 
 <template>
-  <DesktopHomeSection title="نمودار قیمت" class="dhome-chart">
+  <component
+    :is="props.embedded ? 'div' : DesktopHomeSection"
+    :title="props.embedded ? undefined : 'نمودار قیمت'"
+    class="dhome-chart"
+  >
     <PriceChart
       variant="desktop"
       :price-chart-series="priceChartSeries"
@@ -23,5 +36,5 @@ const selectedChartMetal = computed(() => toValue(ctx.selectedChartMetal))
       @update-data="ctx.updateChartData"
       @update:selected-metal="ctx.setChartMetal"
     />
-  </DesktopHomeSection>
+  </component>
 </template>

src/views/base/home/desktop/layouts/DefaultDesktopHome.vue

@@ -51,8 +51,19 @@ const showSkeleton = computed(() => Boolean(getToken()) && !userInfo.value)
       <div v-if="ctx.isGaroosi.value" class="dhome-default-grid">
         <div class="dhome-default-grid__main">
           <DesktopDefaultActions />
-          <DesktopBannersPanel />
-          <DesktopChartSection />
+          <section
+            v-if="ctx.bannerEnabled.value && ctx.banners.value?.length"
+            class="dhome-surface dhome-chart-banner-combined"
+          >
+            <header class="dhome-section__header">
+              <h2 class="dhome-section__title">نمودار قیمت</h2>
+            </header>
+            <div class="dhome-chart-banner-combined__grid">
+              <DesktopChartSection embedded />
+              <DesktopBannersPanel embedded />
+            </div>
+          </section>
+          <DesktopChartSection v-else />
         </div>
 
         <aside class="dhome-default-grid__side">
@@ -63,7 +74,19 @@ const showSkeleton = computed(() => Boolean(getToken()) && !userInfo.value)
 
       <template v-else>
         <DesktopDefaultActions />
-        <DesktopChartSection />
+        <section
+          v-if="ctx.bannerEnabled.value && ctx.banners.value?.length"
+          class="dhome-surface dhome-chart-banner-combined"
+        >
+          <header class="dhome-section__header">
+            <h2 class="dhome-section__title">نمودار قیمت</h2>
+          </header>
+          <div class="dhome-chart-banner-combined__grid">
+            <DesktopChartSection embedded />
+            <DesktopBannersPanel embedded />
+          </div>
+        </section>
+        <DesktopChartSection v-else />
       </template>
     </template>
   </DesktopHomeShell>

src/views/base/home/desktop/styles/desktop-home.less

@@ -300,6 +300,49 @@
   align-items: start;
 }
 
+/* Chart + banners in one card */
+.dhome-chart-banner-combined {
+  &__grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(320px, 38%);
+    gap: 20px;
+    align-items: start;
+  }
+}
+
+.dhome-banners {
+  min-width: 0;
+
+  &--embedded {
+    align-self: center;
+    border-radius: 12px;
+    overflow: hidden;
+    background: #f9fafb;
+  }
+
+  :deep(.home_appear_fade_in) {
+    margin-top: 0;
+  }
+
+  :deep(.banner-swiper) {
+    width: 100%;
+    aspect-ratio: 2.8 / 1;
+    max-height: 13rem;
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
+  :deep(.swiper-slide),
+  :deep(.banner-img) {
+    width: 100%;
+    height: 100%;
+  }
+
+  :deep(.banner-img) {
+    object-fit: cover;
+  }
+}
+
 .dhome-chart {
   :deep(.bg-gray-50) {
     background: transparent !important;
@@ -520,6 +563,7 @@
 
   .dhome-hero-row,
   .dhome-main-grid,
+  .dhome-chart-banner-combined__grid,
   .dhome-default-grid {
     grid-template-columns: 1fr;
   }