feat: initialize Nuxt official website

.gitignore

@@ -0,0 +1,24 @@
+# Dependencies
+node_modules/
+
+# Nuxt build output
+.nuxt/
+.output/
+dist/
+
+# Local environment files
+.env
+.env.*
+!.env.example
+
+# Local logs and caches
+*.log
+.cache/
+coverage/
+
+# Editor and operating system files
+.DS_Store
+Thumbs.db
+.idea/
+.vscode/
+*.swp

README.md

@@ -0,0 +1,39 @@
+# 大马棒 · 云途全域 GEO 官网
+
+基于蓝湖首页设计稿实现的企业官网首屏与落地页，采用 Nuxt 3、JavaScript、Tailwind CSS 和 shadcn 风格 UI 组件。
+
+## 技术栈
+
+- Nuxt 3
+- Vue 3 + JavaScript
+- Tailwind CSS
+- shadcn 风格 UI 组件
+
+## 本地开发
+
+```bash
+npm install
+npm run dev
+```
+
+默认访问地址为 `http://127.0.0.1:3000`。
+
+## 生产构建
+
+```bash
+npm run build
+npm run preview
+```
+
+## 项目结构
+
+```text
+assets/css/                 全局 Tailwind 样式
+components/ui/button/       通用 Button 组件
+pages/index.vue             官网首页
+public/images/lanhu/slices/ 蓝湖 Web 2x 切图资源
+```
+
+## 设计资源
+
+页面仅使用项目内的蓝湖本地资源，不依赖蓝湖 CDN。首页主要由导航、Hero、数据背书、GEO 双环增长模型、核心优势、案例、行业方案、交付流程、客户评价、CTA 和页脚组成。

assets/css/main.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: 'Source Han Sans', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
+  color: rgb(64 64 64);
+  background: #f8fbff;
+}
+
+html { scroll-behavior: smooth; }
+body { min-width: 320px; margin: 0; background: #f8fbff; }
+button, a { -webkit-tap-highlight-color: transparent; }

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "assets/css/main.css",
+    "baseColor": "slate",
+    "cssVariables": false
+  },
+  "aliases": {
+    "components": "~/components",
+    "utils": "~/utils",
+    "ui": "~/components/ui"
+  }
+}

components/ui/button/Button.vue

@@ -0,0 +1,16 @@
+<script setup>
+defineProps({
+  variant: { type: String, default: 'default' },
+  type: { type: String, default: 'button' }
+})
+</script>
+
+<template>
+  <button
+    :type="type"
+    class="inline-flex h-10 items-center justify-center rounded-md px-4 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+    :class="variant === 'outline' ? 'border border-slate-200 bg-white text-slate-700 hover:bg-slate-50' : 'bg-primary text-white shadow-sm hover:bg-blue-600'"
+  >
+    <slot />
+  </button>
+</template>

nuxt.config.js

@@ -0,0 +1,13 @@
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/tailwindcss'],
+  css: ['~/assets/css/main.css'],
+  app: {
+    head: {
+      title: '大马棒 · 云途全域 GEO',
+      meta: [
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'description', content: '大马棒 · 云途全域 GEO 官方网站' }
+      ]
+    }
+  }
+})

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "damabang-geo-official-site",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "preview": "nuxt preview"
+  },
+  "dependencies": {
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "nuxt": "^3.17.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17"
+  }
+}

pages/index.vue

