hanye-website/pages/about.vue

<template>
  <div class="w-full h-[55px] sm:h-[72px]"></div>
  <div
    class="max-w-full px-4 py-16 md:px-8 lg:px-10 bg-gray-900 text-gray-300 min-h-screen relative overflow-hidden"
  >
    <!-- Subtle Pattern Background -->
    <div class="absolute inset-0 opacity-[0.03] pointer-events-none"
         style="background-image: linear-gradient(45deg, #fff 12%, transparent 12.5%, transparent 87%, #fff 87.5%, #fff),
                         linear-gradient(-45deg, #fff 12%, transparent 12.5%, transparent 87%, #fff 87.5%, #fff);
                 background-size: 8px 8px;"> 
    </div>
    <!-- Content Wrapper -->
    <div class="relative max-w-screen-xl mx-auto"> 
      <h1 class="text-4xl md:text-6xl mb-12 text-center font-normal text-white">
        {{ $t("about.title") }}
      </h1>

      <div class="space-y-12">
        <!-- Introduction Section -->
        <section
          class="relative bg-gray-800/80 border border-gray-700 rounded-xl overflow-hidden shadow-xl backdrop-blur-sm p-6 sm:p-8 lg:p-10"
        >
          <div class="mb-8">
            <h2
              class="text-2xl font-semibold text-gray-100 sm:text-3xl inline-block"
            >
              {{ $t("about.intro.title") }}
            </h2>
            <div
              class="h-1 w-20 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mt-2"
            ></div>
          </div>
          <div class="space-y-4 text-lg text-gray-300 leading-relaxed">
            <p>{{ $t("about.intro.paragraph1") }}</p>
            <p>{{ $t("about.intro.paragraph2") }}</p>
            <p>{{ $t("about.intro.paragraph3") }}</p>
          </div>
        </section>

        <!-- Company Overview Section -->
        <section
          class="relative bg-gray-800/80 border border-gray-700 rounded-xl overflow-hidden shadow-xl backdrop-blur-sm p-6 sm:p-8 lg:p-10"
        >
          <div class="mb-8">
            <h2
              class="text-2xl font-semibold text-gray-100 sm:text-3xl inline-block"
            >
              {{ $t("about.overview.title") }}
            </h2>
            <div
              class="h-1 w-20 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mt-2"
            ></div>
          </div>
          <dl
            class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2 lg:grid-cols-3"
          >
            <div class="sm:col-span-1">
              <dt class="text-base font-semibold text-gray-100">
                {{ $t("about.overview.companyNameLabel") }}
              </dt>
              <dd class="mt-1 text-base text-gray-400">
                {{ $t("about.overview.companyNameValue") }}
              </dd>
            </div>
            <div class="sm:col-span-1">
              <dt class="text-base font-semibold text-gray-100">
                {{ $t("about.overview.englishNameLabel") }}
              </dt>
              <dd class="mt-1 text-base text-gray-400">
                {{ $t("about.overview.englishNameValue") }}
              </dd>
            </div>
            <div class="sm:col-span-1">
              <dt class="text-base font-semibold text-gray-100">
                {{ $t("about.overview.ceoLabel") }}
              </dt>
              <dd class="mt-1 text-base text-gray-400">
                {{ $t("about.overview.ceoValue") }}
              </dd>
            </div>
            <div class="sm:col-span-1">
              <dt class="text-base font-semibold text-gray-100">
                {{ $t("about.overview.employeesLabel") }}
              </dt>
              <dd class="mt-1 text-base text-gray-400">
                {{ $t("about.overview.employeesValue") }}
              </dd>
            </div>
            <div class="sm:col-span-2">
              <dt class="text-base font-semibold text-gray-100">
                {{ $t("about.overview.addressLabel") }}
              </dt>
              <dd class="mt-1 text-base text-gray-400">
                {{ $t("about.overview.addressValue") }}
              </dd>
            </div>
            <div class="sm:col-span-1">
              <dt class="text-base font-semibold text-gray-100">
                {{ $t("about.overview.telLabel") }}
              </dt>
              <dd class="mt-1 text-base text-gray-400">
                {{ $t("about.overview.telValue") }}
              </dd>
            </div>
            <div class="sm:col-span-1">
              <dt class="text-base font-semibold text-gray-100">
                {{ $t("about.overview.faxLabel") }}
              </dt>
              <dd class="mt-1 text-base text-gray-400">
                {{ $t("about.overview.faxValue") }}
              </dd>
            </div>
            <div class="sm:col-span-2 lg:col-span-3">
              <dt class="text-base font-semibold text-gray-100">
                {{ $t("about.overview.businessLabel") }}
              </dt>
              <dd class="mt-1 text-base text-gray-400">
                {{ $t("about.overview.businessValue1") }}<br />
                {{ $t("about.overview.businessValue2") }}<br />
                {{ $t("about.overview.businessValue3") }}
              </dd>
            </div>
          </dl>
        </section>

        <!-- Contact Info Section -->
        <section
          class="relative bg-gray-800/80 border border-gray-700 rounded-xl overflow-hidden shadow-xl backdrop-blur-sm p-6 sm:p-8 lg:p-10"
        >
          <div class="mb-8">
            <h2
              class="text-2xl font-semibold text-gray-100 sm:text-3xl inline-block"
            >
              {{ $t("about.contact.title") }}
            </h2>
            <div
              class="h-1 w-20 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mt-2"
            ></div>
          </div>
          <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
            <div class="flex items-start space-x-4">
              <div
                class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 text-white rounded-lg shadow-md"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-5 w-5"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
                  />
                  <path
                    d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
                  />
                </svg>
              </div>
              <div>
                <h3 class="text-base font-medium text-gray-100">
                  {{ $t("about.contact.emailLabel") }}
                </h3>
                <p class="mt-1 text-base text-gray-400">
                  {{ $t("about.contact.emailValue") }}
                </p>
              </div>
            </div>
            <div class="flex items-start space-x-4">
              <div
                class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 text-white rounded-lg shadow-md"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-5 w-5"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fill-rule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
                    clip-rule="evenodd"
                  />
                </svg>
              </div>
              <div>
                <h3 class="text-base font-medium text-gray-100">
                  {{ $t("about.contact.hoursLabel") }}
                </h3>
                <p class="mt-1 text-base text-gray-400">
                  {{ $t("about.contact.hoursValue1") }}
                </p>
                <p class="mt-1 text-base text-gray-400">
                  {{ $t("about.contact.hoursValue2") }}
                </p>
              </div>
            </div>
            <div class="flex items-start space-x-4">
              <div
                class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600 text-white rounded-lg shadow-md"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-5 w-5"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"
                  />
                </svg>
              </div>
              <div>
                <h3 class="text-base font-medium text-gray-100">
                  {{ $t("about.contact.phoneLabel") }}
                </h3>
                <p class="mt-1 text-base text-gray-400">
                  {{ $t("about.contact.phoneValue") }}
                </p>
                <p class="mt-1 text-sm text-gray-500">
                  {{ $t("about.contact.phoneNote") }}
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

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

const { t } = useI18n();

// SEO
useHead({
  title: t("about.meta.title"),
  meta: [
    {
      name: "description",
      content: t("about.meta.description"),
    },
  ],
});
</script>