Skip to content
Sign up

flagon-io/g1t

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