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

<template>
  <main>
    <div class="detail--container--full">
      <!-- 풀사이즈 배너 텍스트 1줄용 -->
      <fullSizeBannerText1
        :height="856"
        :imagePath="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" />

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

      type : middle 타이틀 중간사이즈면 좌우 여백없음
             middle2 : 타이틀 중간사이즈면서 좌우 여백있음
      -->
      <TitleVisual
        title="순수한 에너지 체험"
        description="아우디 S e-tron GT: 가장 강력한 아우디 S 모델로, 그란 투리스모 순수 전기차의 힘과 아름다움에 긴 주행 가능 거리, 높은 충전 용량, 그리고 짜릿한 주행 역학을 결합한 차량입니다."
        textAlign="left"
        theme="dark"
        type="middle2"
        :animation="true"
        :animationDelay="300"
      />

      <!-- 
        Swiper 배너 (30% + 70% 레이아웃)
        type="vertical", 
        type="horizental"
      -->
      <SwiperBanner
        :slides="bannerSlides"
        title=""
        subtitle=""
        smalldesc=""
        notice=""
        type="vertical"
        :autoplay="{ delay: 0 }"
        :loop="false"
      />

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="충전 중에도 우수한 성능"
        description="충전하는 동안에도 짜릿한 성능을 만끽하세요. 낮은 온도에서도 최대 320kW의 충전 용량을 이용할 수 있으며, 안정적인 충전 곡선 덕분에 고속 충전의 진가를 느낄 수 있습니다."
        textAlign="left"
        theme="dark"
        type="middle2"
        :animation="true"
        :animationDelay="300"
      />

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

      <TrimInfoColumn :items="trimInfoItems2" class="mt--180" />

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="코너링의 즐거움"
        description="콰트로 사륜구동과 에어 서스펜션이 스포츠카 특유의 숨막히는 역동성을 제공합니다. 전기 토크 벡터링이 필요에 따라 후방 구동 휠에 다양한 수준의 토크를 배분하며, 이로써 코너링 시 우수한 후방 민첩성이 보장됩니다."
        textAlign="left"
        theme="dark"
        type="middle2"
        :animation="true"
        :animationDelay="300"
      />

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

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="에너지로 충만한 아름다움"
        description="아우디 S e-tron GT는 낮고 유려한 실루엣, 긴 휠베이스, 그리고 눈길을 사로잡는 S 디자인 요소를 갖추고 있습니다. 플로렛 실버 메탈릭 색상의 마감 도색이 그란 투리스모 특유의 강력한 비율과 역동적인 형태감을 강조합니다."
        textAlign="left"
        type="middle2"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

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

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="디테일에 숨겨진 스포티한 매력"
        description="운전자 중심의 콕핏 레이아웃, 스포티한 윤곽의 스티어링 휠, 그리고 앞쪽에 S자 조명 엠블럼이 달린 스포츠 시트 플러스가 실내에서도 스포츠카만의 분위기를 조성합니다."
        textAlign="left"
        type="middle2"
        theme="dark"
        :animation="true"
        :animationDelay="300"
        class="mt--100"
      />

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

      <!-- 타이틀 비주얼 컴포넌트 -->
      <TitleVisual
        title="눈에 띄는 특별함 – 아우디 익스클루시브"
        description="내가 특별한 만큼, 내 아우디도 특별해야 합니다. 아우디 S e-tron GT에 나만의 독창적인 매력을 더해 보세요."
        textAlign="left"
        type="middle2"
        theme="dark"
        :animation="true"
        :animationDelay="300"
        class="mt--100"
      />

      <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/etronms/e-tron_1920x1920.webp"
        title="아우디 전기차
"
        smallTitle="카 서비스 플러스"
        subtitle="아우디 최초의 순수 전기차 아우디 e-tron은 아우디 브랜드 역사의 완전한 새로운 장을 열었습니다.<br/>
