Landing Page Redesign 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: Redesign the Foldspace homepage from 10 sections to 7 narrative-driven sections with a premium minimalist SaaS aesthetic.

Architecture: Rewrite src/pages/index.tsx (types + copy data + JSX render) and src/pages/index.module.css (remove obsolete classes, add new layout classes). Preserve existing dark/light, zh/en, and responsive mechanisms. Only homepage files change.

Tech Stack: Docusaurus 3.2, React 18, TypeScript, CSS Modules

Files

File	Responsibility	Change Type
`src/pages/index.tsx`	Homepage component: types, copy data, JSX render	Full rewrite
`src/pages/index.module.css`	Homepage styles: layout, theme, responsive	Full rewrite
`src/pages/index.tsx` SVG components	RuntimeNetwork, MemoryDiagram, RuntimeDiagram	Preserve unchanged

Task 1: Rewrite TypeScript types and copy data in index.tsx

Files:

Modify: src/pages/index.tsx:10-567 (types + entire copy object)

This task replaces the entire type definitions and copy data object. SVG components (RuntimeNetwork, MemoryDiagram, RuntimeDiagram, SectionHeading, CardGrid) and the Home component will be handled in later tasks.

Step 1: Replace type definitions (lines 10-90)

Replace all types from Lang through Copy with the new structure. Remove keywords from Copy (moved to meta tag only). Replace audience + whatIs with useCases + architecture. Add integrations sub-section to developers. Add blogButton to cta. Add UseCaseItem and EcosystemItem types.

type Lang = "zh" | "en";

type CardItem = {
  title: string;
  description: string;
  tag: string;
};

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

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

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;
  };
};

Step 2: Replace zh copy data (lines 92-329)

Replace the entire zh copy object with new structure. Remove keywords field (stays in meta). Replace audience + whatIs with useCases + architecture. Add integrations sub-section inside developers. Add blogButton to cta. Update proofSignals to concise trust signals.

