piratezon_new/app/pages/ford/about/company.vue

<template>
  <div>
    <breadCrumbs
      :main-menu="breadcrumbData.mainMenu"
      :current-sub-menu="breadcrumbData.currentSubMenu"
      :sub-menu-items="breadcrumbData.subMenuItems"
    />
    <div class="about--wrap">
      <div class="container">
        <div class="title--visual">
          <h2>FORD STORY</h2>
          <div class="sub--title">
            포드 모터 컴퍼니는 고객 여러분께 승용차, 트럭, SUV 를 비롯해 다양한 제품과
            서비스를 세계 여러 나라에 제공하고 있습니다.<br />
            새로운 100년을 맞이하면서 저희는 폭넓은 잠재 고객층에게 더욱 가까이 다가가기
            위해 노력하고 있습니다.<br />
            포드의 모든 자동차 브랜드들은 포드 모터 컴퍼니 그룹 내에서 저마다 독특한
            개성과 차별성을 자랑하고 있습니다.
          </div>
        </div>
        <div class="visual--banner--01 mt--70">
          <img src="/img/about/about--banner01.jpg" alt="FORD STORY" />
        </div>

        <div class="title--visual">
          <h2>FORD BRAND</h2>
          <div class="sub--title">
            포드 모터 컴퍼니는 고객 여러분께 승용차, 트럭, SUV 를 비롯해 다양한 제품과
            서비스를 세계 여러 나라에 제공하고 있습니다.<br />
            새로운 100년을 맞이하면서 저희는 폭넓은 잠재 고객층에게 더욱 가까이 다가가기
            위해 노력하고 있습니다.<br />
            포드의 모든 자동차 브랜드들은 포드 모터 컴퍼니 그룹 내에서 저마다 독특한
            개성과 차별성을 자랑하고 있습니다.
          </div>
        </div>
        <div class="visual--banner--02 mt--70">
          <div class="thumb--wrap">
            <div class="thumb--item">
              <div class="thumb">
                <img src="/img/about/about--banner02.png" alt="FORD" />
              </div>
              <div class="desc">
                <h2 class="t--title">FORD</h2>
                <div class="captions">
                  포드 모터 컴퍼니의 최초의 브랜드인 ‘포드’는 전 세계인의 다양한 라이프
                  스타일에 맞는 개성 있는 디자인과 합리적인 가격대의 자동차를 제공합니다.
                  그러한 약속은 세상에 선보인 첫 자동차인 모델 T부터 최근 사랑받고 있는
                  미국의 Mustang과 유럽의 Mondeo, 남미의 EcoSport에 이르 기까지
                  한결같습니다. 세계에서 가장 인기 있는 승용차, 트럭, SUV 가운데에는 늘
                  포드 차들이 있습 니다.
                </div>
              </div>
            </div>
            <div class="thumb--item">
              <div class="thumb">
                <img src="/img/about/about--banner03.png" alt="FORD" />
              </div>
              <div class="desc">
                <h2 class="t--title">FORD HISTORY</h2>
                <div class="captions">
                  포드 모터 컴퍼니는 미국 미시건 주의 한 마차 상점에서 포드 배지를 단
                  자동차로부터 시작되었습니 다. 많은 패밀리 자동차 브랜드들의 창립자인
                  포드의 진수를 알고 싶으시면, 헨리 포드의 첫 자동차 실 험에서부터 모델 A,
                  모델 T 그리고 그 이후의 차들에 이르는 포드 모터 컴퍼니 초창기 역사를
                  살펴보 시기 바랍니다. 포드의 모델 개발에 있어 ‘가격 대비 가치 (Value for
                  Money)’ 는 언제나 최우 선 과제였지만, 결코 품질과 타협하지 않았고 더
                  나은 품질을 추구하려는 노력은 계속되었습니다. 포드는 유럽인들의 현실적
                  요구 조건인 좀 더 작은  사이즈의 모델을 제공하거나 계속 변화되는 환경 에
                  부합하기 위해 더 똑똑한 차를 제공하는 등 고객이 원하는 그 이상을
                  실현하기 위해 끊임없이 노력 하고 있습니다.
                </div>
              </div>
            </div>

            <div class="thumb--item">
              <div class="thumb">
                <img src="/img/about/about--banner04.png" alt="FORD" />
              </div>
              <div class="desc">
                <h2 class="t--title">LINCOLN</h2>
                <div class="captions">
                  1921년 이래 링컨은 미국 최고의 럭셔리 자동차 브랜드의 아이콘으로 그
                  자리를 지켜 왔습니다. 오늘날에도 링컨은 가장 순수한 미국의 정신을
                  담아내고 있습니다.<br />
                  다이나믹한 미국 디자인의 정수로서, 링컨은 우아함과 균형미, 풍부함과
                  절제의 조화를 아우르며 럭셔리를 대담하게 표현합니다.
                </div>
              </div>
            </div>

            <div class="thumb--item">
              <div class="thumb">
                <img src="/img/about/about--banner05.png" alt="FORD" />
              </div>
              <div class="desc">
                <h2 class="t--title">LINCOLN HISTORY</h2>
                <div class="captions">
                  포드 모터 컴퍼니는 1922년, 8백만 달러에 링컨 모터 컴퍼니를
                  인수하였습니다. 링컨은 포드 브랜드 그룹에 합류한 최초의 “외부
                  브랜드”였으며, 포드 모터 컴퍼니가 럭셔리 자동차 분야로 진입하는 시발
                  점이 되었습니다. <br />
                  링컨의 자동차 역사의 대부분은 “최고급의 향유”를 제공한다는 브랜드 목표를
                  만족시키기 위해 매년 업그레이드된 컨티넨탈이나 새로운 소수의 럭셔리카
                  라인으로 구성되어 있습니다.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="our--vision pt--30 mt--120">
        <div class="container">
          <div class="title--visual">
            <h2>OUR VISION</h2>
            <div class="sub--title">
              글로벌 기업인 포드의 임직원들은 전 세계 자동차 산업의 선두에 서서 사람들의
              삶을 더욱 풍요롭게 하고자 함께 노력하고 있습니다.
            </div>
          </div>

          <div class="vision--wrap">
            <ul>
              <li>
                <div class="thumb">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="50"
                    height="50"
                    viewBox="0 0 50 50"
                    fill="none"
                  >
                    <g clip-path="url(#clip0_188_6220)">
                      <path
                        d="M45 26.2865L24.992 50.0005L5 26.2865L13.568 15.9375H36.416L45 26.2865Z"
                        stroke="black"
                        stroke-width="2"
                        stroke-linejoin="bevel"
                      />
                      <path
                        d="M5 26.2852H45"
                        stroke="black"
                        stroke-width="2"
                        stroke-linejoin="bevel"
                      />
                      <path
                        d="M31.7411 26.2865L24.992 50.0005L18.2429 26.2865L21.1468 15.9375H28.8532L31.7411 26.2865Z"
                        stroke="black"
                        stroke-width="2"
                        stroke-linejoin="bevel"
                      />
                      <path
                        d="M24.992 0V6.69013"
                        stroke="black"
                        stroke-width="2"
                        stroke-linejoin="bevel"
                      />
                      <path
                        d="M5.38297 7.79492L10.3291 12.5255"
                        stroke="black"
                        stroke-width="2"
                        stroke-linejoin="bevel"
                      />
                      <path
                        d="M44.6011 7.79492L39.6709 12.5255"
                        stroke="black"
                        stroke-width="2"
                        stroke-linejoin="bevel"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_188_6220">
                        <rect width="50" height="50" fill="white" />
                      </clipPath>
                    </defs>
                  </svg>
                </div>
                <div class="desc">
                  <h2>품질 QUALITY</h2>
                  <div class="captions">
                    포드는 항상 품질을 최우선으로 하고 있습니다. 설계, 제조에서부터 세일즈
                    및 서비스에 이르기까지 언제나 고객을 더욱 만족시키기 위해 노력합니다.
                  </div>
                </div>
              </li>
              <li>
                <div class="thumb">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="50"
                    height="50"
                    viewBox="0 0 50 50"
                    fill="none"
                  >
                    <g clip-path="url(#clip0_188_6229)">
                      <path
                        d="M21.4849 16.5112L11.1846 2.02148"
                        stroke="black"
                        stroke-width="2"
                        stroke-miterlimit="10"
                      />
                      <path
                        d="M26.9813 6.72439C27.4431 3.91918 25.5035 1.2772 22.6491 0.823359C19.7947 0.369517 17.1063 2.27567 16.6445 5.08088C16.1827 7.88609 18.1223 10.5281 20.9767 10.9819C23.8312 11.4358 26.5195 9.52959 26.9813 6.72439Z"
                        stroke="black"
                        stroke-width="2"
                        stroke-miterlimit="10"
                      />
                      <path
                        d="M21.4849 16.5098H22.1401C24.8519 16.5098 27.0509 18.6709 27.0509 21.336V34.7563H16.574V21.336C16.574 18.6709 18.7731 16.5098 21.4849 16.5098Z"
                        stroke="black"
                        stroke-width="2"
                        stroke-miterlimit="10"
                      />
                      <path
                        d="M16.574 34.7598H38.1203L42 49.9998"
                        stroke="black"
                        stroke-width="2"
                        stroke-miterlimit="10"
                      />
                      <path
                        d="M27.0509 23.0137V23.7807L19.0181 34.76L16.574 38.0353"
                        stroke="black"
                        stroke-width="2"
                        stroke-miterlimit="10"
                        stroke-linecap="square"
                      />
                      <path
                        d="M13.8737 38.0385V16.0015C13.8737 14.2099 12.3981 12.7598 10.5751 12.7598H8V43.8165H34.2065V41.3362C34.2065 39.5166 32.7024 38.0385 30.8509 38.0385H13.8737Z"
                        stroke="black"
                        stroke-width="2"
                        stroke-miterlimit="10"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_188_6229">
                        <rect width="50" height="50" fill="white" />
                      </clipPath>
                    </defs>
                  </svg>
                </div>
                <div class="desc">
                  <h2>안전 SAFETY</h2>
                  <div class="captions">
                    저희는 포드 자동차를 타는 고객과 가족의 안전을 위해 혁신 기술의 개발
                    및 구현에 오랜 기간 힘써왔습니다.
                  </div>
                </div>
              </li>
              <li>
                <div class="thumb">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="50"
                    height="50"
                    viewBox="0 0 50 50"
                    fill="none"
                  >
                    <path
                      d="M14.2186 20.1543V48.7787"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M23.4052 32.1382C23.4052 37.2606 19.2832 41.4166 14.2026 41.4166C9.122 41.4166 5 37.2606 5 32.1382C5 27.0158 9.13798 11.9707 14.2186 11.9707C19.2992 11.9707 23.4212 27.0319 23.4212 32.1543L23.4052 32.1382Z"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M36.618 20.1543V48.7787"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M27.4314 32.1387C27.4314 37.2611 31.5534 41.4171 36.634 41.4171C41.7146 41.4171 45.8366 37.2611 45.8366 32.1387C45.8366 27.0163 41.7146 11.9551 36.634 11.9551C31.5534 11.9551 27.4314 27.0163 27.4314 32.1387Z"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M7.76404 48.7773H43.0727"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M37.0974 27.6443C37.0974 34.1521 31.873 39.4195 25.4184 39.4195C18.9638 39.4195 13.7394 34.1521 13.7394 27.6443C13.7394 21.1366 18.9638 2 25.4184 2C31.873 2 37.0974 21.1366 37.0974 27.6443Z"
                      fill="#F3F3F3"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M25.4183 12.4062V48.7787"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M29.7001 16.5938L25.4184 20.9108L21.1366 16.5938"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M30.8664 24.6309L25.4183 30.1238L19.9702 24.6309"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                </div>
                <div class="desc">
                  <h2>친환경 GREEN</h2>
                  <div class="captions">
                    지속가능성에 대한 전략(Sustainability strategy)은 탄소 배출을 감소한
                    것에서 멈추지 않습니다. 사내에서 직원들의 물 사용에서부터 근로자
                    인권에 이르기까지 비즈니스의 모든 부분에서 지속가능성
                    (Sustainability)은 필수적인 부분으로 자리 잡았습니다.
                  </div>
                </div>
              </li>
              <li>
                <div class="thumb">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="50"
                    height="50"
                    viewBox="0 0 50 50"
                    fill="none"
                  >
                    <path
                      d="M20.449 27.485L13.4156 29.5801L17.0003 41.4435L24.0336 39.3484L20.449 27.485Z"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M25.9142 39.3482L32.9475 41.4434L37.6711 25.8106L30.6378 23.7155L25.9142 39.3482Z"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M33.0704 2.16566L14.0682 7.62574C11.8247 8.27038 10.5312 10.595 11.1791 12.8179C11.827 15.0408 14.1709 16.3203 16.4144 15.6756L35.4167 10.2155C37.6602 9.5709 38.9536 7.24629 38.3058 5.02338C37.6579 2.80047 35.3139 1.52102 33.0704 2.16566Z"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M33.0645 11.0563L14.0622 16.5164C11.8187 17.161 10.5252 19.4856 11.1731 21.7085C11.821 23.9314 14.1649 25.2109 16.4084 24.5662L35.4107 19.1062C37.6542 18.4615 38.9477 16.1369 38.2998 13.914C37.6519 11.6911 35.308 10.4116 33.0645 11.0563Z"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M33.0761 19.9469L14.0738 25.407C11.8303 26.0516 10.5368 28.3762 11.1847 30.5992C11.8326 32.8221 14.1765 34.1015 16.42 33.4569L35.4223 27.9968C37.6658 27.3522 38.9593 25.0275 38.3114 22.8046C37.6635 20.5817 35.3196 19.3023 33.0761 19.9469Z"
                      fill="#F3F3F3"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                    <path
                      d="M15.1887 39.3574H34.7584V43.0468C34.7584 46.0335 32.3166 48.4755 29.2909 48.4755H20.6562C17.6482 48.4755 15.1887 46.051 15.1887 43.0468V39.3574Z"
                      fill="#F3F3F3"
                      stroke="black"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                </div>
                <div class="desc">
                  <h2>스마트 SMART</h2>
                  <div class="captions">
                    포드의 중심에는 혁신이 있습니다. 일반 대중 차 시장에서도 포드는 가장
                    먼저 고강도 알루미늄 적용을 대폭 확대했으며, 2014년에는 자동차 산업
                    최초로 차량 내 연결성 (In- car connectivity)에 관한 개발자 회의를
                    개최하였습니다.
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="strong--business">
          <div class="title--visual">
            <h2>강력한 비즈니스 (Strong Business)</h2>
            <div class="sub--title">
              모든 운전자에게 좋은 차가 최고의 자동차입니다. 포드 비즈니스의 힘은 바로
              이런 믿음에서 나옵니다.<br />
              포드는 늘어나는 수요를 맞추기 위해 50년만에 최대 규모로 제조 시설을 확장하고
              있습니다.<br />
              미국 내 생산 역량을 확대하고 세계 곳곳에 신규 시설을 건설 중입니다.<br />
              포드는 지속적인 수익을 창출하며 성장하고 있습니다.<br />
              지난해에도 전세계 직원들의 연금 제도를 지원했으며, 미국 내 시간제 직원들에게
              이익분배금을 지급하고, 주주 배당금을 두 배로 올렸습니다.
            </div>
          </div>
          <div class="btn--wrap mt--70">
            <a class="btn--sky"
              href="https://www.ford.com/finance/investor-center?gnav=footer-finance"
              target="_blank"
              >투자자 (Investors) 자세히 알아보기<svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 16 16"
                fill="none"
              >
                <path
                  d="M3.33203 8H12.6654"
                  stroke="white"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M8 3.33398L12.6667 8.00065L8 12.6673"
                  stroke="white"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                /></svg
            ></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from "vue";

  const breadcrumbData = {
    mainMenu: "ABOUT FORD",
    currentSubMenu: "GLOBAL SITES",
    subMenuItems: [
      { label: "Company", to: "/ford/about/company", active: true },
      { label: "Our Purpose", to: "/ford/about/ourPurpose", active: false },
    ],
  };
</script>