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% 레이아웃)
        type="vertical", 
        type="horizental"
      -->
      <SwiperBanner
        :slides="bannerSlides"
        title="Audi Exclusive Collection"
        subtitle="당신만을 위한 특별한 아우디"
        smalldesc="유럽 인증 기준"
        notice=""
        :autoplay="{ delay: 0 }"
        :loop="false"
      />

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="특별함을 창조하다"
        description="아우디 RS e-tron GT, 아우디 RS 6 Avant, 아우디 RS Q8의 예에서 여러 옵션을 결합하여 Audi exclusive order의 다양성과 개인 맞춤 구성 옵션을 경험해 보세요. 3D 버튼을 클릭하여 3D 보기를 활성화하면 인터랙티브 경험을 할 수 있습니다."
        textAlign="center"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="맞춤형 페인팅 시스템"
        description="Audi exclusive order의 맞춤형 페인트 마감은 매우 특별하게 구현됩니다. 색상의 혼합부터 다양한 페인트 레이어 적용까지 정밀한 작업을 통해 페인팅 시스템이 완성됩니다."
        textAlign="left"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

      <SwiperBanner
        :slides="bannerSlides2"
        notice=""
        :autoplay="{ delay: 0 }"
        :loop="false"
      />

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="당신만의 색상을 선택하세요"
        description=""
        textAlign="left"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />
    </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";
  import TitleVisual from "~/components/block/TitleVisual.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를 통해 오직 당신을 위한 아우디를 만나보세요.",
      smalldesc: "유럽인증",
    },
    {
      image: "/img/exclusive/05_rsegt_ae_2021_2376-S-L.jpg",
      alt: "원하는 컬러를 선택하다",
      title: "원하는 컬러를 선택하다",
      subtitle:
        "노을의 골드, 와인의 레드, 에메랄드 반지의 그린 등 아우디 차체 색상으로 원하는 색상을 선택할 수 있습니다.",
      smalldesc: "유럽인증",
    },
    {
      image: "/img/exclusive/04_r8_2021_3106_58054-S-L.jpg",
      alt: "보고, 느끼고, 매료되다",
      title: "보고, 느끼고, 매료되다",
      subtitle:
        "Audi exclusive order 인테리어 트림을 사용하면 다양한 옵션을 선택할 수 있습니다. 가장 상위 카테고리로 고급 가죽을 선택할 수 있습니다.",
      smalldesc: "유럽인증",
    },
  ]);

  const bannerSlides2 = ref([
    {
      image: "/img/exclusive/06_AQUA_151004_7823-S-L.jpg",
      alt: "개성이 담긴 색상",
      title: "개성이 담긴 색상",
      subtitle:
        "선택하는 색상은 결합제, 용제, 다양한 첨가제뿐만 아니라 유기 및 무기 안료의 혼합으로 이루어집니다. 유기 안료는 색상의 휘도와 선명도를 제공하고 무기 안료는 마감재의 내후성을 보장합니다. 메탈 소판(metal platelet)을 추가하면 메탈릭 페인트 마감의 매혹적인 이펙트가 나타납니다.",
      smalldesc: "",
    },
    {
      image: "/img/exclusive/07_AU140766_large-S-L.jpg",
      alt: "차체에 페인트를 적용하는 방법",
      title: "차체에 페인트를 적용하는 방법",
      subtitle:
        "아우디의 페인트 마감은 4겹으로 구성되지만 한 겹의 두께는 사람의 머리카락보다 굵지 않습니다. 먼저 부식을 방지하는 프라이머를 본체에 도포합니다. 이 단계에서 전체 차량이 딥 탱크를 통해 회전하여 안으로 들어간 모든 부분의 모든 면을 페인트로 코팅합니다. 그런 다음, 본체를 180°C에서 45분 동안 건조시킵니다.",
      smalldesc: "",
    },
    {
      image: "/img/exclusive/08_AU140767_large-S-L.jpg",
      alt: "이후 공정",
      title: "이후 공정",
      subtitle:
        "두 번째 단계는 필러 레이어라고 합니다. 필러 레이어는 표면의 요철을 매끄럽게 하고 주행 중 날아오는 돌이나 모래로 마감이 갈라지는 것을 방지하는 데 필요한 탄성을 제공합니다. 세 번째 레이어는 컬러 페인트 마감입니다. 빠르게 회전하는 분무기로 아우디 표면에 이 베이스 마감을 적용합니다. 네 번째 단계에서는 투명한 바니시 보호층을 추가한 후 140°C에서 30분 동안 경화시켜야 합니다.",
      smalldesc: "",
    },
  ]);
</script>