const copy: Record<Lang, Copy> = {
  zh: {
    pageTitle: "Foldspace | 企业级 AI Agent 基础设施平台",
    pageDescription:
      "Foldspace 是面向电商、MCN 机构、出海自媒体、企业 Agent 需求方、教育和制造行业的企业级 AI Agent 基础设施平台。",
    badge: "Enterprise AI Agent Infrastructure",
    heroTitle: "Build Your AI Workforce",
    heroDescription:
      "为企业系统、工作流和团队部署可观测、可审计、可扩展的 AI Agent 运行层。",
    startButton: "开始构建",
    demoButton: "预约演示",
    language: { zh: "中文", en: "English" },
    proofSignals: [
      "6 个行业场景覆盖",
      "浏览器 + 系统集成运行层",
      "生产级审计、记忆与审批",
    ],
    useCases: {
      eyebrow: "谁在用 Foldspace",
      title: "真正需要系统能力的业务团队",
      description:
        "Foldspace 为电商、内容运营、企业系统和教育制造提供可编排的 AI Agent 运行层。",
      items: [
        {
          title: "电商店主",
          description:
            "把商品上新、客服回复、评论分析、售后流转和运营报表接到同一条 AI 工作流里。",
          pipeline: ["上新", "客服", "评论", "售后", "报表"],
          tag: "Commerce",
        },
        {
          title: "MCN / 内容运营",
          description:
            "把选题、脚本、审核、分发、复盘做成可编排的内容运营系统。",
          pipeline: ["选题", "脚本", "审核", "分发", "复盘"],
          tag: "Content Ops",
        },
        {
          title: "企业 Agent 需求方",
          description:
            "把 CRM、ERP、知识库、浏览器和审批流接到统一的 Agent Runtime。",
          pipeline: ["CRM", "ERP", "知识", "浏览器", "审批"],
          tag: "Enterprise",
        },
        {
          title: "教育 & 制造",
          description:
            "把招生/课服、答疑、SOP、工单、质量追溯和知识沉淀变成可追踪的自动化流程。",
          pipeline: ["SOP", "工单", "课程", "质量", "知识"],
          tag: "Operations",
        },
      ],
    },
    architecture: {
      eyebrow: "架构分层",
      title: "连接模型、工作流和企业系统的一层",
      description:
        "Foldspace 把 LLM、浏览器、企业系统和人工工作流连接进同一个可观测、可审计、可扩展的运行时。",
      runtime: {
        layers: [
          {
            title: "Execution",
            description: "Browser actions, API calls, form submissions, and operational tasks.",
            tag: "Execution",
          },
          {
            title: "Coordination",
            description: "Workflow orchestration, branching logic, and approval checkpoints.",
            tag: "Coordination",
          },
          {
            title: "Memory",
            description: "Policies, SOPs, product knowledge, and domain context that persist across runs.",
            tag: "Memory",
          },
        ],
      },
    },
    capabilities: {
      eyebrow: "核心能力",
      title: "运作 AI Agents 所需的一切",
      description: "编排、记忆、集成、审核和安全路由都放在平台层解决。",
      items: [
        {
          title: "Multi-Agent Runtime",
          description: "协调多个 Agent、工具和审批节点，让复杂业务任务按流程稳定执行。",
          tag: "Runtime",
        },
        {
          title: "Browser Automation",
          description: "浏览器即执行面，适合站点操作、后台系统、表单流程和跨页面任务。",
          tag: "Browser",
        },
        {
          title: "Enterprise Integrations",
          description: "连接 CRM、ERP、Slack、Feishu、DingTalk、数据库和内部 API。",
          tag: "Systems",
        },
        {
          title: "Human-in-the-Loop",
          description: "把审批、复核和人工接管嵌入流程，确保安全与可控。",
          tag: "Review",
        },
        {
          title: "Knowledge Runtime",
          description: "把 SOP、文档、FAQ、课程与工艺知识统一成可检索的企业记忆。",
          tag: "Memory",
        },
        {
          title: "Agent Gateway",
          description: "统一编排、审计和路由企业 Agent 访问权限与调用路径。",
          tag: "Gateway",
        },
      ],
    },
    ecosystem: {
      eyebrow: "产品矩阵",
      title: "可以继续扩展成多个产品的平台",
      description: "首页保留你已有的子产品，同时把品牌中心放在 Foldspace Core。",
      items: [
        {
          title: "Foldspace Core",
          description: "企业 AI Agent 的编排核心、记忆核心和执行核心。",
          tag: "Platform",
          href: "/docs/intro",
        },
        {
          title: "Social-use",
          description: "面向多平台内容运营的发布、分发与复盘工具。",
          tag: "Social",
          href: "https://social-use.com",
        },
        {
          title: "Shop-use",
          description: "面向电商店主的商品、客服、售后与运营工作流。",
          tag: "Commerce",
          href: "https://shop-use.cn",
        },
        {
          title: "Agent-lattice",
          description: "面向多 Agent 协作的任务调度与关系编排层。",
          tag: "Multi-Agent",
          href: "https://agent-lattice.cn",
        },
        {
          title: "TunnelHub",
          description: "面向设备、远程通道与受控访问场景的连接层。",
          tag: "Gateway",
          href: "https://tunnelhub.cn",
        },
        {
          title: "VibeCuting",
          description: "面向视频制作、剪辑和内容生成的 AI 工作流引擎。",
          tag: "Video",
          href: "https://vibecuting.com/",
        },
        {
          title: "MoeCam",
          description: "面向视觉采集、画面管理和在线协同的轻量产品。",
          tag: "Visual",
          href: "/docs/category/moecam",
        },
      ],
    },
    developers: {
      eyebrow: "开发者平台",
      title: "不是前端工具，而是平台",
      description:
        "开发者可以通过 SDK、AG-UI、MCP、Webhook 和 API primitives 将 Foldspace 接到现有系统里。",
      code: `from foldspace import Agent

agent = Agent(
    tools=["browser", "crm", "knowledge", "approval"],
)

agent.run("Generate weekly sales report")`,
      features: ["Python SDK", "TypeScript SDK", "AG-UI", "MCP", "REST APIs", "Webhooks"],
      integrations: {
        eyebrow: "系统连接",
        title: "适配企业团队已经在用的栈",
        items: ["Slack", "Salesforce", "SAP", "Feishu", "DingTalk", "HubSpot", "Browser", "PostgreSQL", "Notion"],
      },
    },
    cta: {
      eyebrow: "Build Your AI Workforce",
      title: "用 Foldspace 构建企业 AI Agent",
      description:
        "为电商、内容、教育、制造或企业运营交付方案，让自动化变成平台能力。",
      startButton: "开始构建",
      salesButton: "联系销售",
      blogButton: "阅读博客",
    },
  },

Step 3: Replace en copy data (lines 330-567)

Replace the entire en copy object with new structure matching the zh structure.

  en: {
    pageTitle: "Foldspace | Enterprise AI Agent Infrastructure Platform",
    pageDescription:
      "Foldspace is an enterprise AI agent infrastructure platform for e-commerce, MCN, creators, enterprise operations, education, and manufacturing teams.",
    badge: "Enterprise AI Agent Infrastructure",
    heroTitle: "Build Your AI Workforce",
    heroDescription:
      "Deploy an observable, auditable, and scalable AI Agent runtime across enterprise systems, workflows, and teams.",
    startButton: "Start Building",
    demoButton: "Book Demo",
    language: { zh: "中文", en: "English" },
    proofSignals: [
      "Covering 6 industry scenarios",
      "Browser + system integration runtime",
      "Production-grade audit, memory, and approval",
    ],
    useCases: {
      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.",
      items: [
        {
          title: "E-commerce owners",
          description:
            "Connect product launches, support replies, review analysis, after-sales flow, and reporting into one AI workflow.",
          pipeline: ["Launch", "Support", "Review", "After-sales", "Report"],
          tag: "Commerce",
        },
        {
          title: "MCN / Content Ops",
          description:
            "Turn topics, scripts, review, distribution, and recap into orchestrated content operations.",
          pipeline: ["Topic", "Script", "Review", "Publish", "Recap"],
          tag: "Content Ops",
        },
        {
          title: "Enterprise Agent buyers",
          description:
            "Bring CRM, ERP, knowledge, browsers, and approval flows into one Agent Runtime.",
          pipeline: ["CRM", "ERP", "Knowledge", "Browser", "Approval"],
          tag: "Enterprise",
        },
        {
          title: "Education & Manufacturing",
          description:
            "Turn admissions, student support, SOPs, work orders, quality traceability, and knowledge capture into traceable automation.",
          pipeline: ["SOP", "Work Order", "Course", "Quality", "Knowledge"],
          tag: "Operations",
        },
      ],
    },
    architecture: {
      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.",
      runtime: {
        layers: [
          {
            title: "Execution",
            description: "Browser actions, API calls, form submissions, and operational tasks.",
            tag: "Execution",
          },
          {
            title: "Coordination",
            description: "Workflow orchestration, branching logic, and approval checkpoints.",
            tag: "Coordination",
          },
          {
            title: "Memory",
            description: "Policies, SOPs, product knowledge, and domain context that persist across runs.",
            tag: "Memory",
          },
        ],
      },
    },
    capabilities: {
      eyebrow: "Core capabilities",
      title: "Everything you need to operate AI agents",
      description: "The platform layer includes orchestration, memory, integrations, review, and secure routing.",
      items: [
        {
          title: "Multi-Agent Runtime",
          description: "Coordinate multiple agents, tools, and approval nodes so complex work runs reliably.",
          tag: "Runtime",
        },
        {
          title: "Browser Automation",
          description: "Use the browser as an execution surface for sites, back-office systems, forms, and multi-page tasks.",
          tag: "Browser",
        },
        {
          title: "Enterprise Integrations",
          description: "Connect CRM, ERP, Slack, Feishu, DingTalk, databases, and internal APIs.",
          tag: "Systems",
        },
        {
          title: "Human-in-the-Loop",
          description: "Embed approval, review, and human takeover into workflows for safety and control.",
          tag: "Review",
        },
        {
          title: "Knowledge Runtime",
          description: "Turn SOPs, docs, FAQs, courses, and craft knowledge into searchable enterprise memory.",
          tag: "Memory",
        },
        {
          title: "Agent Gateway",
          description: "Centralize orchestration, audit, and routing for enterprise agent permissions and paths.",
          tag: "Gateway",
        },
      ],
    },
    ecosystem: {
      eyebrow: "Product ecosystem",
      title: "A platform that can expand into multiple products",
      description: "The homepage can reference your existing navigation products while keeping the brand centered on Foldspace Core.",
      items: [
        {
          title: "Foldspace Core",
          description: "The orchestration, memory, and execution core for enterprise AI agents.",
          tag: "Platform",
          href: "/docs/intro",
        },
        {
          title: "Social-use",
          description: "Publishing, distribution, and recap tooling for multi-platform content operations.",
          tag: "Social",
          href: "https://social-use.com",
        },
        {
          title: "Shop-use",
          description: "Product, support, after-sales, and operations workflows for e-commerce owners.",
          tag: "Commerce",
          href: "https://shop-use.cn",
        },
        {
          title: "Agent-lattice",
          description: "Task scheduling and relationship orchestration for multi-agent collaboration.",
          tag: "Multi-Agent",
          href: "https://agent-lattice.cn",
        },
        {
          title: "TunnelHub",
          description: "Connectivity for devices, remote tunnels, and controlled access scenarios.",
          tag: "Gateway",
          href: "https://tunnelhub.cn",
        },
        {
          title: "VibeCuting",
          description: "An AI workflow engine for video creation, editing, and content generation.",
          tag: "Video",
          href: "https://vibecuting.com/",
        },
        {
          title: "MoeCam",
          description: "A lightweight product for visual capture, scene management, and collaboration.",
          tag: "Visual",
          href: "/docs/category/moecam",
        },
      ],
    },
    developers: {
      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.",
      code: `from foldspace import Agent

agent = Agent(
    tools=["browser", "crm", "knowledge", "approval"],
)

agent.run("Generate weekly sales report")`,
      features: ["Python SDK", "TypeScript SDK", "AG-UI", "MCP", "REST APIs", "Webhooks"],
      integrations: {
        eyebrow: "Connect your stack",
        title: "Integrations that fit how enterprise teams already work",
        items: ["Slack", "Salesforce", "SAP", "Feishu", "DingTalk", "HubSpot", "Browser", "PostgreSQL", "Notion"],
      },
    },
    cta: {
      eyebrow: "Build Your AI Workforce",
      title: "Start building enterprise AI agents with Foldspace",
      description:
        "Ship solutions for commerce, content, education, manufacturing, or enterprise operations. Turn automation into a platform.",
      startButton: "Start Building",
      salesButton: "Contact Sales",
      blogButton: "Read the blog",
    },
  },
};

