audi/app/pages/service/index.vue

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

      <TitleVisual
        title="아우디 서비스"
        description="아우디코리아의 고객만족 서비스를 만나 보십시오."
        textAlign="left"
        type="middle"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

      <GridBanner :items="bannerItems" class="mt--45" />
    </div>
  </main>
</template>

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

  const bannerImagePath = ref("/img/service/service_4_1920X1080.jpg");
  const bannerItems = ref([
    {
      image: "/img/service/service_5_1920X1080.jpg",
      title: "서비스 핵심 프로세스",
      subtitle:
        "전 세계적으로 공통 적용되는 아우디의 글로벌 표준 고객 서비스 프로세스입니다.",
      linkUrl: "/service/coreprocess",
      linkText: "자세히 보기",
      linkTarget: "_self",
    },
    {
      image: "/img/service/service_6_1920X1080.jpg",
      title: "테크니션",
      subtitle:
        "최상의 정비를 제공하기 위해 아우디 글로벌 표준 과정을 통해 양성되는 전문인력이 차량을 점검합니다.",
      linkUrl: "/service/technician",
      linkText: "자세히 보기",
    },
    {
      image: "/img/service/service_7_1920X1080.jpg",
      title: "정비 설명 프로세스",
      subtitle:
        "정비내역에 대한 고객의 완벽한 이해를 돕기 위해 도입된 새로운 프로세스를 제공합니다.",
      linkUrl: "/service/maintenanceprocess",
      linkText: "자세히 보기",
    },
    {
      image: "/img/service/service_8_1920X1080.jpg",
      title: "서비스 어드바이저",
      subtitle:
        "최상의 서비스를 제공하기 위해서 아우디 글로벌 표준 과정을 통해 양성되는 전문인력만이 고객과 함께 합니다.",
      linkUrl: "/service/serviceadvisor",
      linkText: "자세히 보기",
    },
  ]);
</script>