모델 페이지, 서비스 작업완료

app/assets/scss/admin.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-
+@use "sass:math";
 
 @font-face {
   font-family: 'AudiType';
@@ -24,6 +24,20 @@
   .mb--#{$i} { margin-bottom: #{$i}px !important; }
   .ml--#{$i} { margin-left: #{$i}px !important; }
   .m--#{$i} { margin: #{$i}px !important; }
+
+  @media (max-width: 720px) {
+    .pt--#{$i} { padding-top: #{math.div($i, 2)}px !important; }
+    .pr--#{$i} { padding-right: #{math.div($i, 2)}px !important; }
+    .pb--#{$i} { padding-bottom: #{math.div($i, 2)}px !important; }
+    .pl--#{$i} { padding-left: #{math.div($i, 2)}px !important; }
+    .p--#{$i} { padding: #{math.div($i, 2)}px !important; }
+
+    .mt--#{$i} { margin-top: #{math.div($i, 2)}px !important; }
+    .mr--#{$i} { margin-right: #{math.div($i, 2)}px !important; }
+    .mb--#{$i} { margin-bottom: #{math.div($i, 2)}px !important; }
+    .ml--#{$i} { margin-left: #{math.div($i, 2)}px !important; }
+    .m--#{$i} { margin: #{math.div($i, 2)}px !important; }
+  }
 }
 
 @for $i from 14 through 40 {
@@ -397,6 +411,32 @@ html {
     height:100vh;
   }
 
+  &[data-text-location="topright"]{
+    &:before{
+      background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);    
+    }
+    .alt--text{      
+      bottom:auto;
+      left:auto;
+      right:0px;
+      top:40px;      
+    }
+
+    .sub--title{
+      bottom:auto;
+      left:auto;
+      right:0px;
+      top:90px;
+    }
+
+    .btn--wrapper{
+      bottom:auto;
+      left:auto;
+      right:0px;
+      top:150px;
+    }
+  }
+
   &[data-text-location="top"]{
     &:before{
       background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);    
@@ -406,6 +446,16 @@ html {
       bottom:auto;
       top:40px;      
     }
+
+    .sub--title{
+      bottom:auto;
+      top:90px;
+    }
+
+    .btn--wrapper{
+      bottom:auto;
+      top:150px;
+    }
   }
 
   .alt--text{   
@@ -423,6 +473,43 @@ html {
     white-space: pre-wrap;    
     z-index: 2;
   }
+
+  .sub--title{
+    position: absolute;  
+    bottom:40px;
+    left:0px;  
+    margin: 0px;
+    color: rgb(252, 252, 253);    
+    letter-spacing: 0px;
+    font-weight: 400;
+    text-decoration: none;
+    font-size: 16px;
+    line-height: 24px;
+    font-stretch: 130%;
+    padding: 0 96px;    
+    z-index: 2;
+    
+    
+    @media (min-width: 1440px) {  
+      font-size: 18px;
+      line-height: 28px;
+    }
+    @media (min-width: 1920px) {  
+      font-size: 20px;
+      line-height: 32px;  
+    }
+  }
+
+  .btn--wrapper{
+    position: absolute;
+    bottom:150px;
+    left:0px;
+    padding: 0 96px;  
+    z-index: 2;
+    display: flex;
+    gap:10px;
+  }
+
 }
 
 
@@ -813,6 +900,17 @@ html {
           font-stretch: 105%;
         }
         
