99 lines
4.2 KiB
TypeScript
99 lines
4.2 KiB
TypeScript
"use client";
|
||
import { Sparkles, Cable, BrainCircuit, Lock } from "lucide-react";
|
||
import { useLang } from "@/lib/language";
|
||
|
||
const icons = [Sparkles, Cable, BrainCircuit, Lock];
|
||
|
||
const t = {
|
||
zh: {
|
||
badge: "核心能力",
|
||
h2: "四个核心能力",
|
||
subtitle: "从想法到上线，每一环都有对应能力支撑",
|
||
features: [
|
||
{
|
||
title: "想法转开发任务",
|
||
description: "用自然语言描述产品目标，Heicode 生成需求摘要、功能清单、任务计划和需要的资源建议。不需要先写完整 PRD。",
|
||
},
|
||
{
|
||
title: "资源绑定与权限分配",
|
||
description: "接入 Git 仓库、云账号、SK 工具包和项目文档。Heicode 按角色生成 Resource Grant，Agnet 只能访问任务对应的资源。",
|
||
},
|
||
{
|
||
title: "子 Agnet 编排与执行",
|
||
description: "平台推荐子 Agnet 角色（产品、架构、前端、后端、测试、运维），在需求→开发→测试→修复→部署闭环中持续推进，可调用 SK 工具。",
|
||
},
|
||
{
|
||
title: "安全、用量与审计闭环",
|
||
description: "长期密钥进密钥保管器，Agnet 只拿短期凭证。高危操作需客户端审批。模型用量、余额和所有操作记录统一可查。",
|
||
},
|
||
],
|
||
},
|
||
en: {
|
||
badge: "Core Capabilities",
|
||
h2: "Four core capabilities",
|
||
subtitle: "Every step from idea to launch has a corresponding capability",
|
||
features: [
|
||
{
|
||
title: "Idea to dev task",
|
||
description: "Describe your product goal in natural language. Heicode generates a requirements summary, feature list, task plan and resource recommendations. No full PRD needed upfront.",
|
||
},
|
||
{
|
||
title: "Resource binding & permission scoping",
|
||
description: "Connect Git repos, cloud accounts, SK toolkits and project docs. Heicode generates Resource Grants per role — Agnets can only access resources for their assigned task.",
|
||
},
|
||
{
|
||
title: "Sub-Agnet orchestration & execution",
|
||
description: "Platform recommends sub-Agnet roles (product, architecture, frontend, backend, test, ops) and drives the plan→dev→test→fix→deploy loop, calling SK tools as needed.",
|
||
},
|
||
{
|
||
title: "Security, usage & audit loop",
|
||
description: "Long-term secrets go into the secret vault; Agnets only get short-term credentials. High-risk operations require client approval. Model usage, balance and all operation logs are unified and queryable.",
|
||
},
|
||
],
|
||
},
|
||
};
|
||
|
||
export function Features() {
|
||
const { lang } = useLang();
|
||
const tx = t[lang];
|
||
|
||
return (
|
||
<section id="features" className="border-y border-border bg-card/30 py-20 sm:py-32">
|
||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<div className="mx-auto max-w-2xl text-center">
|
||
<p className="text-sm font-medium tracking-widest text-accent uppercase">
|
||
{tx.badge}
|
||
</p>
|
||
<h2 className="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">{tx.h2}</h2>
|
||
<p className="mt-4 text-muted-foreground">{tx.subtitle}</p>
|
||
</div>
|
||
|
||
<div className="mt-16 grid gap-6 sm:grid-cols-2 lg:gap-8">
|
||
{tx.features.map((feature, index) => {
|
||
const Icon = icons[index];
|
||
return (
|
||
<div
|
||
key={feature.title}
|
||
className="relative flex gap-6 rounded-xl border border-border bg-background p-6 sm:p-8"
|
||
>
|
||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent/10 text-accent">
|
||
<Icon className="h-5 w-5" />
|
||
</div>
|
||
<div>
|
||
<h3 className="text-lg font-semibold">{feature.title}</h3>
|
||
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
||
{feature.description}
|
||
</p>
|
||
</div>
|
||
<span className="absolute top-4 right-4 text-6xl font-bold text-secondary/50">
|
||
{String(index + 1).padStart(2, "0")}
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|