PinnovateCloud/components/Process.vue

<template>
  <div >
      <!-- AWS开通流程 -->
    <section class="py-20 bg-gray-100 dark:bg-gray-800">
      <div class="container">
        <div class="max-w-4xl mx-auto text-center mb-16">
          <h2 class="text-4xl font-bold text-[#333333] dark:text-white mb-4">
            {{ $t("home.process.title") }}
          </h2>
        </div>

        <div class="flex items-center justify-center flex-wrap gap-8">
          <!-- 步骤1 -->
          <div class="flex items-center">
            <div class="text-center">
              <div class="w-40 h-40 mx-auto mb-6 relative">
                <div class="w-full h-full flex items-center justify-center">
                  <img
                    src="/images/index/service.svg"
                    alt="Select Service"
                    class="w-26 h-26 object-contain dark:opacity-90"
                  />
                </div>
              </div>
              <div class="text-center">
                <div class="text-lg font-medium text-[#333333] dark:text-white">
                  {{ $t("home.process.steps.step1.title") }}
                </div>
                <div class="text-sm text-[#0066CC] dark:text-[#4da6ff]">
                  {{ $t("home.process.steps.step1.subtitle") }}
                </div>
              </div>
            </div>
            <div class="mx-8">
              <img
                src="/images/index/Arrowsvg.svg"
                alt="arrow"
                class="w-12 h-12 dark:opacity-70"
              />
            </div>
          </div>

          <!-- 步骤2 -->
          <div class="flex items-center">
            <div class="text-center">
              <div class="w-40 h-40 mx-auto mb-6 relative">
                <div class="w-full h-full flex items-center justify-center">
                  <img
                    src="/images/index/sales.svg"
                    alt="Contact Sales"
                    class="w-26 h-26 object-contain dark:opacity-90"
                  />
                </div>
              </div>
              <div class="text-center">
                <div class="text-lg font-medium text-[#333333] dark:text-white">
                  {{ $t("home.process.steps.step2.title") }}
                </div>
                <div class="text-sm text-[#0066CC] dark:text-[#4da6ff]">
                  {{ $t("home.process.steps.step2.subtitle") }}
                </div>
              </div>
            </div>
            <div class="mx-8">
              <img
                src="/images/index/Arrowsvg.svg"
                alt="arrow"
                class="w-12 h-12 dark:opacity-70"
              />
            </div>
          </div>

          <!-- 步骤3 -->
          <div class="flex items-center">
            <div class="text-center">
              <div class="w-40 h-40 mx-auto mb-6 relative">
                <div class="w-full h-full flex items-center justify-center">
                  <img
                    src="/images/index/business.svg"
                    alt="Communication Business"
                    class="w-26 h-26 object-contain dark:opacity-90"
                  />
                </div>
              </div>
              <div class="text-center">
                <div class="text-lg font-medium text-[#333333] dark:text-white">
                  {{ $t("home.process.steps.step3.title") }}
                </div>
                <div class="text-sm text-[#0066CC] dark:text-[#4da6ff]">
                  {{ $t("home.process.steps.step3.subtitle") }}
                </div>
              </div>
            </div>
            <div class="mx-8">
              <img
                src="/images/index/Arrowsvg.svg"
                alt="arrow"
                class="w-12 h-12 dark:opacity-70"
              />
            </div>
          </div>

          <!-- 步骤4 -->
          <div class="flex items-center">
            <div class="text-center">
              <div class="w-40 h-40 mx-auto mb-6 relative">
                <div class="w-full h-full flex items-center justify-center">
                  <img
                    src="/images/index/account.svg"
                    alt="Open Account"
                    class="w-26 h-26 object-contain dark:opacity-90"
                  />
                </div>
              </div>
              <div class="text-center">
                <div class="text-lg font-medium text-[#333333] dark:text-white">
                  {{ $t("home.process.steps.step4.title") }}
                </div>
                <div class="text-sm text-[#0066CC] dark:text-[#4da6ff]">
                  {{ $t("home.process.steps.step4.subtitle") }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 新增联系我们按钮 -->
        <div class="mt-12 flex justify-center">
          <NuxtLink
            to="/contact"
            class="inline-flex items-center justify-center px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-md transition-colors duration-300"
          >
            {{ $t('products.banner.contact') }}
            <i class="fas fa-arrow-right ml-2"></i>
          </NuxtLink>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<style>

</style>