BigStickNewOfficialWebsite-V2/pages/index.vue

<script setup>
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

const consultationOpen = ref(false)
const notice = ref('')
const pageRoot = ref(null)
let animationContext

const navItems = [
  ['首页', 'home'],
  ['营销增长服务', 'model'],
  ['行业解决方案', 'industries'],
  ['开放客户案例平台', 'cases'],
  ['核心优势', 'advantages'],
  ['全球营销增长洞察', 'delivery'],
  ['关于我们', 'footer']
]

const logos = [
  'Bond',
  'WaSun',
  '西西能源',
  'CIIC',
  'SUNAC',
  'B+ WORKS',
  'Bond',
  'WaSun',
  '西西能源',
  'CIIC',
  'SUNAC',
  'B+ WORKS'
]
const stats = [
  ['300+', '累计服务客户', '/images/lanhu/slices/home-group100-image26@2x.png'],
  ['12+', '覆盖行业', '/images/lanhu/slices/home-group101-image27@2x.png'],
  ['126%', '客户AI搜索曝光平均提升', '/images/lanhu/slices/home-group102-image28@2x.png'],
  ['65%', '客户转化链路效率平均提升', '/images/lanhu/slices/home-group103-image29@2x.png']
]
const corePoints = [
  ['曝光', '打造AI搜索语境下的品牌信任声量，一次布局 长期复用'],
  ['获客', '流量，让每一分投入都有回报 让曝光直接落地为可跟进的精准线索，告别无效']
]
const advantageCards = [
  ['全域媒体资源优势', '5000+权威官媒+10万+优质自媒体矩阵'],
  ['全链路闭环优势', '行业唯一打通「纯曝光+内容资产沉淀+转化闭环」'],
  ['全客群定制优势', '覆盖全类型经营主体，一对一专属定制专属方案']
]
const caseImages = [
  '/images/lanhu/slices/home-group90-image15@2x.png',
  '/images/lanhu/slices/home-group91-image16@2x.png',
  '/images/lanhu/slices/home-group92-image17@2x.png',
  '/images/lanhu/slices/home-group93-image18@2x.png'
]
const industryCards = [
  [
    '本地生活',
    'AI搜索全域曝光提升320%月均精准线索新增80+，持续获得品牌声量与业务线索',
    '/images/lanhu/slices/home-group34-group74-image5@2x.png'
  ],
  [
    '快消',
    'AI搜索全域曝光提升320%月均精准线索新增80+，让内容价值更快兑现',
    '/images/lanhu/slices/home-group35-group72-image5@2x.png'
  ],
  [
    '美妆',
    'AI搜索全域曝光提升320%月均精准线索新增80+，建立多渠道信任背书',
    '/images/lanhu/slices/home-group36-group71-image5@2x.png'
  ]
]
const deliverySteps = [
  [
    '需求诊断',
    '一对一沟通，分析品牌现状与增长痛点',
    '/images/lanhu/slices/home-group78-image10@2x.png'
  ],
  [
    '方案定制',
    '定制专属GEO策略，明确交付节点与预期效果',
    '/images/lanhu/slices/home-group80-group77-image9@2x.png'
  ],
  [
    '内容落地',
    '真人内容生产+媒体矩阵投放，全流程同步进度',
    '/images/lanhu/slices/home-group86-group76-image8@2x.png'
  ],
  [
    '数据优化',
    '定期数据复盘，动态调整策略，持续优化效果',
    '/images/lanhu/slices/home-group34-group74-image5@2x.png'
  ],
  [
    '资产沉淀',
    '交付完整内容资产与增长报告，实现长效复用',
    '/images/lanhu/slices/home-group35-group72-image5@2x.png'
  ]
]

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 = '已收到您的咨询，我们将尽快与您联系。'
}