+        .caution--title{
+          margin-top:25px;
+          color: rgba(252, 252, 253, 0.7);          
+          letter-spacing: 0px;
+          font-weight: 400;
+          text-decoration: none;
+          font-size: 12px;
+          line-height: 24px;
+          font-stretch: 105%;
+        }
+
         .notice--text {
           margin-top: 40px;
           padding-top: 20px;
@@ -1452,6 +1550,100 @@ html {
 
 
 
+
+.etronms--thumb--wrap{  
+  padding:0 var(--spacing-relative-3xl);
+  .thumb{
+    overflow: hidden;
+    border-radius: 20px;
+  }
+  .small--text{
+    margin: 0px;
+    color: rgb(255, 255, 255);
+    letter-spacing: 0px;
+    font-weight: 400;
+    text-decoration: none;
+    font-size: 12px;
+    line-height: 32px;
+    font-stretch: 130%;      
+  }
+
+  .caution--text{
+    margin: 0 0 var(--spacing-relative-md) 0;
+    color: rgba(252, 252, 253, 0.7);    
+    letter-spacing: 0px;
+    font-weight: 400;
+    text-decoration: none;
+    font-size: 16px;
+    line-height: 24px;
+    font-stretch: 105%;
+  }
+
+  .btn--wrapper{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+
+
+.etron--card{
+  padding:0 var(--spacing-relative-3xl);
+  > ul{
+    display: flex;
+    flex-wrap:wrap;
+    gap:20px;
+    li{
+      width:calc( (100% - 40px) / 3);
+      .thumb{
+        position: relative;
+        height: 0px;
+        overflow: hidden;
+        border-radius: 20px;
+        padding-top: 56.25%;
+        img{
+          position: absolute;
+          inset: 0px;
+          height: 100%;
+        }
+      }
+      .desc--wrap{
+        padding-top:30px;
+        h2{
+          margin: 0px;
+          color: rgb(252, 252, 253);    
+          letter-spacing: 0px;
+          font-weight: 400;
+          text-decoration: none;
+          font-size: 20px;
+          line-height: 32px;
+          font-stretch: 130%;
+          @media (min-width: 1440px) {          
+            font-size: 24px;
+            line-height: 36px;          
+          }
+        }
+        h3{
+          margin: var(--spacing-relative-xs) 0 0 0;
+          color: rgba(252, 252, 253, 0.7);          
+          letter-spacing: 0px;
+          font-weight: 400;
+          text-decoration: none;
+          font-size: 16px;
+          line-height: 24px;
+          font-stretch: 105%;
+        }
+      }
+    }
+  }
+}
+
+
+
+
+
+
 /*=================================================
 |컴포넌트 별 css
 |END
@@ -2690,5 +2882,251 @@ html {
 
 /*=================================================
 |버튼 리스트 css
-|뚱
-=================================================*/
+|end
+=================================================*/
+
+/*=================================================
+|모델 리스트 css
+|start
+=================================================*/
+.models--page{
+  .models--container{
+    .models--filter--section{
+      .filter--group{
+        .filter--dropdown{
+          display: flex;
+          gap:10px;
+
+          button{
+            border-radius: 10px;
+            box-sizing: border-box;
+            display: inline-flex;
+            -webkit-box-pack: justify;
+            justify-content: space-between;
+            -webkit-box-align: center;
+            align-items: center;
+            gap: 8px;            
+            letter-spacing: 0px;
+            font-weight: 400;
+            text-decoration: none;
+            font-size: 14px;
+            line-height: 20px;
+            font-stretch: 105%;
+            padding: 4px 12px;
+            transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
+            transition-duration: 250ms;
+            transition-property: background-color, box-shadow, color;
+            min-height: 36px;
+            cursor: pointer;
+            background-color: rgb(24, 29, 37);
+            color: rgb(252, 252, 253);
+            box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
+          }
+        }
+      }
+    }
+    .models--list{
+      width:100%;
+      display: flex;
+      flex-wrap:wrap;
+      gap:20px;
+      .model--item{
+        --gradient-start: hsla(216, 20%, 17%, 1);
+        --gradient-end: hsla(216, 21%, 12%, 1);
+        transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
+        transition-duration: 250ms;
+        transition-property: --gradient-start, --gradient-end, box-shadow;
+        padding: 16px;
+        overflow: hidden;
+        border-radius: 20px;
+        border: none;
+        cursor: pointer;
+        box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
+        backdrop-filter: blur(40px);
+        background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+        text-align: left;
+        max-width:calc( (100% - 60px) / 4);
+
+        .model--name{
+          position: relative;
+          margin: 0px;
+          color: rgba(252, 252, 253, 0.7);          
+          letter-spacing: 0px;
+          font-weight: 400;
+          text-decoration: none;
+          font-size: 16px;
+          line-height: 24px;
+          font-stretch: 105%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .etron{
+            margin: 0px;
+            border-radius: 10px;
+            box-sizing: border-box;
+            display: inline-flex;
+            -webkit-box-pack: justify;
+            justify-content: space-between;
+            -webkit-box-align: center;
+            align-items: center;
+            gap: 8px;            
+            letter-spacing: 0px;
+            font-weight: 400;
+            text-decoration: none;
+            font-size: 12px;
+            line-height: 16px;
+            font-stretch: 105%;
+            padding: 4px 12px;
+            transition-timing-function:cubic-bezier(0.75, 0.02, 0.5, 1);
+            transition-duration: 250ms;
+            transition-property: background-color, box-shadow, color;
+            min-height: 28px;
+            background-color: rgba(154, 163, 177, 0.1);
+            color: rgb(252, 252, 253);
+            box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 1px inset;
+          }
+        }
+        .model--image--wrap{
+          display: block;
+          aspect-ratio: 7 / 3;
+          overflow: hidden;
+          padding: 0px;
+          img{
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+        .model--info--wrap{
+          margin: 0px;
+          color: rgba(252, 252, 253, 0.7);          
+          letter-spacing: 0px;
+          font-weight: 400;
+          text-decoration: none;
+          font-size: 12px;
+          line-height: 20px;
+          font-stretch: 105%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .ico{
+            width: 24px;
+            height: 24px;
+            background-image: url(/img/ico--arrow.svg);
+          }
+        }
+        
+      }
+    }
+  }
+
+  .models--list--car{
+    .car--list{
+      display: flex;
+      flex-wrap: wrap;
+      gap:20px;
+      .car--item{
+        width:calc( (100% - 40px) / 3 );
+        overflow: hidden;
+        height: calc(100% - var(--spacing-relative-lg));
+        background-color: rgba(154, 163, 177, 0.1);
+        border-radius: 20px;        
+        padding-top:24px;     
+        .car--image{
+          img{
+            width:100%;
+          }
+        }
+        .car--info{
+          padding-top:24px;
+          padding-left: 24px;
+          padding-right: 24px;          
+          .car--link{
+            margin: 0px 0px 12px;
+            margin-top:24px;
+            border: 0px;
+            flex-direction: column;
+            -webkit-box-align: center;
+            align-items: center;
+            -webkit-box-pack: center;
+            justify-content: center;
+            transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
+            transition-duration: 250ms;
+            border-radius: 999px;
+            cursor: pointer;
+            display: inline-flex;
+            box-sizing: border-box;
+            text-align: center;
+            font-family: AudiType, sans-serif;
+            letter-spacing: 0px;
+            font-weight: 400;
+            text-decoration: none;
+            font-size: 14px;
+            line-height: 20px;
+            font-stretch: 105%;
+            padding: 12px 24px;
+            min-height: 48px;
+            width: 100%;
+            background: rgb(101, 112, 129);
+            color: rgb(252, 252, 253);
+            box-shadow: rgba(101, 112, 129, 0) 0px 0px 0px 1px inset;
+            transition-property: color, background, box-shadow;
+          }
+          .car--name{
+            margin: 0px;
+            color: rgb(252, 252, 253);              
+            letter-spacing: 0px;
+            font-weight: 700;
+            text-decoration: none;
+            font-size: 16px;
+            line-height: 24px;
+            font-stretch: 130%;            
+            
+            @media (min-width: 1440px) {                
+              font-size: 18px;
+              line-height: 28px;                
+            }
+            @media (min-width: 1920px) {            
+              font-size: 20px;
+              line-height: 32px;            
+            }
+          }
+        }
+        .bedge--wrap{
+          display: flex;
+          padding-left: 24px;
+          padding-right: 24px;
+          gap: var(--spacing-relative-2xs);
+
+          .etron{          
+            margin: 0px;
+            border-radius: 10px;
+            box-sizing: border-box;
+            display: inline-flex;
+            -webkit-box-pack: justify;
+            justify-content: space-between;
+            -webkit-box-align: center;
+            align-items: center;
+            gap: 8px;        
+            letter-spacing: 0px;
+            font-weight: 400;
+            text-decoration: none;
+            font-size: 12px;
+            line-height: 16px;
+            font-stretch: 105%;
+            padding: 4px 12px;
+            transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
+            transition-duration: 250ms;
+            transition-property: background-color, box-shadow, color;
+            min-height: 28px;
+            background-color: rgba(154, 163, 177, 0.1);
+            color: rgb(252, 252, 253);
+            box-shadow: rgba(128, 128, 128, 0) 0px 0px 0px 1px inset;
+            letter-spacing: -1px;
+          }
+        }
+      }
+    }
+  }
+}

app/assets/scss/style.scss

@@ -586,4 +586,3 @@ main{
         font-size: 16px;
     }
 }
-

app/components/block/ProductCard.vue

@@ -18,7 +18,8 @@
           <NuxtLink
             :to="buttonUrl"
             :target="buttonTarget"
-            class="default--round--btn reverse"
+            class="default--round--btn"
+            :class="{ reverse: btnreverse == 0 }"
           >
             {{ buttonText }}
           </NuxtLink>
@@ -28,6 +29,7 @@
             :to="buttonUrl2"
             :target="buttonTarget2"
             class="default--round--btn"
+            :class="{ reverse: btnreverse == 1 }"
           >
             {{ buttonText }}
           </NuxtLink>
@@ -56,7 +58,10 @@
       type: String,
       default: "",
     },
-
+    btnreverse: {
+      type: Number,
+      default: "",
+    },
     // 텍스트 관련
     title: {
       type: String,

app/components/block/SwiperBanner.vue

@@ -54,6 +54,9 @@
               <h4 v-if="getSlideSmalldesc(index)" class="desc--title">
                 {{ getSlideSmalldesc(index) }}
               </h4>
+              <h4 v-if="getSlideCautiondesc(index)" class="caution--title">
+                {{ getSlideCautiondesc(index) }}
+              </h4>
               <NuxtLink
                 v-if="getSlideMorelink(index)"
                 class="more--detail--href mt--20"
@@ -133,6 +136,10 @@
       type: String,
       default: "",
     },
+    cautiondesc: {
+      type: String,
+      default: "",
+    },
     morelink: {
       type: String,
       default: "",
@@ -205,6 +212,10 @@
     return props.slides[index]?.morelinktarget || props.morelinktarget;
   };
 
+  const getSlideCautiondesc = (index) => {
+    return props.slides[index]?.cautiondesc || props.cautiondesc;
+  };
+
   onMounted(() => {
     // Swiper 인스턴스 초기화
     swiperInstance = new Swiper(swiperContainer.value, {

app/components/block/TitleVisual.vue

@@ -12,9 +12,9 @@
         :data-animated="animation"
         :class="{ visible: isVisible }"
       >
-        <h2 class="title--main" v-html="title"></h2>
-        <span class="sub--title" v-html="subtitle"></span>
-        <span class="title--description" v-html="description"></span>
+        <h2 class="title--main" v-if="title" v-html="title"></h2>
+        <span class="sub--title" v-if="subtitle" v-html="subtitle"></span>
+        <span class="title--description" v-if="description" v-html="description"></span>
         <div v-if="$slots.default" class="title--additional">
           <slot></slot>
         </div>

app/components/block/fullSizeBannerText1.vue

@@ -13,7 +13,26 @@
         <source media="(min-width: 1440px)" :srcset="`${imagePath}?width=1920`" />
         <img data-object-fit="true" :src="imagePath" :alt="altText" loading="lazy" />
       </picture>
-      <div class="alt--text" :style="'color:' + textColor">{{ altText }}</div>
+      <div class="alt--text" v-if="altText" :style="'color:' + textColor">
+        {{ altText }}
+      </div>
+      <div class="sub--title" v-if="subTitle" :style="'color:' + textColor">
+        {{ subTitle }}
+      </div>
+      <div class="btn--wrapper" v-if="btnText">
+        <NuxtLink :to="btnLink" :target="btnTarget" class="default--round--btn reverse">
+          {{ btnText }}
+        </NuxtLink>
+
+        <NuxtLink
+          v-if="btnText2"
+          :to="btnText2"
+          :target="btnTarget2"
+          class="default--round--btn"
+        >
+          {{ btnText2 }}
+        </NuxtLink>
+      </div>
     </div>
   </section>
 </template>
@@ -46,7 +65,35 @@
     },
     altText: {
       type: String,
-      default: "Banner Image",
+      default: "",
+    },
+    subTitle: {
+      type: String,
+      default: "",
+    },
+    btnText: {
+      type: String,
+      default: "",
+    },
+    btnLink: {
+      type: String,
+      default: "",
+    },
+    btnTarget: {
+      type: String,
+      default: "",
+    },
+    btnText2: {
+      type: String,
+      default: "",
+    },
+    btnLink2: {
+      type: String,
+      default: "",
+    },
+    btnTarget2: {
+      type: String,
+      default: "",
     },
     type: {
       type: String,

app/components/block/modelList.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="etron--card">
+    <ul>
+      <li v-for="(item, index) in items" :key="index">
+        <div class="thumb">
+          <img :src="item.imagePath" :alt="item.imageAlt" />
+        </div>
+        <div class="desc--wrap">
+          <h2>{{ item.title }}</h2>
+          <h3>{{ item.description }}</h3>
+          <NuxtLink
+            v-if="item.linkUrl"
+            class="more--detail--href mt--20 ft--16"
+            :to="item.linkUrl"
+            :target="item.linkTarget || '_self'"
+          >
+            {{ item.linkText || "더 알아보기" }} <i class="ico"></i>
+          </NuxtLink>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+  // Props 정의
+  const props = defineProps({
+    items: {
+      type: Array,
+      required: true,
+      default: () => [],
+      validator: (value) => {
+        return value.every(
+          (item) => item.hasOwnProperty("title") && item.hasOwnProperty("description")
+        );
+      },
+    },
+  });
+</script>

app/pages/aboutaudi/audi_connect/apps-and-services.vue

@@ -1 +1,89 @@
-<template></template>
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="서비스 개요"
+        textLocation="top"
+        type="cover"
+      />
+
+      <Nav :actvIndex="1" />
+
+      <TitleVisual
+        title="한눈에 보는 서비스"
+        textAlign="center"
+        description="유용하고 유익한 앱과 Connect 서비스를 통해 보다 안전하고 편안하게 아우디를 운전할 수 있습니다. 원격 서비스를 통해 데이터를 송수신하며 스마트폰을 이용해 아우디와 원격으로 통신할 수 있습니다. 아래 각 항목에 대한 상세 정보를 참고하십시오.<br/>*본 사이트에서는 현재 제공 중인 전체 Audi Connect 서비스를 안내합니다. 모델에 따라 이용 가능한 서비스는 다르므로, 모델별 서비스 포트폴리오 정보는 각 딜러사에 문의해 주세요."
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <CareProgramItem class="mt--40" data-type-row="3" :items="careProgramItems" />
+
+      <TitleVisual
+        title="myAudi 앱"
+        textAlign="center"
+        description="
+        myAudi 앱을 통해 일상과 아우디를 연결해 보세요.<br/><br/>
+혁신적인 기능과 서비스로 더욱 쾌적한 드라이빙을 즐길 수 있습니다.<br/><br/>
+스마트폰을 통해 Connect 서비스에 접속하여 차량 기능을 제어하고, 연료 잔량, 주행 가능 거리, 알림 등의 정보를 실시간으로 확인하세요.집에서 편안하게 여행 계획을 세운 다음 목적지와 경로 정보를 차량에 직접 전송해 두면 번거로울 일 없이 바로 경로 안내를 받을 수 있습니다.<br/><br/>
+또한 히터 제어, 문 열림/닫음도 원격 제어가 가능합니다.<br/><br/>
+(모델과 트림에 따라 일부 서비스는 이용 불가할 수 있습니다.)
+
+ "
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <TitleVisual
+        title="myAudi로 간편하게 Connect 서비스를 시작해 보세요"
+        textAlign="center"
+        description="myAudi에 차량 및 운전자 등록을 하면 myAudi나 myAudi 스마트폰 앱을 통해 Connect 서비스를 편리하게 관리할 수 있습니다.<br/><br/>현재 Audi Connect 기능이 탑재된 아우디 차량에 한해 전시장을 통해서 등록 가능합니다."
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import CareProgramItem from "~/components/block/CareProgramItem.vue";
+  import ProductCard from "~/components/block/ProductCard.vue";
+  import Nav from "./nav.vue";
+  const bannerImagePath = ref("/img/aboutaudi/2019_1920x1080_topmain_20.avif");
+  const careProgramItems = ref([
+    {
+      imagePath: "/img/aboutaudi/962X540_L_018188.avif",
+      title: "myRoute (커넥티드 인포테인먼트)",
+      description: "온라인 교통 정보, 목적지 사전 입력, 온라인 POI",
+      linkUrl: "/aboutaudi/audi_connect/myroute",
+      linkText: "추가 정보",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/aboutaudi/962X540_1481036247979_960_540.avif",
+      title: "myService (Car2X)",
+      description: "긴급출동, 긴급통화, 아우디 서비스 지원",
+      linkUrl: "/aboutaudi/audi_connect/myservice",
+      linkText: "추가 정보",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/aboutaudi/962x540_Shutterstock-450682264-.avif",
+      title: "myCarmanager (Car2X)",
+      description: "차량 상태 리포트, 차량 찾기, 원격제어 - 도어",
+      linkUrl: "/aboutaudi/audi_connect/mycarmanager",
+      linkText: "추가 정보",
+      linkTarget: "_self",
+    },
+  ]);
+</script>

app/pages/aboutaudi/audi_connect/index.vue

@@ -1,58 +1,100 @@
 <template>
-    <main>
-        <section class="visual--section h--800">
+  <main>
+    <section class="visual--section h--800">
+      <div class="img--wrap">
+        <picture>
+          <img src="/img/aboutaudi/img--connect1.jpg" alt="" />
+        </picture>
+      </div>
+      <div class="title--wrap color--white">
+        <h2>Audi Connect</h2>
+      </div>
+    </section>
+    <div class="detail--container">
+      <section class="desc--section full--type">
+        <h3 class="big--title">Audi Connect</h3>
+        <h4 class="mt--24">
+          운전자를 차와 더 가깝게, 세상과 더 가깝게 연결하는 아우디 디지털 서비스 Audi
+          Connect. <br />myAudi와 Audi Connect 서비스와 함께라면 아우디가 더욱 편안하고
+          안전하며 스마트해집니다.
+        </h4>
+        <p class="mt--24">
+          *현재 myAudi 및 Audi Connect는 Audi Connect 기능이 탑재된 아우디 차량에 한해
+          전시장을 통해서 등록할 수 있습니다.
+        </p>
+        <h4 class="mt--60">디지털 네트워크</h4>
+        <p class="mt--24">
+          미래의 자동차는 도로를 넘어 디지털 세계를 달립니다. 그렇기에 아우디는 Connect
+          서비스를 더 많은 모델을 대상으로 꾸준히 넓혀가고 있습니다.<br />내비게이션 &
+          인포테인먼트 기능을 비롯해 원격 차량제어, 긴급통화/긴급출동 서비스 등 다양한
+          서비스와 기능을 제공하여 더욱 여유롭고, 더욱 즐겁고, 더욱 안전한 주행을 가능케
+          합니다.
+        </p>
+        <h4 class="mt--60">새로운 Audi Connect를 만나보세요</h4>
+        <p class="mt--24">
+          아우디의 최신 모델과 최첨단 인포테인먼트 시스템을 통해 Audi Connect는 새로운
+          차원으로 도약했습니다.<br />운전자와 아우디, 스마트폰, 세계가 거미줄처럼
+          연결되어 일상이 더욱 간편하고 쾌적해집니다.<br />아우디와 myAudi가 선사하는
+          디지털 생태계의 가능성과 편의성을 통해 새로운 세상을 만끽해 보세요.
+        </p>
+      </section>
+
+      <section class="more--section type2 mt--0">
+        <div class="tech--card--wrap mb--0 pl--96 pr--96">
+          <div class="tech--card">
             <div class="img--wrap">
-                <picture>
-                    <img src="/img/aboutaudi/img--connect1.jpg" alt=""/>
-                </picture>
+              <img
+                src="/img/aboutaudi/img--connect2.jpg"
+                alt="더욱 다양해진 Audi Connect의 서비스를 만나보세요"
+              />
             </div>
-            <div class="title--wrap color--white">
-                <h2>Audi Connect</h2>
+            <h3>더욱 다양해진 Audi Connect의 서비스를 만나보세요</h3>
+            <p>
+              아우디는 다양한 Connect 서비스를 제공합니다. 현재 제공 중인 매력적이고
+              다채로운 서비스를 아래에서 확인해 보세요.
+            </p>
+            <NuxtLink to="/aboutaudi/audi_connect/apps-and-services/"
+              >서비스 개요 <i class="ico"></i
+            ></NuxtLink>
+          </div>
+          <div class="tech--card">
+            <div class="img--wrap">
+              <img
+                src="/img/aboutaudi/img--connect3.jpg"
+                alt="myAudi로 간편하게 Connect 서비스를 시작해 보세요"
+              />
             </div>
-        </section>
-        <div class="detail--container">
-            <section class="desc--section full--type">
-                <h3 class="big--title">Audi Connect</h3>
-                <h4 class="mt--24">운전자를 차와 더 가깝게, 세상과 더 가깝게 연결하는 아우디 디지털 서비스 Audi Connect. <br />myAudi와 Audi Connect 서비스와 함께라면 아우디가 더욱 편안하고 안전하며 스마트해집니다.</h4>
-                <p class="mt--24">*현재 myAudi 및 Audi Connect는 Audi Connect 기능이 탑재된 아우디 차량에 한해 전시장을 통해서 등록할 수 있습니다.</p>
-                <h4 class="mt--60">디지털 네트워크</h4>
-                <p class="mt--24">미래의 자동차는 도로를 넘어 디지털 세계를 달립니다. 그렇기에 아우디는 Connect 서비스를 더 많은 모델을 대상으로 꾸준히 넓혀가고 있습니다.<br />내비게이션 & 인포테인먼트 기능을 비롯해 원격 차량제어, 긴급통화/긴급출동 서비스 등 다양한 서비스와 기능을 제공하여 더욱 여유롭고, 더욱 즐겁고, 더욱 안전한 주행을 가능케 합니다.</p>
-                <h4 class="mt--60">새로운 Audi Connect를 만나보세요</h4>
-                <p class="mt--24">아우디의 최신 모델과 최첨단 인포테인먼트 시스템을 통해 Audi Connect는 새로운 차원으로 도약했습니다.<br />운전자와 아우디, 스마트폰, 세계가 거미줄처럼 연결되어 일상이 더욱 간편하고 쾌적해집니다.<br />아우디와 myAudi가 선사하는 디지털 생태계의 가능성과 편의성을 통해 새로운 세상을 만끽해 보세요.</p>
-            </section>
-            <section class="more--section type2 mt--0">
-                <div class="tech--card--wrap mb--0">
-                    <div class="tech--card">
-                        <div class="img--wrap">
-                            <img src="/img/aboutaudi/img--connect2.jpg" alt="더욱 다양해진 Audi Connect의 서비스를 만나보세요">
-                        </div>
-                        <h3>더욱 다양해진 Audi Connect의 서비스를 만나보세요</h3>
-                        <p>아우디는 다양한 Connect 서비스를 제공합니다. 현재 제공 중인 매력적이고 다채로운 서비스를 아래에서 확인해 보세요.</p>
-                        <NuxtLink to="/aboutaudi/audi_connect/apps-and-services/">서비스 개요 <i class="ico"></i></NuxtLink>
-                    </div>
-                    <div class="tech--card">
-                        <div class="img--wrap">
-                            <img src="/img/aboutaudi/img--connect3.jpg" alt="myAudi로 간편하게 Connect 서비스를 시작해 보세요">
-                        </div>
-                        <h3>myAudi로 간편하게 Connect 서비스를 시작해 보세요</h3>
-                        <p>myAudi에 차량 및 운전자 등록을 하면 myAudi나 myAudi 스마트폰 앱을 통해 Connect 서비스를 편리하게 관리할 수 있습니다. 현재 Audi Connect 기능이 탑재된 아우디 차량에 한해 전시장을 통해서 등록 가능합니다.</p>
-                    </div>
-                </div>
-            </section>
-            <section class="desc--section full--type">
-                <h4>myAudi 포털사이트 및 app 다운로드 링크</h4>
-                <blockLinkList class="mt--20" :links="reservationLinks" />
-            </section>
-        </div> 
-    </main>
+            <h3>myAudi로 간편하게 Connect 서비스를 시작해 보세요</h3>
+            <p>
+              myAudi에 차량 및 운전자 등록을 하면 myAudi나 myAudi 스마트폰 앱을 통해
+              Connect 서비스를 편리하게 관리할 수 있습니다. 현재 Audi Connect 기능이
+              탑재된 아우디 차량에 한해 전시장을 통해서 등록 가능합니다.
+            </p>
+          </div>
+        </div>
+      </section>
+      <section class="desc--section full--type pb--1">
+        <h4>myAudi 포털사이트 및 app 다운로드 링크</h4>
+      </section>
+      <blockLinkList class="" :links="reservationLinks" />
+    </div>
+  </main>
 </template>
 <script setup>
   const reservationLinks = ref([
     {
-      text: "KATRI(자동차안전연구원)의 자동차결함신고센터(car.go.kr) 바로 가기",
-      url: "https://car.go.kr/",
+      text: "myAudi 애플리케이션 다운로드 (iOS)",
+      url: "https://apps.apple.com/kr/app/myaudi/id440464115",
+      target: "_blank",
+      showIcon: false,
+      class: "pl--0",
+    },
+    {
+      text: "myAudi 애플리케이션 다운로드 (안드로이드)",
+      url: "https://play.google.com/store/apps/details?id=de.myaudi.mobile.assistant",
       target: "_blank",
-      showIcon: true,
+      showIcon: false,
+      class: "pl--0",
     },
   ]);
-</script>
+</script>

app/pages/aboutaudi/audi_connect/mycarmanager.vue

@@ -0,0 +1,17 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>myCarmanager (Car2X)</h2>
+          <br /><br />
+          <p>
+            myCarmanager에서는 운행 데이터, 현재 주차 위치, 원격제어 등 내 아우디의 정보를
+            확인하고, 이용할 수 있습니다.<br /><br />
+            myCarmanager 서비스 개요는 여기를 참조해 주세요.
+          </p>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>

app/pages/aboutaudi/audi_connect/myroute.vue

@@ -0,0 +1,18 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>myRoute (커넥티드 인포테인먼트)</h2>
+          <br /><br />
+          <p>
+            myRoute 에서는 내비게이션, 유류가격, 목적지 주변 주차장 정보 등이
+            제공됩니다.<br /><br />
+
+            전체 myRoute 서비스에 대한 설명은 아래 내용을 참고하십시오.
+          </p>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>

app/pages/aboutaudi/audi_connect/myservice.vue

@@ -0,0 +1,19 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>myService (Car2X)</h2>
+          <br /><br />
+          <p>
+            myService에는 운전자에게 직접적으로 도움을 줄 수 있는 서비스를
+            모아두었습니다.<br /><br />
+
+            예를 들어 차량 운행 중 비상사태가 발생하거나 고장이 났을 경우 출동 서비스를
+            요청할 수 있습니다. 세부정보는 여기를 클릭하세요.
+          </p>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>

app/pages/aboutaudi/audi_connect/nav.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="text--tab--layout">
+    <ul>
+      <li class="link--force">
+        <NuxtLink :class="{ actv: actvIndex == 0 }" to="/aboutaudi/audi_connect"
+          >Audi Connect</NuxtLink
+        >
+      </li>
+      <li>
+        <NuxtLink
+          :class="{ actv: actvIndex == 1 }"
+          to="/aboutaudi/audi_connect/apps-and-services/"
+          >서비스 개요</NuxtLink
+        >
+      </li>
+    </ul>
+  </div>
+</template>
+<script setup>
+  // Props 정의
+  const props = defineProps({
+    actvIndex: {
+      type: Number,
+      default: 0,
+      validator: (value) => [0, 1, 2, 3, 4, 5].includes(value),
+    },
+  });
+</script>

app/pages/aboutaudi/auditoyou/index.vue

@@ -0,0 +1,252 @@
+<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>

app/pages/aboutaudi/futureisanattitude.vue

@@ -0,0 +1,16 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <iframe
+        width="1920"
+        height="1080"
+        src="https://www.youtube.com/embed/HsIgpqn0VTw"
+        title="Future is an attitude."
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerpolicy="strict-origin-when-cross-origin"
+        allowfullscreen
+      ></iframe>
+    </div>
+  </main>
+</template>

app/pages/aboutaudi/myaudiworld.vue

@@ -0,0 +1,180 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="About Audi"
+        subTitle="신차 정보부터 내 차 관리까지, myAudiworld 앱을 소개합니다."
+        textLocation="topright"
+        type="cover"
+        btnText="안드로이드 마켓 바로가기"
+        btnLink="/"
+        btnTarget="_blank"
+        btnText2="아이폰 앱스토어 바로가기"
+        btnLink2="/"
+        btnTarget2="_blank"
+      />
+
+      <div class="text--tab--layout">
+        <ul>
+          <li class="anch--location">
+            <NuxtLink to="#maw01">개인화 정보 제공</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#maw02">서비스 연장 패키지 온라인 구매</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#maw03">시승 신청</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#maw04">액세서리 모바일 앱 카탈로그</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#maw05">온라인 서비스 예약</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#maw06">픽업 & 딜리버리</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#maw07">정비이력 확인</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#maw08">직관적인 차량 정보</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#maw09">프로모션 정보</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#maw10">Audi e-tron</NuxtLink>
+          </li>
+        </ul>
+      </div>
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="maw01"
+        data-type="square"
+        image="/img/aboutaudi/maw01.webp"
+        title="개인화 정보 제공"
+        subtitle="정비 예약일, 다음 점검 예정일, 쿠폰 만료일, 리콜안내 등 나에게 맞춘 정보를 안내 받습니다.<br/>내 차량에 해당되는 영상 매뉴얼을 제공합니다."
+        layout="horizontal"
+        imagePosition="right"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="maw02"
+        data-type="square"
+        image="/img/aboutaudi/maw02.webp"
+        title="서비스 연장 패키지 온라인 구매"
+        subtitle="아우디 서비스 연장 패키지(Audi Extended Service Package(ESP))는 고객님의 차량을 최적의 컨디션으로 운행하시는데 도움을 드리는 서비스 프로그램입니다.<br/><br/>
+myAudiworld 앱을 통해 차량등록을 하신 고객님은 365일 24시간 언제 어디서든 서비스 연장 패키지의 가격 확인 및 구매 이용이 가능합니다."
+        buttonText="자세히 알아보기"
+        buttonUrl="/service/program/audiservicecouponpackage"
+        buttonTarget="_blank"
+        smallDescription="※ 유의사항<br/>* 본 서비스는 myAudiworld 회원가입 및 차량등록 진행하신 고객님들에 한해서 myAudiworld 앱을 통해 구매 가능합니다.<br/>* 온라인 환불요청 서비스는 myAudiworld 앱을 통해 구매하신 패키지만 가능합니다."
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="maw03"
+        data-type="square"
+        image="/img/aboutaudi/maw03.webp"
+        title="시승 신청"
+        subtitle="시승 신청으로아우디 신차와 관심 모델을 체험해보실 수 있습니다."
+        layout="horizontal"
+        imagePosition="right"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="maw04"
+        data-type="square"
+        image="/img/aboutaudi/maw04.webp"
+        title="액세서리 모바일 앱 카탈로그"
+        subtitle="모바일 앱 카탈로그로 아우디 모델 별 현재 제품의 포트폴리오로 차량의 내부 및 외부에 적합한 아우디 순정 액세서리를 선택하여 보실 수 있습니다."
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="maw05"
+        data-type="square"
+        image="/img/aboutaudi/maw05.webp"
+        title="온라인 서비스 예약"
+        subtitle="실시간 예약 가능한 일정을 확인, 언제 어디서든 손 쉽게 서비스 예약이 가능합니다.<br/><br/>
+입력하는 점검 요청 내용에 따라 예상되는 정비 소요 시간 정보를 제공합니다."
+        layout="horizontal"
+        imagePosition="right"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="maw06"
+        data-type="square"
+        image="/img/aboutaudi/maw06.webp"
+        title="픽업 & 딜러버리"
+        subtitle="지정한 장소에서 차량을 맡기고 정비 완료 후 다시 원하는 장소로 안전하게 전달해드리는 프리미엄 서비스를 제공합니다."
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="maw07"
+        data-type="square"
+        image="/img/aboutaudi/maw07.webp"
+        title="정비이력 확인"
+        subtitle="정비이력 확인"
+        layout="horizontal"
+        imagePosition="right"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="maw08"
+        data-type="square"
+        image="/img/aboutaudi/maw08.webp"
+        title="직관적인 차량 정보"
+        subtitle="한눈에 보이는 차량 비교부터 카탈로그 다운로드, 차량 보유 전시장까지 아우디 모델에 대한 모든 정보를 만나보세요.<br/><br/>
+금융계산기로 금융 상품 안내와 구매를 원하시는 차량의 납입금을 확인해보세요."
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="maw09"
+        data-type="square"
+        image="/img/aboutaudi/maw09.webp"
+        title="내게 꼭 필요한 프로모션 정보만"
+        subtitle="‘나의 서비스센터’ 에서 진행되는 프로모션에 대한 app push 메시지를 제공합니다."
+        layout="horizontal"
+        imagePosition="right"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="maw10"
+        data-type="square"
+        image="/img/aboutaudi/maw10.webp"
+        title="Audi e-tron"
+        subtitle="대영채비와 연동하여 나의 충전포인트와 사용내역, 예약상태, 충전 진행상황까지 편리하게 확인할 수 있습니다.<br/><br/>
+위치 기반 가까운 충전소 안내부터 예약, 포인트사용을 카드 소지 없이 myAudiworld 앱으로 사용 가능합니다."
+        layout="horizontal"
+        imagePosition="left"
+      />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import ProductCard from "~/components/block/ProductCard.vue";
+
+  const bannerImagePath = ref("/img/aboutaudi/myAudiworld_1920x1080.avif");
+</script>

app/pages/etronms/index.vue

@@ -0,0 +1,531 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="About e-tron 모빌리티 서비스"
+        subTitle="e-tron 차량의 운행이 프리미엄 한 모빌리티의 경험이 되도록, 아우디는 e-tron 고객께 만 특별한 서비스를 제공합니다. "
+        textLocation="top"
+        type="cover"
+        :height="800"
+        btnText="e-tron 케어 프로그램"
+        btnLink="/"
+        btnTarget="_blank"
+      />
+
+      <div class="text--tab--layout">
+        <ul>
+          <li class="anch--location">
+            <NuxtLink to="#etronms01">e-tron 소개</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#etronms02">e-tron 충전망</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#etronms03">인증 자격 인력</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#etronms04">e-모빌리티 서포트</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#etronms05">e-카 서비스 플러스</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#etronms06">보증 프로그램</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#etronms07">서비스 연장 패키지</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#etronms08">e-tron 라인업</NuxtLink>
+          </li>
+        </ul>
+      </div>
+
+      <TitleVisual
+        title="Audi e-tron 모빌리티 서비스"
+        description="전기차를 운행하기 위해서는 많은 사항들을 고려해야 합니다. 충전에서부터, 수리, 보증까지. 아우디는 고객분들께서 편리하게 e-tron을 운행하실 수 있도록 프리미엄 모빌리티 프로그램을 제공합니다. 아우디만의 특별한 e-tron 모빌리티 서비스를 확인해 보세요."
+        textAlign="center"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <div class="etronms--thumb--wrap mt--20">
+        <div class="thumb">
+          <img src="/img/etronms/audi_e-ex.jpg" alt="" />
+        </div>
+        <div class="small--text mt--20">
+          * 각 서비스의 자세한 내용은 하단에서 확인 부탁드립니다.
+        </div>
+      </div>
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="etronms01"
+        data-type="square"
+        image="/img/aboutaudi/maw01.webp"
+        title="Audi e-tron"
+        subtitle="
+        e-tron은 아우디의 전기차 브랜드입니다. 아우디는 항상 혁신적인 제품의 개발과 소개를 위해 노력해 왔습니다. 배출 가스를 줄이기 위한 노력의 일환으로 시작한 tron 시리즈는 e-tron (전기) 외에도 g-tron (천연가스), h-tron (수소) 등 다른 연료 기반의 개발/양산 모델도 포함하고 있습니다.<br/><br/><br/>
+e-tron 시리즈는 르망 24시 레이스 경기에서도 수년간 우승을 차지하였고, 순수 전기차들의 레이스인 FORMULA E에서도 훌륭한 성적을 거두었습니다. 뿐만 아니라 세계에서 가장 혹독한 국제 경주 다카르 랠리에 참가하여 혁신적인 전기차 기술력을 선보인 바 있습니다. e-tron을 통해서 아우디가 만드는 전기차를 경험해 보시기 바랍니다."
+        layout="horizontal"
+        imagePosition="right"
+      />
+
+      <TitleVisual
+        title="아우디 고객 전용 초급속 충전망"
+        description="아우디 e-tron 고객분들이 보다 빠르고 편리하게 충전을 하실 수 있도록, 아우디가 아우디 고객 전용 초급속 충전망을 설치/운영합니다.<br/><br/>
+기존 공공 충전소와 차별화된 빠른 충전 속도를 제공하며, 충전 시간 동안에는 고객분들이 전시장이나 대기실에서 편하게 대기하실 수 있습니다.
+
+"
+        textAlign="left"
+        theme="dark"
+        type="middle"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <SwiperBanner
+        id="etronms02"
+        :slides="bannerSlides"
+        :autoplay="false"
+        :loop="false"
+        fit="cover"
+        type="horizontal"
+      />
+
+      <TitleVisual
+        id="etronms03"
+        title="High Voltage 인증 자격 인력"
+        description="고전압 분야에는 EIP(Electrically Instructed Person), HVT(High-Voltage Technician), HVE(High-Voltage Expert) 3가지 자격이 있습니다. 아우디에서 인증 자격을 보유한 테크니션을 만나볼 수 있습니다."
+        textAlign="left"
+        theme="dark"
+        type="middle"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="maw02"
+        data-type="square"
+        image="/img/etronms/730x730_24.webp"
+        title="인증자격 인력"
+        subtitle="특별한 차량은 전문적인 인력이 관리해야 합니다. 아우디는 특별한 인증자격을 보유한 전문인력을 통해, 높은 퀄리티의 차량 점검 및 수리 서비스를 제공하고 있습니다.<br/><br/>
+*고전압 분야에는 EIP(Electrically Instructed Person), HVT(High-Voltage Technician), HVE(High-Voltage Expert) 3가지 자격이 있습니다. 아우디에서 전문적인 인증 자격을 보유한 테크니션을 만나보세요."
+        layout="horizontal"
+        imagePosition="right"
+      />
+
+      <TitleVisual
+        title="e-모빌리티 서포트"
+        description="차량이 문제가 생겼을 때에도 고객님이 안심하실 수 있도록 편의 모빌리티 서비스를 제공합니다. 24시간 긴급 출동 서비스, 안전귀가 지원 서비스, 대차 서비스 등 아우디만의 서비스를 확인해 보세요."
+        textAlign="left"
+        theme="dark"
+        type="middle"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="etronms04"
+        data-type="square"
+        image="/img/etronms/as_2023_5861_with_display.webp"
+        title="24시간 긴급 출동 서비스"
+        subtitle="
+        • 견인 서비스</br>
+- 현장에서 직접 조치가 불가능한 경우 가장 가까운 아우디 공식 서비스센터로 견인</br></br>
+• 스페어 타이어 교체 서비스</br>
+- 스페어타이어가 고객님 차량에 비치되어 있는 경우</br>
+- 수리 키트 비치 차량의 경우 임시 조치 서비스 진행</br></br>
+• 고전압 배터리 방전 견인 서비스</br>
+- 연 2회 제공</br>
+- 가까운 아우디 공식 충전소 혹은 공용 충전소로 견인</br>
+- 충전 비용은 고객 부담</br></br>
+• Audi Connect가 적용된 차량은 긴급 출동 버튼을 눌러 바로 아우디 고객지원센터로 연결 가능"
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="maw04"
+        data-type="square"
+        image="/img/etronms/730x730_taxi.webp"
+        title="안전귀가 지원 서비스"
+        subtitle="• 아우디 고객지원센터를 통해 안내받고 가장 가까운 아우디 공식 서비스센터로 견인된 경우<br/><br/>
+• 견인 입고 당일 및 차량 출고일 양일간 발생하는 택시 요금 합계 최대 10만원<br/><br/>
+• 비용 청구 서류 : 이용 하신 택시 영수증 원본(승하차 시간 표시된 택시 영수증)<br/><br/>
+• 상기의 청구 서류가 준비 되지 않는 경우 비용이 지원되지 않습니다."
+        layout="horizontal"
+        imagePosition="right"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="maw05"
+        data-type="square"
+        image="/img/etronms/730x730_rs.webp"
+        title="대차 서비스"
+        subtitle="• 보증수리로써 수리 완료 소요 시간이 24시간을 초과할 경우 (단, 부품 대기 소요시간은 제외)<br/>
+• 서비스 센터 상황에 따라 대차 제공이 어려울 수도 있음"
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <TitleVisual
+        title=""
+        description="※ 상시 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디 고객지원센터 및 아우디 공식 서비스센터로 문의 바랍니다."
+        textAlign="left"
+        theme="dark"
+        type="middle"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <TitleVisual
+        title="e-카 서비스 플러스"
+        description="e-카 서비스 플러스 프로그램은 아우디 공식 서비스센터에서 제공되는 차량 유지관리 서비스입니다.<br/><br/>
+아우디 공식 서비스센터를 통해 제공되는 전문적이고 체계적인 유지관리는 추가 비용 부담 없이 고객님 차량의 가치를 더욱 높여줄 것 입니다."
+        textAlign="left"
+        theme="dark"
+        type="middle"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <div class="etronms--thumb--wrap mt--20" id="etronms05">
+        <div class="thumb">
+          <img src="/img/etronms/ecarserviceplus.avif" alt="" />
+        </div>
+        <div class="caution--text mt--120">
+          • 본 서비스의 유효기간은 차량 등록일로부터 5년입니다. 유효기간 내 미사용 항목은
+          현금이나 물품으로 제공되지 않습니다.<br /><br />
+          • 2025년형으로 출시되는 모델 중 Q4 e-tron 모델은 e-카 서비스 플러스 기간이 1년만
+          적용됩니다. (A6, Q6, Q8 e-tron 모델은 3년 적용)<br /><br />
+          • 상기 마일리지(주행거리)는 아우디 권장 정비주기입니다.<br /><br />
+          • 구동축 냉각수 카트리지 교환* 서비스는 차종에 따라 다를 수 있습니다.<br /><br />
+          • 픽업 딜리버리* 서비스는 2024년식 차량부터 적용됩니다.<br /><br />
+          ※ 상기 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디
+          고객지원센터 및 아우디 공식 서비스센터로 문의 바랍니다.
+        </div>
+      </div>
+
+      <TitleVisual
+        id="etronms06"
+        title="e-tron Warranty 보증 프로그램"
+        description="더 오래, 더 안전한 드라이빙을 위한 아우디 5년 보증 프로그램으로 아우디와 함께 어디든 안심하고 떠나세요."
+        textAlign="left"
+        theme="dark"
+        type="middle"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        id="maw06"
+        data-type="square"
+        image="/img/etronms/3_730X730.webp"
+        title="Audi Warranty 아우디 보증 프로그램"
+        subtitle="
+        > 대상차량 : 아우디코리아에서 공식 딜러사를 통해 판매하는 모든 21년식 모델부터 적용<br/><br/>
+> 보증 기간 : 5년 보증 또는 최종 주행거리 150,000km 까지 (선도래조건)<br/><br/>
+> 대상 부품 : 제조사 보증과 동일<br/><br/>
+> 차량당 총 보상한도(누적) : 신차 권장소비자가격(VAT포함)<br/><br/>
+> 고전압 배터리 보증 기간 : 최초 등록일로부터 8년 혹은 주행거리 160,000km 까지(선도래조건)<br/><br/>
+> 보증기간 내 기술적 결함에 의한 고전압 배터리 고장 수리는 Audi e-tron 공식 서비스 센터에서 무상 제공<br/><br/>
+> 보증기간 내 고전압 배터리의 기술적 결함으로 인해 차량의 주행이 불가할 경우 가까운 Audi e-tron 공식 딜러 서비스 센터로 견인하는 비용 지원"
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <TitleVisual
+        title=""
+        description="*Audi e-tron의 고전압 배터리는 제작사에서 정한 정기점검 주기에 따라 점검, 확인되어야 하며, 사고 또는 하기 사유로 인해 배터리 결함이 발생한 경우 보증은 불가합니다.<br/><br/>
+- Audi 에서 공식적으로 인증 받지 않은 파트를 사용하거나 개조된 경우<br/><br/>
+- 고전압 배터리가 Audi e-tron 으로부터 임의로 제고되었을 경우<br/><br/>
+- 사용자 설명서 및 제공된 e-tron 고객 안내 책자에 따른 고전압 배터리의 충전과 관리 지침을 준수하지 않아 발생한 고장"
+        textAlign="left"
+        theme="dark"
+        type="middle"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <TitleVisual
+        id="etronms07"
+        title="e-tron 아우디 서비스 연장 패키지"
+        description="아우디 서비스 연장 패키지는 고객님의 차량을 최적의 컨디션으로 운행하시는데 도움을 드리는 차량 유지관리 프로그램입니다.<br/><br/>
+본 프로그램을 통해 고객님의 아우디 차량 유지관리에 필요한 비용과 시간을 줄일 수 있습니다.<br/><br/>
+* 추가 구매 필요한 패키지입니다."
+        textAlign="left"
+        theme="dark"
+        type="middle"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <TitleVisual
+        title="아우디 서비스 연장 패키지 구성"
+        description=""
+        textAlign="left"
+        theme="dark"
+        type="middle"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <TitleVisual
+        title="e-tron 패키지"
+        description=""
+        textAlign="left"
+        theme="dark"
+        type="middle"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <div class="etronms--thumb--wrap mt--20">
+        <div class="thumb">
+          <img src="/img/etronms/etron_pk.avif" alt="" />
+        </div>
+        <div class="small--text mt--20">
+          *구동축 냉각수 카트리지 교환 서비스는 차종에 따라 다를 수 있습니다.
+        </div>
+      </div>
+
+      <TitleVisual
+        title="편리하고 저렴한 차량 유지관리"
+        description="• 아우디 서비스 연장 패키지는 기존 유지관리 비용 대비 더 합리적인 가격으로 이용 가능합니다.<br/><br/>
+• 구매일로부터 5년간 사용이 가능해 차량 운행 거리가 많지 않으신 고객께서도 여유 있게 사용하실 수 있습니다.<br/><br/>
+• 아우디 서비스 연장 패키지는 구입처와 상관없이 모든 아우디 공식 서비스센터에서 사용이 가능합니다.<br/><br/>
+*자사 공식 서비스센터의 개별 유지관리 비용 기준입니다."
+        textAlign="left"
+        theme="dark"
+        type="middle"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <TitleVisual
+        title="아우디 전기차"
+        description="아우디 최초의 순수 전기차 아우디 e-tron은 아우디 브랜드 역사의 완전한 새로운 장을 열었습니다.<br/><br/>
+아우디 e-tron은 순수 전기 모터로 구동되며 급속 충전 편의성, 주행 중 첨단 에너지 회수 기능을 보유하고 있습니다. 지속적으로 확장되는 아우디 e-tron 제품군은 전력으로 구동되며, 정교한 차량 디자인과 역동적인 성능 및 핸들링을 제공합니다."
+        textAlign="left"
+        theme="dark"
+        type="middle"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <modelList id="etronms08" :items="etronLineup" />
+
+      <modelList class="mt--60" :items="etronLineup2" />
+
+      <section class="caution--text--wrapper">
+        <div>
+          <p>
+            동절기 등 외기온도 하락시 배터리 성능 저하로 실 주행거리가 감소될 수 있습니다.
+          </p>
+
+          <p>*제원 및 사양은 제품의 성능 향상을 위하여 예고 없이 변경될 수 있습니다.</p>
+
+          <p>
+            *위 전비는 표준모드에 의한 연비로서 도로상태, 운전방법, 차량적재, 정비상태 및
+            외기온도에 따라 실주행 연비와 차이가 있습니다.
+          </p>
+
+          <p>*상기 이미지는 국내 판매 사양과 다를 수 있습니다.</p>
+          <br /><br /><br />
+
+          <p>
+            *해당 사양은 실제 출시 이후 변동될 가능성이 있으며 국내 사양과 상이할 수
+            있습니다.
+          </p>
+
+          <p>
+            *본 차량에 대한 일반적인 사항은 구매 시 제공되는 사용설명서와 별도 책자를 참조
+            하시기 바랍니다.
+          </p>
+
+          <p>
+            *구입한 차량의 실제 사양은 표시된 사양과 다를 수 있습니다. 일부 모델은 공급이
+            불가할 수 있습니다.
+          </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 modelList from "~/components/block/modelList.vue";
+
+  const bannerImagePath = ref("/img/aboutaudi/myAudiworld_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>

app/pages/models/coupe.vue

@@ -0,0 +1,80 @@
+<template>
+  <main>
+    <div class="detail--container--full pb--120">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="아우디 쿠페"
+        textLocation="bottom"
+        type="cover"
+        :height="800"
+      />
+
+      <TitleVisual
+        title="아우디 쿠페"
+        description="아우디 쿠페 모델은 뛰어난 성능은 물론 독특한 2도어의 스포티한 스타일을 보여줍니다. 디자인 아이콘 아우디 TT 모델부터 시대를 초월한 아우디 A5 모델의 디자인까지 아우디 쿠페의 다양한 모델은 브랜드의 첨단 기술과 엔지니어링을 현대적으로 구현했습니다."
+        textAlign="center"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 링크 리스트 컴포넌트 -->
+      <LinkList class="mt--20" :links="reservationLinks" />
+
+      <modelList id="" :items="etronLineup" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import LinkList from "~/components/block/LinkList.vue";
+  import modelList from "~/components/block/modelList.vue";
+
+  const bannerImagePath = ref("/img/models/1920x1080_audi_coupe.avif");
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "재고 확인하기",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "월 납입금 계산",
+      url: "https://www.audikoreaevent.co.kr/lms/calculator.do",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "상담신청",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "전시장/AS센터",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+  ]);
+  const etronLineup = ref([
+    {
+      imagePath: "/img/models/coupe1.avif",
+      imageAlt: "A5 Coupé",
+      title: "A5 Coupé",
+      description:
+        "강력한 퍼포먼스로 완성된 우아한 스타일. 아우디 A5 Coupé 전방, 측면, 후방에 적용된 새로운 디자인 요소들로 아우디 A5 쿠페는 우아함을 과시합니다. 매력적인 겉모습 속에는 첨단 기술과 강력한 엔진이 숨겨져 있습니다.",
+      linkUrl: "/",
+      linkText: "아우디 A5 Coupé 더 알아보기",
+      linkTarget: "_self",
+    },
+  ]);
+</script>

app/pages/models/etron.vue

@@ -0,0 +1,175 @@
+<template>
+  <main>
+    <div class="detail--container--full pb--120">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="아우디 전기차"
+        textLocation="bottom"
+        type="cover"
+        :height="800"
+      />
+
+      <TitleVisual
+        title="아우디 전기차"
+        description="아우디 최초의 순수 전기차 아우디 e-tron은 아우디 브랜드 역사의 완전한 새로운 장을 열었습니다. 아우디 e-tron은 순수 전기 모터로 구동되며 급속 충전 편의성, 주행 중 첨단 에너지 회수 기능을 보유하고 있습니다. 지속적으로 확장되는 아우디 e-tron 제품군은 전력으로 구동되며, 정교한 차량 디자인과 역동적인 성능 및 핸들링을 제공합니다."
+        textAlign="center"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 링크 리스트 컴포넌트 -->
+      <LinkList class="mt--20" :links="reservationLinks" />
+
+      <modelList id="" :items="etronLineup" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import LinkList from "~/components/block/LinkList.vue";
+  import modelList from "~/components/block/modelList.vue";
+
+  const bannerImagePath = ref("/img/models/SQ6_SB_2023_6443.avif");
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "재고 확인하기",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "월 납입금 계산",
+      url: "https://www.audikoreaevent.co.kr/lms/calculator.do",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "상담신청",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "전시장/AS센터",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+  ]);
+  const etronLineup = ref([
+    {
+      imagePath: "/img/models/etron1.avif",
+      imageAlt: "S e-tron GT",
+      title: "S e-tron GT",
+      description:
+        "가장 강력한 아우디 S 모델로, 그란 투리스모 순수 전기차의 힘과 아름다움에 긴 주행 가능 거리, 높은 충전 용량, 그리고 짜릿한 주행 역학을 결합한 차량입니다.",
+      linkUrl: "/",
+      linkText: "아우디 S e-tron GT 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/etron2.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/models/etron3.avif",
+      imageAlt: "A6 e-tron",
+      title: "A6 e-tron",
+      description: "혁신의 차이, 전기적 프리미엄의 완성. 아우디 A6 e-tron.",
+      linkUrl: "/",
+      linkText: "아우디 A6 e-tron 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/etron4.avif",
+      imageAlt: "S6 e-tron",
+      title: "S6 e-tron",
+      description: "혁신의 차이, 전기적 프리미엄의 완성. 아우디 S6 e-tron.",
+      linkUrl: "/",
+      linkText: "아우디 S6 e-tron 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/etron5.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/models/etron6.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/models/etron7.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/models/etron8.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/models/etron9.avif",
+      imageAlt: "Q8 e-tron",
+      title: "Q8 e-tron",
+      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 Q8 e-tron.",
+      linkUrl: "/",
+      linkText: "아우디 Q8 e-tron 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/etron10.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/models/etron11.avif",
+      imageAlt: "SQ8 Sportback e-tron",
+      title: "SQ8 Sportback e-tron",
+      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 SQ8 스포트백 e-tron.",
+      linkUrl: "/",
+      linkText: "아우디 SQ8 Sportback e-tron 더 알아보기",
+      linkTarget: "_self",
+    },
+  ]);
+</script>

app/pages/models/index.vue

@@ -0,0 +1,199 @@
+<template>
+  <main class="models--page">
+    <div class="models--container">
+      <!-- 헤더 -->
+      <div class="models--header">
+        <h1 class="models--title">Audi Models</h1>
+      </div>
+
+      <!-- 필터 -->
+      <div class="models--filter--section">
+        <div class="filter--group">
+          <!-- 연료 타입 필터 -->
+          <div class="filter--dropdown">
+            <button
+              v-for="fuel in filters.fuelType"
+              :key="fuel.id"
+              :class="['filter--btn', { active: activeFuelType === fuel.id }]"
+              @click="activeFuelType = fuel.id"
+            >
+              {{ fuel.name }}
+            </button>
+          </div>
+
+          <!-- 그룹 네임 필터 -->
+          <div class="filter--dropdown">
+            <button
+              v-for="group in filters.groupName"
+              :key="group.id"
+              :class="['filter--btn', { active: activeGroupName === group.id }]"
+              @click="activeGroupName = group.id"
+            >
+              {{ group.name }}
+            </button>
+          </div>
+
+          <!-- 바디 타입 필터 -->
+          <div class="filter--dropdown">
+            <button
+              v-for="body in filters.bodyType"
+              :key="body.id"
+              :class="['filter--btn', { active: activeBodyType === body.id }]"
+              @click="activeBodyType = body.id"
+            >
+              {{ body.name }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 차량 그리드 -->
+      <div class="models--list--wrap">
+        <div class="all--models">전체 모델({{ filteredModels.length }})</div>
+        <div class="models--list">
+          <div v-for="model in filteredModels" :key="model.id" class="model--item">
+            <!-- 이미지 -->
+            <h2 class="model--name">
+              {{ model.groupName }}
+              <div class="etron">
+                <svg
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                  width="16px"
+                  height="16px"
+                  class="sc-AxhUy kMyssS sc-fzoant LAaNs"
+                >
+                  <use href="/img/charging-xs.svg#main"></use>
+                </svg>
+              </div>
+            </h2>
+            <div class="model--image--wrap">
+              <NuxtLink :to="model.link">
+                <img :src="model.image" :alt="model.name" />
+              </NuxtLink>
+            </div>
+
+            <!-- 정보 -->
+            <div class="model--info--wrap">
+              {{ getGroupModelCount(model.groupName) }}개의 모델
+              <i class="ico"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 모든 차량 리스트 -->
+      <div class="models--list--car">
+        <div class="all--car--title">모든 차량 ({{ modelsData.models.length }})</div>
+        <div class="car--list">
+          <div v-for="car in modelsData.models" :key="car.id" class="car--item">
+            <div class="bedge--wrap">
+              <div class="etron">
+                <svg
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                  width="16px"
+                  height="16px"
+                  class="sc-AxhUy kMyssS sc-fzoant LAaNs"
+                >
+                  <use href="/img/charging-xs.svg#main"></use>
+                </svg>
+                Electrified
+              </div>
+            </div>
+            <div class="car--image">
+              <NuxtLink :to="car.link">
+                <img :src="car.image" :alt="car.name" />
+              </NuxtLink>
+            </div>
+            <div class="car--info">
+              <h3 class="car--name">{{ car.fullName }}</h3>
+              <NuxtLink :to="car.link" class="car--link">자세히 보기</NuxtLink>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  const modelsData = ref({
+    models: [],
+    filters: { fuelType: [], bodyType: [], groupName: [] },
+  });
+  const activeFuelType = ref("all");
+  const activeBodyType = ref("all");
+  const activeGroupName = ref("all");
+
+  // 필터 옵션
+  const filters = computed(() => modelsData.value.filters);
+
+  // groupName별 모델 개수를 계산하는 함수
+  const getGroupModelCount = (groupName) => {
+    return modelsData.value.models.filter((model) => model.groupName === groupName)
+      .length;
+  };
+
+  // 연료 타입 이름 가져오기
+  const getFuelTypeName = (fuelType) => {
+    const fuelTypes = {
+      etron: "전기차",
+      hybrid: "하이브리드",
+      "gas-diesel": "가솔린/디젤",
+    };
+    return fuelTypes[fuelType] || fuelType;
+  };
+
+  // 필터링된 모델 계산
+  const filteredModels = computed(() => {
+    let filtered = modelsData.value.models;
+
+    // 연료 타입 필터
+    if (activeFuelType.value !== "all") {
+      filtered = filtered.filter((model) => model.fuelType === activeFuelType.value);
+    }
+
+    // 바디 타입 필터
+    if (activeBodyType.value !== "all") {
+      filtered = filtered.filter((model) =>
+        model.bodyType.includes(activeBodyType.value)
+      );
+    }
+
+    // 그룹 네임 필터
+    if (activeGroupName.value !== "all") {
+      filtered = filtered.filter((model) => model.groupName === activeGroupName.value);
+    }
+
+    // groupName별로 그룹화하고 각 그룹의 첫 번째 모델만 추출
+    const groupedByName = {};
+
+    filtered.forEach((model) => {
+      // groupName을 키로 사용
+      const groupName = model.groupName;
+
+      // 해당 groupName 그룹이 없으면 생성하고 첫 번째 모델 저장
+      if (!groupedByName[groupName]) {
+        groupedByName[groupName] = model;
+      }
+    });
+
+    // 그룹화된 객체에서 값(첫 번째 모델들)만 배열로 반환
+    return Object.values(groupedByName);
+  });
+
+  onMounted(async () => {
+    try {
+      const response = await fetch("/models.json");
+      const data = await response.json();
+      modelsData.value = data;
+
+      console.log("Models data loaded:", data);
+    } catch (error) {
+      console.error("Failed to load models data:", error);
+    }
+  });
+</script>

app/pages/models/rsrange.vue

@@ -0,0 +1,119 @@
+<template>
+  <main>
+    <div class="detail--container--full pb--120">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="아우디 RS 모델"
+        textLocation="bottom"
+        type="cover"
+        :height="800"
+      />
+
+      <TitleVisual
+        title="RS 모델"
+        description="아우디 RS 브랜드는 각각 Racing을 의미하는 독일어 Renn Sport의 약자로, 레이싱 DNA를 간직한 초고성능 모델 라인입니다."
+        textAlign="center"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 링크 리스트 컴포넌트 -->
+      <LinkList class="mt--20" :links="reservationLinks" />
+
+      <modelList id="" :items="etronLineup" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import LinkList from "~/components/block/LinkList.vue";
+  import modelList from "~/components/block/modelList.vue";
+
+  const bannerImagePath = ref("/img/models/R_RS_1920X1080.jpg");
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "재고 확인하기",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "월 납입금 계산",
+      url: "https://www.audikoreaevent.co.kr/lms/calculator.do",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "상담신청",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "전시장/AS센터",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+  ]);
+  const etronLineup = ref([
+    {
+      imagePath: "/img/models/rsrange1.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/models/rsrange2.avif",
+      imageAlt: "RS 3",
+      title: "RS 3",
+      description:
+        "아우디 RS 3는 일상에 전율을 선사합니다. 뛰어난 주행 역동성과 생동감 넘치는 디자인이 심장을 더 빨리 뛰게 합니다.",
+      linkUrl: "/",
+      linkText: "아우디 RS 3 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/rsrange3.avif",
+      imageAlt: "RS 6 Avant performance",
+      title: "RS 6 Avant performance",
+      description:
+        "Performance is an attitude. 아우디 RS 6 비즈니스 회의, 가족 모임 등 어느 경우든 아우디 RS 6 아반트는 여러분과 함께합니다. 이 고성능 스포츠카는 타협하지 않는 퍼포먼스를 바탕으로 일상에서 다양한 용도로 사용할 수 있습니다.",
+      linkUrl: "/",
+      linkText: "아우디 RS 6 Avant performance 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/rsrange4.avif",
+      imageAlt: "RS 7 performance",
+      title: "RS 7 performance",
+      description:
+        "혁신적인 기술을 직관적이고 역동적인 설계와 결합했습니다. 더 이상 타협이 필요 없는 매력적인 드라이브를 즐겨보세요. 성능은 곧 관점에서 출발합니다.",
+      linkUrl: "/",
+      linkText: "아우디 RS 7 performance 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/rsrange5.avif",
+      imageAlt: "RS Q8 performance",
+      title: "RS Q8 performance",
+      description: "시선은 사로잡고, 심장을 뒤흔든다",
+      linkUrl: "/",
+      linkText: "아우디 RS Q8 performance 더 알아보기",
+      linkTarget: "_self",
+    },
+  ]);
+</script>

app/pages/models/sedan.vue

@@ -0,0 +1,140 @@
+<template>
+  <main>
+    <div class="detail--container--full pb--120">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="아우디 세단"
+        textLocation="bottom"
+        type="cover"
+        :height="800"
+      />
+
+      <TitleVisual
+        title="아우디 세단"
+        description="아우디 세단의 스타일은 고급스럽고 스포티하며 우아합니다. 크기와 성능은 모델마다 다를 수 있지만, 모든 아우디 세단은 지난 오랜 시간 동안 프리미엄 세단의 벤치마킹 대상으로, 세련미와 독특한 스타일을 가지고 있습니다."
+        textAlign="center"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 링크 리스트 컴포넌트 -->
+      <LinkList class="mt--20" :links="reservationLinks" />
+
+      <modelList id="" :items="etronLineup" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import LinkList from "~/components/block/LinkList.vue";
+  import modelList from "~/components/block/modelList.vue";
+
+  const bannerImagePath = ref("/img/models/my24_a6_gallery_1920x1080_1.jpg");
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "재고 확인하기",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "월 납입금 계산",
+      url: "https://www.audikoreaevent.co.kr/lms/calculator.do",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "상담신청",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "전시장/AS센터",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+  ]);
+  const etronLineup = ref([
+    {
+      imagePath: "/img/models/Sedan_A3_1920x1080_new.avif",
+      imageAlt: "A3",
+      title: "A3",
+      description:
+        "드라마틱한 드라이빙 퍼포먼스. 아우디 A3 아우디 A3는 세단의 클래식함과 쿠페의 날렵한 이미지가 조화를 이루며 우아하면서도 스포티한 스타일을 보여줍니다. 특히 유려한 루프 라인은 아우디 A3 세단의 역동성을 강렬하게 보여줍니다.",
+      linkUrl: "/",
+      linkText: "아우디 A3 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/Sedan_A5_1920x1080_new.avif",
+      imageAlt: "A5",
+      title: "A5",
+      description:
+        "오랜 시간 동안 사랑받고 있는 Audi의 베스트셀러 모델, Audi A4 시리즈가 10세대를 맞이하며 Audi A5라는 이름으로 새롭게 태어났습니다. 새로운 Audi A5는 스포티하면서 우아한 실루엣, 완전히 디지털화된 실내, 높은 성능과 효율을 겸비한 구동 시스템을 갖추고 있습니다.",
+      linkUrl: "/",
+      linkText: "아우디 A5 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/S_S5_1920x1080_new.avif",
+      imageAlt: "S5",
+      title: "S5",
+      description:
+        "오랜 시간 동안 사랑받고 있는 Audi의 베스트셀러 모델, Audi A4 시리즈가 10세대를 맞이하며 Audi A5라는 이름으로 새롭게 태어났습니다. 신형 Audi S5는 감성을 자극하는 디자인에 근육질 형태의 차체 비율, S 전용 요소, 고성능 TFSI 엔진이 조화롭게 결합되어 있습니다.",
+      linkUrl: "/",
+      linkText: "아우디 S5 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/Sedan_A6_1920x1080_new.avif",
+      imageAlt: "A6",
+      title: "A6",
+      description:
+        "혁신적인 이그제큐티브 클래스 세단의 시작 아우디 A6. 디자인과 효율성, 그리고 스포티함과 스타일의 만남. 혁신과 정교함이 함께할 때, 우아함은 모든 요소에서 그 면모를 드러냅니다. 형식과 기능이 하나가 될 때, '진보'는 비로소 아우디가 추구하는 모든 가치위에 존재합니다.",
+      linkUrl: "/",
+      linkText: "아우디 A6 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/Sedan_A8_1920x1080_new.avif",
+      imageAlt: "A8",
+      title: "A8",
+      description:
+        "Progress를 통해 새로운 세상을 만나다 아우디 A8 우아함과 역동성을 한 차원 더 끌어올린 디자인, 다양한 운전자 보조 시스템,새로운 차원의 직관적인 조작 컨셉, 그리고 더 넓어진 공간까지, Space for progress.",
+      linkUrl: "/",
+      linkText: "아우디 A8 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/Sedan_A8L_1920x1080_new.avif",
+      imageAlt: "A8 L",
+      title: "A8 L",
+      description:
+        "Progress를 통해 새로운 세상을 만나다 아우디 A8 L 우아함과 역동성을 한 차원 더 끌어올린 디자인, 다양한 운전자 보조 시스템,새로운 차원의 직관적인 조작 컨셉, 그리고 더 넓어진 공간까지, Space for progress.",
+      linkUrl: "/",
+      linkText: "아우디 A8 L 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/S_S8L_1920x1080_new.avif",
+      imageAlt: "S8 L",
+      title: "S8 L",
+      description:
+        "럭셔리 플래그십 스포츠 세단. 아우디 S8 L 아우디 S8의 목표는 단 한가지 입니다. 목적지에 빠르고 편안하게 도착하는 것입니다. 넉넉한 실내 공간과 안락한 시트, 혁신적인 조작 컨셉, 첨단 인포테인먼트 시스템과 강력한 V8 가솔린 직분사 터보차저 (TFSI) 엔진으로 마스터클래스의 드라이빙을 경험하세요.",
+      linkUrl: "/",
+      linkText: "아우디 S8 L 더 알아보기",
+      linkTarget: "_self",
+    },
+  ]);
+</script>

app/pages/models/sportback.vue

@@ -0,0 +1,154 @@
+<template>
+  <main>
+    <div class="detail--container--full pb--120">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="아우디 스포트백"
+        textLocation="bottom"
+        type="cover"
+        :height="800"
+      />
+
+      <TitleVisual
+        title="아우디 스포트백"
+        description="5 도어 해치백의 실용성과 수용력, 쿠페에서 영감을받은 스타일링이 아우디 스포트백 모델의 특징입니다. 아우디의 다양한 스포트 백 모델들을 만나보세요."
+        textAlign="center"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 링크 리스트 컴포넌트 -->
+      <LinkList class="mt--20" :links="reservationLinks" />
+
+      <modelList id="" :items="etronLineup" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import LinkList from "~/components/block/LinkList.vue";
+  import modelList from "~/components/block/modelList.vue";
+
+  const bannerImagePath = ref("/img/models/1920x1080_sportback.avif");
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "재고 확인하기",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "월 납입금 계산",
+      url: "https://www.audikoreaevent.co.kr/lms/calculator.do",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "상담신청",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "전시장/AS센터",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+  ]);
+  const etronLineup = ref([
+    {
+      imagePath: "/img/models/sportback1.avif",
+      imageAlt: "A6 e-tron",
+      title: "A6 e-tron",
+      description: "혁신의 차이, 전기적 프리미엄의 완성. 아우디 A6 e-tron.",
+      linkUrl: "/",
+      linkText: "아우디 A6 e-tron 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/sportback2.avif",
+      imageAlt: "S6 e-tron",
+      title: "S6 e-tron",
+      description: "혁신의 차이, 전기적 프리미엄의 완성. 아우디 S6 e-tron.",
+      linkUrl: "/",
+      linkText: "아우디 S6 e-tron 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/sportback3.avif",
+      imageAlt: "A7 Sportback",
+      title: "A7 Sportback",
+      description:
+        "아우디 A7은 넘치는 개성으로 한눈에 알아볼 수 있습니다. 고유한 라이트 시그니처가 포함된 날카로운 라이트에서, 싱글 프레임이 널찍하게 자리잡은 곧은 앞모습, 그리고 쿠페를 닮은 실루엣과 잘 조각된 뒷모습까지, 혁신적인 디자인 언어를 대표하는 더 뉴 아우디 A7 스포트백은 클래식 콰트로의 유전자를 물려 받았습니다. 재창조를 거쳐도 진정한 정체성은 유지될 수 있다는 사실을 입증해줍니다.",
+      linkUrl: "/",
+      linkText: "아우디 A7 Sportback 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/sportback4.avif",
+      imageAlt: "A7 Sportback TFSI e",
+      title: "A7 Sportback TFSI e",
+      description: "",
+      linkUrl: "/",
+      linkText: "아우디 A7 Sportback TFSI e 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/sportback5.avif",
+      imageAlt: "Q3 Sportback",
+      title: "Q3 Sportback",
+      description:
+        "아우디 Q3 스포트백은 쿠페의 아름다운 디자인과 SUV의 성능과 기능성을 모두 갖췄습니다. 다양한 편의 사양과 디지털 기술로 연결된 인포테인먼트 시스템은 드라이빙을 더욱 즐겁게 만듭니다.",
+      linkUrl: "/",
+      linkText: "아우디 Q3 Sportback 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/sportback6.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/models/sportback7.avif",
+      imageAlt: "Q5 Sportback",
+      title: "Q5 Sportback",
+      description: "달리는 순간, 모든 시선이 머문다",
+      linkUrl: "/",
+      linkText: "아우디 Q5 Sportback 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/sportback8.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/models/sportback9.avif",
+      imageAlt: "SQ8 Sportback e-tron",
+      title: "SQ8 Sportback e-tron",
+      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 SQ8 스포트백 e-tron.",
+      linkUrl: "/",
+      linkText: "아우디 SQ8 Sportback e-tron 더 알아보기",
+      linkTarget: "_self",
+    },
+  ]);
+</script>

