From 831cb0a4ea4bd641f6790dbc7103eb90a586e123 Mon Sep 17 00:00:00 2001
From: bagus-arie05 <bagus.arie05@gmail.com>
Date: Tue, 9 Sep 2025 14:57:18 +0700
Subject: [PATCH] update layout

---
 pages/figma.vue | 572 +++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 497 insertions(+), 75 deletions(-)

diff --git a/pages/figma.vue b/pages/figma.vue
index 284dd75..136daeb 100644
--- a/pages/figma.vue
+++ b/pages/figma.vue
@@ -1,119 +1,541 @@
 <template>
-  <v-container fluid class="pa-0">
-    <div class="rotated-container">
-      <div class="header-container">
-        <v-sheet
-          class="orange-bar"
-          color="orange-lighten-1"
-          position="absolute"
-        ></v-sheet>
+  <div class="medical-payment-app">
+    <v-container fluid class="pa-0">
+      <v-row justify="center" no-gutters>
+        <v-col cols="12">
+          <v-card
+            class="payment-card mx-auto"
+            elevation="0"
+            :class="{
+              'contact-fullscreen': paymentStore.currentStep === 1,
+              'payment-centered': paymentStore.currentStep !== 1,
+            }"
+          >
+            <div v-if="paymentStore.currentStep === 1" class="contact-page-container">
+              <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" width="60" height="60" class="logo-img-contact" contain />
+                  <v-img src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png" width="60" height="60" class="logo-img-contact" contain />
+                  <v-img src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png" width="60" height="60" class="logo-img-contact" contain />
+                  <v-img src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png" width="60" height="60" class="logo-img-contact" contain />
+                </div>
+              </div>
 
-        <v-row no-gutters align="center" class="content-row">
-          <v-col cols="auto" class="rotated-text-container">
-            <div class="text-h3 font-weight-bold rotated-text text-orange-darken-1">With Love We Serve</div>
-            <div class="text-body-1 font-weight-medium rotated-text">Kami Menyediakan Layanan Medis yang Dapat Anda Percayai</div>
-          </v-col>
+              <div class="content-section-contact">
+                <div class="title-section-contact">
+                  <h1 class="main-title-contact">With Love We Serve</h1>
+                  <p class="subtitle-contact">Kami Menyediakan Layanan Medis yang Dapat Anda Percayai</p>
+                </div>
+                
+                <div class="image-placeholder-container">
+                    <v-img src="https://i.ytimg.com/vi/4LRCHhepGmw/maxresdefault.jpg" class="responsive-placeholder" object-fit=fill height=400 contain></v-img>
+                </div>
 
-          <v-spacer></v-spacer>
+                <div class="cta-section-contact">
+                  <v-btn
+                    color="primary"
+                    size="large"
+                    variant="flat"
+                    rounded="xl"
+                    class="cta-button-contact"
+                    @click="paymentStore.nextStep"
+                  >
+                    Lanjut ke Pembayaran
+                  </v-btn>
+                </div>
+              </div>
+              
+              <div class="orange-background-contact">
+                <div class="contact-info-section-contact">
+                  <div class="contact-item-contact">
+                    <div class="contact-icon-contact whatsapp-icon">
+                      <v-icon color="#25D366" size="28">mdi-whatsapp</v-icon>
+                    </div>
+                    <div class="contact-text-contact">+62 815-5560-6668</div>
+                  </div>
 
-          <v-col cols="auto" class="rotated-text-container text-white">
-            <div class="text-h6 font-weight-bold rotated-text">rsusaifulanwar.jatimprov.go.id</div>
-          </v-col>
+                  <div class="contact-item-contact">
+                    <div class="contact-icon-contact instagram-icon">
+                      <v-icon color="#E1306C" size="28">mdi-instagram</v-icon>
+                    </div>
+                    <div class="contact-text-contact">rssasaifulanwar</div>
+                  </div>
 
-          <v-col cols="auto" class="d-flex flex-column align-center justify-center">
-            <v-avatar size="40" rounded="0" class="mb-1">
-              <v-img src="https://placehold.co/40x40"></v-img>
-            </v-avatar>
-          </v-col>
+                  <div class="contact-item-contact">
+                    <div class="contact-icon-contact phone-icon">
+                      <v-icon color="#FF9248" size="28">mdi-phone</v-icon>
+                    </div>
+                    <div class="contact-text-contact">0341-362101</div>
+                  </div>
 
