greenwhale/app/pages/company/intro.vue

<template>
  <main>
    <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 class="mobile" />가꾸어 나아가야 할 <br />푸른빛 미래 환경에 기여하는 <br class="mobile" />친환경 기업을 꿈꿉니다.</p>
        </div>
      </div>
    </section>
    <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>
    </section>
    <section class="product--section">
      <div class="sub--container">
        <div class="title--wrap">
          <h3 class="title">Production Facilities</h3>
          <p class="sub--title2">그린웨일 글로벌은 독자적으로 특허받은 친환경 소재 개발 기술과 이를 구현할 다양한 설비를 바탕으로, <br />차세대 바이오 플라스틱을 만들어갑니다. <br class="mobile" />또한 R&D에 특화된 역량을 바탕으로 글로벌 대기업과의 공동 개발이 가능하여, <br />고객이 원하는 맞춤형 친환경 솔루션을 제공합니다.</p>
        </div>
        <div class="product--img--wrap web">
          <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 class="product--img--wrap mobile">
          <div class="img--top">
            <div class="img--wrap">
              <img src="/img/img--product1--mo.png" alt="생산 시설">
            </div>
            <div class="img--wrap">
              <img src="/img/img--product2--mo.png" alt="생산 시설">
            </div>
          </div>
          <div class="img--bot">
            <div class="img--wrap">
              <img src="/img/img--product3--mo.png" alt="생산 시설">
            </div>
            <div class="img--wrap">
              <img src="/img/img--product4--mo.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>
<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: "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: "회사소개",
      link: "/company/intro",
      gnbList: [
        { name: "회사소개", link: "/company/intro" },
        { name: "회사연혁", link: "/company/history" },
        { name: "협력업체", link: "/company/partners" },
        { name: "회사소개자료", link: "/company/catalog" },
      ],
    },
  ]);
</script>