app/pages/models/srange.vue

@@ -0,0 +1,136 @@
+<template>
+  <main>
+    <div class="detail--container--full pb--120">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="아우디 S 모델"
+        textLocation="bottom"
+        type="cover"
+        :height="800"
+      />
+
+      <TitleVisual
+        title="S 모델"
+        description="최고 성능 (Sovereign Performance)이라는 의미를 담고 있는 아우디 S 모델은 아우디의 레이싱 경험과 독보적인 기술을 기반으로 스포티하고 역동적인 주행 성능, 그리고 혁신적인 디자인이 구현한 모델입니다."
+        textAlign="center"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 링크 리스트 컴포넌트 -->
+      <LinkList class="mt--20" :links="reservationLinks" />
+
+      <modelList id="" :items="etronLineup" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import LinkList from "~/components/block/LinkList.vue";
+  import modelList from "~/components/block/modelList.vue";
+
+  const bannerImagePath = ref("/img/models/S_1920X1080.avif");
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "재고 확인하기",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "월 납입금 계산",
+      url: "https://www.audikoreaevent.co.kr/lms/calculator.do",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "상담신청",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "전시장/AS센터",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+  ]);
+  const etronLineup = ref([
+    {
+      imagePath: "/img/models/srange1.avif",
+      imageAlt: "S e-tron GT",
+      title: "S e-tron GT",
+      description:
+        "가장 강력한 아우디 S 모델로, 그란 투리스모 순수 전기차의 힘과 아름다움에 긴 주행 가능 거리, 높은 충전 용량, 그리고 짜릿한 주행 역학을 결합한 차량입니다.",
+      linkUrl: "/",
+      linkText: "아우디 S e-tron GT 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/srange2.avif",
+      imageAlt: "S6 e-tron",
+      title: "S6 e-tron",
+      description: "혁신의 차이, 전기적 프리미엄의 완성. 아우디 S6 e-tron.",
+      linkUrl: "/",
+      linkText: "아우디 S6 e-tron 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/srange3.avif",
+      imageAlt: "S5",
+      title: "S5",
+      description:
+        "오랜 시간 동안 사랑받고 있는 Audi의 베스트셀러 모델, Audi A4 시리즈가 10세대를 맞이하며 Audi A5라는 이름으로 새롭게 태어났습니다. 신형 Audi S5는 감성을 자극하는 디자인에 근육질 형태의 차체 비율, S 전용 요소, 고성능 TFSI 엔진이 조화롭게 결합되어 있습니다.",
+      linkUrl: "/",
+      linkText: "아우디 S5 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/srange4.avif",
+      imageAlt: "S8 L",
+      title: "S8 L",
+      description:
+        "비교 불가능한 럭셔리 스포츠 세단, 아우디 S8 L의 목표는 단 한가지 입니다. 목적지에 빠르고 편안하게 도착하는 것입니다. 넉넉한 실내 공간과 안락한 시트, 혁신적인 조작 컨셉, 다양한 인포테인먼트 및 연결 옵션 그리고 강력한 V8 가솔린 직분사 터보차저 (TFSI) 엔진으로 마스터클래스의 드라이빙을 경험하세요.",
+      linkUrl: "/",
+      linkText: "아우디 S8 L 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/srange5.avif",
+      imageAlt: "SQ7",
+      title: "SQ7",
+      description: "더욱 다이내믹하게. 고성능 프리미엄 SUV 아우디 SQ7",
+      linkUrl: "/",
+      linkText: "아우디 SQ7 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/srange6.avif",
+      imageAlt: "SQ6 e-tron",
+      title: "SQ6 e-tron",
+      description: "",
+      linkUrl: "/",
+      linkText: "아우디 SQ6 e-tron 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/srange7.avif",
+      imageAlt: "SQ8 Sportback e-tron",
+      title: "SQ8 Sportback e-tron",
+      description: "",
+      linkUrl: "/",
+      linkText: "아우디 SQ8 Sportback e-tron 더 알아보기",
+      linkTarget: "_self",
+    },
+  ]);
+</script>

