+ exclusive 페이지 완료

app/assets/scss/admin.scss

@@ -24,6 +24,95 @@
   .m--#{$i} { margin: #{$i}px !important; }
 }
 
+:root {
+  --max-content-width: 1920px;
+  --page-margin: 16px;
+  @media (min-width: 375px) {
+      --page-margin: 28px;
+  }
+
+  @media (min-width: 768px) {
+      --page-margin: 40px;
+  }
+
+  @media (min-width: 1024px) {
+      --page-margin: 60px;
+  }
+
+  @media (min-width: 1440px) {
+      --page-margin: 96px;
+  }
+
+  @media (min-width: 1920px) {
+      --page-margin: 96px;
+  }
+
+  @property --gradient-start {
+      syntax: '<color>';
+      initial-value: transparent;
+      inherits: false;
+  }
+
+  @property --gradient-end {
+      syntax: '<color>';
+      initial-value: transparent;
+      inherits: false;
+  }
+
+  --spacing-relative-2xs: 4px;
+  --spacing-relative-xs: 8px;
+  --spacing-relative-sm: 12px;
+  --spacing-relative-md: 16px;
+  --spacing-relative-lg: 24px;
+  --spacing-relative-xl: 28px;
+  --spacing-relative-2xl: 36px;
+  --spacing-relative-3xl: 40px;
+  --spacing-relative-4xl: 48px;
+  --spacing-relative-5xl: 64px;
+  --spacing-relative-6xl: 80px;
+  --spacing-relative-7xl: 96px;
+  --spacing-relative-8xl: 120px;
+  @media (min-width: 768px) {
+      --spacing-relative-3xl: 48px;
+      --spacing-relative-4xl: 64px;
+      --spacing-relative-5xl: 72px;
+      --spacing-relative-6xl: 88px;
+      --spacing-relative-7xl: 104px;
+      --spacing-relative-8xl: 136px;
+  }
+
+  @media (min-width: 1024px) {
+      --spacing-relative-2xl: 40px;
+      --spacing-relative-3xl: 56px;
+      --spacing-relative-4xl: 72px;
+      --spacing-relative-5xl: 88px;
+      --spacing-relative-6xl: 104px;
+      --spacing-relative-7xl: 128px;
+      --spacing-relative-8xl: 168px;
+  }
+
+  @media (min-width: 1440px) {
+      --spacing-relative-xl: 32px;
+      --spacing-relative-2xl: 56px;
+      --spacing-relative-3xl: 72px;
+      --spacing-relative-4xl: 88px;
+      --spacing-relative-5xl: 104px;
+      --spacing-relative-6xl: 120px;
+      --spacing-relative-7xl: 160px;
+      --spacing-relative-8xl: 216px;
+  }
+
+  @media (min-width: 1920px) {
+      --spacing-relative-xl: 40px;
+      --spacing-relative-2xl: 72px;
+      --spacing-relative-3xl: 88px;
+      --spacing-relative-4xl: 104px;
+      --spacing-relative-5xl: 120px;
+      --spacing-relative-6xl: 136px;
+      --spacing-relative-7xl: 176px;
+      --spacing-relative-8xl: 248px;
+  }
+}
 
 
 
@@ -963,7 +1052,10 @@
 //탭 링크
 .text--tab--layout{
   display: flex;  
-  background: linear-gradient(134deg, rgb(44, 52, 63) 0%, rgb(35, 42, 52) 100%);    
+  background: linear-gradient(134deg, rgb(44, 52, 63) 0%, rgb(35, 42, 52) 100%);
+  position: sticky;
+  top: 0;
+  z-index: 100;    
 
 
   @media(min-width:1440px){
@@ -1101,200 +1193,253 @@
   }
 }
 
