Foldspace Landing Page Redesign - Design Spec

Date: 2026-05-07 Approach: Narrative-style restructuring (方案B)

Overview

Redesign the Foldspace homepage from 10 sections to 7 narrative-driven sections, achieving a premium minimalist SaaS landing page aesthetic. Preserve existing dark/light theme, zh/en language switching, and PC/mobile responsive mechanisms. Keep the current color palette (blue-purple gradient system).

Constraints

• Only modify homepage files: src/pages/index.tsx and src/pages/index.module.css
• No changes to other pages, config, or components outside the homepage
• Preserve: dark/light theme (isDark + .themeDark), zh/en language (lang + copy[lang]), responsive breakpoints
• Preserve: SVG diagrams (RuntimeNetwork, MemoryDiagram, RuntimeDiagram)
• Preserve: color palette (blue-purple gradient system, CSS variables)
• SEO: maintain meta tags, structured data, keywords, og/twitter cards

Section Structure (7 Sections)

Section 1: Hero — "Build Your AI Workforce"

Changes from current:

• Remove keywordChip row (SEO keywords stay in meta tags only)
• Simplify proofCard to 3 concise trust signals
• Enhance heroDescription to emphasize business value over technical description

Copy (zh):

• badge: "Enterprise AI Agent Infrastructure" (unchanged)
• heroTitle: "Build Your AI Workforce" (unchanged)
• heroDescription: "为企业系统、工作流和团队部署可观测、可审计、可扩展的 AI Agent 运行层。"
• proofSignals: [ "6个行业场景覆盖", "浏览器 + 系统集成运行层", "生产级审计、记忆与审批" ]

Copy (en):

• heroDescription: "Deploy an observable, auditable, and scalable AI Agent runtime across enterprise systems, workflows, and teams."
• proofSignals: [ "Covering 6 industry scenarios", "Browser + system integration runtime", "Production-grade audit, memory, and approval" ]

Layout: Same heroGrid (left copy + right SVG). Remove heroKeywordRow. Keep languageSwitch, RuntimeNetwork SVG.

---

Section 2: Use Cases — "谁在用Foldspace"

Replaces: Audience section + WhatIs section (merged)

Changes from current:

• 4 core scenarios instead of 6 flat cards
• Horizontal feature bar layout (one scenario per row)
• Alternating left-right layout (scenario 1: left copy, right visual; scenario 2: right copy, left visual)
• Each scenario shows a concise Agent workflow pipeline

4 Core Scenarios:

Scenario	zh Title	zh Description	Tag
E-commerce	电商店主	商品上新→客服回复→评论分析→售后流转→运营报表	Commerce
MCN/Content	MCN / 内容运营	选题→脚本→审核→分发→复盘	Content Ops
Enterprise	企业 Agent 需求方	CRM→ERP→知识库→浏览器→审批流→统一运行层	Enterprise
Education/Manufacturing	教育 & 制造	SOP→工单→课程→质量追溯→知识沉淀	Operations

Copy (zh):

• eyebrow: "谁在用 Foldspace"
• title: "真正需要系统能力的业务团队"
• description: "Foldspace 为电商、内容运营、企业系统和教育制造提供可编排的 AI Agent 运行层。"

Copy (en):

• eyebrow: "Who uses Foldspace"
• title: "Teams that need systems, not chat"
• description: "Foldspace provides an orchestrated AI Agent runtime for commerce, content operations, enterprise systems, and education/manufacturing."

Layout: Alternating feature-bar rows. Each row = [scenario title + description + pipeline] on one side, [visual placeholder] on other side. CSS: alternating flex-direction row-reverse.

---

Section 3: Architecture — "统一运行层"

Replaces: WhatIs section + Runtime section (merged)

Changes from current:

• Combine the "What is Foldspace" narrative with the Runtime architecture diagram
• Top half: description text + MemoryDiagram SVG
• Bottom half (dark background): RuntimeDiagram SVG + 3 layer cards

Copy (zh):

• eyebrow: "架构分层"
• title: "连接模型、工作流和企业系统的一层"
• description: "Foldspace 把 LLM、浏览器、企业系统和人工工作流连接进同一个可观测、可审计、可扩展的运行时。"

Copy (en):

• eyebrow: "Architecture"
• title: "One layer connecting models, workflows, and enterprise systems"
• description: "Foldspace connects LLMs, browsers, enterprise systems, and human workflows into one runtime that can be observed, audited, and extended."

Layout: Split into two sub-sections within one section. Top: .splitLayout (copy + MemoryDiagram). Bottom: .sectionDark (RuntimeDiagram + layer cards). Preserve RuntimeDiagram SVG and 3 runtimeLayerCards.

---

Section 4: Capabilities — "运作AI Agents所需的一切"

Changes from current:

• Card grid from 3-col to 2-col × 3-row (larger cards, more whitespace)
• Each card: tag pill + title on top, description below
• Minimalist card style with subtle border and glass effect

Copy: Unchanged from current (6 capabilities with same titles/descriptions/tags).

Layout: CSS grid 2-column. Cards are taller with more padding. Minimal visual chrome.

---

Section 5: Ecosystem — "产品矩阵"

Changes from current:

• Sub-product cards get href links
• Card grid from 3-col to 4-col (PC), 2-col (tablet), 1-col (mobile)
• Foldspace Core card gets highlighted border
• Each card gets external-link indicator (CSS pseudo-element)

Link mapping:

• Foldspace Core → /docs/intro (internal)
• Social-use → https://social-use.com
• Shop-use → https://shop-use.cn
• Agent-lattice → https://agent-lattice.cn
• TunnelHub → https://tunnelhub.cn
• VibeCuting → https://vibecuting.com/
• MoeCam → /docs/category/moecam

Copy: Unchanged from current ecosystem items.

Layout: 4-col grid on PC, responsive to 2-col and 1-col. Foldspace Core card has distinct border style.

---

Section 6: Developer Platform — "开发者平台"

Replaces: Developers section + Integrations section (merged)

Changes from current:

• Merge developer code panel and integration wall into one section
• Left: code panel (unchanged)
• Right-top: feature pills (unchanged)
• Right-bottom: integration chip wall (moved from standalone section)

Copy (zh):

• eyebrow: "开发者平台"
• title: "不是前端工具，而是平台"
• description: "开发者可以通过 SDK、AG-UI、MCP、Webhook 和 API primitives 将 Foldspace 接到现有系统里。"
• integrationsEyebrow: "系统连接"
• integrationsTitle: "适配企业团队已经在用的栈"

Copy (en):

• eyebrow: "Built for developers"
• title: "A platform, not just a front-end workflow tool"
• description: "Developers get SDKs, AG-UI, MCP, webhooks, and API primitives that make it easier to integrate Foldspace into existing stacks."
• integrationsEyebrow: "Connect your stack"
• integrationsTitle: "Integrations that fit how enterprise teams already work"

Layout: developerGrid (2-col). Left = codePanel. Right = featurePanel (top) + integrationWall (bottom, new sub-section within same panel).

---

Section 7: CTA — "Start Building"

Changes from current:

• Remove Insights/Blog section from homepage (4 insight cards removed)
• Replace with a simple "Read our blog" link button in the CTA card
• CTA card visual unchanged (gradient background + glass effect)

Copy (zh):

• eyebrow: "Build Your AI Workforce"
• title: "用 Foldspace 构建企业 AI Agent"
• description: "为电商、内容、教育、制造或企业运营交付方案，让自动化变成平台能力。"
• blogButton: "阅读博客" (new)
• startButton: "开始构建"
• salesButton: "联系销售"

Copy (en):

• title: "Start building enterprise AI agents with Foldspace"
• description: "Ship solutions for commerce, content, education, manufacturing, or enterprise operations. Turn automation into a platform."
• blogButton: "Read the blog" (new)
• startButton: "Start Building"
• salesButton: "Contact Sales"

Layout: Same finalCtaCard with 3 buttons: Start Building + Contact Sales + Read the blog.

---

SEO Preservation

• Keep <Head> meta tags (keywords, description, og/twitter)
• Keep structured data (Organization schema with dynamic description based on lang)
• Remove keywordChip visual row (SEO keywords remain in <meta> tag)
• Keywords meta tag stays hardcoded in English (unchanged)
• pageDescription updates to new heroDescription text
• pageTitle remains "Foldspace | 企业级 AI Agent 基础设施平台" / "Foldspace | Enterprise AI Agent Infrastructure Platform"

Technical Implementation Notes

• File changes: Only src/pages/index.tsx and src/pages/index.module.css
• Copy data structure: Add useCases type replacing audience + whatIs. Add integrations sub-section to developers. Add blogButton to cta.
• New CSS classes: .useCaseSection, .useCaseRow, .useCaseRowReverse, .useCasePipeline, .ecosystemGrid4, .ecosystemCoreCard, .integrationWallInline, .ctaBlogButton
• Responsive: 4-col ecosystem grid → 2-col @996px → 1-col @720px. Use case rows stack vertically @996px. 2-col capabilities grid → 1-col @720px.
• Remove: .heroKeywordRow, .keywordChip visual usage. Remove audience and whatIs sections from render. Remove standalone integrations section. Remove insights section and insightGrid.

Copy Data Structure (TypeScript)

type Copy = {
  pageTitle: string;
  pageDescription: string;
  badge: string;
  heroTitle: string;
  heroDescription: string;
  startButton: string;
  demoButton: string;
  language: { zh: string; en: string };
  proofSignals: string[];
  useCases: {
    eyebrow: string;
    title: string;
    description: string;
    items: UseCaseItem[];
  };
  architecture: {
    eyebrow: string;
    title: string;
    description: string;
    runtime: {
      layers: CardItem[];
    };
  };
  capabilities: {
    eyebrow: string;
    title: string;
    description: string;
    items: CardItem[];
  };
  ecosystem: {
    eyebrow: string;
    title: string;
    description: string;
    items: EcosystemItem[];
  };
  developers: {
    eyebrow: string;
    title: string;
    description: string;
    code: string;
    features: string[];
    integrations: {
      eyebrow: string;
      title: string;
      items: string[];
    };
  };
  cta: {
    eyebrow: string;
    title: string;
    description: string;
    startButton: string;
    salesButton: string;
    blogButton: string;
  };
};

type UseCaseItem = {
  title: string;
  description: string;
  pipeline: string[];
  tag: string;
};

type EcosystemItem = CardItem & {
  href: string;
};