아우디 e-tron은 순수 전기 모터로 구동되며 급속 충전 편의성, 주행 중 첨단 에너지 회수 기능을 보유하고 있습니다.<br/>
지속적으로 확장되는 아우디 e-tron 제품군은 전력으로 구동되며, 정교한 차량 디자인과 역동적인 성능 및 핸들링을 제공합니다."
        buttonText="카 서비스 플러스 확인하기"
        buttonUrl="/models/etron"
        buttonTarget="_self"
        layout="horizontal"
        imagePosition="left"
      />

      <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 ProductCard from "~/components/block/ProductCard.vue";
  import CautionText from "~/components/block/cautionText3.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 bannerVideoPath = ref("/img/models/q8/q8/main1.jpg");

  // 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,
    },
  ]);

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

  const bannerSlides2 = ref([
    {
      image: "/img/models/e-tron-gt/SeGT_2024_6504_Cast-L.avif",
      alt: "고출력 충전",
      title: "고출력 충전",
      subtitle:
        "약 18분 안에 10%에서 80%까지 충전됩니다. 또 10분이면 280km를 주행하기에 충분한 전력을 보충할 수 있습니다. 고전압 배터리를 탑재한 덕분에 HPC 충전소에서 이렇게 빠른 대용량 충전(충전 용량 최대 320kW)이 가능합니다.",
      cautiondesc:
        "전력 소비량: 3.7 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급<br/>유럽 WLTP 기준",
    },
    {
      image: "/img/models/e-tron-gt/SeGT_2024_6505-L.avif",
      alt: "내 생애 가장 오래 이어지는 아드레날린 킥",
      title: "내 생애 가장 오래 이어지는 아드레날린 킥",
      subtitle:
        "기대하세요. 무려 420km(복합 기준)에 달하는 아우디 그란 투리스모 전기차의 기나긴 주행 가능 거리 덕분에 역동적인 주행 경험이 오래도록 지속됩니다.",
      cautiondesc:
        "전력 소비량: 3.7 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급",
    },
    {
      image: "/img/models/e-tron-gt/RRA0356-L-1.jpg",
      alt: "효율성을 위한 방향 전환",
      title: "효율성을 위한 방향 전환",
      subtitle:
        "아우디 e-tron GT를 위해 특별히 개발된 21인치 타이어는 기존 타이어 대비 최적화된 구름 저항으로 효율성이 우수하며, 따라서 주행 가능 거리를 늘리는 데 유리합니다. 이 타이어는 평균 55%의 재생 원료와 재활용 원료를 사용해 제조됩니다.",
      cautiondesc: "참고: 사진의 모델은 아우디 RS e-tron GT 입니다.",
    },
  ]);

  // Trim 정보 데이터
  const trimInfoItems2 = ref([
    {
      title: "합산 출력",
      value: "435",
      unit: "kW",
      subText: "",
    },
    {
      title: "가속 (0-100km/h)",
      value: "3.6",
      unit: "초",
      subText: "(Launch Control 모드: 3.4초)",
    },
    {
      title: "배터리 용량 (Gross)",
      value: "105",
      unit: "kWh",
      subText: "",
    },
  ]);

  const bannerSlides3 = ref([
    {
      video:
        "/img/models/e-tron-gt/EN-240430_Audi_GT_LAUNCH_CONTROL_29s_v11_1x1_CLEAN.mp4",
      alt: "처음부터 압도적인 성능",
      title: "처음부터 압도적인 성능",
      subtitle:
        "아드레날린이 솟구치는 짜릿한 경험이 매 순간 반복됩니다. 아우디 S e-tron GT 모델은 최대 435kW의 강력한 출력을 바탕으로 런치 컨트롤 모드에서 극한의 가속을 선사합니다(전력 소비량: 3.7 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급). 정지 상태에서 3.6초(Launch Control 모드: 3.4초)면 100km/h에 도달합니다. 또한 아우디 S e-tron GT 모델의 e-tron 스포츠 사운드 덕분에 감동적인 주행 경험을 귀로도 느낄 수 있습니다. 절제, 균형, 스포티 등 원하는 사운드 프로필 옵션을 선택하세요.",
      smalldesc: "",
      cautiondesc: "참고: 사진의 모델은 아우디 RS e-tron GT performance 입니다.",
    },
    {
      image: "/img/models/e-tron-gt/SeGT_2024_6505-S-L.avif",
      alt: "노면과 하나 되는 감각",
      title: "노면과 하나 되는 감각",
      subtitle:
        "정밀하게 조향되며 조향 각도는 감소했습니다. 더 직접적인 조향 비율의 전륜 스포츠 스티어링은 특히 굽은 도로에서 운전하는 재미를 더욱 높여주며, 사륜 스티어링은 아우디 S e-tron GT의 민첩성을 한층 더 향상시킵니다.",
      smalldesc: "",
      cautiondesc:
        "전력 소비량: 3.7 km/kWh (복합), CO2 배출량 (복합): 0g/km, 배출 등급: 4등급",
    },
  ]);

  const bannerSlides4 = ref([
    {
      image: "/img/models/e-tron-gt/SeGT_2024_6511-L.avif",
      alt: "모두가 주목하는 스포티한 감각",
      title: "모두가 주목하는 스포티한 감각",
      subtitle:
        "넓은 전면부와 독특한 공기 흡입구, 눈에 띄는 범퍼가 스포츠카만의 인상적인 존재감을 드러냅니다. 싱글프레임의 반전 매력이 느껴지는 그릴은 특유의 3D 엠보싱으로 이러한 인상을 더욱 강화합니다.",
      smalldesc: "",
    },
    {
      image: "/img/models/e-tron-gt/SeGT_2024_6509-L.avif",
      alt: "다이내믹한 마감",
      title: "다이내믹한 마감",
      subtitle:
        "강력한 후방 디퓨저는 공기역학적 효율성과 명료한 시각적 아름다움을 결합한 결과물입니다. 수직 슬랫을 통해 난류를 줄이는 한편, 디퓨저 위에 차체 색상의 인레이를 넣어 S 모델 특유의 디자인 감각을 강조했습니다.",
      smalldesc: "",
      cautiondesc:
        "전력 소비량: 3.7 km/kWh (복합), CO2&nbsp;배출량&nbsp;(복합): 0g/km,&nbsp;배출 등급: 4등급",
    },
    {
      video: "/img/models/e-tron-gt/s-e-tron-gt-chlh-lights-animation-L.mp4",
      alt: "혁신적인 조명 디자인",
      title: "혁신적인 조명 디자인",
      subtitle:
        "커밍 홈/리빙 홈 기능의 다이내믹한 라이트 시퀀스가 혁신적인 느낌을 선사합니다. 후면 전체를 가로지르는 조명 스트립은 특히 강렬한 인상을 남깁니다.",
      cautiondesc:
        "전력 소비량: 3.7 km/kWh (복합), CO2&nbsp;배출량&nbsp;(복합): 0g/km,&nbsp;배출 등급: 4등급",
    },
    {
      image: "/img/models/e-tron-gt/SeGT_2024_6511-L-2.avif",
      alt: "빛으로 완성되는 존재감",
      title: "빛으로 완성되는 존재감",
      subtitle:
        "매트릭스 LED 헤드라이트와 아우디 레이저 라이트는 아우디의 진보적 디자인을 대표하는 핵심 요소입니다. 아우디 레이저 라이트의 파란색 포인트가 돋보이는 독창적인 조명 시그니처는 이 자동차의 스포티한 개성을 더욱 강조합니다.",
      smalldesc: "",
    },
  ]);

  const bannerSlides5 = ref([
    {
      image: "/img/models/e-tron-gt/SeGT_2024_6529_EN-L.avif",
      alt: "한눈에 들어오는 디지털 정보",
      title: "한눈에 들어오는 디지털 정보",
      subtitle:
        "아우디 버추얼 콕핏 플러스의 12.3인치 디스플레이는 속도 및 내비게이션 안내뿐만 아니라 배터리 온도 및 현재 차량의 최대 허용 충전 용량 등 충전 프로세스 관련 정보도 표시해 줍니다.",
      smalldesc: "",
    },
    {
      video: "/img/models/e-tron-gt/Audi_GT-Post-GlassRoof-S_1920x1080.mp4",
      alt: "새로운 차원의 개방감",
      title: "새로운 차원의 개방감",
      subtitle:
        "블라인드처럼 간편하게 조작할 수 있으면서도, 훨씬 더 다양하게 활용 가능합니다. 파노라마 글래스 루프를 구성하는 9개의 세그먼트는 각각 투명 또는 불투명으로 전환할 수 있습니다. 원하는 곳으로 햇살이 들어오도록 MMI 터치 디스플레이에서 선택하면 됩니다.",
      smalldesc: "",
    },
    {
      video: "/img/models/e-tron-gt/Frunk_S_Etron_GT-L.mp4",
      alt: "더 넉넉한 공간",
      title: "더 넉넉한 공간",
      subtitle:
        "긴 보닛 아래에 추가 수납 공간이 마련되어, 수납 용량이 77리터나 더 늘어났습니다.",
      smalldesc: "",
      cautiondesc: "유럽인증기준",
    },
  ]);

  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>