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: "공지사항", link: "/contact/notice" },
      { name: "FAQ", link: "/contact/faq" },
      { name: "고객센터", link: "/contact/support" },
      { name: "오시는길", link: "/contact/location" }
    ]
  },
  { name: "오시는길", link: "/contact/location" }
])
</script>