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="/exclusive/exclusive-edition"
              >Audi A6 Nardo Grey edition</NuxtLink
            >
          </li>
          <li>
            <NuxtLink to="/exclusive/q7">Audi Q7 exclusive edtion</NuxtLink>
          </li>
          <li>
            <NuxtLink to="/exclusive/q8">Audi Q8 exclusive edition</NuxtLink>
          </li>
        </ul>
      </div>

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

      <TitleVisual
        title="A6 50 TDI quattro Nardo Grey 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"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        data-type="square"
        image="/img/exclusive/a6_730x730.webp"
        title="A6 50 TDI quattro Nardo Grey edition"
        subtitle="새로운 진보의 경험. 소수만을 위한 특별함이 당신을 기다립니다."
        buttonText="예약금 결제"
        buttonUrl="https://www.audi.co.kr/ko/kr-new-car-search/"
        buttonTarget="_blank"
        layout="horizontal"
        imagePosition="right"
      />

      <ProductCard
        data-type="square"
        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
        data-type="square"
        image="/img/exclusive/exclusiveorder_Q7.webp"
        title="Q7 50 TDI quattro exclusive edition"
        subtitle="강력한 퍼포먼스가 선사하는 여유로움. 소수만을 위한 특별함이 당신을 기다립니다."
        buttonText="자세히 보기"
        buttonUrl="/exclusive/q7/"
        buttonTarget="_self"
        layout="horizontal"
        imagePosition="right"
      />

      <ProductCard
        data-type="square"
        image="/img/exclusive/audi-exclusive-studio_1.webp"
        title="Audi exclusive order"
        subtitle="Audi exclusive order를 통해, 당신만을 위한 아우디를 만나보세요."
        buttonText="자세히 보기"
        buttonUrl="/exclusive/exclusive-order"
        buttonTarget="_self"
        layout="horizontal"
        imagePosition="left"
      />

      <CautionText />
    </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";
  import CautionText from "~/components/block/cautionText2.vue";

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

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

  const bannerSlides = ref([
    {
      image: "/img/exclusive/A6_45_Front.jpg",
      alt: "아우디 A6",
      title: "",
      subtitle: "아우디 A6",
    },
    {
      image: "/img/exclusive/A6_Front.jpg",
      alt: "아우디 A6",
      title: "",
      subtitle: "아우디 A6",
    },
    {
      image: "/img/exclusive/A6_Side.jpg",
      alt: "아우디 A6",
      title: "",
      subtitle: "아우디 A6",
    },
    {
      image: "/img/exclusive/A6_45_Back.jpg",
      alt: "아우디 A6",
      title: "",
      subtitle: "아우디 A6",
    },
    {
      image: "/img/exclusive/A6_Back.jpg",
      alt: "아우디 A6",
      title: "",
      subtitle: "아우디 A6",
    },
  ]);

  const bannerSlides2 = ref([
    {
      image: "/img/exclusive/black2.jpg",
      alt: "아우디 A6",
      title: "",
      subtitle: "아우디 A6",
    },
    {
      image: "/img/exclusive/black.jpg",
      alt: "아우디 A6",
      title: "",
      subtitle: "아우디 A6",
    },
    {
      image: "/img/exclusive/sardbrown2.jpg",
      alt: "아우디 A6",
      title: "",
      subtitle: "아우디 A6",
    },
    {
      image: "/img/exclusive/sardbrown.jpg",
      alt: "아우디 A6",
      title: "",
      subtitle: "아우디 A6",
    },
  ]);

  const bannerSlides3 = ref([
    {
      image: "/img/exclusive/beige2.jpg",
      alt: "아우디 A6",
      title: "",
      subtitle: "아우디 A6",
    },
    {
      image: "/img/exclusive/beige.jpg",
      alt: "아우디 A6",
      title: "",
      subtitle: "아우디 A6",
    },
  ]);
</script>