-          <v-col cols="auto" class="rotated-text-container text-white">
-            <div class="text-h6 font-weight-bold rotated-text">0341-362101</div>
-          </v-col>
+                  <div class="contact-item-contact">
+                    <div class="contact-icon-contact web-icon">
+                      <v-icon color="#2196F3" size="28">mdi-web</v-icon>
+                    </div>
+                    <div class="contact-text-contact">rsusaifulanwar.jatimprov.go.id</div>
+                  </div>
+                </div>
+              </div>
+            </div>
 
-          <v-col cols="auto" class="rotated-text-container text-white">
-            <div class="text-h6 font-weight-bold rotated-text">rssasaifulanwar</div>
-          </v-col>
+            <div v-else-if="paymentStore.currentStep === 2" class="payment-step">
+              <v-card-text class="pa-8 text-center">
+                <div class="mb-4">
+                  <v-img src="/api/placeholder/60/30" width="60" height="30" class="mx-auto mb-2" contain />
+                  <v-img src="/api/placeholder/100/30" width="100" height="30" class="mx-auto" contain />
+                </div>
 
-          <v-col cols="auto" class="rotated-text-container text-white">
-            <div class="text-h6 font-weight-bold rotated-text">+62 815-5560-6668</div>
-          </v-col>
-        </v-row>
-      </div>
-    </div>
-  </v-container>
+                <h2 class="text-h4 mb-6 font-weight-bold">PINDAI KODE QR</h2>
+
+                <div class="qr-container mb-6">
+                  <v-card class="qr-code mx-auto" width="280" height="280" elevation="0">
+                    <div class="qr-pattern">
+                      <svg viewBox="0 0 280 280" class="qr-svg">
+                        <rect x="10" y="10" width="60" height="60" fill="black" />
+                        <rect x="20" y="20" width="40" height="40" fill="white" />
+                        <rect x="30" y="30" width="20" height="20" fill="black" />
+
+                        <rect x="210" y="10" width="60" height="60" fill="black" />
+                        <rect x="220" y="20" width="40" height="40" fill="white" />
+                        <rect x="230" y="30" width="20" height="20" fill="black" />
+
+                        <rect x="10" y="210" width="60" height="60" fill="black" />
+                        <rect x="20" y="220" width="40" height="40" fill="white" />
+                        <rect x="30" y="230" width="20" height="20" fill="black" />
+
+                        <g class="data-pattern">
+                          <rect x="90" y="90" width="10" height="10" fill="black" />
+                          <rect x="110" y="90" width="10" height="10" fill="black" />
+                          <rect x="130" y="90" width="10" height="10" fill="black" />
+                          <rect x="90" y="110" width="10" height="10" fill="black" />
+                          <rect x="130" y="110" width="10" height="10" fill="black" />
+                          <rect x="150" y="110" width="10" height="10" fill="black" />
+                          <rect x="170" y="110" width="10" height="10" fill="black" />
+                          <rect x="90" y="130" width="10" height="10" fill="black" />
+                          <rect x="110" y="130" width="10" height="10" fill="black" />
+                          <rect x="150" y="130" width="10" height="10" fill="black" />
+                        </g>
+                      </svg>
+                    </div>
+                    <div class="qr-label">
+                      <small class="text-grey-darken-1">QRIS</small>
+                    </div>
+                  </v-card>
+                </div>
+
+                <div class="payment-details">
+                  <v-row dense class="mb-2">
+                    <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-2">
+                    <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-4">
+                    <v-col cols="5" class="text-left">
+                      <strong>BERLAKU SAMPAI:</strong>
+                    </v-col>
+                    <v-col cols="7" class="text-left text-red">
+                      {{ paymentStore.patientInfo.expiry }}
+                    </v-col>
+                  </v-row>
+                </div>
+
+                <div class="d-flex gap-2 justify-center">
+                  <v-btn color="grey" variant="outlined" @click="paymentStore.prevStep"> Kembali </v-btn>
+                  <v-btn color="primary" variant="flat" @click="paymentStore.nextStep"> Simulasi Pembayaran </v-btn>
+                </div>
+              </v-card-text>
+            </div>
+
+            <div v-else-if="paymentStore.currentStep === 3" class="payment-step">
+              <v-card-text class="pa-8 text-center">
+                <div class="success-container">
+                  <v-icon icon="mdi-check-circle" size="80" color="orange" class="mb-4" />
+
+                  <h2 class="text-h4 mb-4 font-weight-bold">Pembayaran Berhasil</h2>
+
+                  <p class="text-h6 text-grey-darken-1 mb-6">
+                    Silahkan Menunggu Bukti<br />Pembayaran
+                  </p>
+
+                  <v-btn color="primary" size="large" variant="flat" rounded="xl" @click="paymentStore.reset">
+                    Kembali ke Awal
+                  </v-btn>
+                </div>
+              </v-card-text>
+            </div>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
 </template>
 
 <script setup>
