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"
      />

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

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="당신을 드러내는 색상"
        description="차체 색상으로 첫인상을 남길 수 있는 기회는 단 한 번뿐입니다. Audi exclusive order의 다양한 색상 중에서 당신을 드러내는 외관 페인트 마감을 선택하세요. 아우디에서 테스트하고 승인한 맞춤형 페인트 마감은 아래와 같습니다. 원하는 차량에 원하는 색상을 적용할 수 있는지 확인하려면 아우디 파트너에게 문의해 주세요."
        textAlign="left"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

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

      <SwiperBanner
        :slides="bannerSlides5"
        :autoplay="false"
        :loop="false"
        class="mt--50"
        type="vertical"
      />
    </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: "",
    },
  ]);

  const bannerSlides3 = ref([
    {
      image: "/img/exclusive/09_rs7_ae_2020_2428-L.jpg",
      alt: "",
      title: "",
      subtitle:
        "Ascari blue metallic 색상의 아우디 RS 7 Sportback. 연비(km/l) : 7.4 (에너지소비효율등급 5등급 / 복합), 6.2 (도심), 9.5 (고속도로), CO₂ 배출량(g/km): 239",
      smalldesc: "",
      morelink: "/",
    },
    {
      image: "/img/exclusive/11_a8_ae_2021_3214_58435-L.jpg",
      alt: "",
      title: "",
      subtitle: "Night Blue Pearl Effect의 아우디 A8.",
      smalldesc: "",
      morelink: "/",
    },
    {
      image: "/img/exclusive/12_rs6_ae_2020_2426_55361-L.jpg",
      alt: "",
      title: "",
      subtitle:
        "Panther black crystall effect의 아우디 RS 6 Avant. 연비(km/l) : 7.0 (에너지소비효율등급 5등급/복합), 6.1 (도심), 8.6 (고속도로), CO₂ 배출량(g/km) : 250",
      smalldesc: "",
      morelink: "/",
    },
  ]);

  const bannerSlides4 = ref([
    {
      image: "/img/exclusive/metallic.jpg",
      alt: "",
      title: "Metallic 페인트 마감:",
      subtitle: "은은하게 반짝이는 우아함.",
      smalldesc: "",
    },
    {
      image: "/img/exclusive/pearleffect.jpg",
      alt: "",
      title: "Pearl effect 페인트 마감:",
      subtitle: "빛나는 광채.",
      smalldesc: "",
    },
    {
      image: "/img/exclusive/uni.jpg",
      alt: "",
      title: "단일 페인트 마감: ",
      subtitle: "심플한 아름다움.",
      smalldesc: "",
    },
    {
      image: "/img/exclusive/crystal.jpg",
      alt: "",
      title: "Crystall effect 페인트 마감: ",
      subtitle: "숨이 멎을 듯 강렬한 럭셔리함. ",
      smalldesc: "",
    },
  ]);

  const bannerSlides5 = ref([
    {
      image: "/img/exclusive/metallic.jpg",
      alt: "",
      title: "Metallic 페인트 마감:",
      subtitle: "은은하게 반짝이는 우아함.",
      smalldesc: "",
    },
    {
      image: "/img/exclusive/pearleffect.jpg",
      alt: "",
      title: "Pearl effect 페인트 마감:",
      subtitle: "빛나는 광채.",
      smalldesc: "",
    },
    {
      image: "/img/exclusive/uni.jpg",
      alt: "",
      title: "단일 페인트 마감: ",
      subtitle: "심플한 아름다움.",
      smalldesc: "",
    },
    {
      image: "/img/exclusive/crystal.jpg",
      alt: "",
      title: "Crystall effect 페인트 마감: ",
      subtitle: "숨이 멎을 듯 강렬한 럭셔리함. ",
      smalldesc: "",
    },
  ]);
</script>