onMounted(async () => {
  await nextTick()

  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches || !pageRoot.value) return

  gsap.registerPlugin(ScrollTrigger)

  animationContext = gsap.context(() => {
    const reveal = (targets, trigger, options = {}) => {
      gsap.from(targets, {
        autoAlpha: 0,
        y: 34,
        duration: 0.72,
        ease: 'power3.out',
        stagger: 0.1,
        clearProps: 'transform,opacity,visibility',
        scrollTrigger: {
          trigger,
          start: 'top 82%',
          once: true
        },
        ...options
      })
    }

    const heroTimeline = gsap.timeline({ defaults: { ease: 'power3.out' } })
    heroTimeline
      .from('.site-header', { autoAlpha: 0, y: -16, duration: 0.5, clearProps: 'all' })
      .from('.hero-copy h1', { autoAlpha: 0, y: 32, duration: 0.7, clearProps: 'all' }, '-=0.12')
      .from(
        '.hero-points span',
        { autoAlpha: 0, y: 16, duration: 0.42, stagger: 0.09, clearProps: 'all' },
        '-=0.22'
      )
      .from(
        '.button-row button',
        { autoAlpha: 0, y: 16, duration: 0.42, stagger: 0.1, clearProps: 'all' },
        '-=0.12'
      )

    gsap.to('.hero-art', {
      scale: 1.025,
      yPercent: 1,
      duration: 9,
      ease: 'sine.inOut',
      repeat: -1,
      yoyo: true
    })

    reveal('.intro-section .section-title', '.intro-section')
    reveal('.stats-panel .stat-item', '.stats-panel', { y: 26, stagger: 0.12 })
    reveal('.model-layout .ring', '.model-layout', { x: -24, y: 12, stagger: 0.16 })
    reveal('.core-value', '.model-layout', { x: 28, y: 0, delay: 0.12 })
    reveal('.advantages-section .section-title', '.advantages-section')
    reveal('.lead-advantage', '.lead-advantage')
    reveal('.advantage-grid article', '.advantage-grid', { y: 24, stagger: 0.12 })
    reveal('.cases-section .section-title', '.cases-section')
    reveal('.case-panel article', '.case-panel', { y: 24, stagger: 0.1 })
    reveal('.industry-grid article', '.industry-grid', { y: 26, stagger: 0.12 })
    reveal('.delivery-banner', '.delivery-banner', { y: 22 })
    reveal('.delivery-grid article', '.delivery-grid', { y: 22, stagger: 0.1 })
    reveal('.testimonial-section .section-title', '.testimonial-section')
    reveal('.testimonial-track article', '.testimonial-track', { y: 22, stagger: 0.1 })
    reveal('.cta-content', '.cta-section', { y: 26 })
  }, pageRoot.value)
})

onBeforeUnmount(() => animationContext?.revert())
</script>

