{
  "id": "about",
  "type": "pages",
  "status": "published",
  "name": {
    "zh": "关于页",
    "en": "About Page"
  },
  "aliases": [
    "关于页",
    "关于我们",
    "公司介绍页",
    "团队介绍页",
    "我们是谁",
    "品牌故事页",
    "关于我们页面"
  ],
  "category": [
    "Page",
    "Brand"
  ],
  "description": {
    "zh": "向访客解释「我们是谁、为什么做这件事」的品牌页面：开头用一句使命宣言定调，中段以创始故事、发展历程或团队照片建立信任，再用价值观与关键数据支撑，结尾导向联系、招聘或产品。",
    "en": "A brand page explaining who you are: a mission statement sets the tone, then story and milestones build trust, and the end points to contact or careers."
  },
  "use_when": [
    {
      "zh": "访客在决策前想了解团队与背景",
      "en": "Visitors want to know the team and background before deciding"
    },
    {
      "zh": "品牌需要传达使命与价值观",
      "en": "The brand needs to communicate mission and values"
    },
    {
      "zh": "招聘、融资或合作需要可信的自我介绍",
      "en": "Hiring, funding or partnerships need a credible introduction"
    }
  ],
  "avoid_when": [
    {
      "zh": "用户只关心功能与价格（用落地页或定价页更合适）",
      "en": "Users only care about features and price — use a landing or pricing page"
    },
    {
      "zh": "团队或公司信息尚未确定",
      "en": "Team or company details are not settled yet"
    },
    {
      "zh": "需要承载复杂操作流程",
      "en": "The page must carry complex task flows"
    }
  ],
  "tags": [
    "brand",
    "company",
    "trust",
    "storytelling"
  ],
  "variants": [
    {
      "id": "story",
      "name": {
        "zh": "品牌故事",
        "en": "Brand Story"
      },
      "note": {
        "zh": "以创始人叙事为主线，情绪与图片占主导",
        "en": "A founder-led narrative where emotion and imagery lead"
      }
    },
    {
      "id": "team",
      "name": {
        "zh": "团队展示",
        "en": "Team Grid"
      },
      "note": {
        "zh": "头像网格 + 职位与简介，强调人",
        "en": "Avatar grid with roles and short bios, putting people first"
      }
    },
    {
      "id": "timeline",
      "name": {
        "zh": "历程时间线",
        "en": "Timeline"
      },
      "note": {
        "zh": "以时间线串起里程碑与关键数据",
        "en": "A timeline strings milestones and key numbers together"
      }
    }
  ],
  "anatomy": [
    "Header 顶栏",
    "Hero 使命宣言",
    "Story 故事历程",
    "Team 团队成员",
    "Values 价值观",
    "CTA 行动区"
  ],
  "related": [
    {
      "id": "avatar",
      "relation": "contains"
    },
    {
      "id": "timeline",
      "relation": "contains"
    },
    {
      "id": "card",
      "relation": "contains"
    },
    {
      "id": "scroll-reveal",
      "relation": "used_with"
    },
    {
      "id": "contact",
      "relation": "similar_to"
    }
  ],
  "structure": [
    {
      "part": {
        "zh": "顶栏",
        "en": "Header"
      },
      "note": {
        "zh": "站点导航与主 CTA，与全站保持一致。",
        "en": "Site nav and primary CTA, consistent with the rest of the site."
      }
    },
    {
      "part": {
        "zh": "使命宣言",
        "en": "Mission"
      },
      "note": {
        "zh": "一句加大的主张配一张品牌照片，先回答「我们为何存在」。",
        "en": "One oversized statement beside a brand image answers why you exist."
      }
    },
    {
      "part": {
        "zh": "故事历程",
        "en": "Story"
      },
      "note": {
        "zh": "创始故事或时间线，用具体事件与年份建立可信度。",
        "en": "The origin story or timeline builds credibility with concrete events and years."
      }
    },
    {
      "part": {
        "zh": "团队成员",
        "en": "Team"
      },
      "note": {
        "zh": "头像、姓名与职位网格，规模小则给每人一句简介。",
        "en": "A grid of avatars, names and roles, with one line each for small teams."
      }
    },
    {
      "part": {
        "zh": "价值观",
        "en": "Values"
      },
      "note": {
        "zh": "三到四条原则，每条一句解释，避免空泛口号。",
        "en": "Three or four principles, each with one line of explanation, not slogans."
      }
    },
    {
      "part": {
        "zh": "行动区",
        "en": "CTA"
      },
      "note": {
        "zh": "导向联系、招聘或产品体验，给读者下一步。",
        "en": "Points to contact, careers or the product, giving readers a next step."
      }
    }
  ],
  "demo": {
    "component": "about",
    "modes": [
      "default",
      "dark",
      "variants"
    ]
  },
  "implementation": {
    "css": [
      "flex",
      "grid",
      "grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))",
      "gap",
      "object-fit: cover"
    ],
    "notes": {
      "zh": "分区纵向堆叠，团队与价值观用 auto-fit 网格；头像统一正方形并 object-fit: cover，避免拉伸。长页在分区进入时做轻微淡入，需尊重 prefers-reduced-motion；文字与图片的对比度要达 WCAG AA。",
      "en": "Stack sections vertically; lay the team and values out with an auto-fit grid; keep avatars square and object-fit: cover so they never stretch. Fade sections in as they enter, respecting prefers-reduced-motion, and keep text-on-image contrast at WCAG AA."
    }
  },
  "sources": [
    {
      "name": "Nielsen Norman Group — Articles",
      "url": "https://www.nngroup.com/articles/"
    },
    {
      "name": "Apple Human Interface Guidelines",
      "url": "https://developer.apple.com/design/human-interface-guidelines/"
    }
  ],
  "prompts": {
    "basic": {
      "zh": "创建一个关于页，包含使命宣言、团队介绍和价值观。",
      "en": "Create an about page with a mission statement, team section and values."
    },
    "design": {
      "zh": "设计品牌关于页：顶部大标题使命宣言 + 品牌图；中段时间线串起里程碑；团队区四列头像卡，每张含姓名与职位；价值观三列图标 + 短句；结尾 CTA 横幅指向联系我们与加入我们。深浅色一致，进场轻微淡入。",
      "en": "Design a brand about page: a large mission headline with a brand image; a timeline of milestones; a four-column team grid with name and role cards; a three-column values row with short lines; a closing CTA banner to contact and careers. Theme-consistent with subtle fade-ins."
    },
    "implementation": {
      "zh": "用 React + Tailwind 实现关于页：语义化 section，团队与价值观用 grid auto-fit；头像固定比例并 object-fit: cover；时间线用有序列表表达先后；进场动画用 IntersectionObserver 并尊重 prefers-reduced-motion；不新增依赖。",
      "en": "React + Tailwind about page: semantic sections; team and values on an auto-fit grid; avatars with a fixed ratio and object-fit: cover; the timeline as an ordered list; entry animation via IntersectionObserver respecting prefers-reduced-motion; no new dependencies."
    },
    "agent": {
      "zh": "在当前项目中实现关于页。\n\n先检查现有布局壳、卡片与头像组件，优先复用。\n要求：\n- 使命宣言 + 故事/时间线 + 团队 + 价值观 + CTA\n- 团队与价值观用自适应网格，头像不变形\n- 时间线语义化为有序列表\n- 图片有 alt，文字对比度达 AA\n- 尊重 prefers-reduced-motion，不新增依赖\n完成后运行现有检查，说明修改文件。",
      "en": "Implement the about page in the current project.\n\nInspect the existing layout shell, card and avatar components first; reuse them.\nRequirements:\n- Mission + story/timeline + team + values + CTA\n- Team and values on an adaptive grid; avatars never distort\n- Timeline marked up as an ordered list\n- Images carry alt text; text meets AA contrast\n- Respect prefers-reduced-motion; no new dependencies\nRun existing checks when done and list modified files."
    }
  }
}