Skip to content

feat(web): refresh cafekit landing copy #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hapo-nghialuu wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

feat(web): refresh cafekit landing copy #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cbdc2f1
feat(web): refresh cafekit landing copy
hapo-nghialuu Jun 4, 2026
5ec7d20
feat(web): refine vietnamese landing copy
hapo-nghialuu Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions cafekit-web/src/components/landing/artifact-preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,62 +7,62 @@ import { localizeHref } from "@/lib/locale-utils";

const copy = {
en: {
heading: "See the artifacts, not just the commands",
heading: "Real Artifacts after every step",
subheading:
"A new user trusts CafeKit faster when they can picture the files and receipts it leaves behind.",
"CafeKit leaves files, registries, and receipts so reviewers can see which tasks are ready and which still lack evidence.",
cta: "Open documentation",
items: [
{
title: "spec.json",
description: "Registry-backed state, validation status, and implementation readiness in one place.",
description: "Machine state for phase, validation status, task registry, and readiness gate.",
},
{
title: "task-R*.md",
description: "Task packets with objective, completion criteria, and exact verification commands.",
description: "Task packets with objective, scope boundary, completion criteria, and Evidence commands.",
},
{
title: "review + test verdict",
description: "Structured signals that explain whether work is actually ready to merge and ship.",
description: "Structured verdicts that show whether code is ready for merge, Git handoff, or release.",
},
],
},
vi: {
heading: "Hãy nhìn artifact thật, không chỉ nhìn command",
heading: "Kết quả thật sau mỗi bước",
subheading:
"Người mới tin CafeKit nhanh hơn khi họ hình dung được file và receipt mà runtime để lại.",
"CafeKit để lại file, sổ tác vụ và biên nhận để reviewer biết tác vụ nào đã sẵn sàng, tác vụ nào còn thiếu bằng chứng.",
cta: "Mở tài liệu",
items: [
{
title: "spec.json",
description: "State có registry, validation status và implementation readiness trong một chỗ.",
description: "Trạng thái máy đọc được cho giai đoạn, trạng thái kiểm tra, sổ tác vụ và cổng sẵn sàng.",
},
{
title: "task-R*.md",
description: "Task packet có objective, completion criteria và exact verification commands.",
description: "Gói tác vụ có mục tiêu, ranh giới phạm vi, tiêu chí hoàn thành và lệnh bằng chứng.",
},
{
title: "review + test verdict",
description: "Structured signals cho biết code đã thật sự sẵn sàng để merge và ship hay chưa.",
description: "Kết luận có cấu trúc cho biết code đã đủ điều kiện hợp nhất, bàn giao Git hoặc bàn giao release chưa.",
},
],
},
ja: {
heading: "command だけでなく artifact も見せる",
heading: "各ステップ後に残る real Artifacts",
subheading:
"新規ユーザーは、runtime が残す file と receipt を見たときに CafeKit をより早く信頼します。",
"CafeKit は files、registry、receipt を残し、reviewer が ready な task と evidence 不足の task を判断できるようにします。",
cta: "ドキュメントを見る",
items: [
{
title: "spec.json",
description: "registry-backed state、validation status、implementation readiness をまとめて保持します。",
description: "phase、validation status、task registry、readiness gate の machine state。",
},
{
title: "task-R*.md",
description: "objective、completion criteria、exact verification commands を持つ task packet。",
description: "objective、scope boundary、completion criteria、Evidence commands を持つ task packet。",
},
{
title: "review + test verdict",
description: "merge や ship の準備ができているかを示す structured signal。",
description: "merge、Git handoff、release の準備ができているかを示す structured verdict。",
},
],
},
Expand Down
4 changes: 2 additions & 2 deletions cafekit-web/src/components/landing/features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,10 @@ export function Features() {

<div className="rounded-2xl border border-[#006242]/16 bg-white/84 px-4 py-3 shadow-sm dark:border-[#A7C5EE]/12 dark:bg-[#101820]/58">
<div className="text-xs uppercase tracking-[0.18em] text-[#456055] dark:text-[#8EACD0]">
Active Loop
{t.activeLoopLabel}
</div>
<div className="mt-1 text-sm font-semibold text-[#101820] dark:text-[#F6FAF7]">
install → specs → develop → test → review → git → deploy
{t.activeLoopValue}
</div>
</div>
</div>
Expand Down
19 changes: 7 additions & 12 deletions cafekit-web/src/components/landing/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,6 @@ export function Hero() {
const t = getLandingTranslations(locale).hero;
const [copied, setCopied] = useState(false);
const installCommand = "npx @haposoft/cafekit";
const runtimeStats = [
{ label: "Spec gates", value: "validate first" },
{ label: "Task state", value: "registry-backed" },
{ label: "Docs", value: "checkpoint per task" },
] as const;

const handleCopy = async () => {
try {
Expand Down Expand Up @@ -59,9 +54,9 @@ export function Hero() {
</div>

<h1 className="mb-6 text-5xl font-bold tracking-tight text-[#101820] dark:text-[#F6FAF7] sm:text-6xl md:text-7xl">
Claude Code-first
{t.headingLead}
<span className="mt-2 block bg-gradient-to-r from-[#F2EA9D] via-[#006242] to-[#A7C5EE] bg-clip-text text-transparent dark:from-[#F2EA9D] dark:via-[#F6FAF7] dark:to-[#A7C5EE]">
CafeKit runtime
{t.headingAccent}
</span>
</h1>

Expand All @@ -72,7 +67,7 @@ export function Hero() {
<div className="mb-8 flex flex-wrap items-center gap-3">
<span className="inline-flex items-center gap-1.5 rounded-full bg-[#A7C5EE]/40 px-3 py-1 text-xs font-medium text-[#101820] dark:bg-[#A7C5EE]/18 dark:text-[#DDE9F9]">
<Sparkles className="h-3 w-3" />
Claude Code available now
{t.availability}
</span>
</div>

Expand Down Expand Up @@ -112,16 +107,16 @@ export function Hero() {
</div>

<div className="mt-8 grid w-full max-w-2xl gap-3 sm:grid-cols-3">
{runtimeStats.map((item) => (
{t.runtimeStats.map((item) => (
<div
key={item.label}
key={item.title}
className="rounded-2xl border border-[#101820]/8 bg-white/76 px-4 py-3 shadow-[0_14px_36px_-24px_rgba(16,24,32,0.28)] backdrop-blur dark:border-[#A7C5EE]/12 dark:bg-[#101820]/44"
>
<div className="text-xs uppercase tracking-[0.16em] text-[#456055] dark:text-[#8EACD0]">
{item.label}
{item.title}
</div>
<div className="mt-1 text-sm font-semibold text-[#101820] dark:text-[#F6FAF7]">
{item.value}
{item.description}
</div>
</div>
))}
Expand Down
48 changes: 39 additions & 9 deletions cafekit-web/src/components/landing/interactive-runtime-terminal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import { RotateCcw } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useLocale } from "@/hooks/use-locale";
import { cn } from "@/lib/utils";

type TerminalLine = {
Expand Down Expand Up @@ -58,6 +59,33 @@ const steps: TerminalStep[] = [
},
];

const terminalCopy = {
en: {
replay: "Replay",
labels: ["Install", "Create spec", "Validate", "Develop", "Test"],
activeLoop: "Active Loop",
activeLoopValue: "specs -> develop -> test",
taskPacket: "Task Packet",
taskName: "R0-02 auth setup",
},
vi: {
replay: "Chạy lại",
labels: ["Cài đặt", "Tạo đặc tả", "Kiểm tra", "Triển khai", "Kiểm thử"],
activeLoop: "Vòng chạy",
activeLoopValue: "đặc tả -> triển khai -> kiểm thử",
taskPacket: "Gói tác vụ",
taskName: "R0-02 thiết lập xác thực",
},
ja: {
replay: "Replay",
labels: ["Install", "Create spec", "Validate", "Develop", "Test"],
activeLoop: "Active Loop",
activeLoopValue: "specs -> develop -> test",
taskPacket: "Task Packet",
taskName: "R0-02 auth setup",
},
} as const;

function lineClasses(kind: TerminalLine["kind"]) {
if (kind === "command") return "font-semibold text-[#F2EA9D]";
if (kind === "success") return "text-[#6FD4A2]";
Expand All @@ -66,7 +94,9 @@ function lineClasses(kind: TerminalLine["kind"]) {
}

export function InteractiveRuntimeTerminal() {
const [runToken, setRunToken] = useState(0);
const locale = useLocale();
const t = terminalCopy[locale] ?? terminalCopy.en;
const [replayCycle, setReplayCycle] = useState(0);
const [activeStep, setActiveStep] = useState(0);
const [completedStep, setCompletedStep] = useState(-1);
const [visibleLines, setVisibleLines] = useState<TerminalLine[]>([]);
Expand Down Expand Up @@ -147,7 +177,7 @@ export function InteractiveRuntimeTerminal() {
timersRef.current.forEach((timer) => window.clearTimeout(timer));
timersRef.current = [];
};
}, [runToken]);
}, [replayCycle]);

const renderedLines = typingLine
? [
Expand Down Expand Up @@ -176,11 +206,11 @@ export function InteractiveRuntimeTerminal() {
<span className="font-mono text-sm text-[#A7C5EE]">~ /cafekit-runtime</span>
<button
type="button"
onClick={() => setRunToken((current) => current + 1)}
onClick={() => setReplayCycle((current) => current + 1)}
className="inline-flex items-center gap-1 rounded-lg border border-[#A7C5EE]/14 bg-[#13262A] px-2.5 py-1.5 text-xs font-medium text-[#A7C5EE] transition hover:border-[#A7C5EE]/28 hover:bg-[#173038]"
>
<RotateCcw className="h-3.5 w-3.5" />
Replay
{t.replay}
</button>
</div>

Expand All @@ -198,7 +228,7 @@ export function InteractiveRuntimeTerminal() {
: "border-[#A7C5EE]/12 bg-[#13262A] text-[#8EACD0] hover:border-[#A7C5EE]/24 hover:text-[#DDE9F9]",
)}
>
{step.label}
{t.labels[index] ?? step.label}
</div>
))}
</div>
Expand All @@ -224,13 +254,13 @@ export function InteractiveRuntimeTerminal() {
</div>

<div className="absolute right-2 top-1 rounded-2xl border border-[#A7C5EE]/18 bg-[#0E1A21]/92 px-4 py-3 shadow-[0_20px_50px_-24px_rgba(16,24,32,0.6)] backdrop-blur">
<div className="text-[11px] uppercase tracking-[0.18em] text-[#8EACD0]">Active Loop</div>
<div className="mt-1 text-sm font-semibold text-[#F6FAF7]">specs → develop → test</div>
<div className="text-[11px] uppercase tracking-[0.18em] text-[#8EACD0]">{t.activeLoop}</div>
<div className="mt-1 text-sm font-semibold text-[#F6FAF7]">{t.activeLoopValue}</div>
</div>

<div className="absolute bottom-3 left-2 rounded-2xl border border-[#F2EA9D]/22 bg-[#13262A]/90 px-4 py-3 shadow-[0_20px_50px_-24px_rgba(16,24,32,0.56)] backdrop-blur">
<div className="text-[11px] uppercase tracking-[0.18em] text-[#F2EA9D]">Task Packet</div>
<div className="mt-1 text-sm font-semibold text-[#F6FAF7]">R0-02 auth setup</div>
<div className="text-[11px] uppercase tracking-[0.18em] text-[#F2EA9D]">{t.taskPacket}</div>
<div className="mt-1 text-sm font-semibold text-[#F6FAF7]">{t.taskName}</div>
<div className="mt-2 h-1.5 w-28 overflow-hidden rounded-full bg-white/8">
<div className="h-full w-4/5 rounded-full bg-[#6FD4A2]" />
</div>
Expand Down
60 changes: 30 additions & 30 deletions cafekit-web/src/components/landing/outcome-comparison.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,60 +5,60 @@ import { useLocale } from "@/hooks/use-locale";

const copy = {
en: {
heading: "Why this feels different",
heading: "Differentiators",
subheading:
"CafeKit is most compelling when people can see the difference between ad-hoc prompting and a runtime with state.",
"CafeKit does not try to make agents smarter with longer prompts. It puts them inside a runtime with state, artifacts, and gates so progress cannot fake green.",
before: "Without CafeKit",
after: "With CafeKit",
beforeItems: [
"Long prompts that need to be re-explained every session",
"Specs drift away from implementation after the first coding pass",
"Tasks look done in markdown even when builds or tests are still red",
"Docs updates happen late, inconsistently, or never",
"Every session needs the same context, scope, and approach explained again",
"Specs can drift away from implementation after the first coding pass",
"Tasks can be marked done while build, test, or runtime proof is still missing",
"Docs are often pushed to the end, partially updated, or skipped",
],
afterItems: [
"Specs become runtime artifacts with validation and task boundaries",
"Implementation moves through one verified task packet at a time",
"Quality gates block fake progress before state is synced",
"Docs checkpoints happen incrementally instead of as a last-minute scramble",
"Specs become artifacts with validation, task registry, and readiness gates",
"Implementation moves through task packets with completion criteria and Evidence",
"Quality gates block fake progress before state is synced to done",
"Docs checkpoints run after verified tasks instead of piling up at release time",
],
},
vi: {
heading: "Điểm khác biệt thật sự",
heading: "Điểm khác biệt",
subheading:
"CafeKit thuyết phục nhất khi người dùng nhìn ra sự khác nhau giữa prompt rời rạc và một runtime có state.",
"CafeKit không cố làm AI thông minh hơn bằng prompt dài. Nó đặt AI vào quy trình có trạng thái, kết quả và cổng kiểm chứng để tiến độ không thể giả xanh.",
before: "Không có CafeKit",
after: "Có CafeKit",
beforeItems: [
"Prompt dài và phải giải thích lại mỗi session",
"Spec lệch khỏi implementation sau lượt code đầu tiên",
"Task nhìn như xong trong markdown dù build hoặc test vẫn đỏ",
"Docs bị dồn cuối, cập nhật thiếu hoặc không có",
"Mỗi phiên làm việc phải giải thích lại ngữ cảnh, phạm vi và cách làm",
"Đặc tả dễ lệch khỏi phần triển khai sau lượt code đầu tiên",
"Tác vụ có thể bị đánh dấu xong dù build, kiểm thử hoặc bằng chứng chạy thực tế vẫn thiếu",
"Tài liệu thường bị dồn cuối, cập nhật thiếu hoặc bỏ qua",
],
afterItems: [
"Spec trở thành runtime artifact có validate và task boundary",
"Implementation đi theo từng verified task packet",
"Quality gate chặn fake progress trước khi sync state",
"Docs checkpoint chạy tăng dần thay vì dồn cuối",
"Đặc tả trở thành kết quả có kiểm tra, sổ tác vụ và cổng sẵn sàng",
"Triển khai đi theo từng gói tác vụ có tiêu chí hoàn thành và bằng chứng",
"Cổng chất lượng chặn tiến độ giả trước khi đồng bộ trạng thái sang hoàn tất",
"Điểm kiểm tra tài liệu chạy theo tác vụ đã kiểm chứng thay vì dồn vào cuối release",
],
},
ja: {
heading: "何が本当に違うのか",
heading: "差別化ポイント",
subheading:
"CafeKit の魅力は、ad-hoc prompt と stateful runtime の差が一目で分かることです。",
"CafeKit は長い prompt で agent を賢く見せるのではなく、state、artifacts、gates を持つ runtime に agent を置き、見せかけの進捗を防ぎます。",
before: "CafeKit なし",
after: "CafeKit あり",
beforeItems: [
"毎回説明し直す長い prompt に頼る",
"最初の実装後に spec と code がずれていく",
"markdown では done に見えても build や test は赤いまま",
"docs 更新が後回しになりがち",
"毎回の session で context、scope、進め方を説明し直す必要がある",
"最初の coding pass 後に spec と implementation がずれやすい",
"build、test、runtime proof が不足していても task が done に見える",
"docs が最後に回され、部分更新または未更新になりやすい",
],
afterItems: [
"spec が validation と task boundary を持つ runtime artifact になる",
"verified task packet 単位で実装が進む",
"quality gate が fake progress を止めてから state を sync する",
"docs checkpoint が段階的に実行される",
"spec が validation、task registry、readiness gate を持つ artifact になる",
"completion criteria と Evidence を持つ task packet 単位で実装が進む",
"quality gate が fake progress を止めてから state を done に sync する",
"docs checkpoint は release 直前ではなく verified task ごとに実行される",
],
},
} as const;
Expand Down
Loading