<miqdad> try fix voucher section

2 files changed, 16 insertions, 17 deletions

diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx
index 0c225c74..ad1a8797 100644
--- a/src-migrate/modules/promo/components/Voucher.tsx
+++ b/src-migrate/modules/promo/components/Voucher.tsx
@@ -123,7 +123,7 @@ const VoucherComponent = () => {
     <>
       <h1 className={style['title']}>Pakai Voucher Belanja</h1>
 
-      <div className='h-6' />
+      {/* <div className='h-6' /> */}
 
       {voucherQuery?.isLoading && (
         <div className='grid grid-cols-3 gap-x-4 animate-pulse'>
@@ -144,8 +144,8 @@ const VoucherComponent = () => {
                   <Image
                     src={voucher?.image}
                     alt={voucher?.name}
-                    width={128}
-                    height={128}
+                    width={87}
+                    height={87}
                     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 22d07f91..63c2d659 100644
--- a/src-migrate/modules/promo/styles/voucher.module.css
+++ b/src-migrate/modules/promo/styles/voucher.module.css
@@ -1,33 +1,32 @@
 .title {
-    @apply text-h-sm md:text-h-lg font-semibold;
+    @apply text-h-sm md:text-h-lg font-semibold mb-3;
 }
 
-.voucher-section {
-    @apply w-full;
+.voucher-section :global(.swiper-slide) {
+    @apply flex items-stretch;
 }
 
+/* Biar konten di dalamnya ngisi penuh slide */
 .voucher-card {
-    @apply w-full md:w-11/12 h-3/4 rounded-xl border items-center border-gray-200 shadow-md p-4 flex gap-x-4 ;
-}
-
-.voucher-image {
-    @apply bg-gray-100 rounded-lg w-4/12 h-fit object-contain object-center;
+    @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;
 }
 
+/* Biar isi di dalam voucher-card ngatur tinggi dengan baik */
 .voucher-content {
-    @apply flex-1 flex flex-col;
+    @apply flex-1 flex flex-col justify-between;
 }
 
 .voucher-title {
-    @apply font-medium text-body-1 leading-6 mb-1;
+    @apply font-medium leading-6 mb-1 text-base md:text-lg line-clamp-1;
 }
 
 .voucher-desc {
-    @apply text-gray-800 line-clamp-2 text-caption-1;
+    @apply text-gray-800 text-caption-1 md:text-body-2 line-clamp-1;
 }
 
 .voucher-bottom {
-    @apply flex justify-between mt-2;
+    /* Biar tombol Salin tetap rapi di kanan bawah */
+    @apply flex justify-between items-center mt-3 md:mt-4;
 }
 
 .voucher-code-desc {
@@ -35,9 +34,9 @@
 }
 
 .voucher-code {
-    @apply text-red-700 font-medium;
+    @apply text-red-700 font-medium text-body-2 md:text-body-1;
 }
 
 .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-6;
+    @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;
 }