메인추가~!

app/assets/scss/style.scss

@@ -324,6 +324,108 @@ header{
 }
 
 main{
+    .main--container{
+        max-width: 1920px;
+        margin: 0 auto;
+        .main--visual{
+            width: 100%;
+            height: calc(-72px + 100vh);
+            position: relative;
+            &::after{
+                background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 51.5%);
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                z-index: 0;
+                pointer-events: none;
+                content: '';
+                display: inline-block;
+            }
+            >div{
+                width: 100%;
+                height: 100%;
+                >img{
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+                >video{
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+                &.text--wrap{
+                    position: absolute;
+                    z-index: 1;
+                    top: 0;
+                    height: fit-content;
+                    left: 0;
+                    padding: 40px 0 0 96px;
+                    h2{
+                        font-size: 44px;
+                        line-height: 64px;
+                    }
+                    p{
+                        margin-top: 8px;
+                        font-size: 20px;
+                        line-height: 32px;
+                    }
+                    .button--wrap{
+                        margin-top: 24px;
+                        display: flex;
+                        gap: 8px;
+                    }
+                }
+            }
+        }
+        .img--desc--section{
+            display: flex;
+            padding: 64px 96px;
+            &.reverse{
+                flex-direction: row-reverse;
+                .desc--wrap{
+                    padding-right: 72px;
+                }
+            }
+            .img--wrap{
+                width: 50%;
+                border-radius: 20px;
+                overflow: hidden;
+                img{
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+            }
+            .desc--wrap{
+                width: 50%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                padding: 0 72px;
+                h3{
+                    font-size: 36px;
+                    margin-bottom: 8px;
+                }
+                h4{
+                    font-size: 24px;
+                }
+                p{
+                    font-size: 16px;
+                    color: rgba(252, 252, 253, 0.7);
+                    &.desc{
+                        font-size: 12px;
+                    }
+                }
+            }
+            .btn--wrap{
+                display: flex;
+                gap: 8px;
+            }
+        }
+    }
     .visual--section{
         position: relative;
         margin: 0 auto;
@@ -1124,6 +1226,23 @@ footer{
         background-image: url(/img/ico--link.svg);
     }
 }
+.btn--black{
+    transition: all 0.3s;
+    width: fit-content;
+    font-size: 14px;
+    display: inline-block;
+    font-weight: 400;
+    padding: 12px 24px;
+    border-radius: 100px;
+    background-color: rgb(24, 29, 37);
+    color: rgb(252, 252, 253);
+    box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
+    &:hover{
+        background-color: rgb(44, 52, 63);
+        color: rgb(252, 252, 253);
+        box-shadow: rgba(219, 223, 230, 0.2) 0px 0px 0px 1px inset;
+    }
+}
 .btn--gray{
     transition: all 0.3s;
     width: fit-content;
@@ -1276,7 +1395,7 @@ footer{
     top:50%;
     transform: translateY(-50%);
     right:0px;
-    z-index: 9999;
+    z-index: 998;
 }
 
 .quick__menu__wrap > a .thumb{
@@ -1365,16 +1484,40 @@ footer{
         justify-content: center;
         align-items: center;
         background: #000;
+        &.actv{
+            >a{
+                &:hover{
+                    >div{
+                        background-color: transparent!important;
+                    }
+                }
+            }
+        }
         >a{
             width: calc(100% / 9);
+            align-items: center;
             display: flex;
+            gap: 4px;
+            padding: 8px 0;
             flex-direction: column;
+            text-decoration: underline;
+            .thumb{
+                width: 26px;
+                height: 26px;
+            }
             >div{
                 &:nth-of-type(2){
                     position: static;
-                    width: auto;
                     text-align: center;
                     height: auto;
+                    padding: 0;
+                    font-size: 11px;
+                    width: 100%;
+                    justify-content: center;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    display: inline-block;
+                    text-overflow: ellipsis;
                 }
             }
         }
@@ -1395,11 +1538,14 @@ footer{
 }
 
 
-@media (max-width: 460px){
+@media (max-width: 500px){
     .quick__menu__wrap{
         overflow-x: auto;
         box-sizing: border-box;
-        padding:0 20px!important;
+        padding:0 10px!important;
         justify-content: flex-start!important;
+        >a{
+            min-width: 60px;
+        }
     }
 }

app/components/block/mainSection.vue

@@ -0,0 +1,98 @@
+<template>
+  <section :class="['img--desc--section', { reverse: reverse }]">
+    <!-- Video -->
+    <div v-if="type === 'video'" class="video--wrap">
+      <video :src="src" autoplay muted loop playsinline></video>
+    </div>
+
+    <!-- Image -->
+    <div v-else-if="type === 'image'" class="img--wrap">
+      <img :src="src" :alt="title" />
+    </div>
+
+    <div class="desc--wrap">
+      <h3>{{ title }}</h3>
+      <p>{{ desc }}</p>
+      <div v-if="button1Title || button2Title" class="btn--wrap mt--24">
+        <NuxtLink
+          v-if="button1Title"
+          :target="button1Target"
+          :to="button1Link"
+          :class="['btn', `btn--${button1Color}`]"
+        >
+          {{ button1Title }}
+        </NuxtLink>
+        <NuxtLink
+          v-if="button2Title"
+          :target="button2Target"
+          :to="button2Link"
+          :class="['btn', `btn--${button2Color}`]"
+        >
+          {{ button2Title }}
+        </NuxtLink>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  type: {
+    type: String,
+    default: 'image',
+    validator: (value) => ['video', 'image'].includes(value)
+  },
+  src: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  desc: {
+    type: String,
+    required: true
+  },
+  reverse: {
+    type: Boolean,
+    default: false
+  },
+  button1Title: {
+    type: String,
+    default: ''
+  },
+  button1Link: {
+    type: String,
+    default: '#'
+  },
+  button1Target: {
+    type: String,
+    default: '_self',
+    validator: (value) => ['_self', '_blank'].includes(value)
+  },
+  button1Color: {
+    type: String,
+    default: 'gray',
+    validator: (value) => ['black', 'gray'].includes(value)
+  },
+  button2Title: {
+    type: String,
+    default: ''
+  },
+  button2Link: {
+    type: String,
+    default: '#'
+  },
+  button2Target: {
+    type: String,
+    default: '_self',
+    validator: (value) => ['_self', '_blank'].includes(value)
+  },
+  button2Color: {
+    type: String,
+    default: 'gray',
+    validator: (value) => ['black', 'gray'].includes(value)
+  }
+});
+</script>

app/components/block/mainVisual.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="main--visual">
+    <!-- Video -->
+    <div v-if="type === 'video'" class="video--wrap">
+      <video :src="src" autoplay muted loop playsinline controls></video>
+    </div>
+
+    <!-- Image -->
+    <div v-else-if="type === 'image'" class="img--wrap">
+      <img :src="src" :alt="title" />
+    </div>
+
+    <div class="text--wrap">
+      <h2>{{ title }}</h2>
+      <p>{{ description }}</p>
+      <div v-if="button1Title || button2Title" class="button--wrap">
+        <NuxtLink
+          v-if="button1Title"
+          :to="button1Link"
+          :class="['btn', `btn--${button1Color}`]"
+        >
+          {{ button1Title }}
+        </NuxtLink>
+        <NuxtLink
+          v-if="button2Title"
+          :to="button2Link"
+          :class="['btn', `btn--${button2Color}`]"
+        >
+          {{ button2Title }}
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  type: {
+    type: String,
+    default: 'video',
+    validator: (value) => ['video', 'image'].includes(value)
+  },
+  src: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  button1Title: {
+    type: String,
+    default: ''
+  },
+  button1Link: {
+    type: String,
+    default: '#'
+  },
+  button1Color: {
+    type: String,
+    default: 'black',
+    validator: (value) => ['black', 'gray'].includes(value)
+  },
+  button2Title: {
+    type: String,
+    default: ''
+  },
+  button2Link: {
+    type: String,
+    default: '#'
+  },
+  button2Color: {
+    type: String,
+    default: 'gray',
+    validator: (value) => ['black', 'gray'].includes(value)
+  }
+});
+</script>

app/pages/index.vue

@@ -1,6 +1,41 @@
 <template>
   <main>
-    <carouselModels />
+    <div class="main--container">
+      <blockMainVisual
+        type="video"
+        src="/img/main/video--main1.mp4"
+        title="The new Audi S e-tron GT 출시"
+        description="Adrenaline, Fully Charged"
+        button1Title="상담 신청"
+        button1Link=""
+        button2Title="자세히 보기"
+        button2Link=""
+        button1Color="gray"
+        button2Color="black"
+      />
+      <carouselModels />
+      <blockMainSection
+        type="image"
+        src="/img/main/img--main1.jpg"
+        title="조수석을 위한 엔터테인먼트 센터"
+        desc="MMI 조수석 디스플레이를 통해 스포츠 생중계, 영화, TV 시리즈까지 자유롭게 감상할 수 있습니다. 운전자의 집중을 방해하지 않도록 설계된 프라이버시 모드도 탑재되어있습니다. 이 모든 기술의 개발자인 롤랜드 세이거를 만나러 갑니다."
+        button1Title="시승 신청"
+        button1Color="gray"
+        button2Title="자세히 보기"
+        button2Color="black"
+      />
+      <blockMainSection
+        type="image"
+        src="/img/main/img--main1.jpg"
+        title="조수석을 위한 엔터테인먼트 센터"
+        desc="MMI 조수석 디스플레이를 통해 스포츠 생중계, 영화, TV 시리즈까지 자유롭게 감상할 수 있습니다. 운전자의 집중을 방해하지 않도록 설계된 프라이버시 모드도 탑재되어있습니다. 이 모든 기술의 개발자인 롤랜드 세이거를 만나러 갑니다."
+        button1Title="시승 신청"
+        button1Color="gray"
+        button2Title="자세히 보기"
+        button2Color="black"
+        reverse
+      />
+    </div>
     <Popup />
   </main>
 </template>