Files
heicode/website/components/problem.tsx
T

77 lines
3.3 KiB
TypeScript

"use client";
import { useLang } from "@/lib/language";
const t = {
zh: {
badge: "现实问题",
h2a: "AI 已经会写代码,",
h2b: "但软件交付仍然很难",
problems: [
"想法和代码之间缺少可执行路径,需求、设计、实现分散在不同工具里。",
"AI 工具通常无法安全使用真实的 Git 仓库、云资源和密钥。",
"多个 Agent 协作缺少角色定义、权限分配、状态追踪和审计。",
"模型用量、余额和日志分散在后台系统,难以统一管控。",
"部署和后续维护没有统一生命周期闭环,交付后即断链。",
],
answerLabel: "Heicode 的答案:",
answerBody: "把想法、资源、AI 团队、权限、执行和审计整合到一个完整的生命周期平台里。用户只需登录 Heicode,输入想法,剩下的由 AI 开发团队完成。",
},
en: {
badge: "The Problem",
h2a: "AI can write code,",
h2b: "but shipping software is still hard",
problems: [
"There is no executable path between an idea and code — requirements, design and implementation are scattered across different tools.",
"AI tools typically cannot safely access real Git repos, cloud resources or secrets.",
"Multi-agent collaboration lacks role definitions, permission scoping, state tracking and audit.",
"Model usage, balance and logs are scattered across back-end systems with no unified control.",
"Deployment and ongoing maintenance have no unified lifecycle loop — the chain breaks after delivery.",
],
answerLabel: "Heicode's answer: ",
answerBody: "Unify ideas, resources, AI team, permissions, execution and audit into one complete lifecycle platform. Users only need to log in to Heicode, input an idea, and the AI dev team handles the rest.",
},
};
export function Problem() {
const { lang } = useLang();
const tx = t[lang];
return (
<section className="border-t border-border 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-3xl">
<p className="text-sm font-medium uppercase tracking-widest text-accent">
{tx.badge}
</p>
<h2 className="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">
{tx.h2a}
<br />
<span className="text-muted-foreground">{tx.h2b}</span>
</h2>
<div className="mt-12 space-y-4">
{tx.problems.map((problem, i) => (
<div
key={i}
className="flex items-start gap-4 rounded-xl border border-border bg-card/30 p-5"
>
<span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-destructive/10 font-mono text-xs font-bold text-destructive">
✕
</span>
<p className="text-sm leading-relaxed text-muted-foreground">{problem}</p>
</div>
))}
</div>
<div className="mt-10 rounded-xl border border-accent/30 bg-accent/5 p-6">
<p className="text-sm leading-relaxed text-muted-foreground">
<span className="font-medium text-foreground">{tx.answerLabel}</span>
{tx.answerBody}
</p>
</div>
</div>
</div>
</section>
);
}