메인 완료, gnb 작업중

app/app.vue

@@ -4,6 +4,7 @@
     <UMain>
       <NuxtPage />
     </UMain>
+    <Footer />
   </UApp>
 </template>
 <style setup>

app/assets/scss/style.scss

@@ -37,14 +37,17 @@
         }
         .menu--wrap{
             display: flex;
-            li{
-                a{
+            .menu--item{
+                position: relative;
+
+                > a{
                     color: #fff;
                     font-weight: normal;
                     padding: 0 30px;
                     display: inline-block;
                     height: 80px;
                     font-weight: 700;
+                    transition: color 0.3s;
                     font-size: 16px;
                     line-height: 80px;
                     position: relative;
@@ -57,14 +60,51 @@
                         transform: translateX(-50%);
                         height: 2px;
                         width: 0;
-                        background-color: #fff;
+                        background-color: #00A654;
                     }
                     &:hover{
+                        color: #00A654;
                         &::before{
                             width: calc(100% - 50px);
                         }
                     }
                 }
+
+                .submenu{
+                    position: absolute;
+                    top: 80px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    background-color: rgba(0, 0, 0, 0.9);
+                    backdrop-filter: blur(10px);
+                    min-width: 160px;
+                    padding: 20px 0;
+                    border-radius: 8px;
+                    opacity: 0;
+                    visibility: hidden;
+                    transition: all 0.3s ease;
+                    z-index: 1000;
+
+                    li{
+                        a{
+                            color: #fff;
+                            padding: 12px 24px;
+                            display: block;
+                            font-size: 14px;
+                            font-weight: 500;
+                            transition: all 0.3s ease;
+                            &:hover{
+                                background-color: rgba(255, 255, 255, 0.1);
+                                color: #10b981;
+                            }
+                        }
+                    }
+                }
+
+                &:hover .submenu{
+                    opacity: 1;
+                    visibility: visible;
+                }
             }
         }
         .lang--wrap{
@@ -87,101 +127,518 @@
     }
 }
 
