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

<template>
  <main>
    <div class="detail--container--full">
      <!-- 풀사이즈 배너 텍스트 1줄용 -->
      <FullSizeBannerText1 :imagePath="bannerImagePath" altText="Audi exclusive order" />

      <!-- 풀사이즈 패럴랙스 배너 (커스텀 데이터 예시) -->
      <ParallaxBanner
        :images="customParallaxImages"
        imageAlt="Custom Audi Image"
        title="Audi exclusive order 주문하기"
        description="당신만의 특별한 아우디 주문은 아우디 딜러샵을 통해 신청 가능하며, 자세한 딜러 네트워크 정보는 아래 버튼을 통해 확인하실 수 있습니다."
        linkUrl="/"
        linkText="아우디 딜러 네트워크 알아보기"
      />

      <!-- Swiper 배너 (30% + 70% 레이아웃) -->
      <SwiperBanner
        :slides="bannerSlides"
        title="Audi Exclusive Collection"
        subtitle="당신만을 위한 특별한 아우디"
        notice="* 모든 이미지는 참고용이며 실제와 다를 수 있습니다."
        :autoplay="{ delay: 0 }"
        :loop="false"
      />

      <!--
        일반 텍스트 밑에서 올라오는 디자인
        대타이틀, 소타이틀 형 정렬은 옵션으로 정의
      -->
    </div>
  </main>
</template>

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

  const bannerImagePath = ref("/img/exclusive/1920X1080_exclusive_edited_v2.jpg");

  // 커스텀 이미지 세트 예시 (필요시 사용)
  const customParallaxImages = {
    xl: "/img/component/parallax/02_r8_2021_3104_58056-XL.jpg?auto=webp&width=1920",
    xl2x: "/img/component/parallax/02_r8_2021_3104_58056-XL.jpg?auto=webp&width=3840",
    m: "/img/component/parallax/02_r8_2021_3104_58056-M.jpg?auto=webp&width=1439",
    m2x: "/img/component/parallax/02_r8_2021_3104_58056-M.jpg?auto=webp&width=2878",
    s: "/img/component/parallax/02_r8_2021_3104_58056-S.jpg?auto=webp&width=787",
    s2x: "/img/component/parallax/02_r8_2021_3104_58056-S.jpg?auto=webp&width=1574",
    xs: "/img/component/parallax/02_r8_2021_3104_58056-XS.jpg?auto=webp&width=374",
    xs2x: "/img/component/parallax/02_r8_2021_3104_58056-XS.jpg?auto=webp&width=748",
  };

  // Swiper 배너 슬라이드 데이터 (30% + 70% 레이아웃용)
  const bannerSlides = ref([
    {
      image: "/img/exclusive/03_r8_2021_3105_57994-S-L.jpg",
      alt: "당신만을 위해 반영된 특별함",
      title: "당신만을 위해 반영된 특별함",
      subtitle:
        "색상부터 스티칭 요소까지, Audi exclusive order를 통해 오직 당신을 위한 아우디를 만나보세요.",
    },
    {
      image: "/img/exclusive/05_rsegt_ae_2021_2376-S-L.jpg",
      alt: "원하는 컬러를 선택하다",
      title: "원하는 컬러를 선택하다",
      subtitle:
        "노을의 골드, 와인의 레드, 에메랄드 반지의 그린 등 아우디 차체 색상으로 원하는 색상을 선택할 수 있습니다.",
    },
    {
      image: "/img/exclusive/04_r8_2021_3106_58054-S-L.jpg",
      alt: "보고, 느끼고, 매료되다",
      title: "보고, 느끼고, 매료되다",
      subtitle:
        "Audi exclusive order 인테리어 트림을 사용하면 다양한 옵션을 선택할 수 있습니다. 가장 상위 카테고리로 고급 가죽을 선택할 수 있습니다.",
    },
  ]);
</script>