audi/app/pages/aboutaudi/auditoyou/index.vue

<template>
  <main>
    <div class="detail--container--full">
      <FullSizeBannerText1
        :imagePath="bannerImagePath"
        altText="About audi"
        subTitle=""
        textLocation="top"
        type="cover"
        :height="800"
      />

      <TitleVisual
        title="Audi to you:아우디, 당신이 원하는 곳에서 -찾아가는 시승 서비스-"
        description="아우디의 Progress는 기회가 닿지 않던 곳까지 가능성을 확장해 변화를 만들어내는 것 아우디는 고객분들께서 장소와 시간에 구애 받지 않고 더 편리하게 아우디를 만나실 수 있는 찾아가는 시승 서비스 [Audi to you] 서비스를 제공합니다."
        textAlign="center"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        data-type="square"
        image="/img/aboutaudi/730X730_ty01.webp"
        title="자동매치 서비스"
        subtitle="고객님이 희망하시는 지역을 선택하시면,<br/>
고객님과 가장 가까운 전시장을 자동으로 매치해드립니다."
        layout="horizontal"
        imagePosition="left"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        id="maw02"
        data-type="square"
        image="/img/aboutaudi/SA_sales_advisor.webp"
        title="방문 상담 및 시승"
        subtitle="해당 전시장의 Sales Advisor가 고객님의 차량과 함께 방문합니다.<br/><br/>
전시장 방문의 번거로움은 줄이고, 편의성은 높인 특별한 경험을 하실 수 있습니다."
        layout="horizontal"
        imagePosition="right"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        id="etronms04"
        data-type="square"
        image="/img/aboutaudi/SA_sales_advisor_training.webp"
        title="인증자격 인력"
        subtitle="Audi to you 서비스의 인증자격을 보유한 전문 Sales Advisor가 높은 퀄리티의 서비스를 제공합니다."
        layout="horizontal"
        imagePosition="left"
      />

      <div class="etronms--thumb--wrap mt--20" id="etronms05">
        <div class="thumb">
          <img src="/img/aboutaudi/redd.avif" alt="" />
        </div>

        <div class="btn--wrapper mt--120">
          <NuxtLink
            to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A01&inflPathBclsCd=B03&cmpnNo=&selectCar=&step=1&testType=1"
            target="_blank"
            class="default--round--btn reverse"
          >
            시승 예약
          </NuxtLink>
        </div>
      </div>

      <section class="caution--text--wrapper">
        <div>
          <p>
            *시승 일정은 시승 예약 후, 매칭된 전시장의 담당딜러를 통해 조율이 가능합니다.
          </p>

          <p>* 예약 확정은 1-2일 정도 소요될 수 있습니다.</p>
        </div>
      </section>
    </div>
  </main>
</template>

