piratezon_new/app/pages/ford/index.vue

<template>
  <main>
    <Popup site="ford" />
    <BlockMainSwiper />
    <div class="container">
      <!-- 2026-04-15 08:00:00 이전 -->
      <section class="main--section" v-if="!isAfterLaunch">
        <h2>완벽함을 소유하다</h2>
        <p>포드에서 전하는 최신 모델 정보와 특별한 이야기를 만나보세요</p>
        <div class="main--grid--wrap">
          <NuxtLink to="/ford/vehicle/ranger" class="grid">
            <h3>RANGER <i class="ico"></i></h3>
            <p>OUR MOST VERSATILE RANGER EVER</p>
          </NuxtLink>
          <div class="grid--group--wrap">
            <div class="grid--wrap">
              <NuxtLink to="/ford/vehicle/mustang" class="grid">
                <h3>mustang<i class="ico"></i></h3>
                <p>rules of the open road</p>
              </NuxtLink>
              <NuxtLink to="/ford/vehicle/explorer" class="grid">
                <h3>explorer<i class="ico"></i></h3>
                <p>it's all in the name, 포드 익스플로러</p>
              </NuxtLink>
            </div>
            <div class="grid--wrap">
              <NuxtLink to="/ford/vehicle/bronco" class="grid">
                <h3>bronco<i class="ico"></i></h3>
                <p>bronco outer banks</p>
              </NuxtLink>
              <NuxtLink to="/ford/vehicle/expedition" class="grid">
                <h3>expedition<i class="ico"></i></h3>
                <p>the road to adventure is often unpaved</p>
              </NuxtLink>
            </div>
          </div>
        </div>
        <div class="main--list--wrap">
          <NuxtLink to="/ford/network" class="list">
            <i class="ico"></i>
            <h3>전시장 찾기</h3>
            <p>가까운 주변의 전시장을 확인해보세요. <i class="ico"></i></p>
          </NuxtLink>
          <NuxtLink to="/ford/network" class="list">
            <i class="ico"></i>
            <h3>서비스 센터 찾기</h3>
            <p>가까운 주변의 서비스 센터를 확인해보세요. <i class="ico"></i></p>
          </NuxtLink>
          <NuxtLink to="/ford/owner" class="list">
            <i class="ico"></i>
            <h3>공인 서비스</h3>
            <p>
              포드 전문가에게 맡기시면 차별화된 서비스를 받으실 수 있습니다.<i
                class="ico"
              ></i>
            </p>
          </NuxtLink>
        </div>
      </section>
      <!-- 2026-04-15 08:00:00 이후 -->
      <section class="main--section" v-if="isAfterLaunch">
        <h2>SEE ALL FORD</h2>
        <p>포드에서 전하는 최신 모델 정보와 특별한 이야기를 만나보세요</p>
        <div class="main--grid--wrap">
          <NuxtLink to="/ford/vehicle/explorer" class="grid explorer">
            <h3>explorer<i class="ico"></i></h3>
            <p>it's all in the name, 포드 익스플로러</p>
          </NuxtLink>
          <div class="grid--group--wrap">
            <div class="grid--wrap">
              <NuxtLink to="/ford/vehicle/mustang" class="grid mustang">
                <h3>mustang<i class="ico"></i></h3>
                <p>rules of the open road</p>
              </NuxtLink>
              <NuxtLink to="/ford/vehicle/bronco" class="grid bronco">
                <h3>bronco<i class="ico"></i></h3>
                <p>bronco outer banks</p>
              </NuxtLink>
            </div>
            <div class="grid--wrap">
              <NuxtLink to="/ford/vehicle/ranger" class="grid ranger">
                <h3>RANGER <i class="ico"></i></h3>
                <p>OUR MOST VERSATILE RANGER EVER</p>
              </NuxtLink>
              <NuxtLink to="/ford/vehicle/expedition" class="grid expedition">
                <h3>expedition<i class="ico"></i></h3>
                <p>the road to adventure is often unpaved</p>
              </NuxtLink>
            </div>
          </div>
        </div>
        <div class="main--list--wrap">
          <NuxtLink to="/ford/network" class="list">
            <i class="ico"></i>
            <h3>전시장 찾기</h3>
            <p>가까운 주변의 전시장을 확인해보세요. <i class="ico"></i></p>
          </NuxtLink>
          <NuxtLink to="/ford/network" class="list">
            <i class="ico"></i>
            <h3>서비스 센터 찾기</h3>
            <p>가까운 주변의 서비스 센터를 확인해보세요. <i class="ico"></i></p>
          </NuxtLink>
          <NuxtLink to="/ford/owner" class="list">
            <i class="ico"></i>
            <h3>공인 서비스</h3>
            <p>
              포드 전문가에게 맡기시면 차별화된 서비스를 받으실 수 있습니다.<i
                class="ico"
              ></i>
            </p>
          </NuxtLink>
        </div>
      </section>
    </div>
  </main>
</template>

<script setup>
  const isAfterLaunch = useTimeSwitch('2026-04-15T08:00:00+09:00');
</script>