greenwhale/app/pages/products/materials.vue

<template>
  <main>
    <TopVisual :className="className" :title="title" :navigation="navigation" />
    <section class="title--section">
      <div class="sub--container type2">
        <div class="title--wrap">
          <h2 class="title">
            그린 지구를 만드는 그린웨일글로벌의 <br />
            <strong>탄소저감형 바이오 플라스틱 제품 및 서비스를 소개합니다.</strong>
          </h2>
        </div>
        <div class="tab--wrap">
          <NuxtLink to="/products/materials" class="active">Materials</NuxtLink>
          <NuxtLink to="/products/solutions">Solutions</NuxtLink>
        </div>
        <div class="materials--wrap">
          <div class="materials--box">
            <div class="img--wrap">
              <img src="/img/img--materials1.png" alt="" />
            </div>
            <div class="desc--wrap">
              <h4>Ecoist®-Terra</h4>
              <h5>"자연으로 돌아가는 플라스틱"</h5>
              <ul>
                <li>
                  자연 속에서 분해되는 생분해성 소재(PBAT, PLA, PHA 등)와 카사바 전분 기반
                  TPS를 컴파운딩한 소재로, 환경에 남지 않고 스스로 사라지는 친환경
                  대안입니다.
                </li>
                <li>농업, 식품, 일회용품 등에 적합합니다.</li>
              </ul>
            </div>
          </div>
          <div class="materials--box">
            <div class="img--wrap">
              <img src="/img/img--materials2.png" alt="" />
            </div>
            <div class="desc--wrap">
              <h4>Ecoist®-Revo</h4>
              <h5>"되살아나는 플라스틱"</h5>
              <ul>
                <li>
                  사용 후 버려진 플라스틱을 다시 살려낸 재활용 소재 기반 원료입니다.
                </li>
                <li>
                  PCR(Post-Consumer Recycled)과 바이오매스를 활용해 순수 플라스틱 사용량을
                  줄임으로써 탄소 배출을 줄이고 순환경제에 기여합니다.
                </li>
              </ul>
            </div>
          </div>
          <div class="materials--box">
            <div class="img--wrap">
              <img src="/img/img--materials3.png" alt="" />
            </div>
            <div class="desc--wrap">
              <h4>Ecoist®-Nova</h4>
              <h5>"새로운 세대의 바이오 폴리머"</h5>
              <ul>
                <li>
                  카사바, 사탕수수, 옥수수 등 식물에서 유래한 Bio-PE, Bio-PP 등으로 구성된
                  차세대 바이오 플라스틱입니다.
                </li>
                <li>
                  석유 기반 원료를 대체하면서 기존 플라스틱과 유사한 물성을 구현합니다.
                </li>
              </ul>
            </div>
          </div>
          <div class="materials--box">
            <div class="img--wrap">
              <img src="/img/img--materials4.png" alt="" />
            </div>
            <div class="desc--wrap">
              <h4>Ecoist®-Boost</h4>
              <h5>"강화 & 성능 향상"</h5>
              <ul>
                <li>
                  기초 바이오매스 소재인 TPS에 기능성 첨가제를 결합한 마스터배치입니다.
                </li>
                <li>
                  재활용 플라스틱의 물성을 보완하거나, 기존 제품에 탄소 저감 효과를 더할
                  수 있습니다.
                </li>
              </ul>
            </div>
          </div>
          <div class="materials--box">
            <div class="img--wrap">
              <img src="/img/img--materials5.png" alt="" />
            </div>
            <div class="desc--wrap">
              <h4>Halastic®</h4>
              <h5>"세계 최초 할랄 인증 친환경 바이오플라스틱"</h5>
              <ul>
                <li>
                  중동 지역 진출 제품들의 패키징 솔루션을 위해 세계 최초로 할랄 인증을
                  받은 소재를 개발하였습니다.
                </li>
                <li>
                  할라스틱은 식품·의료·생활·뷰티 산업 전반에서 이슬람 국가들의 종교적
                  가치는 물론, 글로벌 친환경 기준까지 충족하는 솔루션입니다.
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>
<script setup>
  import TopVisual from "~/components/topVisual.vue";

  const className = ref("products");
  const title = ref("Products");
  const navigation = ref([
    {
      name: "Products",
      link: "/products/materials",
      gnbList: [
        { name: "Company", link: "/company/intro" },
        { name: "Product", link: "/products/materials" },
        { name: "Technology", link: "/technology/facilities" },
        { name: "Media", link: "/media/news" },
        { name: "Contact", link: "/contact/notice" },
      ],
    },
    {
      name: "Materials",
      link: "/products/materials",
      gnbList: [
        { name: "Materials", link: "/products/materials" },
        { name: "Solutions", link: "/products/solutions" },
      ],
    },
  ]);
</script>