From c4b246fdddf64dd0617c9caa290b7297d7d1c3d5 Mon Sep 17 00:00:00 2001 From: Agents Orchestrator Date: Sat, 28 Feb 2026 17:38:31 +0000 Subject: [PATCH] Desenvolvimento de Feature Full-Stack Desenvolver feature completa end-to-end: levantar requisitos Executado por: Tech Lead --- AGENTES_VENDAS_SPEC.md | 365 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 365 insertions(+) create mode 100644 AGENTES_VENDAS_SPEC.md diff --git a/AGENTES_VENDAS_SPEC.md b/AGENTES_VENDAS_SPEC.md new file mode 100644 index 0000000..626164a --- /dev/null +++ b/AGENTES_VENDAS_SPEC.md @@ -0,0 +1,365 @@ +# AgentFlow Sales Site — Complete Specification +# Product Owner Spec Document +# Target: /home/projetos/agentes-vendas/index.html +# Date: 2026-02-28 + +--- + +## PRODUCT OVERVIEW + +**Product Name:** AgentFlow (based on Agents-Orchestrator v1.1.0) +**Repository:** /home/projetos/Agents-Orchestrator +**Target Sales Site Dir:** /home/projetos/agentes-vendas +**Language:** Portuguese (Brazil) +**Existing Reference:** /home/projetos/agen/index.html (2648 lines — existing landing page) +**Reference Design System:** /home/projetos/agen/DESIGN_SYSTEM.md +**Reference Copy:** /home/projetos/agen/LANDING_PAGE_COPY.md + +--- + +## PRODUCT CAPABILITIES (for copywriting) + +1. Visual orchestration of multiple Claude AI agents via web interface +2. Visual drag-and-drop editor for sequential pipelines +3. Real-time terminal with streaming agent output (WebSocket) +4. Automatic task scheduling via cron expressions +5. Native Gitea integration (auto-commit/push) +6. Webhooks for integration with external systems (HMAC-SHA256 signed) +7. Dashboard with metrics, interactive charts (Chart.js), execution history +8. Feature flags and granular per-agent settings +9. Multi-agent support with coordination and automatic delegation +10. Self-hosted, open-source (MIT), zero cloud service dependency +11. Docker deploy in one command with automatic HTTPS via Caddy +12. Human-in-the-loop approval gates in pipelines +13. Export/import agent configurations as JSON +14. File explorer with publish-to-subdomain feature +15. Task catalog with 6 templates (Code Review, Security, Refactoring, Tests, Docs, Performance) +16. Redis cache support (optional L2 cache) +17. Bearer token auth, rate limiting, CORS protection, path traversal protection + +--- + +## DESIGN SYSTEM (to be used exactly) + +### Color Palette + +```css +:root { + --color-bg-primary: #09090B; + --color-bg-secondary: #111113; + --color-bg-tertiary: #18181B; + --color-bg-elevated: #1E1E22; + --color-bg-glass: rgba(17, 17, 19, 0.72); + --color-bg-code: #0D0D10; + --color-border: rgba(255, 255, 255, 0.08); + --color-border-subtle: rgba(255, 255, 255, 0.04); + --color-border-hover: rgba(255, 255, 255, 0.14); + --color-border-active: rgba(99, 102, 241, 0.4); + --color-text-primary: #FAFAFA; + --color-text-secondary: #A1A1AA; + --color-text-muted: #71717A; + --color-text-ghost: #52525B; + --color-accent-primary: #6366F1; + --color-accent-primary-hover: #818CF8; + --color-accent-primary-dark: #4F46E5; + --color-accent-glow: rgba(99, 102, 241, 0.15); + --color-accent-glow-strong: rgba(99, 102, 241, 0.30); + --color-accent-secondary: #8B5CF6; + --color-accent-tertiary: #22D3EE; + --color-success: #22C55E; + --color-warning: #EAB308; + --color-error: #EF4444; + --gradient-hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,0.18) 0%, rgba(139,92,246,0.08) 40%, transparent 70%); + --gradient-text-hero: linear-gradient(135deg, #FAFAFA 0%, #C7D2FE 40%, #818CF8 70%, #8B5CF6 100%); + --gradient-cta: linear-gradient(135deg, #6366F1 0%, #7C3AED 100%); +} +``` + +### Typography +- Display/Headlines: Inter (400, 500, 600, 700) +- Body: Inter +- Code/Terminal: JetBrains Mono (400, 500) +- Google Fonts: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap + +### Stack +- Pure HTML/CSS/JavaScript (no frameworks, no bundlers) +- SINGLE index.html file with embedded CSS and JS +- CSS custom properties for theming +- IntersectionObserver for scroll animations +- CSS transforms for parallax +- requestAnimationFrame for counters/animations + +--- + +## SITE STRUCTURE — ALL PAGES + +The site is a SINGLE PAGE (index.html) with multiple sections. + +### Section Order: +1. Navbar (sticky, glassmorphism on scroll) +2. Hero Section +3. Social Proof / Compatibility Bar (logos) +4. Value Proposition (3 pillars) +5. How It Works (3 steps) +6. Features Detail (4 groups / tabs) +7. Terminal Demo (animated) +8. Testimonials (3 cards) +9. Stats / Impact Metrics (animated counters) +10. Pricing (3 tiers) +11. FAQ (accordion, 8 questions) +12. Final CTA Section +13. Footer + +--- + +## SECTION SPECIFICATIONS + +### 1. NAVBAR +- Logo: SVG icon + "AgentFlow" wordmark +- Links: Features | Pipelines | Pricing | FAQ +- CTA button: "Comecar" → https://agents.nitro-cloud.duckdns.org/ +- GitHub link with GitHub icon → https://git.nitro-cloud.duckdns.org/fred/Agents-Orchestrator +- Mobile hamburger menu with slide-in drawer +- On scroll: glassmorphism background + border bottom appears +- WCAG: aria-label, aria-expanded, skip-to-content link + +### 2. HERO SECTION +- Badge: "Open Source · Orquestração Multi-Agente IA" +- H1: "Controle seus agentes IA em um painel." +- Subheadline: "Crie, configure e execute múltiplos agentes Claude Code a partir de uma interface visual única. Pipelines automatizados, scheduling com cron, terminal em tempo real e métricas de custo — tudo em um deploy." +- CTA Primary: "[Instalar Agora — é Gratuito]" +- CTA Secondary: "[Ver no GitHub]" + "[Explorar a Demo]" +- Micro copy: "Deploy em um único comando. Self-hosted. Sem cartão de crédito." +- Social Proof Bar: 3 columns — MIT Open Source | Deploy < 2 min com Docker | Agentes Simultâneos: Sem Limite +- Hero visual: Animated mock dashboard card showing agents running +- Background: radial gradient glow from top + subtle grid pattern +- PARALLAX: The glow orb in background shifts on scroll +- Entrance animations: badge fades in first, then H1, then subheadline, then CTAs, staggered + +### 3. COMPATIBILITY BAR +- Title: "Integra com seu stack atual" +- Logos (SVG inline or text badges): Claude/Anthropic, Docker, Node.js, Caddy, Redis, GitHub, GitLab, Linux, VS Code, Slack +- Horizontal scroll marquee animation on mobile +- Subtle fade-in from sides + +### 4. VALUE PROPOSITION (3 PILLARS) +- Section kicker: "Por que AgentFlow" +- H2: "Por que equipes técnicas escolhem o AgentFlow" +- 3 cards: + - Card 1: icon(terminal) | "Orquestre agentes, não terminais" | desc + - Card 2: icon(git-merge) | "Pipelines que pensam em sequência" | desc + - Card 3: icon(bar-chart-2) | "Visibilidade total de custo e performance" | desc +- Cards have: glow border on hover, mouse-tracking gradient effect +- Staggered scroll animation (data-animate with delay) + +### 5. HOW IT WORKS (3 STEPS) +- Section kicker: "Como funciona" +- H2: "Do deploy ao primeiro pipeline em 3 passos" +- Step 1: "Instale com um comando" + docker compose up -d code snippet +- Step 2: "Crie seus agentes" + description +- Step 3: "Monte pipelines e agende" + description +- Layout: numbered steps with connecting line/dots (vertical on mobile, visual flow) +- Code blocks styled with JetBrains Mono + syntax highlight colors + +### 6. FEATURES DETAIL (TABS) +- Section kicker: "Features" +- H2: "Tudo que você precisa para gerenciar agentes IA em produção" +- Tab navigation: Agentes | Pipelines | Monitoramento | Infraestrutura +- Each tab shows 4 feature items with icon + title + description +- Tab panel switch animation +- Tab 1 (Agentes): Prompts customizados | Seleção de modelo | Diretórios isolados | Permissões granulares +- Tab 2 (Pipelines): Pipelines sequenciais | Templates prontos | Scheduling cron | Human-in-the-loop +- Tab 3 (Monitoramento): Terminal tempo real | Dashboard métricas | Ranking agentes | Histórico completo +- Tab 4 (Infraestrutura): Docker deploy | Webhooks HMAC | Export/Import JSON | Redis cache + +### 7. TERMINAL DEMO +- Section kicker: "Demonstração" +- H2: "Veja o AgentFlow em ação" +- Animated terminal window showing a pipeline executing +- Terminal header with 3 colored dots (mac-style) +- Lines appear one by one with typewriter effect +- Content: pipeline with 3 agents (logic-reviewer, security-auditor, test-generator) +- Final line: "✓ Pipeline completo em 1m35s | Custo: $0.042 | Status: SUCCESS" +- Animation triggered by IntersectionObserver + +### 8. TESTIMONIALS (3 CARDS) +- Section kicker: "Prova social" +- H2: "Quem já usa confia nos resultados" +- Card 1: Mariana Souza, Dev Lead na Kerno (Série A, 22 engenheiros) — code review quote +- Card 2: Rafael Mendes, DevOps Engineer na Dataside — scheduling/cost quote +- Card 3: Thiago Rios, CTO na Finova Sistemas (Fintech) — human-in-the-loop compliance quote +- Cards: avatar initial + name + role + quote +- Scroll-triggered fade-in with stagger + +### 9. STATS / IMPACT METRICS +- Section kicker: "Impacto" +- H2: "Resultados medidos por equipes reais" +- 4 metrics with animated counters: + - 83% — Redução no tempo de code review + - 34h/mês — Economia média em horas de DevOps + - 12 min — Tempo médio até o primeiro pipeline + - 61% — Redução de incidentes de segurança +- Counters animate when scrolled into view +- Background: slightly elevated section + +### 10. PRICING (3 TIERS) +- Section kicker: "Pricing" +- H2: "Escolha o plano que faz sentido para seu time" +- Subtitle: "O AgentFlow é open-source e sempre será..." +- Tier 1 (Community): Gratuito para sempre | 6 features | CTA: [Instalar Agora] +- Tier 2 (Pro): R$ 1.299/mês | 8 features | CTA: [Começar Trial de 14 Dias] — HIGHLIGHTED/FEATURED +- Tier 3 (Enterprise): Sob consulta | 8 features | CTA: [Falar com Vendas] +- Pro tier: accent border glow, "Mais Popular" badge + +### 11. FAQ (ACCORDION) +- Section kicker: "FAQ" +- H2: "Perguntas frequentes" +- 8 questions with accordion animation: + 1. Preciso de uma API key da Anthropic? + 2. Quantos agentes posso criar simultaneamente? + 3. Os dados dos meus repositórios ficam seguros? + 4. Posso usar modelos diferentes para agentes diferentes? + 5. Como funciona o human-in-the-loop nos pipelines? + 6. O AgentFlow suporta alta disponibilidade (HA)? + 7. Como integro o AgentFlow com meu CI/CD pipeline existente? + 8. Qual a diferença entre o AgentFlow e usar o Claude Code diretamente no terminal? +- Smooth height animation on open/close +- Chevron icon rotates 180deg on open + +### 12. FINAL CTA +- H2: "Seus agentes IA merecem um painel de controle." +- Subtext: "Instale o AgentFlow em menos de 2 minutos. Self-hosted, open-source, sem limites..." +- CTA: [Instalar Agora — Gratuito e Open Source] +- Micro copy: "Licença MIT. Sem trackers. Sem vendor lock-in. Código no GitHub." +- Background: subtle gradient overlay + +### 13. FOOTER +- Logo + tagline +- 4 columns: Produto | Recursos | Empresa | Legal +- Links per column (can be # for now) +- Bottom bar: copyright + "Feito com dedicação para equipes de engenharia." +- Social links: GitHub icon + +--- + +## ANIMATIONS & PARALLAX REQUIREMENTS + +### Scroll Animations (IntersectionObserver) +- All section headers: fade up (translateY 30px → 0, opacity 0 → 1) +- Feature cards: staggered fade up (100ms delay between each) +- Testimonial cards: staggered fade left +- Stats counters: count up animation on intersect +- Terminal demo: typewriter on intersect + +### Parallax Effects (CSS transform on scroll) +- Hero background glow orb: moves at 0.3x scroll speed (parallax depth) +- Hero H1 text: subtle 0.1x parallax (slight lift feel) +- Section dividers or decorative elements: 0.2x parallax + +### Micro-interactions +- Feature cards: mouse-tracking gradient (--mouse-x, --mouse-y CSS vars) +- CTA buttons: shimmer/shine effect on hover +- Navbar links: underline slide animation +- FAQ accordion: smooth height transition +- Pricing cards: lift + glow on hover + +### Performance constraints +- No heavy particle systems +- Parallax via CSS transforms only (no JS position tracking) +- Use will-change: transform sparingly +- requestAnimationFrame for counter animations +- prefers-reduced-motion media query must disable all animations + +--- + +## ACCESSIBILITY REQUIREMENTS (WCAG 2.1 AA) + +- Skip to main content link +- All interactive elements: visible focus ring +- Minimum contrast 4.5:1 for normal text +- Minimum contrast 3:1 for large text and UI components +- All images: descriptive alt text +- All icons: aria-hidden="true" (decorative) or aria-label (interactive) +- Buttons: clear accessible names +- FAQ accordion: aria-expanded, aria-controls +- Tabs: role="tablist", role="tab", aria-selected, aria-controls +- Mobile menu: aria-label, aria-expanded on toggle button +- Semantic HTML: proper heading hierarchy (h1 → h2 → h3) +- Form elements (if any): associated labels + +--- + +## RESPONSIVENESS + +### Breakpoints +- Mobile: < 640px +- Tablet: 640px – 1024px +- Desktop: > 1024px + +### Mobile adaptations +- Navbar: hamburger menu, slide-in drawer +- Hero: single column, smaller font sizes (fluid type via clamp()) +- Value props: single column cards +- Features tabs: horizontal scroll or vertical stack +- Testimonials: vertical stack +- Pricing: vertical stack (no 3-column grid) +- Footer: single column + +--- + +## SEO META TAGS + +```html +AgentFlow — Dashboard para Orquestrar Agentes Claude Code | Open Source + + +``` + +Plus Open Graph and Twitter Card tags (use og:image, og:description, etc.) + +--- + +## TECHNICAL IMPLEMENTATION NOTES + +- Single file: /home/projetos/agentes-vendas/index.html +- All CSS inline in