landing page updated for Gadget Agent release

This commit is contained in:
Rob Colbert 2026-05-26 18:14:33 -04:00
parent 2a2bbcd075
commit 40e0fb1bbc
8 changed files with 188 additions and 119 deletions

View File

@ -4,17 +4,17 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#0a0a0a" /> <meta name="theme-color" content="#0a0a0a" />
<meta name="description" content="Gadget Code — Self-hosted Agentic Engineering Platform. Build software with AI agents on your infrastructure, under your control." /> <meta name="description" content="Gadget AI — Home of Gadget Agent (your agentic browser assistant) and Gadget Code (self-hosted agentic engineering platform). AI that works for you, on your terms." />
<meta property="og:title" content="Gadget Code — Self-Hosted Agentic Engineering" /> <meta property="og:title" content="Gadget AI — Agentic Engineering & Browser Assistant" />
<meta property="og:description" content="The platform where AI agents and humans build software together — on your infrastructure, under your control." /> <meta property="og:description" content="Home of Gadget Agent — your agentic browser assistant — and Gadget Code — the self-hosted agentic engineering platform. AI that works for you, on your terms." />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content="https://g4dge7.com" /> <meta property="og:url" content="https://g4dge7.com" />
<meta property="og:image" content="/web-app.png" /> <meta property="og:image" content="/web-app.png" />
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Gadget Code — Self-Hosted Agentic Engineering" /> <meta name="twitter:title" content="Gadget AI — Agentic Engineering & Browser Assistant" />
<meta name="twitter:description" content="The platform where AI agents and humans build software together — on your infrastructure, under your control." /> <meta name="twitter:description" content="Home of Gadget Agent — your agentic browser assistant — and Gadget Code — the self-hosted agentic engineering platform." />
<link rel="icon" type="image/png" href="/favicon.png" /> <link rel="icon" type="image/png" href="/favicon.png" />
<title>Gadget Code — Self-Hosted Agentic Engineering Platform</title> <title>Gadget AI — Agentic Engineering & Browser Assistant</title>
</head> </head>
<body> <body>
<a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:px-4 focus:py-2 focus:bg-brand focus:text-white"> <a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:px-4 focus:py-2 focus:bg-brand focus:text-white">

View File