-
-.product--card {
-  display: flex;
-  gap: 40px;
-  padding: 40px;  
-  border-radius: 24px;
-  overflow: hidden;
+.product--card--wrapper{
+  margin: auto;
+  max-width: var(--max-content-width);    
+  padding: var(--spacing-relative-xl) var(--spacing-relative-md);
+  padding-inline: var(--page-margin);
+  padding-block-end: var(--spacing-relative-2xl);
   
-  // 가로 레이아웃
-  &[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 (min-width: 375px) {    
+    padding-inline: var(--page-margin);    
+  }
+  
+  @media (min-width: 768px) {    
+    padding-inline: var(--page-margin);    
+  }
+  
+  @media (min-width: 1024px) {        
+    padding-inline: var(--spacing-relative-3xl);
+    padding-block-end: var(--spacing-relative-2xl);    
+  }
+  @media (min-width: 1440px) {    
+    padding-inline: var(--page-margin);
+    padding-block-end: var(--spacing-relative-2xl);    
+  }
+
+  &[data-type="square"] {
+    max-height:100%!important;
+    .product--card{
+      max-height:100%!important;
+      .product--card--thumb{
+        max-height: 100%!important;
+        padding-top:50%;
+        .product--card--thumb--inner{
+          position: absolute;
+          inset: 0px;
+          height: 100%;
+          img{
+            position: relative;
+          }
+        }
       }
     }
+  }
+
+  .product--card {
+    display: flex;     
+    overflow: hidden;
+    max-height: 50vh;    
+
     
-    @media (max-width: 1024px) {
-      flex-direction: column;
+    // 가로 레이아웃
+    &[data-layout="horizontal"] {
+      flex-direction: row;
+      align-items: center;
       
       .product--card--thumb {
-        flex: 1;
-        max-width: 100%;
+        flex: 0 0 40%;
+        max-width: 600px;
       }
       
       .product--card--content {
-        padding-left: 0;
-        padding-right: 0;
-        padding-top: 20px;
+        flex: 1;        
       }
       
-      // 모바일에서는 이미지 위치 상관없이 세로 배치
+      // 이미지 오른쪽 배치
       &[data-image-position="right"] {
+        flex-direction: row-reverse;
+      }
+      
+      @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;
+    // 세로 레이아웃
+    &[data-layout="vertical"] {
+      flex-direction: column;
+      max-width: 600px;
+      
+      .product--card--thumb {
+        width: 100%;
+      }
+      
+      .product--card--content {
+        padding-top: 24px;
+      }
     }
     
-    &: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%;
+    .product--card--thumb {        
+      background: rgba(255, 255, 255, 0.05);
+      min-width:50%;
+      position: relative;        
+      max-height: 50vh;
+      border-radius: 20px;
+      position: relative;
+      overflow: hidden;
+      
+      .product--card--thumb--inner{
+        height:100%;    
+        min-height:50vh;            
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          display: block;
+          transition: transform 0.6s ease;
+          position: absolute;
+          height: 100%;        
+        }
         
-    @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;     
+        &:hover img {
+          transform: scale(1.05);
+        }
+      }
     }
-
-  }
-  
-  .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--content {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      @media screen and (min-width: 320px) {        
+        padding-block-start: var(--spacing-relative-lg);
+      }
+
+      @media screen and (min-width: 1024px) {                    
+        -webkit-box-pack: center;
+        justify-content: center;
+        align-items: flex-start;
+        padding-inline-start: var(--spacing-relative-2xl);
+        padding-inline-end: var(--spacing-relative-2xl);
+        padding-block-start: 0px;        
+      }
     }
-  }
-  
-  .product--card--description {
-    margin-top: 8px;
     
-    p {
+    .product--card--title {    
       margin: 0px;
-      color: rgba(252, 252, 253, 0.7);      
+      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: 16px;
-      line-height: 24px;
-      font-stretch: 105%;
+      line-height: 24px;        
+      
     }
-  }
-  
-  .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;
+    .product--card--description {
+      margin-top: 8px;
       
-      &:hover {
-        background: rgba(44,52,63);                 
-        box-shadow: rgba(219,223,230, .2) 0px 0px 0px 1px inset;
+      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;
       
-      &:active {
-        transform: translateY(0);
+      .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;
+    }
   }
-  
-  @media (max-width: 768px) {
-    padding: 24px;
-    gap: 24px;
-  }
-}
+}

app/components/block/ProductCard.vue

@@ -1,21 +1,26 @@
 <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 class="product--card--wrapper">
+    <div class="product--card" :data-layout="layout" :data-image-position="imagePosition">
+      <div class="product--card--thumb">
+        <div class="product--card--thumb--inner">
+          <!-- <img :src="image" :alt="imageAlt || title" loading="lazy" /> -->
+          <img :src="image" :alt="title || title" loading="lazy" />
+        </div>
       </div>
-      <div v-if="$slots.actions" class="product--card--actions">
-        <slot name="actions"></slot>
+      <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>
   </div>

app/components/block/cautionText2.vue

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

app/pages/exclusive/exclusive-edition.vue

@@ -10,13 +10,15 @@
       <div class="text--tab--layout">
         <ul>
           <li>
-            <NuxtLink to="/">Audi A6 Nardo Grey edition</NuxtLink>
+            <NuxtLink to="/exclusive/exclusive-edition"
+              >Audi A6 Nardo Grey edition</NuxtLink
+            >
           </li>
           <li>
-            <NuxtLink to="/">Audi Q7 exclusive edtion</NuxtLink>
+            <NuxtLink to="/exclusive/q7">Audi Q7 exclusive edtion</NuxtLink>
           </li>
           <li>
-            <NuxtLink to="/">Audi Q8 exclusive edition</NuxtLink>
+            <NuxtLink to="/exclusive/q8">Audi Q8 exclusive edition</NuxtLink>
           </li>
         </ul>
       </div>
@@ -25,7 +27,7 @@
       <LinkList class="mt--20" :links="reservationLinks" />
 
       <TitleVisual
-        title="Q8 50 TDI quattro exclusive edition"
+        title="A6 50 TDI quattro Nardo Grey edition"
         description=""
         textAlign="left"
         type="middle"
@@ -58,16 +60,21 @@
         type="vertical"
       />
 
-      <SwiperBanner
-        :slides="bannerSlides4"
-        :autoplay="false"
-        :loop="false"
-        fit="contain"
-        type="vertical"
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        data-type="square"
+        image="/img/exclusive/a6_730x730.webp"
+        title="A6 50 TDI quattro Nardo Grey edition"
+        subtitle="새로운 진보의 경험. 소수만을 위한 특별함이 당신을 기다립니다."
+        buttonText="예약금 결제"
+        buttonUrl="https://www.audi.co.kr/ko/kr-new-car-search/"
+        buttonTarget="_blank"
+        layout="horizontal"
+        imagePosition="right"
       />
 
-      <!-- 제품 카드 컴포넌트 -->
       <ProductCard
+        data-type="square"
         image="/img/exclusive/q8_1513x1513.webp"
         imageAlt="Audi Q8 50 TDI quattro exclusive edition"
         title="Q8 50 TDI quattro exclusive edition"
@@ -78,19 +85,32 @@
         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"
+        data-type="square"
+        image="/img/exclusive/exclusiveorder_Q7.webp"
+        title="Q7 50 TDI quattro exclusive edition"
+        subtitle="강력한 퍼포먼스가 선사하는 여유로움. 소수만을 위한 특별함이 당신을 기다립니다."
+        buttonText="자세히 보기"
+        buttonUrl="/exclusive/q7/"
+        buttonTarget="_self"
         layout="horizontal"
         imagePosition="right"
       />
+
+      <ProductCard
+        data-type="square"
+        image="/img/exclusive/audi-exclusive-studio_1.webp"
+        title="Audi exclusive order"
+        subtitle="Audi exclusive order를 통해, 당신만을 위한 아우디를 만나보세요."
+        buttonText="자세히 보기"
+        buttonUrl="/exclusive/exclusive-order"
+        buttonTarget="_self"
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <CautionText />
     </div>
   </main>
 </template>
@@ -102,13 +122,14 @@
   import LinkList from "~/components/block/LinkList.vue";
   import SwiperBanner from "~/components/block/SwiperBanner.vue";
   import ProductCard from "~/components/block/ProductCard.vue";
+  import CautionText from "~/components/block/cautionText2.vue";
 
   const bannerImagePath = ref("/img/exclusive/RSeGT_ae_2022_3855-S.jpg");
 
   // 링크 데이터 배열
   const reservationLinks = ref([
     {
-      text: "Q8 50 TDI quattro exclusive edition 예약금 결제",
+      text: "A6 50 TDI quattro Nardo Grey edition 예약금 결제",
       url: "https://www.audi.co.kr/ko/kr-new-car-search/",
       target: "_blank",
       showIcon: true,
@@ -117,85 +138,76 @@
 
   const bannerSlides = ref([
     {
-      image: "/img/exclusive/q8_front_1920x1080.jpg",
-      alt: "아우디 Q8",
+      image: "/img/exclusive/A6_45_Front.jpg",
+      alt: "아우디 A6",
       title: "",
-      subtitle: "아우디 Q8",
+      subtitle: "아우디 A6",
     },
     {
-      image: "/img/exclusive/q8_side_1920x1080.jpg",
-      alt: "아우디 Q8",
+      image: "/img/exclusive/A6_Front.jpg",
+      alt: "아우디 A6",
       title: "",
-      subtitle: "",
+      subtitle: "아우디 A6",
     },
     {
-      image: "/img/exclusive/q8_back_1920x1080.jpg",
-      alt: "아우디 Q8",
+      image: "/img/exclusive/A6_Side.jpg",
+      alt: "아우디 A6",
       title: "",
-      subtitle: "",
+      subtitle: "아우디 A6",
     },
     {
-      image: "/img/exclusive/q8_wheel.jpg",
-      alt: "아우디 Q8",
+      image: "/img/exclusive/A6_45_Back.jpg",
+      alt: "아우디 A6",
       title: "",
-      subtitle: "",
+      subtitle: "아우디 A6",
     },
-  ]);
-
-  const bannerSlides2 = ref([
     {
-      image: "/img/exclusive/q8_red.jpg",
-      alt: "아우디 Q8",
+      image: "/img/exclusive/A6_Back.jpg",
+      alt: "아우디 A6",
       title: "",
-      subtitle: "아우디 Q8",
-    },
-    {
-      image: "/img/exclusive/q8_red_2.jpg",
-      alt: "아우디 Q8",
-      title: "",
-      subtitle: "",
+      subtitle: "아우디 A6",
     },
+  ]);
+
+  const bannerSlides2 = ref([
     {
-      image: "/img/exclusive/q8_red_3.jpg",
-      alt: "아우디 Q8",
+      image: "/img/exclusive/black2.jpg",
+      alt: "아우디 A6",
       title: "",
-      subtitle: "",
+      subtitle: "아우디 A6",
     },
-  ]);
-
-  const bannerSlides3 = ref([
     {
-      image: "/img/exclusive/q8_BR.jpg",
-      alt: "아우디 Q8",
+      image: "/img/exclusive/black.jpg",
+      alt: "아우디 A6",
       title: "",
-      subtitle: "아우디 Q8",
+      subtitle: "아우디 A6",
     },
     {
-      image: "/img/exclusive/q8_BR.jpg",
-      alt: "아우디 Q8",
+      image: "/img/exclusive/sardbrown2.jpg",
+      alt: "아우디 A6",
       title: "",
-      subtitle: "",
+      subtitle: "아우디 A6",
     },
     {
-      image: "/img/exclusive/q8_BR_3.jpg",
-      alt: "아우디 Q8",
+      image: "/img/exclusive/sardbrown.jpg",
+      alt: "아우디 A6",
       title: "",
-      subtitle: "",
+      subtitle: "아우디 A6",
     },
   ]);
 
-  const bannerSlides4 = ref([
+  const bannerSlides3 = ref([
     {
-      image: "/img/exclusive/q8_red_1920x1080.jpg",
-      alt: "아우디 Q8",
+      image: "/img/exclusive/beige2.jpg",
+      alt: "아우디 A6",
       title: "",
-      subtitle: "아우디 Q8",
+      subtitle: "아우디 A6",
     },
     {
-      image: "/img/exclusive/q8_BR_1920x1080.jpg",
-      alt: "아우디 Q8",
+      image: "/img/exclusive/beige.jpg",
+      alt: "아우디 A6",
       title: "",
-      subtitle: "",
+      subtitle: "아우디 A6",
     },
   ]);
 </script>

app/pages/exclusive/q7.vue

@@ -0,0 +1,203 @@
+<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="/exclusive/q7">Audi Q7 exclusive edtion</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="/exclusive/q8">Audi Q8 exclusive edition</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="/exclusive/exclusive-edition"
+              >Audi A6 Nardo Grey edition</NuxtLink
+            >
+          </li>
+        </ul>
+      </div>
+
+      <!-- 링크 리스트 컴포넌트 -->
+      <LinkList class="mt--20" :links="reservationLinks" />
+
+      <TitleVisual
+        title="Q7 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/exclusiveorder_Q7.webp"
+        imageAlt="Q7 50 TDI quattro exclusive edition"
+        title="Q7 50 TDI quattro exclusive edition"
+        subtitle=""
+        buttonText="자세히 보기"
+        buttonUrl="/exclusive/q7/"
+        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: "Q7 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/q7_front_1920x1080.jpg",
+      alt: "아우디 Q7",
+      title: "",
+      subtitle: "",
+    },
+    {
+      image: "/img/exclusive/q7_side_1920x1080.jpg",
+      alt: "아우디 Q7",
+      title: "",
+      subtitle: "아우디 Q7",
+    },
+    {
+      image: "/img/exclusive/q7_back_1920x1080.jpg",
+      alt: "아우디 Q7",
+      title: "",
+      subtitle: "아우디 Q7",
+    },
+    {
+      image: "/img/exclusive/q7_wheel_1920x1080.jpg",
+      alt: "아우디 Q7",
+      title: "",
+      subtitle: "아우디 Q7",
+    },
+  ]);
+
+  const bannerSlides2 = ref([
+    {
+      image: "/img/exclusive/q7_red_1920x1080.jpg",
+      alt: "아우디 Q7",
+      title: "",
+      subtitle: "아우디 Q7",
+    },
+    {
+      image: "/img/exclusive/q7_red_2_1920x1080.jpg",
+      alt: "아우디 Q7",
+      title: "",
+      subtitle: "아우디 Q7",
+    },
+    {
+      image: "/img/exclusive/q7_red_3_1920x1080.jpg",
+      alt: "아우디 Q7",
+      title: "",
+      subtitle: "아우디 Q7",
+    },
+  ]);
+
+  const bannerSlides3 = ref([
+    {
+      image: "/img/exclusive/q7_BR_1920x1080.jpg",
+      alt: "아우디 Q7",
+      title: "",
+      subtitle: "아우디 Q7",
+    },
+    {
+      image: "/img/exclusive/q7_BR_1920x1080.jpg",
+      alt: "아우디 Q7",
+      title: "",
+      subtitle: "아우디 Q7",
+    },
+    {
+      image: "/img/exclusive/q7_BR_3_1920x1080.jpg",
+      alt: "아우디 Q7",
+      title: "",
+      subtitle: "아우디 Q7",
+    },
+  ]);
+
+  const bannerSlides4 = ref([
+    {
+      image: "/img/exclusive/q7_RE_1920x1080_BL.jpg",
+      alt: "Red",
+      title: "",
+      subtitle: "Red",
+    },
+    {
+      image: "/img/exclusive/q7_BR_1920x1080_BL.jpg",
+      alt: "Brown",
+      title: "",
+      subtitle: "Brown",
+    },
+  ]);
+</script>

app/pages/exclusive/q8.vue

@@ -0,0 +1,203 @@
+<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="/exclusive/q8">Audi Q8 exclusive edition</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="/exclusive/q7">Audi Q7 exclusive edtion</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="/exclusive/exclusive-edition"
+              >Audi A6 Nardo Grey 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/exclusiveorder_Q7.webp"
+        imageAlt="Q7 50 TDI quattro exclusive edition"
+        title="Q7 50 TDI quattro exclusive edition"
+        subtitle=""
+        buttonText="자세히 보기"
+        buttonUrl="/exclusive/q7/"
+        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>