app/pages/models/suv.vue

@@ -0,0 +1,214 @@
+<template>
+  <main>
+    <div class="detail--container--full pb--120">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="아우디 SUV"
+        textLocation="bottom"
+        type="cover"
+        :height="800"
+      />
+
+      <TitleVisual
+        title="아우디 SUV"
+        description="아우디의 브랜드 철학은 'Q' SUV 모델이 추구하는 가치와 맞닿아 있습니다. 액티브한 라이프스타일을 지향하고 도심과 오프로드의 드라이빙 성능을 타협하지 않는 엔지니어링을 추구합니다. 도전적이고 혁신적인, 그러나 자유롭고 여유를 아는 열정가인 당신을 위해 모든 길에 Q가 있다. 아우디 SUV, Q Familiy."
+        textAlign="center"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 링크 리스트 컴포넌트 -->
+      <LinkList class="mt--20" :links="reservationLinks" />
+
+      <modelList id="" :items="etronLineup" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import LinkList from "~/components/block/LinkList.vue";
+  import modelList from "~/components/block/modelList.vue";
+
+  const bannerImagePath = ref("/img/models/banner_1920X1080.avif");
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "재고 확인하기",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "월 납입금 계산",
+      url: "https://www.audikoreaevent.co.kr/lms/calculator.do",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "상담신청",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+    {
+      text: "전시장/AS센터",
+      url: "/",
+      target: "_blank",
+      class: "pl--0",
+      showIcon: true,
+    },
+  ]);
+  const etronLineup = ref([
+    {
+      imagePath: "/img/models/suv1.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/models/suv2.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/models/suv3.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/models/suv4.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/models/suv5.avif",
+      imageAlt: "Q8 e-tron",
+      title: "Q8 e-tron",
+      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 Q8 e-tron.",
+      linkUrl: "/",
+      linkText: "아우디 Q8 e-tron 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/suv6.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/models/suv7.avif",
+      imageAlt: "SQ8 Sportback e-tronL",
+      title: "SQ8 Sportback e-tron",
+      description: "더 빠른 충전, 더 멀리 갈 수 있는 자유. 아우디 SQ8 스포트백 e-tron.",
+      linkUrl: "/",
+      linkText: "아우디 SQ8 Sportback e-tron 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/suv8.avif",
+      imageAlt: "Q3",
+      title: "Q3",
+      description:
+        "올라운드 SUV. 아우디 Q3 2세대 아우디 Q3는 넓은 공간, 포괄적인 적응성 그리고 실용적인 다양한 기능으로 더 큰 효용을 제공합니다. 530 리터의 넓은 적재 공간과, 중대형 세그먼트에 적용되는 12.3인치 아우디 버츄얼 콕핏 플러스와 10.1인치 MMI 내비게이션 플러스, 주행 보조 시스템까지. 아우디 Q3는 SUV의 역량을 두루 갖춘 패밀리 SUV입니다.",
+      linkUrl: "/",
+      linkText: "아우디 Q3 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/suv9.avif",
+      imageAlt: "Q3 Sportback",
+      title: "Q3 Sportback",
+      description:
+        "아우디 Q3 스포트백은 쿠페의 아름다운 디자인과 SUV의 성능과 기능성을 모두 갖췄습니다. 다양한 편의 사양과 디지털 기술로 연결된 인포테인먼트 시스템은 드라이빙을 더욱 즐겁게 만듭니다.",
+      linkUrl: "/",
+      linkText: "아우디 Q3 Sportback 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/suv10.avif",
+      imageAlt: "Q5",
+      title: "Q5",
+      description:
+        "신형 Audi Q5 SUV는 강력한 구동 시스템으로 완성되는 재미와 파노라마 디스플레이의 인상적인 모습, 완벽한 SUV 비율이 선사하는 경이로움을 선사합니다.",
+      linkUrl: "/",
+      linkText: "아우디 Q5 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/suv11.avif",
+      imageAlt: "Q5 Sportback",
+      title: "Q5 Sportback",
+      description: "달리는 순간, 모든 시선이 머문다",
+      linkUrl: "/",
+      linkText: "아우디 Q5 Sportback 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/suv12.avif",
+      imageAlt: "Q7",
+      title: "Q7",
+      description:
+        "다재다능한 럭셔리 SUV. 아우디 Q7 인상적인 새로운 스타일의 외부디자인, 미래지향적 인테리어, 파워풀한 엔진 성능, 새로운 차원의 기술과 운전자보조시스템까지. 더 새로워진 여유로움을 경험하세요.",
+      linkUrl: "/",
+      linkText: "아우디 Q7 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/suv13.avif",
+      imageAlt: "SQ7",
+      title: "SQ7",
+      description: "더욱 다이내믹하게. 고성능 프리미엄 SUV 아우디 SQ7",
+      linkUrl: "/",
+      linkText: "아우디 SQ7 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/suv14.avif",
+      imageAlt: "Q8",
+      title: "Q8",
+      description:
+        "오직, 당신에게만 허락된 새로운 차원. 플래그십 SUV 아우디 Q8 아우디 Q8은 4도어 럭셔리 쿠페의 우아함에 대형 SUV의 성능과 실용성을 결합했습니다. 다양한 편의 장치가 차량 내 시스템에 포괄적으로 연결되어 있으며 오프로드 주행에 필요한 견고함을 갖추고 있는, 비즈니스와 레저 모두를 위한 듬직한 동반자입니다.",
+      linkUrl: "/",
+      linkText: "아우디 Q8 더 알아보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/models/suv15.avif",
+      imageAlt: "RS Q8 performance",
+      title: "RS Q8 performance",
+      description: "시선은 사로잡고, 심장을 뒤흔든다",
+      linkUrl: "/",
+      linkText: "아우디 RS Q8 performance 더 알아보기",
+      linkTarget: "_self",
+    },
+  ]);
+</script>

public/img/charging-xs.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="main"><path fill="currentColor" d="M10 2h3v2h3v1h-3v3h3v1h-3v2H9.95a4.63 4.63 0 0 1-.72-.05 6.32 6.32 0 0 1-1.68-.45A4.25 4.25 0 0 1 5.8 9.15 4.14 4.14 0 0 1 5.02 7H4.5a2.5 2.5 0 0 0 0 5h1A2.5 2.5 0 0 1 8 14.5V16H7v-1.5c0-.83-.67-1.5-1.5-1.5h-1a3.5 3.5 0 1 1 0-7h.52c.08-.88.37-1.6.78-2.15A4.25 4.25 0 0 1 7.55 2.5 6.33 6.33 0 0 1 10 2h.02Zm0 8h2V3H9.96a3.65 3.65 0 0 0-.6.04c-.39.06-.9.16-1.41.38-.5.22-.99.55-1.34 1.02a3.3 3.3 0 0 0-.6 2.06c0 .93.24 1.58.6 2.06.35.48.83.8 1.34 1.02a5.33 5.33 0 0 0 2 .42H10Z"></path></g></svg>