greenwhale/app/pages/contact/location.vue

<template>
  <main>
    <TopVisual :className="className" :title="title" :navigation="navigation" />
    <section class="title--section">
      <div class="sub--container">
        <div class="title--wrap">
          <h2 class="title">그린웨일글로벌은 <br class="mobile"/>대한민국 <strong>서울</strong>에 본사를 두고 있으며 <br /><strong>베트남</strong>, <strong>미국</strong>, <strong>폴란드</strong> 지사를 통해 <br class="mobile"/>글로벌 사업을 추진 중입니다.</h2>
        </div>
      </div>
    </section>
    <section class="map--section">
      <div class="map--wrap">
        <picture>
          <source media="(max-width: 768px)" srcset="/img/img--location--mo.svg">
          <img src="/img/img--location.svg" alt="">
        </picture>
      </div>
    </section>
    <section class="location--section">
      <div class="sub--container">
        <div class="location--wrap">
          <h4>본사</h4>
          <p class="map">
            <i class="ico"></i>서울시 강남구 언주로 650 한국건설기술인협회 신관 2층
            그린웨일글로벌 (06098)
          </p>
          <p class="call"><i class="ico"></i>02-3447-8801 ~ 8802</p>
          <div class="location--map">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12658.81751592391!2d127.02545755395572!3d37.51488995282799!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca58e2a1fd187%3A0xc1499b8d314042e3!2z6re466aw7Juo7J286riA66Gc67KM!5e0!3m2!1sko!2skr!4v1758783859462!5m2!1sko!2skr"
              width="100%"
              height="100%"
              style="border: 0"
              allowfullscreen=""
              loading="lazy"
              referrerpolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>
        </div>
        <div class="location--wrap">
          <h4>베트남 지사</h4>
          <p class="map">
            <i class="ico"></i>GREEN WHALE GLOBAL VIET NAM CO., LTD. <br />Factory
            C_1B_C4_B & C_1B_C4_C, Lot C_1B_CN, My Phuoc 3 Industrial Park, Thoi Hoa Ward,
            Ho Chi Minh City, Vietnam
          </p>
          <div class="location--map">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3914.9270000355136!2d106.64953687682507!3d11.11881475278132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3174cbf1e4323149%3A0x2e0d6ec6374c122!2sGREEN%20WHALE%20GLOBAL%20VN!5e0!3m2!1sko!2skr!4v1758784019302!5m2!1sko!2skr"
              width="100%"
              height="100%"
              style="border: 0"
              allowfullscreen=""
              loading="lazy"
              referrerpolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>
        </div>
        <div class="location--wrap">
          <h4>미국 지사</h4>
          <p class="map">
            <i class="ico"></i>6940 Beach BLVD Suite D-705, Buena Park, CA 90621
          </p>
          <div class="location--map">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3313.141775200663!2d-118.00045382288198!3d33.860236927841896!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dd2beae3bac651%3A0xff71b496867d91ce!2s6940%20Beach%20Blvd%20Suite%20D-705%2C%20Buena%20Park%2C%20CA%2090621%20%EB%AF%B8%EA%B5%AD!5e0!3m2!1sko!2skr!4v1758784090236!5m2!1sko!2skr"
              width="100%"
              height="100%"
              style="border: 0"
              allowfullscreen=""
              loading="lazy"
              referrerpolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>
        </div>
        <div class="location--wrap">
          <h4>폴란드 지사</h4>
          <p class="map"><i class="ico"></i>Grzybowska 5A; 00-132 Warszawa</p>
          <div class="location--map">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2443.361090190472!2d20.99811167761218!3d52.23682465715538!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471ecc89aa175c97%3A0xd75cd4ed676d6904!2zR3J6eWJvd3NrYSA1QSwgMDAtMTMyIFdhcnN6YXdhLCDtj7TrnoDrk5w!5e0!3m2!1sko!2skr!4v1758784112008!5m2!1sko!2skr"
              width="100%"
              height="100%"
              style="border: 0"
              allowfullscreen=""
              loading="lazy"
              referrerpolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>
<script setup>
  import TopVisual from "~/components/topVisual.vue";

  const className = ref("contact");
  const title = ref("Contact");
  const navigation = ref([
    {
      name: "Contact",
      link: "/contact/location",
      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: "/contact/location",
      gnbList: [
        { name: "공지사항", link: "/contact/notice" },
        { name: "FAQ", link: "/contact/faq" },
        { name: "고객센터", link: "/contact/support" },
        { name: "오시는길", link: "/contact/location" },
      ],
    },
  ]);
</script>