@@ -0,0 +1,247 @@
+<script setup>
+import Button from '~/components/ui/button/Button.vue'
+
+const consultationOpen = ref(false)
+const notice = ref('')
+
+const navItems = [
+  { label: '首页', target: 'home' },
+  { label: '营销增长服务', target: 'model' },
+  { label: '行业解决方案', target: 'industry' },
+  { label: '内容生产服务', target: 'advantages' },
+  { label: '核心优势', target: 'advantages' },
+  { label: '案例与媒体资源', target: 'cases' },
+  { label: '关于我们', target: 'footer' }
+]
+
+const stats = [
+  { value: '300+', label: '服务客户群体' },
+  { value: '12+', label: '覆盖行业' },
+  { value: '126%', label: '客户 AI 搜索曝光提升' },
+  { value: '65%', label: '客户月均精准线索提升' }
+]
+
+const valuePoints = [
+  { title: '曝光', text: '打造 AI 搜索语境下的品牌信任声望，一次布局长期复用。' },
+  { title: '获客', text: '从曝光到获客全链路承接，避免流量断层，实现品效协同。' }
+]
+
+const advantages = [
+  { title: '全域媒体资源优势', detail: '5000+ 权威官媒 + 10万+ 优质自媒体矩阵', image: '/images/lanhu/slices/home-group37-group70-image5@2x.png' },
+  { title: '真人内容生产优势', detail: '行业独家 5万真人分布式内容生产网络', image: '/images/lanhu/slices/home-group36-group71-image5@2x.png' },
+  { title: '全链路闭环优势', detail: '从品牌声量到转化增长，形成全链路业务闭环', image: '/images/lanhu/slices/home-group35-group72-image5@2x.png' },
+  { title: '全客群定制优势', detail: '覆盖全类型经营主体，一对一专属定制方案', image: '/images/lanhu/slices/home-group34-group74-image5@2x.png' }
+]
+
+const cases = [
+  { category: '企业服务', result: 'AI 搜索全域曝光提升 320%，月均精准线索新增 80+' },
+  { category: '品牌营销', result: '搜索语境占位提升，建立多渠道权威信任背书' },
+  { category: '本地生活', result: '内容矩阵联动，带动门店咨询与转化增长' },
+  { category: '消费品牌', result: '真人内容规模化生产，提升品牌声量与转化' }
+]
+
+const industries = ['本地生活', '快消', '美妆']
+
+const deliverySteps = [
+  ['需求诊断', '一对一沟通，分析品牌现状与增长目标'],
+  ['方案定制', '定制专属 GEO 策略，明确关键节点与节奏'],
+  ['内容落地', '真人内容生产 + 媒体资源投放，全程跟进'],
+  ['数据优化', '定期复盘数据，动态调整策略，持续提升'],
+  ['资产沉淀', '沉淀持续增长的品牌资产，实现长效复用']
+]
+
+function scrollToSection(id) {
+  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+
+function openConsultation() {
+  consultationOpen.value = true
+  notice.value = ''
+}
+
+function submitConsultation() {
+  consultationOpen.value = false
+  notice.value = '已收到您的咨询，我们将尽快与您联系。'
+}
+</script>
+
+<template>
+  <main id="home" class="overflow-hidden bg-white text-ink">
+    <header class="sticky top-0 z-30 border-b border-slate-200 bg-white/95 backdrop-blur">
+      <div class="mx-auto flex h-11 max-w-[1280px] items-center justify-between px-5">
+        <a href="#home" class="shrink-0">
+          <img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="大马棒营销咨询集团" class="h-9 w-auto object-contain">
+        </a>
+        <nav class="hidden items-center gap-7 text-xs text-slate-600 xl:flex" aria-label="主导航">
+          <button v-for="(item, index) in navItems" :key="item.target" class="whitespace-nowrap transition hover:text-primary" :class="index === 0 ? 'font-semibold text-primary' : ''" @click="scrollToSection(item.target)">
+            {{ item.label }}
+          </button>
+        </nav>
+        <Button class="h-6 rounded-full px-3 text-[10px]" @click="openConsultation">登录</Button>
+      </div>
+    </header>
+
+    <section class="relative isolate h-[372px] overflow-hidden bg-[#f5f9ff]">
+      <img src="/images/lanhu/slices/home-container25-image2@2x.png" alt="" class="pointer-events-none absolute inset-0 z-0 h-full w-full max-w-none object-cover" aria-hidden="true">
+      <div class="relative z-10 mx-auto grid h-full max-w-[1280px] items-center px-8 py-12 sm:grid-cols-[48%_52%] sm:px-[12.65%]">
+        <div class="relative z-10 pt-2">
+          <h1 class="text-[48px] font-bold leading-[1.38] tracking-tight text-ink sm:text-[32px]">
+            <span class="block whitespace-nowrap">大马棒 · 云途全域 GEO</span>
+            <span class="block whitespace-nowrap">让品牌在 AI 时代拥有持续增长力</span>
+          </h1>
+          <div class="mt-4 flex flex-wrap gap-x-3 gap-y-2 text-xs text-slate-600">
+            <span>✓ 5万真人内容生产网络</span>
+            <span>✓ 5000+ 自营资源矩阵</span>
+            <span>✓ 全链路转化闭环</span>
+          </div>
+          <div class="mt-6 flex flex-wrap gap-3">
+            <Button class="h-10 rounded-[4px] px-5 text-xs" @click="openConsultation">免费定制 <span class="ml-1">→</span></Button>
+            <Button variant="outline" class="h-10 rounded-[4px] px-5 text-xs" @click="scrollToSection('cases')">查看成功案例</Button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="border-y border-slate-100 bg-white py-5">
+      <div class="mx-auto flex max-w-[960px] items-center justify-between gap-5 px-4 text-xs font-semibold text-slate-400 sm:text-sm">
+        <span>and</span><span>WaSun</span><span>企业服务</span><span>CiiC</span><span>SUNX</span><span>品牌营销</span>
+      </div>
+    </section>
+
+    <section class="mx-auto max-w-[960px] px-4 py-16 text-center">
+      <h2 class="text-2xl font-bold tracking-tight">已服务 <span class="text-primary">300+</span> 全类型经营主体，覆盖 <span class="text-primary">12+</span> 主流行业</h2>
+      <p class="mt-2 text-xs text-muted">We have provided services to over 300 full-spectrum business entities </p>
+      <p class="mt-2 text-xs text-muted">spanning more than a dozen mainstream industry sectors</p>
+      <div class="mt-8 grid grid-cols-2 gap-4 md:grid-cols-4">
+        <article v-for="(stat, index) in stats" :key="stat.label" class="rounded-xl bg-gradient-to-br from-white to-blue-50 px-3 py-6 shadow-[0_8px_24px_rgba(48,121,255,0.08)]">
+          <img v-if="index === 0" src="/images/lanhu/slices/home-group37-group70-image5@2x.png" alt="" class="mx-auto mb-2 size-10 object-contain">
+          <img v-else-if="index === 1" src="/images/lanhu/slices/home-group36-group71-image5@2x.png" alt="" class="mx-auto mb-2 size-10 object-contain">
+          <div class="text-2xl font-bold text-primary">{{ stat.value }}</div>
+          <div class="mt-1 text-xs text-slate-500">{{ stat.label }}</div>
+        </article>
+      </div>
+    </section>
+
+    <section id="model" class="relative overflow-hidden bg-[linear-gradient(180deg,#f8fbff_0%,#e3f4ff_100%)] py-16">
+      <div class="mx-auto max-w-[960px] px-4 text-center">
+        <h2 class="text-2xl font-bold">独创「<span class="text-primary">GEO双环增长模型</span>」，实现品效协同长效增长</h2>
+        <p class="mt-2 text-xs text-muted">Original “GEO Dual-Ring Growth Model” Delivers Long-term Growth Through Integrated Brand Building And Conversion Performance</p>
+        <div class="mt-8 grid items-center gap-6 md:grid-cols-[1fr_1fr_1.1fr]">
+          <img src="/images/lanhu/slices/home-group80-group83-image11@2x.png" alt="品牌声量增长环" class="mx-auto size-40 object-contain">
+          <img src="/images/lanhu/slices/home-group86-group87-image12@2x.png" alt="转化增长环" class="mx-auto size-40 object-contain">
+          <div class="rounded-xl bg-white/70 p-6 text-left shadow-[0_12px_32px_rgba(48,121,255,0.12)]">
+            <h3 class="font-semibold text-primary">业务核心价值点</h3>
+            <div v-for="point in valuePoints" :key="point.title" class="mt-5 border-b border-slate-200 pb-4 last:border-0 last:pb-0">
+              <h4 class="font-medium text-slate-800">{{ point.title }}</h4>
+              <p class="mt-2 text-sm leading-6 text-slate-500">{{ point.text }}</p>
+            </div>
+            <Button class="mt-5" @click="openConsultation">了解业务详情 <span class="ml-1">→</span></Button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section id="advantages" class="bg-[#edf8ff] py-16">
+      <div class="mx-auto max-w-[960px] px-4">
+        <div class="text-center">
+          <h2 class="text-2xl font-bold text-primary">四大核心优势</h2>
+          <p class="mt-2 text-xs text-muted">Four Core Advantages</p>
+        </div>
+        <div class="mt-9 grid gap-4 sm:grid-cols-2">
+          <article v-for="advantage in advantages" :key="advantage.title" class="flex min-h-36 items-center gap-5 rounded-lg bg-white/85 p-5 shadow-[0_8px_24px_rgba(48,121,255,0.08)]">
+            <img :src="advantage.image" alt="" class="size-20 shrink-0 object-contain">
+            <div>
+              <h3 class="font-semibold text-primary">{{ advantage.title }}</h3>
+              <p class="mt-2 text-sm leading-6 text-slate-500">{{ advantage.detail }}</p>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section id="cases" class="relative overflow-hidden py-16">
+      <div class="absolute inset-0 bg-[url('/images/lanhu/slices/home-group75-image7@2x.png')] bg-cover bg-center opacity-45" />
+      <div class="relative mx-auto max-w-[960px] px-4">
+        <div class="text-center">
+          <h2 class="text-2xl font-bold text-primary">真实落地成果，见证增长实效</h2>
+          <p class="mt-2 text-xs text-muted">Practical Delivered Results That Demonstrate Tangible Growth Outcomes</p>
+        </div>
+        <div class="mt-9 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <article v-for="(item, index) in cases" :key="item.category" class="overflow-hidden rounded-xl bg-white shadow-[0_10px_24px_rgba(48,121,255,0.12)]">
+            <div class="grid h-28 place-items-center bg-gradient-to-br from-blue-100 via-white to-sky-100">
+              <img :src="advantages[index].image" alt="" class="size-16 object-contain">
+            </div>
+            <div class="p-4">
+              <h3 class="font-semibold text-slate-800">{{ item.category }}</h3>
+              <p class="mt-2 text-xs leading-5 text-slate-500">{{ item.result }}</p>
+            </div>
+          </article>
+        </div>
+        <div class="mt-8 text-center"><Button @click="openConsultation">查看全部案例 <span class="ml-1">→</span></Button></div>
+      </div>
+    </section>
+
+    <section id="industry" class="mx-auto max-w-[960px] px-4 py-16">
+      <div class="text-center">
+        <h2 class="text-2xl font-bold">深耕 <span class="text-primary">12+</span> 行业，定制专属 GEO 增长方案</h2>
+        <p class="mt-2 text-xs text-muted">With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth Solutions</p>
+      </div>
+      <div class="mt-9 grid gap-5 md:grid-cols-3">
+        <article v-for="(industry, index) in industries" :key="industry" class="relative overflow-hidden rounded-xl bg-gradient-to-br from-sky-50 via-white to-blue-100 p-6 shadow-[0_8px_24px_rgba(48,121,255,0.08)]">
+          <img :src="advantages[index].image" alt="" class="absolute -right-3 -top-2 size-28 opacity-35">
+          <h3 class="relative text-lg font-semibold text-slate-800">{{ industry }}</h3>
+          <p class="relative mt-4 text-sm leading-6 text-slate-600">为 {{ industry }} 品牌定制 AI 搜索内容策略、媒体资源布局与增长转化方案。</p>
+          <div class="relative mt-5 flex gap-2"><span class="rounded-full bg-blue-100 px-3 py-1 text-xs text-primary">内容策略</span><span class="rounded-full bg-blue-100 px-3 py-1 text-xs text-primary">全域曝光</span></div>
+        </article>
+      </div>
+    </section>
+
+    <section class="bg-[#eff9ff] py-16">
+      <div class="mx-auto max-w-[960px] px-4">
+        <div class="text-center">
+          <h2 class="text-2xl font-bold"><span class="text-primary">5步标准化</span>交付流程，透明可控效果可追溯</h2>
+          <p class="mt-2 text-xs text-muted">With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth Solutions</p>
+        </div>
+        <div class="mt-9 rounded-xl bg-white/80 p-6 shadow-[0_10px_30px_rgba(48,121,255,0.08)]">
+          <ol class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            <li v-for="(step, index) in deliverySteps" :key="step[0]" class="flex gap-4 rounded-lg border border-blue-50 bg-white p-4">
+              <span class="grid size-8 shrink-0 place-items-center rounded-full bg-blue-100 text-sm font-bold text-primary">0{{ index + 1 }}</span>
+              <div><h3 class="font-semibold text-slate-800">{{ step[0] }}</h3><p class="mt-1 text-xs leading-5 text-slate-500">{{ step[1] }}</p></div>
+            </li>
+          </ol>
+        </div>
+      </div>
+    </section>
+
+    <section class="mx-auto max-w-[960px] px-4 py-16">
+      <div class="text-center"><h2 class="text-2xl font-bold">客户真实评价，见证<span class="text-primary">服务品质</span></h2><p class="mt-2 text-xs text-muted">Genuine Client Testimonials Attest To Our Service Quality</p></div>
+      <div class="mt-8 grid gap-4 md:grid-cols-3">
+        <blockquote v-for="name in ['企业服务客户', '消费品牌客户', '本地生活客户']" :key="name" class="rounded-xl bg-slate-50 p-6 text-sm leading-7 text-slate-500">
+          <span class="text-3xl font-bold text-blue-200">“</span>通过全域 GEO 布局，我们在 AI 搜索场景中持续获得了更高质量的品牌曝光与业务线索。<footer class="mt-4 font-medium text-slate-700">— {{ name }}</footer>
+        </blockquote>
+      </div>
+    </section>
+
+    <section class="relative overflow-hidden bg-primary py-14 text-center text-white">
+      <img src="/images/lanhu/slices/home-group105-image31@2x.png" alt="" class="absolute inset-0 size-full object-cover opacity-70">
+      <div class="relative mx-auto max-w-2xl px-4"><h2 class="text-2xl font-bold leading-relaxed">AI 搜索增长风口已至，大马棒 · 云途全域 GEO 助力企业打造品牌双环增长体系</h2><p class="mt-3 text-sm text-blue-50">免费获取 1 对 1 GEO 诊断方案</p><Button class="mt-6 bg-white text-primary hover:bg-slate-100" @click="openConsultation">立即咨询 <span class="ml-1">→</span></Button></div>
+    </section>
+
+    <footer id="footer" class="bg-[#111d24] py-10 text-slate-300">
+      <div class="mx-auto grid max-w-[960px] gap-8 px-4 md:grid-cols-[1.2fr_1fr_auto]">
+        <div><h2 class="text-lg font-bold text-white">成都大马棒传媒有限公司</h2><p class="mt-3 text-sm leading-6 text-slate-400">全域增长咨询与内容营销服务，为品牌构建 AI 时代的持续增长力。</p></div>
+        <div class="text-sm leading-7 text-slate-400"><div>服务热线：132-254-2153</div><div>商务合作：business@damabang.com</div><div>工作时间：周一至周五 09:30 - 18:30</div></div>
+        <div class="grid size-24 place-items-center rounded bg-white/10 text-xs text-slate-400">关注我们<br>获取方案</div>
+      </div>
+    </footer>
+
+    <div v-if="consultationOpen" class="fixed inset-0 z-40 grid place-items-center bg-slate-950/45 px-4" @click.self="consultationOpen = false">
+      <section class="w-full max-w-sm rounded-xl bg-white p-6 shadow-2xl" role="dialog" aria-modal="true" aria-labelledby="consult-title">
+        <h2 id="consult-title" class="text-lg font-bold text-ink">咨询全域 GEO 方案</h2>
+        <p class="mt-2 text-sm leading-6 text-muted">提交后，我们会为您匹配专属增长方案。</p>
+        <div class="mt-6 flex justify-end gap-3"><Button variant="outline" @click="consultationOpen = false">暂不咨询</Button><Button @click="submitConsultation">提交咨询</Button></div>
+      </section>
+    </div>
+    <p v-if="notice" class="fixed bottom-5 left-1/2 z-50 -translate-x-1/2 rounded-full bg-slate-900 px-5 py-3 text-sm text-white shadow-xl" role="status">{{ notice }}</p>
+  </main>
+</template>

tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./components/**/*.{vue,js}', './pages/**/*.vue', './app.vue'],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'rgb(48 121 255)',
+        ink: 'rgb(64 64 64)',
+        muted: 'rgb(153 153 153)'
+      },
+      fontFamily: {
+        sans: ['Source Han Sans', 'PingFang SC', 'Microsoft YaHei', 'Arial', 'sans-serif']
+      }
+    }
+  },
+  plugins: []
+}