audi/app/pages/models/detail/s-etron-gt.vue

<template>
  <main>
    <div class="detail--container--full">
      <!-- 풀사이즈 배너 텍스트 1줄용 -->
      <fullSizeBannerVideo
        :height="856"
        :videoPath="bannerVideoPath"
        class="video"
        textLocation="bottomleft"
        type="cover"
        altText="The new Audi S e-tron GT"
        btnText="상담신청"
        btnLink="/"
        btnTarget="_blank"
        btnText2="내 차량 만들기"
        btnLink2="/"
        btnTarget2="_blank"
        cautionText="전력 소비량: 3.7 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급"
      />

      <TrimInfoColumn :items="trimInfoItems" />

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="Adrenaline, Fully<br/> Charged"
        description=""
        textAlign="center"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

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

      <!-- 풀사이즈 패럴랙스 배너 (커스텀 데이터 예시) -->
      <ParallaxBanner
        :images="customParallaxImages"
        imageAlt="한눈에 확인하는 성능"
        title="한눈에 확인하는 성능"
        description="향상된 주행 경험을 느끼고 들어보세요. 새로운 아우디 RS 6 아반트 퍼포먼스에는 현재까지 가장 강력한 RS 6 엔진이 탑재되었습니다. 퍼포먼스는 애티튜드입니다."
        cautionText="공인 표준 연비 (km/l) : 복합: 7.1 / 도심: 6.1 / 고속: 9.0 (5등급), 배출량: 243(g/km)"
      />

      <!-- 
        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="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--80"
        type="vertical"
      />

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="인테리어에도 특별함을 더하다"
        description="다양한 가죽 트림 옵션, 컬러 장식 스티칭 등의 장식으로 모든 인테리어를 마감하고 특별한 개성을 드러낼 수 있습니다."
        textAlign="left"
        theme="dark"
        :animation="true"
        :animationDelay="300"
        class="mt--100"
      />

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

      <SwiperBanner
        :slides="bannerSlides7"
        :autoplay="false"
        :loop="false"
        class="mt--80"
        type="vertical"
      />

      <SwiperBanner
        :slides="bannerSlides8"
        :autoplay="false"
        :loop="false"
        class="mt--80"
        type="vertical"
      />

      <CautionText />
    </div>
  </main>
</template>

