+ {label && (
+ {label}
+ )}
+
+ );
+}
diff --git a/apps/marketing/components/ExternalLink.tsx b/apps/marketing/components/ExternalLink.tsx
new file mode 100644
index 000000000..c8ff37370
--- /dev/null
+++ b/apps/marketing/components/ExternalLink.tsx
@@ -0,0 +1,22 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+
+interface ExternalLinkProps extends AnchorHTMLAttributes{code}
+
+
+
+ );
+ }
+
+ return (
+ {title}
+{description}
+
+ {icon &&
+ );
+}
diff --git a/apps/marketing/components/FeatureGrid.tsx b/apps/marketing/components/FeatureGrid.tsx
new file mode 100644
index 000000000..512f2b610
--- /dev/null
+++ b/apps/marketing/components/FeatureGrid.tsx
@@ -0,0 +1,149 @@
+import { FeatureCard } from "./FeatureCard";
+
+/* Shared props to avoid repeating on every inline SVG icon */
+const svgProps = {
+ width: 20,
+ height: 20,
+ viewBox: "0 0 24 24",
+ fill: "none",
+ stroke: "currentColor",
+ strokeWidth: 2,
+ strokeLinecap: "round" as const,
+ strokeLinejoin: "round" as const,
+};
+
+const icons = {
+ messageSquare: (
+
+ ),
+ gitBranch: (
+
+ ),
+ fileDiff: (
+
+ ),
+ terminal: (
+
+ ),
+ listChecks: (
+
+ ),
+ shieldCheck: (
+
+ ),
+};
+
+const primaryFeatures = [
+ {
+ icon: icons.messageSquare,
+ title: "Codex and Claude, one interface",
+ description:
+ "Switch providers per thread. Stream responses in real time. Attach images, terminal output, or file context.",
+ },
+ {
+ icon: icons.gitBranch,
+ title: "Every thread, its own worktree",
+ description:
+ "Each conversation runs in an isolated git worktree. Your main branch stays clean. Merge when ready.",
+ },
+ {
+ icon: icons.fileDiff,
+ title: "Review every change",
+ description:
+ "Inline and side-by-side diffs with syntax highlighting. Accept or reject changes per file before committing.",
+ },
+ {
+ icon: icons.terminal,
+ title: "Built-in terminal",
+ description:
+ "Up to four terminal tabs per thread. Feed output directly to the agent. No window switching.",
+ },
+ {
+ icon: icons.listChecks,
+ title: "Structured implementation plans",
+ description:
+ "AI-generated step-by-step plans with status tracking. See the full scope before any code changes.",
+ },
+ {
+ icon: icons.shieldCheck,
+ title: "You stay in control",
+ description:
+ "Full-access or approval-required modes. Review every file write and command before execution.",
+ },
+];
+
+const secondaryFeatures = [
+ {
+ title: "GitHub PR review",
+ description: "Inline comments, conflict resolution, full review flow.",
+ },
+ {
+ title: "Reusable skills",
+ description: "Built-in and custom skill catalog for automation.",
+ },
+ {
+ title: "Restore any turn",
+ description: "Automatic snapshots. Roll back to any point in the conversation.",
+ },
+ {
+ title: "Desktop, web, mobile",
+ description: "npx, Electron, or Capacitor. Same experience everywhere.",
+ },
+];
+
+export function FeatureGrid() {
+ return (
+ {icon}
}
+ {title}
+{description}
++ Features +
+Everything you need
+ +
+ {primaryFeatures.map((feature) => (
+
+
+
+ {secondaryFeatures.map((feature) => (
+
+
+
+ Start building.
+One command. Zero config.
+ +
+
+
+
+ View on GitHub
+ Download Desktop
+ Join Discord
+
+
+ {/* Copy */}
+
+ {/* Bottom fade */}
+
+
+ {/* Mockup frame */}
+
+
+
+
+ A minimal web GUI for coding agents
+
+
+
+ Ship code with AI agents.
+
+
+
+ Chat with Codex and Claude in real time. Every thread runs in its own git worktree.
+ Review diffs, run terminals, and deploy — all from one interface.
+
+
+
+
+ Download Desktop
+
+
+
+
+ {/* Product render */}
+
+
+
+ {/* Subtle reflection glow under frame */}
+
+ + Quick start +
+Get running in 60 seconds
+ +
+ {steps.map((step) => (
+
+
+
+ {step.number}
+
+
+ ))}
+ {step.title}
+
+ {step.details.map((detail) => (
+
+
+ {detail}
+
+ ))}
+
+
+ Projects
+
+
+
+ {/* Active project */}
+
+
+
+
+
+
+ {/* Active thread */}
+
+
+
+
+
+ {/* File tree — static, minimal */}
+
+ refactor auth flow
+
+
+
+
+
+
+
+
+
+
+ {/* Bottom nav */}
+
+ Files
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Chat content — static, no scroll */}
+
+ refactor auth flow
+ acme-app
+
+
+
+
+ {/* User message */}
+
+
+ {/* Input — static */}
+
+
+
+ {/* Agent response */}
+
+
+ + Refactor the auth form to use server actions and add proper validation +
+
+
+ + { + "I'll refactor the auth form to use Next.js server actions with Zod validation. Let me start by updating the form component." + } +
+ +
+
+
+
+ Done. The auth form now uses
+
+
+
+
+
+
+
+
+ Ask anything, @tag files, or / for commands
+
+
+
+
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+ auth-form.tsx
+
+ api.ts
+ schema.ts
+
+
+ {/* Diff content — static */}
+
+ {`"use server";`}
+ {``}
+ {`import { z } from "zod";`}
+ {`import { authSchema } from "./schema";`}
+ {``}
+ {`export async function login(data) {`}
+ {`export async function login(`}
+ {` _prev: unknown,`}
+ {` formData: FormData`}
+ {`) {`}
+ {` const parsed = authSchema.safeParse({`}
+ {` email: formData.get("email"),`}
+ {` password: formData.get("pass"),`}
+ {` });`}
+ {``}
+ {` if (!parsed.success) {`}
+ {` return { errors: parsed.error.flatten() };`}
+ {` }`}
+
+
+ {/* Diff footer */}
+
+
+
+ +47
+ -23
+ 3 files
+
+
+
+ Reject
+
+
+ Accept
+
+
+
+
+ );
+}
+
+function TreeFile({
+ name,
+ indent = 0,
+ active = false,
+ dim = false,
+}: {
+ name: string;
+ indent?: number;
+ active?: boolean;
+ dim?: boolean;
+}) {
+ return (
+
+ {open ? (
+ <>
+
+ {open && children}
+
+
+ );
+}
+
+function SidebarLink({ icon: Icon, label }: { icon: React.ElementType; label: string }) {
+ return (
+
+
+ );
+}
+
+function Pill({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+function Mono({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+function DiffLine({
+ type,
+ num,
+ children,
+}: {
+ type: "add" | "remove" | "context";
+ num: string;
+ children: React.ReactNode;
+}) {
+ const colors = {
+ add: "bg-emerald-500/[0.06] text-emerald-300/70",
+ remove: "bg-red-500/[0.06] text-red-300/60 line-through",
+ context: "text-white/30",
+ };
+ const prefix = { add: "+", remove: "-", context: " " };
+
+ return (
+
+ {num}
+ {prefix[type]}
+ {children}
+
+ );
+}
diff --git a/apps/marketing/components/footer.tsx b/apps/marketing/components/footer.tsx
index ffa1fac5b..b7b61ae83 100644
--- a/apps/marketing/components/footer.tsx
+++ b/apps/marketing/components/footer.tsx
@@ -1,78 +1,24 @@
-export function Footer() {
- const footerLinks = {
- Features: [
- "Plan",
- "Build",
- "Insights",
- "Customer Requests",
- "Sprint Asks",
- "Security",
- "Mobile",
- ],
- Product: [
- "Pricing",
- "Method",
- "Integrations",
- "Changelog",
- "Documentation",
- "Download",
- "Switch",
- ],
- Company: ["About", "Customers", "Careers", "Now", "README", "Quality", "Brand"],
- Resources: [
- "Developers",
- "Status",
- "Startups",
- "Report vulnerability",
- "DPA",
- "Privacy",
- "Terms",
- ],
- Connect: ["Contact us", "Community", "X (Twitter)", "GitHub", "YouTube"],
- };
+import { ExternalLink } from "./ExternalLink";
+import { LINKS } from "./links";
+export function Footer() {
return (
-