Home2 Landing Page Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Add a new /home2 preview page with a premium enterprise landing page while keeping the current / homepage unchanged.

Architecture: Build a new HomeLanding2.vue component as a self-contained landing page, register it in the VitePress theme, and expose it through a new docs/home2.md page. Use the existing custom layout and image assets so the new page fits the current site shell without changing the live homepage.

Tech Stack: VitePress 2, Vue 3 SFCs, existing theme registration in docs/.vitepress/theme/index.js, existing site layout in docs/.vitepress/theme/Layout.vue

---

File Structure

• Create: docs/home2.md
  • Route entry for /home2 that renders the new landing page without affecting /
• Create: docs/.vitepress/components/HomeLanding2.vue
  • New premium homepage implementation with layout, content, and scoped styles
• Modify: docs/.vitepress/theme/index.js
  • Register HomeLanding2 globally so Markdown pages can render it

Task 1: Create the /home2 route and verify the missing-component failure

Files:

• Create: docs/home2.md

• Modify: docs/.vitepress/theme/index.js

• Test: build output from npm run docs:build

• [ ] Step 1: Write the failing route page

---
layout: page
sidebar: false
aside: false
outline: false
title: 首页2 - 智声AI联络中心
description: 智声AI联络中心旗舰首页预览版
---

<HomeLanding2 />

• [ ] Step 2: Run the docs build to verify it fails

Run: npm run docs:build

Expected: FAIL because HomeLanding2 is not yet registered or resolved during build.

• [ ] Step 3: Register the new component in the theme

import HomeLanding2 from '../components/HomeLanding2.vue'

export default {
  extends: DefaultTheme,
  Layout,
  enhanceApp({ app, router }) {
    app.component('HomeLanding', HomeLanding)
    app.component('HomeLanding2', HomeLanding2)
    app.component('AIPlatformTechSummary', AIPlatformTechSummary)
    app.component('MarketingServices', MarketingServices)
    app.component('OutboundCallProduct', OutboundCallProduct)
    app.component('OpenSourceProject', OpenSourceProject)
    app.component('CustomFooter', CustomFooter)
    app.component('AboutUs', AboutUs)
    app.component('Partnership', Partnership)
    app.component('WechatModal', WechatModal)
    app.component('SidebarSearch', SidebarSearch)
  }
}

• [ ] Step 4: Re-run the build to verify the failure changes to the missing-file/component implementation

Run: npm run docs:build

Expected: FAIL because docs/.vitepress/components/HomeLanding2.vue still does not exist.

• [ ] Step 5: Commit the route wiring checkpoint

git add docs/home2.md docs/.vitepress/theme/index.js
git commit -m "feat: wire home2 preview route"

Task 2: Implement the new landing page component

Files:

• Create: docs/.vitepress/components/HomeLanding2.vue

• Test: build output from npm run docs:build

• [ ] Step 1: Write the failing component creation test

Run: npm run docs:build

Expected: FAIL because docs/.vitepress/components/HomeLanding2.vue does not exist yet.

• [ ] Step 2: Create the component with the final content structure

<template>
  <div class="home2">
    <section class="hero">
      <div class="shell">
        <div class="hero-copy"></div>
        <div class="hero-visual"></div>
      </div>
    </section>
    <section class="product-stories">
      <div class="shell"></div>
    </section>
    <section class="enterprise-capabilities">
      <div class="shell"></div>
    </section>
    <section class="industry-scenarios">
      <div class="shell"></div>
    </section>
    <section class="implementation-flow">
      <div class="shell"></div>
    </section>
    <section class="final-cta">
      <div class="shell"></div>
    </section>
  </div>
</template>

<script setup>
const trustMetrics = [
  { value: '98%', label: '识别准确率' },
  { value: '10万+', label: '日均外呼能力' },
  { value: '1 天', label: '私有化部署' },
  { value: '99.9%', label: '系统稳定性' }
]

const productStories = [
  {
    eyebrow: '智能语音交互',
    title: '让复杂沟通也能保持自然流畅',
    description: '融合语音识别、语义理解与大模型能力，支撑多轮对话、客户意图承接与业务节点判断。',
    image: '/images/agent.jpg'
  },
  {
    eyebrow: '流程编排与智能决策',
    title: '把话术逻辑、分支策略和业务规则放进同一张流程图',
    description: '通过可视化流程编排与决策能力，把触达策略、意图分流与人工接续编织成可运营的业务链路。',
    image: '/images/speechflow.jpg'
  },
  {
    eyebrow: '实时分析与运营看板',
    title: '从拨打结果到转化数据，运营视角一屏掌握',
    description: '统一沉淀任务执行、通话结果、线索转化与策略反馈，帮助团队持续优化触达效率。',
    image: '/images/statistics.jpg'
  }
]