Step 4: Verify build compiles with types only (no JSX changes yet)

Since we haven't changed JSX yet, the build will fail due to missing fields in old JSX. This is expected. Just verify TypeScript types compile:

Run: cd /projects-data/projects/foldspace-stack.github.io && npx tsc --noEmit 2>&1 | head -20 Expected: Errors from JSX referencing removed fields (audience, whatIs, integrations, insights, keywords). Types themselves should be valid.

Task 2: Rewrite Hero section JSX

Files:

Modify: src/pages/index.tsx:860-932 (Hero section in Home component)
Step 1: Update Hero section JSX

Replace the Hero section render (lines 871-932 inside <main>). Remove heroKeywordRow. Update heroDescription and proofSignals to use new copy fields.

<section className={styles.heroSection}>
  <div className="container">
    <div className={styles.heroGrid}>
      <div className={styles.heroCopy}>
        <div className={styles.heroTopRow}>
          <div className={styles.heroBadgeRow}>
            <img src="/img/favicon.svg" alt="Foldspace" className={styles.heroLogo} />
            <span className={styles.heroBadge}>{t.badge}</span>
          </div>
          <div className={styles.languageSwitch} aria-label="Language switch">
            <button
              type="button"
              className={clsx(styles.languageButton, lang === "zh" && styles.languageButtonActive)}
              onClick={() => setLanguage("zh")}
            >
              {t.language.zh}
            </button>
            <button
              type="button"
              className={clsx(styles.languageButton, lang === "en" && styles.languageButtonActive)}
              onClick={() => setLanguage("en")}
            >
              {t.language.en}
            </button>
          </div>
        </div>
        <Heading as="h1" className={styles.heroTitle}>
          {t.heroTitle}
        </Heading>
        <p className={styles.heroDescription}>{t.heroDescription}</p>
        <div className={styles.heroActions}>
          <Link className={clsx(styles.button, styles.buttonPrimary)} to="/docs/intro">
            {t.startButton}
          </Link>
          <Link
            className={clsx(styles.button, styles.buttonSecondary)}
            to="mailto:admin@foldspace.cn?subject=Foldspace%20Demo"
          >
            {t.demoButton}
          </Link>
        </div>
        <div className={styles.heroProofRow}>
          {t.proofSignals.map((item) => (
            <div key={item} className={styles.proofCard}>
              {item}
            </div>
          ))}
        </div>
      </div>
      <div className={styles.heroVisual}>
        <RuntimeNetwork lang={lang} />
      </div>
    </div>
  </div>
