86 lines
3.7 KiB
Vue
86 lines
3.7 KiB
Vue
<script setup>
|
||
import { footerData } from "~/data/navigation";
|
||
|
||
const heroRoutes = [
|
||
{ label: "页面路径", href: "/contact", path: "/contact" },
|
||
{ label: "首页 CTA", href: "/#consult", path: "/#consult" },
|
||
{ label: "服务总览", href: "/services", path: "/services" },
|
||
];
|
||
|
||
const contactRoutes = [
|
||
{ label: "首页 CTA", href: "/#consult", path: "/#consult" },
|
||
{ label: "服务总览", href: "/services", path: "/services" },
|
||
{ label: "方案总览", href: "/solutions", path: "/solutions" },
|
||
];
|
||
|
||
useHead({
|
||
title: "联系我们 - 大马棒·云途全域 GEO",
|
||
meta: [
|
||
{
|
||
name: "description",
|
||
content:
|
||
"联系大马棒·云途全域 GEO，获取 1 对 1 增长诊断方案与行业专属 GEO 服务建议。",
|
||
},
|
||
],
|
||
});
|
||
</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>CONTACT</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>
|
||
获取 1 对 1 GEO 增长诊断方案，快速判断品牌在曝光、内容、咨询与转化链路上的优化空间。
|
||
</p>
|
||
<div class="mt-8" data-hero-reveal>
|
||
<SectionRouteLinks :routes="heroRoutes" light />
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="contact-routes" 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 Routes</p>
|
||
<h2 class="section-title mt-4">咨询方式与相关路径</h2>
|
||
<p class="mt-4 text-base leading-8 text-[#666]">
|
||
可以从电话、邮箱、二维码预留位或服务入口进入咨询，也可以从服务页、方案页、案例页继续回到联系页完成转化。
|
||
</p>
|
||
</div>
|
||
<SectionRouteLinks :routes="contactRoutes" />
|
||
</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>
|
||
<p class="mt-4 font-mono text-[11px] text-[#999]">联系路径 /contact</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>
|
||
<p class="mt-4 font-mono text-[11px] text-[#999]">联系路径 /contact</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>
|
||
<p class="mt-4 font-mono text-[11px] text-[#999]">联系路径 /contact</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<CtaSection />
|
||
</WebsiteShell>
|
||
</template>
|