const enterpriseCapabilities = [
  { title: '私有化部署', description: '支持企业本地化环境部署，兼顾数据安全与系统可控。' },
  { title: '弹性扩容', description: '面向高并发呼叫任务扩展资源，平稳支撑业务峰值。' },
  { title: '全链路监控', description: '覆盖任务状态、拨打结果、语音链路与关键运行指标。' },
  { title: '开放式集成', description: '支持 API、SIP 与多类业务系统接入，便于融入既有流程。' }
]

const industries = [
  { title: '银行', description: '贷后提醒、客户回访与存量客户运营自动化。', image: '/images/bank.jpg' },
  { title: '保险', description: '续保触达、服务回访与理赔服务协同更高效。', image: '/images/insurance.jpg' },
  { title: '证券', description: '投资者沟通、活动触达与客户分层运营更可控。', image: '/images/bond.jpg' },
  { title: '零售', description: '会员唤醒、活动通知与私域触达形成运营闭环。', image: '/images/shop.jpg' },
  { title: '制造', description: '订单通知、服务回访与供应链协同提升效率。', image: '/images/manufacture.jpg' },
  { title: '政务', description: '政策通知、民生服务与公共事务外呼更有秩序。', image: '/images/government.jpg' }
]

const workflow = [
  { step: '01', title: '导入客户数据', description: '支持 API 与批量导入，多渠道同步任务数据。' },
  { step: '02', title: '智能话术编排', description: '通过可视化流程配置对话逻辑与业务分支。' },
  { step: '03', title: '全自动外呼触达', description: '执行智能拨号、任务流转与呼叫策略控制。' },
  { step: '04', title: '效果实时洞察', description: '基于看板与分析结果持续优化转化效率。' }
]
</script>

<style scoped>
.home2 {
  background: linear-gradient(180deg, #f6f8fc 0%, #ffffff 24%, #f8fbff 100%);
  color: #0f172a;
}
</style>

Implementation requirements:

• Hero must be two-column with left copy and right product visual

• Use a horizontal trust bar instead of three large stat cards

• Replace CardSwap/MagicBento style presentation with three large product story modules

• Keep enterprise proof, industries, flow, and CTA aligned to the design spec

• Reuse existing images from /images

• Keep styles self-contained with scoped CSS

• Support desktop-first layout with responsive fallback, but optimize visual hierarchy for desktop

• [ ] Step 3: Run the build to verify it passes

Run: npm run docs:build

Expected: PASS and output includes the VitePress build summary with no Vue component resolution errors.

• [ ] Step 4: Refactor only if needed after green

Keep the component readable:

• Group content arrays near the top of the script

• Keep section markup in the same order as the design spec

• Remove unused classes, imports, or dead data

• [ ] Step 5: Commit the landing page implementation

git add docs/.vitepress/components/HomeLanding2.vue
git commit -m "feat: add premium home2 landing page"

Task 3: Verify the preview page visually and through the build

Files:

• Verify: docs/home2.md

• Verify: docs/.vitepress/components/HomeLanding2.vue

• Verify: docs/.vitepress/theme/index.js

• [ ] Step 1: Run the final build

Run: npm run docs:build

Expected: PASS

• [ ] Step 2: Run the local preview/dev server and open /home2

Run: npm run docs:dev -- --host 127.0.0.1 --port 5175

Expected: local site serves and /home2 loads using the new component.

• [ ] Step 3: Validate the page against the spec

Checklist:

• Hero shows value proposition, CTA, product visual, and trust metrics in one screen

• Product screenshots are the main visual anchor

• Section rhythm differs clearly from the old homepage

• Final CTA is restrained and brand-oriented, not a high-saturation sales banner

• / remains unchanged

• [ ] Step 4: Commit any final polish if verification requires code changes

git add docs/home2.md docs/.vitepress/components/HomeLanding2.vue docs/.vitepress/theme/index.js
git commit -m "feat: polish home2 preview page"