@ -3,7 +3,7 @@ import Header from './components/Header';
import Hero from './components/Hero'; import Hero from './components/Hero';
import ProblemSection from './components/ProblemSection'; import ProblemSection from './components/ProblemSection';
import GadgetCodeSection from './components/GadgetCodeSection'; import GadgetCodeSection from './components/GadgetCodeSection';
import GadgetSection from './components/GadgetSection'; import GadgetAgentSection from './components/GadgetAgentSection';
import BuiltWithSection from './components/BuiltWithSection'; import BuiltWithSection from './components/BuiltWithSection';
import GetStartedSection from './components/GetStartedSection'; import GetStartedSection from './components/GetStartedSection';
import Footer from './components/Footer'; import Footer from './components/Footer';
@ -23,12 +23,12 @@ export default function App() {
<main className="flex-1"> <main className="flex-1">
<Hero /> <Hero />
<div className="section-divider" /> <div className="section-divider" />
<GadgetAgentSection />
<div className="section-divider" />
<ProblemSection /> <ProblemSection />
<div className="section-divider" /> <div className="section-divider" />
<GadgetCodeSection /> <GadgetCodeSection />
<div className="section-divider" /> <div className="section-divider" />
<GadgetSection />
<div className="section-divider" />
<BuiltWithSection /> <BuiltWithSection />
<div className="section-divider" /> <div className="section-divider" />
<GetStartedSection /> <GetStartedSection />

View File

@ -23,7 +23,7 @@ export default function BuiltWithSection() {
</div> </div>
<p className="text-text-secondary leading-relaxed mb-4"> <p className="text-text-secondary leading-relaxed mb-4">
Gadget the browser extension and web app was built using Gadget Code. Gadget Agent the agentic browser assistant was built using Gadget Code.
Every feature, every line, every agent-assisted commit. The AI agent Every feature, every line, every agent-assisted commit. The AI agent
participated in development across all five workspace modes: Inspect, participated in development across all five workspace modes: Inspect,
Station, Update, Agent, and Agent+. Station, Update, Agent, and Agent+.
@ -37,8 +37,8 @@ export default function BuiltWithSection() {
</p> </p>
<p className="text-text-muted leading-relaxed text-sm italic"> <p className="text-text-muted leading-relaxed text-sm italic">
We don't ship anything we wouldn't use ourselves. Gadget Code built Gadget. We don't ship anything we wouldn't use ourselves. Gadget Code built Gadget Agent.
Gadget proves Gadget Code works. Gadget Agent proves Gadget Code works.
</p> </p>
{/* Visual data strip */} {/* Visual data strip */}

View File

@ -1,22 +1,35 @@
export default function GadgetSection() { export default function GadgetAgentSection() {
return ( return (
<section id="gadget" className="py-20 px-6"> <section id="gadget" className="py-20 px-6">
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
{/* Section Header */} {/* Section Header */}
<div className="text-center mb-16"> <div className="text-center mb-12">
<span className="text-xs font-mono tracking-widest text-brand mb-3 block"> <span className="text-xs font-mono tracking-widest text-brand mb-3 block">
PRODUCT PRODUCT
</span> </span>
<h2 className="text-3xl md:text-4xl font-mono font-bold tracking-tight text-text-primary"> <h2 className="text-3xl md:text-4xl font-mono font-bold tracking-tight text-text-primary">
Gadget: AI Where You Work Gadget Agent: AI That Works For You
</h2> </h2>
<p className="mt-4 text-text-secondary max-w-2xl mx-auto"> <p className="mt-4 text-text-secondary max-w-2xl mx-auto">
An agentic sidebar for your browser and a personal knowledge engine. Your agentic browser assistant. Gadget Agent understands context,
Gadget understands context, performs actions, and keeps your information performs actions on your behalf, and keeps your information connected
connected and actionable. and actionable powered by usage-based credits, not subscriptions.
</p> </p>
</div> </div>
{/* Video Demo */}
<div className="max-w-3xl mx-auto mb-12">
<div className="aspect-video w-full rounded-lg overflow-hidden border border-border-default">
<iframe
src="https://www.youtube.com/embed/u0QFS7uSVRo"
title="Gadget Agent Demo"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
className="w-full h-full"
/>
</div>
</div>
{/* Two Sub-Sections */} {/* Two Sub-Sections */}
<div className="grid md:grid-cols-2 gap-6 mb-8"> <div className="grid md:grid-cols-2 gap-6 mb-8">
{/* Browser Extension */} {/* Browser Extension */}
@ -36,7 +49,7 @@ export default function GadgetSection() {
</div> </div>
<p className="text-sm text-text-secondary leading-relaxed mb-4"> <p className="text-sm text-text-secondary leading-relaxed mb-4">
An agentic sidebar integrated into your browsing. Gadget understands An agentic sidebar integrated into your browsing. Gadget Agent understands
the page you're on and can perform actions on your behalf research, the page you're on and can perform actions on your behalf research,
form-filling, summarization, and more. It's AI that works where you form-filling, summarization, and more. It's AI that works where you
already are. already are.
@ -62,20 +75,18 @@ export default function GadgetSection() {
<h4 className="font-mono text-xs font-bold tracking-wide text-text-muted mb-3"> <h4 className="font-mono text-xs font-bold tracking-wide text-text-muted mb-3">
INSTALLATION INSTALLATION
</h4> </h4>
<div className="space-y-3 text-xs text-text-muted font-mono"> <p className="text-xs text-text-muted font-mono">
<div> Download the extension from{' '}
<span className="text-text-secondary">Chrome / Chromium:</span> <a
<p className="mt-1">Settings Extensions Enable Developer Mode Load Unpacked Select extension directory</p> href="https://agent.g4dge7.com/"
</div> target="_blank"
<div> rel="noopener noreferrer"
<span className="text-text-secondary">Firefox:</span> className="text-brand hover:text-brand-light underline underline-offset-2"
<p className="mt-1">about:debugging This Firefox Load Temporary Add-on Select manifest.json from extension directory</p> >
</div> agent.g4dge7.com
<div> </a>
<span className="text-text-secondary">Microsoft Edge:</span> {' '}and load it as an unpacked/dev-mode extension in your browser.
<p className="mt-1">edge://extensions → Enable Developer Mode → Load Unpacked → Select extension directory</p> </p>
</div>
</div>
</div> </div>
</div> </div>
@ -94,9 +105,18 @@ export default function GadgetSection() {
</div> </div>
<p className="text-sm text-text-secondary leading-relaxed mb-4"> <p className="text-sm text-text-secondary leading-relaxed mb-4">
Your personal knowledge engine. Chat with your information, meetings, Your personal knowledge engine, hosted at{' '}
documents, and notes. Persistent, searchable, and actionable. Gadget <a
connects what you know to what you need. href="https://agent.g4dge7.com/"
target="_blank"
rel="noopener noreferrer"
className="text-brand hover:text-brand-light underline underline-offset-2"
>
agent.g4dge7.com
</a>
. Chat with your information, meetings, documents, and notes.
Persistent, searchable, and actionable. Gadget Agent connects what
you know to what you need.
</p> </p>
<div className="space-y-2 text-sm text-text-muted"> <div className="space-y-2 text-sm text-text-muted">
@ -125,6 +145,24 @@ export default function GadgetSection() {
</div> </div>
</div> </div>
</div> </div>
{/* CTA */}
<div className="text-center">
<a
href="https://agent.g4dge7.com/"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-8 py-3 text-sm font-mono tracking-wider bg-brand hover:bg-brand-light text-white rounded transition-all shadow-lg shadow-brand/20"
>
GET GADGET AGENT
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" className="ml-1">
<path d="M1 7h12M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" />
</svg>
</a>
<p className="mt-3 text-xs font-mono text-text-muted">
Usage-based billing · Purchase credits via Stripe · Stored in your Gadget Wallet
</p>
</div>
</div> </div>
</section> </section>
); );

View File

@ -56,6 +56,19 @@ export default function GadgetCodeSection() {
</p> </p>
</div> </div>
{/* Video Demo */}
<div className="max-w-3xl mx-auto mb-12">
<div className="aspect-video w-full rounded-lg overflow-hidden border border-border-default">
<iframe
src="https://www.youtube.com/embed/hRp68KTq_2s"
title="Gadget Code Demo"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
className="w-full h-full"
/>
</div>
</div>
{/* Feature Grid */} {/* Feature Grid */}
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
{FEATURES.map((feature) => ( {FEATURES.map((feature) => (
@ -82,7 +95,7 @@ export default function GadgetCodeSection() {
{/* CTA */} {/* CTA */}
<div className="mt-12 text-center"> <div className="mt-12 text-center">
<a <a
href="https://git.g4dge7.com" href="https://git.g4dge7.com/dtp/gadget"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-8 py-3 text-sm font-mono tracking-wider border border-brand bg-brand hover:bg-brand-light text-white rounded transition-all shadow-lg shadow-brand/20" className="inline-flex items-center gap-2 px-8 py-3 text-sm font-mono tracking-wider border border-brand bg-brand hover:bg-brand-light text-white rounded transition-all shadow-lg shadow-brand/20"

View File

@ -12,9 +12,82 @@ export default function GetStartedSection() {
</h2> </h2>
</div> </div>
{/* Two Columns */} {/* Two Columns — Gadget Agent first (featured), Gadget Code second */}
<div className="grid md:grid-cols-2 gap-6"> <div className="grid md:grid-cols-2 gap-6">
{/* Gadget Code (Free) */}
{/* ── Gadget Agent (Usage-Based) ───────────────────────── */}
<div className="bg-bg-secondary border border-border-default rounded-lg p-6 relative overflow-hidden">
{/* Animated accent line */}
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-brand to-transparent animate-pulse-glow" />
{/* Status header */}
<div className="flex items-center gap-2 mb-4">
<div className="w-1.5 h-1.5 rounded-full bg-cyan-glow animate-pulse-glow" />
<span className="text-xs font-mono tracking-widest text-cyan-glow/80">
USAGE-BASED
</span>
</div>
<h3 className="text-2xl font-mono font-bold text-text-primary mb-2">
Gadget Agent
</h3>
<p className="text-text-secondary text-sm mb-1">
Agentic Browser Assistant
</p>
<p className="text-text-muted text-xs mb-6">
Purchase credits via Stripe. Credits stored in your Gadget Wallet.
Debited as your agent works for you.
</p>
{/* Features */}
<div className="mb-6 text-xs text-text-muted font-mono space-y-1">
<div className="flex items-center gap-2">
<span className="text-brand"></span>
<span>Agentic browser sidebar</span>
</div>
<div className="flex items-center gap-2">
<span className="text-brand"></span>
<span>Personal knowledge engine web app</span>
</div>
<div className="flex items-center gap-2">
<span className="text-brand"></span>
<span>Chrome, Firefox, and Edge support</span>
</div>
<div className="flex items-center gap-2">
<span className="text-brand"></span>
<span>No subscription pay only for what you use</span>
</div>
</div>
{/* CTAs */}
<a
href="https://agent.g4dge7.com/"
target="_blank"
rel="noopener noreferrer"
className="block w-full text-center px-6 py-3 text-sm font-mono tracking-wider border border-cyan-glow/50 bg-cyan-glow/10 hover:bg-cyan-glow/20 text-cyan-glow rounded transition-all mb-3"
>
GET GADGET AGENT
</a>
<a
href="https://agent.g4dge7.com/"
target="_blank"
rel="noopener noreferrer"
className="block w-full text-center px-6 py-3 text-sm font-mono tracking-wider border border-border-default hover:border-border-highlight text-text-secondary hover:text-text-primary rounded transition-all"
>
LEARN MORE
</a>
{/* "Built with" badge */}
<div className="mt-4 flex items-center justify-center gap-2">
<div className="w-1 h-1 rounded-full bg-green-glow" />
<span className="text-xs font-mono text-text-muted tracking-wide">
BUILT WITH GADGET CODE
</span>
</div>
</div>
{/* ── Gadget Code (Free & Open Source) ─────────────────── */}
<div className="bg-bg-secondary border border-border-default rounded-lg p-6"> <div className="bg-bg-secondary border border-border-default rounded-lg p-6">
{/* Status header */} {/* Status header */}
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-2 mb-4">
@ -53,7 +126,7 @@ export default function GetStartedSection() {
{/* CTAs */} {/* CTAs */}
<a <a
href="https://git.g4dge7.com" href="https://git.g4dge7.com/dtp/gadget"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="block w-full text-center px-6 py-3 text-sm font-mono tracking-wider border border-brand bg-brand hover:bg-brand-light text-white rounded transition-all mb-3" className="block w-full text-center px-6 py-3 text-sm font-mono tracking-wider border border-brand bg-brand hover:bg-brand-light text-white rounded transition-all mb-3"
@ -61,75 +134,14 @@ export default function GetStartedSection() {
GET THE SOURCE CODE GET THE SOURCE CODE
</a> </a>
<a <a
href="https://g4dge7.com/docs/install/" href="https://git.g4dge7.com/dtp/gadget/src/branch/master/docs/install/README.md"
target="_blank"
rel="noopener noreferrer"
className="block w-full text-center px-6 py-3 text-sm font-mono tracking-wider border border-border-default hover:border-border-highlight text-text-secondary hover:text-text-primary rounded transition-all" className="block w-full text-center px-6 py-3 text-sm font-mono tracking-wider border border-border-default hover:border-border-highlight text-text-secondary hover:text-text-primary rounded transition-all"
> >
INSTALLATION GUIDE INSTALLATION GUIDE
</a> </a>
</div> </div>
{/* Gadget (Subscription) */}
<div className="bg-bg-secondary border border-border-default rounded-lg p-6 relative overflow-hidden">
{/* Animated accent line */}
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-brand to-transparent animate-pulse-glow" />
{/* Status header */}
<div className="flex items-center gap-2 mb-4">
<div className="w-1.5 h-1.5 rounded-full bg-cyan-glow animate-pulse-glow" />
<span className="text-xs font-mono tracking-widest text-cyan-glow/80">
SUBSCRIPTION
</span>
</div>
<h3 className="text-2xl font-mono font-bold text-text-primary mb-2">
Gadget
</h3>
<p className="text-text-secondary text-sm mb-1">
AI in Your Browser
</p>
<p className="text-text-muted text-xs mb-6">
Subscription-based. Cancel anytime. Pay-as-you-go metered use also available.
</p>
{/* Features */}
<div className="mb-6 text-xs text-text-muted font-mono space-y-1">
<div className="flex items-center gap-2">
<span className="text-brand"></span>
<span>Agentic browser sidebar</span>
</div>
<div className="flex items-center gap-2">
<span className="text-brand"></span>
<span>Personal knowledge engine web app</span>
</div>
<div className="flex items-center gap-2">
<span className="text-brand"></span>
<span>Chrome, Firefox, and Edge support</span>
</div>
</div>
{/* CTAs */}
<a
href="#subscribe"
className="block w-full text-center px-6 py-3 text-sm font-mono tracking-wider border border-cyan-glow/50 bg-cyan-glow/10 hover:bg-cyan-glow/20 text-cyan-glow rounded transition-all mb-3"
>
SUBSCRIBE NOW
</a>
<a
href="#gadget"
className="block w-full text-center px-6 py-3 text-sm font-mono tracking-wider border border-border-default hover:border-border-highlight text-text-secondary hover:text-text-primary rounded transition-all"
>
LEARN MORE
</a>
{/* "Built with" badge */}
<div className="mt-4 flex items-center justify-center gap-2">
<div className="w-1 h-1 rounded-full bg-green-glow" />
<span className="text-xs font-mono text-text-muted tracking-wide">
BUILT WITH GADGET CODE
</span>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>

View File

@ -7,7 +7,7 @@ interface HeaderProps {
const NAV_LINKS = [ const NAV_LINKS = [
{ label: 'Why Gadget Code', href: '#why' }, { label: 'Why Gadget Code', href: '#why' },
{ label: 'Gadget Code', href: '#gadget-code' }, { label: 'Gadget Code', href: '#gadget-code' },
{ label: 'Gadget', href: '#gadget' }, { label: 'Gadget Agent', href: '#gadget' },
{ label: 'Get Started', href: '#get-started' }, { label: 'Get Started', href: '#get-started' },
]; ];
@ -36,11 +36,11 @@ export default function Header({ scrolled }: HeaderProps) {
<a href="#" className="flex items-center gap-3 group"> <a href="#" className="flex items-center gap-3 group">
<img <img
src="/favicon.png" src="/favicon.png"
alt="Gadget Code" alt="Gadget AI"
className="w-6 h-6" className="w-6 h-6"
/> />
<span className="font-mono text-sm font-bold tracking-wider text-text-primary group-hover:text-brand transition-colors"> <span className="font-mono text-sm font-bold tracking-wider text-text-primary group-hover:text-brand transition-colors">
GADGET CODE GADGET AI
</span> </span>
</a> </a>
@ -60,7 +60,7 @@ export default function Header({ scrolled }: HeaderProps) {
{/* Desktop CTAs */} {/* Desktop CTAs */}
<div className="hidden md:flex items-center gap-3"> <div className="hidden md:flex items-center gap-3">
<a <a
href="https://git.g4dge7.com" href="https://git.g4dge7.com/dtp/gadget"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="px-3 py-1.5 text-xs font-mono tracking-wide border border-border-default rounded hover:border-border-highlight hover:text-text-primary text-text-secondary transition-all" className="px-3 py-1.5 text-xs font-mono tracking-wide border border-border-default rounded hover:border-border-highlight hover:text-text-primary text-text-secondary transition-all"
@ -68,10 +68,12 @@ export default function Header({ scrolled }: HeaderProps) {
GET SOURCE GET SOURCE
</a> </a>
<a <a
href="#get-started" href="https://agent.g4dge7.com/"
target="_blank"
rel="noopener noreferrer"
className="px-3 py-1.5 text-xs font-mono tracking-wide bg-brand hover:bg-brand-light text-white rounded transition-colors" className="px-3 py-1.5 text-xs font-mono tracking-wide bg-brand hover:bg-brand-light text-white rounded transition-colors"
> >
SUBSCRIBE GET GADGET AGENT
</a> </a>
</div> </div>
@ -109,7 +111,7 @@ export default function Header({ scrolled }: HeaderProps) {
))} ))}
<div className="flex gap-3 pt-2 border-t border-border-default"> <div className="flex gap-3 pt-2 border-t border-border-default">
<a <a
href="https://git.g4dge7.com" href="https://git.g4dge7.com/dtp/gadget"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="px-3 py-1.5 text-xs font-mono tracking-wide border border-border-default rounded text-text-secondary hover:text-text-primary" className="px-3 py-1.5 text-xs font-mono tracking-wide border border-border-default rounded text-text-secondary hover:text-text-primary"
@ -117,11 +119,13 @@ export default function Header({ scrolled }: HeaderProps) {
GET SOURCE GET SOURCE
</a> </a>
<a <a
href="#get-started" href="https://agent.g4dge7.com/"
target="_blank"
rel="noopener noreferrer"
onClick={() => setMobileOpen(false)} onClick={() => setMobileOpen(false)}
className="px-3 py-1.5 text-xs font-mono tracking-wide bg-brand text-white rounded" className="px-3 py-1.5 text-xs font-mono tracking-wide bg-brand text-white rounded"
> >
SUBSCRIBE GET GADGET AGENT
</a> </a>
</div> </div>
</nav> </nav>

View File

@ -80,16 +80,18 @@ export default function Hero() {
{/* CTAs */} {/* CTAs */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4"> <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<a <a
href="#gadget-code" href="https://agent.g4dge7.com/"
className="px-8 py-3 text-sm font-mono tracking-wider border border-brand bg-brand hover:bg-brand-light text-white rounded transition-all shadow-lg shadow-brand/20" target="_blank"
rel="noopener noreferrer"
className="px-8 py-3 text-sm font-mono tracking-wider bg-brand hover:bg-brand-light text-white rounded transition-all shadow-lg shadow-brand/20"
> >
GET GADGET CODE GET GADGET AGENT
</a> </a>
<a <a
href="#gadget" href="#gadget-code"
className="px-8 py-3 text-sm font-mono tracking-wider border border-border-default hover:border-border-highlight text-text-secondary hover:text-text-primary rounded transition-all" className="px-8 py-3 text-sm font-mono tracking-wider bg-brand hover:bg-brand-light text-white rounded transition-all shadow-lg shadow-brand/20"
> >
GET GADGET GET GADGET CODE
</a> </a>
</div> </div>