greenwhale/app/pages/company/catalog.vue

<template>
  <main>
    <TopVisual :className="className" :title="title" :navigation="navigation" />
    <section class="catalog--section">
      <div class="sub--container type2">
        <div class="title--wrap">
          <h2 class="title">
            저희 회사에 대한 이해를 돕기 위해 <br /><strong
              >카탈로그와 회사 소개서를 준비했습니다.</strong
            >
          </h2>
        </div>
        <div class="catalog--wrap">
          <div class="catalog">
            <div class="img--wrap">
              <img src="/img/img--catalog1.png" alt="" />
            </div>
            <div class="download--wrap">
              <p>카탈로그 다운로드</p>
              <div class="btn--wrap">
                <UButton class="download--btn">한글<i class="ico"></i></UButton>
                <UButton class="download--btn">영문<i class="ico"></i></UButton>
                <UButton class="download--btn">폴란드어<i class="ico"></i></UButton>
              </div>
            </div>
          </div>
          <div class="catalog">
            <div class="img--wrap">
              <img src="/img/img--catalog2.png" alt="" />
            </div>
            <div class="download--wrap">
              <p>회사 소개서 다운로드</p>
              <div class="btn--wrap">
                <UButton class="download--btn">한글<i class="ico"></i></UButton>
                <UButton class="download--btn">영문<i class="ico"></i></UButton>
                <UButton class="download--btn">폴란드어<i class="ico"></i></UButton>
              </div>
            </div>
          </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/catalog",
      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/catalog",
      gnbList: [
        { name: "회사소개", link: "/company/intro" },
        { name: "회사연혁", link: "/company/history" },
        { name: "협력업체", link: "/company/partners" },
        { name: "회사소개자료", link: "/company/catalog" },
      ],
    },
  ]);
</script>