378 lines
15 KiB
Vue
378 lines
15 KiB
Vue
<script setup>
|
||
import { computed } from "vue";
|
||
import { advantages } from "~/data/advantages";
|
||
import { cases } from "~/data/cases";
|
||
import {
|
||
clientLogos,
|
||
clientStats,
|
||
geoLoopModel,
|
||
homeSolutionHighlights,
|
||
processSteps,
|
||
testimonials,
|
||
} from "~/data/home";
|
||
import { ctaSection } from "~/data/navigation";
|
||
|
||
const clientRoutes = [
|
||
{ label: "模块锚点", href: "#clients", path: "/#clients" },
|
||
{ label: "客户案例", href: "/cases", path: "/cases" },
|
||
{ label: "核心优势", href: "/advantages", path: "/advantages" },
|
||
];
|
||
|
||
const modelRoutes = [
|
||
{ label: "模块锚点", href: "#model", path: "/#model" },
|
||
{ label: "服务总览", href: "/services", path: "/services" },
|
||
{ label: "咨询入口", href: "#contact", path: "/#contact" },
|
||
];
|
||
|
||
const advantageRoutes = [
|
||
{ label: "模块锚点", href: "#advantages", path: "/#advantages" },
|
||
{ label: "核心优势页", href: "/advantages", path: "/advantages" },
|
||
{ label: "服务总览", href: "/services", path: "/services" },
|
||
];
|
||
|
||
const caseRoutes = [
|
||
{ label: "模块锚点", href: "#cases", path: "/#cases" },
|
||
{ label: "案例总览", href: "/cases", path: "/cases" },
|
||
];
|
||
|
||
const solutionRoutes = [
|
||
{ label: "模块锚点", href: "#solutions", path: "/#solutions" },
|
||
{ label: "方案总览", href: "/solutions", path: "/solutions" },
|
||
];
|
||
|
||
const processRoutes = [
|
||
{ label: "模块锚点", href: "#process", path: "/#process" },
|
||
{ label: "服务总览", href: "/services", path: "/services" },
|
||
{ label: "咨询入口", href: "#contact", path: "/#contact" },
|
||
];
|
||
|
||
const testimonialRoutes = [
|
||
{ label: "模块锚点", href: "#testimonials", path: "/#testimonials" },
|
||
{ label: "客户案例", href: "/cases", path: "/cases" },
|
||
{ label: "咨询入口", href: "#contact", path: "/#contact" },
|
||
];
|
||
|
||
const featuredCases = computed(() => cases.filter((item) => item.featured).slice(0, 4));
|
||
|
||
useHead({
|
||
title: "大马棒·云途全域 GEO | AI 时代品牌全域增长服务",
|
||
meta: [
|
||
{
|
||
name: "description",
|
||
content:
|
||
"大马棒·云途全域 GEO，帮助品牌在 AI 时代建立曝光、信任、线索与转化闭环，打造长期可复用的增长资产。",
|
||
},
|
||
],
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<WebsiteShell>
|
||
<DambangHeroSection section-id="hero" />
|
||
|
||
<section id="clients" 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]">Proof</p>
|
||
<h2 class="section-title mt-4">已服务 300+ 全类型经营主体，覆盖 12+ 主流行业</h2>
|
||
<p class="mt-4 text-base leading-8 text-[#666]">
|
||
用规模化服务经验、可量化数据结果和多行业覆盖，先建立品牌可信度。
|
||
</p>
|
||
</div>
|
||
<SectionRouteLinks :routes="clientRoutes" />
|
||
</div>
|
||
|
||
<div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4" data-stagger>
|
||
<AnimatedStat
|
||
v-for="metric in clientStats"
|
||
:key="metric.label"
|
||
:label="metric.label"
|
||
:value="metric.value"
|
||
:suffix="metric.suffix"
|
||
data-stagger-item
|
||
/>
|
||
</div>
|
||
|
||
<div class="mt-10">
|
||
<p class="mb-4 text-xs uppercase tracking-[0.28em] text-[#999]">Covered Industries</p>
|
||
<div class="grid grid-cols-2 gap-3 md:grid-cols-4 xl:grid-cols-6" data-stagger>
|
||
<div
|
||
v-for="logo in clientLogos"
|
||
:key="logo"
|
||
class="flex h-12 items-center justify-center rounded border border-gm-border bg-gm-light text-sm text-[#666]"
|
||
data-stagger-item
|
||
>
|
||
{{ logo }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="model" class="bg-[#f4f4f4] py-16 md:py-20">
|
||
<div class="container-gm">
|
||
<div class="grid gap-10 lg:grid-cols-[0.82fr_1.18fr]">
|
||
<div data-reveal>
|
||
<p class="text-sm uppercase tracking-[0.3em] text-[#999]">GEO Model</p>
|
||
<h2 class="section-title mt-4">{{ geoLoopModel.title }}</h2>
|
||
<p class="mt-5 text-base leading-8 text-[#666]">{{ geoLoopModel.description }}</p>
|
||
<div class="mt-6">
|
||
<SectionRouteLinks :routes="modelRoutes" />
|
||
</div>
|
||
<NuxtLink :to="geoLoopModel.cta.href" class="gm-btn gm-btn-primary mt-8">
|
||
{{ geoLoopModel.cta.label }}
|
||
</NuxtLink>
|
||
</div>
|
||
|
||
<div class="grid gap-5 md:grid-cols-2" data-stagger data-geo-loop>
|
||
<article
|
||
v-for="loop in geoLoopModel.loops"
|
||
:key="loop.title"
|
||
class="rounded-lg border border-gm-border bg-white p-6 shadow-soft"
|
||
data-stagger-item
|
||
data-hover-card
|
||
>
|
||
<p class="text-sm font-medium text-gm-green">{{ loop.title }}</p>
|
||
<p class="mt-3 text-[32px] font-semibold leading-none text-[#262626]">{{ loop.value }}</p>
|
||
<p class="mt-4 text-sm leading-7 text-[#666]">{{ loop.description }}</p>
|
||
<div class="mt-6 space-y-3">
|
||
<div
|
||
v-for="node in loop.nodes"
|
||
:key="node"
|
||
class="flex items-center gap-3 rounded border border-gm-border bg-white px-4 py-3 text-sm text-[#555]"
|
||
data-geo-node
|
||
>
|
||
<span class="size-2 shrink-0 rounded-full bg-gm-green" />
|
||
<span>{{ node }}</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="advantages" 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>
|
||
<div class="flex flex-col items-start gap-3 md:items-end">
|
||
<SectionRouteLinks :routes="advantageRoutes" />
|
||
<NuxtLink to="/advantages" class="text-sm font-medium text-gm-green">
|
||
查看核心优势 →
|
||
</NuxtLink>
|
||
</div>
|
||
</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>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="cases" class="bg-[#f7f8f7] py-20">
|
||
<div class="container-gm">
|
||
<div class="flex flex-col gap-6 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-[#9a9a9a]">Cases</p>
|
||
<h2 class="section-title mt-4">真实落地成果，见证增长实效</h2>
|
||
</div>
|
||
<div class="flex flex-col items-start gap-3 md:items-end">
|
||
<SectionRouteLinks :routes="caseRoutes" />
|
||
<NuxtLink
|
||
to="/cases"
|
||
class="inline-flex items-center gap-2 text-sm font-medium text-gm-green"
|
||
>
|
||
查看全部案例 <span aria-hidden="true">→</span>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-10 grid gap-6 md:grid-cols-2 xl:grid-cols-3" data-stagger>
|
||
<NuxtLink
|
||
v-for="item in featuredCases"
|
||
:key="item.title"
|
||
:to="item.path"
|
||
class="overflow-hidden rounded-lg border border-gm-border bg-white shadow-sm transition hover:shadow-hover"
|
||
data-stagger-item
|
||
data-hover-card
|
||
>
|
||
<div class="h-56 overflow-hidden bg-gm-light">
|
||
<img
|
||
:src="item.image"
|
||
:alt="item.title"
|
||
class="h-full w-full object-cover transition duration-500 hover:scale-105"
|
||
loading="lazy"
|
||
/>
|
||
</div>
|
||
<div class="p-6">
|
||
<p class="text-xs font-medium text-gm-green">{{ item.category }}</p>
|
||
<h3 class="mt-3 text-xl font-semibold leading-7 text-[#262626]">
|
||
{{ item.title }}
|
||
</h3>
|
||
<p class="mt-3 text-sm leading-7 text-[#777]">{{ item.summary }}</p>
|
||
<div class="mt-5 flex flex-wrap gap-2">
|
||
<span
|
||
v-for="tag in item.tags"
|
||
:key="tag"
|
||
class="rounded-full bg-gm-light px-3 py-1 text-xs text-[#666]"
|
||
>
|
||
{{ tag }}
|
||
</span>
|
||
</div>
|
||
<div class="mt-6 grid gap-2">
|
||
<p
|
||
v-for="metric in item.metrics"
|
||
:key="metric"
|
||
class="text-sm font-medium text-[#262626]"
|
||
>
|
||
{{ metric }}
|
||
</p>
|
||
</div>
|
||
<p class="mt-5 font-mono text-[11px] text-[#999]">案例路径 {{ item.path }}</p>
|
||
</div>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="solutions" class="bg-[#f4f4f4] 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]">Solutions</p>
|
||
<h2 class="section-title mt-4">深入 12+ 行业，定制专属 GEO 增长方案</h2>
|
||
<p class="mt-4 text-base leading-8 text-[#666]">
|
||
让不同行业客户快速找到与自身相关的增长方案，提升业务匹配度感知。
|
||
</p>
|
||
</div>
|
||
<div class="flex flex-col items-start gap-3 md:items-end">
|
||
<SectionRouteLinks :routes="solutionRoutes" />
|
||
<NuxtLink to="/solutions" class="text-sm font-medium text-gm-green">
|
||
获取我的行业专属方案 →
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-10 grid gap-5 md:grid-cols-2 xl:grid-cols-3" data-stagger>
|
||
<NuxtLink
|
||
v-for="item in homeSolutionHighlights"
|
||
:key="item.slug"
|
||
:to="item.href"
|
||
class="group overflow-hidden rounded-lg border border-gm-border bg-white shadow-sm"
|
||
data-stagger-item
|
||
data-hover-card
|
||
>
|
||
<div class="h-44 overflow-hidden bg-gm-light">
|
||
<img
|
||
:src="item.image"
|
||
:alt="item.title"
|
||
class="h-full w-full object-cover transition duration-500 group-hover:scale-105"
|
||
loading="lazy"
|
||
/>
|
||
</div>
|
||
<div class="p-6">
|
||
<h3 class="text-[20px] font-semibold text-[#262626]">{{ item.title }}</h3>
|
||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ item.summary }}</p>
|
||
<div class="mt-5 flex flex-wrap gap-2">
|
||
<span
|
||
v-for="tag in item.tags"
|
||
:key="tag"
|
||
class="rounded bg-gm-light px-3 py-1 text-xs text-[#666]"
|
||
>
|
||
{{ tag }}
|
||
</span>
|
||
</div>
|
||
<p class="mt-5 font-mono text-[11px] text-[#999]">方案路径 {{ item.path }}</p>
|
||
</div>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="process" 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]">Process</p>
|
||
<h2 class="section-title mt-4">5 步标准化交付流程，透明可控、效果可追踪</h2>
|
||
<p class="mt-4 text-base leading-8 text-[#666]">
|
||
标准化流程加透明化交付，让服务可控、结果清晰可见。
|
||
</p>
|
||
</div>
|
||
<SectionRouteLinks :routes="processRoutes" />
|
||
</div>
|
||
|
||
<div class="relative mt-10 grid gap-4 md:grid-cols-5" data-stagger data-process-line>
|
||
<div class="absolute left-0 top-8 hidden h-px w-full bg-gm-border md:block" />
|
||
<div class="absolute left-0 top-8 hidden h-px w-0 bg-gm-green md:block" data-flow-line />
|
||
<article
|
||
v-for="step in processSteps"
|
||
:key="step.step"
|
||
class="relative rounded-lg border border-gm-border bg-white p-5 shadow-sm"
|
||
data-stagger-item
|
||
>
|
||
<p class="text-[24px] font-semibold text-gm-green">{{ step.step }}</p>
|
||
<h3 class="mt-4 text-[18px] font-semibold text-[#262626]">{{ step.title }}</h3>
|
||
<p class="mt-3 text-sm leading-7 text-[#666]">{{ step.text }}</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="testimonials" 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-[#a1a1a1]">Voice</p>
|
||
<h2 class="section-title mt-4">客户真实评价，见证服务品质</h2>
|
||
<p class="mt-3 text-[#777]">
|
||
从真实客户视角补充信任背书，进一步强化团队专业度和落地能力。
|
||
</p>
|
||
</div>
|
||
<SectionRouteLinks :routes="testimonialRoutes" />
|
||
</div>
|
||
|
||
<div class="mt-10 grid gap-5 md:grid-cols-3" data-stagger>
|
||
<article
|
||
v-for="item in testimonials"
|
||
:key="item.id"
|
||
class="rounded-lg border border-gm-border bg-[#f7f8f7] p-6 shadow-sm"
|
||
data-stagger-item
|
||
data-hover-card
|
||
>
|
||
<div class="flex size-14 items-center justify-center rounded-lg bg-white text-lg font-semibold text-gm-green">
|
||
{{ item.name.slice(0, 1) }}
|
||
</div>
|
||
<blockquote class="mt-5 text-base leading-8 text-[#555]">
|
||
“{{ item.quote }}”
|
||
</blockquote>
|
||
<p class="mt-6 text-base font-semibold text-[#262626]">{{ item.name }}</p>
|
||
<p class="text-sm text-[#9b9b9b]">{{ item.title }}</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<CtaSection :cta="ctaSection" section-id="consult" />
|
||
</WebsiteShell>
|
||
</template>
|