update layout

components/Home.vue

@@ -3,7 +3,7 @@
     <div class="logo-section-contact">
       <div class="logo-group-contact">
         <v-img
-          src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of_arms_of_East_Java.svg.png"
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of-arms_of_East_Java.svg.png"
           width="50"
           height="50"
           class="logo-img-contact"
@@ -44,12 +44,13 @@
       <div class="banner-carousel-container">
         <v-carousel
           v-model="currentSlide"
+          ref="carousel"
           :show-arrows="true"
           :hide-delimiters="false"
           :cycle="false"
-          :interval="0"
+          :interval="5000"
           class="banner-carousel"
-          height="300"
+          height="400"
           :continuous="false"
         >
           <v-carousel-item
@@ -85,7 +86,7 @@
                 <div
                   v-else
                   class="video-thumbnail"
-                  @click="currentSlide = index"
+                  @click="playVideo(index)"
                 >
                   <img
                     :src="`https://img.youtube.com/vi/${item.videoId}/maxresdefault.jpg`"
@@ -110,6 +111,17 @@
           />
         </div>
       </div>
+
+      <div class="cta-section-contact">
+        <v-btn
+          @click="startDebugPayment"
+          color="#808080"
+          class="cta-button debug-button"
+          x-large
+        >
+          <span class="button-text">SIMULASI PEMBAYARAN</span>
+        </v-btn>
+      </div>
     </div>
 
     <div class="orange-background-contact">
@@ -144,13 +156,12 @@
 </template>
 
 <script setup>
-import { ref, watch, nextTick } from "vue";
+import { ref, watch, onMounted, onUnmounted } from "vue";
 import { usePaymentStore } from "~/stores/payment";
 
 const paymentStore = usePaymentStore();
 const currentSlide = ref(0);
