1192 lines
27 KiB
Vue
1192 lines
27 KiB
Vue
<template>
|
|
<div class="contact-page-container">
|
|
<div class="logo-section-contact">
|
|
<div class="logo-group-contact">
|
|
<v-img
|
|
src="/JatimLogo.png"
|
|
width="50"
|
|
height="50"
|
|
class="logo-img-contact"
|
|
contain
|
|
/>
|
|
<v-img
|
|
src="/rssalogo.png"
|
|
width="50"
|
|
height="50"
|
|
class="logo-img-contact"
|
|
contain
|
|
/>
|
|
<v-img
|
|
src="/BerakhlakLogo.png"
|
|
width="50"
|
|
height="50"
|
|
class="logo-img-contact"
|
|
contain
|
|
/>
|
|
<v-img
|
|
src="karslogo.png"
|
|
width="50"
|
|
height="50"
|
|
class="logo-img-contact"
|
|
contain
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-section-contact">
|
|
<div class="title-section-contact">
|
|
<div class="title-decoration">
|
|
<div class="title-line"></div>
|
|
<v-icon color="#ff9248" size="32" class="title-heart"
|
|
>mdi-heart-pulse</v-icon
|
|
>
|
|
<div class="title-line"></div>
|
|
</div>
|
|
<h1 class="main-title-contact">
|
|
<span class="title-gradient">With Love</span>
|
|
<span class="title-highlight">We Serve</span>
|
|
</h1>
|
|
<p class="subtitle-contact">
|
|
<v-icon color="#ff9248" size="16" class="subtitle-icon"
|
|
>mdi-shield-check</v-icon
|
|
>
|
|
Kami Menyediakan Layanan Medis yang Dapat Anda Percayai
|
|
</p>
|
|
</div>
|
|
|
|
<div class="banner-carousel-container">
|
|
<!-- Loading indicator -->
|
|
<div v-if="isLoading" class="loading-container">
|
|
<v-progress-circular indeterminate color="#ff9248" size="64" />
|
|
<p class="loading-text">Memuat media...</p>
|
|
</div>
|
|
|
|
<!-- Carousel -->
|
|
<v-carousel
|
|
v-else-if="carouselItems.length > 0"
|
|
v-model="currentSlide"
|
|
ref="carousel"
|
|
:show-arrows="true"
|
|
:hide-delimiters="false"
|
|
:cycle="false"
|
|
:interval="5000"
|
|
class="banner-carousel"
|
|
:height="getCarouselHeight()"
|
|
:continuous="false"
|
|
>
|
|
<v-carousel-item
|
|
v-for="(item, index) in carouselItems"
|
|
:key="index"
|
|
class="carousel-item"
|
|
>
|
|
<!-- Image Item -->
|
|
<template v-if="item.isImage">
|
|
<div class="media-wrapper" :class="getMediaClass(item)">
|
|
<v-img
|
|
:src="item.src"
|
|
:alt="item.alt"
|
|
:contain="item.aspectRatio === 'portrait' || item.aspectRatio === 'square'"
|
|
:cover="item.aspectRatio === 'landscape'"
|
|
class="media-image"
|
|
>
|
|
<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-img>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Video Item -->
|
|
<template v-else>
|
|
<div class="video-container" :class="getMediaClass(item)">
|
|
<video
|
|
v-if="currentSlide === index"
|
|
ref="videoPlayer"
|
|
:src="item.src"
|
|
controls
|
|
autoplay
|
|
class="video-player"
|
|
:class="getVideoClass(item)"
|
|
@play="onVideoPlay"
|
|
@pause="onVideoPause"
|
|
@ended="onVideoEnded"
|
|
@loadedmetadata="handleVideoMetadata($event, item)"
|
|
@error="onVideoError"
|
|
>
|
|
Browser Anda tidak mendukung tag video.
|
|
</video>
|
|
|
|
<div v-else class="video-thumbnail" @click="playVideo(index)">
|
|
<video
|
|
:src="item.src"
|
|
class="thumbnail-video"
|
|
:class="getVideoClass(item)"
|
|
muted
|
|
@loadedmetadata="handleVideoMetadata($event, item)"
|
|
/>
|
|
<div class="play-button-overlay">
|
|
<v-icon color="white" size="48">mdi-play-circle</v-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</v-carousel-item>
|
|
</v-carousel>
|
|
|
|
<!-- Empty state -->
|
|
<div v-else class="empty-state">
|
|
<v-icon color="#ff9248" size="64">mdi-image-off</v-icon>
|
|
<p>Tidak ada media tersedia</p>
|
|
</div>
|
|
|
|
<!-- Custom indicators -->
|
|
<div v-if="carouselItems.length > 0" class="custom-indicators">
|
|
<span
|
|
v-for="(item, index) in carouselItems"
|
|
:key="index"
|
|
:class="['indicator-dot', { active: currentSlide === index }]"
|
|
@click="currentSlide = index"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Cards Section - Tampil di Portrait -->
|
|
<div v-if="isPortrait" class="info-cards-section">
|
|
<div class="info-card">
|
|
<v-icon color="#ff9248" size="40">mdi-hospital-building</v-icon>
|
|
<h3>Fasilitas Modern</h3>
|
|
<p>Dilengkapi dengan peralatan medis terkini dan teknologi canggih</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<v-icon color="#ff9248" size="40">mdi-doctor</v-icon>
|
|
<h3>Tim Profesional</h3>
|
|
<p>Dokter dan tenaga medis berpengalaman siap melayani 24/7</p>
|
|
</div>
|
|
<div class="info-card">
|
|
<v-icon color="#ff9248" size="40">mdi-heart-pulse</v-icon>
|
|
<h3>Pelayanan Prima</h3>
|
|
<p>Komitmen memberikan pelayanan kesehatan terbaik untuk Anda</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="orange-background-contact">
|
|
<div class="contact-info-section-contact">
|
|
<div class="contact-grid">
|
|
<div class="contact-item-contact whatsapp-item">
|
|
<div class="contact-card">
|
|
<div class="contact-icon-wrapper">
|
|
<div class="contact-icon-contact whatsapp-icon">
|
|
<v-icon color="white" size="24">mdi-whatsapp</v-icon>
|
|
</div>
|
|
</div>
|
|
<div class="contact-details">
|
|
<div class="contact-label">WhatsApp</div>
|
|
<div class="contact-text-contact">+62 815-5560-6668</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-item-contact instagram-item">
|
|
<div class="contact-card">
|
|
<div class="contact-icon-wrapper">
|
|
<div class="contact-icon-contact instagram-icon">
|
|
<v-icon color="white" size="24">mdi-instagram</v-icon>
|
|
</div>
|
|
</div>
|
|
<div class="contact-details">
|
|
<div class="contact-label">Instagram</div>
|
|
<div class="contact-text-contact">@rssasaifulanwar</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-item-contact phone-item">
|
|
<div class="contact-card">
|
|
<div class="contact-icon-wrapper">
|
|
<div class="contact-icon-contact phone-icon">
|
|
<v-icon color="white" size="24">mdi-phone</v-icon>
|
|
</div>
|
|
</div>
|
|
<div class="contact-details">
|
|
<div class="contact-label">Telepon</div>
|
|
<div class="contact-text-contact">0341-362101</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-item-contact web-item">
|
|
<div class="contact-card">
|
|
<div class="contact-icon-wrapper">
|
|
<div class="contact-icon-contact web-icon">
|
|
<v-icon color="white" size="24">mdi-web</v-icon>
|
|
</div>
|
|
</div>
|
|
<div class="contact-details">
|
|
<div class="contact-label">Website</div>
|
|
<div class="contact-text-contact">
|
|
rsusaifulanwar.jatimprov.go.id
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="orange-background-portrait">
|
|
<div class="address-title">RSUD Dr. Saiful Anwar Provinsi Jawa Timur</div>
|
|
<div class="address-text">
|
|
Jl. Jaksa Agung Suprapto No.2, Klojen, Kec. Klojen, Kota Malang, Jawa
|
|
Timur 65112
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, onMounted, onUnmounted, computed } from "vue";
|
|
import { useFileSync } from "~/composables/useFileSync";
|
|
|
|
const { fileLocal, tampilFileBrowser } = useFileSync();
|
|
|
|
const currentSlide = ref(0);
|
|
const carouselInterval = ref(null);
|
|
const windowWidth = ref(window.innerWidth);
|
|
const windowHeight = ref(window.innerHeight);
|
|
const carouselItems = ref([]);
|
|
const isLoading = ref(true);
|
|
const videoPlayer = ref(null);
|
|
|
|
const isPortrait = computed(() => windowHeight.value > windowWidth.value);
|
|
|
|
// Deteksi aspect ratio media
|
|
const detectAspectRatio = (width, height) => {
|
|
if (!width || !height) return 'landscape';
|
|
const ratio = width / height;
|
|
|
|
if (ratio > 1.3) return 'landscape'; // 16:9, 4:3, dll
|
|
if (ratio < 0.7) return 'portrait'; // 9:16, dll
|
|
return 'square'; // 1:1
|
|
};
|
|
|
|
// Get carousel height berdasarkan orientasi screen dan media
|
|
const getCarouselHeight = () => {
|
|
if (carouselItems.value.length === 0) return 400;
|
|
|
|
const currentItem = carouselItems.value[currentSlide.value];
|
|
if (!currentItem) return 400;
|
|
|
|
if (isPortrait.value) {
|
|
// Portrait screen
|
|
if (currentItem.aspectRatio === 'portrait') return 650;
|
|
if (currentItem.aspectRatio === 'square') return 500;
|
|
return 400;
|
|
} else {
|
|
// Landscape screen
|
|
return 400;
|
|
}
|
|
};
|
|
|
|
// Get media class untuk styling
|
|
const getMediaClass = (item) => {
|
|
return `aspect-${item.aspectRatio || 'landscape'}`;
|
|
};
|
|
|
|
// Get video class
|
|
const getVideoClass = (item) => {
|
|
return `video-${item.aspectRatio || 'landscape'}`;
|
|
};
|
|
|
|
// Handle video metadata untuk deteksi aspect ratio
|
|
const handleVideoMetadata = (event, item) => {
|
|
const video = event.target;
|
|
if (video.videoWidth && video.videoHeight && !item.aspectRatio) {
|
|
item.aspectRatio = detectAspectRatio(video.videoWidth, video.videoHeight);
|
|
console.log(`Video ${item.name}: ${video.videoWidth}x${video.videoHeight} = ${item.aspectRatio}`);
|
|
}
|
|
};
|
|
|
|
// Function untuk extract nomor dari nama file
|
|
const extractNumber = (filename) => {
|
|
const match = filename.match(/^(\d+)\./);
|
|
return match ? parseInt(match[1], 10) : 999999;
|
|
};
|
|
|
|
// Function untuk cek apakah file adalah gambar
|
|
const isImageFile = (filename) => {
|
|
const ext = filename.split('.').pop()?.toLowerCase();
|
|
return ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'].includes(ext || '');
|
|
};
|
|
|
|
// Function untuk cek apakah file adalah video
|
|
const isVideoFile = (filename) => {
|
|
const ext = filename.split('.').pop()?.toLowerCase();
|
|
return ['mp4', 'mkv', 'avi', 'mov', 'webm'].includes(ext || '');
|
|
};
|
|
|
|
// Deteksi aspect ratio dari gambar
|
|
const detectImageAspectRatio = (url) => {
|
|
return new Promise((resolve) => {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
const ratio = detectAspectRatio(img.width, img.height);
|
|
resolve(ratio);
|
|
};
|
|
img.onerror = () => resolve('landscape');
|
|
img.src = url;
|
|
});
|
|
};
|
|
|
|
// Load carousel items dari file sync
|
|
const loadCarouselItems = async () => {
|
|
isLoading.value = true;
|
|
try {
|
|
await tampilFileBrowser();
|
|
|
|
const mediaFiles = fileLocal.value
|
|
.filter(file => isImageFile(file.name) || isVideoFile(file.name))
|
|
.sort((a, b) => extractNumber(a.name) - extractNumber(b.name));
|
|
|
|
// Deteksi aspect ratio untuk semua media
|
|
const itemsWithRatio = await Promise.all(
|
|
mediaFiles.map(async (file) => {
|
|
const isImage = isImageFile(file.name);
|
|
const number = extractNumber(file.name);
|
|
let aspectRatio = 'landscape';
|
|
|
|
if (isImage) {
|
|
aspectRatio = await detectImageAspectRatio(file.url);
|
|
}
|
|
|
|
return {
|
|
src: file.url,
|
|
alt: `Media ${number}`,
|
|
// title: isImage ? `Slide ${number}` : `Video ${number}`,
|
|
// description: isImage
|
|
// ? 'Pelayanan kesehatan terbaik untuk Anda'
|
|
// : 'Tonton video kami',
|
|
isImage: isImage,
|
|
name: file.name,
|
|
order: number,
|
|
aspectRatio: aspectRatio
|
|
};
|
|
})
|
|
);
|
|
|
|
carouselItems.value = itemsWithRatio;
|
|
// console.log('Carousel items loaded:', carouselItems.value);
|
|
} catch (error) {
|
|
console.error('Error loading carousel items:', error);
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
};
|
|
|
|
const handleResize = () => {
|
|
windowWidth.value = window.innerWidth;
|
|
windowHeight.value = window.innerHeight;
|
|
};
|
|
|
|
const onVideoLoad = () => {
|
|
console.log("Video loaded successfully");
|
|
};
|
|
|
|
const onVideoError = (error) => {
|
|
console.error("Video error:", error);
|
|
};
|
|
|
|
const startCarousel = () => {
|
|
if (carouselInterval.value) {
|
|
clearInterval(carouselInterval.value);
|
|
}
|
|
carouselInterval.value = setInterval(() => {
|
|
const nextSlide = (currentSlide.value + 1) % carouselItems.value.length;
|
|
currentSlide.value = nextSlide;
|
|
}, 10000);
|
|
};
|
|
|
|
const stopCarousel = () => {
|
|
if (carouselInterval.value) {
|
|
clearInterval(carouselInterval.value);
|
|
carouselInterval.value = null;
|
|
}
|
|
};
|
|
|
|
const playVideo = (index) => {
|
|
currentSlide.value = index;
|
|
stopCarousel();
|
|
};
|
|
|
|
// Video event handlers
|
|
const onVideoPlay = () => {
|
|
console.log("Video playing, stopping carousel");
|
|
stopCarousel();
|
|
};
|
|
|
|
const onVideoPause = () => {
|
|
console.log("Video paused, starting carousel");
|
|
startCarousel();
|
|
};
|
|
|
|
const onVideoEnded = () => {
|
|
console.log("Video ended, moving to next slide");
|
|
// Pindah ke slide berikutnya
|
|
const nextSlide = (currentSlide.value + 1) % carouselItems.value.length;
|
|
currentSlide.value = nextSlide;
|
|
|
|
// Restart carousel untuk slide berikutnya
|
|
startCarousel();
|
|
};
|
|
|
|
watch(currentSlide, (newSlide) => {
|
|
const currentItem = carouselItems.value[newSlide];
|
|
if (currentItem && !currentItem.isImage) {
|
|
stopCarousel();
|
|
} else {
|
|
startCarousel();
|
|
}
|
|
});
|
|
|
|
onMounted(async () => {
|
|
await loadCarouselItems();
|
|
if (carouselItems.value.length > 0) {
|
|
startCarousel();
|
|
}
|
|
window.addEventListener("resize", handleResize);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
stopCarousel();
|
|
window.removeEventListener("resize", handleResize);
|
|
carouselItems.value.forEach(item => {
|
|
if (item.src && item.src.startsWith('blob:')) {
|
|
URL.revokeObjectURL(item.src);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.loading-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 400px;
|
|
gap: 16px;
|
|
}
|
|
|
|
.loading-text {
|
|
color: #ff9248;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Media Wrapper untuk handle berbagai aspect ratio */
|
|
.media-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #000;
|
|
}
|
|
|
|
.media-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Aspect ratio classes */
|
|
.aspect-landscape .media-image {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.aspect-portrait .media-image,
|
|
.aspect-square .media-image {
|
|
object-fit: contain;
|
|
background: #000;
|
|
}
|
|
|
|
/* Video styling */
|
|
.video-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #000;
|
|
}
|
|
|
|
.video-player,
|
|
.thumbnail-video {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.video-landscape {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.video-portrait,
|
|
.video-square {
|
|
width: auto;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.video-thumbnail {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #000;
|
|
}
|
|
|
|
.play-button-overlay {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: rgba(255, 146, 72, 0.9);
|
|
border-radius: 50%;
|
|
padding: 20px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 15px rgba(255, 146, 72, 0.4);
|
|
z-index: 10;
|
|
}
|
|
|
|
.play-button-overlay:hover {
|
|
background: rgba(255, 146, 72, 1);
|
|
transform: translate(-50%, -50%) scale(1.15);
|
|
box-shadow: 0 6px 20px rgba(255, 146, 72, 0.6);
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 400px;
|
|
gap: 16px;
|
|
color: #999;
|
|
}
|
|
|
|
.info-cards-section {
|
|
display: none;
|
|
}
|
|
|
|
.contact-page-container {
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
background: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.orange-background-contact {
|
|
width: 100%;
|
|
background: linear-gradient(135deg, #ff9248 0%, #ff7b2e 100%);
|
|
border-top-left-radius: 40px;
|
|
border-top-right-radius: 40px;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: auto;
|
|
transition: height 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.orange-background-portrait {
|
|
display: none;
|
|
}
|
|
|
|
.logo-section-contact {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
justify-content: center;
|
|
transition: padding 0.3s ease;
|
|
}
|
|
|
|
.logo-group-contact {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.logo-img-contact {
|
|
transition: transform 0.3s ease;
|
|
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
.content-section-contact {
|
|
position: relative;
|
|
z-index: 2;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
transition: padding 0.3s ease;
|
|
}
|
|
|
|
.title-section-contact {
|
|
margin-top: -8px;
|
|
text-align: center;
|
|
transition: margin-bottom 0.3s ease;
|
|
}
|
|
|
|
.title-decoration {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin-bottom: 15px;
|
|
animation: fadeInDown 0.8s ease-out;
|
|
}
|
|
|
|
.title-line {
|
|
display: none;
|
|
width: 60px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, #ff9248, transparent);
|
|
}
|
|
|
|
.title-heart {
|
|
animation: heartbeat 1.5s ease-in-out infinite;
|
|
display: none;
|
|
}
|
|
|
|
@keyframes heartbeat {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
}
|
|
|
|
@keyframes fadeInDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.main-title-contact {
|
|
font-family: "Roboto", sans-serif;
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
transition: font-size 0.3s ease;
|
|
display: flex;
|
|
gap: 10px;
|
|
width: fit-content;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
animation: fadeInUp 0.8s ease-out 0.2s both;
|
|
}
|
|
|
|
.title-gradient {
|
|
background: linear-gradient(135deg, #ff9248 0%, #ff6b35 50%, #ff9248 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
display: inline-block;
|
|
position: relative;
|
|
background-size: 200% auto;
|
|
animation: shimmer 3s ease-in-out infinite;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0%, 100% { background-position: 0% center; }
|
|
50% { background-position: 100% center; }
|
|
}
|
|
|
|
.title-highlight {
|
|
color: #333;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.title-highlight::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 8px;
|
|
background: rgba(255, 146, 72, 0.2);
|
|
z-index: -1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.subtitle-contact {
|
|
color: #555;
|
|
font-family: "Roboto", sans-serif;
|
|
font-weight: 500;
|
|
margin-top: 10px;
|
|
font-size: 14px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
animation: fadeInUp 0.8s ease-out 0.4s both;
|
|
}
|
|
|
|
.subtitle-icon {
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.6; }
|
|
}
|
|
|
|
.banner-carousel-container {
|
|
width: 95%;
|
|
position: relative;
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.banner-carousel-container:hover {
|
|
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.banner-carousel {
|
|
border-radius: 0px;
|
|
overflow: hidden;
|
|
transition: height 0.3s ease;
|
|
}
|
|
|
|
.carousel-item {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.carousel-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
|
color: white;
|
|
padding: 30px 20px 20px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.overlay-content {
|
|
max-width: 500px;
|
|
}
|
|
|
|
.overlay-title {
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
|
transition: font-size 0.3s ease;
|
|
}
|
|
|
|
.overlay-description {
|
|
font-weight: 400;
|
|
margin: 0;
|
|
opacity: 0.9;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
transition: font-size 0.3s ease;
|
|
}
|
|
|
|
.custom-indicators {
|
|
position: absolute;
|
|
bottom: 15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 10px;
|
|
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-section-contact {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin-top: -12px;
|
|
}
|
|
|
|
.contact-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 16px;
|
|
animation: fadeInUp 0.8s ease-out 0.2s both;
|
|
}
|
|
|
|
.contact-card {
|
|
display: grid;
|
|
gap: 4px;
|
|
grid-template-columns: 50px 1fr;
|
|
align-items: center;
|
|
}
|
|
|
|
.contact-item-contact {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.contact-item-contact::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 4px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.whatsapp-item::before {
|
|
background: linear-gradient(90deg, #25d366, #128c7e);
|
|
}
|
|
|
|
.instagram-item::before {
|
|
background: linear-gradient(90deg, #e1306c, #c13584, #833ab4);
|
|
}
|
|
|
|
.phone-item::before {
|
|
background: linear-gradient(90deg, #ff9248, #ff7b2e);
|
|
}
|
|
|
|
.web-item::before {
|
|
background: linear-gradient(90deg, #2196f3, #1976d2);
|
|
}
|
|
|
|
.contact-icon-wrapper {
|
|
width: fit-content;
|
|
}
|
|
|
|
.contact-icon-contact {
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
transition: all 0.3s ease;
|
|
width: fit-content;
|
|
}
|
|
|
|
.whatsapp-icon {
|
|
background: linear-gradient(135deg, #25d366, #128c7e);
|
|
}
|
|
|
|
.instagram-icon {
|
|
background: linear-gradient(135deg, #e1306c, #c13584, #833ab4);
|
|
}
|
|
|
|
.phone-icon {
|
|
background: linear-gradient(135deg, #ff9248, #ff7b2e);
|
|
}
|
|
|
|
.web-icon {
|
|
background: linear-gradient(135deg, #2196f3, #1976d2);
|
|
}
|
|
|
|
.contact-details {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.contact-label {
|
|
font-size: 12px;
|
|
color: #999;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.contact-text-contact {
|
|
color: #333;
|
|
font-family: "Roboto", sans-serif;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
transition: color 0.3s ease;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.contact-item-contact:hover .contact-text-contact {
|
|
color: #ff9248;
|
|
}
|
|
|
|
:deep(.v-carousel__controls) {
|
|
display: none;
|
|
}
|
|
|
|
/* PORTRAIT MODE */
|
|
@media (orientation: portrait) {
|
|
.orange-background-contact {
|
|
background: white;
|
|
padding: 0px 0px 150px;
|
|
margin-top: -20px;
|
|
}
|
|
|
|
.orange-background-portrait {
|
|
display: block;
|
|
width: 100%;
|
|
background: linear-gradient(135deg, #ff9248 0%, #ff7b2e 100%);
|
|
border-top-left-radius: 40px;
|
|
border-top-right-radius: 40px;
|
|
padding-top: 16px;
|
|
z-index: 1;
|
|
height: 150px;
|
|
text-align: center;
|
|
margin-top: auto;
|
|
transition: height 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.logo-section-contact {
|
|
padding: 20px 12px;
|
|
margin-top: 40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.logo-img-contact {
|
|
width: 100px !important;
|
|
height: 100px !important;
|
|
}
|
|
|
|
.contact-info-section-contact {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
}
|
|
|
|
.content-section-contact {
|
|
padding: 10px 10px;
|
|
}
|
|
|
|
.title-section-contact {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.main-title-contact {
|
|
font-size: 4.5rem;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.subtitle-contact {
|
|
font-size: 1.2rem !important;
|
|
text-align: center;
|
|
}
|
|
|
|
.banner-carousel-container {
|
|
max-width: 800px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.overlay-title {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.overlay-description {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.contact-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.address-title {
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
color: rgb(240, 240, 240);
|
|
margin-top: 20px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.address-text {
|
|
color: rgb(240, 240, 240);
|
|
}
|
|
|
|
.info-cards-section {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 15px;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
padding: 30px 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.info-card {
|
|
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
|
|
border-radius: 20px;
|
|
padding: 25px 20px;
|
|
text-align: center;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
transition: all 0.3s ease;
|
|
border: 2px solid transparent;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.info-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 30px rgba(255, 146, 72, 0.2);
|
|
border-color: #ff9248;
|
|
}
|
|
|
|
.info-card h3 {
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: #333;
|
|
margin: 15px 0 10px;
|
|
}
|
|
|
|
.info-card p {
|
|
font-size: 0.85rem;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.info-card:nth-child(1) {
|
|
animation: fadeInUp 0.6s ease-out 0.1s both;
|
|
}
|
|
|
|
.info-card:nth-child(2) {
|
|
animation: fadeInUp 0.6s ease-out 0.2s both;
|
|
}
|
|
|
|
.info-card:nth-child(3) {
|
|
animation: fadeInUp 0.6s ease-out 0.3s both;
|
|
}
|
|
}
|
|
|
|
/* LANDSCAPE MODE */
|
|
@media (orientation: landscape) {
|
|
.orange-background-contact {
|
|
padding: 25px 20px;
|
|
}
|
|
|
|
.logo-section-contact {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.logo-img-contact {
|
|
width: clamp(20px, 5vw, 50px) !important;
|
|
height: clamp(20px, 5vw, 50px) !important;
|
|
}
|
|
|
|
.content-section-contact {
|
|
padding: 5px 15px;
|
|
}
|
|
|
|
.title-section-contact {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.main-title-contact {
|
|
font-size: clamp(2rem, 2vw, 1.5rem);
|
|
margin-bottom: 8px;
|
|
line-height: 0.8;
|
|
}
|
|
|
|
.subtitle-contact {
|
|
font-size: clamp(0.8rem, 1.8vw, 1rem);
|
|
}
|
|
|
|
.banner-carousel-container {
|
|
max-width: 800px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.overlay-title {
|
|
font-size: clamp(1.2rem, 1.8vw, 1.6rem);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.overlay-description {
|
|
font-size: clamp(0.8rem, 1.3vw, 1rem);
|
|
}
|
|
|
|
.contact-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 15px;
|
|
}
|
|
|
|
.contact-item-contact {
|
|
padding: 8px;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.contact-icon-contact {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.contact-label {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.contact-text-contact {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
</style> |