Skip to content
Sign up

flagon-io/g1t

public
00

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

gitagentscloudflarerustforgemcp
896 linesCodeBlameRaw
1import {
2 ArrowRight,
3 BookOpen,
4 Bot,
5 Check,
6 CircleDashed,
7 Code2,
8 Eye,
9 Handshake,
10 Bell,
11 KeyRound,
12 Lock,
13 MessagesSquare,
14 PackageCheck,
15 ScanSearch,
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, QueueArt, WhyArt } from "./art";
24import { NeedsYouArt, WhatChangedArt } from "./landing-home";
25import { ProductTour } from "./product-tour";
26import { ButtonLink, CopyLine } from "./ui";
27
28const DOCS = "https://docs.g1t.sh";
29
30/** A small label above a heading, in the mono face. */
31function Eyebrow({ children }: { children: ReactNode }) {
32 return <p className="font-mono text-xs tracking-[0.2em] text-accent uppercase">{children}</p>;
33}
34
35/** Marks something planned and not built yet, wherever it is mentioned. */
36function Soon({ className = "" }: { className?: string }) {
37 return (
38 <span
39 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}`}
40 >
41 Coming soon
42 </span>
43 );
44}
45
46function Tags({ items }: { items: string[] }) {
47 return (
48 <ul className="mt-6 flex flex-wrap gap-1.5">
49 {items.map((item) => (
50 <li key={item} 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">
51 {item}
52 </li>
53 ))}
54 </ul>
55 );
56}
57
58/** A link in running copy that leads to the docs or another page. */
59function More({ to, children }: { to: string; children: ReactNode }) {
60 return (
61 <Link to={to} className="group mt-7 inline-flex items-center gap-1.5 text-sm font-medium text-fg hover:text-accent">
62 {children}
63 <ArrowRight size={14} className="transition-transform group-hover:translate-x-0.5" />
64 </Link>
65 );
66}
67
68/**
69 * A point in a list: a check, a check whose words link somewhere, or a
70 * "Coming soon" tag for what is not built yet.
71 */
72type Point = string | { text: string; link: { to: string; label: string } } | { text: string; soon: true };
73
74function Points({ points, columns = true }: { points: Point[]; columns?: boolean }) {
75 const now = points.filter((point) => typeof point === "string" || !("soon" in point));
76 const later = points.filter((point) => typeof point !== "string" && "soon" in point).map((point) => (point as { text: string }).text);
77 return (
78 <>
79 <ul className={`mt-6 grid gap-2.5 text-sm ${columns ? "sm:grid-cols-2" : ""}`}>
80 {now.map((point) =>
81 typeof point === "string" ? (
82 <li key={point} className="flex gap-2.5 text-fg-soft">
83 <Check size={15} className="mt-0.5 shrink-0 text-accent" />
84 <span>{point}</span>
85 </li>
86 ) : (
87 "link" in point && (
88 <li key={point.text} className="flex gap-2.5 text-fg-soft">
89 <Check size={15} className="mt-0.5 shrink-0 text-accent" />
90 <span>
91 {point.text}{" "}
92 <Link to={point.link.to} className="text-fg underline underline-offset-4 hover:text-accent">
93 {point.link.label}
94 </Link>
95 </span>
96 </li>
97 )
98 ),
99 )}
100 </ul>
101 {later.length > 0 && (
102 <div className="mt-5 rounded-xl border border-dashed border-line-strong px-4 py-3.5">
103 <Soon />
104 <ul className={`mt-3 grid gap-2 text-sm ${columns ? "sm:grid-cols-2" : ""}`}>
105 {later.map((text) => (
106 <li key={text} className="flex gap-2.5 text-muted">
107 <CircleDashed size={14} className="mt-0.5 shrink-0 text-faint" />
108 <span>{text}</span>
109 </li>
110 ))}
111 </ul>
112 </div>
113 )}
114 </>
115 );
116}
117
118/** A drawing in its own card, on the page's dark gray. */
119function ArtFrame({ children }: { children: ReactNode }) {
120 return (
121 <Live className="relative overflow-hidden rounded-3xl bg-surface/60 px-4 py-6 ring-1 ring-line sm:px-8">
122 <div
123 aria-hidden="true"
124 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)]"
125 />
126 <div className="relative mx-auto max-w-lg">{children}</div>
127 </Live>
128 );
129}
130
131/**
132 * One part of Code: what it does, the features that prove it, and a
133 * drawing of the idea, on alternating sides.
134 */
135function Pillar({
136 eyebrow,
137 title,
138 art,
139 points,
140 more,
141 flip,
142 children,
143}: {
144 eyebrow: string;
145 title: string;
146 art: ReactNode;
147 points: string[];
148 more: [string, string];
149 flip?: boolean;
150 children: ReactNode;
151}) {
152 return (
153 <article className="grid items-center gap-10 py-14 lg:grid-cols-2 lg:gap-16">
154 <div className={flip ? "lg:order-2" : undefined}>
155 <Eyebrow>{eyebrow}</Eyebrow>
156 <h3 className="mt-3 text-2xl font-semibold tracking-tight text-balance sm:text-3xl">{title}</h3>
157 <p className="mt-4 max-w-xl leading-7 text-muted">{children}</p>
158 <Points points={points} />
159 <More to={more[1]}>{more[0]}</More>
160 </div>
161 <div className={flip ? "lg:order-1" : undefined}>
162 <ArtFrame>{art}</ArtFrame>
163 </div>
164 </article>
165 );
166}
167
168/** Facts under the opening. */
169const FACTS: [string, string][] = [
170 ["$0", "for people to chat. Every plan, the free one too, with no history cutoff."],
171 ["0 seats", "Everyone in the company joins at one workspace price, never per person."],
172 ["+20%", "on what compute costs g1t: checks, workflows and deployments. Your own runners are free."],
173 ["MIT", "licensed. g1t's own source lives on g1t and lands through its own queue."],
174];
175
176/** What a workspace holds, and the coding agents it works with. */
177const MODES: {
178 icon: ReactNode;
179 name: string;
180 about: string;
181 soon?: boolean;
182 to: string;
183}[] = [
184 {
185 icon: <Code2 size={18} />,
186 name: "Code",
187 about: "Repositories, work items, pull requests, checks, a merge queue and deployments. For the people who build.",
188 to: `${DOCS}/concepts/overview/`,
189 },
190 {
191 icon: <MessagesSquare size={18} />,
192 name: "Chat",
193 about: "Channels, direct messages and threads, live, for everyone in the company.",
194 to: `${DOCS}/guides/chat/`,
195 },
196 {
197 icon: <Bot size={18} />,
198 name: "Your coding agents",
199 about: "Claude Code, Codex, Cursor or any MCP client, working as you through MCP, the g1t CLI or the API, with only the access you give them.",
200 to: `${DOCS}/guides/bring-your-own-agent/`,
201 },
202 {
203 icon: <BookOpen size={18} />,
204 name: "Artifacts",
205 about: "Docs now, and slides, designs and dashboards next, made together live.",
206 to: `${DOCS}/guides/artifacts/`,
207 },
208];
209
210const RAILS: { icon: ReactNode; title: string; about: string; to: string }[] = [
211 {
212 icon: <KeyRound size={18} />,
213 title: "Scopes",
214 about: "A token or an OAuth app gets only the scopes you grant it, and never does more than you could do yourself.",
215 to: `${DOCS}/guides/authentication/#access-tokens`,
216 },
217 {
218 icon: <Handshake size={18} />,
219 title: "Rules",
220 about: "Protected branches, required checks and required approvals apply to every push and every merge, whoever made it.",
221 to: `${DOCS}/guides/rules/`,
222 },
223 {
224 icon: <Eye size={18} />,
225 title: "Guardrails",
226 about: "How long a project's checks and merge queue may run, enforced in g1t's sandboxes.",
227 to: `${DOCS}/guides/guardrails/`,
228 },
229 {
230 icon: <ScrollText size={18} />,
231 title: "Audit",
232 about: "Every action by people and tokens: who did it, through what, whether it was allowed and the rule that decided.",
233 to: `${DOCS}/guides/audit-log/`,
234 },
235];
236
237const FLOW: [string, string][] = [
238 ["Ask", "Open a work item, or raise it in a channel: what should change, and what done looks like."],
239 ["Change", "You or your coding agent push a branch and open a pull request. The agent's session is recorded onto it."],
240 ["Check", "Required checks run on g1t's runners or your own, and the pull request gets a live preview."],
241 ["Review", "A person reviews and approves. Rules and protected branches apply to everyone."],
242 ["Main", "The queue tests each change with what lands before it. Production follows main."],
243];
244
245/** The forge itself, for the people who build. */
246const FORGE = [
247 "Git over HTTPS",
248 "Public and private repositories",
249 "Work items and labels",
250 "Pull requests and forks",
251 "Line comments and reviews",
252 "Protected branches",
253 "Required approvals",
254 "Workspaces and roles",
255 "Teams",
256 "Search and Explore",
257 "Webhooks",
258 "Import from any git host",
259 "REST API and OpenAPI",
260 "MCP server",
261 "The g1t CLI",
262];
263
264const SECURE: { icon: ReactNode; title: string; about: string; to: string }[] = [
265 {
266 icon: <ShieldCheck size={18} />,
267 title: "Push protection",
268 about: "A push that adds a key or a token is refused before it lands, and the history is scanned for ones already there.",
269 to: `${DOCS}/guides/security/secret-protection/`,
270 },
271 {
272 icon: <PackageCheck size={18} />,
273 title: "Dependency upkeep",
274 about: "Each vulnerable dependency that has a fixed version becomes an upgrade, landed through the same checks as any change.",
275 to: `${DOCS}/guides/security/#security-updates`,
276 },
277 {
278 icon: <ScanSearch size={18} />,
279 title: "Code scanning",
280 about: "Static analysis results become alerts, comments on the pull request that caused them, and a check that can block the merge.",
281 to: `${DOCS}/guides/security/code-scanning/`,
282 },
283 {
284 icon: <Lock size={18} />,
285 title: "Supply chain",
286 about: "The dependency graph, an SBOM of it, and dependency review on every pull request that changes what you depend on.",
287 to: `${DOCS}/guides/security/supply-chain/`,
288 },
289];
290
291const PRICES: { name: string; price: string; unit?: string; about: string }[] = [
292 {
293 name: "People",
294 price: "$0",
295 unit: "to chat",
296 about: "Channels, DMs, threads and the forge are included on every plan, free too. No seats and no history cutoff.",
297 },
298 {
299 name: "The g1t plan",
300 price: "$21",
301 unit: "a month per workspace",
302 about: "$10 of usage included. Unlimited members. Checks, workflows, the merge queue and deployments.",
303 },
304 {
305 name: "Usage",
306 price: "From cost + 20%",
307 about: "Checks, workflows, deployments and storage, priced from what they cost g1t plus 20%. Time on your own runners costs nothing.",
308 },
309];
310
311/**
312 * The signed-out home page: what g1t is, what it does, and how to start.
313 * It lists no one's repositories; those are a click away under Explore.
314 */
315export function Landing() {
316 return (
317 <main className="overflow-x-clip">
318 {/* The opening. */}
319 <section className="dusk relative">
320 <div aria-hidden="true" className="dusk-planet pointer-events-none absolute -top-120 left-1/2 size-240 translate-x-[-10%] rounded-full" />
321 <div className="relative mx-auto max-w-6xl px-4 pt-20 text-center sm:pt-24">
322 <Link
323 to={`${DOCS}/guides/bring-your-own-agent/`}
324 className="inline-flex animate-fade-up items-center gap-2 rounded-full bg-bg/50 px-3 py-1 text-xs whitespace-nowrap text-fg-soft ring-1 ring-line backdrop-blur transition-colors hover:bg-bg/70"
325 >
326 <span className="size-1.5 shrink-0 rounded-full bg-accent" />
327 <span className="sm:hidden">Works with Claude Code, Codex and Cursor</span>
328 <span className="hidden sm:inline">Works with Claude Code, Codex, Cursor and any MCP client</span>
329 <ArrowRight size={12} className="shrink-0" />
330 </Link>
331 <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">
332 Where your team&apos;s code{" "}
333 <span className="bg-linear-to-r from-fg via-accent-high to-accent bg-clip-text text-transparent">lands, whoever wrote it.</span>
334 </h1>
335 <p className="mx-auto mt-7 max-w-2xl animate-fade-up text-lg leading-8 text-fg-soft/80 text-balance">
336 Start each day on Home: what landed, what is live, and what needs you next. Behind it, repositories, pull requests, required checks, a merge queue
337 and deployments, with chat and docs for your team. Connect the coding agents you already use, and their work lands through the same checks as
338 everyone&apos;s.
339 </p>
340 <div className="mt-9 flex animate-fade-up flex-wrap items-center justify-center gap-3">
341 <ButtonLink to="/register" size="lg" className="rounded-full">
342 Get started
343 <ArrowRight size={15} />
344 </ButtonLink>
345 <ButtonLink to="#how" variant="outline" size="lg" className="rounded-full">
346 See how it works
347 </ButtonLink>
348 </div>
349 <p className="mx-auto mt-5 max-w-xl animate-fade-up text-sm text-fg-soft/60 text-balance">
350 Chat and the forge are free, with no card. No seats, ever.
351 </p>
352 </div>
353 <div className="relative mx-auto max-w-5xl px-4 pt-14 pb-2">
354 <div
355 aria-hidden="true"
356 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"
357 />
358 <ProductTour className="relative" />
359 </div>
360 <div aria-hidden="true" className="h-16 bg-linear-to-b from-transparent to-bg" />
361 </section>
362
363 {/* Facts. */}
364 <section className="relative z-10 mx-auto max-w-6xl px-4">
365 <dl className="grid gap-px overflow-hidden rounded-2xl border border-line bg-line sm:grid-cols-2 lg:grid-cols-4">
366 {FACTS.map(([figure, about]) => (
367 <div key={figure} className="bg-bg px-6 py-6">
368 <dt className="font-mono text-2xl font-medium tracking-tight text-fg">{figure}</dt>
369 <dd className="mt-2 text-sm leading-6 text-muted">{about}</dd>
370 </div>
371 ))}
372 </dl>
373 </section>
374
375 {/* Home: where the day starts. */}
376 <section id="home" className="mx-auto max-w-6xl scroll-mt-20 px-4 pt-24">
377 <div className="max-w-3xl">
378 <Eyebrow>Home</Eyebrow>
379 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-5xl">Start every day knowing where things stand.</h2>
380 <p className="mt-5 max-w-2xl text-lg leading-8 text-muted">
381 Home is your daily update and your way into the forge. g1t keeps track of everything your team and its coding agents did, clears what resolved
382 itself, tells you in plain English what changed and what is live, and takes you straight to what is yours to decide: a merge, a review, a fix.
383 </p>
384 </div>
385
386 <div className="mt-6 divide-y divide-line">
387 <Pillar
388 eyebrow="Where you're needed"
389 title="Only what still needs you"
390 art={<NeedsYouArt />}
391 points={[
392 "Notifications that settle themselves",
393 "Why each one settled, and who did it",
394 "Pull requests ready for you to merge",
395 "Reviews asked of you, by name",
396 "Start here: the one to do first, and why",
397 ]}
398 more={["Home", `${DOCS}/guides/home/`]}
399 >
400 A notification is done once a later event resolves it: the next run passes, the pull request merges, the fix deploys. g1t settles it for you, and
401 Home shows only what still waits on you. Start here picks the one to do first and opens it.
402 </Pillar>
403
404 <Pillar
405 flip
406 eyebrow="What changed"
407 title="Come back to what changed, in plain English"
408 art={<WhatChangedArt />}
409 points={[
410 "A summary of what landed since you were last here",
411 "Whether each change is live, deploying or failed",
412 "Explain on any change that landed",
413 "Ask a follow-up, in your direct message with g1t",
414 ]}
415 more={["Ask g1t", `${DOCS}/guides/ask/`]}
416 >
417 Home asks &ldquo;What are we building today?&rdquo; Press Summarize and What changed reads the commits, pull requests, deploys and conversations
418 since you were last here, then tells you what changed, why, and what is live. Explain any one change, or ask a follow-up. It runs on your
419 workspace&apos;s own AI provider.
420 </Pillar>
421 </div>
422 </section>
423
424 {/* What a workspace holds. */}
425 <section className="mx-auto max-w-6xl px-4 pt-24">
426 <div className="max-w-3xl">
427 <Eyebrow>One workspace</Eyebrow>
428 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-5xl">Talk, write it down, ship.</h2>
429 <p className="mt-5 max-w-2xl text-lg leading-8 text-muted">
430 Home, Code, Chat and Artifacts share one set of members, one sign-in and one bill. The coding agents you connect work as you, through MCP, the g1t
431 CLI and the API.
432 </p>
433 </div>
434 <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
435 {MODES.map((mode) => (
436 <Link
437 key={mode.name}
438 to={mode.to}
439 className="group flex flex-col rounded-2xl bg-surface p-6 ring-1 ring-line transition-colors hover:ring-line-strong"
440 >
441 <span className="flex items-center justify-between gap-2">
442 <span className="flex size-9 items-center justify-center rounded-lg bg-bg text-accent ring-1 ring-line">{mode.icon}</span>
443 {mode.soon && <Soon />}
444 </span>
445 <h3 className="mt-5 text-lg font-semibold">{mode.name}</h3>
446 <p className="mt-2 text-sm leading-6 text-muted">{mode.about}</p>
447 </Link>
448 ))}
449 </div>
450 </section>
451
452 {/* Code. */}
453 <section className="mx-auto max-w-6xl px-4 pt-24">
454 <div className="max-w-3xl">
455 <Eyebrow>Code</Eyebrow>
456 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-5xl">A forge built for many changes at once.</h2>
457 <p className="mt-5 max-w-2xl text-lg leading-8 text-muted">
458 Underneath is plain git. Every change, whether you wrote it or your coding agent did, is a pull request: checked, reviewed, and landed through a
459 queue that keeps main passing.
460 </p>
461 </div>
462
463 <div className="mt-6 divide-y divide-line">
464 <Pillar
465 eyebrow="Ship safely"
466 title="Main only moves to what passed"
467 art={<QueueArt className="w-full" />}
468 points={[
469 "Checks in a clean sandbox, or free on your own runners",
470 "Your computer as a runner, with the desktop app",
471 "A merge queue that tests changes together",
472 "Conflicts found on every push, before a merge",
473 "Catch up with main in seconds",
474 "Required reviews, with code owners",
475 ]}
476 more={["The merge queue", `${DOCS}/guides/merge-queue/`]}
477 >
478 Required checks run on g1t&apos;s runners, or free on your own: a server, or your computer while the desktop app is open. The queue tests each
479 change together with what lands ahead of it; one that breaks goes back to its author with what failed, and main never sees it.
480 </Pillar>
481
482 <Pillar
483 flip
484 eyebrow="Context"
485 title="Every line knows why it is there"
486 art={<WhyArt className="w-full" />}
487 points={[
488 "Sessions recorded onto pull requests",
489 "Why-blame on any line",
490 "Decisions recorded with the reasons behind them",
491 "Search across code, work items and people",
492 ]}
493 more={["Sessions and why-blame", `${DOCS}/guides/why-blame/`]}
494 >
495 Pick any line. g1t shows the commit that changed it, the pull request and work item it came from, and the session your coding agent recorded as it
496 worked: what it read, ran and decided. The reasoning stays with the code, for people and for the next agent.
497 </Pillar>
498
499 <Pillar
500 eyebrow="Run it"
501 title="Every change, live on the edge"
502 art={<DeployArt className="w-full" />}
503 points={[
504 "A live preview for every pull request",
505 "Production on every merge to main",
506 "Custom domains, with certificates",
507 "A new app from one sentence on Home",
508 ]}
509 more={["Deployments", `${DOCS}/guides/deployments/`]}
510 >
511 Turn on deployments and every pull request gets its own address on g1t.page; merging ships production. Reviewers click through a change instead of
512 reading a diff. An app nobody visits runs nothing and costs nothing. Or start from Home: ask for something new, and one click makes its repository,
513 starts your coding agent on it and puts the first version live.
514 </Pillar>
515 </div>
516 </section>
517
518 {/* The forge, for people. */}
519 <section className="mx-auto max-w-6xl px-4 py-24">
520 <div className="grid gap-10 lg:grid-cols-[1fr_1.2fr] lg:gap-16">
521 <div>
522 <Eyebrow>Collaborate</Eyebrow>
523 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">A complete forge for the people who build</h2>
524 <p className="mt-4 max-w-md leading-7 text-muted">
525 Work items, branches, pull requests and reviews, the way your team already works. Write a change by hand, have your coding agent write it, or both
526 on the same branch.
527 </p>
528 <More to={`${DOCS}/concepts/overview/`}>How g1t works</More>
529 </div>
530 <div className="rounded-3xl bg-surface p-7 ring-1 ring-line">
531 <p className="text-sm font-medium">Included in every workspace</p>
532 <Tags items={FORGE} />
533 </div>
534 </div>
535 </section>
536
537 {/* Chat, where people talk about the work. */}
538 <section className="mx-auto grid max-w-6xl items-start gap-12 px-4 lg:grid-cols-[1.1fr_1fr] lg:gap-16">
539 <div>
540 <Eyebrow>Chat</Eyebrow>
541 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Just talk to your team.</h2>
542 <p className="mt-4 max-w-xl leading-7 text-muted">
543 Chat is where your team talks about the work, next to the code it is about. Ask a question in a channel, DM a colleague, or reply in a thread.
544 Messages arrive the moment they are sent, and everyone in the company can join for free.
545 </p>
546 <More to={`${DOCS}/guides/chat/`}>How Chat works</More>
547 </div>
548 <div className="rounded-3xl bg-surface p-7 ring-1 ring-line">
549 <p className="text-sm font-medium">Free on every plan</p>
550 <Points
551 columns={false}
552 points={[
553 "Private, workspace and public channels",
554 "Direct messages",
555 "Threads on any message",
556 "@mentions",
557 "Live delivery, typing and read state",
558 "A desktop app for Windows, macOS and Linux",
559 {
560 text: "An Android app with notifications: scan the QR code on",
561 link: { to: "/download", label: "Download" },
562 },
563 {
564 text: "Pull requests, checks and deploys as cards in the channel",
565 soon: true,
566 },
567 { text: "Chat mentions in Notifications", soon: true },
568 { text: "The phone app on iPhone", soon: true },
569 ]}
570 />
571 </div>
572 </section>
573
574 {/* Agents: they do the work, you make the calls. */}
575 <section id="agents" className="mx-auto max-w-6xl scroll-mt-20 px-4 pt-24">
576 <div className="max-w-3xl">
577 <Eyebrow>Agents</Eyebrow>
578 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-5xl">Agents do the work. You make the calls.</h2>
579 <p className="mt-5 max-w-2xl text-lg leading-8 text-muted">
580 Your coding agents push the branches and open the pull requests, and their work lands through the same checks as everyone&apos;s. You decide what
581 they take on and what ships.
582 </p>
583 </div>
584
585 <div className="mt-10 grid gap-4 lg:grid-cols-2">
586 <div className="rounded-3xl bg-surface p-7 ring-1 ring-line sm:p-8">
587 <Eyebrow>Work</Eyebrow>
588 <h3 className="mt-3 text-2xl font-semibold tracking-tight text-balance">Point your coding agent at a work item</h3>
589 <p className="mt-3 text-sm leading-6 text-muted">
590 Your coding agent connects to g1t through MCP and works as you. It reads the work item, pushes a branch, opens the pull request and records its
591 session onto it, and the pull request goes through the same checks and reviews as anyone&apos;s.
592 </p>
593 <ol className="mt-6 space-y-3 text-sm">
594 {[
595 "Open a work item: what should change, and what done looks like",
596 "Work it yourself, or hand it to your coding agent",
597 "The pull request runs your checks and lands through the queue",
598 ].map((step, index) => (
599 <li key={step} className="flex items-start gap-3 text-fg-soft">
600 <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">
601 {index + 1}
602 </span>
603 {step}
604 </li>
605 ))}
606 </ol>
607 <More to={`${DOCS}/guides/bring-your-own-agent/`}>Connect a coding agent</More>
608 </div>
609 <div className="rounded-3xl bg-surface p-7 ring-1 ring-line sm:p-8">
610 <Eyebrow>Coordination</Eyebrow>
611 <h3 className="mt-3 text-2xl font-semibold tracking-tight text-balance">Many agents, no collisions</h3>
612 <p className="mt-3 text-sm leading-6 text-muted">
613 Run as many coding agents as you like. Each claims the work item it takes, and every session shows live as it works, so everyone sees who is on
614 what. Two that start changing the same files are told while they work, before either opens a pull request. The merge queue tests changes together
615 with what lands ahead of them, and one that breaks another goes back to the session that caused it, with the change it breaks and the check that
616 failed. Five agents can open pull requests the same afternoon and main still only moves to what passed.
617 </p>
618 <More to={`${DOCS}/work/claims-and-dependencies/`}>Sessions, claims and overlaps</More>
619 </div>
620 </div>
621 </section>
622
623 {/* Connect */}
624 <section className="mt-24 border-y border-line bg-surface/40">
625 <div className="mx-auto grid max-w-6xl items-center gap-12 px-4 py-24 lg:grid-cols-2">
626 <div>
627 <Eyebrow>Bring your own agent</Eyebrow>
628 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">Any agent that speaks MCP works on g1t</h2>
629 <p className="mt-4 max-w-md leading-7 text-muted">
630 Connect Claude Code, Codex, Cursor or any other MCP client and sign in once. It works as you: it reads work items, pushes branches, opens pull
631 requests, and records its session and its decisions onto them.
632 </p>
633 <p className="mt-4 max-w-md leading-7 text-muted">
634 Every action is a REST route and an MCP tool, with an OpenAPI document, OAuth apps, access tokens and signed webhooks for every event. The g1t CLI
635 does the same from a terminal or a script: open a pull request, wait on its checks, read a failed run&apos;s logs.
636 </p>
637 <div className="mt-6 flex flex-wrap gap-3">
638 <ButtonLink to={`${DOCS}/guides/bring-your-own-agent/`} variant="outline">
639 Connect an agent
640 <ArrowRight size={14} />
641 </ButtonLink>
642 <ButtonLink to={`${DOCS}/guides/cli/`} variant="outline">
643 The g1t CLI
644 </ButtonLink>
645 <ButtonLink to={`${DOCS}/reference/api/`} variant="outline">
646 API reference
647 </ButtonLink>
648 </div>
649 </div>
650 <div className="min-w-0 space-y-3">
651 <p className="text-sm text-muted">Add g1t as a remote MCP server, then sign in through your browser:</p>
652 <CopyLine text="https://mcp.g1t.sh" />
653 <p className="pt-3 text-sm text-muted">
654 Install the CLI, then sign in with <code className="font-mono text-fg-soft">g1t auth login</code>:
655 </p>
656 <CopyLine prompt text="curl -fsSL https://g1t.sh/install | sh" />
657 <p className="pt-3 text-sm text-muted">Underneath, it is plain git and HTTP:</p>
658 <CopyLine prompt breakAtSlashes text="git clone https://g1t.sh/flagon-io/g1t.git" />
659 <CopyLine prompt breakAtSlashes text="curl https://api.g1t.sh/repos/flagon-io/g1t/queue" />
660 </div>
661 </div>
662 </section>
663
664 {/* Artifacts: the docs the work cites. */}
665 <section className="mx-auto max-w-6xl px-4 pt-24">
666 <div className="grid gap-10 rounded-3xl bg-surface p-8 ring-1 ring-line sm:p-10 lg:grid-cols-[1fr_1.1fr] lg:gap-16">
667 <div>
668 <Eyebrow>Artifacts</Eyebrow>
669 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">A knowledge base that keeps itself true</h2>
670 <p className="mt-4 max-w-xl leading-7 text-muted">
671 Docs, private until you share them or kept in spaces, edited together live, with history, comments and backlinks. When a merged change touches
672 something a doc cites, the doc is flagged for its owner to update.
673 </p>
674 <More to={`${DOCS}/guides/artifacts/`}>How Artifacts work</More>
675 </div>
676 <div>
677 <Points
678 columns={false}
679 points={[
680 "Docs edited together live",
681 "History, comments and backlinks",
682 "Flagged when a merged change touches what they cite",
683 { text: "Slides, designs and dashboards", soon: true },
684 ]}
685 />
686 </div>
687 </div>
688 </section>
689
690 {/* The rails. */}
691 <section className="mx-auto max-w-6xl px-4 py-24">
692 <Eyebrow>The rails</Eyebrow>
693 <h2 className="mt-3 max-w-2xl text-3xl font-semibold tracking-tight text-balance">Rules decide what lands, not whoever wrote it</h2>
694 <p className="mt-4 max-w-2xl leading-7 text-muted">
695 Scopes, rules, guardrails and audit are set by the workspace and enforced by g1t. They hold the same for a person at a keyboard and for the coding
696 agent working as them.
697 </p>
698 <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
699 {RAILS.map((item) => (
700 <Link key={item.title} to={item.to} className="group rounded-2xl bg-surface p-6 ring-1 ring-line transition-colors hover:ring-line-strong">
701 <span className="flex size-9 items-center justify-center rounded-lg bg-bg text-accent ring-1 ring-line">{item.icon}</span>
702 <h3 className="mt-5 font-semibold">{item.title}</h3>
703 <p className="mt-2 text-sm leading-6 text-muted">{item.about}</p>
704 </Link>
705 ))}
706 </div>
707 </section>
708
709 {/* How it flows */}
710 <section id="how" className="scroll-mt-20 border-y border-line bg-surface/40">
711 <div className="mx-auto max-w-6xl px-4 py-24">
712 <Eyebrow>How it flows</Eyebrow>
713 <h2 className="mt-3 text-3xl font-semibold tracking-tight">From a work item to main</h2>
714 <Live>
715 <ol className="relative mt-12 grid gap-6 md:grid-cols-5">
716 {/* From the first step's dot to the last one's, and no further: five
717 columns with 1.5rem gaps put the last dot 1rem into the last
718 column, so the line stops one column, less that, from the end. */}
719 <span
720 aria-hidden="true"
721 className="absolute top-4 right-[calc((100%-6rem)/5-1rem)] left-4 hidden h-px bg-linear-to-r from-accent/50 via-warn/50 to-success/70 md:block"
722 >
723 <span className="flow-runner absolute inset-0">
724 <span className="absolute -top-0.75 left-[-3.5px] size-1.75 rounded-full bg-accent shadow-[0_0_12px_2px_rgb(182_168_255/0.6)]" />
725 </span>
726 </span>
727 {FLOW.map(([step, about], index) => (
728 <li key={step} className="relative">
729 <span
730 className={`flow-step relative flex size-8 items-center justify-center rounded-full font-mono text-xs ring-1 ${
731 index === FLOW.length - 1 ? "bg-success text-bg ring-success" : "bg-bg text-fg-soft ring-line-strong"
732 }`}
733 style={{ "--delay": `${index * 2}s` } as CSSProperties}
734 >
735 {index + 1}
736 </span>
737 <h3 className="mt-4 font-semibold">{step}</h3>
738 <p className="mt-1.5 text-sm leading-6 text-muted">{about}</p>
739 </li>
740 ))}
741 </ol>
742 </Live>
743 </div>
744 </section>
745
746 {/* Secure by default */}
747 <section className="mx-auto max-w-6xl px-4 py-24">
748 <Eyebrow>Secure by default</Eyebrow>
749 <h2 className="mt-3 max-w-2xl text-3xl font-semibold tracking-tight text-balance">Safe to hand the work to, and healthy without anyone watching</h2>
750 <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
751 {SECURE.map((item) => (
752 <Link key={item.title} to={item.to} className="group rounded-2xl bg-surface p-6 ring-1 ring-line transition-colors hover:ring-line-strong">
753 <span className="flex size-9 items-center justify-center rounded-lg bg-bg text-accent ring-1 ring-line">{item.icon}</span>
754 <h3 className="mt-5 font-semibold">{item.title}</h3>
755 <p className="mt-2 text-sm leading-6 text-muted">{item.about}</p>
756 </Link>
757 ))}
758 </div>
759 </section>
760
761 {/* Switching: what moving in costs, and what holds if g1t goes away. */}
762 <section id="switching" className="mx-auto max-w-6xl scroll-mt-20 px-4 pb-24">
763 <div className="grid gap-10 rounded-3xl bg-surface p-8 ring-1 ring-line sm:p-10 lg:grid-cols-[1fr_1.1fr] lg:gap-16">
764 <div>
765 <Eyebrow>Switching</Eyebrow>
766 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">Moving in is an import. Leaving is a git clone.</h2>
767 <p className="mt-4 max-w-xl leading-7 text-muted">
768 Bring repositories across from GitHub in a few clicks: every branch and tag with full history, and their issues as work items if you want them.
769 The copy on g1t is then your own.
770 </p>
771 <p className="mt-4 max-w-xl leading-7 text-muted">
772 If g1t went away tomorrow, your code is plain git, the source is MIT licensed, and the core forge runs on your own machine with Docker Compose.
773 </p>
774 <More to={`${DOCS}/guides/github/#import-a-repository`}>Import from GitHub</More>
775 </div>
776 <div className="space-y-6">
777 <div>
778 <p className="text-sm font-medium">What keeps working</p>
779 <Points
780 columns={false}
781 points={[
782 "git over HTTPS, with your history as it is",
783 "GitHub Actions workflows: rename .github to .g1t and push",
784 "The coding agents you use today, through MCP",
785 "Leaving: git clone, and the REST API for the rest",
786 ]}
787 />
788 </div>
789 <div className="rounded-xl border border-dashed border-line-strong px-4 py-3.5 text-sm leading-6 text-muted">
790 <p className="font-medium text-fg-soft">Not a fit yet if you need</p>
791 <p className="mt-1.5">
792 Single sign-on, git over SSH, or chat and deployments on your own machines: those run only on g1t.sh today. Open pull requests, issue comments,
793 releases and wikis stay behind on import.{" "}
794 <Link to={`${DOCS}/about/limitations/`} className="text-fg-soft underline-offset-4 hover:text-accent hover:underline">
795 What g1t can&apos;t do yet
796 </Link>
797 </p>
798 </div>
799 </div>
800 </div>
801 </section>
802
803 {/* Pricing, in one band. */}
804 <section className="mx-auto max-w-6xl px-4 py-24">
805 <div className="flex flex-wrap items-end justify-between gap-6">
806 <div>
807 <Eyebrow>Pricing</Eyebrow>
808 <h2 className="mt-3 max-w-2xl text-3xl font-semibold tracking-tight text-balance">People chat free. Pay for what runs. Never per seat.</h2>
809 </div>
810 <More to="/pricing">See every price</More>
811 </div>
812 <div className="mt-10 grid gap-px overflow-hidden rounded-3xl bg-line ring-1 ring-line md:grid-cols-3">
813 {PRICES.map((item) => (
814 <div key={item.name} className="bg-surface p-7">
815 <p className="text-sm text-muted">{item.name}</p>
816 <p className="mt-3 flex flex-wrap items-baseline gap-x-2">
817 <span className="text-3xl font-semibold tracking-tight">{item.price}</span>
818 {item.unit && <span className="text-sm text-muted">{item.unit}</span>}
819 </p>
820 <p className="mt-3 text-sm leading-6 text-muted">{item.about}</p>
821 </div>
822 ))}
823 </div>
824 </section>
825
826 {/* Open source */}
827 <section className="mx-auto max-w-6xl px-4 pb-24">
828 <div className="grid gap-10 rounded-3xl bg-surface p-8 ring-1 ring-line sm:p-10 lg:grid-cols-[1.3fr_1fr]">
829 <div>
830 <Eyebrow>Open source</Eyebrow>
831 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">Open, and built on itself</h2>
832 <p className="mt-4 max-w-xl leading-7 text-muted">
833 g1t is MIT licensed. Its own source lives on g1t, and its changes land through its own merge queue. Your code is plain git: leaving is a{" "}
834 <code className="font-mono text-fg-soft">git clone</code>.
835 </p>
836 <p className="mt-4 max-w-xl leading-7 text-muted">
837 You can run the core forge yourself with Docker Compose today: accounts, repositories, work items, pull requests and search. It is an early
838 version, and chat and deployments still run only on g1t.sh.
839 </p>
840 <div className="mt-7 flex flex-wrap gap-3">
841 <ButtonLink to="/flagon-io/g1t" variant="outline">
842 Browse the source
843 </ButtonLink>
844 <ButtonLink to={`${DOCS}/guides/self-hosting/`} variant="outline">
845 Run g1t yourself
846 </ButtonLink>
847 </div>
848 </div>
849 <div className="flex flex-col justify-between gap-6">
850 <ul className="space-y-3 text-sm">
851 {[
852 {
853 icon: <Bell size={15} />,
854 text: "One place for mentions, reviews and approvals",
855 },
856 {
857 icon: <ScrollText size={15} />,
858 text: "One audit log for people and tokens",
859 },
860 {
861 icon: <Wallet size={15} />,
862 text: "One bill, priced from cost plus 20%",
863 },
864 ].map((item) => (
865 <li key={item.text} className="flex items-center gap-3 text-fg-soft">
866 <span className="flex size-7 items-center justify-center rounded-md bg-bg text-accent ring-1 ring-line">{item.icon}</span>
867 {item.text}
868 </li>
869 ))}
870 </ul>
871 <p className="text-sm leading-6 text-muted">g1t is made by Flagon, Inc.</p>
872 </div>
873 </div>
874 </section>
875
876 {/* The close. */}
877 <section className="mx-auto max-w-6xl px-4 pb-8">
878 <div className="dusk relative overflow-hidden rounded-3xl px-6 py-16 text-center ring-1 ring-line">
879 <h2 className="mx-auto max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Bring your team. Bring your agents.</h2>
880 <p className="mx-auto mt-4 max-w-xl text-fg-soft/80 text-balance">
881 Anyone can sign up. Create a workspace in a minute, push a repository and connect the coding agent you already use. Chat and the forge are free.
882 </p>
883 <div className="mt-8 flex flex-wrap justify-center gap-3">
884 <ButtonLink to="/register" size="lg" className="rounded-full">
885 Get started
886 <ArrowRight size={15} />
887 </ButtonLink>
888 <ButtonLink to={`${DOCS}/quickstart/`} variant="outline" size="lg" className="rounded-full">
889 Read the quickstart
890 </ButtonLink>
891 </div>
892 </div>
893 </section>
894 </main>
895 );
896}