<script setup>
  // 컴포넌트 import
  import fullSizeBannerVideo from "~/components/block/fullSizeBannerVideo.vue";
  import ParallaxBanner from "~/components/block/parallaxBanner.vue";
  import SwiperBanner from "~/components/block/SwiperBanner.vue";
  import TitleVisual from "~/components/block/TitleVisual.vue";
  import CautionText from "~/components/block/cautionText.vue";
  import LinkList from "~/components/block/LinkList.vue";
  import TrimInfoColumn from "~/components/block/TrimInfoColumn.vue";

  // Runtime Config 가져오기
  const config = useRuntimeConfig();

  const bannerVideoPath = ref(
    "https://media.audi.com/is/content/audi/nemo/models/audi-e-tron-gt/s-e-tron-gt/my-2025/stage/Running_Footage_Se-tronGT-L-2.mp4#t=0.001"
  );

  // Trim 정보 데이터
  const trimInfoItems = ref([
    {
      title: "최대 주행 가능 거리 (복합 기준)",
      value: "420",
      unit: "km",
      subText: "10분내",
    },
    {
      title: "재충전 주행 가능 거리 (유럽 WLTP 기준)",
      value: "280",
      unit: "km",
      subText: "10분내",
    },
    {
      title: "충전 용량 10%에서 80%까지 소요 시간 (유럽 WLTP 기준)",
      value: "18",
      unit: "분",
      subText: "최고 320kW의 최대 DC 전력 충전 시",
    },
  ]);

  // 링크 데이터 배열
  const reservationLinks = ref([
    {
      text: "내 차량 만들기",
      url:
        "https://www.audi.co.kr/ko/models/e-tron-gt/s-e-tron-gt-master-2025/konfigurator/?ulid=1762749286140&pr=F8PR9D0_2025%7CL5L5%7CFO#configurator",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "차량 상담",
      url: config.public.testdrive,
      target: "_blank",
      showIcon: true,
    },
    {
      text: "전시장/AS센터",
      url: "/company/serviceCenter",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "카탈로그 다운로드",
      url: "https://indd.adobe.com/view/8aee0a52-9278-4af3-9dea-e7e0fc354ff6",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "디지털 카탈로그",
      url:
        "https://www.audikoreaevent.co.kr/aca/ecatalog/download/Audi_SETGT25_&_RSETGTPFM25_catalog.pdf",
      target: "_blank",
      showIcon: true,
    },
  ]);
  // 커스텀 이미지 세트 예시 (필요시 사용)
  const customParallaxImages = {
    xl: "/img/models/e-tron-gt/RS_6_2022_4355-XL.jpg?auto=webp&width=1920",
    xl2x: "/img/models/e-tron-gt/RS_6_2022_4355-XL.jpg?auto=webp&width=3840",
    m: "/img/models/e-tron-gt/RS_6_2022_4355-M.jpg?auto=webp&width=1439",
    m2x: "/img/models/e-tron-gt/RS_6_2022_4355-M.jpg?auto=webp&width=2878",
    s: "/img/models/e-tron-gt/RS_6_2022_4355-S.jpg?auto=webp&width=787",
    s2x: "/img/models/e-tron-gt/RS_6_2022_4355-S.jpg?auto=webp&width=1574",
    xs: "/img/models/e-tron-gt/RS_6_2022_4355-XS.jpg?auto=webp&width=374",
    xs2x: "/img/models/e-tron-gt/RS_6_2022_4355-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-shiny-L.jpg",
      alt: "",
      title: "Metallic 페인트 마감:",
      subtitle: "은은하게 반짝이는 우아함.",
      smalldesc: "",
    },
    {
      image: "/img/exclusive/metallic-L.jpg",
      alt: "",
      title: "Metallic 페인트 마감:",
      subtitle: "은은하게 반짝이는 우아함.",
      smalldesc: "",
    },
    {
      image: "/img/exclusive/pearl-effect-L.jpg",
      alt: "",
      title: "Pearl effect 페인트 마감:",
      subtitle: "빛나는 광채.",
      smalldesc: "",
    },
    {
      image: "/img/exclusive/uni-color-L.jpg",
      alt: "",
      title: "단일 페인트 마감: ",
      subtitle: "심플한 아름다움. ",
      smalldesc: "",
    },
    {
      image: "/img/exclusive/crystal-effect-L.jpg",
      alt: "",
      title: "Crystall effect 페인트 마감: ",
      subtitle: "숨이 멎을 듯 강렬한 럭셔리함. ",
      smalldesc: "",
    },
  ]);

  const bannerSlides6 = ref([
    {
      image: "/img/exclusive/AQUA_171047_1_51L_rgb-L.jpg",
      alt: "",
      title: "가죽의 제작 과정",
      subtitle:
        "30가지 이상의 다양한 테스트를 실시한 후 적합한 가죽을 선택합니다. 이러한 테스트는 내마모성, 내광성, 수축 거동, 굽힘 강도 그리고 인장력, 방출 및 가연성에 대한 저항성과 같은 요소를 확인하도록 설계되었습니다.",
      smalldesc: "",
    },
    {
      image: "/img/exclusive/19_AL090111_large-S-L.jpg",
      alt: "",
      title: "신중하게 처리되는 공정",
      subtitle:
        "가죽의 진성을 유지하기 위해 식물성 염료를 포함한 물질로 부드럽게 정제합니다. 그 결과 내구성이 강하고 오래 지속되며 매우 감성적인 재료가 만들어집니다.",
      smalldesc: "",
    },
    {
      image: "/img/exclusive/needle.jpg",
      alt: "",
      title: "타임리스 스티칭",
      subtitle: "맞춤형 스티칭은 Audi 전용 차량에 완벽함 마무리 터치를 더합니다.",
      smalldesc: "",
    },
  ]);

  const bannerSlides7 = ref([
    {
      image: "/img/exclusive/27_rs6_ae_2020_2427_1_55902-L.jpg",
      alt: "",
      title: "",
      subtitle:
        "아우디 RS 6 Avant의 인테리어에는 Diamond silver black 색상의 발코나 Audi exclusive 가죽 커버와 이에 대비되는 Diamond silver 스티칭을 사용했습니다.",
      smalldesc: "",
      morelink:
        "https://www.audi.co.kr/ko/models/a6/rs-6-avant-performance-2024/configurator/",
      morelinktitle: "아우디 RS 6 내 차량 만들기",
      morelinktarget: "_blank",
    },
  ]);

  const bannerSlides8 = ref([
    {
      image: "/img/exclusive/28_Audi_R8_Coupe_Blau_07-2019_4-L.jpg",
      alt: "",
      title: "무엇이든 가능하게:",
      subtitle:
        "탁월하게 제작된 섬세한 재료와 다양한 조합을 통해 브랜드의 감성을 다면적으로 반영합니다.",
      smalldesc: "",
    },
  ]);
</script>