piratezon_new/app/pages/ford/vehicle/mustang.vue

<template>
  <main>
    <SwiperBanner
      class="sticky--banner"
      :slides="bannerSlides"
      :autoplay="false"
      :loop="false"
      type=""
    />
    <div class="outer--wrapper">
      <div class="trim--spec--wrap">
        <ul>
          <li>
            <span>소비자 가격</span>
            <div>
              59,200,000<em>원 부터<i>*</i></em>
            </div>
          </li>
          <li>
            <span>엔진</span>
            <div>EcoBoost® 2.3L<span></span>Ti-VCT V8 5.0L</div>
          </li>
          <li>
            <span>승차 정원(명)</span>
            <div>4</div>
          </li>
        </ul>
      </div>

      <div class="title--visual">
        <h2>RULES OF THE OPEN ROAD</h2>
        <div class="sub--title">
          2025 FORD MUSTANG 현대적이고 헤리티지에서 영감을 받은 디자인은 마주하는 순간
          영혼을 사로잡힐 정도의 매력이 있습니다.<br />
          열린 도로. 닫힌 트랙. 이 전설적인 스포츠카의 아이콘은 모두를 삼켜 버립니다.
        </div>
      </div>

      <div class="models--visual--01 type--3 mt--80">
        <div class="thumb--wrap">
          <img src="/img/models/mustang/visual-01.jpg" />
        </div>
      </div>

      <div class="car--price--small--pic--wrap mt--120">
        <div>
          <h2>Mustang Models</h2>
          <div class="car--list--wrap">
            <ul>
              <li>
                <div class="thumb">
                  <img src="/img/models/mustang/mustang01.png" alt="" />
                </div>
                <div class="desc--wrap">
                  <h2 class="trim--name">
                    Ecoboost Premium<br />
                    Coupe
                  </h2>
                  <div class="price--wrap">
                    소비자 가격 : <em>59,200,000 원 부터<i>*</i></em>
                  </div>
                </div>
              </li>
              <li>
                <div class="thumb">
                  <img src="/img/models/mustang/mustang02.png" alt="" />
                </div>
                <div class="desc--wrap">
                  <h2 class="trim--name">
                    Ecoboost Premium<br />
                    Convertible
                  </h2>
                  <div class="price--wrap">
                    소비자 가격 : <em>66,200,000 원 부터<i>*</i></em>
                  </div>
                </div>
              </li>
              <li>
                <div class="thumb">
                  <img src="/img/models/mustang/mustang03.png" alt="" />
                </div>
                <div class="desc--wrap">
                  <h2 class="trim--name">
                    GT Premium Coupe<br />
                    Standard
                  </h2>
                  <div class="price--wrap">
                    소비자 가격 : <em>78,900,000 원 부터<i>*</i></em>
                  </div>
                </div>
              </li>
              <li>
                <div class="thumb">
                  <img src="/img/models/mustang/mustang04.png" alt="" />
                </div>
                <div class="desc--wrap">
                  <h2 class="trim--name">
                    GT Premium<br />
                    Convertible Standard
                  </h2>
                  <div class="price--wrap">
                    소비자 가격 : <em>85,000,000 원 부터<i>*</i></em>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="title--visual mt--150">
        <h2>THE LEGEND THAT KEEPS YOU COMING BACK</h2>
        <div class="sub--title">
          강력한 4기통 엔진이 장착된 MUSTANG ECOBOOST PREMIUM 모델은 2.3L 퍼포먼스
          패키지와 함께하여 만족할만한 성능을 발휘합니다.<br />
          MUSTANG 5.0L GT 모델은 원하시는 대로 트랙을 마음껏 달릴 수 있도록
          설계되었습니다.<br />
          MUSTANG에 올라 버클을 채우십시오. 당신의 삶은 놀라운 속도로 움직일 것입니다.
        </div>
      </div>
      <div class="models--visual--grid mt--80 type--2">
        <ul>
          <li>
            <div class="thumb--wrap">
              <img src="/img/models/mustang/grid-01.jpg" />
            </div>
            <div class="desc--wrap">
              <h2>OPEN-AIR FREEDOM</h2>
              <div class="captions">
                MUSTANG CONVERTIBLE과 함께 하고 계시다면<br />
                TOP을 제거하여 열어보십시오.<br />
                코끝으로 느껴지는 신선한 공기가 당신을<br />
                새롭게 만들어드릴 것입니다.
              </div>
            </div>
          </li>
          <li>
            <div class="thumb--wrap">
              <img src="/img/models/mustang/grid-02.jpg" />
            </div>
            <div class="desc--wrap">
              <h2>HIGH-PERFORMANCE HANDLING</h2>
              <div class="captions">
                2025 Ford Mustang에 적용된 Flat bottom<br />
                스티어링 휠은 모두 4조각의 가죽으로 마감되어<br />
                있으며 각 부분에 적절하게 조화된 크롬 베젤과도<br />
                잘 조화를 이룹니다. Mustang의 스티어링 휠은<br />
                도심, 트랙 어느 곳에서도 경주용 차량과 같은<br />
                컨트롤이 가능할 수 있도록 도와드립니다.
              </div>
            </div>
          </li>
          <li>
            <div class="thumb--wrap">
              <img src="/img/models/mustang/grid-03.jpg" />
            </div>
            <div class="desc--wrap">
              <h2>IMMERSIVE DIGITAL COCKPIT</h2>
              <div class="captions">
                매일 반복되는 일상적인 드라이빙에는 가끔 변화가<br />
                필요합니다. 사용자가 설정이 가능한 LCD 디지털<br />
                클러스터 및 센터 터치스크린을 통해 원하시는<br />
                디자인으로 디스플레이를 변경해 보십시오.
              </div>
            </div>
          </li>
        </ul>
      </div>

      <!-- <SwiperBanner3
        class="mt--100"
        :slides="bannerSlides2"
        :autoplay="false"
        :loop="false"
        mtitle="design"
        stitle="2025 Ford Mustang 라인업은 보는 순간 당신의 영혼을 자극할 수 있을 정도로 세심하게 제작되었습니다.<br/>
  헤리티지에서 영감을 받은 모던한 디자인에는 날렵한 라인과 질주 본능 등 정통 머스탱의 특징이 그대로 반영되어 있습니다.<br/>
  그리고 보는 이의 눈길을 사로잡는 11가지의 컬러 및 3가지 인테리어 옵션을 통해 어디를 가든지 자신만의 개성을 드러낼 수 있습니다."
        type=""
      />

      <SwiperBanner3
        :slides="bannerSlides3"
        :autoplay="false"
        :loop="false"
        type=""
        mtitle="technology"
        stitle="아메리칸 머슬카를 대표하는 머스탱은 장애물이 있는 도로나 깊은 코너링에서도 최적의 성능을 발휘합니다.<br/>
  이는 60년의 역사를 지닌 머스탱 이기에 가능한 일입니다."
      /> -->

      <div class="title--visual mt--150">
        <h2>gallery</h2>
        <!-- <div class="sub--title">
          여전히 많은 이들이 MUSTANG이라는 이름만 들어도 가슴이 설레이실 것입니다. 바로
          퍼포먼스의 모든 것, 포드MUSTANG 입니다.
        </div> -->
      </div>
      <div class="gallery--wrap mt--80">
        <div class="thumb--wrap">
          <SwiperBanner2
            :slides="gallery1"
            :autoplay="false"
            :loop="false"
            type=""
          />
        </div>
        <!-- <div class="thumb--wrap">
          <SwiperBanner2
            :slides="gallery2"
            :autoplay="false"
            :loop="false"
            type="interior"
          />
        </div> -->
      </div>
      <div class="nav--dis--wrap model mt--150" :class="{ active: isDisOpen }">
        <div class="dis--btn" @click="isDisOpen = !isDisOpen">disclosures <i class="ico"></i></div>
        <div class="dis--cont">
          <div class="container">
            <p>
              *본 웹사이트에 공지된 가격정보는 부가세(VAT)를 포함하고 있습니다. 본 가격은 개별소비세 인하에 관한 정부시책을 반영한 것이며 가격정보는 예고없이 변동될 수 있습니다. 
             가격정보는 고객님의 차량 구입에 도움을 드리고자 함이며 법적 구속력은 없습니다. <br/><br/>
             사이트에서 제공하는 차량에 대한 모든 이미지 또는 사양은 실제 판매 모델과 다를 수 있습니다. 정확한 정보는 가까운 공식 딜러를 통해 확인하시기 바랍니다.
            </p>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup>
  // disclosures 토글 (기본 열림)
  const isDisOpen = ref(true);
  const bannerSlides = ref([
    {
      image: "/img/models/mustang/mustang_banner01.jpg",
      moImage: "/img/models/mustang/mustang_banner01_mo.jpg",
      alt: "Ford mustang",
      title: "Ford mustang",
      subtitle: "머스탱을 소유할 최고의 타이밍",
      smalldesc: "",
      morelink: "/ford/network",
      morelinktitle: "시승 신청",
      morelinktarget: "",
    },
  ]);

  const bannerSlides2 = ref([
    {
      image: "/img/models/mustang/design-01-1.png",
      alt: "AN INSTANT CLASSIC STANDOUT STYLE",
      title: "AN INSTANT CLASSIC STANDOUT STYLE",
      smalldesc:
        "2025 Ford Mustang의 특징은 매끈한 보디라인과 시선을 사로잡는 휠과 브레이크 조합에서도 발견하실 수 있습니다.<br/>이는 머스탱 고유의 현대적인 디자인을 유지하면서도 머스탱 헤리티지도 스며들어 있어, 잊을 수 없는 첫인상을 제공해 드립니다.",
    },
    {
      image: "/img/models/mustang/design-01-2.png",
      alt: "EXPERIENCE A RUSH OF COLOR",
      title: "EXPERIENCE A RUSH OF COLOR",
      smalldesc:
        "2025 Ford Mustang에서는 다양한 외장색을 만나보실 수 있습니다. <br/>Race Red, Oxford White와 같은 클래식한 색상부터 생동감이 넘치는 Vapor Blue 및 Yellow Splash 컬러까지 다양하게 선택 가능합니다.",
    },
    {
      image: "/img/models/mustang/design-01-3.png",
      alt: "OPEN-AIR FREEDOM",
      title: "OPEN-AIR FREEDOM",
      smalldesc:
        "만약, Mustang Convertible과 함께 하고 계시다면 Top을 제거하여 열어보십시오.<br/>코끝으로 느껴지는 신선한 공기가 당신을 새롭게 만들어드릴 것입니다.",
    },
  ]);

  const bannerSlides3 = ref([
    {
      image: "/img/models/mustang/design-02-1.png",
      alt: "GAME CHANGING COCKPIT",
      title: "GAME CHANGING COCKPIT",
      smalldesc:
        "앉는 순간 나를 감싸주는 편안한 시트와 스포티한 디자인의 Flat bottom 스티어링 휠. 이뿐만 아니라 13.2인치 듀얼 스크린 대형 센터 스크린까지.<br/>쿠페 또는 컨버터블, 어떤 종류의 Mustang에 오르시더라도 Mustang과 함께하는 모든 순간에서 진정한 몰입감을 경험적으로,<br/>그리고 본능적으로 느끼실 수 있습니다.",
    },
    {
      image: "/img/models/mustang/design-02-2.png",
      alt: "IMMERSIVE DIGITAL COCKPIT",
      title: "IMMERSIVE DIGITAL COCKPIT",
      smalldesc:
        "매일 반복되는 일상적인 드라이빙에는 가끔 변화가 필요합니다. 사용자가 설정이 가능한 LCD 디지털 클러스터 및 센터 터치스크린을 통해 원하시는 <br/>디자인으로 디스플레이를 변경해 보십시오.",
    },
    {
      image: "/img/models/mustang/design-02-3.png",
      alt: "EYE-CATCHING INTERIOR DETAILS",
      title: "EYE-CATCHING INTERIOR DETAILS",
      smalldesc:
        "2025 Ford Mustang 인테리어는 디테일도 놓치지 않았습니다. 실내를 더욱 돋보이게 만드는 정밀한 스티칭과 악센트, 그리고 Mustang만의 유니크한 배지까지. <br/>이와 같은 디테일들이 잘 조화되어 오랫동안 잊히지 않는 Mustang 인테리어가 완성되었습니다.",
    },
    {
      image: "/img/models/mustang/design-02-4.png",
      alt: "HIGH-PERFORMANCE HANDLING",
      title: "HIGH-PERFORMANCE HANDLING",
      smalldesc:
        "2025 Ford Mustang에 적용된 Flat bottom 스티어링 휠은 모두 4조각의 가죽으로 마감되어 있으며 각 부분에 적절하게 조화된 크롬 베젤과도 잘 조화를 이룹니다. <br/>Mustang의 스티어링 휠은 도심, 트랙 어느 곳에서도 경주용 차량과 같은 컨트롤이 가능할 수 있도록 도와드립니다.",
    },
  ]);

  const gallery1 = ref([
    { image: "/img/models/mustang/gallery_1_1.avif" },
    { image: "/img/models/mustang/gallery_1_2.avif" },
    { image: "/img/models/mustang/gallery_1_3.avif" },
    { image: "/img/models/mustang/gallery_1_4.avif" },
    { image: "/img/models/mustang/gallery_1_5.avif" },
    { image: "/img/models/mustang/gallery_1_6.webp" },
    { image: "/img/models/mustang/gallery_1_7.webp" },
    { image: "/img/models/mustang/gallery_1_8.avif" },
    { image: "/img/models/mustang/gallery_1_9.webp" },
    { image: "/img/models/mustang/gallery_1_10.avif" },
    { image: "/img/models/mustang/gallery_1_11.avif" },
    { image: "/img/models/mustang/gallery_1_12.avif" },
    { image: "/img/models/mustang/gallery_1_13.avif" },
    { image: "/img/models/mustang/gallery_1_14.jpg" },
    { image: "/img/models/mustang/gallery_1_15.webp" },
    { image: "/img/models/mustang/gallery_1_16.jpg" },
    { image: "/img/models/mustang/gallery_1_17.jpg" },
    { image: "/img/models/mustang/gallery_1_18.avif" },
    { image: "/img/models/mustang/gallery_1_19.webp" },
    { image: "/img/models/mustang/gallery_1_20.avif" },
    { image: "/img/models/mustang/gallery_1_21.avif" },
    { image: "/img/models/mustang/gallery_1_22.avif" },
    { image: "/img/models/mustang/gallery_1_23.avif" },
    { image: "/img/models/mustang/gallery_1_24.jpg" },
    { image: "/img/models/mustang/gallery_1_25.avif" },
    { image: "/img/models/mustang/gallery_1_26.avif" },
    { image: "/img/models/mustang/gallery_1_27.avif" },
    { image: "/img/models/mustang/gallery_1_28.jpg" },
    { image: "/img/models/mustang/gallery_1_29.webp" },
    { image: "/img/models/mustang/gallery_1_30.avif" },
    { image: "/img/models/mustang/gallery_1_31.avif" },
    { image: "/img/models/mustang/gallery_1_32.avif" },
    { image: "/img/models/mustang/gallery_1_33.avif" },
    { image: "/img/models/mustang/gallery_1_34.avif" },
    { image: "/img/models/mustang/gallery_1_35.avif" },
    { image: "/img/models/mustang/gallery_1_36.jpg" },
    { image: "/img/models/mustang/gallery_1_37.avif" },
    { image: "/img/models/mustang/gallery_1_38.avif" },
     { image: "/img/models/mustang/gallery_2_1.avif" },
    { image: "/img/models/mustang/gallery_2_2.avif" },
    { image: "/img/models/mustang/gallery_2_3.avif" },
    { image: "/img/models/mustang/gallery_2_4.avif" },
    { image: "/img/models/mustang/gallery_2_5.webp" },
    { image: "/img/models/mustang/gallery_2_6.avif" },
    { image: "/img/models/mustang/gallery_2_7.avif" },
    { image: "/img/models/mustang/gallery_2_8.avif" },
    { image: "/img/models/mustang/gallery_2_9.avif" },
    { image: "/img/models/mustang/gallery_2_10.avif" },
    { image: "/img/models/mustang/gallery_2_11.avif" },
    { image: "/img/models/mustang/gallery_2_12.webp" },
    { image: "/img/models/mustang/gallery_2_13.avif" },
    { image: "/img/models/mustang/gallery_2_14.avif" },
    { image: "/img/models/mustang/gallery_2_15.avif" },
    { image: "/img/models/mustang/gallery_2_16.avif" },
    { image: "/img/models/mustang/gallery_2_17.avif" },
    { image: "/img/models/mustang/gallery_2_18.avif" },
  ]);
  const gallery2 = ref([
    { image: "/img/models/mustang/gallery_2_1.avif" },
    { image: "/img/models/mustang/gallery_2_2.avif" },
    { image: "/img/models/mustang/gallery_2_3.avif" },
    { image: "/img/models/mustang/gallery_2_4.avif" },
    { image: "/img/models/mustang/gallery_2_5.webp" },
    { image: "/img/models/mustang/gallery_2_6.avif" },
    { image: "/img/models/mustang/gallery_2_7.avif" },
    { image: "/img/models/mustang/gallery_2_8.avif" },
    { image: "/img/models/mustang/gallery_2_9.avif" },
    { image: "/img/models/mustang/gallery_2_10.avif" },
    { image: "/img/models/mustang/gallery_2_11.avif" },
    { image: "/img/models/mustang/gallery_2_12.webp" },
    { image: "/img/models/mustang/gallery_2_13.avif" },
    { image: "/img/models/mustang/gallery_2_14.avif" },
    { image: "/img/models/mustang/gallery_2_15.avif" },
    { image: "/img/models/mustang/gallery_2_16.avif" },
    { image: "/img/models/mustang/gallery_2_17.avif" },
    { image: "/img/models/mustang/gallery_2_18.avif" },
  ]);
</script>