555 lines
12 KiB
Vue
555 lines
12 KiB
Vue
<!-- 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> |