-const videoLoaded = ref({});
+const carouselInterval = ref(null);
-
 const carouselItems = ref([
   {
     src: "https://i.ytimg.com/vi/4LRCHhepGmw/maxresdefault.jpg",
@@ -162,10 +173,9 @@ const carouselItems = ref([
   {
     videoId: "KQZFfRtMHe0",
     isImage: false,
-    loaded: false,
   },
   {
-    src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide1.jpg",
+    src: "https://scontent.fcgk22-2.fna.fbcdn.net/v/t39.30808-6/481267190_3904366386504845_1409667601717073976_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=110&ccb=1-7&_nc_sid=cc71e4&_nc_ohc=w6wAp5Df1lAQ7kNvwHL8Snq&_nc_oc=Adnq0LOV2vro6n7DGZu9GfUYGx3iBXzZ7LlUk7oWYi_lZ_OYDD7LVYe5zogYKxEEJdU&_nc_zt=23&_nc_ht=scontent.fcgk22-2.fna&_nc_gid=Dir3R7zaEbm2b0HPtrmGiQ&oh=00_AfaERSA1GyvNKkfajBF5yIv_JrijpizdmUqgy9528oAszQ&oe=68D12398",
     alt: "Medical Services",
     title: "Pelayanan Terbaik",
     description: "Tim medis profesional siap melayani 24 jam",
@@ -198,24 +208,80 @@ const onVideoError = (error) => {
   console.error('Video iframe error:', error);
 };
 
-const navigateToQrisPayment = () => {
+// Fungsi untuk memulai carousel otomatis
-  console.log("Navigating to QRIS Payment...");
+const startCarousel = () => {
-
+  if (carouselInterval.value) {
+    clearInterval(carouselInterval.value);
+  }
+  carouselInterval.value = setInterval(() => {
+    const nextSlide = (currentSlide.value + 1) % carouselItems.value.length;
+    currentSlide.value = nextSlide;
+  }, 10000); // Ganti gambar setiap 10 detik
 };
 
-const navigateToDebugPage = () => {
+// Fungsi untuk menghentikan carousel otomatis
-  console.log("Navigating to Debug Page...");
+const stopCarousel = () => {
-
+  if (carouselInterval.value) {
+    clearInterval(carouselInterval.value);
+    carouselInterval.value = null;
+  }
 };
 
-watch(currentSlide, (newSlide, oldSlide) => {
+// Fungsi untuk memutar video (menghentikan carousel)
+const playVideo = (index) => {
+  currentSlide.value = index;
+  stopCarousel(); // Hentikan carousel saat video diputar
+};
 
+// Tonton perubahan slide
+watch(currentSlide, (newSlide) => {
+  const currentItem = carouselItems.value[newSlide];
+  if (currentItem && !currentItem.isImage) {
+    // Jika slide adalah video, hentikan carousel
+    console.log('Video detected, stopping carousel');
+    stopCarousel();
+  } else {
+    // Jika slide adalah gambar, mulai kembali carousel
+    console.log('Image detected, starting carousel');
+    startCarousel();
+  }
 });
+
+onMounted(() => {
+  // Mulai carousel saat komponen dimuat
+  startCarousel();
+});
+
+onUnmounted(() => {
+  // Hentikan carousel saat komponen dihancurkan
+  stopCarousel();
+});
+
+// Fungsi untuk simulasi pembayaran debug
+const startDebugPayment = () => {
+  console.log("Simulasi Pembayaran (Debug) dimulai.");
+  // Mengisi data dummy untuk simulasi
+  const dummyData = {
+    posdevice: "GRANDPAV",
+    invoice_number: "000000000000012000615",
+    updated_at: "2024-11-21T11:52:25.805965+07:00",
+    created_at: "2024-11-21T11:52:25.805965+07:00",
+    display_name: "KASIH",
+    id: "1",
+    status: "1", // Status awal untuk simulasi
+    display_amount: "90",
+    qrvalue: "000201010212262710019ID.CO.BANKJATIM.WWW01189360011400001347728215ID02400134529083038ES1459015ID.OR.GPMQR.MM0215ID202431094996960309ES2049939530536054029605802D5923-RSUD SAIFUL ANWAR MLG-100000MALANG0556111622901250000000000000000000000000000012800061563040C9B",
+    ip: "10.10.150.106",
+    display_nobill: "24072579/10000675",
+  };
+  paymentStore.updatePayment({ data: [dummyData] });
+  paymentStore.currentStep = 2; // Pindah ke QRISPayment
+};
 </script>
 
 <style scoped>
 .contact-page-container {
-  min-height:auto;
+  min-height: auto;
   width: 100%;
   background: white;
   display: flex;
@@ -309,13 +375,13 @@ watch(currentSlide, (newSlide, oldSlide) => {
 .banner-carousel {
   border-radius: 15px;
   overflow: hidden;
-  height: clamp(300px, 45vh, 400px);
+  height: clamp(400px, 45vh, 400px);
 }
 
 .carousel-item {
   position: relative;
   width: 100%;
-  height: 350px;
+  height: 400px;
 }
 
 .video-container {
@@ -443,9 +509,9 @@ watch(currentSlide, (newSlide, oldSlide) => {
 }
 
 .contact-icon-contact {
-  width: 35px;
+  width: clamp(30px, 7vw, 35px); /* Adjusted with clamp */
-  height: 35px;
+  height: clamp(30px, 7vw, 35px); /* Adjusted with clamp */
-  border-radius: 80%;
+  border-radius: 50%; /* Changed to 50% for perfect circle */
   background: white;
   display: flex;
   align-items: center;

components/PembayaranGagal.vue

@@ -1,22 +1,44 @@
 <template>
   <div class="payment-step">
-    <v-card-text class="pa-8 text-center">
+    <div class="payment-wrapper">
-      <div class="failure-container">
+      <v-card-text class="payment-content text-center">
-        <v-icon icon="mdi-close-circle" size="80" class="text-red mb-4" />
+        <div class="failure-container">
-        <h2 class="text-h4 mb-4 font-weight-bold text-dark">Pembayaran Gagal</h2>
+          <div class="icon-container mb-6">
-        <p class="text-h6 text-grey-darken-1 mb-6">
+            <v-icon icon="mdi-close-circle" size="100" class="text-red animated-icon" />
-          Terjadi kesalahan saat memproses<br />pembayaran Anda.
+          </div>
-        </p>
+          
-        <div class="button-group">
+          <h2 class="failure-title mb-6">Pembayaran Gagal</h2>
-          <v-btn color="primary" size="large" variant="flat" rounded="xl" @click="retryPayment" class="mb-3">
+          
-            Coba Lagi
+          <p class="failure-message mb-8">
-          </v-btn>
+            Terjadi kesalahan saat memproses<br />pembayaran Anda.
-          <v-btn color="grey-darken-1" size="large" variant="outlined" rounded="xl" @click="paymentStore.reset">
+          </p>
-            Kembali ke Awal
+          
-          </v-btn>
+          <!-- Uncomment jika butuh buttons -->
+          <!-- <div class="button-group">
+            <v-btn 
+              color="primary" 
+              size="large" 
+              variant="flat" 
+              rounded="xl" 
+              @click="retryPayment" 
+              class="action-btn mb-3"
+            >
+              Coba Lagi
+            </v-btn>
+            <v-btn 
+              color="grey-darken-1" 
+              size="large" 
+              variant="outlined" 
+              rounded="xl" 
+              @click="paymentStore.reset"
+              class="action-btn"
+            >
+              Kembali ke Awal
+            </v-btn>
+          </div> -->
         </div>
-      </div>
+      </v-card-text>
-    </v-card-text>
+    </div>
   </div>
 </template>
 
@@ -25,27 +47,195 @@ import { usePaymentStore } from '~/stores/payment';
 const paymentStore = usePaymentStore();
 
 const retryPayment = () => {
-  // Logika untuk mencoba lagi pembayaran
-  // Misalnya, memanggil API backend untuk mendapatkan tagihan baru
-  // Untuk saat ini, kita bisa mensimulasikannya
   console.log("Mencoba pembayaran lagi...");
   paymentStore.setPaymentStatus('aktif');
 };
 </script>
 
 <style scoped>
-.failure-container {
+.payment-step {
-  padding: 40px 20px;
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
+  min-height: 100vh;
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 0;
 }
+
+.payment-wrapper {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.payment-content {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 24px;
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 
+    0 20px 60px rgba(0, 0, 0, 0.08),
+    0 8px 32px rgba(0, 0, 0, 0.04),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  padding: 3rem 2rem !important;
+}
+
+.failure-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-container {
+  position: relative;
+}
+
+.animated-icon {
+  animation: errorPulse 2s ease-in-out infinite;
+  filter: drop-shadow(0 4px 20px rgba(244, 67, 54, 0.3));
+}
+
+@keyframes errorPulse {
+  0%, 100% { 
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% { 
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+}
+
 .text-red {
   color: #f44336 !important;
 }
-.text-dark {
+
-  color: #424242 !important;
+.failure-title {
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: #1a1a1a;
+  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1.2;
 }
+
+.failure-message {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: #666;
+  line-height: 1.5;
+}
+
 .button-group {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 1rem;
+  width: 100%;
+  max-width: 300px;
+}
+
+.action-btn {
+  font-weight: 600 !important;
+  text-transform: none !important;
+  transition: all 0.3s ease !important;
+}
+
+.action-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .payment-step {
+    padding: 1rem 0;
+  }
+  
+  .payment-wrapper {
+    padding: 0 0.5rem;
+  }
+  
+  .payment-content {
+    padding: 2rem 1.5rem !important;
+  }
+  
+  .failure-title {
+    font-size: 2rem;
+  }
+  
+  .failure-message {
+    font-size: 1.1rem;
+  }
+  
+  .animated-icon {
+    font-size: 80px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .payment-content {
+    padding: 2rem 1rem !important;
+  }
+  
+  .failure-title {
+    font-size: 1.8rem;
+  }
+  
+  .failure-message {
+    font-size: 1rem;
+  }
+  
+  .button-group {
+    max-width: 100%;
+  }
+}
+
+/* Landscape Tablet Optimization */
+@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
+  .payment-step {
+    padding: 1rem 0;
+  }
+  
+  .payment-content {
+    padding: 2rem !important;
+  }
+  
+  .failure-title {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+  }
+  
+  .failure-message {
+    font-size: 1rem;
+    margin-bottom: 1.5rem;
+  }
+  
+  .animated-icon {
+    font-size: 70px !important;
+  }
+  
+  .icon-container {
+    margin-bottom: 1rem;
+  }
+}
+
+/* Large Tablet Landscape */
+@media (orientation: landscape) and (min-width: 1024px) {
+  .payment-wrapper {
+    max-width: 700px;
+  }
+  
+  .failure-title {
+    font-size: 2.2rem;
+  }
+  
+  .failure-message {
+    font-size: 1.2rem;
+  }
 }
 </style>

components/PembayaranSukses.vue

@@ -1,38 +1,382 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="payment-step">
-    <v-card-text class="pa-8 text-center">
+    <div class="success-wrapper">
       <div class="success-container">
-        <v-icon icon="mdi-check-circle" size="80" class="text-orange mb-4" />
+        <!-- Success Icon with Animation -->
-        <h2 class="text-h4 mb-4 font-weight-bold text-dark">Pembayaran Berhasil</h2>
+        <div class="success-icon-container mb-6">
-        <p class="text-h6 text-grey-darken-1 mb-6">
+          <div class="success-icon-bg">
-          Silahkan Menunggu Bukti<br >Pembayaran
+            <v-icon 
-        </p>
+              icon="mdi-check-circle" 
-        <v-btn color="primary" size="large" variant="flat" rounded="xl" @click="paymentStore.reset">
+              size="100" 
-          Kembali ke Awal
+              class="success-icon"
-        </v-btn>
+            />
+          </div>
+          <div class="success-checkmark">
+            <div class="check-icon">
+              <span class="icon-line line-tip"></span>
+              <span class="icon-line line-long"></span>
+              <div class="icon-circle"></div>
+              <div class="icon-fix"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Success Content -->
+        <div class="success-content">
+          <h2 class="success-title mb-4">
+            Pembayaran Berhasil
+          </h2>
+          
+          <div class="success-message mb-8">
+            <p class="message-line">Silahkan Menunggu Bukti</p>
+            <p class="message-line">Pembayaran</p>
+          </div>
+
+          <!-- Payment Details Summary (Optional) -->
+          <div class="payment-summary mb-8" v-if="paymentStore.patientInfo">
+            <div class="summary-card">
+              <div class="summary-row">
+                <span class="summary-label">Pasien:</span>
+                <span class="summary-value">{{ paymentStore.patientInfo.name }}</span>
+              </div>
+              <div class="summary-row">
+                <span class="summary-label">Nominal:</span>
+                <span class="summary-value amount">{{ formatCurrency(paymentStore.patientInfo.amount) }}</span>
+              </div>
+              <div class="summary-row">
+                <span class="summary-label">Status:</span>
+                <v-chip color="success" variant="flat" size="small">
+                  <v-icon size="14" class="mr-1">mdi-check</v-icon>
+                  Berhasil
+                </v-chip>
+              </div>
+            </div>
+          </div>
+
+          <!-- Action Button -->
+          <div class="action-section">
+            <v-btn 
+              color="primary" 
+              size="x-large" 
+              variant="flat" 
+              rounded="xl"
+              class="success-btn"
+              @click="paymentStore.reset"
+            >
+              <v-icon class="mr-2">mdi-home</v-icon>
+              Kembali ke Awal
+            </v-btn>
+          </div>
+        </div>
       </div>
-    </v-card-text>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { usePaymentStore } from '~/stores/payment';
+
 const paymentStore = usePaymentStore();
+
+const formatCurrency = (amount) => {
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 0
+  }).format(amount);
+};
 </script>
 
 <style scoped>
-
 .payment-step {
-  background: rgb(233, 233, 233);
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
+  min-height: 100vh;
+  height: auto;
+  padding: 2rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
+
+.success-wrapper {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
 .success-container {
-  padding: 40px 20px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 24px;
+  padding: 3rem 2rem;
+  text-align: center;
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 
+    0 20px 60px rgba(0, 0, 0, 0.08),
+    0 8px 32px rgba(0, 0, 0, 0.04),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
 }
-.text-orange {
+
-  color: #ff9800 !important;
+/* Success Icon Animation */
+.success-icon-container {
+  position: relative;
+  display: inline-block;
 }
-.text-dark {
+
-  color: #424242 !important;
+.success-icon-bg {
+  position: relative;
+  display: inline-block;
+  animation: successPulse 2s ease-in-out infinite;
+}
+
+.success-icon {
+  color: #4caf50 !important;
+  filter: drop-shadow(0 4px 20px rgba(76, 175, 80, 0.3));
+}
+
+@keyframes successPulse {
+  0%, 100% { 
+    transform: scale(1); 
+    opacity: 1; 
+  }
+  50% { 
+    transform: scale(1.05); 
+    opacity: 0.9; 
+  }
+}
+
+/* Animated Checkmark */
+.success-checkmark {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.check-icon {
+  width: 50px;
+  height: 50px;
+  position: relative;
+  border-radius: 50%;
+  box-sizing: content-box;
+  border: 3px solid #4caf50;
+  background: rgba(76, 175, 80, 0.1);
+}
+
+.icon-line {
+  height: 3px;
+  background-color: #4caf50;
+  display: block;
+  border-radius: 2px;
+  position: absolute;
+  z-index: 10;
+}
+
+.icon-line.line-tip {
+  top: 23px;
+  left: 8px;
+  width: 15px;
+  transform: rotate(45deg);
+  animation: checkTip 0.75s ease-in-out 1s both;
+}
+
+.icon-line.line-long {
+  top: 18px;
+  right: 8px;
+  width: 25px;
+  transform: rotate(-45deg);
+  animation: checkLong 0.75s ease-in-out 1.2s both;
+}
+
+@keyframes checkTip {
+  0% { width: 0; left: 1px; top: 19px; }
+  54% { width: 0; left: 1px; top: 19px; }
+  70% { width: 15px; left: -2px; top: 37px; }
+  84% { width: 17px; left: 8px; top: 23px; }
+  100% { width: 15px; left: 8px; top: 23px; }
+}
+
+@keyframes checkLong {
+  0% { width: 0; right: 46px; top: 54px; }
+  65% { width: 0; right: 46px; top: 54px; }
+  84% { width: 25px; right: 0px; top: 17px; }
+  100% { width: 25px; right: 8px; top: 18px; }
+}
+
+/* Success Content */
+.success-content {
+  position: relative;
+  z-index: 2;
+}
+
+.success-title {
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: #1a1a1a;
+  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 1rem;
+  line-height: 1.2;
+}
+
+.success-message {
+  color: #666;
+  font-size: 1.2rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.message-line {
+  margin: 0;
+  padding: 0.25rem 0;
+}
+
+/* Payment Summary */
+.payment-summary {
+  margin: 2rem 0;
+}
+
+.summary-card {
+  background: rgba(76, 175, 80, 0.06);
+  border-radius: 16px;
+  padding: 1.5rem;
+  border: 1px solid rgba(76, 175, 80, 0.2);
+}
+
+.summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.summary-row:last-child {
+  border-bottom: none;
+}
+
+.summary-label {
+  color: #666;
+  font-weight: 600;
+  font-size: 0.95rem;
+}
+
+.summary-value {
+  color: #1a1a1a;
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.summary-value.amount {
+  color: #4caf50;
+  font-size: 1.1rem;
+}
+
+/* Action Button */
+.action-section {
+  margin-top: 2rem;
+}
+
+.success-btn {
+  background: linear-gradient(135deg, #ff9248 0%, #ff7043 100%) !important;
+  color: white !important;
+  font-weight: 700 !important;
+  font-size: 1.1rem !important;
+  text-transform: none !important;
+  padding: 0 3rem !important;
+  min-width: 200px;
+  box-shadow: 
+    0 8px 25px rgba(255, 146, 72, 0.3),
+    0 4px 15px rgba(255, 146, 72, 0.2) !important;
+  transition: all 0.3s ease !important;
+}
+
+.success-btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 
+    0 12px 35px rgba(255, 146, 72, 0.4),
+    0 8px 25px rgba(255, 146, 72, 0.3) !important;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .payment-step {
+    padding: 1rem 0;
+  }
+  
+  .success-wrapper {
+    padding: 0 0.5rem;
+  }
+  
+  .success-container {
+    padding: 2rem 1.5rem;
+  }
+  
+  .success-title {
+    font-size: 2rem;
+  }
+  
+  .success-message {
+    font-size: 1.1rem;
+  }
+  
+  .success-icon {
+    font-size: 80px !important;
+  }
+}
+
+@media (max-width: 480px) {
+  .success-container {
+    padding: 2rem 1rem;
+  }
+  
+  .success-title {
+    font-size: 1.8rem;
+  }
+  
+  .success-message {
+    font-size: 1rem;
+  }
+  
+  .success-btn {
+    min-width: 100%;
+    margin-top: 1rem;
+  }
+}
+
+/* Landscape Tablet */
+@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
+  .payment-step {
+    padding: 1rem 0;
+  }
+  
+  .success-container {
+    padding: 2rem;
+    max-width: 500px;
+    margin: 0 auto;
+  }
+  
+  .success-title {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  .success-message {
+    font-size: 1rem;
+    margin-bottom: 1.5rem;
+  }
+  
+  .payment-summary {
+    margin: 1rem 0;
+  }
+  
+  .success-icon {
+    font-size: 70px !important;
+  }
 }
 </style>

components/QRISPayment.vue

@@ -1,142 +1,695 @@
 <template>
   <div class="payment-step">
-    <v-card-text class="pa-0 text-center">
+    <v-card-text class="pa-6">
-      <div class="mb-0">
+      <!-- Header Section -->
-        <v-img
+      <div class="header-section text-center mb-8">
-          src="https://iconlogovector.com/uploads/images/2024/03/lg-65ffda68a47ee-QRIS.webp"
+        <h2 class="payment-title">Pindai Kode QR untuk Pembayaran</h2>
-          height="80"
+        <p class="payment-subtitle">
-          class="mb-1"
+          Gunakan aplikasi mobile banking atau e-wallet Anda
-          contain
+        </p>
-        />
       </div>
 
-      <!-- <h2 class="text-h4 mb-6 font-weight-bold">PINDAI KODE QR</h2> -->
+      <!-- Main Content Section - QR & Details Side by Side -->
+      <div class="main-content-section mb-8">
+        <div class="content-grid">
+          <!-- QR Code Section -->
+          <div class="qr-section">
+            <div class="qr-container">
+              <div class="qris-logo-container mb-0">
+                <v-img
+                  src="https://iconlogovector.com/uploads/images/2024/03/lg-65ffda68a47ee-QRIS.webp"
+                  height="60"
+                  class="qris-logo"
+                  contain
+                />
+              </div>
+              <div class="qr-wrapper">
+                <div class="qr-code-bg">
+                  <img
+                    ref="qrCodeImage"
+                    alt="QR Code"
+                    class="qr-image"
+                    :class="{ 'qr-loaded': qrLoaded }"
+                  />
+                  <div class="qr-overlay" v-if="!qrLoaded">
+                    <v-progress-circular
+                      indeterminate
+                      color="primary"
+                      size="40"
+                    />
+                  </div>
+                </div>
+                <div class="qr-brand-label">
+                  <span>QRIS</span>
+                </div>
+              </div>
 
-      <div class="qr-container mb-6">
+              <!-- Scanning Animation -->
-        <v-card
+              <div class="scan-line" v-if="qrLoaded"></div>
-          class="qr-code mx-auto d-flex align-center justify-center"
+            </div>
-          width="280"
+
-          height="280"
+            <!-- QR Instructions -->
-          elevation="0"
+            <div class="qr-instructions text-center mt-4">
+              <v-icon size="20" color="primary" class="mb-2"
+                >mdi-qrcode-scan</v-icon
+              >
+              <p class="instruction-text">Arahkan kamera ke QR code</p>
+            </div>
+          </div>
+
+          <!-- Payment Details Section -->
+          <div class="details-section">
+            <div class="payment-details-card">
+              <div class="details-header">
+                <v-icon color="primary" class="mr-2"
+                  >mdi-receipt-text-outline</v-icon
+                >
+                <span class="details-title">Detail Pembayaran</span>
+              </div>
+
+              <div class="details-content">
+                <div class="detail-row">
+                  <div class="detail-label">
+                    <v-icon size="18" class="mr-2" color="primary"
+                      >mdi-account-outline</v-icon
+                    >
+                    Nama Pasien
+                  </div>
+                  <div class="detail-value patient-name">
+                    {{ paymentStore.patientInfo.name }}
+                  </div>
+                </div>
+
+                <div class="detail-row highlight-row">
+                  <div class="detail-label">
+                    <v-icon size="18" class="mr-2" color="success"
+                      >mdi-cash</v-icon
+                    >
+                    Nominal
+                  </div>
+                  <div class="detail-value amount">
+                    {{ formatCurrency(paymentStore.patientInfo.amount) }}
+                  </div>
+                </div>
+
+                <div class="detail-row">
+                  <div class="detail-label">
+                    <v-icon size="18" class="mr-2" color="primary"
+                      >mdi-file-document-outline</v-icon
+                    >
+                    Nomor Tagihan
+                  </div>
+                  <div class="detail-value">
+                    {{ paymentStore.qrData.display_nobill }}
+                  </div>
+                </div>
+
+                <div class="detail-row">
+                  <div class="detail-label">
+                    <v-icon size="18" class="mr-2" color="warning"
+                      >mdi-clock-outline</v-icon
+                    >
+                    Berlaku Sampai
+                  </div>
+                  <div class="detail-value expired">Tidak terbatas</div>
+                </div>
+              </div>
+
+              <!-- Status in Details Card -->
+              <div class="payment-status mt-4">
+                <div class="status-row">
+                  <div class="status-indicator-inline">
+                    <div class="status-dot pulsing"></div>
+                    <span class="status-text">Menunggu pembayaran...</span>
+                  </div>
+                  <v-chip color="warning" variant="tonal" size="small">
+                    <v-icon size="14" class="mr-1">mdi-clock-fast</v-icon>
+                    Pending
+                  </v-chip>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Action Buttons -->
+      <div class="action-buttons">
+        <v-btn
+          color="grey-lighten-1"
+          variant="outlined"
+          size="large"
+          class="action-btn back-btn"
+          @click="paymentStore.prevStep"
         >
-          <img ref="qrCodeImage" alt="QR Code" width="280" height="280" />
+          <v-icon class="mr-2">mdi-arrow-left</v-icon>
-        </v-card>
-      </div>
-
-      <div class="payment-details">
-        <v-row dense class="mb-1">
-          <v-col cols="5" class="text-left">
-            <strong>NAMA PASIEN:</strong>
-          </v-col>
-          <v-col cols="7" class="text-left">
-            {{ paymentStore.patientInfo.name }}
-          </v-col>
-        </v-row>
-
-        <v-row dense class="mb-1">
-          <v-col cols="5" class="text-left">
-            <strong>NOMINAL:</strong>
-          </v-col>
-          <v-col cols="7" class="text-left">
-            {{ paymentStore.patientInfo.amount }}
-          </v-col>
-        </v-row>
-
-        <v-row dense class="mb-1">
-          <v-col cols="5" class="text-left">
-            <strong>NOMOR TAGIHAN:</strong>
-          </v-col>
-          <v-col cols="7" class="text-left">
-            {{ paymentStore.qrData.display_nobill }}
-          </v-col>
-        </v-row>
-
-        <v-row dense class="mb-4">
-          <v-col cols="5" class="text-left">
-            <strong>BERLAKU SAMPAI:</strong>
-          </v-col>
-          <v-col cols="7" class="text-left text-red"> N/A </v-col>
-        </v-row>
-      </div>
-
-      <div class="d-flex gap-4 justify-center">
-        <!-- <v-btn color="grey" variant="outlined" @click="paymentStore.prevStep">
           Kembali
-        </v-btn> -->
+        </v-btn>
-        <v-btn color="primary" variant="flat" @click="paymentStore.nextStep">
+
+        <v-btn
+          color="success"
+          variant="flat"
+          size="large"
+          class="action-btn simulate-btn"
+          @click="paymentStore.nextStep"
+        >
+          <v-icon class="mr-2">mdi-play-circle-outline</v-icon>
           Simulasi Pembayaran
         </v-btn>
       </div>
+
+      <!-- Help Text -->
+      <div class="help-text text-center mt-6">
+        <v-icon size="16" class="mr-1">mdi-information-outline</v-icon>
+        <span>Scan QR code menggunakan aplikasi pembayaran digital Anda</span>
+      </div>
     </v-card-text>
   </div>
 </template>
 
 <script setup>
 import { usePaymentStore } from "~/stores/payment";
-import QRCode from 'qrcode';
+import QRCode from "qrcode";
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted, watch } from "vue";
 
 const paymentStore = usePaymentStore();
 const qrCodeImage = ref(null);
+const qrLoaded = ref(false);
+
+const formatCurrency = (amount) => {
+  return new Intl.NumberFormat("id-ID", {
+    style: "currency",
+    currency: "IDR",
+    minimumFractionDigits: 0,
+  }).format(amount);
+};
 
 const generateQRCode = async () => {
-    const qrValue = paymentStore.qrData.qrvalue;
+  const qrValue = paymentStore.qrData.qrvalue;
-    if (qrValue) {
+  if (qrValue) {
-        try {
+    try {
-            const dataUrl = await QRCode.toDataURL(qrValue);
+      qrLoaded.value = false;
-            if (qrCodeImage.value) {
+      const dataUrl = await QRCode.toDataURL(qrValue, {
-                qrCodeImage.value.src = dataUrl;
+        width: 240,
-            }
+        margin: 1,
-        } catch (error) {
+        color: {
-            console.error('Failed to generate QR Code:', error);
+          dark: "#000000",
-        }
+          light: "#FFFFFF",
+        },
+        errorCorrectionLevel: "M",
+      });
+      if (qrCodeImage.value) {
+        qrCodeImage.value.src = dataUrl;
+        qrCodeImage.value.onload = () => {
+          qrLoaded.value = true;
+        };
+      }
+    } catch (error) {
+      console.error("Failed to generate QR Code:", error);
     }
+  }
 };
 
 onMounted(() => {
-    generateQRCode();
+  generateQRCode();
 });
 
-watch(() => paymentStore.qrData, () => {
+watch(
+  () => paymentStore.qrData,
+  () => {
     generateQRCode();
-});
+  }
+);
 </script>
 
 <style scoped>
-.payment-content {
-  padding-top: 40px !important; /* Sesuaikan jarak atas */
-  padding-bottom: 40px !important; /* Sesuaikan jarak bawah */
-}
 .payment-step {
-  background: rgb(233, 233, 233);
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
+  min-height: 100vh;
+  height: auto;
+  padding: 1rem 0;
 }
-.qr-container {
+
-  padding: 20px;
+/* Header Section */
-  background: white;
+.header-section {
-  border-radius: 16px;
+  padding-top: 8px;
-  display: inline-block;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 }
-.qr-code {
+
-  position: relative;
+.qris-logo-container {
-  background: white;
+  position: center;
-  padding: 20px;
+  /* display: inline-block; */
 }
-.qr-label {
+
-  position: absolute;
+.qris-logo {
-  bottom: 5px;
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
-  right: 10px;
+  transition: transform 0.3s ease;
-  font-size: 10px;
-  font-weight: bold;
 }
-.payment-details {
+
-  max-width: 350px;
+.qris-logo:hover {
+  transform: scale(1.05);
+}
+
+.payment-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.payment-subtitle {
+  color: #666;
+  font-size: 0.9rem;
+  margin-bottom: 0;
+}
+
+/* Main Content Grid Layout */
+.main-content-section {
+  width: 100%;
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: start;
+  max-width: 1000px;
   margin: 0 auto;
 }
-@media (orientation: landscape) and (min-width: 768px) {
+
-  .qr-code {
+/* QR Code Section */
-    width: 240px !important;
+.qr-section {
-    height: 240px !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.details-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.qr-container {
+  position: relative;
+  background: linear-gradient(145deg, #ffffff, #f0f4f8);
+  border-radius: 24px;
+  padding: 2rem;
+  box-shadow:
+    0 20px 40px rgba(0, 0, 0, 0.08),
+    0 8px 16px rgba(0, 0, 0, 0.04),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(10px);
+  width: 100%;
+  max-width: 350px;
+}
+
+.qr-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.qr-code-bg {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 1rem;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.9);
+  position: relative;
+  overflow: hidden;
+}
+
+.qr-image {
+  width: 240px;
+  height: 240px;
+  border-radius: 8px;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.qr-image.qr-loaded {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.qr-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(248, 250, 252, 0.9);
+  border-radius: 8px;
+}
+
+.qr-brand-label {
+  position: absolute;
+  bottom: -8px;
+  right: -8px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 12px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+/* Scanning Animation */
+.scan-line {
+  position: absolute;
+  top: 2rem;
+  left: 2rem;
+  right: 2rem;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #667eea, transparent);
+  animation: scanning 2s ease-in-out infinite;
+}
+
+@keyframes scanning {
+  0% {
+    top: 2rem;
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    top: calc(100% - 2rem);
+    opacity: 0;
   }
 }
-</style>
+
+/* QR Instructions */
+.qr-instructions {
+  margin-top: 1rem;
+}
+
+.instruction-text {
+  color: #666;
+  font-size: 0.9rem;
+  font-weight: 500;
+  margin: 0;
+}
+
+/* Payment Details Card */
+.payment-details-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20px;
+  padding: 2rem;
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  height: fit-content;
+  width: 100%;
+}
+
+.details-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.06);
+}
+
+.details-title {
+  font-weight: 700;
+  color: #1a1a1a;
+  font-size: 1.2rem;
+}
+
+.details-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.detail-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding: 0.5rem;
+  border-radius: 12px;
+  background: rgba(248, 250, 252, 0.6);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  transition: all 0.3s ease;
+}
+
+.detail-row:hover {
+  background: rgba(248, 250, 252, 0.9);
+  transform: translateY(-1px);
+}
+
+.highlight-row {
+  background: rgba(46, 204, 113, 0.08) !important;
+  border: 1px solid rgba(46, 204, 113, 0.2) !important;
+}
+
+.highlight-row:hover {
+  background: rgba(46, 204, 113, 0.12) !important;
+}
+
+.detail-label {
+  display: flex;
+  align-items: center;
+  color: #666;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.detail-value {
+  color: #1a1a1a;
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-left: 1.5rem;
+}
+
+.detail-value.patient-name {
+  color: #2c3e50;
+  font-size: 1.2rem;
+}
+
+.detail-value.amount {
+  color: #27ae60;
+  font-size: 1.4rem;
+  font-weight: 800;
+}
+
+.detail-value.expired {
+  color: #e67e22;
+  font-size: 1rem;
+}
+
+/* Payment Status */
+.payment-status {
+  padding: 1rem;
+  background: rgba(255, 193, 7, 0.08);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 193, 7, 0.2);
+}
+
+.status-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.status-indicator-inline {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* Status Indicator */
+.status-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #f39c12;
+}
+
+.status-dot.pulsing {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(1.2);
+  }
+}
+
+.status-text {
+  color: #666;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+/* Action Buttons */
+.action-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.action-btn {
+  border-radius: 16px !important;
+  font-weight: 600 !important;
+  text-transform: none !important;
+  padding: 0 2rem !important;
+  min-width: 140px;
+  transition: all 0.3s ease !important;
+}
+
+.back-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
+}
+
+.simulate-btn {
+  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%) !important;
+  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3) !important;
+}
+
+.simulate-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(46, 204, 113, 0.4) !important;
+}
+
+/* Help Text */
+.help-text {
+  color: #888;
+  font-size: 0.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+/* Responsive Design */
+@media (max-width: 900px) {
+  .content-grid {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .qr-container {
+    max-width: 320px;
+  }
+
+  .payment-details-card {
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .qr-container {
+    padding: 1.5rem;
+    max-width: 280px;
+  }
+
+  .qr-image {
+    width: 200px;
+    height: 200px;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+  }
+
+  .action-btn {
+    min-width: 100%;
+  }
+
+  .payment-title {
+    font-size: 1.3rem;
+  }
+
+  .payment-details-card {
+    padding: 1.5rem;
+  }
+}
+
+/* Tablet Landscape Optimization */
+@media (orientation: landscape) and (min-width: 768px) and (max-height: 600px) {
+  .header-section {
+    padding-top: 0.5rem;
+    margin-bottom: 2rem;
+  }
+
+  .payment-title {
+    font-size: 1.3rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .payment-subtitle {
+    font-size: 0.8rem;
+  }
+
+  .qr-container {
+    padding: 1.5rem;
+  }
+
+  .qr-image {
+    width: 200px;
+    height: 200px;
+  }
+
+  .payment-details-card {
+    padding: 1.5rem;
+    min-height: 300px;
+  }
+
+  .content-grid {
+    gap: 2rem;
+  }
+}
+
+/* Large Tablet Landscape */
+@media (orientation: landscape) and (min-width: 1024px) {
+  .content-grid {
+    max-width: 1200px;
+    gap: 4rem;
+  }
+
+  .qr-container {
+    max-width: 400px;
+  }
+
+  .qr-image {
+    width: 280px;
+    height: 280px;
+  }
+
+  .payment-details-card {
+    width: 100%;
+  }
+}
+</style>

pages/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="medical-payment-app">
-    <v-container fluid class="pa-0">
+    <v-container fluid class="pa-0 full-height">
-      <v-row justify="center" no-gutters>
+      <v-row justify="center" no-gutters class="full-height">
-        <v-col cols="12">
+        <v-col cols="12" class="full-height">
           <v-card
             class="payment-card mx-auto"
             elevation="0"
@@ -37,7 +37,7 @@ const localIpAddress = ref(null);
 const pollingInterval = ref(null);
 
 const hasIpAddress = computed(() => !!localIpAddress.value);
-const apiURL = 'http://10.10.150.68:8084/api/v1/qris/allstatus';
+const apiURL = 'http://10.10.150.67:8084/api/v1/qris/allstatus';
 
 const paymentSteps = {
   1: Home,
@@ -114,7 +114,7 @@ const startPolling = () => {
           console.log(`📊 Found ${samePatientRecords.length} records for same patient:`, 
             samePatientRecords.map(r => `status: ${r.status}`));
           
-          // Now look for final status (success or fail) among same patient records
+          
           const successRecord = samePatientRecords.find(record => record.status === "2");
           const failRecord = samePatientRecords.find(record => record.status === "0");
           
@@ -124,12 +124,12 @@ const startPolling = () => {
             paymentStore.currentStep = 3;
             clearInterval(pollingInterval.value);
             
-            // Auto return to home after 5 seconds
+            
             setTimeout(() => {
               console.log('🏠 Auto return to home');
               paymentStore.reset();
               startPolling();
-            }, 10000);
+            }, 20000);
             
           } else if (failRecord) {
             console.log('❌ FAIL STATUS FOUND!', failRecord);
@@ -137,12 +137,12 @@ const startPolling = () => {
             paymentStore.currentStep = 4;
             clearInterval(pollingInterval.value);
             
-            // Auto return to home after 5 seconds
+            
             setTimeout(() => {
               console.log('🏠 Auto return to home');
               paymentStore.reset();
               startPolling();
-            }, 10000);
+            }, 20000);
             
           } else {
             console.log('⏳ Still waiting for final status...');
@@ -156,7 +156,7 @@ const startPolling = () => {
     } catch (error) {
       console.error("❌ Polling error:", error);
     }
-  }, 10000);
+  }, 20000);
   
   console.log(`🚀 Polling started - IP-based patient detection`);
 };
@@ -165,7 +165,7 @@ const checkAndRedirect = () => {
   const savedIp = localStorage.getItem('loketIp');
   if (!savedIp) {
     console.warn('IP Address belum diatur. Mengarahkan ke halaman setup.');
-    router.push('/setup-ip');
+    router.push('/setupip');
   } else {
     localIpAddress.value = savedIp;
     console.log('IP Address ditemukan:', savedIp);
@@ -189,19 +189,62 @@ onUnmounted(() => {
 <style scoped>
 .medical-payment-app {
   background: linear-gradient(135deg, #ff9248 20%, #ff9248 100%);
+  min-height: 100vh;
+  height: auto;
 }
+
+.full-height {
+  min-height: 100vh;
+  height: auto;
+}
+
 .contact-fullscreen {
   max-width: none !important;
   border-radius: 0 !important;
+  height: auto !important;
+  min-height: 100vh;
 }
+
 .payment-centered {
-  max-width: 500px !important;
+  max-width: 1200px !important;
-  margin-top: 2rem !important;
+  width: 100% !important;
-  margin-bottom: 2rem !important;
+  margin: 1rem auto !important;
   border-radius: 16px !important;
+  height: auto !important;
+  min-height: calc(100vh - 2rem);
 }
+
 .payment-card {
   background: rgb(224, 224, 224);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+  height: auto !important;
+  min-height: inherit;
+}
+
+/* Responsive adjustments */
+@media (max-width: 900px) {
+  .payment-centered {
+    max-width: 500px !important;
+    margin: 1rem !important;
+  }
+}
+
+@media (orientation: landscape) and (min-width: 768px) {
+  .payment-centered {
+    max-width: 1400px !important;
+    margin: 0.5rem auto !important;
+    min-height: calc(100vh - 1rem);
+  }
+}
+
+@media (orientation: landscape) and (max-height: 600px) {
+  .medical-payment-app {
+    min-height: 600px;
+  }
+  
+  .contact-fullscreen,
+  .payment-centered {
+    min-height: 600px;
+  }
 }
 </style>