69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
<template>
|
|
<section class="relative py-8 px-4 bg-transparent">
|
|
<!-- 🔹 CTA Overlay -->
|
|
<div
|
|
class="absolute z-20 bottom-20 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 pointer-events-auto"
|
|
>
|
|
<!-- Red button -->
|
|
<NuxtLink
|
|
to="/shop"
|
|
class="rounded-full bg-red-500 text-white px-8 py-2.5 text-sm sm:text-base font-semibold shadow-lg hover:bg-red-600 transition"
|
|
>
|
|
지금 예약하기
|
|
</NuxtLink>
|
|
|
|
<!-- NPay -->
|
|
<NuxtLink to="/shop">
|
|
<img
|
|
:src="SOCIAL_IMAGES.npay"
|
|
alt="NPay"
|
|
class="h-6 sm:h-7 object-contain drop-shadow rounded-full"
|
|
/>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<!-- 🔹 Carousel Section -->
|
|
<Carousel v-bind="config" class="mx-auto max-w-screen-xl relative">
|
|
<Slide
|
|
v-for="(imgSrc, idx) in images"
|
|
:key="idx"
|
|
class="relative h-80 sm:h-96 md:h-[420px] lg:h-[800px] overflow-hidden rounded-lg shadow-lg"
|
|
>
|
|
<img
|
|
:src="imgSrc"
|
|
alt="Slide image"
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</Slide>
|
|
|
|
<template #addons>
|
|
<Navigation />
|
|
<Pagination />
|
|
</template>
|
|
</Carousel>
|
|
</section>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { Carousel, Slide, Navigation, Pagination } from 'vue3-carousel';
|
|
import 'vue3-carousel/dist/carousel.css';
|
|
|
|
import { MAIN_IMAGES, SOCIAL_IMAGES } from '@/data/assets';
|
|
|
|
const images = computed<string[]>(() => Object.values(MAIN_IMAGES));
|
|
|
|
const config = {
|
|
height: 500,
|
|
itemsToShow: 1,
|
|
wrapAround: true,
|
|
autoplay: 4000,
|
|
pauseAutoplayOnHover: true,
|
|
breakpoints: {
|
|
1280: { height: 500 },
|
|
1024: { height: 450 },
|
|
768: { height: 400 },
|
|
0: { height: 300 },
|
|
},
|
|
};
|
|
</script>
|