BigStickNewOfficialWebsite/pages/advantages.vue

<script setup>
import { advantageMatrix, advantages } from "~/data/advantages";

const heroRoutes = [
  { label: "页面路径", href: "/advantages", path: "/advantages" },
  { label: "首页优势模块", href: "/#advantages", path: "/#advantages" },
  { label: "联系页", href: "/contact", path: "/contact" },
];

const matrixRoutes = [
  { label: "模块锚点", href: "#advantage-matrix", path: "/advantages#advantage-matrix" },
  { label: "首页优势模块", href: "/#advantages", path: "/#advantages" },
  { label: "服务总览", href: "/services", path: "/services" },
];

const gridRoutes = [
  { label: "模块锚点", href: "#advantage-grid", path: "/advantages#advantage-grid" },
  { label: "行业方案", href: "/solutions", path: "/solutions" },
  { label: "客户案例", href: "/cases", path: "/cases" },
];

useHead({
  title: "核心优势 - 大马棒·云途全域 GEO",
  meta: [
    {
      name: "description",
      content:
        "了解大马棒的真人内容生产网络、全域媒体矩阵、全链路闭环与全客群定制化优势。",
    },
  ],
});
</script>

<template>
  <WebsiteShell>
    <section
      class="relative overflow-hidden bg-black bg-cover bg-center text-white"
      style="background-image: url('/images/banner-bg.jpg')"
    >
      <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>ADVANTAGES</p>
        <h1 class="mt-5 max-w-4xl text-balance text-[34px] font-semibold leading-tight md:text-[42px]" data-hero-reveal>
          核心优势
        </h1>
        <p class="mt-6 max-w-2xl text-base leading-8 text-white/78 md:text-lg" data-hero-reveal>
          行业独家的真人内容生产网络、全域媒体资源和双环增长能力，让 GEO 增长更可信、更可控。
        </p>
        <div class="mt-8" data-hero-reveal>
          <SectionRouteLinks :routes="heroRoutes" light />
        </div>
      </div>
    </section>

    <section id="advantage-matrix" 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]">Advantage Matrix</p>
            <h2 class="section-title mt-4">资源矩阵与能力基座</h2>
            <p class="mt-4 text-base leading-8 text-[#666]">
              先用清晰的数据和资源结构，快速建立“为什么大马棒能做成这件事”的基础认知。
            </p>
          </div>
          <SectionRouteLinks :routes="matrixRoutes" />
        </div>

        <div class="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-4" data-stagger>
          <article
            v-for="item in advantageMatrix"
            :key="item.label"
            class="rounded-lg border border-gm-border bg-white p-6 shadow-sm"
            data-stagger-item
          >
            <p class="text-3xl font-semibold text-gm-green">{{ item.value }}</p>
            <h2 class="mt-3 text-lg font-semibold text-[#262626]">{{ item.label }}</h2>
            <p class="mt-3 text-sm leading-7 text-[#666]">{{ item.description }}</p>
          </article>
        </div>
      </div>
    </section>

    <section id="advantage-grid" 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]">Advantages</p>
            <h2 class="section-title mt-4">四大核心优势</h2>
            <p class="mt-4 text-base leading-8 text-[#666]">
              四项优势分别对应内容生产、媒体资源、增长闭环与行业定制能力，帮助用户快速理解差异化竞争力。
            </p>
          </div>
          <SectionRouteLinks :routes="gridRoutes" />
        </div>

        <div class="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-4" data-stagger>
          <article
            v-for="item in advantages"
            :key="item.slug"
            class="rounded-lg border border-gm-border bg-white p-6 shadow-sm"
            data-stagger-item
            data-hover-card
          >
            <p class="text-[28px] font-semibold leading-none text-gm-green">{{ item.metric }}</p>
            <h3 class="mt-5 text-[20px] font-semibold text-[#262626]">{{ item.title }}</h3>
            <p class="mt-3 text-sm font-medium leading-7 text-[#333]">{{ item.point }}</p>
            <p class="mt-3 text-sm leading-7 text-[#666]">{{ item.value }}</p>
            <p class="mt-5 font-mono text-[11px] text-[#999]">优势路径 /advantages#advantage-grid</p>
          </article>
        </div>
      </div>
    </section>

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