협력업체 작업중

app/app.vue

@@ -1,9 +1,7 @@
 <template>
   <UApp>
     <Header />
-    <UMain>
-      <NuxtPage />
-    </UMain>
+    <NuxtPage />
     <Footer />
   </UApp>
 </template>

app/assets/scss/style.scss

@@ -1,6 +1,7 @@
 @import "pretendard/dist/web/static/pretendard.css";
 * {
     font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+    word-break: keep-all;
     &::after, &::before{
         display: inline-block;
     }
@@ -12,6 +13,14 @@
     background-position: center;
 }
 
+#top--visual {
+    &.company {
+        background: url(/img/top_ban_company.jpg) no-repeat;
+        background-attachment: fixed;
+        background-size: contain;
+    }
+}
+
 .header--wrap{
     position: fixed;
     top: 0;
@@ -319,6 +328,7 @@ main{
             background-position: center;
             background-size: cover;
             background-repeat: no-repeat;
+            background-attachment: fixed;
         }
         &.black--type{
             background-color: #1F2128;
@@ -613,9 +623,340 @@ main{
         }
     }
     
-    .sub--content--wrap{
-        &.vision{
-            
+    section{
+        &.vision--section {
+            background-image: url(/img/bg--vision.png);
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: center;
+            background-attachment: fixed;
+            .sub--container{
+                padding: 145px 0;
+            }
+        }
+        &.mission--section{
+            padding-top: 100px;
+            display: flex;
+            flex-direction: column;
+            gap: 60px;
+            overflow: hidden;
+            .title--wrap{
+                display: flex;
+                gap: 48px;
+                justify-content: center;
+                .mission--title{
+                    color: #1f2128;
+                    font-size: 40px;
+                    font-weight: 800;
+                }
+                .mission--desc{
+                    color: #1f2128;
+                    font-size: 24px;
+                    font-weight: 700;
+                    strong{
+                        color: #00a654;
+                        font-weight: 700;
+                    }
+                }
+            }
+            .mission--img--wrap{
+                display: flex;
+                gap: 20px;
+                width: 107%;
+                margin-left: -3.5%;
+                .img--wrap{
+                    width: calc((100% - 60px) / 4);
+                    img{
+                        width: 100%;
+                    }
+                }
+            }
+        }
+        &.values--section{
+            background-image: url(/img/bg--values.png);
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-attachment: fixed;
+            background-position: bottom center;
+            .sub--container {
+                padding: 100px 0 120px;
+            }
+        }
+        .sub--container{
+            margin: 0 auto;
+            max-width: 1060px;
+            width: 100%;
+            padding: 100px 0;
+            &.type2{
+                padding: 100px 0 120px;
+            }
+            &.type3{
+                max-width: 1280px;
+                padding: 100px 0 120px;
+            }
+            .title--wrap{
+                text-align: center;
+                &.color--white{
+                    *{
+                        color: white!important;
+                    }
+                }
+                .logo--wrap{
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    margin-bottom: 60px;
+                }
+                .title{
+                    color: #1f2128;
+                    font-size: 40px;
+                    font-weight: 700;
+                    strong{
+                        color: #00a654;
+                        font-weight: 700;
+                    }
+                }
+                .sub--title{
+                    margin-top: 24px;
+                    color: #1f2128;
+                    font-size: 24px;
+                    font-weight: 700;
+                }
+                .sub--title2{
+                    margin-top: 12px;
+                    font-size: 18px;
+                    font-weight: 400;
+                    color: #1f2128;
+                }
+            }
+            .product--img--wrap{
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 20px;
+                margin-top: 40px;
+                .img--top{
+                    display: flex;
+                    gap: 20px;
+                }
+                .img--bot{
+                    display: flex;
+                    gap: 20px;
+                }
+            }
+            .vision--wrap{
+                display: flex;
+                flex-direction: column;
+                gap: 20px;
+                text-align: center;
+                >span{
+                    color: #fff;
+                    font-size: 20px;
+                    font-weight: 700;
+                }
+                >p{
+                    color: #fff;
+                    font-size: 40px;
+                    font-weight: 700;
+                }
+            }
+            .values--card--wrap{
+                display: flex;
+                gap: 20px;
+                margin-top: 40px;
+                .card{
+                    display: flex;
+                    flex-direction: column;
+                    background-color: rgba(0, 0, 0, 0.30);
+                    backdrop-filter: blur(6px);
+                    padding: 24px;
+                    width: calc((100% - 40px) / 3);
+                    .ico{
+                        width: 48px;
+                        height: 48px;
+                        margin-bottom: 16px;
+                        background-image: url(/img/ico--values1.svg);
+                    }
+                    dt{
+                        margin-bottom: 8px;
+                        color: #fff;
+                        font-size: 24px;
+                        font-weight: 700;
+                    }
+                    dd{
+                        color: #fff;
+                        font-size: 16px;
+                        font-weight: 400;
+                    }
+                    &:nth-of-type(2){
+                        .ico{
+                            background-image: url(/img/ico--values2.svg);
+                        }
+                    }
+                    &:nth-of-type(3) {
+                        .ico {
+                            background-image: url(/img/ico--values3.svg);
+                        }
+                    }
+                }
+            }
+            .history--desc--wrap{
+                margin-top: 100px;
+                display: flex;
+                flex-direction: column;
+                .history--desc{
+                    gap: 60px;
+                    display: flex;
+                    margin-bottom: 100px;
+                    &.left--type{
+                        padding-right: 100px;
+                        .img--wrap{
+                            min-width: 412px;
+                        }
+                        .desc--wrap{
+                            >p{
+                                font-size: 20px;
+                            }
+                        }
+                    }
+                    &.left--type2{
+                        padding-right: 100px;
+                        .img--wrap{
+                            min-width: 324px;
+                        }
+                    }
+                    &.right--type{
+                        padding-left: 100px;
+                        .img--wrap{
+                            min-width: 412px;
+                        }
+                    }
+                    &.top--type{
+                        flex-direction: column;
+                    }
+                    .desc--box--wrap{
+                        display: flex;
+                        justify-content: space-between;
+                        gap: 60px;
+                        .desc--wrap{
+                            width: 50%;
+                            >div{
+                                color: #1f2128;
+                                font-size: 24px;
+                                font-weight: 700;
+                                strong{
+                                    font-weight: 700;
+                                    color: #00A654;
+                                }
+                            }
+                        }
+                    }
+                    .desc--wrap{
+                        display: flex;
+                        flex-direction: column;
+                        gap: 20px;
+                        >p{
+                            color: #1f2128;
+                            font-size: 18px;
+                            font-weight: 400;
+                            strong{
+                                font-weight: 800;
+                            }
+                        }
+                    }
+                }
+            }
+            .history--graph--wrap{
+                display: flex;
+                .txt--wrap{
+                    text-align: center;
+                    color: #1f2128;
+                    font-size: 40px;    
+                    font-weight: 800;                
+                    width: 50%;
+                }
+                .graph--wrap{
+                    width: 50%;
+                    display: flex;
+                    flex-direction: column;
+                    .graph--box{
+                        display: flex;
+                        gap: 30px;
+                        margin-top: -15px;
+                        &:first-child{
+                            margin-top: 0;
+                        }
+                        .deco--box{
+                            position: relative;
+                            padding-left: 5px;
+                            padding-top: 15px;
+                            .dot{
+                                display: inline-block;
+                                width: 12px;
+                                height: 12px;
+                                border-radius: 50%;
+                                background-color: #00a654;
+                                position: absolute;
+                                top: 15px;
+                                left: 0;
+                            }
+                            .line{
+                                display: inline-block;
+                                background-color: #e0e4f2;
+                                height: 100%;
+                                width: 2px;
+                            }
+                        }
+                        .history--box{
+                            display: flex;
+                            flex-direction: column;
+                            gap: 16px;
+                            padding-bottom: 95px;
+                            .year{
+                                line-height: 1.4;
+                                color: #1f2128;
+                                font-size: 32px;
+                                font-weight: 800;
+                            }
+                            >ul{
+                                display: flex;
+                                flex-direction: column;
+                                gap: 16px;
+                                >li{
+                                    >div{
+                                        display: flex;
+                                        gap: 28px;
+                                        >span{
+                                            width: 80px;
+                                            color: #78809b;
+                                            font-size: 16px;
+                                            font-weight: 700;
+                                        }
+                                        >p{
+                                            color: #1f2128;
+                                            font-size: 16px;
+                                            font-weight: 700;
+                                            width: calc(100% - 108px);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .partners--wrap{
+                display: flex;
+                gap: 20px;
+                flex-wrap: wrap;
+                margin-top: 80px;
+                .partners{
+                    background-color: #f6f8ff;
+                    display: flex;
+                    height: 152px;
+                    width: calc((100% - 60px) / 4);
+                }
+            }
         }
     }
 }

app/pages/company/history.vue

@@ -0,0 +1,477 @@
+<template>
+  <main>
+    <TopVisual :className="className" :title="title" :navigation="navigation" />
+    <section class="history--section">
+      <div class="sub--container type2">
+        <div class="title--wrap">
+          <h2 class="title">그린웨일글로벌은 <br /><strong>새로운 친환경 미래</strong>를 만들어 가기 위해 <br />출범하였습니다.</h2>
+        </div>
+        <div class="history--desc--wrap">
+          <div class="history--desc left--type">
+            <div class="img--wrap">
+              <img src="/img/img--history1.png" alt="">
+            </div>
+            <div class="desc--wrap">
+              <p><strong>플라스틱 환경문제</strong>는 우리가 살아가고 있는 현시대의 가장 큰 문제점 중 하나로 대두하고 있습니다.</p>
+              <p>한 미국 연구결과에 따르면, 플라스틱은 대중적으로 사용되기 시작한 1950년부터 2015년까지 생산된 총량이 <strong>83억 톤</strong>에 이르고, 그 중 약 절반은 최근 13년 내에 사용되었습니다.</p>
+            </div>
+          </div>
+          <div class="history--desc right--type">
+            <div class="desc--wrap">
+              <p>인류의 <strong>플라스틱 의존도</strong>는 날마다 급증하고, 인류에게 플라스틱 없이는 일상생활이 불가능한 시대에 봉착했습니다. 매년 증가하는 플라스틱 사용량으로 2050년에는 <strong>석유자원의 20%</strong>가 플라스틱 생산에 소비될 것으로 예측되고 있습니다. </p>
+              <p>위와 같은 현상은 온실가스양을 증가시켜 <strong>지구 온난화를 가속합니다.</strong></p>
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--history2.png" alt="">
+            </div>
+          </div>
+          <div class="history--desc left--type2">
+            <div class="img--wrap">
+              <img src="/img/img--history3.png" alt="">
+            </div>
+            <div class="desc--wrap">
+              <p>플라스틱은 생산과정에서뿐만 아니라 <strong>폐기과정</strong>에서도 지구 환경에 악영향을 끼칩니다.</p>
+              <p>현재, 전 세계적으로 매년 4억 톤 이상의 플라스틱 쓰레기가 배출되고, 이 배출된 쓰레기들은 <strong>소각</strong>되거나 땅속에 <strong>매립</strong>되고, 나머지는 <strong>바다</strong>에 버려지고 있습니다.</p>
+              <p>바다에 버려진 플라스틱 쓰레기들은 파도와 자외선에 의해 잘게 부서져 미세 플라스틱이 되어 자연 생태계를 돌고 돌아 <strong>결국 우리 인류에게 돌아오는 악순환</strong>이 반복되고 있습니다.</p>
+            </div>
+          </div>
+          <div class="history--desc top--type">
+            <div class="img--wrap">
+              <img src="/img/img--history4.png" alt="">
+            </div>
+            <div class="desc--box--wrap">
+              <div class="desc--wrap">
+                <p>그린웨일글로벌은 기존 플라스틱 대체재인 <strong>바이오 생분해성 플라스틱 및 탄소저감형 플라스틱 산업</strong> 확대를 위한 사명감으로 환경오염의 악순환을 막으며, 새로운 <strong>친환경 미래</strong>를 만들어 가기 위해 출범하였습니다.</p>
+                <p>특수 원료 인증과 국내외 특허 취득 및 상표 등록, 환경부와 중소기업부 우수기업으로 선정되는 등의 일련의 발자취를 거쳐왔으며, 앞으로도 인류의 미래 환경에 적극 대처하는 초심을 잃지 않겠습니다.</p>
+              </div>
+              <div class="desc--wrap">
+                <div>
+                  그린웨일글로벌은 <br />
+                  탄소저감형 바이오 플라스틱 제품으로 <br />
+                  <strong>
+                    인류가 깨끗한 환경과 더불어 살아갈 수 있는 <br />
+                    미래를 개척합니다.
+                  </strong>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="history--graph--wrap">
+          <div class="txt--wrap">
+            Achievement
+          </div>
+          <div class="graph--wrap">
+            <div class="graph--box">
+              <div class="deco--box">
+                <span class="dot"></span>
+                <span class="line"></span>
+              </div>
+              <div class="history--box">
+                <h4 class="year">2019</h4>
+                <ul>
+                  <li>
+                    <div>
+                      <span>2019.03</span><p>그린웨일글로벌 주식회사 설립</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2019.08</span><p>생분해성플라스틱수지 원료 환경표지(EL724) 인증</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2019.09</span><p>그린웨일글로벌 베트남 자회사 설립 <br />(B.I.G 인수 외투법인 전환)</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="graph--box">
+              <div class="deco--box">
+                <span class="dot"></span>
+                <span class="line"></span>
+              </div>
+              <div class="history--box">
+                <h4 class="year">2020</h4>
+                <ul>
+                  <li>
+                    <div>
+                      <span>2020.04</span><p>미국 특허 등록 (생분해성 플라스틱 수지 제조기술 및 제품)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2020.05</span><p>한국 특허 등록 (생분해성 플라스틱 수지 제조기술 및 제품)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2020.10</span><p>벤처기업 인증</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2020.11</span><p>윤태균 대표 공동대표 취임</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="graph--box">
+              <div class="deco--box">
+                <span class="dot"></span>
+                <span class="line"></span>
+              </div>
+              <div class="history--box">
+                <h4 class="year">2021</h4>
+                <ul>
+                  <li>
+                    <div>
+                      <span>2021.02</span><p>레진 양산 시설 구축 완료 (베트남)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2021.03</span><p>녹색기술 인증 취득 (한국산업기술진흥원)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2021.09</span><p>우수벤처기업 선정</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2021.10</span><p>유럽 TUV OK Biobased 인증 (원료)</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="graph--box">
+              <div class="deco--box">
+                <span class="dot"></span>
+                <span class="line"></span>
+              </div>
+              <div class="history--box">
+                <h4 class="year">2022</h4>
+                <ul>
+                  <li>
+                    <div>
+                      <span>2022.04</span><p>PCT 해외특허출원 (유럽, 아시아, 아프리카. 총 13개 권역)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2022.06</span><p>유럽 TUV OK Compost Industrial 인증 (원료, 제품)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2022.08</span><p>ISO 14001:2015 인증</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2022.09</span><p>ISO 50001:2018 인증</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>유럽 상표 등록 (GreenWhaleGlobal)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2022.12</span><p>남아프리카공화국 특허 등록 <br />(생분해성 플라스틱 수지 제조기술 및 제품)</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="graph--box">
+              <div class="deco--box">
+                <span class="dot"></span>
+                <span class="line"></span>
+              </div>
+              <div class="history--box">
+                <h4 class="year">2023</h4>
+                <ul>
+                  <li>
+                    <div>
+                      <span>2023.02</span><p>베트남 레진 양산 시설 증설 (연간 6,000톤)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>ECOIST 브랜드 출원</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2023.03</span><p>OAPI 특허 등록 (생분해성 플라스틱 수지 제조기술 및 제품)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>공동대표규정 폐지 (황지영 대표 사임)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2023.05</span><p>미국 상표 등록 (GreenWhaleGlobal)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2023.07</span><p>대한민국 올해의 녹색상품 수상 <br />(에코이스트 행거, 폴리백, 3D프린터 필라멘트)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>일본 상표 등록 (GreenWhaleGlobal)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2023.08</span><p>친환경 제품 온라인 쇼핑몰 입점 판매 (아마존)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2023.09</span><p>울산 자유무역지구 공장 확보(450평 규모)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2023.11</span><p>산업통상자원부 장관표창 (2023 순환경제 장관상)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2023.12</span><p>산업통상자원부 장관표창 (2023 대한민국 기술대상 장관상)</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="graph--box">
+              <div class="deco--box">
+                <span class="dot"></span>
+                <span class="line"></span>
+              </div>
+              <div class="history--box">
+                <h4 class="year">2024</h4>
+                <ul>
+                  <li>
+                    <div>
+                      <span>2024.01</span><p>CES2024 Innovation Award 수상</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2024.04</span><p>중소벤처기업부 '초격차 스타트업 1000+' 선정</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>인도 특허 등록 (생분해성 플라스틱 수지 제조기술 및 제품)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2024.06</span><p>베트남 상표 등록 (GreenWhaleGlobal)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>Select USA Investment Summit 참가</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2024.08</span><p>재활용 플라스틱을 활용한 바이오플라스틱(PCR+) 레진 상용화</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>인도네시아 특허 등록 <br />(생분해성 플라스틱 수지 제조기술 및 제품)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>총380만달러 규모 바이오플라스틱 원료 공급 계약 체결 <br />(해외바이어 2개사)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2024.10</span><p>열가소성 전분을 포함하는 바이오매스 기반 수지 조성물 <br />(PCR+) 특허 등록</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2024.11</span><p>ECOIST 상표 등록 (한국)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2024.12</span><p>2024 벤처창업진흥 유공 포상 장관상</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>미국향 첫 수출 완료, 글로벌 시장 확장 본격화</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>LG Display 스타트업육성프로그램 (2025 Dream Play) <br />최종 선정 (상금 1천만원 수령)</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="graph--box">
+              <div class="deco--box">
+                <span class="dot"></span>
+              </div>
+              <div class="history--box">
+                <h4 class="year">2025</h4>
+                <ul>
+                  <li>
+                    <div>
+                      <span>2025.01</span><p>2025년 초격차 스타트업1000+ 프로젝트 <br />(정부지원사업 지원금 1억 8천만원)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>CES2025 참가 (서울통합관 강남구)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>기술능력 평가 기술등급 T-3 획득</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2025.03</span><p>TUV OK BIOBASED ECOIST PCR+ PC 인증 획득</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2025.04</span><p>실로암인더스트리 MOU 체결 <br />(친환경 소재를 활용한 제품 개발 및 생산 판매)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>ZER01NE ACCELERATOR 2025 프로그램 최종 선정 <br />(상금 1억원 수령)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>베트남 GLOBAL SOURCING FAIR 참가</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>2025 탄소중립 사업화 지원사업 최종 선정 <br />(정부지원사업 지원금 2억원)</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2025.05</span><p>그린웨일글로벌 소재 HALAL 인증 절차 착수, 무슬림 시장 <br />진출 교두보 확보</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span>2025.06</span><p>한화자산운용 투자 확약</p>
+                    </div>
+                  </li>
+                  <li>
+                    <div>
+                      <span></span><p>화장품 용기 제품 개발 완료, 국내 뷰티 브랜드 납품 개시</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+<script setup>
+import TopVisual from '~/components/topVisual.vue'
+import { gsap } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import { onMounted } from 'vue'
+
+gsap.registerPlugin(ScrollTrigger)
+
+const className = ref("company")
+const title = ref("Company")
+const navigation = ref([
+  { name: "Company",
+    link: "/company/history" ,
+    gnbList : [
+      { name: "회사소개", link: "/company/intro" },
+      { name: "회사연혁", link: "/company/history" },
+      { name: "협력업체", link: "/company/partners" }
+    ]
+  },
+  { name: "회사연혁", link: "/company/history" }
+])
+
+onMounted(() => {
+  // 초기 상태 설정
+  gsap.set(".deco--box .dot", { opacity: 0 })
+  gsap.set(".deco--box .line", { height: 0 })
+  gsap.set(".history--box", { opacity: 0, x: 50 })
+
+  // 각 graph--box에 대해 개별 애니메이션 적용
+  document.querySelectorAll('.graph--box').forEach((box, index) => {
+    const dot = box.querySelector('.deco--box .dot')
+    const line = box.querySelector('.deco--box .line')
+    const historyBox = box.querySelector('.history--box')
+
+    // .dot 애니메이션
+    gsap.to(dot, {
+      opacity: 1,
+      duration: 0.5,
+      scrollTrigger: {
+        trigger: box,
+        start: "top 80%",
+        toggleActions: "play reverse play reverse"
+      }
+    })
+
+    // .line 애니메이션
+    gsap.to(line, {
+      height: "100%",
+      duration: 0.3,
+      scrollTrigger: {
+        trigger: box,
+        start: "top 80%",
+        toggleActions: "play reverse play reverse"
+      }
+    })
+
+    // 글씨 애니메이션 (오른쪽에서 왼쪽으로)
+    gsap.to(historyBox, {
+      opacity: 1,
+      x: 0,
+      duration: 0.8,
+      ease: "power2.out",
+      scrollTrigger: {
+        trigger: box,
+        start: "top 80%",
+        toggleActions: "play reverse play reverse"
+      }
+    })
+  })
+})
+</script>

app/pages/company/intro.vue

@@ -1,12 +1,115 @@
 <template>
   <main>
-    <section class="title--wrap">
-
+    <TopVisual :className="className" :title="title" :navigation="navigation" />
+    <section class="title--section">
+      <div class="sub--container">
+        <div class="title--wrap">
+          <div class="logo--wrap">
+            <img src="/img/company--logo.svg" alt="그린웨일글로벌">
+          </div>
+          <h2 class="title">그린웨일글로벌(주)는 <br /><strong>건강하고 새로운 친환경 미래</strong>를 <br />만들기 위해 탄생했습니다.</h2>
+          <p class="sub--title">환경에 해가 되지 않는 친환경 플라스틱 대체 소재를 개발하여 <br />지구환경을 지키기 위해 노력하고 연구하는 바이오테크 회사입니다.</p>
+        </div>
+      </div>
+    </section>
+    <section class="vision--section">
+      <div class="sub--container">
+        <div class="vision--wrap">
+          <span>Vision</span>
+          <p>모두 함께 보존하고 가꾸어 나아가야 할 <br />푸른빛 미래 환경에 기여하는 친환경 기업을 꿈꿉니다.</p>
+        </div>
+      </div>
     </section>
-    <div class="sub--content--wrap vision">
-      <div class="vision--txt--wrap">
-        모두 함께 보존하고 가꾸어 나아가야 할 <br /> 푸른빛 미래 환경에 기여하는 친환경 기업을 꿈꿉니다.
+    <section class="mission--section">
+      <div class="title--wrap">
+        <h3 class="mission--title">Mission</h3>
+        <p class="mission--desc">
+          혁신적인 친환경 탄소저감형 제품 연구 개발로 <br />
+          <strong>기존의 편리함은 유지되고 자연환경은 보호할 수 있는 제품</strong>을 생산하여 <br />사회적 책임에 기여하는 기업
+        </p>
+      </div>
+      <div class="mission--img--wrap">
+        <div class="img--wrap">
+          <img src="/img/img--mission1.png" alt="미션 이미지">
+        </div>
+        <div class="img--wrap">
+          <img src="/img/img--mission2.png" alt="미션 이미지">
+        </div>
+        <div class="img--wrap">
+          <img src="/img/img--mission3.png" alt="미션 이미지">
+        </div>
+        <div class="img--wrap">
+          <img src="/img/img--mission4.png" alt="미션 이미지">
+        </div>
       </div>
-    </div>
+    </section>
+    <section class="product--section">
+      <div class="sub--container">
+        <div class="title--wrap">
+          <h3 class="title">Production Facilities</h3>
+          <p class="sub--title2">그린웨일 글로벌은 독자적으로 특허받은 친환경 소재 개발 기술과 이를 구현할 다양한 설비를 바탕으로, <br />차세대 바이오 플라스틱을 만들어갑니다. 또한 R&D에 특화된 역량을 바탕으로 글로벌 대기업과의 공동 개발이 가능하여, <br />고객이 원하는 맞춤형 친환경 솔루션을 제공합니다.</p>
+        </div>
+        <div class="product--img--wrap">
+          <div class="img--top">
+            <div class="img--wrap">
+              <img src="/img/img--product1.png" alt="생산 시설">
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--product2.png" alt="생산 시설">
+            </div>
+          </div>
+          <div class="img--bot">
+            <div class="img--wrap">
+              <img src="/img/img--product3.png" alt="생산 시설">
+            </div>
+            <div class="img--wrap">
+              <img src="/img/img--product4.png" alt="생산 시설">
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="values--section">
+      <div class="sub--container">
+        <div class="title--wrap color--white">
+          <h3 class="title">Values</h3>
+          <p class="sub--title2">끊임없는 기술혁신을 바탕으로 <br />전 인류가 친환경적인 삶을 지속가능하고 편리하게 누릴 수 있도록 만들어 가겠습니다.</p>
+        </div>
+        <div class="values--card--wrap">
+          <dl class="card">
+            <i class="ico"></i>
+            <dt>그린</dt>
+            <dd>인류의 행복을 위한 <br />푸른 가치 실현에 공헌하는 친환경 기업</dd>
+          </dl>
+          <dl class="card">
+            <i class="ico"></i>
+            <dt>윤리</dt>
+            <dd>사회와 미래에 대한 책임수행과 <br />투명하고 정직한 윤리경영</dd>
+          </dl>
+          <dl class="card">
+            <i class="ico"></i>
+            <dt>기술</dt>
+            <dd>혁신적인 친환경 탄소저감형 원료 연구개발을 통해 부담없이 편하게 자연을 생각하며 사용할 수 있는 제품 생산</dd>
+          </dl>
+        </div>
+      </div>
+    </section>
   </main>
-</template>
+</template>
+<script setup>
+import TopVisual from '~/components/topVisual.vue'
+
+const className = ref("company")
+const title = ref("Company")
+const navigation = ref([
+  { name: "Company",
+    link: "/company/intro" ,
+    gnbList : [
+      { name: "회사소개", link: "/company/intro" },
+      { name: "회사연혁", link: "/company/history" },
+      { name: "협력업체", link: "/company/partners" }
+    ]
+  },
+  { name: "회사소개", link: "/company/intro" }
+])
+</script>

app/pages/company/partners.vue

@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <TopVisual :className="className" :title="title" :navigation="navigation" />
+    <section class="history--section">
+      <div class="sub--container type3">
+        <div class="title--wrap">
+          <h2 class="title">그린웨일글로벌과 함께 하고 있는 <br /><strong>파트너들을 소개합니다.</strong></h2>
+        </div>
+        <div class="partners--wrap">
+          <div class="partners"></div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+<script setup>
+import TopVisual from '~/components/topVisual.vue';
+
+const className = ref("company")
+const title = ref("Company")
+const navigation = ref([
+  { name: "Company",
+    link: "/company/partners" ,
+    gnbList : [
+      { name: "회사소개", link: "/company/intro" },
+      { name: "회사연혁", link: "/company/history" },
+      { name: "협력업체", link: "/company/partners" }
+    ]
+  },
+  { name: "협력업체", link: "/company/partners" }
+])
+</script>

package-lock.json

@@ -8,6 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@nuxt/ui": "^3.3.4",
+        "gsap": "^3.13.0",
         "nuxt": "^4.1.2",
         "pretendard": "^1.3.9",
         "swiper": "^12.0.2",
@@ -6265,6 +6266,12 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
+    "node_modules/gsap": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.13.0.tgz",
+      "integrity": "sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license."
+    },
     "node_modules/gzip-size": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-7.0.0.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@nuxt/ui": "^3.3.4",
+    "gsap": "^3.13.0",
     "nuxt": "^4.1.2",
     "pretendard": "^1.3.9",
     "swiper": "^12.0.2",

public/img/ico--values1.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_65041" 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_65041)">
+<path d="M9.08135 21.3848C8.32702 21.3848 7.70185 21.1383 7.20585 20.6453C6.70952 20.1519 6.46135 19.5283 6.46135 18.7743C6.46135 18.0199 6.70802 17.3946 7.20135 16.8983C7.69435 16.4023 8.31802 16.1543 9.07235 16.1543C9.82668 16.1543 10.4519 16.4009 10.9479 16.8943C11.4442 17.3873 11.6924 18.0109 11.6924 18.7653C11.6924 19.5196 11.4457 20.1448 10.9524 20.6408C10.4594 21.1368 9.83569 21.3848 9.08135 21.3848ZM6.69235 41.5003V32.5003H4.92285V24.8848C4.92285 24.4598 5.06668 24.1036 5.35435 23.8163C5.64168 23.5286 5.99785 23.3848 6.42285 23.3848H11.7304C12.1554 23.3848 12.5117 23.5286 12.7994 23.8163C13.0867 24.1036 13.2304 24.4598 13.2304 24.8848V32.5003H11.4614V38.5003H28.5769V27.3848H24.5769C22.4795 27.3848 20.7052 26.6624 19.2539 25.2178C17.8025 23.7728 17.0769 22.0336 17.0769 20.0003C17.0769 18.3876 17.5422 16.9408 18.4729 15.6598C19.4039 14.3791 20.6 13.4183 22.0614 12.7773C22.287 10.6363 23.1769 8.86893 24.7309 7.47527C26.2845 6.0816 28.0665 5.38477 30.0769 5.38477C32.0872 5.38477 33.8692 6.0816 35.4229 7.47527C36.9769 8.86893 37.8665 10.6363 38.0919 12.7773C39.5535 13.4183 40.7497 14.3791 41.6804 15.6598C42.6114 16.9408 43.0769 18.3876 43.0769 20.0003C43.0769 22.0336 42.3512 23.7728 40.8999 25.2178C39.4485 26.6624 37.6742 27.3848 35.5768 27.3848H31.5768V38.5003H41.5769V41.5003H6.69235ZM24.5769 24.3848H35.5768C36.8305 24.3848 37.894 23.9626 38.7673 23.1183C39.6404 22.2739 40.0769 21.2346 40.0769 20.0003C40.0769 19.0106 39.787 18.1266 39.2074 17.3483C38.628 16.5703 37.8769 15.9851 36.9539 15.5928L35.2768 14.8848L35.0924 13.1463C34.969 11.8106 34.433 10.6831 33.4844 9.76377C32.5357 8.84443 31.3999 8.38477 30.0769 8.38477C28.7539 8.38477 27.6179 8.84443 26.6689 9.76377C25.7202 10.6831 25.1844 11.8106 25.0614 13.1463L24.8769 14.8848L23.1999 15.5928C22.2769 15.9851 21.5255 16.5703 20.9459 17.3483C20.3665 18.1266 20.0769 19.0106 20.0769 20.0003C20.0769 21.2346 20.5134 22.2739 21.3864 23.1183C22.2594 23.9626 23.3229 24.3848 24.5769 24.3848Z" fill="#00A654"/>
+</g>
+</svg>

public/img/ico--values2.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_65046" 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_65046)">
+<path d="M5 41V38H22.5V15.7655C21.595 15.5295 20.8033 15.082 20.125 14.423C19.4467 13.764 18.9832 12.9563 18.7345 12H12.1155L18 26.2115C17.9617 27.7115 17.3103 28.9872 16.046 30.0385C14.782 31.0898 13.2667 31.6155 11.5 31.6155C9.73333 31.6155 8.218 31.0898 6.954 30.0385C5.69 28.9872 5.03867 27.7115 5 26.2115L10.8845 12H7V9H18.7345C19.0448 7.859 19.6813 6.90717 20.644 6.1445C21.607 5.3815 22.7257 5 24 5C25.2743 5 26.393 5.3815 27.356 6.1445C28.3187 6.90717 28.9552 7.859 29.2655 9H41V12H37.1155L43 26.2115C42.9613 27.7115 42.31 28.9872 41.046 30.0385C39.782 31.0898 38.2667 31.6155 36.5 31.6155C34.7333 31.6155 33.218 31.0898 31.954 30.0385C30.6897 28.9872 30.0383 27.7115 30 26.2115L35.8845 12H29.2655C29.0168 12.9563 28.5533 13.764 27.875 14.423C27.1967 15.082 26.405 15.5295 25.5 15.7655V38H43V41H5ZM32.6155 26.1155H40.3845L36.5 16.7425L32.6155 26.1155ZM7.6155 26.1155H15.3845L11.5 16.7425L7.6155 26.1155ZM24 13C24.695 13 25.2853 12.757 25.771 12.271C26.257 11.7853 26.5 11.195 26.5 10.5C26.5 9.805 26.257 9.21467 25.771 8.729C25.2853 8.243 24.695 8 24 8C23.305 8 22.7147 8.243 22.229 8.729C21.743 9.21467 21.5 9.805 21.5 10.5C21.5 11.195 21.743 11.7853 22.229 12.271C22.7147 12.757 23.305 13 24 13Z" fill="#00A654"/>
+</g>
+</svg>

public/img/ico--values3.svg

@@ -0,0 +1,9 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_65051" 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_65051)">
+<path d="M19.3845 43L18.623 36.9075C18.0873 36.7282 17.538 36.477 16.975 36.154C16.4123 35.8307 15.9092 35.4845 15.4655 35.1155L9.82301 37.5L5.20801 29.5L10.0885 25.8115C10.0425 25.5142 10.0098 25.2155 9.99051 24.9155C9.97117 24.6155 9.96151 24.3167 9.96151 24.019C9.96151 23.7347 9.97117 23.4457 9.99051 23.152C10.0098 22.8583 10.0425 22.5372 10.0885 22.1885L5.20801 18.5L9.82301 10.5385L15.446 12.904C15.9283 12.522 16.4432 12.1727 16.9905 11.856C17.5378 11.5393 18.0757 11.2848 18.604 11.0925L19.3845 5H28.6155L29.377 11.1115C29.977 11.3295 30.5198 11.584 31.0055 11.875C31.4915 12.166 31.982 12.509 32.477 12.904L38.177 10.5385L42.792 18.5L37.8345 22.246C37.9062 22.569 37.9453 22.871 37.952 23.152C37.9583 23.4327 37.9615 23.7153 37.9615 24C37.9615 24.2717 37.955 24.548 37.942 24.829C37.9293 25.1097 37.8833 25.4308 37.804 25.7925L42.723 29.5L38.1075 37.5L32.477 35.096C31.982 35.491 31.4768 35.8403 30.9615 36.144C30.4462 36.448 29.918 36.6962 29.377 36.8885L28.6155 43H19.3845ZM22 40H25.931L26.65 34.6425C27.6707 34.3758 28.6033 33.997 29.448 33.506C30.293 33.0147 31.1078 32.3832 31.8925 31.6115L36.8615 33.7L38.831 30.3L34.4925 27.031C34.6592 26.513 34.7725 26.0052 34.8325 25.5075C34.8928 25.0102 34.923 24.5077 34.923 24C34.923 23.4793 34.8928 22.9768 34.8325 22.4925C34.7725 22.0078 34.6592 21.5128 34.4925 21.0075L38.869 17.7L36.9 14.3L31.873 16.419C31.2037 15.7037 30.4018 15.0717 29.4675 14.523C28.5328 13.9743 27.5873 13.5858 26.631 13.3575L26 8H22.031L21.369 13.3385C20.3487 13.5795 19.4065 13.9487 18.5425 14.446C17.6782 14.9437 16.8537 15.5847 16.069 16.369L11.1 14.3L9.13101 17.7L13.45 20.919C13.2833 21.3937 13.1667 21.8873 13.1 22.4C13.0333 22.9127 13 23.4523 13 24.019C13 24.5397 13.0333 25.05 13.1 25.55C13.1667 26.05 13.277 26.5437 13.431 27.031L9.13101 30.3L11.1 33.7L16.05 31.6C16.809 32.3793 17.6205 33.0178 18.4845 33.5155C19.3488 34.0128 20.304 34.3948 21.35 34.6615L22 40Z" fill="#00A654"/>
+<path d="M23.1824 31.5V24.9492C22.355 24.9492 21.5618 24.7926 20.803 24.4794C20.0443 24.1661 19.374 23.7185 18.7919 23.1364C18.21 22.5544 17.7659 21.8825 17.4595 21.1206C17.1532 20.3588 17 19.5646 17 18.7381V17.5H18.2381C19.0502 17.5 19.8364 17.6582 20.5969 17.9746C21.3575 18.2909 22.0278 18.7395 22.6078 19.3206C23.0396 19.7524 23.3938 20.2348 23.6705 20.7675C23.9472 21.3003 24.1454 21.8662 24.265 22.4652C24.3601 22.3001 24.4662 22.1437 24.5831 21.9959C24.7001 21.8483 24.8306 21.7026 24.9746 21.5587C25.5558 20.9776 26.2275 20.5289 26.9896 20.2127C27.7517 19.8963 28.5462 19.7381 29.3729 19.7381H30.611V20.9762C30.611 21.8031 30.4528 22.5977 30.1362 23.3599C29.8197 24.1222 29.3707 24.794 28.7894 25.3755C28.208 25.9569 27.5414 26.4008 26.7896 26.7071C26.0377 27.0135 25.248 27.1667 24.4205 27.1667V31.5H23.1824Z" fill="#00A654"/>
+</g>
+</svg>