audi/app/pages/exclusive/exclusive-edition.vue

<template>
  <main>
    <div class="detail--container--full">
      <FullSizeBannerText1
        :imagePath="bannerImagePath"
        altText="Audi exclusive edition"
        type="cover"
      />

      <div class="text--tab--layout">
        <ul>
          <li>
            <NuxtLink to="/">Audi A6 Nardo Grey edition</NuxtLink>
          </li>
          <li>
            <NuxtLink to="/">Audi Q7 exclusive edtion</NuxtLink>
          </li>
          <li>
            <NuxtLink to="/">Audi Q8 exclusive edition</NuxtLink>
          </li>
        </ul>
      </div>

      <!-- 링크 리스트 컴포넌트 -->
      <LinkList class="mt--20" :links="reservationLinks" />

      <TitleVisual
        title="Q8 50 TDI quattro exclusive edition"
        description=""
        textAlign="left"
        type="middle"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

      <SwiperBanner
        :slides="bannerSlides"
        :autoplay="false"
        :loop="false"
        fit="contain"
        type="vertical"
      />

      <SwiperBanner
        :slides="bannerSlides2"
        :autoplay="false"
        :loop="false"
        fit="contain"
        type="vertical"
      />

      <SwiperBanner
        :slides="bannerSlides3"
        :autoplay="false"
        :loop="false"
        fit="contain"
        type="vertical"
      />

      <SwiperBanner
        :slides="bannerSlides4"
        :autoplay="false"
        :loop="false"
        fit="contain"
        type="vertical"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        image="/img/exclusive/q8_1513x1513.webp"
        imageAlt="Audi Q8 50 TDI quattro exclusive edition"
        title="Q8 50 TDI quattro exclusive edition"
        subtitle="완벽한 프리미엄 SUV. 소수만을 위한 특별함이 당신을 기다립니다."
        buttonText="예약금 결제"
        buttonUrl="https://www.audi.co.kr/ko/kr-new-car-search/"
        buttonTarget="_blank"
        layout="horizontal"
        imagePosition="left"
      />
      
      <!-- 이미지 오른쪽 배치 테스트 -->
      <ProductCard
        image="/img/exclusive/q8_1513x1513.webp"
        imageAlt="Audi Q8 50 TDI quattro exclusive edition"
        title="Q8 50 TDI quattro exclusive edition (Right)"
        subtitle="이미지가 오른쪽에 배치된 레이아웃 테스트입니다."
        buttonText="예약금 결제"
        buttonUrl="https://www.audi.co.kr/ko/kr-new-car-search/"
        buttonTarget="_blank"
        layout="horizontal"
        imagePosition="right"
      />
    </div>
  </main>
</template>

<script setup>
  // 컴포넌트 import
  import TitleVisual from "~/components/block/TitleVisual.vue";
  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
  import LinkList from "~/components/block/LinkList.vue";
  import SwiperBanner from "~/components/block/SwiperBanner.vue";
  import ProductCard from "~/components/block/ProductCard.vue";

  const bannerImagePath = ref("/img/exclusive/RSeGT_ae_2022_3855-S.jpg");

  // 링크 데이터 배열
  const reservationLinks = ref([
    {
      text: "Q8 50 TDI quattro exclusive edition 예약금 결제",
      url: "https://www.audi.co.kr/ko/kr-new-car-search/",
      target: "_blank",
      showIcon: true,
    },
  ]);

  const bannerSlides = ref([
    {
      image: "/img/exclusive/q8_front_1920x1080.jpg",
      alt: "아우디 Q8",
      title: "",
      subtitle: "아우디 Q8",
    },
    {
      image: "/img/exclusive/q8_side_1920x1080.jpg",
      alt: "아우디 Q8",
      title: "",
      subtitle: "",
    },
    {
      image: "/img/exclusive/q8_back_1920x1080.jpg",
      alt: "아우디 Q8",
      title: "",
      subtitle: "",
    },
    {
      image: "/img/exclusive/q8_wheel.jpg",
      alt: "아우디 Q8",
      title: "",
      subtitle: "",
    },
  ]);

  const bannerSlides2 = ref([
    {
      image: "/img/exclusive/q8_red.jpg",
      alt: "아우디 Q8",
      title: "",
      subtitle: "아우디 Q8",
    },
    {
      image: "/img/exclusive/q8_red_2.jpg",
      alt: "아우디 Q8",
      title: "",
      subtitle: "",
    },
    {
      image: "/img/exclusive/q8_red_3.jpg",
      alt: "아우디 Q8",
      title: "",
      subtitle: "",
    },
  ]);

  const bannerSlides3 = ref([
    {
      image: "/img/exclusive/q8_BR.jpg",
      alt: "아우디 Q8",
      title: "",
      subtitle: "아우디 Q8",
    },
    {
      image: "/img/exclusive/q8_BR.jpg",
      alt: "아우디 Q8",
      title: "",
      subtitle: "",
    },
    {
      image: "/img/exclusive/q8_BR_3.jpg",
      alt: "아우디 Q8",
      title: "",
      subtitle: "",
    },
  ]);

  const bannerSlides4 = ref([
    {
      image: "/img/exclusive/q8_red_1920x1080.jpg",
      alt: "아우디 Q8",
      title: "",
      subtitle: "아우디 Q8",
    },
    {
      image: "/img/exclusive/q8_BR_1920x1080.jpg",
      alt: "아우디 Q8",
      title: "",
      subtitle: "",
    },
  ]);
</script>