audi/app/pages/models/detail/rs-q8-suv-performance-2025.vue

<template>
  <main>
    <div class="detail--container--full">
      <!-- 풀사이즈 배너 텍스트 1줄용 -->
      <fullSizeBannerText
        :height="856"
        :imagePath="bannerTextPath"
        class="video"
        textLocation="bottomleft2"
        type="cover"
        altText="The new Audi RS Q8 performance"
        btnText="상담 신청"
        :btnLink="`https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=${config.public.testDriveCode}&selectCar=RS_Q8&testType=2`"
        btnTarget="_blank"
        btnText2="내 차량 만들기"
        btnLink2="https://www.audi.co.kr/ko/models/q8/rs-q8-suv-performance-2025/configurator/?ulid=1762763362242&pr=4MTRR20_2025%7C9399%7CAR#configurator"
        btnTarget2="_blank"
        cautionText=""
      />

      
      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
      title="시선은 사로잡고, 심장을 뒤흔든다"
      description=""
      textAlign="center"
      theme="dark"
      :animation="true"
      :animationDelay="300"
      />
      
      <!-- 링크 리스트 컴포넌트 -->
      <LinkList class="mt--20" :links="reservationLinks" />
      
      <TrimInfoColumn class="mt--100" :items="trimInfoItems" />

      <TitleVisual
        title="우아함을 충족시켜주는 성능"
        description="Audi RS Q8 performance는 강력한 V8 4.0 트윈터보 엔진과 SUV의 여유로운 공간, 럭셔리한 편안함과 독보적인 디자인이 결합된 모델입니다."
        textAlign="left"
        theme="dark"
        type="middle2"
        :animation="true"
        :animationDelay="300"
      />

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

      <!-- 
      타이틀 비주얼 컴포넌트

      type : middle 타이틀 중간사이즈면 좌우 여백없음
             middle2 : 타이틀 중간사이즈면서 좌우 여백있음
      -->
      <TitleVisual
        title="가공할 위력, 놀라운 역동성"
        description="정지 상태에서 시속 100 km까지 단 3.6초만에 도달합니다.<br>출력 640 PS, 최대 토크 86.68 kg.m의 강력한 성능을 자랑하는 Audi RS Q8 performance는 기본으로 장착된 RS 세라믹 브레이크와 정교하게 튜닝된 드라이브 및 서스펜션 부품을 통해 놀라운 역동성을 선사합니다."
        textAlign="left"
        theme="dark"
        type="middle2"
        :animation="true"
        :animationDelay="300"
      />

      <SwiperBanner
        :slides="bannerSlides2"
        notice=""
        :autoplay="false"
        :loop="false"
      />

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="독보적인 캐릭터"
        description="Audi RS Q8 performance의 독보적인 캐릭터는 블랙 패키지 플러스 외장과 매트 카본 스타일링 패키지로 더욱 빛납니다."
        textAlign="left"
        type="middle2"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

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

      <SwiperBanner
        :slides="bannerSlides4"
        title=""
        subtitle=""
        smalldesc=""
        notice=""
        type="vertical"
        :autoplay="{ delay: 0 }"
        :loop="false"
      />

      <SwiperBanner
        :slides="bannerSlides5"
        :autoplay="false"
        :loop="false"
        class="mt--80"
      />

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="역동성과 높은 활용도"
        description="Audi Q8 SUV는 주행 시 자유로움과 자신감을 선사하며 스포티한 주행, 오프로드 성능, 최대 3.5톤의 트레일러 하중으로 높은 활용도를 자랑합니다. "
        textAlign="left"
        type="middle2"
        theme="dark"
        :animation="true"
        :animationDelay="300"
        class="mt--100"
      />

      <SwiperBanner
        :slides="bannerSlides6"
        :autoplay="false"
        :loop="false"
        class="mt--80"
      />

      <!-- <ProductCard
        data-type="square"
        image="/img/models/e-tron-gt/SeGT_2024_6505-S-L.webp"
        title="아우디 S e-tron GT가 마음에 드시나요?"
        subtitle="지금 바로 고품질의 기본 구성부터 시작해보세요."
        buttonText="차량 구성하기"
        buttonUrl="https://www.audi.co.kr/ko/models/e-tron-gt/s-e-tron-gt-master-2025/konfigurator/?ulid=1762753594174&pr=F8PR9D0_2025%7CL5L5%7CFO#configurator"
        buttonTarget="_blank"
        layout="horizontal"
        imagePosition="left"
      /> -->

      <!-- <CareProgramItem data-type-row="3" :items="careProgramItems" /> -->

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        data-type="square"
        image="/img/etronms/3_730X730.webp"
        title="Audi
      Warranty"
        smallTitle="아우디 보증 프로그램"
        subtitle="더 오래,
      더 안전한 드라이빙을 위한 아우디 5년 보증 프로그램으로 아우디와 함께 어디든 안심하고
      떠나세요.<br /><br />
      › 대상차량 : 아우디코리아에서 공식 딜러사를 통해 판매하는 모든 21년식 모델부터
      적용<br /><br />
      › 보증 기간 : 5년 보증 또는 최종 주행거리 150,000km 까지 (선도래조건)<br /><br />
      › 대상 부품 : 제조사 보증과 동일<br /><br />
      › 차량당 총 보상한도(누적) : 신차 권장소비자가격(VAT포함)<br /><br />
      * 자세한 내용은 차량과 함께 제공되는 아우디 보증서를 확인하세요."
        layout="horizontal"
        imagePosition="left"
      />

      <ProductCard
        data-type="square"
        image="/img/models/e-tron-gt/2_730X730.webp"
        title="Car Service Plus"
        smallTitle="카 서비스 플러스"
        subtitle="카 서비스 플러스 프로그램은 아우디 공식 서비스센터에서 제공하는 차량 유지관리 서비스 입니다.<br/><br/>
