FORJA.AC<script src="https://cdn.tailwindcss.com"></script><script src="https://unpkg.com/lucide@latest"></script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet"><style>body { font-family: 'Inter', sans-serif; }h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif; }.font-mono { font-family: 'JetBrains Mono', monospace; }.bg-grid-pattern {background-size: 40px 40px;background-image:linear-gradient(to right, rgba(48, 70, 46, 0.1) 1px, transparent 1px),linear-gradient(to bottom, rgba(48, 70, 46, 0.1) 1px, transparent 1px);}.scanline {background: linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0) 50%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.2));background-size: 100% 4px;pointer-events: none;position: absolute;inset: 0;z-index: 50;opacity: 0.4;}input[type=range] {-webkit-appearance: none;background: transparent;}input[type=range]::-webkit-slider-thumb {-webkit-appearance: none;height: 12px;width: 6px;background: #76b072; cursor: pointer;margin-top: -4px;box-shadow: 0 0 10px rgba(48, 70, 46, 0.8);}input[type=range]::-webkit-slider-runnable-track {width: 100%;height: 4px;cursor: pointer;background: #1e2b1d;border-radius: 2px;}@keyframes pulse-glow {0%, 100% { box-shadow: 0 0 10px rgba(48, 70, 46, 0.2); }50% { box-shadow: 0 0 20px rgba(76, 176, 114, 0.4); }}.animate-glow { animation: pulse-glow 3s infinite; }</style><link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">.font-geist { font-family: 'Geist', sans-serif !important; }</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">.font-roboto { font-family: 'Roboto', sans-serif !important; }</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">.font-montserrat { font-family: 'Montserrat', sans-serif !important; }</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">.font-poppins { font-family: 'Poppins', sans-serif !important; }</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">.font-playfair { font-family: 'Playfair Display', serif !important; }</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">.font-merriweather { font-family: 'Merriweather', serif !important; }</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">.font-manrope { font-family: 'Manrope', sans-serif !important; }</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">.font-work-sans { font-family: 'Work Sans', sans-serif !important; }</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">.font-pt-serif { font-family: 'PT Serif', serif !important; }</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">.font-geist-mono { font-family: 'Geist Mono', monospace !important; }</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">.font-space-mono { font-family: 'Space Mono', monospace !important; }</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">.font-quicksand { font-family: 'Quicksand', sans-serif !important; }</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">.font-nunito { font-family: 'Nunito', sans-serif !important; }</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">.font-newsreader { font-family: 'Newsreader', serif !important; }</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">.font-oswald { font-family: 'Oswald', sans-serif !important; }</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }</style></head><body class="bg-[#050805] text-[#8fa38d] selection:bg-[#30462e] selection:text-white overflow-x-hidden relative"> <div class="fixed top-0 left-0 w-full h-screen overflow-hidden -z-10 pointer-events-none"> <div class="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] bg-[#30462e]/20 rounded-full blur-[120px]"></div> <div class="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-[#1a2619]/40 rounded-full blur-[100px]"></div> <div class="absolute inset-0 bg-grid-pattern opacity-40"></div> </div> <header class="fixed z-40 bg-[#050805]/80 w-full border-[#30462e]/40 border-b top-0 backdrop-blur-md"> <div class="flex h-16 max-w-7xl mr-auto ml-auto pr-6 pl-6 items-center justify-between"> <a href="#" class="flex items-center gap-2 group"> <div class="group-hover:scale-110 transition-transform w-8 h-8 flex items-center justify-center"> <img src="https://www.aura.build/editor/Logo%20Forja%20(4).png" alt="Forja Logo" class="w-full h-full object-contain"> </div> <span class="text-lg font-medium text-slate-100 tracking-tight font-mono">FORJA<span class="text-[#76b072]">.AC</span></span> </a> <nav class="hidden md:flex gap-8 text-[11px] font-medium tracking-widest uppercase text-[#5a6b58] font-mono"> <a href="#solutions" class="hover:text-[#86efac] transition-colors font-sans">Solutions</a> <a href="#architecture" class="hover:text-[#86efac] transition-colors font-sans">Architecture</a> <a href="#stack" class="hover:text-[#86efac] transition-colors font-sans">Stack</a> </nav> <a href="#contact" class="group flex items-center gap-2 hover:border-[#4d704a] transition-all duration-300 bg-[#0c120c]/50 border-[#30462e] border rounded-sm px-4 py-2"> <span class="text-[10px] uppercase text-[#e2e8e1] font-medium tracking-widest group-hover:text-[#86efac] font-mono font-sans"> Book Audit </span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="terminal" class="lucide lucide-terminal w-3 h-3 text-[#5a6b58] group-hover:text-[#86efac] transition-colors"><path d="M12 19h8"></path><path d="m4 17 6-6-6-6"></path></svg> </a></div> </header> <main class="z-10 pt-32 pr-6 pb-20 pl-6 relative"> <div class="grid grid-cols-1 lg:grid-cols-12 max-w-7xl mr-auto ml-auto gap-x-12 gap-y-12 items-end"> <div class="lg:col-span-7"> <div class="inline-flex gap-2 bg-[#30462e]/10 border-[#30462e] border rounded-full mb-8 pt-1 pr-3 pb-1 pl-3 gap-x-2 gap-y-2 items-center"> <div class="w-1.5 h-1.5 bg-[#76b072] rounded-full animate-pulse"></div> <span class="text-[10px] uppercase text-[#76b072] tracking-[0.2em] font-mono">ESTEJA A FRENTE DO MERCADO</span> </div> <h1 class="leading-[0.9] md:text-7xl lg:text-[5.5rem] text-5xl font-semibold text-white tracking-tighter mb-8" style="">CRESCIMENTO <br> DE <span class="bg-clip-text font-semibold text-transparent bg-gradient-to-r from-[#76b072] via-[#a4dca4] to-white" style="">RECEITA</span> <br> COM IA.</h1> <p class="md:text-lg leading-relaxed text-sm font-light text-[#8fa38d] max-w-xl border-[#30462e] border-l mb-10 pl-6"> Nós construímos agentes de inteligência artificial personalizados para o seu negócio com um único objetivo: crescer seu negócio</p> <div class="flex flex-col sm:flex-row gap-4"> <button class="relative overflow-hidden bg-[#30462e] hover:bg-[#3d593a] text-white px-8 py-4 rounded-sm transition-all hover:shadow-[0_0_20px_rgba(48,70,46,0.4)] group"> <span class="z-10 uppercase flex items-center gap-3 text-xs font-bold tracking-widest font-mono relative" style="">quero testar gratuitamente</span> </button> <button class="px-8 py-4 border border-[#30462e] hover:border-[#4d704a] text-[#aebfb0] rounded-sm transition-all hover:bg-[#30462e]/20"> <span class="text-xs font-bold tracking-widest uppercase flex items-center gap-3 font-mono font-sans"> View Protocols <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="network" class="lucide lucide-network w-4 h-4"><rect x="16" y="16" width="6" height="6" rx="1"></rect><rect x="2" y="16" width="6" height="6" rx="1"></rect><rect x="9" y="2" width="6" height="6" rx="1"></rect><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"></path><path d="M12 12V8"></path></svg> </span> </button> </div> </div> <div class="lg:col-span-5 relative w-full"> <div class="animate-glow bg-[#0a0f0a]/90 border-[#30462e] border rounded-lg pt-6 pr-6 pb-6 pl-6 relative shadow-2xl backdrop-blur-sm"> <div class="flex justify-between items-center mb-6 border-b border-[#30462e] pb-4"> <span class="text-[10px] font-mono text-[#5a6b58] flex items-center gap-2 font-sans"> <div class="w-2 h-2 rounded-full bg-[#4d704a]"></div> NEURAL_ENGINE_STATUS </span> <div class="flex gap-1"> <div class="w-1 h-1 rounded-full bg-[#30462e]"></div> <div class="w-1 h-1 rounded-full bg-[#30462e]"></div> <div class="w-1 h-1 rounded-full bg-[#30462e]"></div> </div> </div> <div class="space-y-4 mb-8"> <div> <div class="flex text-[10px] text-[#5a6b58] font-mono mb-1 justify-between"> <span class="font-sans">TOKEN_THROUGHPUT</span> <span class="text-[#86efac] font-sans">842 t/s</span> </div> <div class="h-8 bg-[#0f160e] rounded-sm relative overflow-hidden border border-[#30462e]"> <div class="absolute top-0 left-0 h-full w-[75%] bg-gradient-to-r from-[#30462e] to-[#4d704a] border-r border-[#76b072]"> </div> <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDRoNFYwSDB2NHptMi0yaDJ2MmgtMnYtMnoiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iMC4yIi8+PC9zdmc+')] opacity-20"> </div> </div> </div> <div> <div class="flex justify-between text-[10px] font-mono text-[#5a6b58] mb-1"> <span class="font-sans">INFERENCE_COST</span> <span class="text-[#76b072] font-sans">OPTIMIZED</span> </div> <div class="h-8 bg-[#0f160e] rounded-sm relative overflow-hidden border border-[#30462e]"> <div class="absolute top-0 left-0 h-full w-[45%] bg-gradient-to-r from-[#30462e] to-[#5a8155] border-r border-[#76b072]"> </div> </div> </div> </div> <div class="grid grid-cols-2 gap-6 mt-4"> <div> <label class="text-[10px] font-mono text-[#5a6b58] block mb-2 font-sans">TEMPERATURE</label> <input type="range" min="0" max="100" value="20" class="w-full"> </div> <div> <label class="text-[10px] font-mono text-[#5a6b58] block mb-2 font-sans">TOP_P</label> <input type="range" min="0" max="100" value="90" class="w-full"> </div> </div> <div class="mt-6 pt-4 border-t border-[#30462e]"> <code class="text-[10px] text-[#a4dca4] font-mono block leading-relaxed opacity-70 font-sans"> > init_workflow(model="gpt-4-turbo") > connecting vector_db... OK > agents_deployed: 4 </code> </div> </div> </div> </div></main> <section id="solutions" class="border-t border-[#30462e]/30 py-24 relative bg-[#050805]"> <div class="max-w-7xl mx-auto px-6"> <div class="mb-16"> <h2 class="text-3xl md:text-4xl text-white tracking-tight mb-4 font-sans font-semibold"> INTELLIGENCE SOLUTIONS </h2> <div class="w-20 h-1 bg-gradient-to-r from-[#4d704a] to-transparent"></div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="group hover:bg-[#151f15] transition-colors overflow-hidden bg-[#0c120c] border-[#30462e] border rounded-sm pt-8 pr-8 pb-8 pl-8 relative"> <div class="absolute top-0 left-0 w-1 h-full bg-[#5a8155] transform -translate-y-full group-hover:translate-y-0 transition-transform duration-500"></div> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bot" class="lucide lucide-bot text-[#76b072] w-8 h-8 mb-6"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg> <h3 class="uppercase text-lg font-medium text-white tracking-wide font-mono mb-2" style="">AI Agents</h3> <p class="text-xs text-[#8fa38d] leading-relaxed font-sans"> Autonomous digital workers capable of executing complex workflows, from customer support to data analysis, 24/7. </p> </div> <div class="group p-8 border border-[#30462e] bg-[#0c120c] hover:bg-[#151f15] transition-colors relative overflow-hidden rounded-sm"> <div class="absolute top-0 left-0 w-1 h-full bg-[#4d704a] transform -translate-y-full group-hover:translate-y-0 transition-transform duration-500 delay-75"></div> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="database" class="lucide lucide-database text-[#6ea36a] w-8 h-8 mb-6"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5"></path><path d="M3 12A9 3 0 0 0 21 12"></path></svg> <h3 class="text-lg font-medium text-white mb-2 font-mono uppercase tracking-wide font-sans">RAG Pipelines</h3> <p class="text-xs text-[#8fa38d] leading-relaxed font-sans"> Retrieval-Augmented Generation systems that connect LLMs to your private data, ensuring accurate, hallucination-free answers. </p> </div> <div class="group p-8 border border-[#30462e] bg-[#0c120c] hover:bg-[#151f15] transition-colors relative overflow-hidden rounded-sm"> <div class="absolute top-0 left-0 w-1 h-full bg-[#3d593a] transform -translate-y-full group-hover:translate-y-0 transition-transform duration-500 delay-150"></div> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="workflow" class="lucide lucide-workflow text-[#5a8155] w-8 h-8 mb-6"><rect width="8" height="8" x="3" y="3" rx="2"></rect><path d="M7 11v4a2 2 0 0 0 2 2h4"></path><rect width="8" height="8" x="13" y="13" rx="2"></rect></svg> <h3 class="text-lg font-medium text-white mb-2 font-mono uppercase tracking-wide font-sans">Automation</h3> <p class="text-xs text-[#8fa38d] leading-relaxed font-sans"> End-to-end business process automation connecting your CRM, ERP, and communication tools via intelligent logic layers. </p> </div> </div> </div> </section> <section id="architecture" class="bg-[#080d08] py-24 relative overflow-hidden"> <div class="max-w-7xl mx-auto px-6"> <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6"> <div> <span class="uppercase text-[10px] text-[#5a6b58] tracking-widest font-mono font-sans"> Implementation Protocol </span> <h2 class="text-4xl md:text-5xl text-white tracking-tight mt-2 font-sans font-semibold"> SYSTEM ARCHITECTURE </h2> </div> <p class="text-right text-sm text-[#8fa38d] max-w-sm font-mono font-sans"> > Initializing 4-step deployment sequence... </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div class="bg-[#0c120c] rounded-md border border-[#30462e] flex flex-col h-full hover:border-[#4d704a] transition-all duration-300 group"> <div class="h-8 bg-[#151f15] flex items-center px-4 justify-between rounded-t-md border-b border-[#30462e]"> <span class="text-[10px] font-semibold text-[#aebfb0] uppercase font-mono font-sans">01 <div class="w-1.5 h-1.5 bg-[#456341] rounded-full group-hover:bg-[#76b072] shadow-[0_0_5px_transparent] group-hover:shadow-[0_0_5px_#76b072] transition-all"></div> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div> <h3 class="text-white font-medium text-lg mb-2 font-sans">Audit & Strategy</h3> <ul class="space-y-3 mt-4"> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#5a8155]"><path d="M20 6 9 17l-5-5"></path></svg> Data Feasibility </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#5a8155]"><path d="M20 6 9 17l-5-5"></path></svg> ROI Calculation </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#5a8155]"><path d="M20 6 9 17l-5-5"></path></svg> Stack Selection </li> </ul> </div> </div> </div> <div class="bg-[#0c120c] rounded-md border border-[#30462e] flex flex-col h-full hover:border-[#5a8155] transition-all duration-300 group"> <div class="h-8 bg-[#151f15] flex items-center px-4 justify-between rounded-t-md border-b border-[#30462e]"> <span class="text-[10px] font-semibold text-[#aebfb0] uppercase font-mono font-sans">02 <div class="w-1.5 h-1.5 bg-[#456341] rounded-full group-hover:bg-[#87bd80] shadow-[0_0_5px_transparent] group-hover:shadow-[0_0_5px_#87bd80] transition-all"></div> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div> <h3 class="text-white font-medium text-lg mb-2 font-sans">Development</h3> <ul class="space-y-3 mt-4"> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#709f6a]"><path d="M20 6 9 17l-5-5"></path></svg> Fine-Tuning </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#709f6a]"><path d="M20 6 9 17l-5-5"></path></svg> Vector Embedding </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#709f6a]"><path d="M20 6 9 17l-5-5"></path></svg> Prompt Engineering </li> </ul> </div> </div> </div> <div class="bg-[#0c120c] rounded-md border border-[#30462e] flex flex-col h-full hover:border-[#709f6a] transition-all duration-300 group"> <div class="h-8 bg-[#151f15] flex items-center px-4 justify-between rounded-t-md border-b border-[#30462e]"> <span class="text-[10px] font-semibold text-[#aebfb0] uppercase font-mono font-sans">03 <div class="w-1.5 h-1.5 bg-[#456341] rounded-full group-hover:bg-[#a4dca4] shadow-[0_0_5px_transparent] group-hover:shadow-[0_0_5px_#a4dca4] transition-all"></div> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div> <h3 class="text-white font-medium text-lg mb-2 font-sans">Deployment</h3> <ul class="space-y-3 mt-4"> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#87bd80]"><path d="M20 6 9 17l-5-5"></path></svg> API Connectivity </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#87bd80]"><path d="M20 6 9 17l-5-5"></path></svg> Cloud Setup </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#87bd80]"><path d="M20 6 9 17l-5-5"></path></svg> Latency Testing </li> </ul> </div> </div> </div> <div class="bg-[#0c120c] rounded-md border border-[#30462e] flex flex-col h-full hover:border-[#86efac] transition-all duration-300 group"> <div class="h-8 bg-[#151f15] flex items-center px-4 justify-between rounded-t-md border-b border-[#30462e]"> <span class="text-[10px] font-semibold text-[#aebfb0] uppercase font-mono font-sans">04 <div class="w-1.5 h-1.5 bg-[#456341] rounded-full group-hover:bg-[#86efac] shadow-[0_0_5px_transparent] group-hover:shadow-[0_0_5px_#86efac] transition-all"></div> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div> <h3 class="text-white font-medium text-lg mb-2 font-sans">Scale & Refine</h3> <ul class="space-y-3 mt-4"> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#86efac]"><path d="M20 6 9 17l-5-5"></path></svg> Active Learning </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#86efac]"><path d="M20 6 9 17l-5-5"></path></svg> Cost Monitoring </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#86efac]"><path d="M20 6 9 17l-5-5"></path></svg> Edge Cases </li> </ul> </div> </div> </div> </div> </div> </section> <section class="border-t border-[#30462e]/30 py-24 bg-[#050805]"> <div class="max-w-7xl mx-auto px-6"> <div class="bg-[#0c120c] border border-[#30462e] rounded-xl p-8 md:p-12 relative overflow-hidden"> <div class="grid md:grid-cols-2 gap-12 items-center"> <div> <div class="flex gap-3 mb-6 items-center"> <span class="flex h-3 w-3 relative"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#76b072] opacity-75"></span> <span class="relative inline-flex rounded-full h-3 w-3 bg-[#4d704a]"></span> </span> <span class="text-[10px] font-mono text-[#76b072] tracking-widest uppercase font-sans"> Live Monitoring </span> </div> <h2 class="text-4xl text-white tracking-tight mb-6 font-sans font-semibold"> REAL-TIME OVERSIGHT </h2> <p class="text-sm text-[#8fa38d] leading-relaxed mb-8 font-sans"> We don't just deploy; we provide the dashboard to control your synthetic workforce. Monitor token usage, agent interactions, and success rates from a central command center. </p> <div class="flex items-center gap-4 text-xs font-mono text-[#5a6b58]"> <span class="border-b border-[#76b072] text-[#e2e8e1] pb-1 cursor-pointer font-sans">Dashboard</span> <span class="hover:text-[#aebfb0] cursor-pointer font-sans">Logs</span> <span class="hover:text-[#aebfb0] cursor-pointer font-sans">API Keys</span> </div> </div> <div class="font-mono text-xs bg-[#080d08] border border-[#30462e] rounded-lg p-6 shadow-2xl relative"> <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#5a8155] via-[#76b072] to-transparent opacity-50"></div> <div class="flex justify-between border-b border-[#30462e] pb-4 mb-4 text-[#5a6b58]"> <span class="font-sans">AGENT_SWARM_01</span> <span class="text-[#76b072] font-sans">ONLINE</span> </div> <div class="space-y-3"> <div class="flex items-center justify-between p-3 bg-[#151f15] rounded border-l-2 border-[#5a8155]"> <span class="text-[#e2e8e1] font-sans">Analysis_Bot</span> <span class="text-[#86efac] font-sans">Processing Data...</span> </div> <div class="flex items-center justify-between p-3 bg-[#151f15] rounded border-l-2 border-[#4d704a]"> <span class="text-[#e2e8e1] font-sans">Support_Agent</span> <span class="text-[#76b072] font-sans">Ticket #8492 Resolved</span> </div> <div class="flex items-center justify-between p-3 bg-[#151f15] rounded border-l-2 border-[#30462e] opacity-60"> <span class="text-[#5a6b58] font-sans">Sales_Outreach</span> <span class="text-[#5a6b58] font-sans">Idle (Scheduled: 09:00)</span> </div> </div> <div class="mt-6 flex justify-between items-center pt-4 border-t border-[#30462e]"> <span class="text-[#5a6b58] font-sans">Total Tokens: 1.2M</span> <button class="bg-[#1e2b1d] hover:bg-[#30462e] text-white px-3 py-1 rounded-sm text-[10px] uppercase transition-colors font-sans"> View Full Logs </button> </div> </div> </div> </div> </div> </section> <section id="stack" class="py-20 bg-[#080d08] border-t border-[#30462e]/30"> <div class="max-w-7xl mx-auto px-6"> <h2 class="text-center text-xs font-mono text-[#5a6b58] mb-12 uppercase tracking-widest font-sans"> </h2> <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3"> <div class="aspect-[2/1] bg-[#30462e]/10 border-l-2 border-[#456341] p-4 flex items-end rounded-sm hover:bg-[#30462e]/20 transition-colors"> <span class="text-[10px] font-medium text-[#aebfb0] font-mono font-sans">OpenAI / GPT-4</span> </div> <div class="aspect-[2/1] bg-[#30462e]/10 border-l-2 border-[#5a8155] p-4 flex items-end rounded-sm hover:bg-[#30462e]/20 transition-colors"> <span class="text-[10px] font-medium text-[#aebfb0] font-mono font-sans">LangChain</span> </div> <div class="aspect-[2/1] bg-[#30462e]/10 border-l-2 border-[#709f6a] p-4 flex items-end rounded-sm hover:bg-[#30462e]/20 transition-colors"> <span class="text-[10px] font-medium text-[#aebfb0] font-mono font-sans">Python</span> </div> <div class="aspect-[2/1] bg-[#30462e]/10 border-l-2 border-[#87bd80] p-4 flex items-end rounded-sm hover:bg-[#30462e]/20 transition-colors"> <span class="text-[10px] font-medium text-[#aebfb0] font-mono font-sans">Pinecone DB</span> </div> <div class="aspect-[2/1] bg-[#30462e]/10 border-l-2 border-[#a4dca4] p-4 flex items-end rounded-sm hover:bg-[#30462e]/20 transition-colors"> <span class="text-[10px] font-medium text-[#aebfb0] font-mono font-sans">Hugging Face</span> </div> <div class="aspect-[2/1] bg-[#30462e]/10 border-l-2 border-[#86efac] p-4 flex items-end rounded-sm hover:bg-[#30462e]/20 transition-colors"> <span class="text-[10px] font-medium text-[#aebfb0] font-mono font-sans">LlamaIndex</span> </div> </div> </div> </section> <section class="border-t border-[#30462e]/30 py-24 bg-[#050805]"> <div class="max-w-5xl mx-auto px-6"> <div class="flex flex-col md:flex-row gap-12 items-center"> <div class="relative w-40 h-40 md:w-56 md:h-56 flex-shrink-0"> <div class="absolute inset-0 border border-[#5a8155] rounded-full animate-[spin_10s_linear_infinite]"></div> <div class="absolute inset-3 border border-dashed border-[#30462e] rounded-full animate-[spin_15s_linear_infinite_reverse]"></div> <div class="w-full h-full rounded-full bg-[#0c120c] flex items-center justify-center overflow-hidden"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="brain-circuit" class="lucide lucide-brain-circuit w-20 h-20 text-[#5a6b58]"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"></path><path d="M9 13a4.5 4.5 0 0 0 3-4"></path><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"></path><path d="M3.477 10.896a4 4 0 0 1 .585-.396"></path><path d="M6 18a4 4 0 0 1-1.967-.516"></path><path d="M12 13h4"></path><path d="M12 18h6a2 2 0 0 1 2 2v1"></path><path d="M12 8h8"></path><path d="M16 8V5a2 2 0 0 1 2-2"></path><circle cx="16" cy="13" r=".5"></circle><circle cx="18" cy="3" r=".5"></circle><circle cx="20" cy="21" r=".5"></circle><circle cx="20" cy="8" r=".5"></circle></svg> </div> </div> <div class="text-center md:text-left"> <span class="text-[#76b072] font-mono text-xs tracking-widest mb-2 block font-sans"> LEAD ARCHITECT </span> <h2 class="text-3xl text-white mb-4 uppercase font-sans font-semibold"> The Forja Vision </h2> <p class="leading-relaxed text-sm text-[#8fa38d] max-w-lg mb-6 font-sans"> "AI isn't just about chatbots; it's about fundamentally restructuring how value is created. We don't sell software; we sell cognitive labor and automated intelligence that scales indefinitely." </p> <div class="flex justify-center md:justify-start gap-4 text-[#5a6b58]"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="linkedin" class="lucide lucide-linkedin w-5 h-5 hover:text-white cursor-pointer transition-colors"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter" class="lucide lucide-twitter w-5 h-5 hover:text-white cursor-pointer transition-colors"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="github" class="lucide lucide-github w-5 h-5 hover:text-white cursor-pointer transition-colors"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg> </div> </div> </div> </div> </section> <section id="contact" class="relative overflow-hidden border-t border-[#30462e]/30 py-32 bg-[#080d08]"> <div class="scanline"></div> <div class="max-w-4xl mx-auto px-6 text-center relative z-10"> <h2 class="text-5xl md:text-7xl text-white tracking-tighter mb-8 font-sans font-semibold"> READY TO <br> <span class="text-[#5a6b58] font-sans font-semibold">BUILD?</span> </h2> <p class="text-sm text-[#8fa38d] mb-10 max-w-lg mx-auto font-sans"> Schedule a technical discovery call. We'll audit your current infrastructure and propose an AI implementation roadmap. </p> <button class="group relative inline-flex items-center justify-center px-8 py-4 font-semibold text-[#050805] transition-all duration-200 bg-white hover:bg-[#86efac] hover:scale-105 rounded-sm"> <span class="mr-2 text-sm uppercase tracking-wide font-mono font-sans"> Initialize Project </span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 group-hover:translate-x-1 transition-transform"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> <div class="absolute inset-0 -z-10 blur-lg opacity-40 bg-[#76b072] group-hover:opacity-100 transition-opacity duration-200"></div> </button> <p class="text-[10px] text-[#5a6b58] font-mono mt-8 opacity-60 font-sans"> ENCRYPTED_CONNECTION </p> </div> </section> <footer class="bg-[#050805] py-12 border-t border-[#30462e] font-mono text-[10px] text-[#5a6b58]"> <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between gap-8"> <div class="space-y-4"> <div class="flex items-center gap-2"> <div class="w-2 h-2 bg-[#30462e]"></div> <span class="text-[#8fa38d] tracking-widest font-sans">FORJA.AC</span> </div> <p class="max-w-xs font-sans">AI Implementation & Infrastructure Agency.</p> <p class="font-sans">© 2024 Forja.ac. All systems nominal.</p> </div> <div class="flex gap-12"> <div> <h4 class="text-[#8fa38d] mb-4 uppercase font-sans">Sitemap</h4> <ul class="space-y-2"> <li><a href="#" class="hover:text-[#86efac] transition-colors font-sans">> Solutions</a></li> <li><a href="#" class="hover:text-[#86efac] transition-colors font-sans">> Process</a></li> <li><a href="#" class="hover:text-[#86efac] transition-colors font-sans">> Login</a></li> </ul> </div> <div> <h4 class="text-[#8fa38d] mb-4 uppercase font-sans">Legal</h4> <ul class="space-y-2"> <li><a href="#" class="hover:text-[#86efac] transition-colors font-sans">> Privacy</a></li> <li><a href="#" class="hover:text-[#86efac] transition-colors font-sans">> Terms</a></li> </ul> </div> </div> </div> <div class="max-w-7xl mx-auto px-6 mt-12 pt-4 border-t border-[#30462e] flex justify-between items-center"> <div class="flex gap-2 items-center"> <div class="w-1.5 h-1.5 bg-[#4d704a] rounded-full animate-pulse"></div> <span class="font-sans">SYSTEM_STATUS: OPERATIONAL</span> </div> <span class="font-sans">LOC: GLOBAL</span> </div> </footer> <script> lucide.createIcons(); </script></body></html></div></div></div></div></div><script type='text/javascript'>window.getCrawler = function(){let user = {};if(document.cookie != ''){let split = document.cookie.split(';');for(var i = 0; i < split.length; i++){var conteudo = split[i].split('=');if(conteudo[0].indexOf('gpages_user') !== -1){ user = JSON.parse(decodeURI(conteudo[1]).replaceAll('%3A',':').replaceAll('%2C',',').replaceAll('%2F','/').replaceAll('%3B',';')); }}}if(typeof navigator.userAgentData != 'undefined'){let retorno = false;navigator.userAgentData.brands.forEach(function (item) {if(item.brand.toLowerCase() == 'lighthouse' || item.brand.toLowerCase() == 'gtmetrix'){ retorno = true; }});if(!retorno){ retorno = window.navigator.userAgent.indexOf('GTmetrix') !== -1 ? true : false; }if(user?.agent){ retorno = user.agent.indexOf('GTmetrix') !== -1 || user.agent.indexOf('Lighthouse') !== -1 ? true : false; }return retorno;} else {if(window.navigator.userAgent.indexOf('GTmetrix') !== -1 || window.navigator.userAgent.indexOf('Lighthouse') !== -1){ return true; }else if(user?.agent){ return user.agent.indexOf('GTmetrix') !== -1 || user.agent.indexOf('Lighthouse') !== -1 ? true : false; }else { return false; }}};</script><script id='css_externo' type='text/javascript'>var css = document.createElement('link');css.type = 'text/css';css.href = 'https://pages.greatpages.com.br/rafael-hottum.pages.net.br-teste/1767565496/css.css';css.rel = 'stylesheet';document.head.appendChild(css);</script><script id='js_externo' type='text/javascript'>var scripts = document.createElement('script');scripts.type = 'text/javascript';scripts.src = 'https://pages.greatpages.com.br/rafael-hottum.pages.net.br-teste/1767565496/js.js';scripts.defer = true;document.head.appendChild(scripts);</script><script id='js_views' type='text/javascript'>let random = Math.random().toString();window.eid = 'GPages.'+random.substr(random.length-4)+(new Date()).getTime();var c = '',u = '',fbclid = '', gpages_conversion = '',data = new Date();function FormatarDigitosData(valor, digitos) { if (valor.toString().length < digitos) { return (new Array(digitos - valor.toString().length+1).join('0'))+valor; } else { return valor; } }if(document.cookie != ''){var split = document.cookie.split(';');for(var i = 0; i < split.length; i++){var conteudo = split[i].split('=');if(conteudo[0].indexOf('_fbp') !== -1){ c = conteudo[1]; }if(conteudo[0].indexOf('_fbc') !== -1){ fbclid = conteudo[1]; }if(conteudo[0].indexOf('gpages_user') !== -1){ u = JSON.parse(decodeURI(conteudo[1]).replaceAll('%3A',':').replaceAll('%2C',',').replaceAll('%2F','/').replaceAll('%3B',';')); }if(conteudo[0].indexOf('gpages_conversion') !== -1){ gpages_conversion = JSON.parse(decodeURI(conteudo[1]).replaceAll('%3A',':').replaceAll('%2C',',').replaceAll('%2F','/').replaceAll('%3B',';')); }}}if(u.fbc == false){ fbclid = '';}if(u.fbp == false){ c = '';}if(typeof u != undefined){if(u?.eId != undefined){ window.eid = u.eId; }}if(typeof gpages_conversion != undefined){window.gpages_conversion = gpages_conversion;}</script><html lang="en" class="scroll-smooth"><head> <title>FORJA.AC <style> body { font-family: 'Inter', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif; } .font-mono { font-family: 'JetBrains Mono', monospace; } .bg-grid-pattern { background-size: 40px 40px; background-image: linear-gradient(to right, rgba(48, 70, 46, 0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(48, 70, 46, 0.1) 1px, transparent 1px); } .scanline { background: linear-gradient( to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2) ); background-size: 100% 4px; pointer-events: none; position: absolute; inset: 0; z-index: 50; opacity: 0.4; } input[type=range] { -webkit-appearance: none; background: transparent; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 12px; width: 6px; background: #76b072; cursor: pointer; margin-top: -4px; box-shadow: 0 0 10px rgba(48, 70, 46, 0.8); } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #1e2b1d; border-radius: 2px; } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 10px rgba(48, 70, 46, 0.2); } 50% { box-shadow: 0 0 20px rgba(76, 176, 114, 0.4); } } .animate-glow { animation: pulse-glow 3s infinite; } </style><style id="all-fonts-style-font-geist">.font-geist { font-family: 'Geist', sans-serif !important; }</style><style id="all-fonts-style-font-roboto">.font-roboto { font-family: 'Roboto', sans-serif !important; }</style><style id="all-fonts-style-font-montserrat">.font-montserrat { font-family: 'Montserrat', sans-serif !important; }</style><style id="all-fonts-style-font-poppins">.font-poppins { font-family: 'Poppins', sans-serif !important; }</style><style id="all-fonts-style-font-playfair">.font-playfair { font-family: 'Playfair Display', serif !important; }</style><style id="all-fonts-style-font-instrument-serif">.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }</style><style id="all-fonts-style-font-merriweather">.font-merriweather { font-family: 'Merriweather', serif !important; }</style><style id="all-fonts-style-font-bricolage">.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }</style><style id="all-fonts-style-font-jakarta">.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }</style><style id="all-fonts-style-font-manrope">.font-manrope { font-family: 'Manrope', sans-serif !important; }</style><style id="all-fonts-style-font-space-grotesk">.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }</style><style id="all-fonts-style-font-work-sans">.font-work-sans { font-family: 'Work Sans', sans-serif !important; }</style><style id="all-fonts-style-font-pt-serif">.font-pt-serif { font-family: 'PT Serif', serif !important; }</style><style id="all-fonts-style-font-geist-mono">.font-geist-mono { font-family: 'Geist Mono', monospace !important; }</style><style id="all-fonts-style-font-space-mono">.font-space-mono { font-family: 'Space Mono', monospace !important; }</style><style id="all-fonts-style-font-quicksand">.font-quicksand { font-family: 'Quicksand', sans-serif !important; }</style><style id="all-fonts-style-font-nunito">.font-nunito { font-family: 'Nunito', sans-serif !important; }</style><style id="all-fonts-style-font-newsreader">.font-newsreader { font-family: 'Newsreader', serif !important; }</style><style id="all-fonts-style-font-google-sans-flex">.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }</style><style id="all-fonts-style-font-oswald">.font-oswald { font-family: 'Oswald', sans-serif !important; }</style><style id="all-fonts-style-font-dm-sans">.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }</style></head> <body class="bg-[#050805] text-[#8fa38d] selection:bg-[#30462e] selection:text-white overflow-x-hidden relative"> <div class="fixed top-0 left-0 w-full h-screen overflow-hidden -z-10 pointer-events-none"> <div class="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] bg-[#30462e]/20 rounded-full blur-[120px]"></div> <div class="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-[#1a2619]/40 rounded-full blur-[100px]"></div> <div class="absolute inset-0 bg-grid-pattern opacity-40"></div> </div> <header class="fixed z-40 bg-[#050805]/80 w-full border-[#30462e]/40 border-b top-0 backdrop-blur-md"> <div class="flex h-16 max-w-7xl mr-auto ml-auto pr-6 pl-6 items-center justify-between"> <a href="#" class="flex items-center gap-2 group"> <div class="group-hover:scale-110 transition-transform w-8 h-8 flex items-center justify-center"> <img src="https://www.aura.build/editor/Logo%20Forja%20(4).png" alt="Forja Logo" class="w-full h-full object-contain"> </div> <span class="text-lg font-medium text-slate-100 tracking-tight font-mono">FORJA<span class="text-[#76b072]">.AC</span></span> </a> <nav class="hidden md:flex gap-8 text-[11px] font-medium tracking-widest uppercase text-[#5a6b58] font-mono"> <a href="#solutions" class="hover:text-[#86efac] transition-colors font-sans">Solutions</a> <a href="#architecture" class="hover:text-[#86efac] transition-colors font-sans">Architecture</a> <a href="#stack" class="hover:text-[#86efac] transition-colors font-sans">Stack</a> </nav> <a href="#contact" class="group flex items-center gap-2 hover:border-[#4d704a] transition-all duration-300 bg-[#0c120c]/50 border-[#30462e] border rounded-sm px-4 py-2"> <span class="text-[10px] uppercase text-[#e2e8e1] font-medium tracking-widest group-hover:text-[#86efac] font-mono font-sans"> Book Audit </span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="terminal" class="lucide lucide-terminal w-3 h-3 text-[#5a6b58] group-hover:text-[#86efac] transition-colors"><path d="M12 19h8"></path><path d="m4 17 6-6-6-6"></path></svg> </a> </div> </header> <main class="z-10 pt-32 pr-6 pb-20 pl-6 relative"> <div class="grid grid-cols-1 lg:grid-cols-12 max-w-7xl mr-auto ml-auto gap-x-12 gap-y-12 items-end"> <div class="lg:col-span-7"> <div class="inline-flex gap-2 bg-[#30462e]/10 border-[#30462e] border rounded-full mb-8 pt-1 pr-3 pb-1 pl-3 gap-x-2 gap-y-2 items-center"> <div class="w-1.5 h-1.5 bg-[#76b072] rounded-full animate-pulse"></div> <span class="text-[10px] uppercase text-[#76b072] tracking-[0.2em] font-mono">ESTEJA A FRENTE DO MERCADO</span> </div> <h1 class="leading-[0.9] md:text-7xl lg:text-[5.5rem] text-5xl font-semibold text-white tracking-tighter mb-8" style="">CRESCIMENTO <br> DE <span class="bg-clip-text font-semibold text-transparent bg-gradient-to-r from-[#76b072] via-[#a4dca4] to-white" style="">RECEITA</span> <br> COM IA.</h1> <p class="md:text-lg leading-relaxed text-sm font-light text-[#8fa38d] max-w-xl border-[#30462e] border-l mb-10 pl-6"> Nós construímos agentes de inteligência artificial personalizados para o seu negócio com um único objetivo: crescer seu negócio</p> <div class="flex flex-col sm:flex-row gap-4"> <button class="relative overflow-hidden bg-[#30462e] hover:bg-[#3d593a] text-white px-8 py-4 rounded-sm transition-all hover:shadow-[0_0_20px_rgba(48,70,46,0.4)] group"> <span class="z-10 uppercase flex items-center gap-3 text-xs font-bold tracking-widest font-mono relative" style="">quero testar gratuitamente</span> </button> <button class="px-8 py-4 border border-[#30462e] hover:border-[#4d704a] text-[#aebfb0] rounded-sm transition-all hover:bg-[#30462e]/20"> <span class="text-xs font-bold tracking-widest uppercase flex items-center gap-3 font-mono font-sans"> View Protocols <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="network" class="lucide lucide-network w-4 h-4"><rect x="16" y="16" width="6" height="6" rx="1"></rect><rect x="2" y="16" width="6" height="6" rx="1"></rect><rect x="9" y="2" width="6" height="6" rx="1"></rect><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"></path><path d="M12 12V8"></path></svg> </span> </button> </div> </div> <div class="lg:col-span-5 relative w-full"> <div class="animate-glow bg-[#0a0f0a]/90 border-[#30462e] border rounded-lg pt-6 pr-6 pb-6 pl-6 relative shadow-2xl backdrop-blur-sm"> <div class="flex justify-between items-center mb-6 border-b border-[#30462e] pb-4"> <span class="text-[10px] font-mono text-[#5a6b58] flex items-center gap-2 font-sans"> <div class="w-2 h-2 rounded-full bg-[#4d704a]"></div> NEURAL_ENGINE_STATUS </span> <div class="flex gap-1"> <div class="w-1 h-1 rounded-full bg-[#30462e]"></div> <div class="w-1 h-1 rounded-full bg-[#30462e]"></div> <div class="w-1 h-1 rounded-full bg-[#30462e]"></div> </div> </div> <div class="space-y-4 mb-8"> <div class=""> <div class="flex text-[10px] text-[#5a6b58] font-mono mb-1 justify-between"> <span class="font-sans">TOKEN_THROUGHPUT</span> <span class="text-[#86efac] font-sans">842 t/s</span> </div> <div class="h-8 bg-[#0f160e] rounded-sm relative overflow-hidden border border-[#30462e]"> <div class="absolute top-0 left-0 h-full w-[75%] bg-gradient-to-r from-[#30462e] to-[#4d704a] border-r border-[#76b072]"> </div> <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDRoNFYwSDB2NHptMi0yaDJ2MmgtMnYtMnoiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iMC4yIi8+PC9zdmc+')] opacity-20"> </div> </div> </div> <div class=""> <div class="flex justify-between text-[10px] font-mono text-[#5a6b58] mb-1"> <span class="font-sans">INFERENCE_COST</span> <span class="text-[#76b072] font-sans">OPTIMIZED</span> </div> <div class="h-8 bg-[#0f160e] rounded-sm relative overflow-hidden border border-[#30462e]"> <div class="absolute top-0 left-0 h-full w-[45%] bg-gradient-to-r from-[#30462e] to-[#5a8155] border-r border-[#76b072]"> </div> </div> </div> </div> <div class="grid grid-cols-2 gap-6 mt-4"> <div class=""> <label class="text-[10px] font-mono text-[#5a6b58] block mb-2 font-sans">TEMPERATURE</label> <input type="range" min="0" max="100" value="20" class="w-full"> </div> <div> <label class="text-[10px] font-mono text-[#5a6b58] block mb-2 font-sans">TOP_P</label> <input type="range" min="0" max="100" value="90" class="w-full"> </div> </div> <div class="mt-6 pt-4 border-t border-[#30462e]"> <code class="text-[10px] text-[#a4dca4] font-mono block leading-relaxed opacity-70 font-sans"> > init_workflow(model="gpt-4-turbo") > connecting vector_db... OK > agents_deployed: 4 </code> </div> </div> </div> </div> </main> <section id="solutions" class="border-t border-[#30462e]/30 py-24 relative bg-[#050805]"> <div class="max-w-7xl mx-auto px-6"> <div class="mb-16"> <h2 class="text-3xl md:text-4xl text-white tracking-tight mb-4 font-sans font-semibold"> INTELLIGENCE SOLUTIONS </h2> <div class="w-20 h-1 bg-gradient-to-r from-[#4d704a] to-transparent"></div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="group hover:bg-[#151f15] transition-colors overflow-hidden bg-[#0c120c] border-[#30462e] border rounded-sm pt-8 pr-8 pb-8 pl-8 relative"> <div class="absolute top-0 left-0 w-1 h-full bg-[#5a8155] transform -translate-y-full group-hover:translate-y-0 transition-transform duration-500"></div> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bot" class="lucide lucide-bot text-[#76b072] w-8 h-8 mb-6"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg> <h3 class="uppercase text-lg font-medium text-white tracking-wide font-mono mb-2" style="">AI Agents</h3> <p class="text-xs text-[#8fa38d] leading-relaxed font-sans"> Autonomous digital workers capable of executing complex workflows, from customer support to data analysis, 24/7. </p> </div> <div class="group p-8 border border-[#30462e] bg-[#0c120c] hover:bg-[#151f15] transition-colors relative overflow-hidden rounded-sm"> <div class="absolute top-0 left-0 w-1 h-full bg-[#4d704a] transform -translate-y-full group-hover:translate-y-0 transition-transform duration-500 delay-75"></div> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="database" class="lucide lucide-database text-[#6ea36a] w-8 h-8 mb-6"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5"></path><path d="M3 12A9 3 0 0 0 21 12"></path></svg> <h3 class="text-lg font-medium text-white mb-2 font-mono uppercase tracking-wide font-sans">RAG Pipelines</h3> <p class="text-xs text-[#8fa38d] leading-relaxed font-sans"> Retrieval-Augmented Generation systems that connect LLMs to your private data, ensuring accurate, hallucination-free answers. </p> </div> <div class="group p-8 border border-[#30462e] bg-[#0c120c] hover:bg-[#151f15] transition-colors relative overflow-hidden rounded-sm"> <div class="absolute top-0 left-0 w-1 h-full bg-[#3d593a] transform -translate-y-full group-hover:translate-y-0 transition-transform duration-500 delay-150"></div> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="workflow" class="lucide lucide-workflow text-[#5a8155] w-8 h-8 mb-6"><rect width="8" height="8" x="3" y="3" rx="2"></rect><path d="M7 11v4a2 2 0 0 0 2 2h4"></path><rect width="8" height="8" x="13" y="13" rx="2"></rect></svg> <h3 class="text-lg font-medium text-white mb-2 font-mono uppercase tracking-wide font-sans">Automation</h3> <p class="text-xs text-[#8fa38d] leading-relaxed font-sans"> End-to-end business process automation connecting your CRM, ERP, and communication tools via intelligent logic layers. </p> </div> </div> </div> </section> <section id="architecture" class="bg-[#080d08] py-24 relative overflow-hidden"> <div class="max-w-7xl mx-auto px-6"> <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6"> <div> <span class="uppercase text-[10px] text-[#5a6b58] tracking-widest font-mono font-sans"> Implementation Protocol </span> <h2 class="text-4xl md:text-5xl text-white tracking-tight mt-2 font-sans font-semibold"> SYSTEM ARCHITECTURE </h2> </div> <p class="text-right text-sm text-[#8fa38d] max-w-sm font-mono font-sans"> > Initializing 4-step deployment sequence... </p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <div class="bg-[#0c120c] rounded-md border border-[#30462e] flex flex-col h-full hover:border-[#4d704a] transition-all duration-300 group"> <div class="h-8 bg-[#151f15] flex items-center px-4 justify-between rounded-t-md border-b border-[#30462e]"> <span class="text-[10px] font-semibold text-[#aebfb0] uppercase font-mono font-sans">01 <div class="w-1.5 h-1.5 bg-[#456341] rounded-full group-hover:bg-[#76b072] shadow-[0_0_5px_transparent] group-hover:shadow-[0_0_5px_#76b072] transition-all"></div> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div class=""> <h3 class="text-white font-medium text-lg mb-2 font-sans">Audit & Strategy</h3> <ul class="space-y-3 mt-4"> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#5a8155]"><path d="M20 6 9 17l-5-5"></path></svg> Data Feasibility </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#5a8155]"><path d="M20 6 9 17l-5-5"></path></svg> ROI Calculation </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#5a8155]"><path d="M20 6 9 17l-5-5"></path></svg> Stack Selection </li> </ul> </div> </div> </div> <div class="bg-[#0c120c] rounded-md border border-[#30462e] flex flex-col h-full hover:border-[#5a8155] transition-all duration-300 group"> <div class="h-8 bg-[#151f15] flex items-center px-4 justify-between rounded-t-md border-b border-[#30462e]"> <span class="text-[10px] font-semibold text-[#aebfb0] uppercase font-mono font-sans">02 <div class="w-1.5 h-1.5 bg-[#456341] rounded-full group-hover:bg-[#87bd80] shadow-[0_0_5px_transparent] group-hover:shadow-[0_0_5px_#87bd80] transition-all"></div> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div> <h3 class="text-white font-medium text-lg mb-2 font-sans">Development</h3> <ul class="space-y-3 mt-4"> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#709f6a]"><path d="M20 6 9 17l-5-5"></path></svg> Fine-Tuning </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#709f6a]"><path d="M20 6 9 17l-5-5"></path></svg> Vector Embedding </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#709f6a]"><path d="M20 6 9 17l-5-5"></path></svg> Prompt Engineering </li> </ul> </div> </div> </div> <div class="bg-[#0c120c] rounded-md border border-[#30462e] flex flex-col h-full hover:border-[#709f6a] transition-all duration-300 group"> <div class="h-8 bg-[#151f15] flex items-center px-4 justify-between rounded-t-md border-b border-[#30462e]"> <span class="text-[10px] font-semibold text-[#aebfb0] uppercase font-mono font-sans">03 <div class="w-1.5 h-1.5 bg-[#456341] rounded-full group-hover:bg-[#a4dca4] shadow-[0_0_5px_transparent] group-hover:shadow-[0_0_5px_#a4dca4] transition-all"></div> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div> <h3 class="text-white font-medium text-lg mb-2 font-sans">Deployment</h3> <ul class="space-y-3 mt-4"> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#87bd80]"><path d="M20 6 9 17l-5-5"></path></svg> API Connectivity </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#87bd80]"><path d="M20 6 9 17l-5-5"></path></svg> Cloud Setup </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#87bd80]"><path d="M20 6 9 17l-5-5"></path></svg> Latency Testing </li> </ul> </div> </div> </div> <div class="bg-[#0c120c] rounded-md border border-[#30462e] flex flex-col h-full hover:border-[#86efac] transition-all duration-300 group"> <div class="h-8 bg-[#151f15] flex items-center px-4 justify-between rounded-t-md border-b border-[#30462e]"> <span class="text-[10px] font-semibold text-[#aebfb0] uppercase font-mono font-sans">04 <div class="w-1.5 h-1.5 bg-[#456341] rounded-full group-hover:bg-[#86efac] shadow-[0_0_5px_transparent] group-hover:shadow-[0_0_5px_#86efac] transition-all"></div> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div> <h3 class="text-white font-medium text-lg mb-2 font-sans">Scale & Refine</h3> <ul class="space-y-3 mt-4"> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#86efac]"><path d="M20 6 9 17l-5-5"></path></svg> Active Learning </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#86efac]"><path d="M20 6 9 17l-5-5"></path></svg> Cost Monitoring </li> <li class="flex gap-2 text-[11px] text-[#8fa38d] items-center font-mono font-sans"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-3 h-3 text-[#86efac]"><path d="M20 6 9 17l-5-5"></path></svg> Edge Cases </li> </ul> </div> </div> </div> </div> </div> </section> <section class="border-t border-[#30462e]/30 py-24 bg-[#050805]"> <div class="max-w-7xl mx-auto px-6"> <div class="bg-[#0c120c] border border-[#30462e] rounded-xl p-8 md:p-12 relative overflow-hidden"> <div class="grid md:grid-cols-2 gap-12 items-center"> <div> <div class="flex gap-3 mb-6 items-center"> <span class="flex h-3 w-3 relative"> <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#76b072] opacity-75"></span> <span class="relative inline-flex rounded-full h-3 w-3 bg-[#4d704a]"></span> </span> <span class="text-[10px] font-mono text-[#76b072] tracking-widest uppercase font-sans"> Live Monitoring </span> </div> <h2 class="text-4xl text-white tracking-tight mb-6 font-sans font-semibold"> REAL-TIME OVERSIGHT </h2> <p class="text-sm text-[#8fa38d] leading-relaxed mb-8 font-sans"> We don't just deploy; we provide the dashboard to control your synthetic workforce. Monitor token usage, agent interactions, and success rates from a central command center. </p> <div class="flex items-center gap-4 text-xs font-mono text-[#5a6b58]"> <span class="border-b border-[#76b072] text-[#e2e8e1] pb-1 cursor-pointer font-sans">Dashboard</span> <span class="hover:text-[#aebfb0] cursor-pointer font-sans">Logs</span> <span class="hover:text-[#aebfb0] cursor-pointer font-sans">API Keys</span> </div> </div> <div class="font-mono text-xs bg-[#080d08] border border-[#30462e] rounded-lg p-6 shadow-2xl relative"> <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#5a8155] via-[#76b072] to-transparent opacity-50"></div> <div class="flex justify-between border-b border-[#30462e] pb-4 mb-4 text-[#5a6b58]"> <span class="font-sans">AGENT_SWARM_01</span> <span class="text-[#76b072] font-sans">ONLINE</span> </div> <div class="space-y-3"> <div class="flex items-center justify-between p-3 bg-[#151f15] rounded border-l-2 border-[#5a8155]"> <span class="text-[#e2e8e1] font-sans">Analysis_Bot</span> <span class="text-[#86efac] font-sans">Processing Data...</span> </div> <div class="flex items-center justify-between p-3 bg-[#151f15] rounded border-l-2 border-[#4d704a]"> <span class="text-[#e2e8e1] font-sans">Support_Agent</span> <span class="text-[#76b072] font-sans">Ticket #8492 Resolved</span> </div> <div class="flex items-center justify-between p-3 bg-[#151f15] rounded border-l-2 border-[#30462e] opacity-60"> <span class="text-[#5a6b58] font-sans">Sales_Outreach</span> <span class="text-[#5a6b58] font-sans">Idle (Scheduled: 09:00)</span> </div> </div> <div class="mt-6 flex justify-between items-center pt-4 border-t border-[#30462e]"> <span class="text-[#5a6b58] font-sans">Total Tokens: 1.2M</span> <button class="bg-[#1e2b1d] hover:bg-[#30462e] text-white px-3 py-1 rounded-sm text-[10px] uppercase transition-colors font-sans"> View Full Logs </button> </div> </div> </div> </div> </div> </section> <section id="stack" class="py-20 bg-[#080d08] border-t border-[#30462e]/30"> <div class="max-w-7xl mx-auto px-6"> <h2 class="text-center text-xs font-mono text-[#5a6b58] mb-12 uppercase tracking-widest font-sans"> </h2> <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3"> <div class="aspect-[2/1] bg-[#30462e]/10 border-l-2 border-[#456341] p-4 flex items-end rounded-sm hover:bg-[#30462e]/20 transition-colors"> <span class="text-[10px] font-medium text-[#aebfb0] font-mono font-sans">OpenAI / GPT-4</span> </div> <div class="aspect-[2/1] bg-[#30462e]/10 border-l-2 border-[#5a8155] p-4 flex items-end rounded-sm hover:bg-[#30462e]/20 transition-colors"> <span class="text-[10px] font-medium text-[#aebfb0] font-mono font-sans">LangChain</span> </div> <div class="aspect-[2/1] bg-[#30462e]/10 border-l-2 border-[#709f6a] p-4 flex items-end rounded-sm hover:bg-[#30462e]/20 transition-colors"> <span class="text-[10px] font-medium text-[#aebfb0] font-mono font-sans">Python</span> </div> <div class="aspect-[2/1] bg-[#30462e]/10 border-l-2 border-[#87bd80] p-4 flex items-end rounded-sm hover:bg-[#30462e]/20 transition-colors"> <span class="text-[10px] font-medium text-[#aebfb0] font-mono font-sans">Pinecone DB</span> </div> <div class="aspect-[2/1] bg-[#30462e]/10 border-l-2 border-[#a4dca4] p-4 flex items-end rounded-sm hover:bg-[#30462e]/20 transition-colors"> <span class="text-[10px] font-medium text-[#aebfb0] font-mono font-sans">Hugging Face</span> </div> <div class="aspect-[2/1] bg-[#30462e]/10 border-l-2 border-[#86efac] p-4 flex items-end rounded-sm hover:bg-[#30462e]/20 transition-colors"> <span class="text-[10px] font-medium text-[#aebfb0] font-mono font-sans">LlamaIndex</span> </div> </div> </div> </section> <section class="border-t border-[#30462e]/30 py-24 bg-[#050805]"> <div class="max-w-5xl mx-auto px-6"> <div class="flex flex-col md:flex-row gap-12 items-center"> <div class="relative w-40 h-40 md:w-56 md:h-56 flex-shrink-0"> <div class="absolute inset-0 border border-[#5a8155] rounded-full animate-[spin_10s_linear_infinite]"></div> <div class="absolute inset-3 border border-dashed border-[#30462e] rounded-full animate-[spin_15s_linear_infinite_reverse]"></div> <div class="w-full h-full rounded-full bg-[#0c120c] flex items-center justify-center overflow-hidden"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="brain-circuit" class="lucide lucide-brain-circuit w-20 h-20 text-[#5a6b58]"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"></path><path d="M9 13a4.5 4.5 0 0 0 3-4"></path><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"></path><path d="M3.477 10.896a4 4 0 0 1 .585-.396"></path><path d="M6 18a4 4 0 0 1-1.967-.516"></path><path d="M12 13h4"></path><path d="M12 18h6a2 2 0 0 1 2 2v1"></path><path d="M12 8h8"></path><path d="M16 8V5a2 2 0 0 1 2-2"></path><circle cx="16" cy="13" r=".5"></circle><circle cx="18" cy="3" r=".5"></circle><circle cx="20" cy="21" r=".5"></circle><circle cx="20" cy="8" r=".5"></circle></svg> </div> </div> <div class="text-center md:text-left"> <span class="text-[#76b072] font-mono text-xs tracking-widest mb-2 block font-sans"> LEAD ARCHITECT </span> <h2 class="text-3xl text-white mb-4 uppercase font-sans font-semibold"> The Forja Vision </h2> <p class="leading-relaxed text-sm text-[#8fa38d] max-w-lg mb-6 font-sans"> "AI isn't just about chatbots; it's about fundamentally restructuring how value is created. We don't sell software; we sell cognitive labor and automated intelligence that scales indefinitely." </p> <div class="flex justify-center md:justify-start gap-4 text-[#5a6b58]"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="linkedin" class="lucide lucide-linkedin w-5 h-5 hover:text-white cursor-pointer transition-colors"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter" class="lucide lucide-twitter w-5 h-5 hover:text-white cursor-pointer transition-colors"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="github" class="lucide lucide-github w-5 h-5 hover:text-white cursor-pointer transition-colors"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg> </div> </div> </div> </div> </section> <section id="contact" class="relative overflow-hidden border-t border-[#30462e]/30 py-32 bg-[#080d08]"> <div class="scanline"></div> <div class="max-w-4xl mx-auto px-6 text-center relative z-10"> <h2 class="text-5xl md:text-7xl text-white tracking-tighter mb-8 font-sans font-semibold"> READY TO <br> <span class="text-[#5a6b58] font-sans font-semibold">BUILD?</span> </h2> <p class="text-sm text-[#8fa38d] mb-10 max-w-lg mx-auto font-sans"> Schedule a technical discovery call. We'll audit your current infrastructure and propose an AI implementation roadmap. </p> <button class="group relative inline-flex items-center justify-center px-8 py-4 font-semibold text-[#050805] transition-all duration-200 bg-white hover:bg-[#86efac] hover:scale-105 rounded-sm"> <span class="mr-2 text-sm uppercase tracking-wide font-mono font-sans"> Initialize Project </span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4 group-hover:translate-x-1 transition-transform"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg> <div class="absolute inset-0 -z-10 blur-lg opacity-40 bg-[#76b072] group-hover:opacity-100 transition-opacity duration-200"></div> </button> <p class="text-[10px] text-[#5a6b58] font-mono mt-8 opacity-60 font-sans"> ENCRYPTED_CONNECTION </p> </div> </section> <footer class="bg-[#050805] py-12 border-t border-[#30462e] font-mono text-[10px] text-[#5a6b58]"> <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between gap-8"> <div class="space-y-4"> <div class="flex items-center gap-2"> <div class="w-2 h-2 bg-[#30462e]"></div> <span class="text-[#8fa38d] tracking-widest font-sans">FORJA.AC</span> </div> <p class="max-w-xs font-sans">AI Implementation & Infrastructure Agency.</p> <p class="font-sans">© 2024 Forja.ac. All systems nominal.</p> </div> <div class="flex gap-12"> <div> <h4 class="text-[#8fa38d] mb-4 uppercase font-sans">Sitemap</h4> <ul class="space-y-2"> <li><a href="#" class="hover:text-[#86efac] transition-colors font-sans">> Solutions</a></li> <li><a href="#" class="hover:text-[#86efac] transition-colors font-sans">> Process</a></li> <li><a href="#" class="hover:text-[#86efac] transition-colors font-sans">> Login</a></li> </ul> </div> <div> <h4 class="text-[#8fa38d] mb-4 uppercase font-sans">Legal</h4> <ul class="space-y-2"> <li><a href="#" class="hover:text-[#86efac] transition-colors font-sans">> Privacy</a></li> <li><a href="#" class="hover:text-[#86efac] transition-colors font-sans">> Terms</a></li> </ul> </div> </div> </div> <div class="max-w-7xl mx-auto px-6 mt-12 pt-4 border-t border-[#30462e] flex justify-between items-center"> <div class="flex gap-2 items-center"> <div class="w-1.5 h-1.5 bg-[#4d704a] rounded-full animate-pulse"></div> <span class="font-sans">SYSTEM_STATUS: OPERATIONAL</span> </div> <span class="font-sans">LOC: GLOBAL</span> </div> </footer> </body></html></body></html>