PinnovateCloud/pages/about.vue

<template>
  <div>
    <!-- 英雄区域 -->
    <section class="py-24 relative">
      <div class="absolute inset-0 z-0">
        <img
          src="/images/bg/cloud-bg.webp"
          alt="背景"
          class="w-full h-full object-cover"
        />
        <div
          class="absolute inset-0 bg-black bg-opacity-40 dark:bg-opacity-60"
        ></div>
      </div>
      <div class="container relative z-10">
        <div class="max-w-4xl">
          <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">
            {{ $t("about.hero.title") }}
          </h1>
          <p class="text-xl text-white opacity-90">
            {{ $t("about.hero.subtitle") }}
          </p>
          <div class="mt-8 flex flex-wrap gap-4">
            <ul class="space-y-2">
              <li
                v-for="(achievement, key) in achievements"
                :key="key"
                class="flex items-center text-lg text-white"
              >
                <span class="mr-2 text-green-400 dark:text-green-300">✓</span>
                <span>{{ $t(achievement) }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <Process />
    <!-- 公司简介 -->
    <section class="py-20">
      <div class="container">
        <div class="flex flex-col md:flex-row gap-8 items-center">
          <div class="md:w-1/2">
            <img
              src="public\images\bg\intro.webp"
              alt="背景"
              class="w-full h-full rounded-lg shadow-lg"
            />
          </div>
          <div class="md:w-1/2">
            <h2 class="text-4xl font-bold text-primary dark:text-blue-400 mb-8">
              {{ $t("about.company.title") }}
            </h2>
            <p
              class="text-gray-600 dark:text-gray-300 text-lg leading-relaxed mb-6"
            >
              {{ $t("about.company.intro") }}
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 公司使命和未来展望 -->
    <section class="py-20 bg-[#F8F9FA] dark:bg-gray-800">
      <div class="container">
        <!-- 公司愿景 -->
        <div class="flex items-start mb-16">
          <div class="flex-shrink-0 mr-6">
            <div class="text-5xl text-blue-500 dark:text-blue-400">
              <i class="fas fa-building"></i>
            </div>
          </div>
          <div>
            <h3 class="text-2xl font-bold text-[#333333] dark:text-white mb-4">
              {{ $t("about.culture.items.mission.title") }}
            </h3>
            <p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed">
              {{ $t("about.company.vision") }}
            </p>
          </div>
        </div>

        <!-- 公司使命 -->
        <div class="flex items-start mb-16">
          <div class="flex-shrink-0 mr-6">
            <div class="text-5xl text-blue-500 dark:text-blue-400">
              <i class="fas fa-bullseye"></i>
            </div>
          </div>
          <div>
            <h3 class="text-2xl font-bold text-[#333333] dark:text-white mb-4">
              {{ $t("about.culture.items.vision.title") }}
            </h3>
            <p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed">
              {{ $t("about.company.mission") }}
            </p>
          </div>
        </div>

        <!-- 未来展望 -->
        <div class="flex items-start">
          <div class="flex-shrink-0 mr-6">
            <div class="text-5xl text-blue-500 dark:text-blue-400">
              <i class="fas fa-handshake"></i>
            </div>
          </div>
          <div>
            <h3 class="text-2xl font-bold text-[#333333] dark:text-white mb-4">
              {{ $t("about.culture.items.values.title") }}
            </h3>
            <p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed">
              {{ $t("about.company.outlook") }}
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 服务优势 -->
    <Service />

    <!-- 我们的合作伙伴 -->
    <section class="py-20 bg-[#F8F9FA] dark:bg-gray-800">
      <div class="container">
        <h2 class="text-4xl font-bold text-center mb-4 dark:text-white">
          {{ $t("about.partners.title") }}
        </h2>
        <p
          class="text-xl text-gray-600 dark:text-gray-300 leading-relaxed text-center mb-16"
        >
          {{ $t("about.partners.subtitle") }}
        </p>
        <div class="flex flex-wrap justify-center gap-8 max-w-5xl mx-auto">
          <div
            class="flex items-center justify-center p-6 bg-white dark:bg-gray-700 rounded-lg shadow-sm w-50 h-40"
          >
            <img
              src="/images/partners/aws.svg"
              alt="AWS"
              class="h-full dark:opacity-90"
            />
          </div>
          <div
            class="flex items-center justify-center p-6 bg-white dark:bg-gray-700 rounded-lg shadow-sm w-50 h-40"
          >
            <img
              src="/images/partners/google.svg"
              alt="Google"
              class="h-12 dark:opacity-90"
            />
          </div>
          <div
            class="flex items-center justify-center p-6 bg-white dark:bg-gray-700 rounded-lg shadow-sm w-50 h-40"
          >
            <img
              src="/images/partners/alibabacloud.svg"
              alt="Alibaba"
              class="h-full dark:opacity-90"
            />
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="py-20 bg-primary dark:bg-blue-800">
      <div class="container text-center">
        <h2 class="text-4xl font-bold mb-6 text-white">
          {{ $t("about.contact.title") }}
        </h2>
        <p class="text-xl mb-8 max-w-2xl mx-auto leading-relaxed text-white">
          {{ $t("about.contact.subtitle") }}
        </p>
        <NuxtLink
          to="/contact"
          class="inline-flex items-center bg-white dark:bg-gray-800 text-primary dark:text-blue-400 px-8 py-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-300 text-lg font-semibold"
        >
          {{ $t("about.contact.button") }}
          <i class="fas fa-arrow-right ml-2"></i>
        </NuxtLink>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { useHead } from "nuxt/app";
import Process from "../components/Process.vue";
import Service from "../components/Service.vue";
const { t } = useI18n(); // 添加页面元数据
useHead({
  title: () => t("meta.about.title"),
  meta: [
    { name: "description", content: () => t("meta.about.description") },
    { name: "keywords", content: () => t("meta.about.keywords") },
  ],
});

// 公司成就
const achievements = {
  item1: "about.company.achievements.item1",
  item2: "about.company.achievements.item2",
  item3: "about.company.achievements.item3",
};

// 优势数据
const advantages = {
  certification: {
    icon: "",
    titleKey: "about.advantages.items.certification.title",
    descriptionKey: "about.advantages.items.certification.description",
  },
  team: {
    icon: "",
    titleKey: "about.advantages.items.team.title",
    descriptionKey: "about.advantages.items.team.description",
  },
  technology: {
    icon: "",
    titleKey: "about.advantages.items.technology.title",
    descriptionKey: "about.advantages.items.technology.description",
  },
  service: {
    icon: "",
    titleKey: "about.advantages.items.service.title",
    descriptionKey: "about.advantages.items.service.description",
  },
  fullSupport: {
    icon: "",
    titleKey: "about.advantages.items.fullSupport.title",
    descriptionKey: "about.advantages.items.fullSupport.description",
  },
  valueAdded: {
    icon: "",
    titleKey: "about.advantages.items.valueAdded.title",
    descriptionKey: "about.advantages.items.valueAdded.description",
  },
};
</script>