audi/app/pages/serviceprogram/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"
      />

      <!-- 제품 카드 컴포넌트 -->
      <ProductCard
        image="/img/service/program/1277x718.webp"
        title="픽업 & 딜리버리 서비스"
        subtitle="고객님의 차량을 직접 픽업하여 정비를 완료한 후, 다시 고객님께 안전하게 전달해드리는 탁송 서비스입니다."
        buttonText="상세보기"
        buttonUrl="/serviceprogram/pickupdelivery"
        buttonTarget="_self"
        layout="horizontal"
        imagePosition="left"
      />

      <ProductCard
        image="/img/service/program/sbpm.webp"
        title="아우디 모빌리티 서포트"
        subtitle="긴급출동 후 차량 견인상황 시 발생한 교통비를 지원하는 서비스입니다."
        buttonText="상세보기"
        buttonUrl="/serviceprogram/support"
        buttonTarget="_self"
        layout="horizontal"
        imagePosition="right"
      />

      <ProductCard
        image="/img/service/program/sbcp.webp"
        title="아우디 카 서비스 플러스"
        subtitle="아우디 카 서비스 플러스 프로그램은 고객의 차량 특성에 맞는 다양한 서비스를 제공해 드립니다."
        buttonText="상세보기"
        buttonUrl="/serviceprogram/carserviceplus"
        buttonTarget="_self"
        layout="horizontal"
        imagePosition="left"
      />

      <ProductCard
        image="/img/service/program/10_1920x1080.webp"
        title="아우디 서비스 연장 패키지"
        subtitle="아우디 서비스 연장 패키지는 고객님의 차량을 최적의 컨디션으로 운행하시는데 도움을 드리는 차량 유지관리 프로그램입니다."
        buttonText="상세보기"
        buttonUrl="/serviceprogram/audiservicecouponpackage"
        buttonTarget="_self"
        layout="horizontal"
        imagePosition="right"
      />

      <ProductCard
        image="/img/service/program/11_1920x1080.webp"
        title="아우디 사고 차량 지원 프로그램"
        subtitle="갑작스런 차량 사고 발생시, 고객님의 안전한 이동과 차량의 완벽한 수리를 약속드립니다."
        buttonText="상세보기"
        buttonUrl="/serviceprogram/accidentassistance"
        buttonTarget="_self"
        layout="horizontal"
        imagePosition="left"
      />

      <ProductCard
        image="/img/service/program/12_1920x1080.webp"
        title="아우디 사고 차량 수리 품질 관리"
        subtitle="수리 후 품질과 안전까지 생각하신다면 아우디 공식 서비스센터를 통한 사고차량 수리를 권해드립니다."
        buttonText="상세보기"
        buttonUrl="/serviceprogram/audirepairquality"
        buttonTarget="_self"
        layout="horizontal"
        imagePosition="right"
      />

      <ProductCard
        image="/img/service/program/13_1920x1080.webp"
        title="아우디 익스프레스 서비스"
        subtitle="고객님의 소중한 시간을 절약해드리기 위해 다양한 서비스를 제공하고 있습니다."
        buttonText="상세보기"
        buttonUrl="/serviceprogram/expressservice"
        buttonTarget="_self"
        layout="horizontal"
        imagePosition="left"
      />
    </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";

  const bannerImagePath = ref("/img/service/program/sp_9_1920X1080.jpg");
</script>