<script setup>
  // 컴포넌트 import
  import TitleVisual from "~/components/block/TitleVisual.vue";
  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
  import SwiperBanner from "~/components/block/SwiperBanner.vue";
  import ProductCard from "~/components/block/ProductCard.vue";
  import EtronCard from "~/components/block/modelList.vue";

  const bannerImagePath = ref("/img/aboutaudi/Homepage_1_1920X1080.avif");

  const bannerSlides = ref([
    {
      image: "/img/etronms/network_1_1920x1920.avif",
      alt: "아우디 초급속 충전기",
      title: "아우디 초급속 충전기",
      subtitle:
        "주요 아우디 e-tron 공식 딜러사 네트워크 (전시장/서비스센터)에, 이미지와 같은 고출력의 초급속 충전기가 설치되어 있습니다.",
      cautiondesc:
        "전국 네트워크 충전기 개수(2023년 12월 기준) : 60개 이상 / 최대 출력 : 135kW / 충전 소요시간(레벨 5%에서 80%까지 충전 시, Q4 e-tron 기준) : 약 29분 *차량 적재, 정비 상태 및 외기 온도 등에 따라 차이가 발생할 수 있습니다.",
    },
    {
      image: "/img/etronms/network_2_1920x1920.avif",
      alt: "아우디 충전 네트워크",
      title: "아우디 충전 네트워크",
      subtitle:
        "아우디 초급속 충전기는 전국 주요 거점에 위치하고 있습니다. 상기 이미지는 참조용이며, 자세한 설치 위치는 myAudiworld 앱을 통해서 확인 가능합니다. 아우디 충전 네트워크는 고객들의 편리한 이용을 위해 아우디폭스바겐 그룹이 구축하는 모든 초고속 충전망 서비스 공유를 계획하고 있습니다.*",
    },
  ]);

  const etronLineup = ref([
    {
      imagePath: "/img/etronms/S_S-e-tron-GT_1920x1080_new.avif",
      imageAlt: "S e-tron GT",
      title: "S e-tron GT",
      description:
        "가장 강력한 아우디 S 모델로, 그란 투리스모 순수 전기차의 힘과 아름다움에 긴 주행 가능 거리, 높은 충전 용량, 그리고 짜릿한 주행 역학을 결합한 차량입니다.",
      linkUrl: "/",
      linkText: "아우디 S e-tron GT 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/etronms/e-tron_RS-e-tron-GT-performance_1920x1080_new.avif",
      imageAlt: "RS e-tron GT performance",
      title: "RS e-tron GT performance",
      description:
        "최초의 순수 전기차 RS performance 모델인 동시에, 지금까지 생산된 아우디 양산차 중 가장 강력한 성능을 가장 아름다운 그란 투리스모 디자인에 담아 냈습니다.",
      linkUrl: "/",
      linkText: "아우디 RS e-tron GT performance 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/etronms/e-tron_Q8-SB-e-tron_1920x1080_new.avif",
      imageAlt: "A6 e-tron",
      title: "A6 e-tron",
      description: "혁신의 차이, 전기적 프리미엄의 완성. 아우디 A6 e-tron.",
      linkUrl: "/",
      linkText: "아우디 A6 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/etronms/S6-e-tron_1920x1080_new.avif",
      imageAlt: "S6 e-tron",
      title: "S6 e-tron",
      description: "혁신의 차이, 전기적 프리미엄의 완성. 아우디 S6 e-tron.",
      linkUrl: "/",
      linkText: "아우디 S6 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/etronms/e-tron_Q4-e-tron_1920x1080_new.avif",
      imageAlt: "Q4 e-tron",
      title: "Q4 e-tron",
      description:
        "아우디의 컴팩트 순수 전기 SUV. 아우디 Q4 e-tron 아우디 Q4 e-tron은 명확한 디자인 컨셉으로 전기 모빌리티의 미래 비전을 제시합니다.",
      linkUrl: "/",
      linkText: "아우디 Q4 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/etronms/e-tron_Q4-SB-e-tron_1920x1080_new.avif",
      imageAlt: "Q4 Sportback e-tron",
      title: "Q4 Sportback e-tron",
      description:
        "아우디의 쿠페형 컴팩트 SUV. 순수전기차 아우디 Q4 스포트백 e-tron 아우디 Q4 스포트백 e-tron의 스포티한 디자인은 진보를 통해 완성된 전기 모빌리티의 미래를 담고 있습니다.",
      linkUrl: "/",
      linkText: "아우디 Q4 Sportback e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/etronms/e-tron_Q6-e-tron_1920x1080_new.avif",
      imageAlt: "Q6 e-tron",
      title: "Q6 e-tron",
      description:
        "이제, e-tron의 새로운 차원이 열립니다. 아우디 Q6 e-tron. 미래를 향한 새로운 디자인과 더욱 스마트해진 기술, 지금껏 볼 수 없었던 e-tron의 놀라운 혁신을 만나보세요.",
      linkUrl: "/",
      linkText: "아우디 Q6 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/etronms/S_SQ6-e-tron_1920x1080_new.avif",
      imageAlt: "SQ6 e-tron",
      title: "SQ6 e-tron",
      description:
        "이제, e-tron의 새로운 차원이 열립니다. 아우디 SQ6 e-tron. 혁신에 퍼포먼스를 더한 새로운 전기의 시작. 새로운 PPE 플랫폼이 선사하는 다이나믹한 드라이빙을 경험해보세요.",
      linkUrl: "/",
      linkText: "아우디 SQ6 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/etronms/e-tron_Q8-e-tron_1920x1080_new.avif",
      imageAlt: "Q8 e-tron",
      title: "Q8 e-tron",
      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 Q8 e-tron.",
      linkUrl: "/",
      linkText: "아우디 Q8 e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/etronms/e-tron_Q8-SB-e-tron_1920x1080_new.avif",
      imageAlt: "Q8 Sportback e-tron",
      title: "Q8 Sportback e-tron",
      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 Q8 스포트백 e-tron.",
      linkUrl: "/",
      linkText: "아우디 Q8 Sportback e-tron 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/etronms/S_SQ8-SB-e-tron_1920x1080_new.avif",
      imageAlt: "SQ8 Sportback e-tron",
      title: "SQ8 Sportback e-tron",
      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 SQ8 스포트백 e-tron.",
      linkUrl: "/",
      linkText: "아우디 SQ8 Sportback e-tron 더 알아보기",
      linkTarget: "_self",
    },
  ]);

  const etronLineup2 = ref([
    {
      imagePath: "/img/etronms/a7sbe_960x540.avif",
      imageAlt: "A7 Sportback TFSI e",
      title: "A7 Sportback TFSI e",
      description:
        "풀 사이즈 클래스 쿠페의 미학과 혁신적인 플러그인 하이브리드 기술이 결합된 아우디 A7 Sportback TFSI e. 우아한 디자인을 통해 언제 어디서든 모든 사람들에게 놀라움을 선사합니다.",
      linkUrl: "/",
      linkText: "아우디 A7 Sportback TFSI e 더 알아보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/etronms/white.avif",
      imageAlt: "",
      title: "",
      description: "",
      // linkUrl: "/",
      // linkText: "아우디 RS e-tron GT performance 더 알아보기",
      // linkTarget: "_self",
    },
    {
      imagePath: "/img/etronms/white.avif",
      imageAlt: "",
      title: "",
      description: "",
      // linkUrl: "/",
      // linkText: "아우디 RS e-tron GT performance 더 알아보기",
      // linkTarget: "_self",
    },
  ]);
</script>