<MIqdad> fix voucher mobile

2 files changed, 24 insertions, 13 deletions

diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
index ad1a8797..c2c65766 100644
--- a/src-migrate/modules/promo/components/Voucher.tsx
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -144,8 +144,8 @@ const VoucherComponent = () => {
                   <Image
                     src={voucher?.image}
                     alt={voucher?.name}
-                    width={87}
-                    height={87}
+                    width={128}
+                    height={128}
                     className={style['voucher-image']}
                   />
 
diff --git a/src-migrate/modules/promo/styles/voucher.module.css b/src-migrate/modules/promo/styles/voucher.module.css
index 63c2d659..055316ee 100644
--- a/src-migrate/modules/promo/styles/voucher.module.css
+++ b/src-migrate/modules/promo/styles/voucher.module.css
@@ -1,32 +1,40 @@
 .title {
-    @apply text-h-sm md:text-h-lg font-semibold mb-3;
+    @apply text-h-sm md:text-h-lg font-semibold;
+}
+
+.voucher-section {
+    @apply w-full pb-6 md:pb-8; /* beri jarak aman dari footer */
 }
 
 .voucher-section :global(.swiper-slide) {
-    @apply flex items-stretch;
+    @apply flex items-start; /* bukan items-stretch */
 }
 
-/* Biar konten di dalamnya ngisi penuh slide */
 .voucher-card {
-    @apply flex flex-col md:flex-row w-full md:w-11/12 rounded-xl border border-gray-200 shadow-md p-4 gap-4 bg-white h-full;
+    @apply w-full md:w-11/12 rounded-xl border border-gray-200 shadow-md 
+         p-4 flex items-start gap-x-4 bg-white;
+}
+
+.voucher-image {
+    /* tetap kecil dan proporsional */
+    @apply bg-gray-100 rounded-lg w-4/12 md:w-3/12 h-auto object-contain object-center;
 }
 
-/* Biar isi di dalam voucher-card ngatur tinggi dengan baik */
 .voucher-content {
     @apply flex-1 flex flex-col justify-between;
 }
 
 .voucher-title {
-    @apply font-medium leading-6 mb-1 text-base md:text-lg line-clamp-1;
+    @apply font-medium text-body-1 leading-6 line-clamp-2 mb-1;
 }
 
 .voucher-desc {
-    @apply text-gray-800 text-caption-1 md:text-body-2 line-clamp-1;
+    @apply text-gray-800 text-caption-1 line-clamp-1;
 }
 
 .voucher-bottom {
-    /* Biar tombol Salin tetap rapi di kanan bawah */
-    @apply flex justify-between items-center mt-3 md:mt-4;
+    /* pisahkan bagian bawah agar tombol tidak nempel */
+    @apply flex flex-col md:flex-row justify-between md:items-center gap-2 md:gap-0 mt-3;
 }
 
 .voucher-code-desc {
@@ -34,9 +42,12 @@
 }
 
 .voucher-code {
-    @apply text-red-700 font-medium text-body-2 md:text-body-1;
+    @apply text-red-700 font-medium;
 }
 
 .voucher-copy {
-    @apply bg-gray-200 hover:bg-danger-500 text-danger-500 hover:text-white transition-colors rounded-lg flex items-center justify-center px-4 py-1.5 text-sm md:text-base whitespace-nowrap;
+    /* tombol tetap kecil, tidak keluar dari card */
+    @apply bg-gray-200 hover:bg-danger-500 text-danger-500 hover:text-white transition-colors 
+         rounded-lg flex items-center justify-center px-5 py-1.5 text-sm whitespace-nowrap 
+         w-full md:w-auto;
 }