UniqueSoft/APAW
2
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(landing): add APAW marketing landing page with dark/light theme toggle

Browse Source 
- Responsive HTML/CSS landing with full project presentation
- 30+ agent matrix table, pipeline phases, evolution section
- Domain skills showcase with Docker-native approach
- Pricing tiers: Developer 35€/mo, Team 200€/mo
- Dark/light theme toggle with system preference detection
- Theme persisted in localStorage, smooth CSS transitions
- Docker container running on port 3002 via nginx:alpine
- Cross-browser compatible, no horizontal scroll, mobile nav
This commit is contained in:
Deploy Bot
2026-05-23 22:48:19 +01:00
parent ded8e3022d
commit bb043cb23d
4 changed files with 1207 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
landing/Dockerfile Normal file
View File

@@ -0,0 +1,3 @@
FROM nginx:alpine
COPY landing /usr/share/nginx/html
EXPOSE 80

775
landing/assets/styles.css Normal file
View File

@@ -0,0 +1,775 @@
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html, body {
max-width: 100%;
overflow-x: hidden;
}
/* === DARK (default) === */
:root {
--bg: #0a0a0f;
--bg-elevated: #13131a;
--bg-card: #1a1a24;
--bg-hover: #222230;
--bg-code: #0c0c12;
--border: rgba(255,255,255,0.07);
--border-hover: rgba(255,255,255,0.14);
--text: #e5e6e8;
--text-muted: #8b8d94;
--text-inverse: #0a0a0f;
--accent: #6366f1;
--accent-2: #a855f7;
--accent-3: #06b6d4;
--accent-green: #4ade80;
--accent-yellow: #facc15;
--gradient: linear-gradient(135deg, #6366f1, #a855f7, #06b6d4);
--gradient-soft: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(168,85,247,0.12));
--gradient-table: linear-gradient(90deg, rgba(99,102,241,0.12), rgba(168,85,247,0.08));
--radius: 20px;
--radius-sm: 12px;
--shadow: 0 8px 32px rgba(0,0,0,0.45);
--shadow-hover: 0 16px 48px rgba(0,0,0,0.55);
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
--toggle-track: #2a2a3a;
--toggle-thumb: #6366f1;
}
/* === LIGHT === */
html[data-theme="light"] {
--bg: #f8f9fb;
--bg-elevated: #f0f1f5;
--bg-card: #ffffff;
--bg-hover: #eceef3;
--bg-code: #f3f4f8;
--border: rgba(0,0,0,0.08);
--border-hover: rgba(0,0,0,0.16);
--text: #1a1b22;
--text-muted: #5b5d66;
--text-inverse: #ffffff;
--accent: #6366f1;
--accent-2: #a855f7;
--accent-3: #0ea5e9;
--accent-green: #16a34a;
--accent-yellow: #ca8a04;
--gradient: linear-gradient(135deg, #6366f1, #a855f7, #0ea5e9);
--gradient-soft: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(168,85,247,0.07));
--gradient-table: linear-gradient(90deg, rgba(99,102,241,0.06), rgba(168,85,247,0.04));
--shadow: 0 4px 20px rgba(0,0,0,0.08);
--shadow-hover: 0 8px 32px rgba(0,0,0,0.12);
--toggle-track: #d1d5db;
--toggle-thumb: #6366f1;
}
/* Smooth theme transition on everything */
*, *::before, *::after {
transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
word-wrap: break-word;
}
/* Scroll to top */
.scroll-top {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--gradient);
color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity .3s, transform .3s, visibility .3s;
box-shadow: var(--shadow);
}
.scroll-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-top:hover { transform: translateY(-2px); }
/* Theme toggle */
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: 1.5px solid var(--border);
border-radius: 999px;
padding: 6px 12px;
cursor: pointer;
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
transition: border-color .2s, background .2s;
}
.theme-toggle:hover { border-color: var(--border-hover); background: var(--bg-hover); }
.theme-toggle__icon { font-size: 16px; line-height: 1; }
/* Containers */
.container {
width: 100%;
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
@media (min-width: 768px) { .container { padding: 0 24px; } }
@media (min-width: 1024px) { .container { padding: 0 32px; } }
.gradient {
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* HERO */
.hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
background:
radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,0.18), transparent),
radial-gradient(ellipse 50% 40% at 80% 70%, rgba(168,85,247,0.10), transparent),
var(--bg);
}
[data-theme="light"] .hero {
background:
radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,0.08), transparent),
radial-gradient(ellipse 50% 40% at 80% 70%, rgba(168,85,247,0.05), transparent),
var(--bg);
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 80%, rgba(6,182,212,0.07) 0%, transparent 45%),
radial-gradient(circle at 80% 20%, rgba(168,85,247,0.07) 0%, transparent 45%);
pointer-events: none;
}
[data-theme="light"] .hero::before {
background:
radial-gradient(circle at 18% 80%, rgba(6,182,212,0.04) 0%, transparent 45%),
radial-gradient(circle at 80% 20%, rgba(168,85,247,0.04) 0%, transparent 45%);
}
/* NAV */
.nav {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 20px;
max-width: 1200px;
margin: 0 auto;
width: 100%;
gap: 12px;
}
@media (min-width: 768px) { .nav { padding: 24px 32px; } }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -0.5px; }
.logo__icon {
width: 36px; height: 36px; border-radius: 10px;
background: var(--gradient);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 16px;
flex-shrink: 0;
}
/* Nav toggle */
.nav__toggle {
display: flex;
flex-direction: column;
gap: 5px;
background: transparent;
border: none;
padding: 6px;
cursor: pointer;
flex-shrink: 0;
}
.nav__toggle span {
display: block;
width: 24px; height: 2px;
background: var(--text);
border-radius: 1px;
transition: transform .25s, opacity .25s;
}
.nav__links {
display: none;
flex-direction: column;
gap: 6px;
position: absolute;
top: 100%; right: 20px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 10px;
min-width: 180px;
box-shadow: var(--shadow);
z-index: 100;
}
.nav__links.is-open { display: flex; }
.nav__links a {
display: block;
color: var(--text-muted); text-decoration: none;
font-weight: 500; font-size: 14px;
padding: 8px 12px; border-radius: 8px;
transition: background .2s, color .2s;
}
.nav__links a:hover { color: var(--text); background: var(--bg-hover); }
.nav__link--cta {
background: var(--gradient) !important;
color: #fff !important;
text-align: center;
}
.nav__link--cta:hover { opacity: .92; }
/* Nav actions (theme toggle) */
.nav__actions {
display: flex;
align-items: center;
margin-left: auto;
margin-right: 8px;
}
@media (min-width: 768px) {
.nav__actions { margin-right: 0; }
}
@media (min-width: 768px) {
.nav__toggle { display: none; }
.nav__links {
display: flex !important;
flex-direction: row;
gap: 24px;
position: static;
background: transparent;
border: none;
padding: 0;
box-shadow: none;
min-width: auto;
}
.nav__links a { padding: 0; }
.nav__links a:hover { background: transparent; }
.nav__link--cta {
padding: 10px 22px !important;
border-radius: 10px;
}
}
@media (min-width: 1024px) { .nav__links { gap: 32px; } }
/* Hero content */
.hero__content {
position: relative;
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center;
padding: 40px 20px 72px;
max-width: 980px; margin: 0 auto;
width: 100%;
}
.hero__badge {
display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-muted);
font-size: 11px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase;
padding: 8px 16px; border-radius: 999px; margin-bottom: 32px;
}
.hero__sep { color: var(--border-hover); }
.hero__title {
font-size: clamp(32px, 5.5vw, 60px);
font-weight: 800; line-height: 1.08; letter-spacing: -1.5px;
margin-bottom: 20px;
word-break: keep-all;
}
.hero__subtitle {
font-size: clamp(15px, 1.8vw, 19px);
color: var(--text-muted); max-width: 700px; line-height: 1.7; margin-bottom: 36px;
}
.hero__actions {
display: flex; gap: 12px; margin-bottom: 56px;
flex-wrap: wrap; justify-content: center;
}
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 13px 28px; border-radius: 14px;
font-weight: 600; font-size: 15px;
text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
transition: transform .15s ease, box-shadow .2s ease, opacity .2s;
white-space: nowrap;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
background: var(--gradient); color: #fff;
box-shadow: 0 8px 24px rgba(99,102,241,0.35);
}
.btn--primary:hover { box-shadow: 0 12px 32px rgba(99,102,241,0.45); }
[data-theme="light"] .btn--primary {
box-shadow: 0 6px 20px rgba(99,102,241,0.20);
}
.btn--ghost {
background: transparent; color: var(--text);
border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--border-hover); background: var(--bg-hover); }
.btn--outline {
background: transparent; color: var(--text);
border-color: var(--border);
}
.btn--outline:hover { border-color: var(--accent); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.25); }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.05); }
[data-theme="light"] .btn--outline-light { color: var(--text); border-color: var(--border); }
[data-theme="light"] .btn--outline-light:hover { border-color: var(--accent); background: var(--bg-hover); }
.btn--light { background: #fff; color: #1a1b22; }
[data-theme="light"] .btn--light { background: var(--text); color: var(--bg); }
.btn--lg { padding: 16px 36px; font-size: 16px; }
.btn--full { width: 100%; }
/* Stats */
.hero__stats {
display: flex; gap: 28px; justify-content: center; flex-wrap: wrap;
}
.stat { text-align: center; }
.stat__value {
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1;
}
.stat__label { font-size: 11px; color: var(--text-muted); margin-top: 6px; letter-spacing: 0.5px; text-transform: uppercase; }
/* Trusted */
.trusted {
text-align: center; padding: 48px 20px;
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) { .trusted { padding: 56px 24px; } }
.trusted__text { font-size: 12px; color: var(--text-muted); margin-bottom: 18px; letter-spacing: 0.8px; text-transform: uppercase; font-weight: 600; }
.trusted__logos {
display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: center; align-items: center; max-width: 900px; margin: 0 auto;
}
.trusted__logos span {
display: inline-flex; align-items: center; gap: 6px;
background: var(--bg-card); border: 1px solid var(--border); padding: 8px 14px; border-radius: 10px;
font-size: 13px; font-weight: 500; color: var(--text-muted);
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.trusted__logos span:hover { border-color: var(--border-hover); transform: translateY(-1px); box-shadow: var(--shadow); }
/* Sections */
.workflow, .agents, .evolution, .skills, .pricing { padding: 80px 0; }
@media (min-width: 768px) { .workflow, .agents, .evolution, .skills, .pricing { padding: 100px 0; } }
.section__title {
text-align: center; font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; letter-spacing: -1px; margin-bottom: 14px;
padding: 0 20px;
}
.section__subtitle {
text-align: center; color: var(--text-muted); max-width: 660px; margin: 0 auto 56px; font-size: 15px; line-height: 1.7;
padding: 0 20px;
}
.section__subheading {
text-align: center; font-size: 18px; font-weight: 700; letter-spacing: -0.2px; margin: 56px 0 18px;
padding: 0 20px;
}
.section__caption {
text-align: center; color: var(--text-muted); font-size: 13px; max-width: 640px; margin: 0 auto; line-height: 1.6;
padding: 0 20px;
}
/* Workflow states */
.states { max-width: 680px; margin: 0 auto; padding: 0 20px; }
.state-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 20px 22px;
display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.state-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-hover); }
.state-card__num {
width: 34px; height: 34px; border-radius: 50%;
background: var(--gradient); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.state-card__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.state-card__state {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(99,102,241,0.10); color: var(--accent);
padding: 3px 10px; border-radius: 6px;
font-size: 11px; font-weight: 600; font-family: var(--font-mono);
letter-spacing: .2px;
}
.state-card__agent {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(6,182,212,0.08); color: var(--accent-3);
padding: 3px 10px; border-radius: 6px;
font-size: 11px; font-weight: 600; font-family: var(--font-mono);
letter-spacing: .2px;
}
[data-theme="light"] .state-card__agent {
background: rgba(14,165,233,0.08); color: #0284c7;
}
.state-card__desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.state-arrow {
display: flex; align-items: center; justify-content: center;
color: var(--text-muted); font-size: 20px; padding: 4px 0; opacity: .25;
}
@media (max-width: 480px) {
.state-card { grid-template-columns: 1fr; gap: 10px; text-align: center; }
.state-card__meta { justify-content: center; }
}
/* Agent table */
.table-wrap {
margin: 0 20px 28px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.table-hint {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px; font-size: 12px; color: var(--text-muted);
background: var(--bg-elevated); border-bottom: 1px solid var(--border);
}
.table-hint__icon { font-size: 16px; color: var(--accent); animation: swipeHint 2s infinite; }
@keyframes swipeHint {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(6px); }
}
.agent-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.agent-table thead th {
background: var(--bg-elevated); color: var(--text-muted); font-weight: 600; text-align: left;
padding: 12px 14px; border-bottom: 1px solid var(--border);
white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
}
.agent-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.agent-table tbody tr { transition: background .2s; }
.agent-table tbody tr:hover { background: rgba(128,128,128,0.04); }
.agent-table__cat td {
background: var(--gradient-table);
color: var(--text); font-weight: 700; font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase;
padding: 8px 14px; border-bottom: 1px solid var(--border);
}
.agent-table__name { font-weight: 600; font-family: var(--font-mono); font-size: 12px; color: var(--text); }
.agent-table__cell-w { white-space: normal; min-width: 160px; font-size: 12.5px; }
.agent-table__model {
font-family: var(--font-mono); font-size: 11px; color: var(--accent-3);
background: rgba(6,182,212,0.06); padding: 3px 8px; border-radius: 6px;
display: inline-block;
}
[data-theme="light"] .agent-table__model {
background: rgba(14,165,233,0.08); color: #0284c7;
}
/* Allow horizontal scroll on TABLE ONLY */
.agent-table {
display: block;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.agent-table thead, .agent-table tbody, .agent-table tr, .agent-table th, .agent-table td {
white-space: nowrap;
}
.agent-table tbody { display: table; width: 100%; }
.score {
display: inline-flex; align-items: center; justify-content: center;
min-width: 34px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 700;
}
.score--good { background: rgba(74,222,128,0.10); color: var(--accent-green); }
.score--warn { background: rgba(250,204,21,0.10); color: var(--accent-yellow); }
@media (min-width: 1024px) {
.agent-table__cell-w { white-space: nowrap; }
.table-hint { display: none; }
}
/* Code block */
.code-block {
background: var(--bg-code);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 18px 20px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 20px 14px;
}
.code-block pre { margin: 0; }
.code-block code {
font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
color: var(--text-muted); word-break: normal;
}
.token-comment { color: #6c7086; }
[data-theme="light"] .token-comment { color: #9ca3af; }
.token-punct { color: #a6adc8; }
[data-theme="light"] .token-punct { color: #6b7280; }
.token-attr { color: #89dceb; }
[data-theme="light"] .token-attr { color: #0369a1; }
.token-str { color: #a6e3a1; }
[data-theme="light"] .token-str { color: #15803d; }
.token-num { color: #fab388; }
[data-theme="light"] .token-num { color: #c2410c; }
/* Evolution */
.evolution { background: var(--bg-elevated); }
.evolution__grid {
display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0 20px;
}
@media (min-width: 640px) { .evolution__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .evolution__grid { grid-template-columns: repeat(4, 1fr); } }
.evo-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 24px;
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.evo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--border-hover); }
.evo-card__title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 10px; font-weight: 700; }
.evo-card__value {
font-size: 28px; font-weight: 800; letter-spacing: -1px; margin-bottom: 10px;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.evo-card__desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; }
/* Flow */
.flow {
display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0 20px;
max-width: 960px; margin: 0 auto;
}
@media (min-width: 640px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .flow { grid-template-columns: repeat(5, 1fr); } }
.flow-step {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 20px;
position: relative;
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.flow-step:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-hover); }
.flow-step--loop { border-color: rgba(99,102,241,0.25); }
.flow-step--loop:hover { border-color: rgba(99,102,241,0.45); }
.flow-step__num {
width: 26px; height: 26px; border-radius: 50%;
background: var(--gradient); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; margin-bottom: 12px;
}
.flow-step__name { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.flow-step__desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
/* Skills */
.skills__grid { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0 20px; }
@media (min-width: 640px) { .skills__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .skills__grid { grid-template-columns: repeat(3, 1fr); } }
.skill-chip {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 16px 18px;
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.skill-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-hover); }
.skill-chip__cat {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
color: var(--accent); margin-bottom: 6px;
}
.skill-chip__items { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
/* Pricing */
.pricing { background: var(--bg-elevated); }
.pricing__grid {
display: grid; grid-template-columns: 1fr; gap: 20px;
max-width: 860px; margin: 0 auto;
padding: 0 20px;
align-items: stretch;
}
@media (min-width: 768px) { .pricing__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
.pricing-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px;
display: flex; flex-direction: column;
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pricing-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.pricing-card--featured {
border-color: rgba(99,102,241,0.30);
background:
var(--bg-card)
radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,0.08), transparent);
position: relative;
overflow: hidden;
}
.pricing-card--featured:hover { border-color: rgba(99,102,241,0.50); }
[data-theme="light"] .pricing-card--featured {
border-color: rgba(99,102,241,0.20);
background:
var(--bg-card)
radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,0.04), transparent);
}
.pricing-card__badge {
position: absolute; top: 16px; right: -32px;
background: var(--gradient);
color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
padding: 4px 36px;
transform: rotate(35deg);
width: 130px; text-align: center;
}
.pricing-card__name { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 10px; }
.pricing-card__price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 10px; }
.pricing-card__amount { font-size: 44px; font-weight: 800; letter-spacing: -2px; }
.pricing-card__amount--hl { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pricing-card__currency { font-size: 26px; font-weight: 700; }
.pricing-card__period { font-size: 14px; color: var(--text-muted); }
.pricing-card__tag { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
.pricing-card__list { list-style: none; flex: 1; margin-bottom: 24px; }
.pricing-card__list li {
padding: 9px 0; border-bottom: 1px solid var(--border);
font-size: 13px; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5;
}
.pricing-card__list li:last-child { border-bottom: none; }
.pricing-card__check {
color: var(--accent-green); font-weight: 700; font-size: 14px; flex-shrink: 0; margin-top: 1px;
}
/* CTA */
.cta {
padding: 80px 20px;
background:
radial-gradient(ellipse 80% 60% at 50% 120%, rgba(99,102,241,0.14), transparent),
radial-gradient(ellipse 50% 40% at 20% 40%, rgba(168,85,247,0.08), transparent),
var(--bg-elevated);
text-align: center;
}
@media (min-width: 768px) { .cta { padding: 100px 24px; } }
[data-theme="light"] .cta {
background:
radial-gradient(ellipse 80% 60% at 50% 120%, rgba(99,102,241,0.06), transparent),
radial-gradient(ellipse 50% 40% at 20% 40%, rgba(168,85,247,0.04), transparent),
var(--bg-elevated);
}
.section__title--light { color: #fff; }
[data-theme="light"] .section__title--light { color: var(--text); }
.section__subtitle--light { color: rgba(255,255,255,0.5); }
[data-theme="light"] .section__subtitle--light { color: var(--text-muted); }
.cta__actions { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 36px; margin-bottom: 24px; }
.cta__or { color: var(--text-muted); font-size: 14px; }
.cta__bottom { display: flex; justify-content: center; margin-top: 16px; }
/* Footer */
.footer { padding: 56px 20px 28px; background: var(--bg); border-top: 1px solid var(--border); }
@media (min-width: 768px) { .footer { padding: 64px 24px 32px; } }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: 40px; } }
.footer__desc { font-size: 14px; color: var(--text-muted); margin-top: 12px; line-height: 1.6; }
.footer__col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; color: var(--text-muted); }
.footer__col a {
display: block; font-size: 14px; color: var(--text-muted);
text-decoration: none; margin-bottom: 8px;
transition: color .2s, transform .2s; cursor: pointer;
}
.footer__col a:hover { color: var(--text); transform: translateX(2px); }
.footer__bottom {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: var(--text-muted);
border-top: 1px solid var(--border); padding-top: 20px;
flex-wrap: wrap; gap: 8px;
}
.footer__made { font-style: italic; }
/* Animations */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
.hero__badge, .hero__title, .hero__subtitle, .hero__actions, .hero__stats {
animation: fadeUp .8s ease both;
}
.hero__title { animation-delay: .1s; }
.hero__subtitle { animation-delay: .2s; }
.hero__actions { animation-delay: .3s; }
.hero__stats { animation-delay: .4s; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

17
landing/docker-compose.yml Normal file
View File

@@ -0,0 +1,17 @@
version: '3.8'
services:
apaw-landing:
build:
context: ..
dockerfile: landing/Dockerfile
container_name: apaw-landing
ports:
- "3002:80"
restart: unless-stopped
networks:
- apaw-landing-net
networks:
apaw-landing-net:
driver: bridge

412
landing/index.html Normal file
View File

@@ -0,0 +1,412 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#0a0a0f">
<title>APAW — Автономный AI-конвейер самоулучшающегося кода</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/styles.css">
</head>
<body>
<!-- SCROLL TOP -->
<button class="scroll-top" aria-label="Наверх" onclick="window.scrollTo({top:0,behavior:'smooth'})">&uarr;</button>
<!-- HERO -->
<header class="hero" id="top">
<nav class="nav">
<div class="logo"><span class="logo__icon">&#x27A4;</span><span class="logo__text">APAW</span></div>
<button class="nav__toggle" aria-label="Меню" aria-expanded="false" onclick="this.setAttribute('aria-expanded',this.getAttribute('aria-expanded')==='true' ? 'false' : 'true')">
<span></span><span></span><span></span>
</button>
<div class="nav__actions">
<button class="theme-toggle" id="themeToggle" aria-label="Переключить тему" title="Переключить тему">
<span class="theme-toggle__icon" id="themeIcon">&#9728;</span>
<span class="theme-toggle__label" id="themeLabel">Светло</span>
</button>
</div>
<div class="nav__links">
<a href="#workflow">Пайплайн</a>
<a href="#agents">Агенты</a>
<a href="#evolution">Эволюция</a>
<a href="#skills">Скиллы</a>
<a href="#pricing">Тарифы</a>
<a href="#contact" class="nav__link nav__link--cta">Начать</a>
</div>
</nav>
<div class="hero__content">
<div class="hero__badge">Gitea-Nervous-System v2.0 <span class="hero__sep">/</span> 30+ агента <span class="hero__sep">/</span> Self-improving</div>
<h1 class="hero__title">Автономный AI-конвейер<br><span class="gradient">самоулучшающегося кода</span></h1>
<p class="hero__subtitle">
Распределенная система из <strong>30+ специализированных AI-агентов</strong>, оркестрируемых через Gitea.<br>
От идеи до продакшена — полностью автоматически. Самоанализ, саморевью, самоэволюция.
</p>
<div class="hero__actions">
<a href="#pricing" class="btn btn--primary">Подключить доступ</a>
<a href="#workflow" class="btn btn--ghost">Посмотреть пайплайн</a>
</div>
<div class="hero__stats">
<div class="stat"><div class="stat__value">30+</div><div class="stat__label">AI-агентов</div></div>
<div class="stat"><div class="stat__value">11</div><div class="stat__label">LLM-моделей</div></div>
<div class="stat"><div class="stat__value">8/10</div><div class="stat__label">Оценка кода</div></div>
<div class="stat"><div class="stat__value">0.91</div><div class="stat__label">Фитнес-скор</div></div>
<div class="stat"><div class="stat__value">15+</div><div class="stat__label">Скиллов</div></div>
</div>
</div>
</header>
<!-- VALUE PROPS -->
<section class="trusted">
<p class="trusted__text">Поддерживает стеки разработки</p>
<div class="trusted__logos">
<span>Gitea</span><span>Docker</span><span>TypeScript</span><span>Go</span>
<span>PHP / Laravel</span><span>Python / Django / FastAPI</span>
<span>Vue / Nuxt</span><span>React / Next.js</span><span>Flutter</span><span>WordPress</span>
</div>
</section>
<!-- WORKFLOW STATES -->
<section id="workflow" class="workflow">
<div class="container">
<h2 class="section__title">Пайплайн <span class="gradient">от задачи до релиза</span></h2>
<p class="section__subtitle">Каждая задача проходит через 8 фаз с автоматической сменой статус-лейблов.<br>Оркестратор выбирает агента под каждую фазу, исходя из типа задачи и состояния.</p>
<div class="states">
<div class="state-card"><div class="state-card__num">1</div><div class="state-card__meta"><div class="state-card__state">status: new</div><div class="state-card__agent">@RequirementRefiner</div></div><p class="state-card__desc">Превращает идею или баг-репорт в строгую User Story с критериями приемки.</p></div>
<div class="state-arrow">&darr;</div>
<div class="state-card"><div class="state-card__num">2</div><div class="state-card__meta"><div class="state-card__state">status: planned</div><div class="state-card__agent">@HistoryMiner</div></div><p class="state-card__desc">Ищет дубли в git-истории и прошлых решениях, чтобы избежать регрессий и повторной работы.</p></div>
<div class="state-arrow">&darr;</div>
<div class="state-card"><div class="state-card__num">3</div><div class="state-card__meta"><div class="state-card__state">status: researching</div><div class="state-card__agent">@SystemAnalyst</div></div><p class="state-card__desc">Проектирует спецификации, схемы данных, API-контракты и архитектуру до написания кода.</p></div>
<div class="state-arrow">&darr;</div>
<div class="state-card"><div class="state-card__num">4</div><div class="state-card__meta"><div class="state-card__state">status: designed</div><div class="state-card__agent">@SdetEngineer</div></div><p class="state-card__desc">Пишет тесты по методологии TDD — до кода. Mock'и, fixtures, edge cases — всё сразу.</p></div>
<div class="state-arrow">&darr;</div>
<div class="state-card"><div class="state-card__num">5</div><div class="state-card__meta"><div class="state-card__state">status: testing</div><div class="state-card__agent">@LeadDeveloper</div></div><p class="state-card__desc">Пишет код, чтобы тесты прошли. Backend, frontend, Go, PHP, Python — подключается узкоспециализированный агент.</p></div>
<div class="state-arrow">&darr;</div>
<div class="state-card"><div class="state-card__num">6</div><div class="state-card__meta"><div class="state-card__state">status: implementing</div><div class="state-card__agent">@CodeSkeptic → @TheFixer</div></div><p class="state-card__desc">Адверсариальное ревью по SOLID, безопасности и performance. Если есть замечания — TheFixer дорабатывает итеративно.</p></div>
<div class="state-arrow">&darr;</div>
<div class="state-card"><div class="state-card__num">7</div><div class="state-card__meta"><div class="state-card__state">status: releasing</div><div class="state-card__agent">@ReleaseManager</div></div><p class="state-card__desc">Создает PR, мержит в dev, fast-forward в main, ставит semver-теги и готовит релиз.</p></div>
<div class="state-arrow">&darr;</div>
<div class="state-card"><div class="state-card__num">8</div><div class="state-card__meta"><div class="state-card__state">status: evaluated</div><div class="state-card__agent">@Evaluator + @PromptOptimizer</div></div><p class="state-card__desc">Оценивает эффективность агентов (1-10) и фитнес-скор (0.0-1.0). Score < 7 — триггерит оптимизацию промптов.</p></div>
</div>
</div>
</section>
<!-- AGENT TABLE -->
<section id="agents" class="agents">
<div class="container">
<h2 class="section__title">Агентная <span class="gradient">матрица</span></h2>
<p class="section__subtitle">30+ агентов, каждый со своей LLM, ролью и статусом. Модель подбирается под задачу — не наоборот.</p>
<div class="table-wrap">
<div class="table-hint"><span class="table-hint__icon">&harr;</span> прокрутите вправо, чтобы увидеть всё</div>
<table class="agent-table">
<thead>
<tr><th>Агент</th><th>Категория</th><th>Роль</th><th>Модель</th><th>Fit</th><th>Вызывается</th></tr>
</thead>
<tbody>
<!-- Core Dev -->
<tr class="agent-table__cat"><td colspan="6">&#9733; Core Development</td></tr>
<tr><td class="agent-table__name">RequirementRefiner</td><td>Core</td><td class="agent-table__cell-w">Формализация требований</td><td class="agent-table__model">Qwen3-Coder 480B</td><td><span class="score score--good">92</span></td><td>Issue status: new</td></tr>
<tr><td class="agent-table__name">HistoryMiner</td><td>Core</td><td class="agent-table__cell-w">Поиск дублей в git-истории</td><td class="agent-table__model">Qwen3-Coder 480B</td><td><span class="score score--good">92</span></td><td>Status: planned</td></tr>
<tr><td class="agent-table__name">SystemAnalyst</td><td>Core</td><td class="agent-table__cell-w">Архитектура, схемы, API</td><td class="agent-table__model">GLM-5.1</td><td><span class="score score--good">82</span></td><td>Status: researching</td></tr>
<tr><td class="agent-table__name">SdetEngineer</td><td>Core</td><td class="agent-table__cell-w">Тесты до кода (TDD)</td><td class="agent-table__model">Qwen3-Coder 480B</td><td><span class="score score--good">88</span></td><td>Status: designed</td></tr>
<tr><td class="agent-table__name">LeadDeveloper</td><td>Core</td><td class="agent-table__cell-w">Основная разработка</td><td class="agent-table__model">Nemotron 3 Super</td><td><span class="score score--good">90</span></td><td>Status: testing</td></tr>
<tr><td class="agent-table__name">FrontendDeveloper</td><td>Core</td><td class="agent-table__cell-w">UI с мультимодальностью</td><td class="agent-table__model">MiniMax M2.5</td><td><span class="score score--good">86</span></td><td>Когда нужен UI</td></tr>
<tr><td class="agent-table__name">BackendDeveloper</td><td>Core</td><td class="agent-table__cell-w">Node.js / Express</td><td class="agent-table__model">Qwen3-Coder 480B</td><td><span class="score score--good">91</span></td><td>Когда нужен backend</td></tr>
<tr><td class="agent-table__name">GoDeveloper</td><td>Core</td><td class="agent-table__cell-w">Go + Gin + Echo + DB</td><td class="agent-table__model">DeepSeek V4-Pro</td><td><span class="score score--good">88</span></td><td>Когда нужен Go backend</td></tr>
<tr><td class="agent-table__name">PhpDeveloper</td><td>Core</td><td class="agent-table__cell-w">Laravel / Symfony</td><td class="agent-table__model">Qwen3-Coder 480B</td><td><span class="score score--good">87</span></td><td>Когда нужен PHP</td></tr>
<tr><td class="agent-table__name">PythonDeveloper</td><td>Core</td><td class="agent-table__cell-w">Django / FastAPI</td><td class="agent-table__model">Qwen3-Coder 480B</td><td><span class="score score--good">90</span></td><td>Когда нужен Python</td></tr>
<tr><td class="agent-table__name">FlutterDeveloper</td><td>Core</td><td class="agent-table__cell-w">Flutter / Dart</td><td class="agent-table__model">Qwen3-Coder 480B</td><td><span class="score score--good">86</span></td><td>Когда нужен Flutter</td></tr>
<tr><td class="agent-table__name">DevopsEngineer</td><td>Core</td><td class="agent-table__cell-w">Docker, K8s, CI/CD</td><td class="agent-table__model">Kimi K2.6</td><td><span class="score score--good">88</span></td><td>Когда нужен deploy</td></tr>
<!-- QA -->
<tr class="agent-table__cat"><td colspan="6">&#9734; Quality Assurance</td></tr>
<tr><td class="agent-table__name">CodeSkeptic</td><td>QA</td><td class="agent-table__cell-w">Адверсариальное ревью</td><td class="agent-table__model">MiniMax M2.5</td><td><span class="score score--good">85</span></td><td>Status: implementing</td></tr>
<tr><td class="agent-table__name">TheFixer</td><td>QA</td><td class="agent-table__cell-w">Итеративный фикс багов</td><td class="agent-table__model">Kimi K2.6</td><td><span class="score score--good">90</span></td><td>Если ревью не прошло</td></tr>
<tr><td class="agent-table__name">PerformanceEngineer</td><td>QA</td><td class="agent-table__cell-w">N+1, memory leaks, perf</td><td class="agent-table__model">DeepSeek V4-Pro</td><td><span class="score score--good">84</span></td><td>После CodeSkeptic</td></tr>
<tr><td class="agent-table__name">SecurityAuditor</td><td>QA</td><td class="agent-table__cell-w">OWASP, CVE, secrets</td><td class="agent-table__model">DeepSeek V4-Pro</td><td><span class="score score--good">80</span></td><td>После Performance</td></tr>
<tr><td class="agent-table__name">VisualTester</td><td>QA</td><td class="agent-table__cell-w">Скриншоты, pixelmatch</td><td class="agent-table__model">Qwen3-Coder 480B</td><td><span class="score score--good">82</span></td><td>Когда UI меняется</td></tr>
<tr><td class="agent-table__name">BrowserAutomation</td><td>QA</td><td class="agent-table__cell-w">Playwright E2E</td><td class="agent-table__model">Qwen3-Coder 480B</td><td><span class="score score--good">87</span></td><td>E2E-тестирование</td></tr>
<!-- Meta -->
<tr class="agent-table__cat"><td colspan="6">&#9670; Meta &amp; Process</td></tr>
<tr><td class="agent-table__name">Orchestrator</td><td>Meta</td><td class="agent-table__cell-w">Главный диспетчер</td><td class="agent-table__model">Kimi K2.6</td><td><span class="score score--good">92</span></td><td>Управление роутингом</td></tr>
<tr><td class="agent-table__name">ReleaseManager</td><td>Meta</td><td class="agent-table__cell-w">Git, semver, релизы</td><td class="agent-table__model">GLM-5.1</td><td><span class="score score--good">76</span></td><td>Status: releasing</td></tr>
<tr><td class="agent-table__name">Evaluator</td><td>Meta</td><td class="agent-table__cell-w">Оценка эффективности</td><td class="agent-table__model">GLM-5.1</td><td><span class="score score--good">84</span></td><td>Status: evaluated</td></tr>
<tr><td class="agent-table__name">PromptOptimizer</td><td>Meta</td><td class="agent-table__cell-w">Улучшение промптов</td><td class="agent-table__model">Qwen3.6 Plus</td><td><span class="score score--good">84</span></td><td>Когда score < 7</td></tr>
<tr><td class="agent-table__name">ProductOwner</td><td>Meta</td><td class="agent-table__cell-w">Чеклисты, лейблы, трекинг</td><td class="agent-table__model">GLM-5.1</td><td><span class="score score--good">78</span></td><td>Управление задачами</td></tr>
<tr><td class="agent-table__name">CapabilityAnalyst</td><td>Meta</td><td class="agent-table__cell-w">Анализ пробелов в skills</td><td class="agent-table__model">GLM-5.1</td><td><span class="score score--good">82</span></td><td>На старте задачи</td></tr>
<tr><td class="agent-table__name">AgentArchitect</td><td>Meta</td><td class="agent-table__cell-w">Создание новых агентов</td><td class="agent-table__model">Kimi K2.6</td><td><span class="score score--good">86</span></td><td>Если нет подходящего агента</td></tr>
<tr><td class="agent-table__name">WorkflowArchitect</td><td>Meta</td><td class="agent-table__cell-w">Новые workflow-определения</td><td class="agent-table__model">GLM-5.1</td><td><span class="score score--good">82</span></td><td>Новый workflow</td></tr>
<tr><td class="agent-table__name">MarkdownValidator</td><td>Meta</td><td class="agent-table__cell-w">Валидация Markdown</td><td class="agent-table__model">DeepSeek V4-Pro</td><td><span class="score score--warn">68</span></td><td>Перед созданием issue</td></tr>
<tr><td class="agent-table__name">PipelineJudge</td><td>Meta</td><td class="agent-table__cell-w">Объективный fitness-скор</td><td class="agent-table__model">GLM-5.1</td><td><span class="score score--good">84</span></td><td>После Evaluator</td></tr>
<tr><td class="agent-table__name">ArchitectIndexer</td><td>Meta</td><td class="agent-table__cell-w">Индекс проекта .architect/</td><td class="agent-table__model">GLM-5.1</td><td><span class="score score--good">84</span></td><td>Перед любой задачей</td></tr>
<!-- Cognitive -->
<tr class="agent-table__cat"><td colspan="6">&#9679; Cognitive Enhancement</td></tr>
<tr><td class="agent-table__name">Planner</td><td>Cognitive</td><td class="agent-table__cell-w">CoT / ToT / Plan-Reflect</td><td class="agent-table__model">DeepSeek V4-Pro</td><td><span class="score score--good">88</span></td><td>Сложные задачи</td></tr>
<tr><td class="agent-table__name">Reflector</td><td>Cognitive</td><td class="agent-table__cell-w">Уроки из ошибок</td><td class="agent-table__model">DeepSeek V4-Pro</td><td><span class="score score--good">84</span></td><td>После каждого агента</td></tr>
<tr><td class="agent-table__name">MemoryManager</td><td>Cognitive</td><td class="agent-table__cell-w">Контекст, векторный стор</td><td class="agent-table__model">Qwen3.6 Plus</td><td><span class="score score--good">87</span></td><td>Управление памятью</td></tr>
<!-- Security -->
<tr class="agent-table__cat"><td colspan="6">&#9851; Security &amp; Incident</td></tr>
<tr><td class="agent-table__name">IncidentResponder</td><td>SecOps</td><td class="agent-table__cell-w">Форензика, hardening, cleanup</td><td class="agent-table__model">Kimi K2.6</td><td><span class="score score--good">90</span></td><td>Инцидент, компрометация</td></tr>
</tbody>
</table>
</div>
<h3 class="section__subheading">GNS-2 Event Format — как агенты общаются</h3>
<div class="code-block">
<pre><code><span class="token-comment">&lt;!-- GNS_EVENT: {
"type": "subagent_result",
"agent": "lead-developer",
"invocation_id": "AGENT-113-003",
"parent_id": "orch-113-001",
"depth": 1,
"budget": {"remaining": 3800},
"state_changes": {
"labels_add": ["phase::drafting-spec"],
"assignee": "system-analyst"
},
"next_agent": "system-analyst",
"timestamp": "2026-05-23T09:00:00Z"
} --&gt;</span>
<span class="token-punct">{</span>
<span class="token-attr">"type"</span><span class="token-punct">:</span> <span class="token-str">"subagent_result"</span><span class="token-punct">,</span>
<span class="token-attr">"agent"</span><span class="token-punct">:</span> <span class="token-str">"lead-developer"</span><span class="token-punct">,</span>
<span class="token-attr">"invocation_id"</span><span class="token-punct">:</span> <span class="token-str">"AGENT-113-003"</span><span class="token-punct">,</span>
<span class="token-attr">"budget"</span><span class="token-punct">:</span> <span class="token-punct">{</span><span class="token-str">"remaining"</span><span class="token-punct">:</span> <span class="token-num">3800</span><span class="token-punct">}</span><span class="token-punct">,</span>
<span class="token-attr">"state_changes"</span><span class="token-punct">:</span> <span class="token-punct">{</span>
<span class="token-str">"labels_add"</span><span class="token-punct">:</span> <span class="token-punct">[</span><span class="token-str">"phase::drafting-spec"</span><span class="token-punct">]</span><span class="token-punct">,</span>
<span class="token-str">"assignee"</span><span class="token-punct">:</span> <span class="token-str">"system-analyst"</span>
<span class="token-punct">}</span><span class="token-punct">,</span>
<span class="token-attr">"next_agent"</span><span class="token-punct">:</span> <span class="token-str">"system-analyst"</span><span class="token-punct">,</span>
<span class="token-attr">"timestamp"</span><span class="token-punct">:</span> <span class="token-str">"2026-05-23T09:00:00Z"</span>
<span class="token-punct">}</span></code></pre>
</div>
<p class="section__caption">Каждый агент при входе читает checkpoint из issue body, при выходе — пишет структурированный результат с machine-readable footer в Gitea.</p>
</div>
</section>
<!-- EVOLUTION -->
<section id="evolution" class="evolution">
<div class="container">
<h2 class="section__title">Агентная <span class="gradient">эволюция</span></h2>
<p class="section__subtitle">APAW не просто выполняет задачи — она учится на результатах. Модель под каждого агента подбирается по фитнес-матрице, а промпты оптимизируются автоматически.</p>
<div class="evolution__grid">
<article class="evo-card">
<div class="evo-card__title">Model Benchmarks</div>
<div class="evo-card__value">11 LLM</div>
<div class="evo-card__desc">SWE-bench + IFEval скоры для каждой модели. Kimi K2.6 ведет с IF 91, Qwen3-Coder 480B — SWE-bench 66.5%.</div>
</article>
<article class="evo-card">
<div class="evo-card__title">Agent × Model Matrix</div>
<div class="evo-card__value">30×11</div>
<div class="evo-card__desc">Каждая пара Agent × Model имеет fit-score. Оркестратор выбирает лучшую модель под конкретную задачу, а не использует один LLM на всех.</div>
</article>
<article class="evo-card">
<div class="evo-card__title">Self-Improvement Cycle</div>
<div class="evo-card__value">closed-loop</div>
<div class="evo-card__desc">Pipeline → Evaluator (score 1-10) → Pipeline Judge (fitness 0.0-1.0) → если fitness < 0.70 → PromptOptimizer улучшает промпты → повтор.</div>
</article>
<article class="evo-card">
<div class="evo-card__title">Fitness Formula</div>
<div class="evo-card__value">0.91 avg</div>
<div class="evo-card__desc">fitness = (pass_rate × 0.50) + (gates_rate × 0.25) + (efficiency × 0.25). Покрытие тестов, билд, линт, типы — всё в формуле.</div>
</article>
</div>
<h3 class="section__subheading">Flow: Bidirectional Data Flow</h3>
<div class="flow">
<div class="flow-step"><div class="flow-step__num">1</div><div class="flow-step__body"><div class="flow-step__name">/research models</div><div class="flow-step__desc">Сбор свежих benchmark-данных из провайдеров</div></div></div>
<div class="flow-step"><div class="flow-step__num">2</div><div class="flow-step__body"><div class="flow-step__name">sync-model-research.ts</div><div class="flow-step__desc">Применение рекомендаций: capability-index.yaml → kilo-meta.json → kilo.jsonc</div></div></div>
<div class="flow-step"><div class="flow-step__num">3</div><div class="flow-step__body"><div class="flow-step__name">sync-agents.js --fix</div><div class="flow-step__desc">Пропагация frontmatter в .kilo/agents/*.md, KILO_SPEC.md, AGENTS.md</div></div></div>
<div class="flow-step"><div class="flow-step__num">4</div><div class="flow-step__body"><div class="flow-step__name">Dashboard rebuild</div><div class="flow-step__desc">research-dashboard.html с 6 вкладками: Обзор, Groq, Модели, Матрица, Рекомендации, Анализ профита</div></div></div>
<div class="flow-step flow-step--loop"><div class="flow-step__num">5</div><div class="flow-step__body"><div class="flow-step__name">/research models</div><div class="flow-step__desc">Цикл повторяется — система постоянно самоулучшается</div></div></div>
</div>
</div>
</section>
<!-- SKILLS -->
<section id="skills" class="skills">
<div class="container">
<h2 class="section__title">Доменные <span class="gradient">скиллы</span></h2>
<p class="section__subtitle">15+ модулей специализированных знаний, которые агенты подгружают под конкретную задачу — не держат в контексте постоянно.</p>
<div class="skills__grid">
<div class="skill-chip"><div class="skill-chip__cat">Containerization</div><div class="skill-chip__items">docker-compose, docker-swarm, docker-security, docker-monitoring</div></div>
<div class="skill-chip"><div class="skill-chip__cat">Node.js</div><div class="skill-chip__items">nodejs-express-patterns, nodejs-auth-jwt, nodejs-security-owasp</div></div>
<div class="skill-chip"><div class="skill-chip__cat">Databases</div><div class="skill-chip__items">postgresql-patterns, sqlite-patterns, clickhouse-patterns</div></div>
<div class="skill-chip"><div class="skill-chip__cat">PHP</div><div class="skill-chip__items">php-laravel-patterns, php-symfony-patterns, php-wordpress-patterns, php-modular-architecture, php-security, php-testing</div></div>
<div class="skill-chip"><div class="skill-chip__cat">Python</div><div class="skill-chip__items">python-django-patterns, python-fastapi-patterns</div></div>
<div class="skill-chip"><div class="skill-chip__cat">Frontend</div><div class="skill-chip__items">nextjs-patterns, react-patterns, vue-nuxt-patterns</div></div>
<div class="skill-chip"><div class="skill-chip__cat">Process</div><div class="skill-chip__items">planning-patterns, memory-systems, tool-use, research-cycle</div></div>
<div class="skill-chip"><div class="skill-chip__cat">Go</div><div class="skill-chip__items">go-modules, go-concurrency, go-testing, go-security</div></div>
<div class="skill-chip"><div class="skill-chip__cat">Integration</div><div class="skill-chip__items">gitea-workflow, quality-controller, scoped-labels, agent-logging</div></div>
<div class="skill-chip"><div class="skill-chip__cat">Domains</div><div class="skill-chip__items">ecommerce, booking, blog, fix-workflow</div></div>
</div>
<h3 class="section__subheading">Docker-нативность: никаких установок на хост</h3>
<div class="code-block">
<pre><code><span class="token-comment"># Visual testing — Playwright в контейнере</span>
docker compose -f docker/docker-compose.web-testing.yml run --rm visual-tester
<span class="token-comment"># Architect indexer — перед любой задачей</span>
docker compose -f docker/docker-compose.architect.yml run --rm architect-indexer
<span class="token-comment"># Evolution dashboard — обновляется автоматически</span>
bun run sync:evolution && bun run evolution:dashboard</code></pre>
</div>
<p class="section__caption">Все браузерные инструменты (Playwright, скриншоты, E2E) запускаются в контейнерах. Хост остаётся чистым.</p>
</div>
</section>
<!-- PRICING -->
<section id="pricing" class="pricing">
<div class="container">
<h2 class="section__title">Тарифы <span class="gradient">доступа</span></h2>
<p class="section__subtitle">Выберите подписку, которая соответствует масштабу вашей команды.</p>
<div class="pricing__grid">
<div class="pricing-card">
<h3 class="pricing-card__name">Developer</h3>
<div class="pricing-card__price"><span class="pricing-card__amount">35</span><span class="pricing-card__currency">&euro;</span><span class="pricing-card__period">/месяц</span></div>
<p class="pricing-card__tag">Для индивидуальных разработчиков и небольших проектов</p>
<ul class="pricing-card__list">
<li><span class="pricing-card__check">&#10003;</span>1 активный пайплайн</li>
<li><span class="pricing-card__check">&#10003;</span>Все базовые агенты (Core + QA)</li>
<li><span class="pricing-card__check">&#10003;</span>Gitea-интеграция</li>
<li><span class="pricing-card__check">&#10003;</span>Git-операции + semver</li>
<li><span class="pricing-card__check">&#10003;</span>Доступ к 15+ доменным скиллам</li>
<li><span class="pricing-card__check">&#10003;</span>Email-поддержка</li>
</ul>
<a href="#contact" class="btn btn--outline btn--full">Выбрать Developer</a>
</div>
<div class="pricing-card pricing-card--featured">
<div class="pricing-card__badge">Популярный</div>
<h3 class="pricing-card__name">Team</h3>
<div class="pricing-card__price"><span class="pricing-card__amount pricing-card__amount--hl">200</span><span class="pricing-card__currency">&euro;</span><span class="pricing-card__period">/месяц</span></div>
<p class="pricing-card__tag">Для команд, продуктовых компаний и агентств</p>
<ul class="pricing-card__list">
<li><span class="pricing-card__check">&#10003;</span><strong>Безлимитные</strong> параллельные пайплайны</li>
<li><span class="pricing-card__check">&#10003;</span><strong>Все</strong> 30+ агентов включая DevOps и Cognitive</li>
<li><span class="pricing-card__check">&#10003;</span>Приоритетная очередь + выделенный orchestrator</li>
<li><span class="pricing-card__check">&#10003;</span>Docker-контейнеры для тестирования и деплоя</li>
<li><span class="pricing-card__check">&#10003;</span>Визуальное тестирование (Playwright, скриншоты)</li>
<li><span class="pricing-card__check">&#10003;</span>Agent Evolution Dashboard + API доступ</li>
<li><span class="pricing-card__check">&#10003;</span>Персональный менеджер</li>
<li><span class="pricing-card__check">&#10003;</span>Priority SLAB</li>
</ul>
<a href="#contact" class="btn btn--primary btn--full">Выбрать Team</a>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section id="contact" class="cta">
<div class="container">
<h2 class="section__title section__title--light">Готовы автоматизировать<br>разработку?</h2>
<p class="section__subtitle section__subtitle--light">Подключите APAW к своему проекту и получите доступ к автономному AI-конвейеру с самоулучшением уже сегодня.</p>
<div class="cta__actions">
<a href="mailto:hello@apaw.dev" class="btn btn--light btn--lg">hello@apaw.dev</a>
<span class="cta__or">или</span>
<a href="#" class="btn btn--outline-light btn--lg" onclick="event.preventDefault();alert('Свяжитесь через hello@apaw.dev — Telegram интеграция скоро!');return false;">Написать в Telegram</a>
</div>
<div class="cta__bottom">
<a href="#pricing" class="btn btn--primary btn--lg">Начать с APAW</a>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="container">
<div class="footer__grid">
<div class="footer__col">
<div class="logo"><span class="logo__icon">&#x27A4;</span><span class="logo__text">APAW</span></div>
<p class="footer__desc">Self-improving code pipeline.<br>Built by agents, for agents.</p>
</div>
<div class="footer__col">
<h4>Продукт</h4>
<a href="#workflow">Пайплайн</a>
<a href="#agents">Агенты</a>
<a href="#evolution">Эволюция</a>
<a href="#skills">Скиллы</a>
<a href="#pricing">Тарифы</a>
</div>
<div class="footer__col">
<h4>Сообщество</h4>
<a href="https://git.softuniq.eu" target="_blank" rel="noopener">Gitea</a>
<a href="#" onclick="event.preventDefault();alert('Документация скоро будет доступна.');return false;">Документация</a>
<a href="#" onclick="event.preventDefault();alert('Статус и логи будут доступны.');return false;">Статус</a>
</div>
</div>
<div class="footer__bottom">
<span>&copy; 2026 APAW. All rights reserved.</span>
<span class="footer__made">Made with &hearts; by agents</span>
</div>
</div>
</footer>
<script>
/* ===== THEME TOGGLE ===== */
(function() {
const root = document.documentElement;
const btn = document.getElementById('themeToggle');
const icon = document.getElementById('themeIcon');
const label = document.getElementById('themeLabel');
const meta = document.querySelector('meta[name="theme-color"]');
const KEY = 'apaw-theme';
const ICONS = { dark: '\u2600', light: '\u263E' };
const LABELS = { dark: '\u0421\u0432\u0435\u0442\u043B\u043E', light: '\u0422\u0435\u043C\u043D\u043E' };
const META = { dark: '#0a0a0f', light: '#f8f9fb' };
function apply(theme) {
root.setAttribute('data-theme', theme);
if (meta) meta.setAttribute('content', META[theme]);
if (icon) icon.textContent = ICONS[theme];
if (label) label.textContent = LABELS[theme];
if (btn) btn.setAttribute('aria-pressed', theme === 'light');
}
const saved = localStorage.getItem(KEY);
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const initial = saved || (prefersDark ? 'dark' : 'light');
apply(initial);
if (btn) {
btn.addEventListener('click', () => {
const next = root.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
apply(next);
localStorage.setItem(KEY, next);
});
}
})();
/* ===== SCROLL TOP ===== */
const topBtn = document.querySelector('.scroll-top');
window.addEventListener('scroll', () => {
topBtn.classList.toggle('is-visible', window.scrollY > 400);
});
/* ===== MOBILE NAV ===== */
const toggle = document.querySelector('.nav__toggle');
const links = document.querySelector('.nav__links');
if (toggle) {
toggle.addEventListener('click', () => {
links.classList.toggle('is-open');
});
links.querySelectorAll('a').forEach(a => {
a.addEventListener('click', () => {
links.classList.remove('is-open');
toggle.setAttribute('aria-expanded', 'false');
});
});
}
</script>
</body>
</html>