Sign in

pulls/pr_01m47d15m3e54sn21z27rpy5n9

public

pr_01m47d15m3e54sn21z27rpy5n9/apps/web/app/routes/support.tsx

210 lines9,439 bytesCodeBlame
1import { ArrowUpRight, BookOpen, CircleAlert, CreditCard, LifeBuoy, Lock, ShieldAlert, Activity, Ticket } from "lucide-react";
2import type { ReactNode } from "react";
3import { Link } from "react-router";
4
5import type { Route } from "./+types/support";
6import { TrustPage } from "../components/trust-page";
7import { StatusDot, useSiteStatus } from "../components/footer";
8import { CONTACT } from "../lib/legal";
9import { page } from "../lib/meta";
10
11export function meta(args: Route.MetaArgs) {
12 return page(args, {
13 title: "Support · g1t",
14 description: "How to get help with g1t: the documentation, the status page, who to write to, and what to include.",
15 });
16}
17
18const DOCS: [string, string][] = [
19 ["Quickstart", "https://docs.g1t.sh/quickstart/"],
20 ["g1t agents", "https://docs.g1t.sh/guides/g1t-agents/"],
21 ["Git", "https://docs.g1t.sh/guides/git/"],
22 ["Accounts and sign-in", "https://docs.g1t.sh/guides/authentication/"],
23 ["Usage and billing", "https://docs.g1t.sh/guides/usage-and-billing/"],
24 ["Guardrails", "https://docs.g1t.sh/guides/guardrails/"],
25 ["API reference", "https://docs.g1t.sh/reference/api/"],
26 ["MCP tools", "https://docs.g1t.sh/reference/mcp/"],
27];
28
29const MAILBOXES: { icon: ReactNode; title: string; address: string; about: string }[] = [
30 {
31 icon: <LifeBuoy size={16} />,
32 title: "Help with g1t",
33 address: CONTACT.support,
34 about: "Accounts, workspaces, git, agents, deployments, something that doesn't work, or closing an account.",
35 },
36 {
37 icon: <Ticket size={16} />,
38 title: "Invites",
39 address: CONTACT.support,
40 about: "More invites for you or your workspace while g1t is invite-only. Say who you would like to bring.",
41 },
42 {
43 icon: <CreditCard size={16} />,
44 title: "Billing",
45 address: CONTACT.billing,
46 about: "Charges, invoices, refunds, custom terms and enterprise billing.",
47 },
48 {
49 icon: <ShieldAlert size={16} />,
50 title: "Security",
51 address: CONTACT.security,
52 about: "A vulnerability in g1t. See responsible disclosure on the security page.",
53 },
54 {
55 icon: <Lock size={16} />,
56 title: "Privacy",
57 address: CONTACT.privacy,
58 about: "A copy of your information, deleting it, or a question about how it's used.",
59 },
60 {
61 icon: <CircleAlert size={16} />,
62 title: "Report abuse",
63 address: CONTACT.abuse,
64 about: "Something on g1t that breaks the Acceptable Use Policy: malware, phishing, spam, infringement.",
65 },
66];
67
68function Section({ title, children }: { title: string; children: ReactNode }) {
69 return (
70 <section className="mt-14 first:mt-0">
71 <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
72 <div className="mt-4">{children}</div>
73 </section>
74 );
75}
76
77export default function Support() {
78 const status = useSiteStatus();
79 return (
80 <TrustPage
81 eyebrow="Support"
82 title="Get help with g1t"
83 lede={<p>Most answers are in the documentation. When they aren't, a person at g1t reads every message.</p>}
84 >
85 <div className="max-w-3xl">
86 <div className="grid gap-3 sm:grid-cols-2">
87 <a
88 href="https://docs.g1t.sh/"
89 className="group flex gap-3 rounded-xl border border-line bg-surface p-5 transition-colors hover:border-line-strong hover:bg-raised"
90 >
91 <BookOpen size={18} className="mt-0.5 shrink-0 text-accent" />
92 <span>
93 <span className="flex items-center gap-1 font-medium">
94 Read the documentation <ArrowUpRight size={14} className="text-faint group-hover:text-fg" />
95 </span>
96 <span className="mt-1 block text-sm text-muted">Guides for every part of g1t, and the API and MCP reference.</span>
97 </span>
98 </a>
99 <Link
100 to="/status"
101 className="group flex gap-3 rounded-xl border border-line bg-surface p-5 transition-colors hover:border-line-strong hover:bg-raised"
102 >
103 <Activity size={18} className="mt-0.5 shrink-0 text-accent" />
104 <span>
105 <span className="flex items-center gap-2 font-medium">
106 Check the status <StatusDot state={status?.overall.state ?? null} />
107 </span>
108 <span className="mt-1 block text-sm text-muted">
109 {status ? status.overall.line : "Whether each part of g1t is working right now."}
110 </span>
111 </span>
112 </Link>
113 </div>
114
115 <ul className="mt-6 flex flex-wrap gap-x-5 gap-y-2 text-sm text-muted">
116 {DOCS.map(([label, href]) => (
117 <li key={href}>
118 <a href={href} className="hover:text-fg">
119 {label}
120 </a>
121 </li>
122 ))}
123 </ul>
124
125 <Section title="Write to us">
126 {/* One mailbox for now; each topic says what to put in the subject so
127 mail can be sorted. Separate addresses can come back in CONTACT. */}
128 {new Set(MAILBOXES.map((box) => box.address)).size === 1 && (
129 <p className="mb-3 text-sm text-muted">
130 Write to{" "}
131 <a href={`mailto:${MAILBOXES[0].address}`} className="font-mono text-accent hover:underline">
132 {MAILBOXES[0].address}
133 </a>{" "}
134 and start the subject with the topic below.
135 </p>
136 )}
137 <ul className="divide-y divide-line rounded-xl border border-line">
138 {MAILBOXES.map((box) => (
139 <li key={box.title} className="flex flex-col gap-1 px-4 py-4 sm:flex-row sm:items-start sm:gap-4">
140 <span className="flex shrink-0 items-center gap-2 font-medium sm:w-40">
141 <span className="text-muted">{box.icon}</span>
142 {box.title}
143 </span>
144 <span className="min-w-0">
145 <a
146 href={`mailto:${box.address}?subject=${encodeURIComponent(`[g1t ${box.title}] `)}`}
147 className="font-mono text-sm text-accent hover:underline"
148 >
149 {new Set(MAILBOXES.map((other) => other.address)).size === 1 ? `Subject: [g1t ${box.title}]` : box.address}
150 </a>
151 <span className="mt-0.5 block text-sm text-muted">{box.about}</span>
152 </span>
153 </li>
154 ))}
155 </ul>
156 <p className="mt-4 text-sm text-muted">
157 Write from the email address on your g1t account, so we know it's you. Found a bug in g1t itself? You can
158 also open an issue on <Link to="/flagon-io/g1t/issues" className="text-accent hover:underline">flagon-io/g1t</Link>.
159 </p>
160 </Section>
161
162 <Section title="What to include">
163 <ul className="list-disc space-y-1.5 pl-5 text-[0.9375rem] text-fg/90">
164 <li>Your username, and the workspace and project, such as <code className="rounded bg-raised px-1.5 py-0.5 font-mono text-[0.85em]">g1t.sh/acme/web</code>.</li>
165 <li>A link to where it happened: the page, issue, pull request, agent run or workflow run.</li>
166 <li>What you did, what you expected, and what happened instead, with any error message as text.</li>
167 <li>When it happened, with your time zone.</li>
168 </ul>
169 <p className="mt-4 rounded-xl border border-warn/30 bg-warn/5 px-4 py-3 text-sm">
170 <span className="font-medium">Never send a password, an access token, a secret or a card number.</span>{" "}
171 <span className="text-muted">
172 g1t staff will never ask for them, by email or any other way. If you've sent one, revoke or change it.
173 </span>
174 </p>
175 </Section>
176
177 <Section title="From your workspace">
178 <p className="text-[0.9375rem] text-fg/90">
179 Owners can ask for two things straight from <span className="font-medium">Settings → Billing and plans</span>, and
180 the answer comes back to the same page and by email:
181 </p>
182 <ul className="mt-3 list-disc space-y-1.5 pl-5 text-[0.9375rem] text-fg/90">
183 <li>
184 <span className="font-medium">Raise my limit</span>, when the workspace needs more than its spend limit allows.
185 A person answers within one business day.
186 </li>
187 <li>
188 <span className="font-medium">Spent more than you meant to? Tell us.</span>, when a month ran over by
189 accident. See <Link to="/policies/refunds" className="text-accent hover:underline">refunds</Link> for the
190 goodwill credit.
191 </li>
192 </ul>
193 </Section>
194
195 <Section title="When you'll hear back">
196 <ul className="list-disc space-y-1.5 pl-5 text-[0.9375rem] text-fg/90">
197 <li>Help and billing: within one business day.</li>
198 <li>Security reports: acknowledged within two business days.</li>
199 <li>Privacy requests: within 30 days, usually much sooner.</li>
200 </ul>
201 <p className="mt-3 text-sm text-muted">
202 Business days are Monday to Friday, US time, apart from public holidays. If something seems down, the{" "}
203 <Link to="/status" className="text-accent hover:underline">status page</Link> checks every part of g1t each
204 minute.
205 </p>
206 </Section>
207 </div>
208 </TrustPage>
209 );
210}