greenwhale/app/pages/products/solutions.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">Materials</NuxtLink>
          <NuxtLink to="/products/solutions" class="active">Solutions</NuxtLink>
        </div>
        <div class="materials--wrap">
          <div class="materials--box reverse">
            <div class="desc--wrap">
              <h4>Fashion & Cosmetics</h4>
              <h5>"스타일과 아름다움에 지속가능함을 더합니다"</h5>
              <ul>
                <li>의류 포장봉투, 옷걸이, 화장품 용기, 쿠션 케이스, 샴푸·스킨·로션 패키징
                </li>
                <li>의류부터 뷰티 제품까지, 스타일을 표현하는 모든 제품에 자연으로 돌아가는 소재를 적용하여 플라스틱 폐기물을 줄이고 브랜드의 친환경 가치를 높입니다.</li>
              </ul>
              <div class="tag--wrap">
                <span>#사출</span>
                <span>#압출</span>
              </div>
              <div class="btn--wrap">
                <NuxtLink to="/">Contact Us<i class="ico"></i></NuxtLink>
              </div>
            </div>
            <div class="img--wrap">
              <img src="/img/img--solutions1.png" alt="" />
            </div>
          </div>
          <div class="materials--box">
            <div class="img--wrap">
              <img src="/img/img--solutions2.png" alt="" />
            </div>
            <div class="desc--wrap">
              <h4>Health & Pharmaceutical</h4>
              <h5>"건강을 위한 선택에도 친환경이 함께합니다"</h5>
              <ul>
                <li>건강기능식품 용기, 약통, 영양제 케이스, 보건용 패키징</li>
                <li>
                  인체와 환경에 안전한 바이오 기반 소재로, 의료·건강 제품의 신뢰도를
                  높이는 친환경 대안을 제시합니다.
                </li>
              </ul>
              <div class="tag--wrap">
                <span>#사출</span>
                <span>#압출</span>
              </div>
              <div class="btn--wrap">
                <NuxtLink to="/">Contact Us<i class="ico"></i></NuxtLink>
              </div>
            </div>
          </div>
          <div class="materials--box reverse">
            <div class="desc--wrap">
              <h4>Food & Beverage</h4>
              <h5>"매일 버려지는 것을 자연으로 되돌립니다"</h5>
              <ul>
                <li>빨대, 커틀러리, 식품 용기, 트레이, 피자 세이버, 과일 포장실망</li>
                <li>
                  음식과 함께 사라지는 생분해성 소재로, 일회용 플라스틱 사용을
                  최소화합니다.
                </li>
              </ul>
              <div class="tag--wrap">
                <span>#사출</span>
                <span>#압출</span>
              </div>
              <div class="btn--wrap">
                <NuxtLink to="/">Contact Us<i class="ico"></i></NuxtLink>
              </div>
            </div>
            <div class="img--wrap">
              <img src="/img/img--solutions3.png" alt="" />
            </div>
          </div>
          <div class="materials--box">
            <div class="img--wrap">
              <img src="/img/img--solutions4.png" alt="" />
            </div>
            <div class="desc--wrap">
              <h4>Household & Smart Living</h4>
              <h5>"생활의 모든 순간을 친환경으로 바꿉니다"</h5>
              <ul>
                <li>
                  문구류, 반려동물 배변 봉투, 페인트통, 부탄가스 캡, 멀칭필름, 모종
                  트레이, 가습기, 가전 포장재
                </li>
                <li>
                  일상용품부터 소형 가전까지, 생활 전반에 적용 가능한 친환경 소재로
                  폐기물을 줄이고 지속가능한 라이프스타일을 만듭니다.
                </li>
              </ul>
              <div class="tag--wrap">
                <span>#사출</span>
                <span>#압출</span>
              </div>
              <div class="btn--wrap">
                <NuxtLink to="/">Contact Us<i class="ico"></i></NuxtLink>
              </div>
            </div>
          </div>
          <div class="materials--box reverse">
            <div class="desc--wrap">
              <h4>Electronics & Robotics</h4>
              <h5>"기술의 진보에 자연을 담습니다"</h5>
              <ul>
                <li>전자기기 케이스, 리모컨 커버, 드론 외장재, 로봇 커버</li>
                <li>
                  고기능성이 요구되는 전자 및 로봇 분야에서도 탄소 저감과 내열성 등 기술적
                  요건을 충족하며 지속가능한 대안을 제시합니다.
                </li>
              </ul>
              <div class="tag--wrap">
                <span>#사출</span>
                <span>#압출</span>
              </div>
              <div class="btn--wrap">
                <NuxtLink to="/">Contact Us<i class="ico"></i></NuxtLink>
              </div>
            </div>
            <div class="img--wrap">
              <img src="/img/img--solutions5.png" alt="" />
            </div>
          </div>
          <div class="materials--box">
            <div class="img--wrap">
              <img src="/img/img--solutions6.png" alt="" />
            </div>
            <div class="desc--wrap">
              <h4>Mobility & Construction</h4>
              <h5>"이동과 공간, 모두 탄소를 줄입니다"</h5>
              <ul>
                <li>자동차 부품, 전기차 내장재, 단열재, 몰딩 부자재, 건축 완충 부품</li>
                <li>
                  모빌리티와 건축 산업 전반에 적용 가능한 고기능성 친환경 소재로,
                  제조현장의 탄소배출과 플라스틱 사용을 획기적으로 줄입니다.
                </li>
              </ul>
              <div class="tag--wrap">
                <span>#사출</span>
                <span>#압출</span>
              </div>
              <div class="btn--wrap">
                <NuxtLink to="/">Contact Us<i class="ico"></i></NuxtLink>
              </div>
            </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/solutions",
      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: "Solutions",
      link: "/products/solutions",
      gnbList: [
        { name: "Materials", link: "/products/materials" },
        { name: "Solutions", link: "/products/solutions" },
      ],
    },
  ]);
</script>