-// No script logic needed for this static layout
+import { usePaymentStore } from '~/stores/payment';
+
+const paymentStore = usePaymentStore();
+
+// Auto advance simulation
+onMounted(() => {
+  // Simulate QR code scanning after 10 seconds on QR step
+  const autoAdvance = () => {
+    if (paymentStore.currentStep === 2) {
+      setTimeout(() => {
+        if (paymentStore.currentStep === 2) {
+          paymentStore.nextStep();
+        }
+      }, 10000);
+    }
+  };
+
+  watch(() => paymentStore.currentStep, autoAdvance, { immediate: true });
+});
 </script>
 
 <style scoped>
-.rotated-container {
-  width: 1133px;
-  height: 744px;
+.medical-payment-app {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #ffd7b5 20%, #ff9248 100%);
+}
+
+/* Contact Page Styles (Step 1) */
+.contact-fullscreen {
+  height: 100vh !important;
+  max-width: none !important;
+  border-radius: 0 !important;
+}
+
+.payment-centered {
+  max-width: 500px !important;
+  margin-top: 2rem !important;
+  border-radius: 16px !important;
+}
+
+.payment-step {
+  background: rgb(233, 233, 233);
+}
+
+.contact-page-container {
   position: relative;
-  /* Rotate the entire container 90 degrees clockwise */
-  transform: rotate(90deg) translateX(0);
-  transform-origin: top left;
+  width: 100%;
+  height: 100vh;
   background: white;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-.header-container {
+/* Orange curved background */
+.orange-background-contact {
   position: absolute;
-  left: 46px;
-  top: 9px;
-  /* Use flexbox for spacing as per the original design */
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 15%; /* Tinggi disesuaikan agar tidak terlalu besar */
+  background: #ff9248;
+  border-top-left-radius: 60px;
+  border-top-right-radius: 60px;
+  z-index: 1;
   display: flex;
   align-items: center;
-  gap: 40px;
+  justify-content: center;
 }
 
-.content-row {
+/* Logo section */
+.logo-section-contact {
+  position: relative;
+  z-index: 2;
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.logo-group-contact {
+  display: flex;
+  gap: 40px;
+  align-items: center;
+}
+
+.logo-img-contact {
+  transition: transform 0.3s ease;
+}
+
+.logo-img-contact:hover {
+  transform: scale(1.1);
+}
+
+/* Content section */
+.content-section-contact {
+  position: relative;
+  z-index: 2;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start; 
+  padding: 10px;
+}
+
+/* Title section */
+.title-section-contact {
+  text-align: center;
+  margin-top: 20px; /* Disesuaikan untuk memberi ruang logo */
+  margin-bottom: 30px; /* Jarak antara title dan placeholder */
+}
+
+.main-title-contact {
+  color: #ff9248;
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  font-family: 'Roboto', sans-serif;
+  font-weight: 800;
+  margin-bottom: 16px;
+  line-height: 1.2;
+}
+
+.subtitle-contact {
+  color: black;
+  font-size: clamp(1rem, 2vw, 1.25rem);
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+  margin: 0;
+  max-width: 600px;
+}
+
+/* New Image Placeholder Styles */
+.image-placeholder-container {
+    width: 100%; /* Pastikan kontainer mengambil lebar penuh */
+    max-width: 600px; /* Batasi lebar maksimal */
+    margin-bottom: 40px; /* Jarak antara gambar dan tombol */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f0f0f0; /* Warna latar belakang placeholder */
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+
+.responsive-placeholder {
+    width: 100%;
+    height: 200px;
+    object-fit: fill !important;
+    aspect-ratio: 16 / 9; /* Rasio aspek 2:1 */
+}
+
+
+/* Contact info section */
+.contact-info-section-contact {
+  display: flex;
+  gap: 60px; 
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
   width: 100%;
 }
 
-.orange-bar {
-  width: 1041px;
-  height: 72px;
-  left: 0;
-  top: -9px;
-  border-top-left-radius: 60px;
-  border-top-right-radius: 60px;
-  z-index: 1; /* Ensure it's behind the text */
-}
-
-.rotated-text-container {
+.contact-item-contact {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
+  gap: 8px;
 }
 
-.rotated-text {
-  /* Rotate the text 90 degrees counter-clockwise to appear upright in the rotated container */
-  transform: rotate(-90deg);
-  transform-origin: top left;
-  white-space: nowrap; /* Prevent text from wrapping */
+.contact-icon-contact {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
 }
 
-.rotated-text-container:nth-child(1) .rotated-text:nth-child(1) {
-  height: 32px; /* Adjusted to fit the original size */
+.contact-icon-contact:hover {
+  transform: scale(1.1);
 }
 
-.rotated-text-container:nth-child(3) .rotated-text {
-  height: 272px; /* Match original height */
+.contact-text-contact {
+  color: white;
+  font-size: 14px;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+  white-space: nowrap;
 }
 
-.rotated-text-container:nth-child(5) .rotated-text {
-  height: 123px; /* Match original height */
+/* CTA Section */
+.cta-section-contact {
+  margin-top: 20px;
+  margin-bottom: 20px; /* Tambahkan margin bawah agar tidak terlalu dekat dengan bar oranye */
 }
 
-.rotated-text-container:nth-child(6) .rotated-text {
-  height: 144px; /* Match original height */
+.cta-button-contact {
+  padding: 12px 40px !important;
+  font-size: 1.1rem !important;
+  font-weight: 600 !important;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease;
+  background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%) !important;
 }
 
-.rotated-text-container:nth-child(7) .rotated-text {
-  height: 181px; /* Match original height */
+.cta-button-contact:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 30px rgba(255, 152, 0, 0.4);
+}
+
+
+/* Step 2 & 3 - Payment and Success Styles */
+.payment-card {
+  background: white;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+}
+
+.qr-container {
+  padding: 20px;
+  background: white;
+  border-radius: 16px;
+  display: inline-block;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.qr-code {
+  position: relative;
+  background: white;
+  padding: 20px;
+}
+
+.qr-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.qr-label {
+  position: absolute;
+  bottom: 5px;
+  right: 10px;
+  font-size: 10px;
+  font-weight: bold;
+}
+
+.payment-details {
+  max-width: 350px;
+  margin: 0 auto;
+}
+
+.success-container {
+  padding: 40px 20px;
+}
+
+.text-orange {
+  color: #ff9800 !important;
+}
+
+.text-dark {
+  color: #424242 !important;
+}
+
+/* Tablet Landscape Optimizations */
+@media (orientation: landscape) and (min-width: 768px) {
+  
+  .responsive-placeholder {
+    width: 100%;
+    height: 200px;
+    object-fit: fill !important;
+    aspect-ratio: 16 / 9; /* Rasio aspek 2:1 */
+  }
+  .main-title-contact {
+    font-size: 3rem;
+  }
+
+  .subtitle-contact {
+    font-size: 1.1rem;
+  }
+
+  .contact-info-section-contact {
+    gap: 40px;
+  }
+
+  .logo-group-contact {
+    gap: 30px;
+  }
+
+  .logo-img-contact {
+    width: 50px !important;
+    height: 50px !important;
+  }
+
+  .contact-text-contact {
+    font-size: 12px;
+  }
+
+  .contact-icon-contact {
+    width: 40px;
+    height: 40px;
+  }
+
+  /* Payment steps remain centered */
+  .qr-code {
+    width: 240px !important;
+    height: 240px !important;
+  }
+}
+
+/* Small tablet adjustments */
+@media (max-width: 900px) and (orientation: landscape) {
+  .main-title-contact {
+    font-size: 2.5rem;
+  }
+
+  .contact-info-section-contact {
+    gap: 30px;
+  }
+
+  .logo-group-contact {
+    gap: 25px;
+  }
+}
+
+/* Very small tablet landscape */
+@media (max-width: 768px) and (orientation: landscape) {
+  .logo-group-contact {
+    gap: 20px;
+  }
+
+  .logo-img-contact {
+    width: 40px !important;
+    height: 40px !important;
+  }
+
+  .main-title-contact {
+    font-size: 2rem;
+  }
+
+  .contact-info-section-contact {
+    gap: 20px; 
+  }
+
+  .contact-text-contact {
+    font-size: 10px;
+  }
+
+  .contact-icon-contact {
+    width: 36px;
+    height: 36px;
+  }
 }
 </style>
\ No newline at end of file