From bb043cb23dad9428acb74ace21c3e607904a0073 Mon Sep 17 00:00:00 2001 From: Deploy Bot Date: Sat, 23 May 2026 22:48:19 +0100 Subject: [PATCH] feat(landing): add APAW marketing landing page with dark/light theme toggle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- landing/Dockerfile | 3 + landing/assets/styles.css | 775 +++++++++++++++++++++++++++++++++++++ landing/docker-compose.yml | 17 + landing/index.html | 412 ++++++++++++++++++++ 4 files changed, 1207 insertions(+) create mode 100644 landing/Dockerfile create mode 100644 landing/assets/styles.css create mode 100644 landing/docker-compose.yml create mode 100644 landing/index.html diff --git a/landing/Dockerfile b/landing/Dockerfile new file mode 100644 index 0000000..a09f212 --- /dev/null +++ b/landing/Dockerfile @@ -0,0 +1,3 @@ +FROM nginx:alpine +COPY landing /usr/share/nginx/html +EXPOSE 80 diff --git a/landing/assets/styles.css b/landing/assets/styles.css new file mode 100644 index 0000000..509f2bc --- /dev/null +++ b/landing/assets/styles.css @@ -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; } +} diff --git a/landing/docker-compose.yml b/landing/docker-compose.yml new file mode 100644 index 0000000..ec00d6d --- /dev/null +++ b/landing/docker-compose.yml @@ -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 diff --git a/landing/index.html b/landing/index.html new file mode 100644 index 0000000..6895a7e --- /dev/null +++ b/landing/index.html @@ -0,0 +1,412 @@ + + + + + + +APAW — Автономный AI-конвейер самоулучшающегося кода + + + + + + + + + + +
+ +
+
Gitea-Nervous-System v2.0 / 30+ агента / Self-improving
+

Автономный AI-конвейер
самоулучшающегося кода

+

+ Распределенная система из 30+ специализированных AI-агентов, оркестрируемых через Gitea.
+ От идеи до продакшена — полностью автоматически. Самоанализ, саморевью, самоэволюция. +

+
+ Подключить доступ + Посмотреть пайплайн +
+
+
30+
AI-агентов
+
11
LLM-моделей
+
8/10
Оценка кода
+
0.91
Фитнес-скор
+
15+
Скиллов
+
+
+
+ + +
+

Поддерживает стеки разработки

+
+ GiteaDockerTypeScriptGo + PHP / LaravelPython / Django / FastAPI + Vue / NuxtReact / Next.jsFlutterWordPress +
+
+ + +
+
+

Пайплайн от задачи до релиза

+

Каждая задача проходит через 8 фаз с автоматической сменой статус-лейблов.
Оркестратор выбирает агента под каждую фазу, исходя из типа задачи и состояния.

+ +
+
1
status: new
@RequirementRefiner

Превращает идею или баг-репорт в строгую User Story с критериями приемки.

+
↓
+
2
status: planned
@HistoryMiner

Ищет дубли в git-истории и прошлых решениях, чтобы избежать регрессий и повторной работы.

+
↓
+
3
status: researching
@SystemAnalyst

Проектирует спецификации, схемы данных, API-контракты и архитектуру до написания кода.

+
↓
+
4
status: designed
@SdetEngineer

Пишет тесты по методологии TDD — до кода. Mock'и, fixtures, edge cases — всё сразу.

+
↓
+
5
status: testing
@LeadDeveloper

Пишет код, чтобы тесты прошли. Backend, frontend, Go, PHP, Python — подключается узкоспециализированный агент.

+
↓
+
6
status: implementing
@CodeSkeptic → @TheFixer

Адверсариальное ревью по SOLID, безопасности и performance. Если есть замечания — TheFixer дорабатывает итеративно.

+
↓
+
7
status: releasing
@ReleaseManager

Создает PR, мержит в dev, fast-forward в main, ставит semver-теги и готовит релиз.

+
↓
+
8
status: evaluated
@Evaluator + @PromptOptimizer

Оценивает эффективность агентов (1-10) и фитнес-скор (0.0-1.0). Score < 7 — триггерит оптимизацию промптов.

+
+
+
+ + +
+
+

Агентная матрица

+

30+ агентов, каждый со своей LLM, ролью и статусом. Модель подбирается под задачу — не наоборот.

