(andri) fix layout

1 files changed, 32 insertions, 23 deletions

diff --git a/src/lib/pengajuan-tempo/component/FinishTempo.jsx b/src/lib/pengajuan-tempo/component/FinishTempo.jsx
index 9d912b1a..ad8a7e67 100644
--- a/src/lib/pengajuan-tempo/component/FinishTempo.jsx
+++ b/src/lib/pengajuan-tempo/component/FinishTempo.jsx
@@ -106,11 +106,41 @@ const FinishTempo = ({ query }) => {
           'Proses pengajuan tempo anda sudah berhasil terdaftar di indoteknik.com. Nikmati pembelian anda di website indoteknik dengan menggunakan pembayaran tempo'}
       </div>
 
+      <hr className="border-gray-300 w-full" />
+      
+      {/* Video panduan khusus tampil saat status switch-account */}
+      {query?.status === 'switch-account' && (
+        <div className="w-full max-w-3xl mx-auto px-4 text-center text-gray-700 mb-6">
+          <div className="mb-3 font-medium">
+            <h1
+              className={`text-red-500 text-center font-semibold ${
+                isMobile ? 'text-lg' : 'text-3xl'
+              }`}
+              // Mengganti py-4 dengan my-6 supaya jarak vertikalnya sama dengan hr
+              style={{ marginTop: 24, marginBottom: 24 }}
+            >
+              Video Panduan Pengajuan Tempo
+            </h1>
+          </div>
+          <div className="relative" style={{ paddingTop: '56.25%' /* 16:9 aspect ratio */ }}>
+            <iframe
+              src="https://www.youtube.com/embed/m15f8-eLqUc?si=frNbGnJu1zjINnDT"
+              title="YouTube video player"
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              allowFullScreen
+              referrerPolicy="strict-origin-when-cross-origin"
+              className="absolute top-0 left-0 w-full h-full rounded-md shadow-lg"
+            ></iframe>
+          </div>
+        </div>
+      )}
+
       {/* Tombol dengan behavior berbeda jika status switch-account */}
       {query?.status === 'switch-account' ? (
         <button
           onClick={handleSwitchAccountClick}
-          className='btn-solid-red rounded-md text-base flex flex-row items-center justify-center'
+          className='btn-solid-red rounded-md text-base flex flex-row items-center justify-center mb-10'
         >
           Ubah Akun
           <ChevronRightIcon className='w-5' />
@@ -122,7 +152,7 @@ const FinishTempo = ({ query }) => {
               ? '/my/tempo/'
               : '/'
           }
-          className='btn-solid-red rounded-md text-base flex flex-row items-center justify-center'
+          className='btn-solid-red rounded-md text-base flex flex-row items-center justify-center mb-10'
         >
           {query?.status === 'approve'
             ? 'Lihat Detail Tempo'
@@ -130,27 +160,6 @@ const FinishTempo = ({ query }) => {
           <ChevronRightIcon className='w-5' />
         </Link>
       )}
-
-      {/* Video panduan khusus tampil saat status switch-account */}
-      {query?.status === 'switch-account' && (
-        <div className="w-full max-w-3xl mx-auto px-4 text-center text-gray-700 mb-6 md:mb-20">
-          <div className="mb-3 font-medium opacity-75">
-            <p>Agar tidak bingung saat mengubah akun,</p>
-            <p>Yuk pelajari dulu langkah-langkah pengajuan tempo lewat video berikut</p>
-          </div>
-          <div className="relative" style={{ paddingTop: '56.25%' /* 16:9 aspect ratio */ }}>
-            <iframe
-              src="https://www.youtube.com/embed/m15f8-eLqUc?si=frNbGnJu1zjINnDT"
-              title="YouTube video player"
-              frameBorder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              allowFullScreen
-              referrerPolicy="strict-origin-when-cross-origin"
-              className="absolute top-0 left-0 w-full h-full rounded-md shadow-lg"
-            ></iframe>
-          </div>
-        </div>
-      )}
     </div>
   );
 };