Merge remote-tracking branch 'origin/master'

app/assets/scss/admin.scss

@@ -41,6 +41,20 @@
   width:100%;
   position: relative;
 
+  &[data-type="cover"] {
+    >div {
+      position: relative;
+      height:100vh;
+      overflow: hidden;
+    }
+    img{
+      object-fit: cover;
+      height:auto;
+      position: absolute;
+      top:50%;
+      transform: translateY(-50%);
+    }
+  }
   &:before{
     content:'';
     display: block;
@@ -201,6 +215,21 @@
   width: 100%;
   padding: 40px 96px;    
 
+  &[data-fit="contain"]{
+    .swiper--banner--container{
+      .swiper--banner--section{
+        .swiper--container{
+          .swiper-slide{
+            .slide--image{
+              img{
+                object-fit: contain;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
   &[data-type="vertical"]{
     padding:0px;
     .swiper--banner--container{
@@ -487,6 +516,7 @@
             img {
               width: 100%;
               height: 100%;
+              max-height:100vh;
               object-fit: cover;
               object-position: center;
               transition: transform 0.8s ease;
@@ -495,7 +525,7 @@
           
           &.swiper-slide-active {
             .slide--image img {
-              transform: scale(1.02);
+              //transform: scale(1.02);
             }
           }
         }
@@ -560,6 +590,37 @@
   overflow: hidden;
   padding:40px 0px;
 
+  &[data-type="middle"] { 
+    .title--visual--wrapper{
+      max-width:100%;
+      padding:0px 96px;
+      .title--visual--content{
+        h2{
+          color: rgb(252, 252, 253);          
+          letter-spacing: 0px;
+          font-weight: 400;
+          text-decoration: none;
+          font-size: 24px;
+          line-height: 36px;
+          font-stretch: 130%;
+          
+          @media (min-width: 1024px) {          
+            font-size: 28px;
+            line-height: 40px;        
+          }
+          @media (min-width: 1440px) {                
+            font-size: 32px;
+            line-height: 44px;                
+          }
+          @media (min-width: 1920px) {            
+            font-size: 36px;
+            line-height: 52px;              
+          }
+
+        }
+      }
+    }
+  }
   
   // 테마별 스타일
   &[data-theme="dark"] {    
@@ -694,6 +755,22 @@
     }
   }
 }
+
+
+.caution--text--wrapper{
+  padding:120px 96px;
+  p{
+    margin: 0 0 26px 0;
+    color: rgba(252, 252, 253, 0.7);
+    font-family: AudiType, sans-serif;
+    letter-spacing: 0px;
+    font-weight: 400;
+    text-decoration: none;
+    font-size: 16px;
+    line-height: 24px;
+    font-stretch: 105%;
+  }
+}
 /*=================================================
 |컴포넌트 별 css
 |END
@@ -881,4 +958,343 @@
       height: 24px;
       background-image: url(/img/ico--arrow.svg);
   }
+}
+
+//탭 링크
+.text--tab--layout{
+  display: flex;  
+  background: linear-gradient(134deg, rgb(44, 52, 63) 0%, rgb(35, 42, 52) 100%);    
+
+
+  @media(min-width:1440px){
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: max-content 1fr auto;
+    gap: 28px;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  @media(min-width:1025px){
+    padding-block:12px;
+  }
+
+  ul{
+    display: flex;
+    position: relative;    
+    padding-inline:96px;    
+    -webkit-box-align: center;
+    align-items: center;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    li {
+      &:first-child{
+        a{
+          margin-left:-12px;
+          pointer-events: none;
+        }
+      }      
+      a{
+        cursor: pointer;
+        display: flex;
+        -webkit-box-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        justify-content: center;
+        text-decoration: none;
+        border-radius: 10px;
+        background: rgba(44, 52, 63, 0);
+        box-shadow: rgba(219, 223, 230, 0) 0px 0px 0px 1px inset;
+        outline-offset: -3px;
+        box-sizing: border-box;
+        transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
+        transition-duration: 250ms;
+        transition-property: color, background, box-shadow;
+        min-height: 48px;
+        min-width: 64px;
+        color: rgba(252, 252, 253, 0.7);
+        padding: 0px 16px;
+
+        text-align: center;          
+        letter-spacing: 0px;
+        font-weight: 400;
+        text-decoration: none;
+        font-size: 14px;
+        line-height: 20px;
+        font-stretch: 105%;
+
+
+        &:hover{
+          color:rgb(252,252,253);
+          background-color: rgb(44,52,63);
+          box-shadow: rgba(219, 223,230, .2) 0px 0px 0px 1px inset;
+        }
+      }
+    }
+  }
+}
+
+
+
+.inner--link--contents {
+  width: 100%;
+  padding: 40px 0;
+  
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;  
+    flex-wrap: wrap;  
+    gap: 24px;
+    width: 100%;
+    padding:0 96px;
+  
+    li {
+      width:calc( (100% - 48px) / 3);
+      --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:28px 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%);
+      display: flex;
+      text-decoration: none;
+
+
+      &:hover{
+        --gradient-start: hsla(216, 18%, 21%, 1);
+        --gradient-end: hsla(216, 18%, 21%, 1);
+        box-shadow: rgb(42,57,64) 0px 0px 0px 1px inset;
+      }
+
+      a {
+        display: inline-flex;
+        align-items: center;
+        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%;
+        padding-left:40px;
+        position: relative;
+        width:100%;
+
+        svg{
+          position: absolute;
+          top:50%;
+          transform: translateY(-50%);
+          right:0px;
+        }
+      }
+    }
+  }
+}
+
+
+.product--card {
+  display: flex;
+  gap: 40px;
+  padding: 40px;  
+  border-radius: 24px;
+  overflow: hidden;
+  
+  // 가로 레이아웃
+  &[data-layout="horizontal"] {
+    flex-direction: row;
+    align-items: center;
+    
+    .product--card--thumb {
+      flex: 0 0 40%;
+      max-width: 600px;
+    }
+    
+    .product--card--content {
+      flex: 1;
+      padding-left: 20px;
+    }
+    
+    // 이미지 오른쪽 배치
+    &[data-image-position="right"] {
+      flex-direction: row-reverse;
+      
+      .product--card--content {
+        padding-left: 0;
+        padding-right: 20px;
+      }
+    }
+    
+    @media (max-width: 1024px) {
+      flex-direction: column;
+      
+      .product--card--thumb {
+        flex: 1;
+        max-width: 100%;
+      }
+      
+      .product--card--content {
+        padding-left: 0;
+        padding-right: 0;
+        padding-top: 20px;
+      }
+      
+      // 모바일에서는 이미지 위치 상관없이 세로 배치
+      &[data-image-position="right"] {
+        flex-direction: column;
+        
+        .product--card--content {
+          padding-right: 0;
+          padding-top: 20px;
+        }
+      }
+    }
+  }
+  
+  // 세로 레이아웃
+  &[data-layout="vertical"] {
+    flex-direction: column;
+    max-width: 600px;
+    
+    .product--card--thumb {
+      width: 100%;
+    }
+    
+    .product--card--content {
+      padding-top: 24px;
+    }
+  }
+  
+  .product--card--thumb {
+    border-radius: 16px;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.05);
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+      transition: transform 0.6s ease;
+    }
+    
+    &:hover img {
+      transform: scale(1.05);
+    }
+  }
+  
+  .product--card--content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .product--card--title {    
+    margin: 0px;
+    color: rgb(252, 252, 253);    
+    letter-spacing: 0px;
+    font-weight: 400;
+    text-decoration: none;
+    font-size: 24px;
+    line-height: 36px;
+    font-stretch: 130%;
+        
+    @media (min-width: 1024px) {        
+      font-size: 28px;
+      line-height: 40px;        
+    }
+    @media (min-width: 1440px) {        
+      font-size: 32px;
+      line-height: 44px;  
+    }
+    @media (min-width: 1920px) {     
+      font-size: 36px;
+      line-height: 52px;     
+    }
+
+  }
+  
+  .product--card--subtitle {
+    margin: 0;
+    color: rgba(252, 252, 253, 0.8);
+    font-size: 20px;
+    line-height: 28px;
+    font-weight: 300;
+    
+    @media (max-width: 768px) {
+      font-size: 18px;
+      line-height: 26px;
+    }
+  }
+  
+  .product--card--description {
+    margin-top: 8px;
+    
+    p {
+      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%;
+    }
+  }
+  
+  .product--card--actions {
+    margin-top: 24px;
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    
+    .default--round--btn {
+      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;
+      border: 0px;      
+      letter-spacing: 0px;
+      font-weight: 400;
+      text-decoration: none;
+      font-size: 14px;
+      line-height: 20px;
+      font-stretch: 105%;
+      padding: 12px 24px;
+      min-height: 48px;      
+      background-color: rgb(24, 29, 37);
+      color: rgb(252, 252, 253);
+      box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
+      transition-property: color, box-shadow, background-color;
+      
+      &:hover {
+        background: rgba(44,52,63);                 
+        box-shadow: rgba(219,223,230, .2) 0px 0px 0px 1px inset;
+      }
+      
+      &:active {
+        transform: translateY(0);
+      }
+    }
+  }
+  
+  @media (max-width: 768px) {
+    padding: 24px;
+    gap: 24px;
+  }
 }

app/assets/scss/style.scss

@@ -31,7 +31,7 @@ body{
 }
 
 *{
-    background-repeat: no-repeat;
+    background-repeat: no-repeat;    
 }
 
 .ico, ::after, ::before{

app/components/block/LinkList.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="inner--link--contents">
+    <ul>
+      <li v-for="(item, index) in links" :key="index">
+        <NuxtLink :to="item.url" :target="item.target || '_self'" :class="item.class">
+          {{ item.text }}
+
+          <svg
+            v-if="item.showIcon !== false"
+            width="24"
+            height="24"
+            aria-label="New Tab"
+            xmlns="http://www.w3.org/2000/svg"
+            stroke="#fff"
+            data-testid="link-icon"
+          >
+            <title>New Tab</title>
+            <path
+              d="M17.5 11.594V20.5h-15v-15h7.969m4.031-3h6v6m-9 3 9-9-9 9Z"
+              stroke="#fff"
+              fill="none"
+            ></path>
+          </svg>
+        </NuxtLink>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+  // Props 정의
+  const props = defineProps({
+    links: {
+      type: Array,
+      required: true,
+      default: () => [],
+      validator: (value) => {
+        // 각 링크 객체가 필수 속성을 가지고 있는지 확인
+        return value.every(
+          (link) => link.hasOwnProperty("text") && link.hasOwnProperty("url")
+        );
+      },
+    },
+  });
+
+  // 링크 데이터 구조 예시:
+  // [
+  //   {
+  //     text: "Q8 50 TDI quattro exclusive edition 예약금 결제",
+  //     url: "/reservation/q8",
+  //     target: "_blank", // 선택사항, 기본값: "_self"
+  //     showIcon: true, // 선택사항, 기본값: true
+  //     class: "custom-class" // 선택사항
+  //   },
+  //   {
+  //     text: "RS 6 Avant 예약금 결제",
+  //     url: "/reservation/rs6",
+  //     target: "_self",
+  //     showIcon: false
+  //   }
+  // ]
+</script>

app/components/block/ProductCard.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="product--card" :data-layout="layout" :data-image-position="imagePosition">
+    <div class="product--card--thumb">
+      <img :src="image" :alt="imageAlt || title" loading="lazy" />
+    </div>
+    <div class="product--card--content">
+      <h2 v-if="title" class="product--card--title">{{ title }}</h2>
+      <h3 v-if="subtitle" class="product--card--subtitle">{{ subtitle }}</h3>
+      <div v-if="description" class="product--card--description">
+        <p>{{ description }}</p>
+      </div>
+      <div v-if="buttonText && buttonUrl" class="product--card--actions">
+        <NuxtLink :to="buttonUrl" :target="buttonTarget" class="default--round--btn">
+          {{ buttonText }}
+        </NuxtLink>
+      </div>
+      <div v-if="$slots.actions" class="product--card--actions">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  // Props 정의
+  const props = defineProps({
+    // 이미지 관련
+    image: {
+      type: String,
+      required: true,
+    },
+    imageAlt: {
+      type: String,
+      default: "",
+    },
+
+    // 텍스트 관련
+    title: {
+      type: String,
+      required: true,
+    },
+    subtitle: {
+      type: String,
+      default: "",
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+
+    // 버튼 관련
+    buttonText: {
+      type: String,
+      default: "",
+    },
+    buttonUrl: {
+      type: String,
+      default: "/",
+    },
+    buttonTarget: {
+      type: String,
+      default: "_self",
+      validator: (value) => ["_self", "_blank"].includes(value),
+    },
+
+    // 레이아웃 옵션
+    layout: {
+      type: String,
+      default: "horizontal", // 'horizontal', 'vertical'
+      validator: (value) => ["horizontal", "vertical"].includes(value),
+    },
+
+    // 이미지 위치 옵션
+    imagePosition: {
+      type: String,
+      default: "left", // 'left', 'right'
+      validator: (value) => ["left", "right"].includes(value),
+    },
+  });
+</script>

app/components/block/SwiperBanner.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="swiper--banner--wrapper" :data-type="type">
+  <section class="swiper--banner--wrapper" :data-type="type" :data-fit="fit">
     <div class="swiper--banner--container">
       <!-- 30% 영역: 컨트롤 및 텍스트 -->
       <div class="swiper--controls--section">
@@ -58,7 +58,8 @@
                 v-if="getSlideMorelink(index)"
                 class="more--detail--href mt--20"
                 :to="getSlideMorelink(index)"
-                >자세히 보기 <i class="ico"></i
+                :target="getSlideTarget(index)"
+                >{{ getSlideMorelinktitle(index) }} <i class="ico"></i
               ></NuxtLink>
             </div>
           </div>
@@ -136,6 +137,14 @@
       type: String,
       default: "",
     },
+    morelinktitle: {
+      type: String,
+      default: "자세히 보기",
+    },
+    morelinktarget: {
+      type: String,
+      default: "_self",
+    },
     notice: {
       type: String,
       default: "",
@@ -153,6 +162,11 @@
       default: "horizental", // 'horz' , 'vert'
       validator: (value) => ["horizental", "vertical"].includes(value),
     },
+    fit: {
+      type: String,
+      default: "cover",
+      validator: (value) => ["cover", "contain"].includes(value),
+    },
   });
 
   // Refs
@@ -183,6 +197,14 @@
     return props.slides[index]?.morelink || props.morelink;
   };
 
+  const getSlideMorelinktitle = (index) => {
+    return props.slides[index]?.morelinktitle || props.morelinktitle;
+  };
+
+  const getSlideTarget = (index) => {
+    return props.slides[index]?.morelinktarget || props.morelinktarget;
+  };
+
   onMounted(() => {
     // Swiper 인스턴스 초기화
     swiperInstance = new Swiper(swiperContainer.value, {

app/components/block/TitleVisual.vue

@@ -1,5 +1,10 @@
 <template>
-  <section class="title--visual" :data-theme="theme" ref="titleVisualRef">
+  <section
+    class="title--visual"
+    :data-type="type"
+    :data-theme="theme"
+    ref="titleVisualRef"
+  >
     <div class="title--visual--wrapper">
       <div
         class="title--visual--content"
@@ -41,6 +46,11 @@
       default: "light", // 'light', 'dark'
       validator: (value) => ["light", "dark"].includes(value),
     },
+    type: {
+      type: String,
+      default: "", // 'light', 'dark'
+      validator: (value) => ["", "middle"].includes(value),
+    },
     animation: {
       type: Boolean,
       default: true,

app/components/block/cautionText.vue

@@ -0,0 +1,20 @@
+<template>
+  <section class="caution--text--wrapper">
+    <div>
+      <p>
+        *상기 옵션 주문 가능 여부 및 가격은 실제 생산 시점 MY 변경 및 부품 생산 상황에
+        따라 예고 없이 변경될 수 있으므로 최종 주문 진행 전 반드시 가능 여부를 아우디
+        공식딜러와 확인 바랍니다.
+      </p>
+      <p>*상기 이미지는 국내 판매 사양과 다를 수 있습니다.</p>
+      <p>
+        *본 차량에 대한 일반적인 사항은 구매 시 제공되는 사용설명서와 별도 책자를 참조
+        하시기 바랍니다.
+      </p>
+      <p>
+        *구입한 차량의 실제 사양은 표시된 사양과 다를 수 있습니다. 일부 모델은 공급이
+        불가할 수 있습니다.
+      </p>
+    </div>
+  </section>
+</template>

app/components/block/fullSizeBannerText1.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="img--section--full">
+  <section class="img--section--full" :data-type="type">
     <div>
       <picture>
         <source media="(max-width: 768px)" :srcset="`${imagePath}?width=768`" />
@@ -24,5 +24,10 @@
       type: String,
       default: "Banner Image",
     },
+    type: {
+      type: String,
+      default: "contain", // 'horz' , 'vert'
+      validator: (value) => ["contain", "cover"].includes(value),
+    },
   });
 </script>

app/components/components.md

@@ -5,4 +5,6 @@ block
     L 텍스트는  altText에 삽입
  |- parallaxBanner.vue : 텍스트 박스와 세로 1600기준 시차 배너
     L exclusive-order.vue 참조
-    
+ |- SwiperBanner.vue : 스와이퍼 가로형 세로형 디자인 적용 exclusive-order 참조
+ |- TitleVisual.vue : 타이틀 두줄용 
+ |- CautionText.vue : 페이지 최하단 경고 문구 

app/pages/exclusive/exclusive-edition.vue

@@ -0,0 +1,201 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="Audi exclusive edition"
+        type="cover"
+      />
+
+      <div class="text--tab--layout">
+        <ul>
+          <li>
+            <NuxtLink to="/">Audi A6 Nardo Grey edition</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="/">Audi Q7 exclusive edtion</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="/">Audi Q8 exclusive edition</NuxtLink>
+          </li>
+        </ul>
+      </div>
+
+      <!-- 링크 리스트 컴포넌트 -->
+      <LinkList class="mt--20" :links="reservationLinks" />
+
+      <TitleVisual
+        title="Q8 50 TDI quattro exclusive edition"
+        description=""
+        textAlign="left"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <SwiperBanner
+        :slides="bannerSlides"
+        :autoplay="false"
+        :loop="false"
+        fit="contain"
+        type="vertical"
+      />
+
+      <SwiperBanner
+        :slides="bannerSlides2"
+        :autoplay="false"
+        :loop="false"
+        fit="contain"
+        type="vertical"
+      />
+
+      <SwiperBanner
+        :slides="bannerSlides3"
+        :autoplay="false"
+        :loop="false"
+        fit="contain"
+        type="vertical"
+      />
+
+      <SwiperBanner
+        :slides="bannerSlides4"
+        :autoplay="false"
+        :loop="false"
+        fit="contain"
+        type="vertical"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        image="/img/exclusive/q8_1513x1513.webp"
+        imageAlt="Audi Q8 50 TDI quattro exclusive edition"
+        title="Q8 50 TDI quattro exclusive edition"
+        subtitle="완벽한 프리미엄 SUV. 소수만을 위한 특별함이 당신을 기다립니다."
+        buttonText="예약금 결제"
+        buttonUrl="https://www.audi.co.kr/ko/kr-new-car-search/"
+        buttonTarget="_blank"
+        layout="horizontal"
+        imagePosition="left"
+      />
+      
+      <!-- 이미지 오른쪽 배치 테스트 -->
+      <ProductCard
+        image="/img/exclusive/q8_1513x1513.webp"
+        imageAlt="Audi Q8 50 TDI quattro exclusive edition"
+        title="Q8 50 TDI quattro exclusive edition (Right)"
+        subtitle="이미지가 오른쪽에 배치된 레이아웃 테스트입니다."
+        buttonText="예약금 결제"
+        buttonUrl="https://www.audi.co.kr/ko/kr-new-car-search/"
+        buttonTarget="_blank"
+        layout="horizontal"
+        imagePosition="right"
+      />
+    </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 SwiperBanner from "~/components/block/SwiperBanner.vue";
+  import ProductCard from "~/components/block/ProductCard.vue";
+
+  const bannerImagePath = ref("/img/exclusive/RSeGT_ae_2022_3855-S.jpg");
+
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "Q8 50 TDI quattro exclusive edition 예약금 결제",
+      url: "https://www.audi.co.kr/ko/kr-new-car-search/",
+      target: "_blank",
+      showIcon: true,
+    },
+  ]);
+
+  const bannerSlides = ref([
+    {
+      image: "/img/exclusive/q8_front_1920x1080.jpg",
+      alt: "아우디 Q8",
+      title: "",
+      subtitle: "아우디 Q8",
+    },
+    {
+      image: "/img/exclusive/q8_side_1920x1080.jpg",
+      alt: "아우디 Q8",
+      title: "",
+      subtitle: "",
+    },
+    {
+      image: "/img/exclusive/q8_back_1920x1080.jpg",
+      alt: "아우디 Q8",
+      title: "",
+      subtitle: "",
+    },
+    {
+      image: "/img/exclusive/q8_wheel.jpg",
+      alt: "아우디 Q8",
+      title: "",
+      subtitle: "",
+    },
+  ]);
+
+  const bannerSlides2 = ref([
+    {
+      image: "/img/exclusive/q8_red.jpg",
+      alt: "아우디 Q8",
+      title: "",
+      subtitle: "아우디 Q8",
+    },
+    {
+      image: "/img/exclusive/q8_red_2.jpg",
+      alt: "아우디 Q8",
+      title: "",
+      subtitle: "",
+    },
+    {
+      image: "/img/exclusive/q8_red_3.jpg",
+      alt: "아우디 Q8",
+      title: "",
+      subtitle: "",
+    },
+  ]);
+
+  const bannerSlides3 = ref([
+    {
+      image: "/img/exclusive/q8_BR.jpg",
+      alt: "아우디 Q8",
+      title: "",
+      subtitle: "아우디 Q8",
+    },
+    {
+      image: "/img/exclusive/q8_BR.jpg",
+      alt: "아우디 Q8",
+      title: "",
+      subtitle: "",
+    },
+    {
+      image: "/img/exclusive/q8_BR_3.jpg",
+      alt: "아우디 Q8",
+      title: "",
+      subtitle: "",
+    },
+  ]);
+
+  const bannerSlides4 = ref([
+    {
+      image: "/img/exclusive/q8_red_1920x1080.jpg",
+      alt: "아우디 Q8",
+      title: "",
+      subtitle: "아우디 Q8",
+    },
+    {
+      image: "/img/exclusive/q8_BR_1920x1080.jpg",
+      alt: "아우디 Q8",
+      title: "",
+      subtitle: "",
+    },
+  ]);
+</script>

app/pages/exclusive/exclusive-order.vue

@@ -94,9 +94,40 @@
         :slides="bannerSlides5"
         :autoplay="false"
         :loop="false"
-        class="mt--50"
+        class="mt--80"
         type="vertical"
       />
+
+      <!-- 타이틀 비주얼 컴포넌트 -->
+      <TitleVisual
+        title="인테리어에도 특별함을 더하다"
+        description="다양한 가죽 트림 옵션, 컬러 장식 스티칭 등의 장식으로 모든 인테리어를 마감하고 특별한 개성을 드러낼 수 있습니다."
+        textAlign="left"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+        class="mt--100"
+      />
+
+      <SwiperBanner :slides="bannerSlides6" :autoplay="false" :loop="false" type="" />
+
+      <SwiperBanner
+        :slides="bannerSlides7"
+        :autoplay="false"
+        :loop="false"
+        class="mt--80"
+        type="vertical"
+      />
+
+      <SwiperBanner
+        :slides="bannerSlides8"
+        :autoplay="false"
+        :loop="false"
+        class="mt--80"
+        type="vertical"
+      />
+
+      <CautionText />
     </div>
   </main>
 </template>
@@ -107,6 +138,7 @@
   import ParallaxBanner from "~/components/block/parallaxBanner.vue";
   import SwiperBanner from "~/components/block/SwiperBanner.vue";
   import TitleVisual from "~/components/block/TitleVisual.vue";
+  import CautionText from "~/components/block/cautionText.vue";
 
   const bannerImagePath = ref("/img/exclusive/1920X1080_exclusive_edited_v2.jpg");
 
@@ -239,32 +271,91 @@
 
   const bannerSlides5 = ref([
     {
-      image: "/img/exclusive/metallic.jpg",
+      image: "/img/exclusive/metallic-shiny-L.jpg",
       alt: "",
       title: "Metallic 페인트 마감:",
       subtitle: "은은하게 반짝이는 우아함.",
       smalldesc: "",
     },
     {
-      image: "/img/exclusive/pearleffect.jpg",
+      image: "/img/exclusive/metallic-L.jpg",
+      alt: "",
+      title: "Metallic 페인트 마감:",
+      subtitle: "은은하게 반짝이는 우아함.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/exclusive/pearl-effect-L.jpg",
       alt: "",
       title: "Pearl effect 페인트 마감:",
       subtitle: "빛나는 광채.",
       smalldesc: "",
     },
     {
-      image: "/img/exclusive/uni.jpg",
+      image: "/img/exclusive/uni-color-L.jpg",
       alt: "",
       title: "단일 페인트 마감: ",
-      subtitle: "심플한 아름다움.",
+      subtitle: "심플한 아름다움. ",
       smalldesc: "",
     },
     {
-      image: "/img/exclusive/crystal.jpg",
+      image: "/img/exclusive/crystal-effect-L.jpg",
       alt: "",
       title: "Crystall effect 페인트 마감: ",
       subtitle: "숨이 멎을 듯 강렬한 럭셔리함. ",
       smalldesc: "",
     },
   ]);
+
+  const bannerSlides6 = ref([
+    {
+      image: "/img/exclusive/AQUA_171047_1_51L_rgb-L.jpg",
+      alt: "",
+      title: "가죽의 제작 과정",
+      subtitle:
+        "30가지 이상의 다양한 테스트를 실시한 후 적합한 가죽을 선택합니다. 이러한 테스트는 내마모성, 내광성, 수축 거동, 굽힘 강도 그리고 인장력, 방출 및 가연성에 대한 저항성과 같은 요소를 확인하도록 설계되었습니다.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/exclusive/19_AL090111_large-S-L.jpg",
+      alt: "",
+      title: "신중하게 처리되는 공정",
+      subtitle:
+        "가죽의 진성을 유지하기 위해 식물성 염료를 포함한 물질로 부드럽게 정제합니다. 그 결과 내구성이 강하고 오래 지속되며 매우 감성적인 재료가 만들어집니다.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/exclusive/needle.jpg",
+      alt: "",
+      title: "타임리스 스티칭",
+      subtitle: "맞춤형 스티칭은 Audi 전용 차량에 완벽함 마무리 터치를 더합니다.",
+      smalldesc: "",
+    },
+  ]);
+
+  const bannerSlides7 = ref([
+    {
+      image: "/img/exclusive/27_rs6_ae_2020_2427_1_55902-L.jpg",
+      alt: "",
+      title: "",
+      subtitle:
+        "아우디 RS 6 Avant의 인테리어에는 Diamond silver black 색상의 발코나 Audi exclusive 가죽 커버와 이에 대비되는 Diamond silver 스티칭을 사용했습니다.",
+      smalldesc: "",
+      morelink:
+        "https://www.audi.co.kr/ko/models/a6/rs-6-avant-performance-2024/configurator/",
+      morelinktitle: "아우디 RS 6 내 차량 만들기",
+      morelinktarget: "_blank",
+    },
+  ]);
+
+  const bannerSlides8 = ref([
+    {
+      image: "/img/exclusive/28_Audi_R8_Coupe_Blau_07-2019_4-L.jpg",
+      alt: "",
+      title: "무엇이든 가능하게:",
+      subtitle:
+        "탁월하게 제작된 섬세한 재료와 다양한 조합을 통해 브랜드의 감성을 다면적으로 반영합니다.",
+      smalldesc: "",
+    },
+  ]);
 </script>