+ +
+
↔ прокрутите вправо, чтобы увидеть всё
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
АгентКатегорияРольМодельFitВызывается
★ Core Development
RequirementRefinerCoreФормализация требованийQwen3-Coder 480B92Issue status: new
HistoryMinerCoreПоиск дублей в git-историиQwen3-Coder 480B92Status: planned
SystemAnalystCoreАрхитектура, схемы, APIGLM-5.182Status: researching
SdetEngineerCoreТесты до кода (TDD)Qwen3-Coder 480B88Status: designed
LeadDeveloperCoreОсновная разработкаNemotron 3 Super90Status: testing
FrontendDeveloperCoreUI с мультимодальностьюMiniMax M2.586Когда нужен UI
BackendDeveloperCoreNode.js / ExpressQwen3-Coder 480B91Когда нужен backend
GoDeveloperCoreGo + Gin + Echo + DBDeepSeek V4-Pro88Когда нужен Go backend
PhpDeveloperCoreLaravel / SymfonyQwen3-Coder 480B87Когда нужен PHP
PythonDeveloperCoreDjango / FastAPIQwen3-Coder 480B90Когда нужен Python
FlutterDeveloperCoreFlutter / DartQwen3-Coder 480B86Когда нужен Flutter
DevopsEngineerCoreDocker, K8s, CI/CDKimi K2.688Когда нужен deploy
☆ Quality Assurance
CodeSkepticQAАдверсариальное ревьюMiniMax M2.585Status: implementing
TheFixerQAИтеративный фикс баговKimi K2.690Если ревью не прошло
PerformanceEngineerQAN+1, memory leaks, perfDeepSeek V4-Pro84После CodeSkeptic
SecurityAuditorQAOWASP, CVE, secretsDeepSeek V4-Pro80После Performance
VisualTesterQAСкриншоты, pixelmatchQwen3-Coder 480B82Когда UI меняется
BrowserAutomationQAPlaywright E2EQwen3-Coder 480B87E2E-тестирование
◆ Meta & Process
OrchestratorMetaГлавный диспетчерKimi K2.692Управление роутингом
ReleaseManagerMetaGit, semver, релизыGLM-5.176Status: releasing
EvaluatorMetaОценка эффективностиGLM-5.184Status: evaluated
PromptOptimizerMetaУлучшение промптовQwen3.6 Plus84Когда score < 7
ProductOwnerMetaЧеклисты, лейблы, трекингGLM-5.178Управление задачами
CapabilityAnalystMetaАнализ пробелов в skillsGLM-5.182На старте задачи
AgentArchitectMetaСоздание новых агентовKimi K2.686Если нет подходящего агента
WorkflowArchitectMetaНовые workflow-определенияGLM-5.182Новый workflow
MarkdownValidatorMetaВалидация MarkdownDeepSeek V4-Pro68Перед созданием issue
PipelineJudgeMetaОбъективный fitness-скорGLM-5.184После Evaluator
ArchitectIndexerMetaИндекс проекта .architect/GLM-5.184Перед любой задачей
● Cognitive Enhancement
PlannerCognitiveCoT / ToT / Plan-ReflectDeepSeek V4-Pro88Сложные задачи
ReflectorCognitiveУроки из ошибокDeepSeek V4-Pro84После каждого агента
MemoryManagerCognitiveКонтекст, векторный сторQwen3.6 Plus87Управление памятью
♻ Security & Incident
IncidentResponderSecOpsФорензика, hardening, cleanupKimi K2.690Инцидент, компрометация
+
+ +

GNS-2 Event Format — как агенты общаются

+
+
<!-- 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"
+} -->
+
+{
+  "type": "subagent_result",
+  "agent": "lead-developer",
+  "invocation_id": "AGENT-113-003",
+  "budget": {"remaining": 3800},
+  "state_changes": {
+    "labels_add": ["phase::drafting-spec"],
+    "assignee": "system-analyst"
+  },
+  "next_agent": "system-analyst",
+  "timestamp": "2026-05-23T09:00:00Z"
+}
+
+

Каждый агент при входе читает checkpoint из issue body, при выходе — пишет структурированный результат с machine-readable footer в Gitea.

+
+
+ + +
+
+

Агентная эволюция

+

APAW не просто выполняет задачи — она учится на результатах. Модель под каждого агента подбирается по фитнес-матрице, а промпты оптимизируются автоматически.

