donation intro #472

src/components/Widgets/Donation/DonationIntro/DonationIntro.vue

@@ -6,8 +6,14 @@
       </q-banner>
     </div>
     <div class="content">
-      <div class="text"
-           v-html="localOptions.text" />
+      <div class="text-and-action">
+        <div class="text"
+             v-html="localOptions.text" />
+        <q-btn color="primary"
+               :to="{ name: 'Public.DonationCategory.List' }">
+          پرداخت صدقات و خیریه
+        </q-btn>
+      </div>
       <div class="carousel-section">
         <div v-if="localOptions.slides.length > 0"
              ref="slider"
@@ -98,19 +104,42 @@ export default {
     flex-flow: row;
     gap: 48px;
     justify-content: space-between;
-    align-items: flex-start;
-    .text {
+    align-items: stretch;
+    .text-and-action {
       width: 50%;
+      display: flex;
+      flex-flow: column;
+      justify-content: space-between;
+      align-items: flex-end;
+      .text {
+        width: 100%;
+      }
     }
     .carousel-section {
       width: 50%;
     }
+    :deep(.carousel-section) {
+      .splide__arrows {
+        top: auto;
+        bottom: 0;
+        .splide__arrow {
+          &.splide__arrow--prev {
+            left: 50%;
+            transform: translateX(-120%);
+          }
+          &.splide__arrow--next {
+            right: 50%;
+            transform: translateX(120%);
+          }
+        }
+      }
+    }
 
     @media screen and (max-width: 1200px) {
       & {
         flex-flow: column;
         gap: 16px;
-        .text {
+        .text-and-action {
           width: 100%;
         }
         .carousel-section {