BigStickNewOfficialWebsite/pages/about.vue

<script setup>
import { aboutPage } from "~/data/about";
import { footerData } from "~/data/navigation";

const heroRoutes = [
  { label: "页面路径", href: "/about", path: "/about" },
  { label: "发展历程", href: "/about#history", path: "/about#history" },
  { label: "联系页", href: "/contact", path: "/contact" },
];

const introRoutes = [
  { label: "模块锚点", href: "#company-intro", path: "/about#company-intro" },
  { label: "发展历程", href: "/about#history", path: "/about#history" },
  { label: "联系我们", href: "/about#contact-us", path: "/about#contact-us" },
];

const historyRoutes = [
  { label: "模块锚点", href: "#history", path: "/about#history" },
  { label: "首页", href: "/", path: "/" },
  { label: "服务页", href: "/services", path: "/services" },
];

useHead({
  title: "关于我们 - 大马棒·云途全域 GEO",
  meta: [
    {
      name: "description",
      content: aboutPage.hero.description,
    },
  ],
});
</script>

<template>
  <WebsiteShell>
    <section
      class="relative overflow-hidden bg-black bg-cover bg-center text-white"
      :style="{ backgroundImage: `url(${aboutPage.hero.image})` }"
    >
      <div class="absolute inset-0 bg-black/55" />
      <div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-white to-transparent" />
      <div class="container-gm relative z-10 py-24 md:py-32">
        <p class="text-sm uppercase tracking-[0.34em] text-white/65" data-hero-reveal>
          {{ aboutPage.hero.eyebrow }}
        </p>
        <h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
          {{ aboutPage.hero.title }}
        </h1>
        <p class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg" data-hero-reveal>
          {{ aboutPage.hero.description }}
        </p>
        <div class="mt-8" data-hero-reveal>
          <SectionRouteLinks :routes="heroRoutes" light />
        </div>
      </div>
    </section>

    <section id="company-intro" class="bg-white py-20">
      <div class="container-gm">
        <div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
          <div class="max-w-3xl">
            <p class="text-sm uppercase tracking-[0.3em] text-[#999]">Company Intro</p>
            <h2 class="section-title mt-4">公司介绍与团队能力</h2>
            <p class="mt-4 text-base leading-8 text-[#666]">{{ aboutPage.intro }}</p>
          </div>
          <SectionRouteLinks :routes="introRoutes" />
        </div>

        <div class="mt-10 grid gap-8 md:grid-cols-3" data-stagger>
          <article
            v-for="value in aboutPage.values"
            :key="value.title"
            class="rounded-[24px] border border-gm-border bg-white p-7 shadow-sm"
            data-stagger-item
            data-hover-card
          >
            <h2 class="text-2xl font-semibold text-[#262626]">{{ value.title }}</h2>
            <p class="mt-4 text-sm leading-7 text-[#777]">{{ value.text }}</p>
          </article>
        </div>
      </div>
    </section>

    <section id="history" class="bg-[#f7f8f7] py-20">
      <div class="container-gm">
        <div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
          <div class="max-w-3xl">
            <p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">Growth System</p>
            <h2 class="section-title mt-4">发展历程与核心协同能力</h2>
          </div>
          <SectionRouteLinks :routes="historyRoutes" />
        </div>

        <div class="mt-10 grid gap-12 lg:grid-cols-[0.85fr_1.15fr]">
          <div data-reveal>
            <p class="text-base leading-8 text-[#666]">用全域 GEO 帮助品牌建立长期增长资产。</p>
            <div class="mt-8 flex flex-wrap gap-3">
              <span
                v-for="capability in aboutPage.team"
                :key="capability"
                class="rounded-full border border-gm-border bg-white px-4 py-2 text-sm text-[#666]"
              >
                {{ capability }}
              </span>
            </div>
          </div>

          <div class="space-y-5" data-stagger>
            <article
              v-for="item in aboutPage.timeline"
              :key="item.year"
              class="rounded-[24px] border border-gm-border bg-white p-6"
              data-stagger-item
            >
              <p class="text-3xl font-semibold text-gm-green">{{ item.year }}</p>
              <p class="mt-3 text-base leading-8 text-[#666]">{{ item.text }}</p>
            </article>
          </div>
        </div>
      </div>
    </section>

    <section id="contact-us" class="bg-white py-16 md:py-20">
      <div class="container-gm">
        <div class="flex flex-col gap-5 md:flex-row md:items-end md:justify-between" data-reveal>
          <div class="max-w-3xl">
            <p class="text-sm uppercase tracking-[0.3em] text-[#999]">Contact</p>
            <h2 class="section-title mt-4">联系我们</h2>
            <p class="mt-4 text-base leading-8 text-[#666]">如果你希望进一步了解服务方式、合作节奏或行业方案，可以从这里直接进入咨询。</p>
          </div>
          <SectionRouteLinks
            :routes="[
              { label: '页脚咨询', href: '/#contact', path: '/#contact' },
              { label: '服务总览', href: '/services', path: '/services' },
              { label: '解决方案', href: '/solutions', path: '/solutions' },
            ]"
          />
        </div>

        <div class="mt-10 grid gap-5 md:grid-cols-3" data-stagger>
          <article class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6" data-stagger-item>
            <p class="text-sm font-medium text-[#262626]">电话</p>
            <p class="mt-3 text-base text-[#666]">{{ footerData.contact.phone }}</p>
          </article>
          <article class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6" data-stagger-item>
            <p class="text-sm font-medium text-[#262626]">邮箱</p>
            <p class="mt-3 text-base text-[#666]">{{ footerData.contact.email }}</p>
          </article>
          <article class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6" data-stagger-item>
            <p class="text-sm font-medium text-[#262626]">地址</p>
            <p class="mt-3 text-base text-[#666]">{{ footerData.contact.address }}</p>
          </article>
        </div>
      </div>
    </section>

    <CtaSection />
  </WebsiteShell>
</template>