alien-website/src/views/ProfilePage.vue

<script setup>
import ProfilePageHero from '../components/ProfilePageHero.vue'
import ProfilePageSectionHeader from '../components/ProfilePageSectionHeader.vue'
import AppFooter from '../components/AppFooter.vue'
import profileCenterImg from '../static/profilecenterimg.png'
import missionImg from '../static/messionimg.png'
import {
  profilePageIntro,
  profilePageVisionQuote,
  profilePageMissionText,
} from '../data/site'

const emit = defineEmits(['navigate'])
</script>

<template>
  <ProfilePageHero />

  <section class="profile-page-section profile-page-section--intro">
    <div class="container">
      <ProfilePageSectionHeader title-en="COMPANY PROFILE" title-cn="公司简介" />
      <div class="profile-page-intro">
        <div class="profile-page-intro__visual">
          <img
            class="profile-page-intro__img"
            :src="profileCenterImg"
            alt="公司简介"
          />
        </div>
        <div class="profile-page-intro__text">
          <p v-for="(paragraph, index) in profilePageIntro" :key="index">
            {{ paragraph }}
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="profile-page-section profile-page-section--vision">
    <div class="container">
      <ProfilePageSectionHeader title-en="VISION AND MISSION" title-cn="愿景使命" />
      <p class="profile-page-vision-quote">{{ profilePageVisionQuote }}</p>
      <div class="profile-page-vision">
        <div class="profile-page-vision__text">
          <p>{{ profilePageMissionText }}</p>
        </div>
        <div class="profile-page-vision__visual">
          <img
            class="profile-page-vision__img"
            :src="missionImg"
            alt="愿景使命"
          />
        </div>
      </div>
    </div>
  </section>

  <AppFooter @navigate="emit('navigate', $event)" />
</template>