181 lines
7.5 KiB
TypeScript
181 lines
7.5 KiB
TypeScript
|
/** Homepage — marketing landing page with hero, features, and CTA. */
|
||
|
|
import type { Metadata } from 'next'
|
||
|
|
import Image from 'next/image'
|
||
|
|
|
||
|
|
/** Page metadata for the homepage. */
|
||
|
|
export const metadata: Metadata = {
|
||
|
|
title: 'Huskies — Story-Driven Development for AI Agents',
|
||
|
|
description:
|
||
|
|
'Huskies is an autonomous development pipeline that turns user stories into tested, shipped code using AI agents.',
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Renders the huskies marketing homepage. */
|
||
|
|
export default function HomePage() {
|
||
|
|
return (
|
||
|
|
<div className="page">
|
||
|
|
<header className="reveal r1">
|
||
|
|
<a href="/" className="logo">huskies</a>
|
||
|
|
<nav>
|
||
|
|
<a href="#how">How it works</a>
|
||
|
|
<a href="#features">Features</a>
|
||
|
|
<div className="nav-dropdown">
|
||
|
|
<a href="#" className="nav-cta nav-dropdown-toggle">Start</a>
|
||
|
|
<div className="nav-dropdown-menu">
|
||
|
|
<a href="/docs/">Docs</a>
|
||
|
|
<a href="https://code.crashlabs.io/crashlabs/huskies">Source</a>
|
||
|
|
<a href="https://code.crashlabs.io/crashlabs/huskies/releases">Releases</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section className="hero">
|
||
|
|
<div className="hero-graphic reveal r1">
|
||
|
|
<Image src="/husky.png" alt="" className="hero-husky" width={160} height={160} />
|
||
|
|
</div>
|
||
|
|
<p className="hero-kicker reveal r1">Story-driven development</p>
|
||
|
|
<h1 className="reveal r2">
|
||
|
|
Coding agents are huskies,<br />not <span className="glow">labradors.</span>
|
||
|
|
</h1>
|
||
|
|
<p className="hero-sub reveal r3">
|
||
|
|
They're enthusiastic, sometimes wild, and they'll happily wander off on their own. But put
|
||
|
|
them in a harness and they'll take you anywhere. Huskies is the harness — a story-driven
|
||
|
|
pipeline that turns coding agents into a disciplined team.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div className="pipeline reveal r4">
|
||
|
|
<div className="pipe-stage">
|
||
|
|
<span className="pipe-dot"></span>
|
||
|
|
<span className="pipe-label">Story</span>
|
||
|
|
</div>
|
||
|
|
<span className="pipe-line"></span>
|
||
|
|
<div className="pipe-stage">
|
||
|
|
<span className="pipe-dot active"></span>
|
||
|
|
<span className="pipe-label">Implement</span>
|
||
|
|
</div>
|
||
|
|
<span className="pipe-line"></span>
|
||
|
|
<div className="pipe-stage">
|
||
|
|
<span className="pipe-dot"></span>
|
||
|
|
<span className="pipe-label">QA</span>
|
||
|
|
</div>
|
||
|
|
<span className="pipe-line"></span>
|
||
|
|
<div className="pipe-stage">
|
||
|
|
<span className="pipe-dot"></span>
|
||
|
|
<span className="pipe-label">Merge</span>
|
||
|
|
</div>
|
||
|
|
<span className="pipe-line"></span>
|
||
|
|
<div className="pipe-stage">
|
||
|
|
<span className="pipe-dot done"></span>
|
||
|
|
<span className="pipe-label">Done</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="how" className="how-section">
|
||
|
|
<h2 className="section-title reveal r5">How it works</h2>
|
||
|
|
<ol className="steps">
|
||
|
|
<li className="step reveal r5">
|
||
|
|
<span className="step-num">01</span>
|
||
|
|
<div className="step-body">
|
||
|
|
<h3>Write a story</h3>
|
||
|
|
<p>Describe what you want with acceptance criteria. From your IDE, a chat room, or WhatsApp.</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li className="step reveal r5">
|
||
|
|
<span className="step-num">02</span>
|
||
|
|
<div className="step-body">
|
||
|
|
<h3>Agent picks it up</h3>
|
||
|
|
<p>A coder agent creates a feature branch, implements the code, and writes tests against your criteria.</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li className="step reveal r6">
|
||
|
|
<span className="step-num">03</span>
|
||
|
|
<div className="step-body">
|
||
|
|
<h3>Quality gates run</h3>
|
||
|
|
<p>Linters, tests, and compilation checks run automatically. Nothing moves forward until everything passes.</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li className="step reveal r6">
|
||
|
|
<span className="step-num">04</span>
|
||
|
|
<div className="step-body">
|
||
|
|
<h3>Merge & land</h3>
|
||
|
|
<p>A merge agent resolves conflicts and squash-merges to your main branch. You review and accept.</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="features" className="features-section">
|
||
|
|
<h2 className="section-title reveal r7">Features</h2>
|
||
|
|
<div className="feature-grid">
|
||
|
|
<div className="feature reveal r7">
|
||
|
|
<div className="feature-icon">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||
|
|
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3>The Harness</h3>
|
||
|
|
<p>
|
||
|
|
Stories define the change. Tests define the truth. Code defines the reality. Every agent runs on
|
||
|
|
rails — nothing ships without acceptance criteria.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="feature reveal r7">
|
||
|
|
<div className="feature-icon">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||
|
|
<circle cx="18" cy="5" r="3" />
|
||
|
|
<circle cx="6" cy="12" r="3" />
|
||
|
|
<circle cx="18" cy="19" r="3" />
|
||
|
|
<path d="M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3>The Pack</h3>
|
||
|
|
<p>
|
||
|
|
Coder, QA, and merge agents work in parallel across isolated git worktrees. A coordinated pack, not
|
||
|
|
a lone wolf. Configure agent count, models, and budgets.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="feature reveal r8">
|
||
|
|
<div className="feature-icon">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||
|
|
<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3>Chat Anywhere</h3>
|
||
|
|
<p>
|
||
|
|
Control the pipeline from Matrix, WhatsApp, Slack, or the built-in web UI. Create stories, start
|
||
|
|
agents, check status.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="feature reveal r8">
|
||
|
|
<div className="feature-icon">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3>You're the Musher</h3>
|
||
|
|
<p>
|
||
|
|
Agents implement, test, and merge independently. You set the direction and approve what ships. Every
|
||
|
|
story is traceable from request to release.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section className="cta-section reveal r8">
|
||
|
|
<h2>Interested?</h2>
|
||
|
|
<p>
|
||
|
|
Huskies is built by <a href="https://crashlabs.io">Crash Labs</a>. Get in touch at{' '}
|
||
|
|
<a href="mailto:hello@huskies.dev">hello@huskies.dev</a>.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<footer className="reveal r8">
|
||
|
|
<span>© 2026 Libby Labs Ltd.</span>
|
||
|
|
<a href="mailto:hello@huskies.dev">Get in touch</a>
|
||
|
|
<a href="/privacy">Privacy Policy</a>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|