</section>

Key changes: Removed heroKeywordRow and keywords field reference. proofSignals now uses new concise trust signals.

Task 3: Add Use Cases section JSX and CSS

Files:

Modify: src/pages/index.tsx (add UseCaseRow component + section JSX after Hero)
Modify: src/pages/index.module.css (add new CSS classes)
Step 1: Add UseCaseRow sub-component before Home component

Add a new component UseCaseRow between CardGrid and Home function (around line 812). This renders a single use case as an alternating feature bar.

function UseCaseRow({
  item,
  reverse,
}: {
  item: UseCaseItem;
  reverse: boolean;
}) {
  return (
    <div className={clsx(styles.useCaseRow, reverse && styles.useCaseRowReverse)}>
      <div className={styles.useCaseCopy}>
        <div className={styles.cardTag}>{item.tag}</div>
        <Heading as="h3" className={styles.useCaseTitle}>
          {item.title}
        </Heading>
        <p className={styles.useCaseDescription}>{item.description}</p>
        <div className={styles.useCasePipeline}>
          {item.pipeline.map((step, i) => (
            <span key={step} className={styles.pipelineStep}>
              {step}
              {i < item.pipeline.length - 1 && <span className={styles.pipelineArrow}>&rarr;</span>}
            </span>
          ))}
        </div>
      </div>
      <div className={styles.useCaseVisual}>
        <div className={styles.useCaseFlowDiagram}>
          {item.pipeline.map((step, i) => (
            <div key={step} className={styles.flowNode}>
              <span className={styles.flowNodeLabel}>{step}</span>
              {i < item.pipeline.length - 1 && <div className={styles.flowConnector} />}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Step 2: Add Use Cases section JSX in Home component

Replace the old audience section (lines 934-944) and whatIs section (lines 946-967) with one new useCases section:

<section className={styles.section}>
  <div className="container">
    <SectionHeading
      eyebrow={t.useCases.eyebrow}
      title={t.useCases.title}
      description={t.useCases.description}
      align="center"
    />
    {t.useCases.items.map((item, i) => (
      <UseCaseRow key={item.tag} item={item} reverse={i % 2 === 1} />
    ))}
  </div>
</section>

Step 3: Add Use Cases CSS classes in index.module.css

Add the following new CSS classes after .heroProofRow section (around line 300):

.useCaseRow {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  margin-top: 1.5rem;
}

.useCaseRowReverse {
  flex-direction: row-reverse;
}

.useCaseCopy {
  flex: 1;
  min-width: 0;
}

.useCaseTitle {
  margin: 0.9rem 0 0.65rem;
  color: var(--home-text);
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.useCaseDescription {
  margin: 0;
  color: var(--home-muted);
  line-height: 1.78;
}

.useCasePipeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.pipelineStep {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 30px;
  padding: 0 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--home-border);
  background: var(--home-accent-soft);
  color: var(--home-accent-strong);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pipelineArrow {
  color: var(--home-muted);
  font-size: 0.72rem;
}

.useCaseVisual {
  flex: 1;
  min-width: 0;
  padding: 1rem;
  border-radius: 28px;
  border: 1px solid var(--home-border);
  background: var(--home-surface);
  box-shadow: var(--home-shadow);
  backdrop-filter: blur(16px);
}

.themeDark .useCaseVisual {
  border-color: var(--home-border);
  background: rgba(10, 18, 36, 0.84);
}

.useCaseFlowDiagram {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
}

.flowNode {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.flowNodeLabel {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--home-border-strong);
  background: var(--home-accent-soft);
  color: var(--home-accent-strong);
  font-size: 0.84rem;
  font-weight: 700;
}

.flowConnector {
  width: 18px;
  height: 2px;
  background: var(--home-accent);
  border-radius: 1px;
  transform: rotate(90deg) translateX(6px);
}

.themeDark .pipelineStep,
.themeDark .flowNodeLabel {
  background: rgba(124, 153, 255, 0.14);
  color: #dbe5ff;
  border-color: rgba(124, 153, 255, 0.18);
}

.themeDark .flowConnector {
  background: var(--home-accent);
}

Task 4: Rewrite Architecture section JSX

Files:

Modify: src/pages/index.tsx (replace old WhatIs + Runtime sections with merged Architecture)
Step 1: Replace WhatIs + Runtime sections with merged Architecture section

Replace the old whatIs section (lines 946-967) and runtime section (lines 981-1004) — but since we already removed WhatIs in Task 3, just replace the Runtime section block with the new Architecture section:

<section className={styles.sectionMuted}>
  <div className="container">
    <SectionHeading
      eyebrow={t.architecture.eyebrow}
      title={t.architecture.title}
      description={t.architecture.description}
    />
    <div className={styles.splitLayout}>
      <div className={styles.copyPanel}>
        <p>{t.architecture.description}</p>
        <ul className={styles.bulletList}>
          {t.architecture.runtime.layers.map((layer) => (
            <li key={layer.title}>
              <strong>{layer.title}</strong> — {layer.description}
            </li>
          ))}
        </ul>
      </div>
      <div className={styles.illustrationPanel}>
        <MemoryDiagram lang={lang} />
      </div>
    </div>
  </div>
</section>

<section className={styles.sectionDark}>
  <div className="container">
    <div className={styles.runtimePanel}>
      <RuntimeDiagram lang={lang} />
    </div>
    <div className={styles.runtimeLayerGrid}>
      {t.architecture.runtime.layers.map((item) => (
        <article key={item.title} className={styles.runtimeLayerCard}>
          <div className={styles.cardTag}>{item.tag}</div>
          <Heading as="h3" className={styles.cardTitle}>
            {item.title}
          </Heading>
          <p className={styles.cardDescription}>{item.description}</p>
        </article>
      ))}
    </div>
  </div>
</section>

Note: Architecture uses two sub-sections (sectionMuted for MemoryDiagram, sectionDark for RuntimeDiagram), same visual pattern as before. No new CSS needed — reuse .splitLayout, .copyPanel, .illustrationPanel, .runtimePanel, .runtimeLayerGrid, .runtimeLayerCard.

Task 5: Rewrite Capabilities section CSS (2-col grid)

Files:

Modify: src/pages/index.module.css (change .cardGrid to 2-column)
Step 1: Change cardGrid from 3-col to 2-col

In index.module.css, find the .cardGrid definition (around line 636-644):

.cardGrid,
.audienceGrid,
.capabilityGrid,
.ecosystemGrid,
.insightGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

Replace with:

.cardGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

Remove the alias classes .audienceGrid, .capabilityGrid, .ecosystemGrid, .insightGrid — they are no longer needed.

Step 2: Update responsive breakpoints for cardGrid

In the @media (max-width: 996px) block (around line 926-957), remove references to audienceGrid, capabilityGrid, ecosystemGrid, insightGrid. Keep cardGrid at 2-col for tablet:

@media (max-width: 996px) {
  .heroGrid,
  .splitLayout,
  .developerGrid,
  .finalCtaCard,
  .useCaseRow {
    grid-template-columns: 1fr;
  }

  .useCaseRow {
    flex-direction: column;
  }

  .useCaseRowReverse {
    flex-direction: column;
  }

  /* ...existing rules... */

  .heroProofRow,
  .cardGrid,
  .runtimeLayerGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

In the @media (max-width: 720px) block, make cardGrid 1-col:

  .heroProofRow,
  .cardGrid,
  .runtimeLayerGrid {
    grid-template-columns: 1fr;
  }

Step 3: Capabilities section JSX stays unchanged

The Capabilities section JSX uses <CardGrid items={t.capabilities.items} /> which still works. No JSX change needed for this task.

Task 6: Rewrite Ecosystem section (4-col + href links + core highlight)

Files:

Modify: src/pages/index.tsx (ecosystem section JSX - cards now link to href)
Modify: src/pages/index.module.css (4-col grid + core card highlight)
Step 1: Replace Ecosystem section JSX

Replace the ecosystem section (around lines 1006-1016) with linked cards:

<section className={styles.section}>
  <div className="container">
    <SectionHeading
      eyebrow={t.ecosystem.eyebrow}
      title={t.ecosystem.title}
      description={t.ecosystem.description}
      align="center"
    />
    <div className={styles.ecosystemGrid}>
      {t.ecosystem.items.map((item) => (
        <Link
          key={item.title}
          to={item.href}
          className={clsx(styles.ecosystemCard, item.href === "/docs/intro" && styles.ecosystemCoreCard)}
        >
          <div className={styles.cardTag}>{item.tag}</div>
          <Heading as="h3" className={styles.cardTitle}>
            {item.title}
          </Heading>
          <p className={styles.cardDescription}>{item.description}</p>
          <span className={styles.ecosystemLinkIndicator} aria-hidden="true">&rarr;</span>
        </Link>
      ))}
    </div>
  </div>
</section>

Note: Cards now use <Link> (Docusaurus) wrapping, with href from EcosystemItem. Foldspace Core gets .ecosystemCoreCard class for highlighted border.

Step 2: Add ecosystem CSS classes

Replace old .ecosystemGrid (which was aliased to .cardGrid) with a dedicated 4-col grid. Add .ecosystemCard, .ecosystemCoreCard, .ecosystemLinkIndicator.

.ecosystemGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.ecosystemCard {
  display: block;
  padding: 1.3rem;
  border-radius: 22px;
  border: 1px solid var(--home-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(251, 253, 255, 0.88));
  box-shadow: var(--home-shadow);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.ecosystemCard:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--home-shadow);
}

.themeDark .ecosystemCard {
  background:
    linear-gradient(180deg, rgba(10, 18, 36, 0.94), rgba(9, 15, 30, 0.88));
}

.ecosystemCoreCard {
  border-color: var(--home-border-strong);
  background:
    radial-gradient(circle at 20% 20%, var(--home-accent-soft), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(251, 253, 255, 0.88));
}

.themeDark .ecosystemCoreCard {
  border-color: rgba(124, 153, 255, 0.22);
  background:
    radial-gradient(circle at 20% 20%, rgba(124, 153, 255, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(10, 18, 36, 0.94), rgba(9, 15, 30, 0.88));
}

.ecosystemLinkIndicator {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  color: var(--home-muted);
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ecosystemCard:hover .ecosystemLinkIndicator {
  opacity: 1;
}

Step 3: Add ecosystem responsive breakpoints

@media (max-width: 996px) {
  .ecosystemGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .ecosystemGrid {
    grid-template-columns: 1fr;
  }
}

Task 7: Merge Developer + Integrations sections

Files:

Modify: src/pages/index.tsx (replace Developer section + remove standalone Integrations section)
Modify: src/pages/index.module.css (add .integrationWallInline style)
Step 1: Replace Developer section JSX and remove Integrations section

Replace the Developer section (around lines 1018-1045) with merged version, and remove the standalone Integrations section (around lines 1047-1063):

<section className={styles.sectionMuted}>
  <div className="container">
    <SectionHeading
      eyebrow={t.developers.eyebrow}
      title={t.developers.title}
      description={t.developers.description}
    />
    <div className={styles.developerGrid}>
      <div className={styles.codePanel}>
        <div className={styles.codeHeader}>
          <span className={styles.codeDot} />
          <span className={styles.codeDot} />
          <span className={styles.codeDot} />
        </div>
        <pre className={styles.codeBlock}>
          <code>{t.developers.code}</code>
        </pre>
      </div>
      <div className={styles.featurePanel}>
        {t.developers.features.map((item) => (
          <div key={item} className={styles.featurePill}>
            {item}
          </div>
        ))}
        <div className={styles.integrationSectionInline}>
          <div className={styles.eyebrow}>{t.developers.integrations.eyebrow}</div>
          <Heading as="h3" className={styles.integrationTitleInline}>
            {t.developers.integrations.title}
          </Heading>
          <div className={styles.integrationWallInline}>
            {t.developers.integrations.items.map((item) => (
              <span key={item} className={styles.integrationChip}>
                {item}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Step 2: Add inline integration CSS classes

.integrationSectionInline {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--home-border);
}

.integrationTitleInline {
  margin: 0.5rem 0 0.8rem;
  color: var(--home-text);
  font-size: 1.1rem;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.integrationWallInline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

Task 8: Rewrite CTA section (add blogButton, remove Insights)

Files:

Modify: src/pages/index.tsx (remove Insights section, update CTA section)
Step 1: Remove Insights section JSX

Delete the entire Insights section block (around lines 1065-1090). This section is no longer rendered.

Step 2: Update CTA section JSX

Replace the CTA section (around lines 1092-1115) with version that includes blogButton:

<section className={styles.finalCtaSection}>
  <div className="container">
    <div className={styles.finalCtaCard}>
      <div>
        <div className={styles.eyebrow}>{t.cta.eyebrow}</div>
        <Heading as="h2" className={styles.finalCtaTitle}>
          {t.cta.title}
        </Heading>
        <p className={styles.finalCtaDescription}>{t.cta.description}</p>
      </div>
      <div className={styles.finalCtaActions}>
        <Link className={clsx(styles.button, styles.buttonPrimary)} to="/docs/intro">
          {t.cta.startButton}
        </Link>
        <Link
          className={clsx(styles.button, styles.buttonSecondary)}
          to="mailto:admin@foldspace.cn?subject=Foldspace%20Enterprise%20Inquiry"
        >
          {t.cta.salesButton}
        </Link>
        <Link className={clsx(styles.button, styles.buttonSecondary)} to="/blog">
          {t.cta.blogButton}
        </Link>
      </div>
    </div>
  </div>
</section>

Task 9: Clean up CSS — remove obsolete classes

Files:

Modify: src/pages/index.module.css
Step 1: Remove obsolete CSS class definitions

Remove the following class groups that are no longer referenced in JSX:

.keywordChip (no longer used — was only in heroKeywordRow which is removed)
.insightGrid (no longer used — Insights section removed)
.insightCard (no longer used)
.blogActions (no longer used)
.audienceGrid, .capabilityGrid (aliased classes removed, only .cardGrid remains)
.themeButton (never used in current JSX)
.heroKeywordRow (removed from JSX)

Note: Keep .integrationChip and .featurePill since they are still used in the merged Developer+Integrations section. Keep .cardTag since used by UseCaseRow, runtimeLayerCards, and ecosystem cards.

Step 2: Clean up responsive breakpoint selectors

In @media (max-width: 996px) block, remove .audienceGrid, .capabilityGrid, .ecosystemGrid, .insightGrid from grid-template-columns selectors.

In @media (max-width: 720px) block, same cleanup.

Task 10: Build and verify

Files:

No file changes — verification only
Step 1: Run build

Run: cd /projects-data/projects/foldspace-stack.github.io && npx docusaurus build 2>&1 | tail -20 Expected: Build succeeds with no errors.

Step 2: Run TypeScript type check

Run: cd /projects-data/projects/foldspace-stack.github.io && npx tsc --noEmit 2>&1 | tail -10 Expected: No type errors.

Step 3: Start dev server for visual verification

Run: cd /projects-data/projects/foldspace-stack.github.io && npx docusaurus start --port 3000 Expected: Dev server starts. Visually verify:

Hero section renders with badge, title, description, buttons, proofCards, SVG (no keyword chips)
Use Cases section renders 4 alternating rows with pipeline steps
Architecture section renders MemoryDiagram + RuntimeDiagram with layer cards
Capabilities section renders 2-col card grid (6 cards)
Ecosystem section renders 4-col grid with linked cards, Core highlighted
Developer section renders code panel + feature pills + integration wall inline
CTA section renders with 3 buttons (Start + Sales + Blog)
Dark/light toggle works
zh/en toggle works
Mobile responsive (check at 720px and 996px widths)

Landing Page Redesign Implementation Plan

Files​

Task 1: Rewrite TypeScript types and copy data in index.tsx​

Task 2: Rewrite Hero section JSX​

Task 3: Add Use Cases section JSX and CSS​

Task 4: Rewrite Architecture section JSX​

Task 5: Rewrite Capabilities section CSS (2-col grid)​

Task 6: Rewrite Ecosystem section (4-col + href links + core highlight)​

Task 7: Merge Developer + Integrations sections​

Task 8: Rewrite CTA section (add blogButton, remove Insights)​

Task 9: Clean up CSS — remove obsolete classes​

Task 10: Build and verify​

Files

Task 1: Rewrite TypeScript types and copy data in index.tsx

Task 2: Rewrite Hero section JSX

Task 3: Add Use Cases section JSX and CSS

Task 4: Rewrite Architecture section JSX

Task 5: Rewrite Capabilities section CSS (2-col grid)

Task 6: Rewrite Ecosystem section (4-col + href links + core highlight)

Task 7: Merge Developer + Integrations sections

Task 8: Rewrite CTA section (add blogButton, remove Insights)

Task 9: Clean up CSS — remove obsolete classes

Task 10: Build and verify