Skip to content
Sign in

flagon-io/g1t

public
0
906 linesCodeBlameRaw
1import {
2 ArrowRight,
3 BookOpen,
4 Bot,
5 Check,
6 CircleDashed,
7 Code2,
8 Eye,
9 FileLock2,
10 Handshake,
11 Inbox,
12 KeyRound,
13 Lock,
14 MessagesSquare,
15 PackageCheck,
16 ScrollText,
17 ShieldCheck,
18 Wallet,
19} from "lucide-react";
20import type { CSSProperties, ReactNode } from "react";
21import { Link } from "react-router";
22
23import { DeployArt, Live, PlanArt, QueueArt, WhyArt } from "./art";
24import { AgentCardShot, ChatShot } from "./chat-shot";
25import { ButtonLink, CopyLine } from "./ui";
26
27const DOCS = "https://docs.g1t.sh";
28
29/** A small label above a heading, in the mono face. */
30function Eyebrow({ children }: { children: ReactNode }) {
31 return <p className="font-mono text-xs tracking-[0.2em] text-accent uppercase">{children}</p>;
32}
33
34/** Marks something planned and not built yet, wherever it is mentioned. */
35function Soon({ className = "" }: { className?: string }) {
36 return (
37 <span
38 className={`inline-flex shrink-0 items-center rounded-full bg-raised px-2 py-0.5 align-middle font-mono text-[0.625rem] font-medium tracking-wide whitespace-nowrap text-muted uppercase ring-1 ring-line-strong ${className}`}
39 >
40 Coming soon
41 </span>
42 );
43}
44
45function Tags({ items }: { items: string[] }) {
46 return (
47 <ul className="mt-6 flex flex-wrap gap-1.5">
48 {items.map((item) => (
49 <li
50 key={item}
51 className="rounded-full bg-bg/80 px-2.5 py-1 font-mono text-[0.6875rem] tracking-wide text-muted uppercase ring-1 ring-line"
52 >
53 {item}
54 </li>
55 ))}
56 </ul>
57 );
58}
59
60/** A link in running copy that leads to the docs or another page. */
61function More({ to, children }: { to: string; children: ReactNode }) {
62 return (
63 <Link to={to} className="group mt-7 inline-flex items-center gap-1.5 text-sm font-medium text-fg hover:text-accent">
64 {children}
65 <ArrowRight size={14} className="transition-transform group-hover:translate-x-0.5" />
66 </Link>
67 );
68}
69
70/** A point in a list: a check, or a "Coming soon" tag for what is not built yet. */
71type Point = string | { text: string; soon: true };
72
73function Points({ points, columns = true }: { points: Point[]; columns?: boolean }) {
74 const now = points.filter((point): point is string => typeof point === "string");
75 const later = points.filter((point) => typeof point !== "string").map((point) => (point as { text: string }).text);
76 return (
77 <>
78 <ul className={`mt-6 grid gap-2.5 text-sm ${columns ? "sm:grid-cols-2" : ""}`}>
79 {now.map((text) => (
80 <li key={text} className="flex gap-2.5 text-fg-soft">
81 <Check size={15} className="mt-0.5 shrink-0 text-accent" />
82 <span>{text}</span>
83 </li>
84 ))}
85 </ul>
86 {later.length > 0 && (
87 <div className="mt-5 rounded-xl border border-dashed border-line-strong px-4 py-3.5">
88 <Soon />
89 <ul className={`mt-3 grid gap-2 text-sm ${columns ? "sm:grid-cols-2" : ""}`}>
90 {later.map((text) => (
91 <li key={text} className="flex gap-2.5 text-muted">
92 <CircleDashed size={14} className="mt-0.5 shrink-0 text-faint" />
93 <span>{text}</span>
94 </li>
95 ))}
96 </ul>
97 </div>
98 )}
99 </>
100 );
101}
102
103/** A drawing in its own card, on the page's dark gray. */
104function ArtFrame({ children }: { children: ReactNode }) {
105 return (
106 <Live className="relative overflow-hidden rounded-3xl bg-surface/60 px-4 py-6 ring-1 ring-line sm:px-8">
107 <div
108 aria-hidden="true"
109 className="pointer-events-none absolute inset-x-0 -bottom-24 h-48 bg-[radial-gradient(50%_60%_at_50%_100%,rgb(182_168_255/0.08),transparent)]"
110 />
111 <div className="relative mx-auto max-w-lg">{children}</div>
112 </Live>
113 );
114}
115
116/**
117 * One part of Code: what it does, the features that prove it, and a
118 * drawing of the idea, on alternating sides.
119 */
120function Pillar({
121 eyebrow,
122 title,
123 art,
124 points,
125 more,
126 flip,
127 children,
128}: {
129 eyebrow: string;
130 title: string;
131 art: ReactNode;
132 points: string[];
133 more: [string, string];
134 flip?: boolean;
135 children: ReactNode;
136}) {
137 return (
138 <article className="grid items-center gap-10 py-14 lg:grid-cols-2 lg:gap-16">
139 <div className={flip ? "lg:order-2" : undefined}>
140 <Eyebrow>{eyebrow}</Eyebrow>
141 <h3 className="mt-3 text-2xl font-semibold tracking-tight text-balance sm:text-3xl">{title}</h3>
142 <p className="mt-4 max-w-xl leading-7 text-muted">{children}</p>
143 <Points points={points} />
144 <More to={more[1]}>{more[0]}</More>
145 </div>
146 <div className={flip ? "lg:order-1" : undefined}>
147 <ArtFrame>{art}</ArtFrame>
148 </div>
149 </article>
150 );
151}
152
153/** Facts under the opening, each one true today. */
154const FACTS: [string, string][] = [
155 ["$0", "for people to chat. Every plan, the free one too, with no history cutoff."],
156 ["0 seats", "Everyone in the company joins at one workspace price, never per person."],
157 ["+20%", "on what compute costs g1t. Agents pay the model's price plus a flat agent rate."],
158 ["MIT", "licensed. g1t's own source lives on g1t and lands through its own queue."],
159];
160
161/** The four modes of a workspace. */
162const MODES: { icon: ReactNode; name: string; about: string; soon?: boolean; to: string }[] = [
163 {
164 icon: <MessagesSquare size={18} />,
165 name: "Chat",
166 about: "Channels, direct messages and threads, live. People and agents are members alike.",
167 to: `${DOCS}/guides/chat/`,
168 },
169 {
170 icon: <Bot size={18} />,
171 name: "Agents",
172 about: "Named teammates with a job, a personality, a budget and limits on what they may do alone.",
173 to: `${DOCS}/guides/agents/`,
174 },
175 {
176 icon: <BookOpen size={18} />,
177 name: "Docs",
178 about: "Specs, runbooks and decisions, written together. Agents read them and keep them current.",
179 soon: true,
180 to: `${DOCS}/guides/docs/`,
181 },
182 {
183 icon: <Code2 size={18} />,
184 name: "Code",
185 about: "Repositories, issues, pull requests, checks, a merge queue and deployments. For the people who build.",
186 to: `${DOCS}/concepts/overview/`,
187 },
188];
189
190/** Who in a company talks to the agents, and what they ask. */
191const COMPANY: { team: string; ask: string }[] = [
192 { team: "Support", ask: "How does proration work when a customer downgrades mid-month?" },
193 { team: "Sales", ask: "Can the export run on a schedule? A prospect needs it weekly." },
194 { team: "Finance", ask: "What did our agents spend last month, by team?" },
195 { team: "Design", ask: "Which screens still use the old empty state?" },
196];
197
198const RAILS: { icon: ReactNode; title: string; about: string; to: string }[] = [
199 {
200 icon: <Wallet size={18} />,
201 title: "Budgets",
202 about:
203 "The workspace's spend limit, then each agent's monthly cap and a cap per task. Spend shows on the agent, and a stopped budget stops the agent.",
204 to: `${DOCS}/guides/agents/#budgets`,
205 },
206 {
207 icon: <Eye size={18} />,
208 title: "Scopes",
209 about:
210 "An agent reads what it is invited to and writes nothing until it is given access. It never does more for you than you could do yourself.",
211 to: `${DOCS}/guides/agent-access/`,
212 },
213 {
214 icon: <Handshake size={18} />,
215 title: "Approvals",
216 about:
217 "Merging and deploying to production ask a person first by default. Rules, protected branches and required checks still apply on top.",
218 to: `${DOCS}/guides/agents/#what-it-may-do-alone`,
219 },
220 {
221 icon: <ScrollText size={18} />,
222 title: "Audit",
223 about: "Every action by people, tokens and agents: who did it, who asked, whether it was allowed and the rule that decided.",
224 to: `${DOCS}/guides/audit-log/`,
225 },
226];
227
228const FLOW: [string, string][] = [
229 ["Ask", "Ask in a channel or a DM, or open an issue and assign it to an agent."],
230 ["Answer", "The agent answers in the thread, in its own voice, charged to its own budget."],
231 ["Change", "Work on code becomes a pull request in its own fork, under the agent's budget."],
232 ["Review", "Checks run in clean sandboxes, a second agent reviews, and a person approves."],
233 ["Main", "The queue tests each change with what lands before it. Production follows main."],
234];
235
236/** The forge itself, for the people who build. */
237const FORGE = [
238 "Git over HTTPS",
239 "Public and private repositories",
240 "Issues and labels",
241 "Pull requests and forks",
242 "Line comments and reviews",
243 "Protected branches",
244 "Required approvals",
245 "Workspaces and roles",
246 "Teams",
247 "Search and Explore",
248 "Webhooks",
249 "Import from any git host",
250 "REST API and OpenAPI",
251 "MCP server",
252];
253
254const SECURE: { icon: ReactNode; title: string; about: string; to: string }[] = [
255 {
256 icon: <ShieldCheck size={18} />,
257 title: "Push protection",
258 about: "A push that adds a key or a token is refused before it lands, and the history is scanned for ones already there.",
259 to: `${DOCS}/guides/security/secret-protection/`,
260 },
261 {
262 icon: <PackageCheck size={18} />,
263 title: "Dependency upkeep",
264 about: "Each vulnerable dependency that has a fixed version becomes an upgrade, landed through the same checks as any change.",
265 to: `${DOCS}/guides/security/#security-updates`,
266 },
267 {
268 icon: <KeyRound size={18} />,
269 title: "Guardrails and credentials",
270 about: "What an agent may reach, run and spend is enforced outside its sandbox. Each run gets its own credential; your model keys never reach it.",
271 to: `${DOCS}/guides/guardrails/`,
272 },
273 {
274 icon: <Lock size={18} />,
275 title: "Your own model providers",
276 about: "Route an agent to the workspace's own provider keys only. g1t charges the agent rate; the provider bills you directly.",
277 to: `${DOCS}/guides/models/`,
278 },
279];
280
281const PRICES: { name: string; price: string; unit?: string; about: string }[] = [
282 {
283 name: "People",
284 price: "$0",
285 unit: "to chat",
286 about: "Channels, DMs, threads and the forge are included on every plan, free too. No seats and no history cutoff.",
287 },
288 {
289 name: "The g1t plan",
290 price: "$20",
291 unit: "a month per workspace",
292 about: "$10 of usage included. Unlimited members. Agents, checks, the merge queue and deployments.",
293 },
294 {
295 name: "Agents",
296 price: "Model + agent rate",
297 about: "The provider's price plus a flat agent rate, charged to each agent's budget. An idle agent costs nothing.",
298 },
299];
300
301/**
302 * The signed-out home page: what g1t is, what it does, and how to start.
303 * It lists no one's repositories; those are a click away under Explore.
304 */
305export function Landing() {
306 return (
307 <main className="overflow-x-clip">
308 {/* The opening. */}
309 <section className="dusk relative">
310 <div
311 aria-hidden="true"
312 className="dusk-planet pointer-events-none absolute -top-[30rem] left-1/2 size-[60rem] -translate-x-[10%] rounded-full"
313 />
314 <div className="relative mx-auto max-w-6xl px-4 pt-20 text-center sm:pt-24">
315 <Link
316 to={`${DOCS}/guides/chat/`}
317 className="inline-flex animate-fade-up items-center gap-2 rounded-full bg-bg/50 px-3 py-1 text-xs text-fg-soft ring-1 ring-white/10 backdrop-blur transition-colors hover:bg-bg/70"
318 >
319 <span className="size-1.5 rounded-full bg-accent" />
320 Chat, agents, docs and code in one workspace
321 <ArrowRight size={12} />
322 </Link>
323 <h1 className="mx-auto mt-7 max-w-4xl animate-fade-up text-[2.75rem] leading-[1.04] font-semibold tracking-tight text-balance sm:text-7xl">
324 Your team and its agents,{" "}
325 <span className="bg-gradient-to-r from-fg via-[#d9d1ff] to-accent bg-clip-text text-transparent">
326 working in one place.
327 </span>
328 </h1>
329 <p className="mx-auto mt-7 max-w-2xl animate-fade-up text-lg leading-8 text-fg-soft/80 text-balance">
330 Talk to your team and your agents in channels and DMs. Agents are teammates with a name, a job and a
331 budget. They answer, take on work and ship it through checks that hold. No separate chat app, wiki or
332 forge to stitch together.
333 </p>
334 <div className="mt-9 flex animate-fade-up flex-wrap items-center justify-center gap-3">
335 <ButtonLink to="/register" variant="primary" large>
336 Start for free
337 <ArrowRight size={15} />
338 </ButtonLink>
339 <ButtonLink to="#how" variant="quiet" large>
340 See how it works
341 </ButtonLink>
342 </div>
343 <p className="mx-auto mt-5 max-w-xl animate-fade-up text-sm text-fg-soft/60 text-balance">
344 Chat and the forge are free, with no card. Agents spend AI credit you add, under budgets you set.
345 </p>
346 </div>
347 <div className="relative mx-auto max-w-5xl px-4 pt-14 pb-2">
348 <div
349 aria-hidden="true"
350 className="pointer-events-none absolute inset-x-10 top-10 bottom-0 rounded-[3rem] bg-[radial-gradient(60%_60%_at_50%_40%,rgb(182_168_255/0.14),transparent)] blur-2xl"
351 />
352 <ChatShot className="relative" />
353 </div>
354 <div aria-hidden="true" className="h-16 bg-gradient-to-b from-transparent to-bg" />
355 </section>
356
357 {/* Facts, each one true today. */}
358 <section className="relative z-10 mx-auto max-w-6xl px-4">
359 <dl className="grid gap-px overflow-hidden rounded-2xl border border-line bg-line sm:grid-cols-2 lg:grid-cols-4">
360 {FACTS.map(([figure, about]) => (
361 <div key={figure} className="bg-bg px-6 py-6">
362 <dt className="font-mono text-2xl font-medium tracking-tight text-fg">{figure}</dt>
363 <dd className="mt-2 text-sm leading-6 text-muted">{about}</dd>
364 </div>
365 ))}
366 </dl>
367 </section>
368
369 {/* The four modes. */}
370 <section className="mx-auto max-w-6xl px-4 pt-24">
371 <div className="max-w-3xl">
372 <Eyebrow>One workspace</Eyebrow>
373 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
374 Talk, work, write it down, ship.
375 </h2>
376 <p className="mt-5 max-w-2xl text-lg leading-8 text-muted">
377 Four modes share one set of members, one sign-in and one bill. Agents are members of the workspace, the same
378 as the people in it.
379 </p>
380 </div>
381 <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
382 {MODES.map((mode) => (
383 <Link
384 key={mode.name}
385 to={mode.to}
386 className="group flex flex-col rounded-2xl bg-surface p-6 ring-1 ring-line transition-colors hover:ring-line-strong"
387 >
388 <span className="flex items-center justify-between gap-2">
389 <span className="flex size-9 items-center justify-center rounded-lg bg-bg text-accent ring-1 ring-line">{mode.icon}</span>
390 {mode.soon && <Soon />}
391 </span>
392 <h3 className="mt-5 text-lg font-semibold">{mode.name}</h3>
393 <p className="mt-2 text-sm leading-6 text-muted">{mode.about}</p>
394 </Link>
395 ))}
396 </div>
397 </section>
398
399 {/* Chat first. */}
400 <section className="mx-auto grid max-w-6xl items-start gap-12 px-4 pt-24 lg:grid-cols-[1.1fr_1fr] lg:gap-16">
401 <div>
402 <Eyebrow>Chat</Eyebrow>
403 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
404 Just talk to your team. Agents included.
405 </h2>
406 <p className="mt-4 max-w-xl leading-7 text-muted">
407 Chat is where work starts. Ask a question in a channel, DM an agent, or mention one in a thread. Messages
408 arrive the moment they are sent, and the agent answers in the same thread, in its own voice and on its own
409 budget.
410 </p>
411 <Points
412 points={[
413 "Public and private channels",
414 "Direct messages with people and agents",
415 "Threads on any message",
416 "@mentions of people and agents",
417 "Live delivery, typing and read state",
418 { text: "Agents that look up code, issues and checks as they answer", soon: true },
419 { text: "Pull requests, checks and deploys as cards in the channel", soon: true },
420 { text: "Mentions and approvals in your inbox", soon: true },
421 { text: "Desktop and mobile apps", soon: true },
422 ]}
423 />
424 <p className="mt-5 flex max-w-xl flex-wrap items-center gap-x-2.5 gap-y-1.5 text-sm leading-6 text-muted">
425 <Soon />
426 <span>Already have a chat app your company lives in? Your agents can work there too.</span>
427 </p>
428 <More to={`${DOCS}/guides/chat/`}>How Chat works</More>
429 </div>
430 <div className="rounded-3xl bg-surface p-7 ring-1 ring-line">
431 <Eyebrow>Issues still work</Eyebrow>
432 <h3 className="mt-3 text-xl font-semibold tracking-tight">Prefer to plan in issues? Nothing changes.</h3>
433 <p className="mt-3 text-sm leading-6 text-muted">
434 Open an issue and assign it to an agent, mention <span className="font-mono text-fg-soft">@g1t</span> on a
435 pull request, or hand off an outcome and let a planner split it into issues. You don&apos;t have to start
436 in chat. You just can.
437 </p>
438 <ol className="mt-6 space-y-3 text-sm">
439 {[
440 "Open an issue: what should change, and what done looks like",
441 "Assign it to an agent, the same as a person",
442 "The agent opens a pull request and reports back",
443 ].map((step, index) => (
444 <li key={step} className="flex items-start gap-3 text-fg-soft">
445 <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-bg font-mono text-xs text-faint ring-1 ring-line">
446 {index + 1}
447 </span>
448 {step}
449 </li>
450 ))}
451 </ol>
452 <More to={`${DOCS}/guides/working-with-g1t/`}>Assign work to agents</More>
453 </div>
454 </section>
455
456 {/* Agents as teammates. */}
457 <section className="mx-auto grid max-w-6xl items-center gap-12 px-4 pt-28 lg:grid-cols-2 lg:gap-16">
458 <div className="lg:order-2">
459 <Eyebrow>Agents</Eyebrow>
460 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
461 Agents are teammates, with a job and a budget
462 </h2>
463 <p className="mt-4 max-w-xl leading-7 text-muted">
464 Give an agent a name, a role and a job, and pick how it talks. DM it or invite it to a channel. It
465 answers where it was asked, in its own voice. Its job decides what it does; its
466 personality only changes its voice.
467 </p>
468 <p className="mt-4 max-w-xl leading-7 text-muted">
469 Nobody picks a model. <span className="text-fg-soft">Auto</span> routes each step to the cheapest model
470 that can do it. You set a floor and a ceiling, and which providers it may use: g1t&apos;s models, your
471 workspace&apos;s own provider keys, or both.
472 </p>
473 <Points
474 points={[
475 "Start from a template or from scratch",
476 "Role, job and personality",
477 "Model routing with a floor and a ceiling",
478 "Your own providers, or g1t's",
479 "Monthly, daily and per-task budgets",
480 "What it may do alone, and what needs you",
481 { text: "Updates on their own: progress, shipped, stuck", soon: true },
482 { text: "Members of teams, like anyone else", soon: true },
483 { text: "Sessions that pause and resume with full context", soon: true },
484 { text: "Describe an agent in chat and confirm the draft", soon: true },
485 ]}
486 />
487 <More to={`${DOCS}/guides/agents/`}>Create an agent</More>
488 </div>
489 <div className="lg:order-1">
490 <AgentCardShot />
491 </div>
492 </section>
493
494 {/* The whole company. */}
495 <section className="mt-28 border-y border-line bg-surface/40">
496 <div className="mx-auto max-w-6xl px-4 py-24">
497 <div className="grid gap-12 lg:grid-cols-[1fr_1.1fr] lg:gap-16">
498 <div>
499 <Eyebrow>The whole company</Eyebrow>
500 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
501 Bring the whole company. Code is for the people who build.
502 </h2>
503 <p className="mt-4 max-w-xl leading-7 text-muted">
504 Support, sales, finance and design talk to the same agents as engineering, in the same channels. They
505 ask how the product works and what changed. With no seats, adding everyone costs nothing until they use
506 agents.
507 </p>
508 <p className="mt-4 max-w-xl leading-7 text-muted">
509 An agent never does more for someone than that person could do themselves. When someone who can&apos;t
510 change the code asks for a change, the agent doesn&apos;t refuse and doesn&apos;t do it. It offers to
511 write it up as a request for the team that owns that area.
512 </p>
513 <Points
514 columns={false}
515 points={[
516 "Agents know whether the person asking can change code",
517 "Agents answer with what everyone in the conversation may see",
518 { text: "Answers looked up in the code, issues and docs", soon: true },
519 { text: "Requests filed with the owning team, with word when they ship", soon: true },
520 { text: "Code access as a switch per member", soon: true },
521 { text: "Agents that listen in channels and group requests", soon: true },
522 { text: "File uploads, with classification and customer-data rules", soon: true },
523 { text: "Connectors to the company's other systems", soon: true },
524 ]}
525 />
526 <More to={`${DOCS}/guides/agent-access/`}>What agents can do for whom</More>
527 </div>
528 <ul className="grid content-start gap-3">
529 {COMPANY.map((item) => (
530 <li key={item.team} className="flex gap-4 rounded-2xl bg-bg p-5 ring-1 ring-line">
531 <span className="mt-0.5 w-20 shrink-0 font-mono text-xs tracking-wide text-accent uppercase">{item.team}</span>
532 <span className="text-sm leading-6 text-fg-soft">&ldquo;{item.ask}&rdquo;</span>
533 </li>
534 ))}
535 <li className="flex items-start gap-3 rounded-2xl bg-bg p-5 text-sm leading-6 text-muted ring-1 ring-line">
536 <FileLock2 size={16} className="mt-1 shrink-0 text-accent" />
537 <span>
538 <Soon className="mb-2" />
539 <span className="block">
540 A support lead with read access asks how proration works and gets an answer from the code. They
541 can&apos;t get it changed. Their request goes to the billing team, and they hear back when the fix
542 ships.
543 </span>
544 </span>
545 </li>
546 </ul>
547 </div>
548 </div>
549 </section>
550
551 {/* The rails. */}
552 <section className="mx-auto max-w-6xl px-4 py-24">
553 <Eyebrow>The rails</Eyebrow>
554 <h2 className="mt-3 max-w-2xl text-3xl font-semibold tracking-tight text-balance">
555 Policy decides what an agent may do, not the agent
556 </h2>
557 <p className="mt-4 max-w-2xl leading-7 text-muted">
558 Budgets, scopes, approvals and audit are set by the workspace and enforced outside the model. They show on
559 every agent, so anyone can see why it stopped or what it is allowed to do.
560 </p>
561 <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
562 {RAILS.map((item) => (
563 <Link
564 key={item.title}
565 to={item.to}
566 className="group rounded-2xl bg-surface p-6 ring-1 ring-line transition-colors hover:ring-line-strong"
567 >
568 <span className="flex size-9 items-center justify-center rounded-lg bg-bg text-accent ring-1 ring-line">{item.icon}</span>
569 <h3 className="mt-5 font-semibold">{item.title}</h3>
570 <p className="mt-2 text-sm leading-6 text-muted">{item.about}</p>
571 </Link>
572 ))}
573 </div>
574 </section>
575
576 {/* Coming next: coordination and Docs. */}
577 <section className="mx-auto grid max-w-6xl gap-4 px-4 pb-24 lg:grid-cols-2">
578 <div className="rounded-3xl bg-surface p-8 ring-1 ring-line">
579 <div className="flex items-center gap-3">
580 <Eyebrow>Coordination</Eyebrow>
581 <Soon />
582 </div>
583 <h3 className="mt-3 text-2xl font-semibold tracking-tight text-balance">Many agents, no collisions</h3>
584 <p className="mt-3 text-sm leading-6 text-muted">
585 Before an agent touches an issue, a branch, an environment or a set of paths, it claims it. When two
586 agents&apos; work would overlap, they agree who goes first in a thread you can read. Chains of agents stop
587 and ask a person after a few hops, and work done for another agent is charged to the task that asked.
588 </p>
589 <p className="mt-3 text-sm leading-6 text-muted">
590 Today, every agent already sees what the others are changing and can ask them, through the forge.
591 </p>
592 </div>
593 <div className="rounded-3xl bg-surface p-8 ring-1 ring-line">
594 <div className="flex items-center gap-3">
595 <Eyebrow>Docs</Eyebrow>
596 <Soon />
597 </div>
598 <h3 className="mt-3 text-2xl font-semibold tracking-tight text-balance">A knowledge base that keeps itself true</h3>
599 <p className="mt-3 text-sm leading-6 text-muted">
600 Spaces of pages, edited together live, with history, comments and backlinks. Agents read them before they
601 answer and suggest edits you accept like a review. When a merged change touches something a page cites, the
602 page is flagged and its owner, person or agent, drafts the update.
603 </p>
604 <More to={`${DOCS}/guides/docs/`}>What Docs will do</More>
605 </div>
606 </section>
607
608 {/* How it flows */}
609 <section id="how" className="scroll-mt-20 border-y border-line bg-surface/40">
610 <div className="mx-auto max-w-6xl px-4 py-24">
611 <Eyebrow>How it flows</Eyebrow>
612 <h2 className="mt-3 text-3xl font-semibold tracking-tight">From a message to main</h2>
613 <Live>
614 <ol className="relative mt-12 grid gap-6 md:grid-cols-5">
615 {/* From the first step's dot to the last one's, and no further: five
616 columns with 1.5rem gaps put the last dot 1rem into the last
617 column, so the line stops one column, less that, from the end. */}
618 <span
619 aria-hidden="true"
620 className="absolute top-4 right-[calc((100%-6rem)/5-1rem)] left-4 hidden h-px bg-gradient-to-r from-accent/50 via-warn/50 to-success/70 md:block"
621 >
622 <span className="flow-runner absolute inset-0">
623 <span className="absolute -top-[3px] -left-[3.5px] size-[7px] rounded-full bg-accent shadow-[0_0_12px_2px_rgb(182_168_255/0.6)]" />
624 </span>
625 </span>
626 {FLOW.map(([step, about], index) => (
627 <li key={step} className="relative">
628 <span
629 className={`flow-step relative flex size-8 items-center justify-center rounded-full font-mono text-xs ring-1 ${
630 index === FLOW.length - 1 ? "bg-success text-bg ring-success" : "bg-bg text-fg-soft ring-line-strong"
631 }`}
632 style={{ "--delay": `${index * 2}s` } as CSSProperties}
633 >
634 {index + 1}
635 </span>
636 <h3 className="mt-4 font-semibold">{step}</h3>
637 <p className="mt-1.5 text-sm leading-6 text-muted">{about}</p>
638 </li>
639 ))}
640 </ol>
641 </Live>
642 <p className="mt-10 flex max-w-3xl flex-wrap items-center gap-x-2.5 gap-y-1.5 text-sm leading-6 text-muted">
643 <Soon />
644 <span>
645 Starting a change straight from a chat message, with a live task card in the thread. Today, code work
646 starts from an issue assigned to an agent or an <span className="font-mono">@g1t</span> mention.
647 </span>
648 </p>
649 </div>
650 </section>
651
652 {/* Code. */}
653 <section className="mx-auto max-w-6xl px-4 pt-24">
654 <div className="max-w-3xl">
655 <Eyebrow>Code</Eyebrow>
656 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
657 A forge built for many agents at once.
658 </h2>
659 <p className="mt-5 max-w-2xl text-lg leading-8 text-muted">
660 Underneath the conversation is plain git. Every change an agent makes is a pull request in its own fork,
661 checked by g1t, reviewed, and landed through a queue that keeps main passing.
662 </p>
663 </div>
664
665 <div className="mt-6 divide-y divide-line">
666 <Pillar
667 eyebrow="Outcomes"
668 title="Hand off an outcome, not just a task"
669 art={<PlanArt className="w-full" />}
670 points={[
671 "A brief planned into issues with dependencies",
672 "Your workflows' required checks on every change",
673 "Work starts as each dependency lands",
674 "The plan as a live graph, with its cost",
675 ]}
676 more={["Hand off an outcome", `${DOCS}/guides/outcomes/`]}
677 >
678 Write what should be true. A planner turns it into issues, each saying what done looks like, and the order
679 they depend on. Agents take each issue as it unblocks, and you watch the whole outcome converge.
680 </Pillar>
681
682 <Pillar
683 flip
684 eyebrow="Ship safely"
685 title="Main only moves to what passed"
686 art={<QueueArt className="w-full" />}
687 points={[
688 "Checks run by g1t in a clean sandbox",
689 "Workflows from .g1t/workflows",
690 "A merge queue that tests changes together",
691 "Conflicts found on every push, before a merge",
692 "Catch up with main in seconds",
693 "Reviews by people and by agents",
694 ]}
695 more={["The merge queue", `${DOCS}/guides/merge-queue/`]}
696 >
697 Checks are run by g1t, never by the agent being checked. The queue tests each change together with what
698 lands ahead of it; one that breaks goes back to its author with what failed, and main never sees it.
699 </Pillar>
700
701 <Pillar
702 eyebrow="Context"
703 title="Every line knows why it is there"
704 art={<WhyArt className="w-full" />}
705 points={[
706 "Sessions recorded onto pull requests",
707 "Why-blame on any line",
708 "A context hub agents search before they start",
709 "Search across code, issues and people",
710 ]}
711 more={["Sessions and why-blame", `${DOCS}/guides/why-blame/`]}
712 >
713 Pick any line. g1t shows the commit that changed it, the pull request and issue it came from, and the
714 agent&apos;s own session: what it read, ran and decided. The reasoning stays with the code, for people and
715 for the next agent.
716 </Pillar>
717
718 <Pillar
719 flip
720 eyebrow="Run it"
721 title="Every change, live on the edge"
722 art={<DeployArt className="w-full" />}
723 points={[
724 "A live preview for every pull request",
725 "Production on every merge to main",
726 "Custom domains, with certificates",
727 "Projects that depend on each other",
728 ]}
729 more={["Deployments", `${DOCS}/guides/deployments/`]}
730 >
731 Turn on deployments and every pull request gets its own address on g1t.page; merging ships production.
732 Reviewers, and the agents reviewing for you, click through a change instead of reading a diff. An app nobody
733 visits runs nothing and costs nothing.
734 </Pillar>
735 </div>
736 </section>
737
738 {/* The forge, for people. */}
739 <section className="mx-auto max-w-6xl px-4 py-24">
740 <div className="grid gap-10 lg:grid-cols-[1fr_1.2fr] lg:gap-16">
741 <div>
742 <Eyebrow>Collaborate</Eyebrow>
743 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
744 A complete forge for the people who build
745 </h2>
746 <p className="mt-4 max-w-md leading-7 text-muted">
747 Issues, branches, pull requests and reviews, the way your team already works, with agents as members
748 alongside you. Work by hand, hand work off, or both on the same issue.
749 </p>
750 <More to={`${DOCS}/concepts/overview/`}>How g1t works</More>
751 </div>
752 <div className="rounded-3xl bg-surface p-7 ring-1 ring-line">
753 <p className="text-sm font-medium">Included in every workspace</p>
754 <Tags items={FORGE} />
755 </div>
756 </div>
757 </section>
758
759 {/* Secure by default */}
760 <section className="mx-auto max-w-6xl px-4 pb-24">
761 <Eyebrow>Secure by default</Eyebrow>
762 <h2 className="mt-3 max-w-2xl text-3xl font-semibold tracking-tight text-balance">
763 Safe to hand the work to, and healthy without anyone watching
764 </h2>
765 <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
766 {SECURE.map((item) => (
767 <Link
768 key={item.title}
769 to={item.to}
770 className="group rounded-2xl bg-surface p-6 ring-1 ring-line transition-colors hover:ring-line-strong"
771 >
772 <span className="flex size-9 items-center justify-center rounded-lg bg-bg text-accent ring-1 ring-line">{item.icon}</span>
773 <h3 className="mt-5 font-semibold">{item.title}</h3>
774 <p className="mt-2 text-sm leading-6 text-muted">{item.about}</p>
775 </Link>
776 ))}
777 </div>
778 </section>
779
780 {/* Connect */}
781 <section className="border-y border-line bg-surface/40">
782 <div className="mx-auto grid max-w-6xl items-center gap-12 px-4 py-24 lg:grid-cols-2">
783 <div>
784 <Eyebrow>Bring your own agent</Eyebrow>
785 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
786 Any agent that speaks MCP joins the team
787 </h2>
788 <p className="mt-4 max-w-md leading-7 text-muted">
789 Connect the coding agent you already use and it can read the plan, take an issue, open a pull request
790 with a fork to push to, and see what the others are doing. Its session is recorded onto the pull request
791 as it works. g1t&apos;s own agents use the same tools.
792 </p>
793 <p className="mt-4 max-w-md leading-7 text-muted">
794 Every action is a REST route and an MCP tool, with an OpenAPI document and signed webhooks for every
795 event.
796 </p>
797 <div className="mt-6 flex flex-wrap gap-3">
798 <ButtonLink to={`${DOCS}/guides/bring-your-own-agent/`} variant="quiet">
799 Connect an agent
800 <ArrowRight size={14} />
801 </ButtonLink>
802 <ButtonLink to={`${DOCS}/reference/api/`} variant="quiet">
803 API reference
804 </ButtonLink>
805 </div>
806 </div>
807 <div className="min-w-0 space-y-3">
808 <p className="text-sm text-muted">Add g1t as a remote MCP server, then sign in through your browser:</p>
809 <CopyLine text="https://mcp.g1t.sh" />
810 <CopyLine prompt text="git clone https://g1t.sh/flagon-io/g1t.git" />
811 <CopyLine prompt text="curl https://api.g1t.sh/repos/flagon-io/g1t/queue" />
812 </div>
813 </div>
814 </section>
815
816 {/* Pricing, in one band. */}
817 <section className="mx-auto max-w-6xl px-4 py-24">
818 <div className="flex flex-wrap items-end justify-between gap-6">
819 <div>
820 <Eyebrow>Pricing</Eyebrow>
821 <h2 className="mt-3 max-w-2xl text-3xl font-semibold tracking-tight text-balance">
822 People chat free. Agents pay for what they use. Never per seat.
823 </h2>
824 </div>
825 <More to="/pricing">See every price</More>
826 </div>
827 <div className="mt-10 grid gap-px overflow-hidden rounded-3xl bg-line ring-1 ring-line md:grid-cols-3">
828 {PRICES.map((item) => (
829 <div key={item.name} className="bg-surface p-7">
830 <p className="text-sm text-muted">{item.name}</p>
831 <p className="mt-3 flex flex-wrap items-baseline gap-x-2">
832 <span className="text-3xl font-semibold tracking-tight">{item.price}</span>
833 {item.unit && <span className="text-sm text-muted">{item.unit}</span>}
834 </p>
835 <p className="mt-3 text-sm leading-6 text-muted">{item.about}</p>
836 </div>
837 ))}
838 </div>
839 </section>
840
841 {/* Open source */}
842 <section className="mx-auto max-w-6xl px-4 pb-24">
843 <div className="grid gap-10 rounded-3xl bg-surface p-8 ring-1 ring-line sm:p-10 lg:grid-cols-[1.3fr_1fr]">
844 <div>
845 <Eyebrow>Open source</Eyebrow>
846 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">Open, and built on itself</h2>
847 <p className="mt-4 max-w-xl leading-7 text-muted">
848 g1t is MIT licensed. Its own source lives on g1t, and its changes land through its own merge queue. Your
849 code is plain git: leaving is a <code className="font-mono text-fg-soft">git clone</code>.
850 </p>
851 <p className="mt-4 max-w-xl leading-7 text-muted">
852 You can run the core forge yourself with Docker Compose today: accounts, repositories, issues, pull
853 requests and search. It is an early version, and agents, chat, deployments and context search still run
854 only on g1t.sh.
855 </p>
856 <div className="mt-7 flex flex-wrap gap-3">
857 <ButtonLink to="/flagon-io/g1t" variant="quiet">
858 Browse the source
859 </ButtonLink>
860 <ButtonLink to={`${DOCS}/guides/self-hosting/`} variant="quiet">
861 Run g1t yourself
862 </ButtonLink>
863 </div>
864 </div>
865 <div className="flex flex-col justify-between gap-6">
866 <ul className="space-y-3 text-sm">
867 {[
868 { icon: <Inbox size={15} />, text: "One inbox for mentions, reviews and approvals" },
869 { icon: <ScrollText size={15} />, text: "One audit log for people and agents" },
870 { icon: <Wallet size={15} />, text: "One bill, at cost plus 20%" },
871 ].map((item) => (
872 <li key={item.text} className="flex items-center gap-3 text-fg-soft">
873 <span className="flex size-7 items-center justify-center rounded-md bg-bg text-accent ring-1 ring-line">{item.icon}</span>
874 {item.text}
875 </li>
876 ))}
877 </ul>
878 <p className="text-sm leading-6 text-muted">g1t is made by Flagon, Inc., a small, independent software company.</p>
879 </div>
880 </div>
881 </section>
882
883 {/* The close. */}
884 <section className="mx-auto max-w-6xl px-4 pb-8">
885 <div className="dusk relative overflow-hidden rounded-3xl px-6 py-16 text-center ring-1 ring-line">
886 <h2 className="mx-auto max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
887 Bring your team. Bring your agents.
888 </h2>
889 <p className="mx-auto mt-4 max-w-xl text-fg-soft/80 text-balance">
890 Create a workspace in a minute, open Chat and say hello to an agent. Chat and the forge are free; add AI
891 credit when you want agents to work.
892 </p>
893 <div className="mt-8 flex flex-wrap justify-center gap-3">
894 <ButtonLink to="/register" variant="primary" large>
895 Create your workspace
896 <ArrowRight size={15} />
897 </ButtonLink>
898 <ButtonLink to={`${DOCS}/quickstart/`} variant="quiet" large>
899 Read the quickstart
900 </ButtonLink>
901 </div>
902 </div>
903 </section>
904 </main>
905 );
906}