-.main--visual--wrap{
-    .main--swiper--wrap{
-        width: 100%;
-        position: relative;
-        .main--swiper{
-            .visual--img{
-                position: relative;
-                .txt--wrap{
-                    width: 100%;
-                    text-align: center;
-                    height: 100%;
+main{
+    .main--visual--wrap{
+        .main--swiper--wrap{
+            width: 100%;
+            position: relative;
+            .main--swiper{
+                .visual--img{
+                    position: relative;
+                    .txt--wrap{
+                        width: 100%;
+                        text-align: center;
+                        height: 100%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        position: absolute;
+                        h2{
+                            color: #fff;
+                            font-size: 48px;
+                            font-weight: 800;
+                            line-height: 1.4;
+                        }
+                    }
+                    .img--wrap{
+                        img{
+                            width: 100%;
+                            height: 100vh;
+                            object-fit: cover;
+                        }
+                    }
+                }
+            }
+            .swiper--control--wrap{
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                height: 84px;
+                display: flex;
+                justify-content: center;
+                gap: 16px;
+                align-items: center;
+                z-index: 10;
+                width: 100%;
+                .pagination--wrap{
                     display: flex;
+                    gap: 12px;
                     align-items: center;
-                    justify-content: center;
-                    position: absolute;
-                    h2{
+                    .current{
                         color: #fff;
-                        font-size: 48px;
-                        font-weight: 800;
-                        line-height: 1.4;
+                        font-size: 14px;
+                        font-weight: 700;
+                    }
+                    .bar{
+                        opacity: 0.5;
+                        background-color: #fff;
+                        width: 1px;
+                        height: 12px;
+                    }
+                    .total{
+                        font-size: 14px;
+                        font-weight: 700;
+                        color: #fff;
+                        opacity: 0.5;
                     }
                 }
-                .img--wrap{
-                    img{
-                        width: 100%;
-                        height: 100vh;
-                        object-fit: cover;
+                .swiper--pagination{
+                    width: 150px;
+                    position: relative;
+                    height: 2px;
+                    background-color: rgba(255,255,255,0.5);
+                    .swiper-pagination-progressbar-fill{
+                        background-color: #fff;
+                    }
+                }
+                .swiper--btn--wrap{
+                    display: flex;
+                    gap:4px;
+                    align-items: center;
+                    justify-content: center;
+                    .swiper--btn--prev{
+                        width: 20px;
+                        height: 20px;
+                        background-image: url(/img/ico--swiper--prev.svg);
+                    }
+                    .swiper--btn--next{
+                        width: 20px;
+                        height: 20px;
+                        background-image: url(/img/ico--swiper--next.svg);
+                    }
+                    .play--btn{
+                        width: 20px;
+                        height: 20px;
+                        background-image: url(/img/ico--pause.svg);
+                        &.pause{
+                            background-image: url(/img/ico--play.svg);
+                        }
                     }
                 }
             }
         }
-        .swiper--control--wrap{
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            height: 84px;
+    }
+
+    .main--content--wrap{
+        &.bg--type{
+            background-image: url(/img/main--bg.png);
+            background-position: center;
+            background-size: cover;
+            background-repeat: no-repeat;
+        }
+        &.black--type{
+            background-color: #1F2128;
+        }
+        &.gray--type{
+            background-color: #F6F8FF;
+        }
+        &.white--txt{
+            color: #fff !important;
+            *{
+                color: #fff!important;
+            }
+        }
+        .main--container{
+            margin: 0 auto;
+            width: 100%;
+            max-width: 1280px;
+            padding: 100px 0;
+            .title--wrap{
+                text-align: center;
+                .green--title{
+                    margin-bottom: 16px;
+                    color: #00a654!important;
+                    font-size: 18px;
+                    font-weight: 700;
+                }
+                .sub--title{
+                    color: #1f2128;
+                    font-size: 20px;
+                    font-weight: 400;
+                    margin-bottom: 12px;
+                }
+                >h2{
+                    color: #1f2128;
+                    font-size: 40px;
+                    font-weight: 700;
+                }
+            }
+            .content--wrap{
+                .img--card--wrap{
+                    display: flex;
+                    margin-bottom: 40px;
+                    justify-content: space-between;
+                    .card{
+                        img{
+                            width: 100%;
+                        }
+                    }
+                }
+                .square--card--wrap{
+                    width: 100%;
+                    margin-bottom: 40px;
+                    display: flex;
+                    flex-wrap: wrap;
+                    justify-content: center;
+                    gap: 20px;
+                    align-items: center;
+                    .card{
+                        width: calc((100% - 40px) / 3);
+                        padding: 20px 24px 60px 24px;
+                        display: flex;
+                        flex-direction: column;
+                        gap: 8px;
+                        border: 1px solid rgba(255, 255, 255, 0.30);
+                        background-color: rgba(0, 0, 0, 0.30);
+                        backdrop-filter: blur(6px);
+                        dt{
+                            font-size: 24px;
+                            font-weight: 700;
+                        }
+                        dd{
+                            font-size: 16px;
+                            font-weight: 400;
+                        }
+                    }
+                }
+                .number--card--wrap{
+                    display: flex;
+                    gap: 20px;
+                    width: 100%;
+                    .card{
+                        width: calc((100% - 40px) / 3);
+                        padding: 0 40px;
+                        display: flex;
+                        flex-direction: column;
+                        gap: 24px;
+                        align-items: center;
+                        text-align: center;
+                        .ico{
+                            width: 48px;
+                            height: 48px;
+                            background-image: url(/img/ico--main1.svg);
+                        }
+                        .card--title{
+                            display: flex;
+                            flex-direction: column;
+                            gap: 8px;
+                            align-items: center;
+                            .circle{
+                                border-radius: 24px;
+                                background-color: #2f3342;
+                                width: fit-content;
+                                font-size: 16px;
+                                padding: 3px 12px;
+                                font-weight: 700;
+                            }
+                            .number--wrap{
+                                .number{
+                                    font-size: 60px;
+                                    font-weight: 900;
+                                }
+                                .percent{
+                                    font-size: 48px;
+                                    font-weight: 900;
+                                }
+                            }
+                            .sub--txt{
+                                font-size: 18px;
+                                font-weight: 700;
+                            }
+                        }
+                        .card--desc{
+                            display: flex;
+                            flex-direction: column;
+                            gap: 4px;
+                            li{
+                                display: flex;
+                                gap: 12px;
+                                text-align: left;
+                                .nation{
+                                    color: #00a654!important;
+                                    font-size: 14px;
+                                    font-weight: 400;
+                                    line-height: 1.8;
+                                    width: 18px;
+                                }
+                                .txt{
+                                    width: calc(100% - 30px);
+                                    strong{
+                                        font-size: 14px;
+                                        font-weight: 700;
+                                    }
+                                    span{
+                                        color: #78809b!important;
+                                        font-size: 14px;
+                                        font-weight: 400;
+                                    }
+                                }
+                            }
+                        }
+                        &:nth-of-type(2){
+                            .ico{
+                                background-image: url(/img/ico--main2.svg);
+                            }
+                        }
+                        &:nth-of-type(3) {
+                            .ico {
+                                background-image: url(/img/ico--main3.svg);
+                            }
+                        }
+                    }
+                }
+                .news--card--wrap{
+                    margin-bottom: 40px;
+                    display: flex;
+                    gap: 30px;
+                    .news{
+                        width: calc((100% - 60px) / 3);
+                        display: flex;
+                        flex-direction: column;
+                        gap: 24px;
+                        border-top: 1px solid #1f2128;
+                        padding-top: 24px;
+                        .news--title{
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            display: -webkit-box;
+                            -webkit-line-clamp: 2;
+                            -webkit-box-orient: vertical;
+                            color: #1f2128;
+                            font-size: 20px;
+                            font-weight: 700;
+                        }
+                        .news--cont{
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            display: -webkit-box;
+                            -webkit-line-clamp: 3;
+                            -webkit-box-orient: vertical;
+                            color: #515973;
+                            font-size: 16px;
+                            font-weight: 400;
+                        }
+                        .news--date{
+                            color: #515973;
+                            font-size: 16px;
+                            font-weight: 400;
+                        }
+                    }
+                }
+            }
+        }
+        .black--btn--wrap{
             display: flex;
             justify-content: center;
-            gap: 16px;
             align-items: center;
-            z-index: 10;
-            width: 100%;
-            .pagination--wrap{
+            .black--btn{
+                border-radius: 24px;
+                background-color: #1f2128;
+                width: 128px;
+                height: 44px;
+                line-height: 44px;
                 display: flex;
-                gap: 12px;
                 align-items: center;
-                .current{
-                    color: #fff;
-                    font-size: 14px;
+                justify-content: center;
+                color: #fff;
+                gap: 8px;
+                font-size: 16px;
+                font-weight: 700;
+                .ico{
+                    background-image: url(/img/ico--more--arrow.svg);
+                    width: 24px;
+                    height: 24px;
+                }
+                &.blur--type{
+                    backdrop-filter: blur(6px);
+                }
+            }
+        }
+        .swiper--container{
+            padding: 100px 0;
+            .title--wrap {
+                text-align: center;
+        
+                .green--title {
+                    margin-bottom: 16px;
+                    color: #00a654 !important;
+                    font-size: 18px;
                     font-weight: 700;
                 }
-                .bar{
-                    opacity: 0.5;
-                    background-color: #fff;
-                    width: 1px;
-                    height: 12px;
+        
+                .sub--title {
+                    color: #1f2128;
+                    font-size: 20px;
+                    font-weight: 400;
+                    margin-bottom: 12px;
                 }
-                .total{
-                    font-size: 14px;
+        
+                >h2 {
+                    color: #1f2128;
+                    font-size: 40px;
                     font-weight: 700;
-                    color: #fff;
-                    opacity: 0.5;
                 }
             }
-            .swiper--pagination{
-                width: 150px;
-                position: relative;
-                height: 2px;
-                background-color: rgba(255,255,255,0.5);
-                .swiper-pagination-progressbar-fill{
-                    background-color: #fff;
+            .item--swiper--wrap{
+                .item--swiper{
+                    .item--img{
+                        display: flex;
+                        flex-direction: column;
+                        gap: 16px;
+                        .img--wrap{
+                            img{
+                                width: 100%;
+                            }
+                        }
+                        .txt--wrap{
+                            color: #1f2128;
+                            font-size: 14px;
+                            font-weight: 500;
+                        }
+                    }
                 }
             }
-            .swiper--btn--wrap{
+            .marquee--wrap{
+                overflow: hidden;
+                .vue3-marquee{
+                    overflow: hidden;
+                }
+                .marquee{
+                    display: flex;
+                    gap: 40px;
+                    width: fit-content;
+                    .logo--wrap{
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        width: 180px;
+                        height: 108px;
+                    }
+                }
+            }
+        }
+    }
+    
+}
+
+.footer--wrap{
+    background-color: #000;
+    .footer--container{
+        max-width: 1280px;
+        width: 100%;
+        margin: 0 auto;
+        padding: 40px 0 60px;
+        .footer--top{
+            display: flex;
+            justify-content: space-between;
+            .logo--wrap{
+
+            }
+            .menu--wrap{
                 display: flex;
-                gap:4px;
-                align-items: center;
-                justify-content: center;
-                .swiper--btn--prev{
-                    width: 20px;
-                    height: 20px;
-                    background-image: url(/img/ico--swiper--prev.svg);
-                }
-                .swiper--btn--next{
-                    width: 20px;
-                    height: 20px;
-                    background-image: url(/img/ico--swiper--next.svg);
-                }
-                .play--btn{
-                    width: 20px;
-                    height: 20px;
-                    background-image: url(/img/ico--pause.svg);
-                    &.pause{
-                        background-image: url(/img/ico--play.svg);
+                gap: 20px;
+                >li{
+                    width: 140px;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 20px;
+                    >a{
+                        color: #b6bbcc;
+                        font-size: 15px;
+                        font-weight: 400;
                     }
+                    >ul{
+                        display: flex;
+                        flex-direction: column;
+                        width: 100%;
+                        gap: 20px;
+                        >li{
+                            width: 100%;
+                            >a{
+                                display: inline-block;
+                                width: 100%;
+                                font-size: 16px;
+                                font-weight: 500;
+                                color: #fff;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .footer--bot{
+            display: flex;
+            flex-direction: column;
+            margin-top: 40px;
+            padding-top: 20px;
+            border-top: 1px solid rgba(255, 255, 255, 0.2);
+            .sns--list{
+                display: flex;
+                gap: 20px;
+                margin-bottom: 20px;
+                li{
+                    height: 24px;
+                    width: 24px;
+                    a{
+                        display: inline-block;
+                        width: 24px;
+                        height: 24px;
+                        &.blog{
+                            background-image: url(/img/ico--blog.svg);
+                        }
+                        &.ytb{
+                            background-image: url(/img/ico--ytb.svg);
+                        }
+                        &.fb {
+                            background-image: url(/img/ico--fb.svg);
+                        }
+                        &.insta{
+                            background-image: url(/img/ico--insta.svg);
+                        }
+                    }
+                }
+            }
+            .bar{
+                width: 1px;
+                height: 12px;
+                background-color: #fff;
+                opacity: 0.2;
+            }
+            .info--list{
+                align-items: center;
+                display: flex;
+                flex-wrap: wrap;
+                gap: 8px;
+                li{
+                    color: #B6BBCC;
+                    font-size: 14px;
+                    font-weight: 400;
+                }
+            }
+            .copyright{
+                margin-top: 20px;
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                span{
+                    color: #B6BBCC;
+                    font-size: 14px;
+                    font-weight: 400;
+                }
+                a{
+                    color: #b6bbcc;
+                    font-size: 14px;
+                    font-weight: 400;
                 }
             }
         }

app/components/footer.vue

@@ -0,0 +1,79 @@
+<template>
+    <footer>
+        <div class="footer--wrap">
+            <div class="footer--container">
+              <div class="footer--top">
+                <div class="logo--wrap">
+                  <NuxtLink to="/">
+                    <img src="/img/footer--logo.svg" alt="그린웨일글로벌" />
+                  </NuxtLink>
+                </div>
+                <ul class="menu--wrap">
+                  <li><NuxtLink to="/company/intro">Company</NuxtLink>
+                    <ul>
+                      <li><NuxtLink to="/company/intro">회사소개</NuxtLink></li>
+                      <li><NuxtLink to="/company/history">회사연혁</NuxtLink></li>
+                      <li><NuxtLink to="/company/partners">협력업체</NuxtLink></li>
+                    </ul>
+                  </li>
+                  <li><NuxtLink to="/products/materials">Products</NuxtLink>
+                    <ul>
+                      <li><NuxtLink to="/products/materials">Materials</NuxtLink></li>
+                      <li><NuxtLink to="/products/solutions">Solutions</NuxtLink></li>
+                    </ul>
+                  </li>
+                  <li><NuxtLink to="/technology/facilities">Technology</NuxtLink>
+                    <ul>
+                      <li><NuxtLink to="/technology/facilities">시설</NuxtLink></li>
+                      <li><NuxtLink to="/technology/patents">특허 / 인증</NuxtLink></li>
+                    </ul>
+                  </li>
+                  <li><NuxtLink to="/media/news">Media</NuxtLink>
+                    <ul>
+                      <li><NuxtLink to="/media/news">환경뉴스</NuxtLink></li>
+                      <li><NuxtLink to="/media/press">보도자료</NuxtLink></li>
+                    </ul>
+                  </li>
+                  <li><NuxtLink to="/contact/notice">Contact</NuxtLink>
+                    <ul>
+                      <li><NuxtLink to="/contact/notice">공지사항</NuxtLink></li>
+                      <li><NuxtLink to="/contact/faq">FAQ</NuxtLink></li>
+                      <li><NuxtLink to="/contact/support">고객센터</NuxtLink></li>
+                      <li><NuxtLink to="/contact/location">오시는길</NuxtLink></li>
+                    </ul>
+                  </li>
+                </ul>
+              </div>
+              <div class="footer--bot">
+                <ul class="sns--list">
+                  <li><NuxtLink to="/" class="blog"></NuxtLink></li>
+                  <li><NuxtLink to="/" class="ytb"></NuxtLink></li>
+                  <li><NuxtLink to="/" class="fb"></NuxtLink></li>
+                  <li><NuxtLink to="/" class="insta"></NuxtLink></li>
+                </ul>
+                <ul class="info--list">
+                  <li>사업자명 : 그린웨일글로벌 주식회사</li>
+                  <span class="bar"></span>
+                  <li>사무실 : 서울시 강남구 언주로 650 한국건설기술인협회 신관 2층</li>
+                  <span class="bar"></span>
+                  <li>대표이사 : 윤태균</li>
+                  <span class="bar"></span>
+                  <li>사업자번호 : 861-88-01187</li>
+                </ul>
+                <ul class="info--list mt-[4px]">
+                  <li>Tel : 02-3447-8801 / 8802</li>
+                  <span class="bar"></span>
+                  <li>E-Mail : green@greenwhaleglobal.com</li>
+                </ul>
+                <p class="copyright">
+                  <span>
+                    Copyright © Greenwhaleglobal. All rights reserved.
+                  </span>
+                  <span class="bar"></span>
+                  <NuxtLink to="/">개인정보취급방침</NuxtLink>
+                </p>
+              </div>
+            </div>
+        </div>
+    </footer>
+</template>

app/components/header.vue

@@ -4,15 +4,48 @@
             <div class="header--container">
                 <div class="logo--wrap">
                     <NuxtLink to="/">
-                        <img src="/img/header--logo.svg" alt="">
+                        <img src="/img/header--logo.svg" alt="그린웨일글로벌">
                     </NuxtLink>
                 </div>
                 <ul class="menu--wrap">
-                    <li><NuxtLink to="/">Company</NuxtLink></li>
-                    <li><NuxtLink to="/">Products</NuxtLink></li>
-                    <li><NuxtLink to="/">Technology</NuxtLink></li>
-                    <li><NuxtLink to="/">Media</NuxtLink></li>
-                    <li><NuxtLink to="/">Contact</NuxtLink></li>
+                    <li class="menu--item">
+                        <NuxtLink to="/company/intro">Company</NuxtLink>
+                        <ul class="submenu">
+                            <li><NuxtLink to="/company/intro">회사소개</NuxtLink></li>
+                            <li><NuxtLink to="/company/history">회사연혁</NuxtLink></li>
+                            <li><NuxtLink to="/company/partners">협력업체</NuxtLink></li>
+                        </ul>
+                    </li>
+                    <li class="menu--item">
+                        <NuxtLink to="/products/materials">Products</NuxtLink>
+                        <ul class="submenu">
+                            <li><NuxtLink to="/products/materials">Materials</NuxtLink></li>
+                            <li><NuxtLink to="/products/solutions">Solutions</NuxtLink></li>
+                        </ul>
+                    </li>
+                    <li class="menu--item">
+                        <NuxtLink to="/technology/facilities">Technology</NuxtLink>
+                        <ul class="submenu">
+                            <li><NuxtLink to="/technology/facilities">시설</NuxtLink></li>
+                            <li><NuxtLink to="/technology/patents">특허 / 인증</NuxtLink></li>
+                        </ul>
+                    </li>
+                    <li class="menu--item">
+                        <NuxtLink to="/media/news">Media</NuxtLink>
+                        <ul class="submenu">
+                            <li><NuxtLink to="/media/news">환경뉴스</NuxtLink></li>
+                            <li><NuxtLink to="/media/press">보도자료</NuxtLink></li>
+                        </ul>
+                    </li>
+                    <li class="menu--item">
+                        <NuxtLink to="/contact/notice">Contact</NuxtLink>
+                        <ul class="submenu">
+                            <li><NuxtLink to="/contact/notice">공지사항</NuxtLink></li>
+                            <li><NuxtLink to="/contact/faq">FAQ</NuxtLink></li>
+                            <li><NuxtLink to="/contact/support">고객센터</NuxtLink></li>
+                            <li><NuxtLink to="/contact/location">오시는길</NuxtLink></li>
+                        </ul>
+                    </li>
                 </ul>
                 <div class="lang--wrap">
                     <i class="ico"></i>

app/components/itemSlide.vue

@@ -0,0 +1,83 @@
+<template>
+  <section class="main--content--wrap">
+    <div class="swiper--container">
+      <div class="title--wrap">
+        <h3 class="green--title">
+          Products
+        </h3>
+        <h2 class="mb-[28px]">그린웨일글로벌의 친환경 바이오플라스틱을 통해 만든 <br />다양한 제품들을 소개합니다.</h2>
+      </div>
+      <div class="black--btn--wrap mb-[40px]">
+        <NuxtLink class="black--btn" to="/">더보기<i class="ico"></i></NuxtLink>
+      </div>
+      <div class="item--swiper--wrap">
+        <swiper
+          ref="itemSwiperRef"
+          class="item--swiper"
+          loop="true"
+          :slides-per-view="4"
+          :space-between="20"
+          :slides-offset-before="-50"
+          :autoplay="{
+            delay: 2000,
+            disableOnInteraction: false,
+          }"
+          :modules="modules"
+        >
+          <swiper-slide class="item--img">
+            <div class="img--wrap"><img src="/img/main--slide1.png" /></div>
+            <div class="txt--wrap"><h4>Fashion & Cosmetics</h4></div>
+          </swiper-slide>
+          <swiper-slide class="item--img">
+            <div class="img--wrap"><img src="/img/main--slide2.png" /></div>
+            <div class="txt--wrap"><h4>Food & Beverage</h4></div>
+          </swiper-slide>
+          <swiper-slide class="item--img">
+            <div class="img--wrap"><img src="/img/main--slide3.png" /></div>
+            <div class="txt--wrap"><h4>Household & Smart Living</h4></div>
+          </swiper-slide>
+          <swiper-slide class="item--img">
+            <div class="img--wrap"><img src="/img/main--slide4.png" /></div>
+            <div class="txt--wrap"><h4>Electronics & Robotics</h4></div>
+          </swiper-slide>
+          <swiper-slide class="item--img">
+            <div class="img--wrap"><img src="/img/main--slide5.png" /></div>
+            <div class="txt--wrap"><h4>Mobility & Construction</h4></div>
+          </swiper-slide>
+                    <swiper-slide class="item--img">
+            <div class="img--wrap"><img src="/img/main--slide1.png" /></div>
+            <div class="txt--wrap"><h4>Fashion & Cosmetics</h4></div>
+          </swiper-slide>
+          <swiper-slide class="item--img">
+            <div class="img--wrap"><img src="/img/main--slide2.png" /></div>
+            <div class="txt--wrap"><h4>Food & Beverage</h4></div>
+          </swiper-slide>
+          <swiper-slide class="item--img">
+            <div class="img--wrap"><img src="/img/main--slide3.png" /></div>
+            <div class="txt--wrap"><h4>Household & Smart Living</h4></div>
+          </swiper-slide>
+          <swiper-slide class="item--img">
+            <div class="img--wrap"><img src="/img/main--slide4.png" /></div>
+            <div class="txt--wrap"><h4>Electronics & Robotics</h4></div>
+          </swiper-slide>
+          <swiper-slide class="item--img">
+            <div class="img--wrap"><img src="/img/main--slide5.png" /></div>
+            <div class="txt--wrap"><h4>Mobility & Construction</h4></div>
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+  </section>
+</template>
+<script setup>
+  import { ref } from 'vue'
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+  import { Autoplay } from 'swiper/modules';
+  import 'swiper/css';
+  import 'swiper/css/navigation';
+  import 'swiper/css/pagination';
+
+  const itemSwiperRef = ref(null)
+
+  const modules = [Autoplay]
+</script>

app/components/mainVisual.vue

@@ -0,0 +1,88 @@
+<template>
+  <section class="main--visual--wrap">
+    <div class="main--swiper--wrap">
+      <swiper
+        ref="mainSwiperRef"
+        :pagination="{
+          type: 'progressbar',
+          el: '.swiper--pagination'
+        }"
+        :navigation="{
+          nextEl: '.swiper--btn--next',
+          prevEl: '.swiper--btn--prev'
+        }"
+        :modules="modules"
+        class="main--swiper"
+        loop="true"
+        @swiper="onSwiper"
+        :autoplay="{
+          delay: 3000,
+          disableOnInteraction: false,
+        }"
+      >
+        <swiper-slide class="visual--img">
+          <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
+          <div class="img--wrap"><img src="/img/main1.png" /></div>
+        </swiper-slide>
+        <swiper-slide class="visual--img">
+          <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
+          <div class="img--wrap"><img src="/img/main2.png" /></div>
+        </swiper-slide>
+        <swiper-slide class="visual--img">
+          <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
+          <div class="img--wrap"><img src="/img/main3.png" /></div>
+        </swiper-slide>
+      </swiper>
+
+      <div class="swiper--control--wrap">
+        <div class="pagination--wrap">
+          <span class="current">{{ currentSlide }}</span>
+          <span class="bar"></span>
+          <span class="total">{{ totalSlides }}</span>
+        </div>
+        <div class="swiper--pagination"></div>
+        <div class="swiper--btn--wrap">
+          <div class="swiper--btn--prev"></div>
+          <button @click="toggleAutoplay" :class="['play--btn', { 'pause': !isPlaying }]">
+          </button>
+          <div class="swiper--btn--next"></div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script setup>
+  import { ref } from 'vue'
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+  import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+  import 'swiper/css';
+  import 'swiper/css/navigation';
+  import 'swiper/css/pagination';
+
+  const mainSwiperRef = ref(null)
+  const swiperInstance = ref(null)
+  const currentSlide = ref(1)
+  const totalSlides = ref(0)
+  const isPlaying = ref(true)
+
+  const modules = [Navigation, Pagination, Autoplay]
+
+  const onSwiper = (swiper) => {
+    swiperInstance.value = swiper
+    totalSlides.value = document.querySelectorAll('.swiper-slide:not(.swiper-slide-duplicate)').length
+    swiper.on('slideChange', () => {
+      currentSlide.value = swiper.realIndex + 1
+    })
+  }
+
+  const toggleAutoplay = () => {
+    if (swiperInstance.value) {
+      if (isPlaying.value) {
+        swiperInstance.value.autoplay.stop()
+      } else {
+        swiperInstance.value.autoplay.start()
+      }
+      isPlaying.value = !isPlaying.value
+    }
+  }
+</script>

app/components/marqueeContent.vue

@@ -0,0 +1,98 @@
+<template>
+  <section class="main--content--wrap gray--type">
+    <div class="swiper--container">
+      <div class="title--wrap">
+        <h3 class="green--title">
+          Partners
+        </h3>
+        <h2 class="mb-[28px]">국내외 주요 기업과 단체가 <br/> 그린웨일글로벌과 함께 하고 있습니다.</h2>
+        <div class="black--btn--wrap mb-[40px]">
+          <NuxtLink class="black--btn" to="/">더보기<i class="ico"></i></NuxtLink>
+        </div>
+      </div>
+      <div class="marquee--wrap">
+        <Vue3Marquee :duration="50" :pauseOnHover="true">
+          <div class="logo--wrap">
+            <img src="/img/logo1.svg" alt="emis" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo2.svg" alt="Fab 365" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo3.svg" alt="LG디스플레이" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo4.svg" alt="현대" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo5.svg" alt="신세계" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo6.svg" alt="Acecook" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo1.svg" alt="emis" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo2.svg" alt="Fab 365" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo3.svg" alt="LG디스플레이" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo4.svg" alt="현대" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo5.svg" alt="신세계" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo6.svg" alt="Acecook" />
+          </div>
+        </Vue3Marquee>
+
+        <Vue3Marquee :duration="50" direction="reverse" :pauseOnHover="true">
+          <div class="logo--wrap">
+            <img src="/img/logo7.svg" alt="CJ HDC biosol" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo8.svg" alt="WONLIM" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo9.svg" alt="otterBox" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo10.svg" alt="투디엠" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo11.svg" alt="MARIBUMI Starchtech" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo12.svg" alt="STAND OIL" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo7.svg" alt="CJ HDC biosol" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo8.svg" alt="WONLIM" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo9.svg" alt="otterBox" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo10.svg" alt="투디엠" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo11.svg" alt="MARIBUMI Starchtech" />
+          </div>
+          <div class="logo--wrap">
+            <img src="/img/logo12.svg" alt="STAND OIL" />
+          </div>
+        </Vue3Marquee>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { Vue3Marquee } from 'vue3-marquee'
+</script>

app/pages/company/index.vue

@@ -0,0 +1,6 @@
+<template>
+  <main>
+
+    <MarqueeContent />
+  </main>
+</template>

app/pages/index.vue

@@ -1,90 +1,198 @@
 <template>
   <main>
-    <div class="main--visual--wrap">
-      <div class="main--swiper--wrap">
-        <swiper
-          ref="mainSwiperRef"
-          :pagination="{
-            type: 'progressbar',
-            el: '.swiper--pagination'
-          }"
-          :navigation="{
-            nextEl: '.swiper--btn--next',
-            prevEl: '.swiper--btn--prev'
-          }"
-          :modules="modules"
-          class="main--swiper"
-          loop="true"
-          @swiper="onSwiper"
-        >
-          <!-- :autoplay="{
-            delay: 3000,
-            disableOnInteraction: false,
-          }" -->
-          <swiper-slide class="visual--img">
-            <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
-            <div class="img--wrap"><img src="/img/main1.png" /></div>
-          </swiper-slide>
-          <swiper-slide class="visual--img">
-            <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
-            <div class="img--wrap"><img src="/img/main2.png" /></div>
-          </swiper-slide>
-          <swiper-slide class="visual--img">
-            <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
-            <div class="img--wrap"><img src="/img/main3.png" /></div>
-          </swiper-slide>
-        </swiper>
-
-        <div class="swiper--control--wrap">
-          <div class="pagination--wrap">
-            <span class="current">{{ currentSlide }}</span>
-            <span class="bar"></span>
-            <span class="total">{{ totalSlides }}</span>
+    <MainVisual />
+    <section class="main--content--wrap">
+      <div class="main--container">
+        <div class="title--wrap mb-[40px]">
+          <h3 class="green--title">Brand Story</h3>
+          <p class="sub--title">연간 4억톤 이상 폐기물이 버려져<br> 우리의 지구 환경에 많은 악영향을 주고 있습니다.</p>
+          <h2>그린웨일글로벌은 자연물질을 플라스틱으로 생성하여 <br>환경오염을 방지하는 신개념 친환경 미래를 만들어 갈 것입니다.</h2>
+        </div>
+        <div class="content--wrap">
+          <div class="img--card--wrap">
+            <div class="card"><img src="/img/main--card1.png" alt="그린웨일글로벌"></div>
+            <div class="card"><img src="/img/main--card2.png" alt="그린웨일글로벌"></div>
+            <div class="card"><img src="/img/main--card3.png" alt="그린웨일글로벌"></div>
+          </div>
+          <div class="black--btn--wrap">
+            <NuxtLink class="black--btn" to="/">더보기<i class="ico"></i></NuxtLink>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="main--content--wrap bg--type white--txt">
+      <div class="main--container">
+        <div class="title--wrap mb-[40px]">
+          <h3 class="green--title">Technology</h3>
+          <h2>그린웨일글로벌은 <br />자연에서 얻은 바이오매스를 독자적 기술로 친환경 소재로 바꾸어, <br />생분해성·재활용·바이오 플라스틱을 통해 <br />지구를 지키는 미래를 만들어갑니다.</h2>
+        </div>
+        <div class="content--wrap">
+          <div class="square--card--wrap">
+            <dl class="card">
+              <dt>Ecoist®-Terra</dt>
+              <dd>자연으로 돌아가는 플라스틱</dd>
+            </dl>
+            <dl class="card">
+              <dt>Ecoist®-Revo</dt>
+              <dd>되살아나는 플라스틱</dd>
+            </dl>
+            <dl class="card">
+              <dt>Ecoist®-Nova</dt>
+              <dd>새로운 세대의 바이오 폴리머</dd>
+            </dl>
+            <dl class="card">
+              <dt>Ecoist®-Boost</dt>
+              <dd>강화 & 성능 향상</dd>
+            </dl>
+            <dl class="card">
+              <dt>Halastic®</dt>
+              <dd>세계 최초 할랄 인증 친환경 바이오플라스틱</dd>
+            </dl>
+          </div>
+          <div class="black--btn--wrap">
+            <NuxtLink class="black--btn blur--type" to="/">더보기<i class="ico"></i></NuxtLink>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="main--content--wrap black--type white--txt">
+      <div class="main--container">
+        <div class="title--wrap mb-[60px]">
+          <h3 class="green--title">The Numbers</h3>
+          <h2>전세계가 한마음으로 <br />친환경 미래를 위해 노력하고 있습니다.</h2>
+        </div>
+        <div class="content--wrap">
+          <div class="number--card--wrap">
+            <div class="card">
+              <i class="ico"></i>
+              <div class="card--title">
+                <p class="circle">플라스틱 감축</p>
+                <div class="number--wrap">
+                  <span class="number">-80</span>
+                  <span class="percent">%</span>
+                </div>
+                <p class="sub--txt">Plastic pollution reduced <br />by 2040 <br />(UNEP)</p>
+              </div>
+              <ul class="card--desc">
+                <li>
+                  <span class="nation">KR</span>
+                  <p class="txt">
+                    <strong>-50%</strong> <span>Plastic Usage by 2030</span>
+                  </p>
+                </li>
+                <li>
+                  <span class="nation">EU</span>
+                  <p class="txt">
+                    <strong>100%</strong> <span>recycled plastic packaging by 2030</span><br />
+                    <strong>100%</strong> <span>recycled plastic packaging by 2030</span>
+                  </p>
+                </li>
+                <li>
+                  <span class="nation">US</span>
+                  <p class="txt">
+                    <strong>-25%</strong> <span>Single Use Plastic Packaging by 2032</span>
+                  </p>
+                </li>
+              </ul>
+            </div>
+            <div class="card">
+              <i class="ico"></i>
+              <div class="card--title">
+                <p class="circle">온실가스 감축</p>
+                <div class="number--wrap">
+                  <span class="number">-100</span>
+                  <span class="percent">%</span>
+                </div>
+                <p class="sub--txt">GHG emissions by 2050 <br />compared to 2010 levels <br />(UN IPCC report)</p>
+              </div>
+              <ul class="card--desc">
+                <li>
+                  <span class="nation">KR</span>
+                  <p class="txt">
+                    <strong>-40%</strong> <span>by 2030 (vs. 2018)</span> <strong>-100%</strong> <span>by 2050</span>
+                  </p>
+                </li>
+                <li>
+                  <span class="nation">EU</span>
+                  <p class="txt">
+                    <strong>-55%</strong> <span>by 2030 (vs. 1990)</span> <strong>-100%</strong> <span>by 2050</span>
+                  </p>
+                </li>
+                <li>
+                  <span class="nation">US</span>
+                  <p class="txt">
+                    <strong>-48%</strong> <span>by 2030 (vs. 1990)</span> <strong>-100%</strong> <span>by 2045</span>
+                  </p>
+                </li>
+              </ul>
+            </div>
+            <div class="card">
+              <i class="ico"></i>
+              <div class="card--title">
+                <p class="circle">재활용 촉진</p>
+                <div class="number--wrap">
+                  <span class="number">42</span>
+                  <span class="percent">%</span>
+                </div>
+                <p class="sub--txt">Recycled possibly <br />by 2040 <br />(OECD scenario)</p>
+              </div>
+              <ul class="card--desc">
+                <li>
+                  <span class="nation">KR</span>
+                  <p class="txt">
+                    <strong>70%</strong> <span>by 2030</span>
+                  </p>
+                </li>
+                <li>
+                  <span class="nation">EU</span>
+                  <p class="txt">
+                    <strong>77%</strong> <span>bottles collected by 2025,</span> <strong>90%</strong> <span>by 2029 Bottles with</span> <strong>25%</strong> <span>recycled plastic by 2025, </span><strong>30%</strong> <span>by 2030</span>
+                  </p>
+                </li>
+                <li>
+                  <span class="nation">US</span>
+                  <p class="txt">
+                    <strong>65%</strong> <span>single use plastic recycled by 2032</span><br />
+                    <span>All packaging</span> <strong>100%</strong> <span>recycled or compostable</span>
+                  </p>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <ItemSlide />
+    <MarqueeContent />
+    <section class="main--content--wrap">
+      <div class="main--container">
+        <div class="title--wrap mb-[40px]">
+          <h3 class="green--title">News</h3>
+          <h2>그린웨일글로벌과 관련한 <br />최신 소식을 확인하세요.</h2>
+        </div>
+        <div class="content--wrap">
+          <div class="news--card--wrap">
+            <NuxtLink to="" class="news">
+              <h4 class="news--title">4천억 규모 녹색펀드 첫 투자 대상 선정. 친환경 플라스틱 '3개 1호' 달성</h4>
+              <p class="news--cont">그린웨일글로벌은 환경부가 조성한 4000억원 규모의 '녹색인프라 해외수출 지원펀드'의 첫 투자 대상으로 선정됐다고 11일 밝혔다. 동시에 기술보증기금으로부터 친환경 플라스틱 소재 산 SFMK솔루션에서 진행중인 숙박업소 기반 스마트 커머스 플랫폼 누루GO(NURUGO)와 생분해성 친환경 소재 전문 기업 그린웨일글로벌(Green Whale Global)이 “누르고, 줄이고, 연결 </p>
+              <span class="news--date">2025.07.11</span>
+            </NuxtLink>
+            <NuxtLink to="" class="news">
+              <h4 class="news--title">SFMK솔루션 - 그린웨일글로벌, '누르고 줄이고 연결하다' 슬로건 아래 MOU 체결</h4>
+              <p class="news--cont">SFMK솔루션에서 진행중인 숙박업소 기반 스마트 커머스 플랫폼 누루GO(NURUGO)와 생분해성 친환경 소재 전문 기업 그린웨일글로벌(Green Whale Global)이 “누르고, 줄이고, 연결하다' 슬로건 아래 MOU</p>
+              <span class="news--date">2025.07.01</span>
+            </NuxtLink>
+            <NuxtLink to="" class="news">
+              <h4 class="news--title">그린웨일글로벌, 실로암인더스트리와 친환경 제품 위탁생산 협약 체결 그린웨일글로벌, 실로암인더스트리와 친환경 제품 위탁생산 협약 체결</h4>
+              <p class="news--cont">친환경 소재 전문기업 그린웨일글로벌(대표 윤태균)이 지난 15일, 시각장애인 근로자들의 고용안정과 친환경 산업 활성화를 위한 의미 있는 협력을 발표했다. 그린웨일글로벌은 실로암인더스트리와 어쩌고</p>
+              <span class="news--date">2025.05.30</span>
+            </NuxtLink>
           </div>
-          <div class="swiper--pagination"></div>
-          <div class="swiper--btn--wrap">
-            <div class="swiper--btn--prev"></div>
-            <button @click="toggleAutoplay" :class="['play--btn', { 'pause': !isPlaying }]">
-            </button>
-            <div class="swiper--btn--next"></div>
+          <div class="black--btn--wrap">
+            <NuxtLink class="black--btn" to="/">더보기<i class="ico"></i></NuxtLink>
           </div>
         </div>
       </div>
-    </div>
+    </section>
   </main>
-</template>
-<script setup>
-  import { ref, onMounted } from 'vue'
-  import { Swiper, SwiperSlide } from 'swiper/vue';
-  import { Navigation, Pagination, Autoplay } from 'swiper/modules';
-  import 'swiper/css';
-  import 'swiper/css/navigation';
-  import 'swiper/css/pagination';
-
-  const mainSwiperRef = ref(null)
-  const swiperInstance = ref(null)
-  const currentSlide = ref(1)
-  const totalSlides = ref(0)
-  const isPlaying = ref(true)
-
-  const modules = [Navigation, Pagination, Autoplay]
-
-  const onSwiper = (swiper) => {
-    swiperInstance.value = swiper
-    totalSlides.value = 3 // 실제 슬라이드 개수
-    swiper.on('slideChange', () => {
-      currentSlide.value = swiper.realIndex + 1
-    })
-  }
-
-  const toggleAutoplay = () => {
-    if (swiperInstance.value) {
-      if (isPlaying.value) {
-        swiperInstance.value.autoplay.stop()
-      } else {
-        swiperInstance.value.autoplay.start()
-      }
-      isPlaying.value = !isPlaying.value
-    }
-  }
-</script>
+</template>

package-lock.json

@@ -12,7 +12,8 @@
         "pretendard": "^1.3.9",
         "swiper": "^12.0.2",
         "vue": "^3.5.21",
-        "vue-router": "^4.5.1"
+        "vue-router": "^4.5.1",
+        "vue3-marquee": "^4.2.2"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -10858,6 +10859,18 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue3-marquee": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/vue3-marquee/-/vue3-marquee-4.2.2.tgz",
+      "integrity": "sha512-FeFvGUVInKfFilXFcnl8sDRBJBZCZSNLlQDquJErB9db6W2xICRVqbRV/jtdzsEP0rftarLQhx9MeEAU0+TPuQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "vue": "^3.2"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "pretendard": "^1.3.9",
     "swiper": "^12.0.2",
     "vue": "^3.5.21",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vue3-marquee": "^4.2.2"
   }
 }

public/img/footer--logo.svg

@@ -0,0 +1,20 @@
+<svg width="138" height="36" viewBox="0 0 138 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M98.1855 11.2901C98.4431 11.237 98.811 11.2079 99.1623 11.2079C99.7058 11.2079 100.057 11.3075 100.303 11.5307C100.501 11.7063 100.612 11.9765 100.612 12.2819C100.612 12.8038 100.285 13.15 99.8697 13.2904V13.3083C100.174 13.414 100.355 13.6954 100.449 14.1065C100.577 14.6581 100.671 15.0389 100.753 15.1917H100.227C100.162 15.0804 100.074 14.7397 99.9634 14.2475C99.8463 13.7015 99.6358 13.4963 99.174 13.4783H98.6948V15.1917H98.1855V11.2901ZM98.6948 13.0913H99.2149C99.7588 13.0913 100.104 12.792 100.104 12.34C100.104 11.8299 99.7354 11.6067 99.1976 11.6005C98.9515 11.6005 98.7759 11.6247 98.6948 11.6481V13.0913Z" fill="#B6BBCC"/>
+<path d="M99.3139 16.8103C97.3795 16.8103 95.8057 15.2318 95.8057 13.2903C95.8057 11.3494 97.3795 9.77028 99.3139 9.77028C101.248 9.77028 102.822 11.3494 102.822 13.2903C102.822 15.2318 101.248 16.8103 99.3139 16.8103ZM99.3139 10.2557C97.6464 10.2557 96.2892 11.6172 96.2892 13.2903C96.2892 14.9634 97.6464 16.3249 99.3139 16.3249C100.981 16.3249 102.338 14.9634 102.338 13.2903C102.338 11.6172 100.981 10.2557 99.3139 10.2557Z" fill="#B6BBCC"/>
+<path d="M7.58473 22.7612V27.2829H6.20065V26.3826C5.7132 27.0275 4.8825 27.3274 4.04133 27.3274C1.7717 27.3274 0 25.5275 0 23.3053C0 21.072 1.7717 19.2721 4.0746 19.2721C5.20418 19.2721 6.22283 19.7396 6.9426 20.4951L5.92395 21.5394C5.45869 21.0609 4.81656 20.761 4.0746 20.761C2.60178 20.761 1.51658 21.8276 1.51658 23.3053C1.51658 24.7719 2.60178 25.828 4.04133 25.828C5.64726 25.828 6.13409 25.0718 6.21174 24.1722H3.86446V22.7612H7.58473Z" fill="#B6BBCC"/>
+<path d="M14.4706 27.1716H12.9756C12.7433 26.8495 12.7544 26.0717 12.7544 25.3161C12.7544 24.5723 12.4216 24.294 11.7573 24.294H9.83095V27.1716H8.33594V19.3946H11.7025C13.5179 19.3946 14.3271 20.3721 14.3271 21.639C14.3271 22.3946 13.9394 23.139 13.0977 23.4834C13.8945 23.7048 14.2266 24.2829 14.2266 25.4051C14.2266 25.9159 14.2155 26.805 14.4706 27.1716ZM12.8314 21.9055C12.8314 21.2495 12.4549 20.8723 11.5034 20.8723H9.83095V23.0723H11.5034C12.4327 23.0723 12.8314 22.5498 12.8314 21.9055Z" fill="#B6BBCC"/>
+<path d="M15.0674 19.3948H20.1274V20.872H16.5624V22.3831H19.9067V23.8609H16.5624V25.6941H20.1828V27.1719H15.0674V19.3948Z" fill="#B6BBCC"/>
+<path d="M20.8125 19.3948H25.8725V20.872H22.3075V22.3831H25.6519V23.8609H22.3075V25.6941H25.9279V27.1719H20.8125V19.3948Z" fill="#B6BBCC"/>
+<path d="M33.2013 19.3948V27.1719H31.7513L28.0526 22.0053V27.1719H26.5576V19.3948H28.0083L31.707 24.5274V19.3948H33.2013Z" fill="#B6BBCC"/>
+<path d="M36.2434 26.8867C35.5995 26.6313 35.1058 26.1954 34.762 25.5505C34.3423 24.7542 34.118 23.763 34.118 22.5771C34.0434 20.2053 34.8513 16.9165 36.5275 12.6824C36.6619 12.3819 36.872 12.1568 37.1561 12.0517C37.4402 11.9311 37.7397 11.9311 38.0392 12.0517C38.3387 12.1865 38.5476 12.3973 38.6677 12.6824C38.7873 12.9674 38.7873 13.2679 38.6677 13.5684C37.0815 17.6375 36.3328 20.6406 36.4375 22.5468C36.4375 23.1027 36.4979 23.538 36.5725 23.8533C36.6619 24.1538 36.7518 24.3795 36.8418 24.4988C36.9318 24.6194 37.0063 24.6793 37.0513 24.6793C37.2011 24.7096 37.4852 24.5594 37.919 24.2138C38.3528 23.8836 38.8773 23.2078 39.4904 22.187L39.8497 21.5112L39.9397 20.6251C40.1794 18.4932 40.9423 15.8506 42.229 12.6824C42.4539 12.2168 42.7978 11.9763 43.2914 11.9621L43.4412 11.9917L43.6655 11.9763C43.9952 12.0362 44.2491 12.1865 44.429 12.4425C44.6089 12.6978 44.6829 12.9829 44.6385 13.313C44.0999 16.6309 43.3666 19.3489 42.4385 21.466L42.1397 22.0967L42.1242 22.5468C42.1397 23.1027 42.184 23.538 42.274 23.8533C42.3492 24.1538 42.4385 24.3795 42.5285 24.4988C42.6333 24.6194 42.6937 24.6793 42.7528 24.6793C42.8878 24.7096 43.1867 24.5594 43.6205 24.2138C44.0549 23.8836 44.5787 23.2078 45.1925 22.187C46.3745 20.2498 47.3327 17.1719 48.0507 12.9526C48.1104 12.6224 48.2596 12.367 48.4993 12.1865C48.7538 12.0066 49.0379 11.9311 49.3676 11.9763C49.6819 12.0362 49.9364 12.1865 50.1157 12.4425C50.3104 12.6978 50.3702 12.9829 50.3252 13.313C49.5919 17.742 48.5449 21.0907 47.183 23.358C45.9259 25.6853 44.3988 26.9015 42.6333 27.0215C41.6454 26.9164 40.9121 26.4211 40.4481 25.5505L40.2687 25.1295L39.9692 25.4751C39.0264 26.5114 38.0238 27.0215 36.9466 27.0215C36.6921 27.006 36.4677 26.9615 36.2434 26.8867Z" fill="#B6BBCC"/>
+<path d="M56.5252 25.6705C56.3156 24.9044 56.3458 24.0789 56.6299 23.2078L56.6601 23.1181L59.9227 14.4538L59.9373 14.379C59.8473 14.439 59.7428 14.4989 59.6384 14.604L59.5934 14.6343C58.3363 15.5803 56.8542 17.097 55.1485 19.1987C53.4427 21.3009 52.021 23.6127 50.8982 26.1354C50.8237 26.2857 50.7337 26.4062 50.6289 26.5114L50.4496 26.6313L50.1655 26.8712C49.8956 27.0215 49.6115 27.0518 49.2824 26.9615C48.9829 26.8564 48.7432 26.6758 48.5941 26.3908C48.4591 26.1206 48.4289 25.8207 48.5041 25.5048C49.956 21.0907 52.2004 15.5352 55.2532 8.83835C56.4358 6.19571 57.5728 3.55308 58.6949 0.940741C58.8299 0.640245 59.0548 0.430021 59.3389 0.31007C59.6232 0.20496 59.9227 0.204958 60.2222 0.324909C60.5211 0.460318 60.7304 0.669924 60.8352 0.970419C60.9547 1.25546 60.9547 1.55595 60.8206 1.85645C59.713 4.46879 58.5608 7.11204 57.378 9.76952C56.5547 11.6306 55.7622 13.4478 54.9839 15.2193L54.5199 16.331L54.6549 16.1807C55.9866 14.6795 57.1691 13.5381 58.2015 12.7572L58.6654 12.427C59.1892 12.0814 59.7278 11.8866 60.2814 11.8563C61.3744 11.9163 62.0623 12.4424 62.302 13.4781C62.3918 13.9437 62.3618 14.4241 62.2266 14.8891L62.0775 15.2798L58.8447 23.8836L58.7399 24.304L58.7104 24.5742L58.8005 24.5439C59.0242 24.4388 59.3389 24.2137 59.7428 23.8836C60.5211 23.2529 61.4489 22.2166 62.5113 20.7599C63.0797 19.919 63.6039 19.0787 64.0674 18.2378C64.2325 17.9522 64.4722 17.7574 64.7705 17.6826C65.07 17.5923 65.3547 17.6374 65.639 17.7871C65.9235 17.9522 66.1028 18.1927 66.1928 18.4932C66.2823 18.7937 66.238 19.0787 66.088 19.3792C65.5792 20.2795 65.025 21.181 64.4118 22.0967C63.2447 23.703 62.1825 24.8895 61.2246 25.6853C60.2966 26.5114 59.3537 26.9466 58.3955 27.006C57.483 26.9763 56.8542 26.5256 56.5252 25.6705Z" fill="#B6BBCC"/>
+<path d="M70.4611 25.9258C70.2374 25.4751 70.147 24.9792 70.1624 24.4691L70.1924 24.2137L70.132 24.2891C69.6232 24.9792 69.0548 25.5956 68.4265 26.1206C67.8125 26.6616 67.1693 26.9466 66.4802 27.0066C66.1363 27.0369 65.7924 26.9621 65.4332 26.8118L65.4038 26.7964C63.5925 25.6105 62.9639 23.7036 63.4879 21.0758C64.0111 18.448 65.1043 16.1807 66.7503 14.2738C67.7977 13.0725 69.0394 12.3818 70.4465 12.2019C71.8532 12.0362 73.1103 12.3676 74.2031 13.1924L74.2623 13.2382L74.5464 12.6223C74.6959 12.3219 74.9063 12.1265 75.2058 12.022C75.4897 11.9169 75.7891 11.9311 76.0886 12.0671C76.3727 12.2174 76.5818 12.4424 76.6716 12.7275C76.7764 13.028 76.7618 13.3285 76.6268 13.6283C74.9954 17.0067 73.6639 20.3549 72.6161 23.6882C72.5263 24.0041 72.482 24.2737 72.482 24.4987V24.5896L72.6161 24.5142C72.8706 24.364 73.2151 24.0789 73.6335 23.6585C74.4722 22.8473 75.579 21.3911 76.9417 19.2741C77.1356 19.0039 77.3754 18.8382 77.6749 18.7634C77.9737 18.7034 78.2726 18.7634 78.5427 18.9284C78.8118 19.1238 78.9918 19.3637 79.0509 19.6642C79.1113 19.9647 79.0665 20.2652 78.8872 20.5503C77.4803 22.7428 76.2682 24.3188 75.2655 25.31C74.3073 26.3159 73.3651 26.8866 72.4214 27.0214C71.4939 27.0517 70.8352 26.6913 70.4611 25.9258ZM66.391 24.6645L66.4508 24.649C66.5858 24.6348 66.8698 24.4091 67.3189 23.9886C67.8723 23.4328 68.4862 22.6519 69.1744 21.6459C70.1924 20.0995 71.2394 18.3732 72.3172 16.4664L72.9908 15.2501C72.4516 14.7091 71.748 14.4692 70.8802 14.4995C70.0275 14.5447 69.2194 14.9799 68.4862 15.806C67.1396 17.3969 66.2411 19.2135 65.8074 21.2712C65.5079 22.9072 65.6575 23.9886 66.2117 24.5445L66.391 24.6645Z" fill="#B6BBCC"/>
+<path d="M71.872 34.6792C71.5275 33.7783 71.5275 32.7872 71.9015 31.6915L71.917 31.6464C71.9915 31.4362 72.201 30.8655 72.5751 29.964C72.9344 29.0483 73.3834 27.9526 73.9068 26.661C74.7751 24.5285 75.7777 22.0961 76.8999 19.3489C77.2442 18.5074 77.5889 17.682 77.9327 16.8262C79.4435 13.1028 80.8209 9.73923 82.048 6.70645C83.2749 3.68789 84.0378 1.78104 84.3373 0.985893C84.4575 0.669941 84.6522 0.459721 84.9363 0.32431C85.2056 0.189522 85.5051 0.174061 85.8192 0.279793C86.1183 0.399742 86.3432 0.609966 86.4776 0.895622C86.5971 1.16582 86.6125 1.4657 86.5071 1.78104C86.2083 2.60709 85.4306 4.54362 84.1876 7.59248C82.9611 10.6401 81.584 14.0185 80.0723 17.7271C79.7734 18.4326 79.4887 19.1535 79.1899 19.8597C78.0073 22.7422 76.9603 25.3094 76.047 27.547C74.8642 30.4444 74.2211 32.0514 74.1169 32.3816C74.0122 32.6975 73.9672 32.9529 73.937 33.1476V33.3127L74.0264 33.2528C74.2661 33.0722 74.5804 32.7272 74.9844 32.2165C75.5534 31.451 76.2415 30.3851 77.0651 28.9883C77.8877 27.5922 78.7258 26.12 79.5793 24.5736C80.6559 22.6068 81.539 20.985 82.2425 19.6643C82.6316 18.9285 82.9007 18.4481 83.0202 18.2224C83.1856 17.9373 83.4247 17.7574 83.7242 17.6671C84.0237 17.5917 84.3078 17.622 84.6073 17.7871C84.8766 17.9522 85.0559 18.1927 85.1452 18.4932C85.2202 18.7931 85.1908 19.0787 85.0263 19.3792C84.9213 19.5888 84.6664 20.0396 84.3078 20.7154C83.6342 21.9916 82.7363 23.6579 81.6142 25.7002C80.7605 27.2465 79.9084 28.7336 79.0549 30.1897C78.2018 31.6464 77.4539 32.7872 76.8253 33.6429C75.942 34.8443 74.9994 35.5652 73.9968 35.8051C73.0089 35.9251 72.3056 35.5498 71.872 34.6792Z" fill="#B6BBCC"/>
+<path d="M85.731 26.9763C83.4268 26.4359 82.1836 24.9347 82.0045 22.4719V21.5259L81.4813 21.2403C81.2114 21.0455 81.0469 20.7902 81.0019 20.4903C80.9421 20.1898 81.0019 19.8893 81.1818 19.6191C81.4961 19.2135 81.8856 19.0484 82.3644 19.1387L82.4988 19.169L82.7982 18.388C83.5612 16.6011 84.9231 14.9194 86.8981 13.3581C88.7536 11.962 90.3996 11.6306 91.8065 12.3522C92.4505 12.8023 92.8245 13.4181 92.9139 14.1687C93.0045 14.9194 92.9139 15.67 92.6748 16.4212C91.5076 19.0935 89.7413 20.7902 87.3619 21.4808C86.569 21.7516 85.7759 21.9019 84.9526 21.9612L84.3093 21.9915V22.232C84.414 23.643 84.982 24.4542 86.0452 24.6645C87.1378 24.8444 88.3198 24.4987 89.5474 23.5985C90.8341 22.697 92.196 20.8953 93.633 18.2223C93.7822 17.9373 94.0213 17.7419 94.306 17.6523C94.6049 17.562 94.9044 17.5923 95.1884 17.7419C95.4732 17.8922 95.6673 18.1327 95.7579 18.4177C95.8478 18.7182 95.817 19.0187 95.6827 19.3186C94.171 22.1869 92.5848 24.2434 90.9388 25.4751C89.2479 26.7209 87.5119 27.2168 85.731 26.9763ZM86.614 19.2586C88.44 18.6885 89.7267 17.502 90.4748 15.6854C90.5648 15.3695 90.6245 15.1296 90.6393 14.9342C90.6393 14.7388 90.6393 14.5886 90.6098 14.4989C90.5796 14.3938 90.5648 14.3338 90.5494 14.319V14.3035C90.5352 14.3035 90.505 14.2887 90.415 14.2887C90.3251 14.2738 90.1907 14.2887 90.0108 14.3338C89.8314 14.379 89.5917 14.4692 89.3076 14.604C89.0235 14.7388 88.6791 14.9496 88.26 15.2501C86.5992 16.5857 85.4764 17.9373 84.9077 19.334L84.7881 19.6339L85.3419 19.5746C85.7464 19.514 86.1802 19.4089 86.614 19.2586Z" fill="#B6BBCC"/>
+<path d="M103.969 22.7612V27.2829H102.584V26.3826C102.098 27.0275 101.267 27.3274 100.426 27.3274C98.1555 27.3274 96.3838 25.5275 96.3838 23.3053C96.3838 21.072 98.1555 19.2721 100.458 19.2721C101.588 19.2721 102.607 19.7396 103.326 20.4951L102.308 21.5394C101.843 21.0609 101.2 20.761 100.458 20.761C98.9862 20.761 97.901 21.8276 97.901 23.3053C97.901 24.7719 98.9862 25.828 100.426 25.828C102.031 25.828 102.518 25.0718 102.596 24.1722H100.248V22.7612H103.969Z" fill="#B6BBCC"/>
+<path d="M105.273 19.3948H106.768V25.6941H110.389V27.1719H105.273V19.3948Z" fill="#B6BBCC"/>
+<path d="M110.178 23.3057C110.178 21.0724 111.971 19.2725 114.197 19.2725C116.423 19.2725 118.217 21.0724 118.217 23.3057C118.217 25.5273 116.423 27.3271 114.197 27.3271C111.971 27.3271 110.178 25.5273 110.178 23.3057ZM116.699 23.3057C116.699 21.8279 115.669 20.7614 114.197 20.7614C112.724 20.7614 111.694 21.8279 111.694 23.3057C111.694 24.7717 112.724 25.8278 114.197 25.8278C115.669 25.8278 116.699 24.7717 116.699 23.3057Z" fill="#B6BBCC"/>
+<path d="M124.881 24.883C124.881 26.1499 124.039 27.1714 122.135 27.1714H118.901V19.395H121.825C123.84 19.395 124.46 20.3836 124.46 21.6499C124.46 22.4278 123.796 22.9502 123.552 23.0498C124.361 23.3057 124.881 24.083 124.881 24.883ZM120.396 22.6497H121.891C122.622 22.6497 122.965 22.2831 122.965 21.7167C122.965 21.1503 122.644 20.8721 121.835 20.8721H120.396V22.6497ZM123.364 24.7717C123.364 24.2054 123.01 23.8721 122.29 23.8721H120.396V25.6936H122.234C123.01 25.6936 123.364 25.3381 123.364 24.7717Z" fill="#B6BBCC"/>
+<path d="M130.24 25.0276H127.194L126.331 27.1719H124.759L127.97 19.3948H129.465L132.676 27.1719H131.103L130.24 25.0276ZM129.686 23.6611L128.722 21.2498L127.748 23.6611H129.686Z" fill="#B6BBCC"/>
+<path d="M132.884 19.395V27.1714H138V25.6943H134.379V19.395H132.884Z" fill="#B6BBCC"/>
+</svg>

public/img/ico--fb.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2645 12.2214H13.636V21.8399H9.65377V12.2214H7.75977V8.84105H9.65377V6.65358C9.65377 5.08937 10.3977 2.63989 13.6714 2.63989L16.6213 2.65215V5.93343H14.4809C14.1299 5.93343 13.6363 6.10859 13.6363 6.85474V8.8443H16.6124L16.2645 12.2214Z" fill="#B6BBCC"/>
+</svg>

public/img/ico--main1.svg

@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_2449" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
+<rect width="48" height="48" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_2449)">
+<path d="M28.7043 23.0424L34.5002 19.7304V17.9999L32.9388 17.1074L26.5158 20.8539L28.7043 23.0424ZM24.0002 36.1924L25.5002 35.3309V25.4999L19.9198 19.9194L15.0618 17.1074L13.5003 17.9999V19.7304L22.5002 24.8999V35.3309L24.0002 36.1924ZM37.0848 31.4229L17.7463 12.0844L22.1928 9.51143C22.7618 9.18343 23.3643 9.01943 24.0002 9.01943C24.6362 9.01943 25.2388 9.18343 25.8078 9.51143L35.6927 15.2229C36.2617 15.5513 36.7052 15.9949 37.0233 16.5539C37.3413 17.1129 37.5003 17.7103 37.5003 18.3459V29.7689C37.5003 30.0589 37.4631 30.3449 37.3888 30.6269C37.3144 30.9089 37.2131 31.1743 37.0848 31.4229ZM22.1928 38.6039L12.3077 32.8924C11.7387 32.5641 11.2952 32.1204 10.9773 31.5614C10.6593 31.0024 10.5003 30.4049 10.5003 29.7689V18.3459C10.5003 17.7103 10.6593 17.1129 10.9773 16.5539C11.2952 15.9949 11.7387 15.5513 12.3077 15.2229L14.1658 14.1654L33.9117 33.9114L25.8078 38.6039C25.2388 38.9319 24.6362 39.0959 24.0002 39.0959C23.3643 39.0959 22.7618 38.9319 22.1928 38.6039ZM41.5543 45.8304L38.7233 42.9999H34.0002V39.9999H36.0658V40.3424L7.47325 11.7499H8.00025V13.9999H5.00025V9.27693L2.53125 6.80743L4.66975 4.66943L43.6927 43.6924L41.5543 45.8304ZM43.0003 33.9999V37.3384L40.0003 34.3384V33.9999H43.0003ZM14.0003 4.99993V7.99993H13.6618L10.6617 4.99993H14.0003ZM14.0003 42.9999H8.61575C7.61842 42.9999 6.76642 42.6468 6.05975 41.9404C5.35342 41.2338 5.00025 40.3818 5.00025 39.3844V33.9999H8.00025V39.3844C8.00025 39.5641 8.05792 39.7116 8.17325 39.8269C8.28858 39.9423 8.43608 39.9999 8.61575 39.9999H14.0003V42.9999ZM40.0003 13.9999V8.61543C40.0003 8.43577 39.9426 8.28827 39.8273 8.17293C39.7119 8.0576 39.5644 7.99993 39.3848 7.99993H34.0002V4.99993H39.3848C40.3821 4.99993 41.2341 5.3531 41.9408 6.05943C42.6471 6.7661 43.0003 7.6181 43.0003 8.61543V13.9999H40.0003Z" fill="#00A654"/>
+</g>
+</svg>

public/img/ico--main2.svg

@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_2468" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
+<rect width="48" height="48" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_2468)">
+<path d="M23 39.269C21.564 39.269 20.33 38.7851 19.298 37.8175C18.266 36.8495 17.6923 35.6668 17.577 34.2695H20.6155C20.7178 34.8488 20.9897 35.327 21.431 35.704C21.872 36.081 22.395 36.2695 23 36.2695C23.695 36.2695 24.2853 36.0265 24.771 35.5405C25.257 35.0545 25.5 34.464 25.5 33.769C25.5 33.0743 25.257 32.484 24.771 31.998C24.2853 31.512 23.695 31.269 23 31.269H4.5V28.2695H23C24.5257 28.2695 25.8237 28.8046 26.894 29.875C27.9647 30.9456 28.5 32.2436 28.5 33.769C28.5 35.2946 27.9647 36.5928 26.894 37.6635C25.8237 38.7338 24.5257 39.269 23 39.269ZM4.5 19.7305V16.731H31C31.995 16.731 32.827 16.3963 33.496 15.727C34.1653 15.0576 34.5 14.2256 34.5 13.231C34.5 12.236 34.1653 11.4038 33.496 10.7345C32.827 10.0651 31.995 9.73046 31 9.73046C30.082 9.73046 29.3077 10.0138 28.677 10.5805C28.046 11.1471 27.6793 11.8638 27.577 12.7305H24.5385C24.6538 11.0205 25.3257 9.59296 26.554 8.44796C27.782 7.30329 29.264 6.73096 31 6.73096C32.8257 6.73096 34.3653 7.35779 35.619 8.61146C36.873 9.86546 37.5 11.4053 37.5 13.231C37.5 15.0563 36.873 16.596 35.619 17.85C34.3653 19.1036 32.8257 19.7305 31 19.7305H4.5ZM37.5 35.4615V32.423C38.3667 32.3206 39.0833 31.954 39.65 31.323C40.2167 30.6923 40.5 29.918 40.5 29C40.5 28.005 40.1653 27.173 39.496 26.504C38.827 25.8346 37.995 25.5 37 25.5H4.5V22.5H37C38.8257 22.5 40.3653 23.127 41.619 24.381C42.873 25.6346 43.5 27.1743 43.5 29C43.5 30.736 42.9275 32.218 41.7825 33.446C40.6378 34.6743 39.2103 35.3461 37.5 35.4615Z" fill="#00A654"/>
+</g>
+</svg>

public/img/ico--main3.svg

@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_2491" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48">
+<rect width="48" height="48" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_2491)">
+<path d="M18.8229 18.9002L22.9459 12.1272L20.2074 7.59272C19.8461 6.97739 19.3161 6.66972 18.6174 6.66972C17.9187 6.66972 17.3854 6.97772 17.0174 7.59372L12.5114 15.1272L18.8229 18.9002ZM36.6894 31.4617L32.5884 24.6387L38.9999 20.9462L41.9499 25.8732C42.2779 26.4016 42.4619 26.9901 42.5019 27.6387C42.5416 28.2874 42.4076 28.8861 42.0999 29.4347C41.7922 30.0631 41.3357 30.5579 40.7304 30.9192C40.1254 31.2809 39.4696 31.4617 38.7629 31.4617H36.6894ZM31.3844 44.3847L23.9999 37.0002L31.3844 29.6157V33.3077H40.1534L37.4769 38.6617C37.1382 39.2771 36.6766 39.7694 36.0919 40.1387C35.5076 40.5077 34.8616 40.6922 34.1539 40.6922H31.3844V44.3847ZM13.5164 40.6922C12.9004 40.6922 12.3397 40.5334 11.8344 40.2157C11.3294 39.8977 10.9564 39.4752 10.7154 38.9482C10.4744 38.4522 10.3591 37.9349 10.3694 37.3962C10.3794 36.8579 10.5229 36.3577 10.7999 35.8957L12.3694 33.3077H20.3074V40.6922H13.5164ZM8.94988 35.4347L5.94988 29.4347C5.66288 28.8734 5.53088 28.2766 5.55388 27.6442C5.57688 27.0122 5.75605 26.4219 6.09138 25.8732L6.82288 24.6387L3.69238 22.7427L13.7959 20.2042L16.3344 30.3577L13.1539 28.4117L8.94988 35.4347ZM33.8729 19.6427L23.7654 17.1047L26.9499 15.2132L21.1809 5.61572H27.6884C28.3344 5.61572 28.9421 5.77689 29.5114 6.09922C30.0807 6.42156 30.5346 6.85906 30.8729 7.41172L33.2804 11.4347L36.4114 9.48872L33.8729 19.6427Z" fill="#00A654"/>
+</g>
+</svg>

public/img/ico--more--arrow.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_2411" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_2411)">
+<path d="M13.8461 17.6538L12.7923 16.5692L16.6116 12.75H4.5V11.25H16.6116L12.7923 7.43079L13.8461 6.34619L19.5 12L13.8461 17.6538Z" fill="white"/>
+</g>
+</svg>