audi/app/pages/service/careprogram/carecenter.vue

<template>
  <main>
    <div class="detail--container--full">
      <FullSizeBannerText1
        :imagePath="bannerImagePath"
        altText="Audi Service"
        textLocation="top"
        mask="mask--hidden"
        type="cover"
        :height="800"
        textColor="#020203"
      />

      <TitleVisual
        title="아우디 고객지원센터<br/>080 - 767 – 2834<br/>(080 - SOS - Audi)"
        description="아우디는 고객님 개개인에 맞는 맞춤형 서비스를 제공하기 위해 고객지원센터를 운영하고 있습니다.<br/>언제 어디서나 최상의 서비스를 보다 빠르게 만나실 수 있습니다."
        textAlign="center"
        type="middle"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

      <ProductCard
        data-type="square"
        image="/img/service/careprogram/210203_Audi_Angola_MainstageTeaser_730x730.webp"
        title="운영시간"
        subtitle="> 365일 24시간 운영"
        buttonText=""
        buttonUrl=""
        buttonTarget="_blank"
        layout="horizontal"
        imagePosition="left"
      />

      <ProductCard
        data-type="square"
        image="/img/service/careprogram/17_730X730.webp"
        title="서비스 항목"
        subtitle="> 긴급 출동 및 견인 서비스<br/>> 사고 차량 지원 서비스<br/>> 차량 구입 및 각종 이벤트 안내<br/>> 아우디 서비스 안내"
        buttonText=""
        buttonUrl=""
        buttonTarget="_blank"
        layout="horizontal"
        imagePosition="right"
      />

      <ProductCard
        data-type="square"
        image="/img/service/careprogram/20220327_231737.webp"
        title="VVIP 고객지원센터"
        subtitle="Audi A8 고객전용 VVIP 고객지원센터는 고객님께서 언제 어디에 계시든 도움이 필요하실 때 신속하고 만족스러운 서비스를 받으실 수 있도록 연중무휴로 운영되고 있습니다.<br/><br/> VVIP Audi(080-847-2834)와 함께 품격 있는 최상의 서비스를 경험해 보시기 바랍니다."
        buttonText=""
        buttonUrl=""
        buttonTarget="_blank"
        layout="horizontal"
        imagePosition="left"
      />

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

      <CareProgramItem data-type-row="3" :items="careProgramItems" />
    </div>
  </main>
</template>

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

  const bannerImagePath = ref("/img/service/careprogram/16_1920x1080.avif");

  // 링크 데이터 배열
  const reservationLinks = ref([
    {
      text: "KATRI(자동차안전연구원)의 자동차결함신고센터(car.go.kr) 바로 가기",
      url: "https://car.go.kr/",
      target: "_blank",
      showIcon: true,
    },
  ]);

  const careProgramItems = ref([
    {
      imagePath: "/img/service/careprogram/18_730X730.avif",
      title: "카 서비스 플러스",
      description: "아우디 공식 서비스센터에서 제공되는 차량 유지관리 서비스입니다.",
      linkUrl: "/service/program/carserviceplus",
      linkText: "상세보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/service/careprogram/2019_1400x438_topmain_14.avif",
      title: "아우디 사고 수리 지원 프로그램",
      description: "고객님의 안전한 이동과 차량의 완벽한 수리를 약속 드립니다.",
      linkUrl: "/service/program/accidentassistance",
      linkText: "상세보기",
      linkTarget: "_self",
    },
    {
      imagePath: "/img/service/careprogram/kr0001.avif",
      title: "아우디 서비스 연장 패키지 프로그램",
      description:
        "고객님의 차량을 최적의 컨디션으로 운행하시는데 도움을 드리는 차량 유지관리 프로그램입니다.",
      linkUrl: "/service/program/audiservicecouponpackage",
      linkText: "상세보기",
      linkTarget: "_self",
    },
  ]);
</script>