piratezon_new/app/pages/ford/about/ourPurpose.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>OUR PURPOSE</h2>
          <div class="sub--title">
            “모든 사람이 자유롭게 이동하며, 꿈꾸는 모든 것을 이룰 수 있는 더 나은 세상을
            만들자.”라는 미션으로 우리는 여기에 모였습니다.
          </div>
        </div>
        <div class="visual--banner--01 mt--70">
          <img src="/img/about/ourpp--banner01.jpg" alt="our purpose" />
        </div>

        <div class="title--visual">
          <h2 class="side--title">우리의 미션</h2>
          <h3 class="middle--title">
            “모든 사람이 자유롭게 이동하며, 꿈꾸는 모든 것을 이룰 수 있는 더 나은 세상을
            만들자.”라는 미션으로 우리는 여기에 모였습니다.
          </h3>
          <div class="sub--title">
            우리는 사람들이 장애물과 한계 없이 더 나은 삶을 누리고, 더 큰 꿈을 향해 전진할
            수 있는 세상을 만드는 힘을 믿습니다.<br />
            내가 가고자 하는 그곳까지의 거리를 더 가깝게 만들고, 전 세계 곳곳의 사람들을
            연결하며, 더 많은 가능성을 발견하고 자유로운 이동이 선사하는<br />
            스릴과 모험 그리고 자부심을 즐길 수 있게 합니다.<br />포드는 창립 초기부터
            사람들이 더 멀리, 더 높이 나아갈 수 있는 길을 만들어왔습니다.<br />
            사람들이 더 많은 기회를 찾을 수 있도록 혁신을 거듭했고, 신뢰를 얻기 위해 매
            순간 노력해왔습니다.<br />지금까지의 위대한 경험을 발판으로 포드는 새로운
            미래를 만들어 나가고 있습니다.<br />
            미래의 모든 사람들이 자유롭게 이동하고 한계 없는 꿈을 꿀 수 있는 더 나은
            세상으로 변화시키는 일.<br />
            그것이 포드가 가장 잘 할 수 있는 일입니다.
          </div>
        </div>
      </div>

      <div class="grid--banner--wrapper">
        <div class="grid--items">
          <div class="grid--banner">
            <img src="/img/about/ourpp--grd01.png" />
          </div>
          <div class="grid--desc">
            <h2>더 나은 삶</h2>
            <div class="captions">
              포드의 역사는 사람들의 성장, 발전을 막는 장애물들을 극복해 나가고자 하는
              노력에서 시작 되었습니다. 우리는 누구나 자유롭게 이동하고 꿈을 실현하며
              최고의 삶을 누릴 자격이 있다고 믿습니다.
            </div>
          </div>
        </div>
        <div class="grid--items revers dark">
          <div class="grid--banner">
            <img src="/img/about/ourpp--grd02.png" />
          </div>
          <div class="grid--desc">
            <h2>결속력이 강한 커뮤니티 형성</h2>
            <div class="captions">
              포드는 직원, 노조, 고객, 딜러, 기업, 이웃, 도시, 정부를 포함한 지역 사회와의
              깊은 연대감을 형성하고 강화하며 이를 중심으로 비즈니스를 영위해 나가고
              있습니다.
            </div>
            <div class="btn--wrap fl--start mt--50">
              <a
                href="https://corporate.ford.com//social-impact/community"
                target="_blank"
                class="btn--sky"
                >커뮤니티 활동 보기</a
              >
            </div>
          </div>
        </div>
        <div class="grid--items">
          <div class="grid--banner">
            <img src="/img/about/ourpp--grd03.png" />
          </div>
          <div class="grid--desc">
            <h2>더 건강한 지구</h2>
            <div class="captions">
              포드는 창업자 헨리 포드(Henry Ford) 회장 시절부터 빌 포드(Bill Ford) 회장이
              이끄는 오늘에 이르기까지, 우리 모두의 지구를 위한 지속 가능한 미래를 만들기
              위해 거침없는 행보를 이어왔습니다.
            </div>
            <div class="btn--wrap fl--start mt--50">
              <a
                href="https://corporate.ford.com//social-impact/sustainability"
                target="_blank"
                class="btn--sky"
                >지속 가능성 활동 보기</a
              >
            </div>
          </div>
        </div>
        <div class="grid--items revers dark">
          <div class="grid--banner">
            <img src="/img/about/ourpp--grd04.png" />
          </div>
          <div class="grid--desc">
            <h2>전동화로 만들어 가는 더 나은 세상</h2>
            <div class="captions">
              포드의 ‘지속 가능성 및 재무 통합 보고서’는 포드의 미션과 비즈니스가 어떻게
              연계되어 있는지 보여줍니다.
            </div>
            <div class="btn--wrap fl--start mt--50">
              <a
                href="https://corporate.ford.com/microsites/integrated-sustainability-and-financial-report-2021/index.html"
                target="_blank"
                class="btn--sky"
                >통합 보고서 보기</a
              >
            </div>
          </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: false },
      { label: "Our Purpose", to: "/ford/about/ourPurpose", active: true },
    ],
  };
</script>