<template>
  <main id="home" ref="pageRoot" class="site-shell">
    <header class="site-header">
      <div class="page-width header-inner">
        <a href="#home" class="brand" aria-label="大马棒首页"
          ><img
            src="/images/lanhu/slices/home-group114-image33@2x.png"
            alt="成都大马棒传媒有限公司"
        /></a>
        <nav class="desktop-nav" aria-label="主导航">
          <button
            v-for="([label, target], index) in navItems"
            :key="target"
            :class="{ active: index === 0 }"
            @click="scrollToSection(target)"
          >
            {{ label }}<span v-if="index > 0 && index !== 3" class="nav-chevron">⌄</span>
          </button>
        </nav>
        <button class="login-button" @click="openConsultation"><span>●</span> 登录</button>
      </div>
    </header>

    <section class="hero-section">
      <div class="hero-art" aria-hidden="true"></div>
      <div class="page-width hero-content">
        <div class="hero-copy">
          <h1>大马棒 · 云途全域GEO<br />让品牌在AI时代拥有持续增长力</h1>
          <p class="hero-points">
            <span>✓ 5万真人内容生产网络</span><span>✓ 5000+自媒体资源矩阵</span
            ><span>✓ 全链路转化闭环</span>
          </p>
          <div class="button-row">
            <button class="primary-button" @click="openConsultation">免费定制 <b>→</b></button
            ><button class="outline-button" @click="scrollToSection('cases')">查看成功案例</button>
          </div>
        </div>
      </div>
    </section>

    <section class="logo-strip" aria-label="合作品牌">
      <div class="logo-track">
        <span
          v-for="(logo, index) in logos"
          :key="`${logo}-${index}`"
          :class="`logo logo-${index % 6}`"
          >{{ logo }}</span
        >
      </div>
    </section>

    <section class="intro-section page-width">
      <SectionTitle
        >已服务<span class="blue">300+</span>全类型经营主体，覆盖<span class="blue">12+</span
        >主流行业<template #subtitle
          >We Have Provided Services To Over 300 Full-spectrum Business Entities<br />Spanning More
          Than A Dozen Mainstream Industry Sectors</template
        ></SectionTitle
      >
      <div class="stats-panel">
        <article v-for="stat in stats" :key="stat[1]" class="stat-item">
          <img :src="stat[2]" alt="" /><strong>{{ stat[0] }}</strong
          ><span>{{ stat[1] }}</span>
        </article>
      </div>
    </section>

    <section id="model" class="model-section">
      <div class="page-width">
        <SectionTitle
          >独创<span class="blue">「GEO双环增长模型」</span>，实现品效协同长效增长<template
            #subtitle
            >Original "geo Dual-ring Growth Model" Delivers Long-term Growth Through<br />Integrated
            Brand Building And Conversion Performance</template
          ></SectionTitle
        >
        <div class="model-layout">
          <img
            class="ring"
            src="/images/lanhu/slices/home-group80-group83-image11@2x.png"
            alt="声量资产环"
          />
          <img
            class="ring"
            src="/images/lanhu/slices/home-group86-group87-image12@2x.png"
            alt="获客转化环"
          />
          <div class="core-value">
            <h3>
              <img src="/images/lanhu/slices/home-group88-image13@2x.png" alt="" />业务核心价值点
            </h3>
            <div v-for="point in corePoints" :key="point[0]" class="core-point">
              <h4><i></i>{{ point[0] }}</h4>
              <p>{{ point[1] }}</p>
            </div>
            <button class="primary-button small" @click="openConsultation">
              了解业务详情 <b>→</b>
            </button>
          </div>
        </div>
      </div>
    </section>

    <section id="advantages" class="advantages-section">
      <div class="page-width">
        <SectionTitle
          ><span class="blue">四大核心</span>优势<template #subtitle
            >Four Core Advantages</template
          ></SectionTitle
        >
        <div class="lead-advantage">
          <img src="/images/lanhu/slices/home-group90-image15@2x.png" alt="真人内容生产" />
          <div>
            <h3>真人内容生产优势</h3>
            <p><b>核心点：</b>行业独家5万真人分布式内容生产网络</p>
            <p><b>价值：</b>用C端爆款内容思维做B端GEO，打造真实可信的AI信任型声量</p>
          </div>
        </div>
        <div class="advantage-grid">
          <article v-for="([title, text], index) in advantageCards" :key="title">
            <img
              :src="`/images/lanhu/slices/home-group${37 - index}-group${70 + index}-image5@2x.png`"
              alt=""
            />
            <div>
              <h3>{{ title }}</h3>
              <p><b>核心点：</b>{{ text }}</p>
              <p><b>价值：</b>提升AI搜索权重，构建持续增长的品牌信任力</p>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section id="cases" class="cases-section">
      <div class="case-background" aria-hidden="true"></div>
      <div class="page-width case-content">
        <SectionTitle
          ><span class="blue">真实落地成果</span>，见证<span class="blue">增长实效</span
          ><template #subtitle
            >Practical Delivered Results That Demonstrate Tangible Growth Outcomes</template
          ></SectionTitle
        >
        <div class="case-panel">
          <article v-for="(image, index) in caseImages" :key="image">
            <img :src="image" :alt="`客户案例 ${index + 1}`" />
            <p>某企业服务客户: AI搜索全域曝光提升<br />320%月均精准线索新增80+</p>
          </article>
        </div>
        <div class="center-action">
          <button class="primary-button small" @click="openConsultation">
            查看全部案例 <b>→</b>
          </button>
        </div>
      </div>
    </section>

    <section id="industries" class="industries-section page-width">
      <SectionTitle
        >深耕<span class="blue">12+</span>行业，定制专属GEO增长方案<template #subtitle
          >With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
          Solutions<br />Tailored To Clients’ Needs</template
        ></SectionTitle
      >
      <div class="industry-grid">
        <article v-for="card in industryCards" :key="card[0]">
          <h3>{{ card[0] }}</h3>
          <img :src="card[2]" alt="" />
          <div class="quote">“</div>
          <p>某企业服务客户：<br />{{ card[1] }}</p>
          <div class="tags"><span>#生活服务</span><span>#全域曝光</span></div>
        </article>
      </div>
    </section>

    <section id="delivery" class="delivery-section">
      <div class="page-width">
        <SectionTitle
          ><span class="blue">5步标准化</span>交付流程，透明可控效果可追溯<template #subtitle
            >With In-depth Experience Across 12+ Industries, We Craft Exclusive Geo Growth
            Solutions<br />Tailored To Clients’ Needs</template
          ></SectionTitle
        >
        <div class="delivery-banner"></div>
        <div class="delivery-grid">
          <article v-for="step in deliverySteps" :key="step[0]">
            <img :src="step[2]" alt="" />
            <div>
              <h3>{{ step[0] }}：</h3>
              <p>{{ step[1] }}</p>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section class="testimonial-section">
      <div class="page-width">
        <SectionTitle
          >客户真实评价，见证<span class="blue">服务品质</span
          ><template #subtitle
            >Genuine Client Testimonials Attest To Our Service Quality</template
          ></SectionTitle
        >
        <div class="testimonial-track">
          <article v-for="index in 5" :key="index">
            <header><span class="avatar"></span><b>数据优化：</b><time>2026-12-42</time></header>
            <p>
              创作者每日必读的前沿设计趋势、设计方法论和大厂落地经验之谈，14年的行业专注，脑突入口的优质内容沉淀，为每一个从入行到进阶的设计师、创作者赋能。
            </p>
          </article>
        </div>
      </div>
    </section>

    <section class="cta-section">
      <div class="cta-art"></div>
      <div class="cta-content">
        <h2>AI搜索增长风口已至，大马棒 · 云途全域GEO助<br />力企业打造品效双闭环的长效增长体系</h2>
        <p>免费获取1对1GEO增长诊断方案</p>
        <button class="primary-button" @click="openConsultation">立即免费咨询 <b>→</b></button>
      </div>
    </section>

    <footer id="footer" class="site-footer">
      <div class="page-width footer-main">
        <img src="/images/lanhu/slices/home-group114-image33@2x.png" alt="成都大马棒传媒有限公司" />
        <div class="footer-links">
          <div v-for="n in 6" :key="n"><b>快捷导航</b><span>企业定位企业定位企业定位</span></div>
        </div>
        <div class="qr"><span>▦</span><span>▦</span><small>公众号　　微信二维码</small></div>
      </div>
      <div class="footer-bottom">
        备案信息 备案信息 备案信息　　　版权声明版权声明版权声明　　　友情链接友情链接友情链接
      </div>
    </footer>

    <div v-if="consultationOpen" class="dialog-mask" @click.self="consultationOpen = false">
      <section class="consult-dialog" role="dialog" aria-modal="true">
        <button class="close" aria-label="关闭" @click="consultationOpen = false">×</button>
        <h2>咨询全域 GEO 方案</h2>
        <p>提交后，我们会尽快为您匹配专属增长方案。</p>
        <button class="primary-button" @click="submitConsultation">提交咨询</button>
      </section>
    </div>
    <p v-if="notice" class="toast">{{ notice }}</p>
  </main>
</template>