update async dan interface
This commit is contained in:
bagus-arie05
555
components/Home.vue
Normal file
555
components/Home.vue
Normal file
@@ -0,0 +1,555 @@
|
||||
<!-- eslint-disable vue/multi-word-component-names -->
|
||||
<template>
|
||||
<div 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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Enhanced Banner Carousel -->
|
||||
<div class="banner-carousel-container">
|
||||
<v-carousel
|
||||
v-model="currentSlide"
|
||||
:show-arrows="true"
|
||||
:hide-delimiters="false"
|
||||
height="500"
|
||||
cycle
|
||||
interval="5000"
|
||||
class="banner-carousel"
|
||||
>
|
||||
<v-carousel-item
|
||||
v-for="(item, index) in carouselItems"
|
||||
:key="index"
|
||||
:src="item.src"
|
||||
:alt="item.alt"
|
||||
cover
|
||||
class="carousel-item"
|
||||
>
|
||||
<div class="carousel-overlay">
|
||||
<div class="overlay-content">
|
||||
<h3 class="overlay-title">{{ item.title }}</h3>
|
||||
<p class="overlay-description">{{ item.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-carousel-item>
|
||||
</v-carousel>
|
||||
|
||||
<!-- Custom Navigation Dots -->
|
||||
<div class="custom-indicators">
|
||||
<span
|
||||
v-for="(item, index) in carouselItems"
|
||||
:key="index"
|
||||
:class="['indicator-dot', { active: currentSlide === index }]"
|
||||
@click="currentSlide = index"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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> -->
|
||||
|
||||
<!-- <v-btn
|
||||
color="secondary"
|
||||
size="large"
|
||||
variant="outlined"
|
||||
rounded="xl"
|
||||
class="cta-button-contact mt-4"
|
||||
@click="triggerDummyData"
|
||||
>
|
||||
Debug ke Step 2
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { usePaymentStore } from '~/stores/payment';
|
||||
|
||||
const paymentStore = usePaymentStore();
|
||||
const currentSlide = ref(0);
|
||||
|
||||
// Carousel items - you can add more images/videos here
|
||||
const carouselItems = ref([
|
||||
{
|
||||
src: "https://i.ytimg.com/vi/4LRCHhepGmw/maxresdefault.jpg",
|
||||
alt: "RSUD Dr. Saiful Anwar Main Building",
|
||||
title: "Fasilitas Modern",
|
||||
description: "Rumah sakit dengan teknologi medis terdepan"
|
||||
},
|
||||
{
|
||||
src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide1.jpg",
|
||||
alt: "Medical Services",
|
||||
title: "Pelayanan Terbaik",
|
||||
description: "Tim medis profesional siap melayani 24 jam"
|
||||
},
|
||||
{
|
||||
src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide2.jpg",
|
||||
alt: "Emergency Services",
|
||||
title: "Unit Gawat Darurat",
|
||||
description: "Layanan emergency yang cepat dan tepat"
|
||||
},
|
||||
{
|
||||
src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide3.jpg",
|
||||
alt: "Medical Equipment",
|
||||
title: "Peralatan Canggih",
|
||||
description: "Teknologi medis terkini untuk diagnosis akurat"
|
||||
}
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.contact-page-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.orange-background-contact {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 15%;
|
||||
min-height: 120px;
|
||||
background: #ff9248;
|
||||
border-top-left-radius: 60px;
|
||||
border-top-right-radius: 60px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.logo-section-contact {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.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-contact {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 10px 20px;
|
||||
padding-bottom: 140px;
|
||||
}
|
||||
|
||||
.title-section-contact {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.main-title-contact {
|
||||
color: #ff9248;
|
||||
font-size: clamp(2.2rem, 5vw, 3.5rem);
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 800;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.subtitle-contact {
|
||||
color: black;
|
||||
font-size: clamp(0.9rem, 2vw, 1.1rem);
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
/* Enhanced Banner Carousel Styles */
|
||||
.banner-carousel-container {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.banner-carousel {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
height: 500px !important;
|
||||
}
|
||||
|
||||
.carousel-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||||
color: white;
|
||||
padding: 40px 30px 30px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.overlay-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.overlay-description {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Custom Indicators */
|
||||
.custom-indicators {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.indicator-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.indicator-dot.active {
|
||||
background: #ff9248;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.indicator-dot:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
/* Contact Info Styles */
|
||||
.contact-info-section-contact {
|
||||
display: flex;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact-item-contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.contact-icon-contact:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.contact-text-contact {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cta-section-contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.cta-button-contact:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 30px rgba(255, 152, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.banner-carousel-container {
|
||||
max-width: 100%;
|
||||
margin: 0 -20px 20px -20px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.banner-carousel {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
height: 300px !important;
|
||||
}
|
||||
|
||||
.overlay-title {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.overlay-description {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.carousel-overlay {
|
||||
padding: 20px 20px 20px;
|
||||
}
|
||||
|
||||
.contact-info-section-contact {
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.logo-group-contact {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.logo-img-contact {
|
||||
width: 45px !important;
|
||||
height: 45px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet Landscape Optimizations */
|
||||
@media (orientation: landscape) and (min-width: 768px) {
|
||||
.carousel-item {
|
||||
height: 400px !important;
|
||||
}
|
||||
|
||||
.main-title-contact {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
.subtitle-contact {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) and (max-width: 1200px) {
|
||||
.content-section-contact {
|
||||
padding-bottom: 140px;
|
||||
}
|
||||
|
||||
.orange-background-contact {
|
||||
height: 150px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
height: 450px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Small tablet adjustments */
|
||||
@media (max-width: 900px) and (orientation: landscape) {
|
||||
.main-title-contact {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.contact-info-section-contact {
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.logo-group-contact {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.content-section-contact {
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
.orange-background-contact {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
height: 350px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Very small tablet landscape */
|
||||
@media (max-width: 768px) and (orientation: landscape) {
|
||||
.logo-group-contact {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.logo-img-contact {
|
||||
width: 35px !important;
|
||||
height: 35px !important;
|
||||
}
|
||||
|
||||
.main-title-contact {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.contact-info-section-contact {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.contact-text-contact {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.contact-icon-contact {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.content-section-contact {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.orange-background-contact {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
height: 250px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide Vuetify default carousel navigation */
|
||||
:deep(.v-carousel__controls) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Style Vuetify carousel arrows */
|
||||
:deep(.v-btn--icon.v-carousel__controls__item) {
|
||||
background: rgba(255, 146, 72, 0.8) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
:deep(.v-btn--icon.v-carousel__controls__item:hover) {
|
||||
background: rgba(255, 146, 72, 1) !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user