+ +
+
+
Model Benchmarks
+
11 LLM
+
SWE-bench + IFEval скоры для каждой модели. Kimi K2.6 ведет с IF 91, Qwen3-Coder 480B — SWE-bench 66.5%.
+
+
+
Agent × Model Matrix
+
30×11
+
Каждая пара Agent × Model имеет fit-score. Оркестратор выбирает лучшую модель под конкретную задачу, а не использует один LLM на всех.
+
+
+
Self-Improvement Cycle
+
closed-loop
+
Pipeline → Evaluator (score 1-10) → Pipeline Judge (fitness 0.0-1.0) → если fitness < 0.70 → PromptOptimizer улучшает промпты → повтор.
+
+
+
Fitness Formula
+
0.91 avg
+
fitness = (pass_rate × 0.50) + (gates_rate × 0.25) + (efficiency × 0.25). Покрытие тестов, билд, линт, типы — всё в формуле.
+
+
+ +

Flow: Bidirectional Data Flow

+
+
1
/research models
Сбор свежих benchmark-данных из провайдеров
+
2
sync-model-research.ts
Применение рекомендаций: capability-index.yaml → kilo-meta.json → kilo.jsonc
+
3
sync-agents.js --fix
Пропагация frontmatter в .kilo/agents/*.md, KILO_SPEC.md, AGENTS.md
+
4
Dashboard rebuild
research-dashboard.html с 6 вкладками: Обзор, Groq, Модели, Матрица, Рекомендации, Анализ профита
+
5
/research models
Цикл повторяется — система постоянно самоулучшается
+
+
+
+ + +
+
+

Доменные скиллы

+

15+ модулей специализированных знаний, которые агенты подгружают под конкретную задачу — не держат в контексте постоянно.

+
+
Containerization
docker-compose, docker-swarm, docker-security, docker-monitoring
+
Node.js
nodejs-express-patterns, nodejs-auth-jwt, nodejs-security-owasp
+
Databases
postgresql-patterns, sqlite-patterns, clickhouse-patterns
+
PHP
php-laravel-patterns, php-symfony-patterns, php-wordpress-patterns, php-modular-architecture, php-security, php-testing
+
Python
python-django-patterns, python-fastapi-patterns
+
Frontend
nextjs-patterns, react-patterns, vue-nuxt-patterns
+
Process
planning-patterns, memory-systems, tool-use, research-cycle
+
Go
go-modules, go-concurrency, go-testing, go-security
+
Integration
gitea-workflow, quality-controller, scoped-labels, agent-logging
+
Domains
ecommerce, booking, blog, fix-workflow
+
+ +

Docker-нативность: никаких установок на хост

+
+
# Visual testing — Playwright в контейнере
+docker compose -f docker/docker-compose.web-testing.yml run --rm visual-tester
+
+# Architect indexer — перед любой задачей
+docker compose -f docker/docker-compose.architect.yml run --rm architect-indexer
+
+# Evolution dashboard — обновляется автоматически
+bun run sync:evolution && bun run evolution:dashboard
+
+

Все браузерные инструменты (Playwright, скриншоты, E2E) запускаются в контейнерах. Хост остаётся чистым.

+
+
+ + +
+
+

Тарифы доступа

+

Выберите подписку, которая соответствует масштабу вашей команды.

+
+
+

Developer

+
35€/месяц
+

Для индивидуальных разработчиков и небольших проектов

+
    +
  • ✓1 активный пайплайн
    • +
  • ✓Все базовые агенты (Core + QA)
    • +
  • ✓Gitea-интеграция
    • +
  • ✓Git-операции + semver
    • +
  • ✓Доступ к 15+ доменным скиллам
    • +
  • ✓Email-поддержка
    • +
+ Выбрать Developer +
+
+
Популярный
+

Team

+
200€/месяц
+

Для команд, продуктовых компаний и агентств

+
    +
  • ✓Безлимитные параллельные пайплайны
    • +
  • ✓Все 30+ агентов включая DevOps и Cognitive
    • +
  • ✓Приоритетная очередь + выделенный orchestrator
    • +
  • ✓Docker-контейнеры для тестирования и деплоя
    • +
  • ✓Визуальное тестирование (Playwright, скриншоты)
    • +
  • ✓Agent Evolution Dashboard + API доступ
    • +
  • ✓Персональный менеджер
    • +
  • ✓Priority SLAB
    • +
+ Выбрать Team +
+
+
+
+ + +
+
+

Готовы автоматизировать
разработку?

+

Подключите APAW к своему проекту и получите доступ к автономному AI-конвейеру с самоулучшением уже сегодня.

+
+ hello@apaw.dev + или + Написать в Telegram +
+
+ Начать с APAW +
+
+
+ + + + + + +