greenwhale/app/pages/index.vue

<template>
  <main>
    <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="black--btn--wrap">
            <NuxtLink class="black--btn" to="/">더보기<i class="ico"></i></NuxtLink>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>