아우디 공식 서비스센터를 통해 제공되는 전문적이고 체계적인 유지관리는 추가 비용 부담없이 고객님 차량의 가치를 더욱 높여줄 것입니다."
        buttonText="카 서비스 플러스 확인하기"
        buttonUrl="/service/program/carserviceplus"
        buttonTarget="_self"
        layout="horizontal"
        imagePosition="right"
      />

      <ProductCard
        data-type="square"
        image="/img/models/q8/q8/suv.jpg"
        title="아우디 SUV"
        subtitle="아우디의 브랜드 철학은 'Q' SUV 모델이 추구하는 가치와 맞닿아 있습니다. 액티브한 라이프스타일을 지향하고 도심과 오프로드의 드라이빙 성능을 타협하지 않는 엔지니어링을 추구합니다. 도전적이고 혁신적인, 그러나 자유롭고 여유를 아는 열정가인 당신을 위해. 모든 길에 Q가 있다. 아우디 SUV, Q Familiy."
        buttonText="아우디 SUV 확인하기"
        buttonUrl="/models/suv"
        buttonTarget="_self"
        layout="horizontal"
        imagePosition="left"
      />

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

<script setup>
  // 컴포넌트 import
  import fullSizeBannerText 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";
  import ProductCard from "~/components/block/ProductCard.vue";
  import CautionText from "~/components/block/cautionText4.vue";
  import LinkList from "~/components/block/LinkList.vue";
  import TrimInfoColumn from "~/components/block/TrimInfoColumn.vue";
  import CareProgramItem from "~/components/block/CareProgramItem.vue";

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

  const bannerTextPath = ref("/img/models/q8/rs-q8/main1.jpg");

  // Trim 정보 데이터
  const trimInfoItems = ref([
    {
      title: "최대 출력",
      value: "640",
      unit: "ps",
      subText: "",
    },
    {
      title: "가속력(0~100 km/h)",
      value: "3.6",
      unit: "초",
      subText: "",
    },
    {
      title: "최고 속도",
      value: "305",
      unit: "km/h",
      subText: "(안전 제한속도)",
    },
  ]);

  // 링크 데이터 배열
  const reservationLinks = ref([
    {
      text: "내 차량 만들기",
      url:
        "https://www.audi.co.kr/ko/models/q8/rs-q8-suv-performance-2025/configurator/?ulid=1762763446882&pr=4MTRR20_2025%7C9399%7CAR#configurator",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "월 납입금 계산",
      url: "https://www.audikoreaevent.co.kr/lms/calculator.do?cidx=71",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "차량 상담",
      url: "https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=" + config.public.testDriveCode + "&selectCar=RS_Q8&testType=2",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "전시장/AS센터",
      url: "/company/serviceCenter",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "카탈로그 다운로드",
      url:
        "https://www.audikoreaevent.co.kr/aca/ecatalog/download/Audi_RS_Q8_catalogue.pdf",
      target: "_blank",
      showIcon: true,
    },
    {
      text: "디지털 카탈로그",
      url: "http://www.audi-catalogue.co.kr/RSQ8/",
      target: "_blank",
      showIcon: true,
    },
  ]);

  // Swiper 배너 슬라이드 데이터 (30% + 70% 레이아웃용)
  const bannerSlides = ref([
    {
      video: "/img/models/q8/rs-q8/main2.mp4",
      alt: "",
      title: "",
      subtitle: "",
      smalldesc: "",
    },
  ]);

  const bannerSlides2 = ref([
    {
      image: "/img/models/q8/rs-q8/slide1-1.jpg",
      alt: "확실한 역동성",
      title: "확실한 역동성",
      subtitle:
        "가속 시 RS 스포츠 배기 시스템과 인상적인 V8 엔진사운드가 스포츠 드라이빙의 즐거움을 더해줍니다. 최고 속도는 305 km/h에 달하며 RS 전용 소프트웨어 덕분에 스포츠 디퍼렌셜이 적용된 콰트로 사륜구동 시스템이 더욱 정교한 드라이빙을 선사합니다.",
      cautiondesc:
        "",
    },
    {
      image: "/img/models/q8/rs-q8/slide1-2.jpg",
      alt: "성능을 충족시켜주는 제어",
      title: "성능을 충족시켜주는 제어",
      subtitle:
        "기본 장착된 RS 세라믹 브레이크 시스템이 역동적인 주행에서도 과열 없이 차체를 최대한 제어할 수 있게 해줍니다. 또한 레드 컬러로 도장된 대형 브레이크 캘리퍼가 시선을 사로잡습니다.",
      cautiondesc:
        "",
    },
  ]);

  const bannerSlides3 = ref([
    {
      video:
        "/img/models/q8/q8/slide3-1.mp4",
      alt: "조명 선택",
      title: "조명 선택",
      subtitle:
        "진정 특별한 카리스마를 발산하고자 한다면, MMI에서 HD 매트릭스 LED 헤드라이트와 네 가지 디지털 OLED 테일라이트 시그니처를 선택할 수 있습니다. (Premium 모델 적용)",
      smalldesc: "",
      cautiondesc: "",
    },
    {
      video:
        "/img/models/q8/q8/slide3-1.mp4",
      alt: "시야 확보를 위한 조명",
      title: "시야 확보를 위한 조명",
      subtitle:
        "Audi 레이저 라이트가 적용된 HD 매트릭스 LED 헤드라이트는 거의 두 배에 달하는 조명 범위로 운전자의 마음을 사로잡습니다. 또한 운전자가 선택한 라이트 시그니처에 맞춰 귀가/외출 기능의 다이내믹한 조명 시퀀스를 표시해줍니다. (Premium 모델 적용) ",
      smalldesc: "",
      cautiondesc: "",
    },
  ]);

  const bannerSlides4 = ref([
    {
      video: "/img/models/q8/q8/main3.mp4",
      alt: "",
      title: "",
      subtitle:
        "",
      smalldesc: "",
    },
  ]);

  const bannerSlides5 = ref([
    {
      image: "/img/models/q8/q8/slide4-1.jpg",
      alt: "손끝에 느껴지는 프리미엄 인테리어의 퀄러티",
      title: "손끝에 느껴지는 프리미엄 인테리어의 퀄러티",
      subtitle:
        "Audi Q8 SUV의 매트 브러쉬드 알루미늄 인레이가 전체적으로 고급스럽고 조화로운 느낌을 자아냅니다.",
      smalldesc: "",
    },
    {
      image: "/img/models/q8/q8/slide4-2.jpg",
      alt: "모든 좌석을 최고의 좌석으로",
      title: "모든 좌석을 최고의 좌석으로",
      subtitle:
        "S 엠보싱 처리된 마름모 패턴과 스티칭이 들어간 발코나 가죽 스포츠 시트 플러스가 탁월한 착좌감을 제공합니다. 사이드 볼스터와 허리 요추 받침대는 공기압으로 조절하여 체형에 맞게 조정할 수 있으며 앞 좌석 마사지 시트도 여행의 피로를 덜어줍니다.",
      smalldesc: "",
    },
    {
      image: "/img/models/q8/q8/slide4-3.jpg",
      alt: "놀라운 3D 사운드 경험",
      title: "놀라운 3D 사운드 경험",
      subtitle:
        "놀라운 입체 사운드를 경험해보십시오. 16채널, 19스피커, 730와트 Bang & Olufsen 3D 프리미엄 사운드 시스템의 입체음향이 실내 공간을 실제보다 더 넓게 느껴지도록 합니다.",
      smalldesc: "참고: 이미지는 B&O 3D Advanced Sound이며 3D Premium Sound와 다를 수 있습니다.",
    },
  ]);

  const bannerSlides6 = ref([
    {
      image: "/img/models/q8/q8/slide5-1.jpg",
      alt: "파워풀한 역동성",
      title: "파워풀한 역동성",
      subtitle:
        "Audi Q8 SUV는 경쾌한 구동력을 선사하는 파워풀한 TFSI 및 TDI엔진을 제공합니다. 기본 장착된 어댑티브 에어 서스펜션을 통해 탁월한 주행 역동성과 향상된 승차감을 만끽할 수 있습니다.",
      smalldesc: "",
    },
    {
      image: "/img/models/q8/q8/slide5-2.jpg",
      alt: "한 차원 높은 드라이빙의 즐거움",
      title: "한 차원 높은 드라이빙의 즐거움",
      subtitle:
        "Audi Q8 SUV에는 정밀한 핸들링과 최상의 접지력을 위해 콰트로 사륜구동 시스템이 기본 장착되어 있습니다. 또한 최대 254mm에 이르는 지상고 덕택에 다채로운 주행 경험을 즐길 수 있습니다.",
      smalldesc: "",
    }
  ]);

  // Parallax Banner 이미지 데이터
  const customParallaxImages = ref({
    xl: '/img/models/q8/q8/main2.jpg',
    xl2x: '/img/models/q8/q8/main2.jpg',
    m: '/img/models/q8/q8/main2.jpg',
    m2x: '/img/models/q8/q8/main2.jpg',
    s: '/img/models/q8/q8/main2.jpg',
    s2x: '/img/models/q8/q8/main2.jpg',
    xs: '/img/models/q8/q8/main2.jpg',
    xs2x: '/img/models/q8/q8/main2.jpg'
  });

  const careProgramItems = ref([
    {
      imagePath: "/img/models/e-tron-gt/RSeGTp_2024_6631-L.avif",
      title: "RS e-tron GT performance",
      description: "아우디 공식 서비스센터에서 제공되는 차량 유지관리 서비스입니다.",
      linkUrl: "/models/detail/rs-e-tron-gt-performance-master-2025",
      linkText: "지금 알아보기",
      linkTarget: "_self",
      smallText:
        "전력 소비량: 3.4 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급",
      captionText: "",
    },
    {
      imagePath: "/img/models/e-tron-gt/Q6_2023_5202-cast_1-v2-L.avif",
      title: "아우디 사고 수리 지원 프로그램",
      description: "고객님의 안전한 이동과 차량의 완벽한 수리를 약속 드립니다.",
      linkUrl: "/models/detail/q6-suv-e-tron-2025",
      linkText: "지금 알아보기",
      linkTarget: "_self",
      smallText:
        "전력 소비량(복합): 19.8-16.1kWh/100km, CO₂ 배출량(복합): 0g/km, CO₂ 등급: A",
    },
  ]);
</script>