Gerar site one-page (opção multi-página) para {NOME_DA_EMPRESA} com slogan {SLOGAN}. Estilo futurista/HUD sci-fi, modo dark, inspirado em centro de comando (anéis de luz, hologramas, métricas animadas).
0f4b375 verified | <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WROX Tecnologia – Consultoria em Tecnologia, Automação e IA</title> | |
| <meta name="description" content="Arquitetura de TI, integrações WhatsApp/n8n, SaaS com Supabase e automações de IA. Painéis em tempo real e segurança de ponta."> | |
| <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=Orbitron:wght@500;700&family=Rajdhani:wght@500;600&family=Inter:wght@400;500&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 400: '#3AA0FF', | |
| 500: '#3AA0FF', | |
| 600: '#2D8DE6', | |
| }, | |
| cyan: '#00E5FF', | |
| danger: '#FF2D2D', | |
| dark: { | |
| 900: '#0A0F1F', | |
| 800: '#0C1229', | |
| }, | |
| light: { | |
| 100: '#E6F1FF', | |
| 200: '#9BB3C7', | |
| } | |
| }, | |
| fontFamily: { | |
| orbitron: ['Orbitron', 'sans-serif'], | |
| rajdhani: ['Rajdhani', 'sans-serif'], | |
| inter: ['Inter', 'sans-serif'], | |
| }, | |
| backdropBlur: { | |
| xs: '2px', | |
| sm: '4px', | |
| md: '8px', | |
| lg: '12px', | |
| xl: '16px', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Custom HUD elements */ | |
| .hud-element { | |
| border: 1px solid; | |
| border-image: linear-gradient(135deg, #3AA0FF, #00E5FF) 1; | |
| } | |
| .glow-on-hover:hover { | |
| box-shadow: 0 0 15px rgba(58, 160, 255, 0.7); | |
| } | |
| .holographic-ring { | |
| position: absolute; | |
| width: 400px; | |
| height: 400px; | |
| border: 2px dashed rgba(58, 160, 255, 0.5); | |
| border-radius: 50%; | |
| animation: rotate 20s linear infinite; | |
| } | |
| @keyframes rotate { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .animated-counter { | |
| transition: all 1s ease-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-dark-900 text-light-100 font-inter min-h-screen"> | |
| <!-- Vanta.js Background --> | |
| <div id="vanta-bg" class="particles"></div> | |
| <!-- Navigation --> | |
| <nav class="backdrop-blur-xl bg-dark-800/80 border-b border-primary-500/20 sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-2xl font-orbitron text-primary-400">WROX</span> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="text-light-200 hover:text-primary-400 font-rajdhani transition">Início</a> | |
| <a href="#" class="text-light-200 hover:text-primary-400 font-rajdhani transition">Serviços</a> | |
| <a href="#" class="text-light-200 hover:text-primary-400 font-rajdhani transition">Soluções</a> | |
| <a href="#" class="text-light-200 hover:text-primary-400 font-rajdhani transition">Dashboard</a> | |
| <a href="#" class="text-light-200 hover:text-primary-400 font-rajdhani transition">Cases</a> | |
| <a href="#" class="text-light-200 hover:text-primary-400 font-rajdhani transition">Segurança</a> | |
| <a href="#" class="text-light-200 hover:text-primary-400 font-rajdhani transition">Sobre</a> | |
| <a href="#" class="text-light-200 hover:text-primary-400 font-rajdhani transition">Blog</a> | |
| <a href="#" class="text-light-200 hover:text-primary-400 font-rajdhani transition">Contato</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 border border-primary-400 text-primary-400 rounded-lg font-rajdhani hover:bg-primary-400/10 transition glow-on-hover"> | |
| Ver Painel | |
| </button> | |
| <button class="px-4 py-2 bg-danger text-white rounded-lg font-rajdhani hover:bg-danger/80 transition glow-on-hover"> | |
| Iniciar Monitoramento | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative min-h-screen flex items-center justify-center overflow-hidden"> | |
| <div class="holographic-ring"></div> | |
| <div class="container mx-auto px-6 z-10"> | |
| <div class="flex flex-col items-center text-center"> | |
| <h1 class="text-5xl md:text-7xl font-orbitron mb-6"> | |
| <span class="text-primary-400">WROX</span> TECNOLOGIA | |
| </h1> | |
| <p class="text-xl md:text-2xl text-light-200 font-rajdhani max-w-3xl mb-12"> | |
| Consultoria em Tecnologia, Automação e IA para empresas. | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4 mb-16"> | |
| <button class="px-6 py-3 bg-danger text-white rounded-xl font-rajdhani hover:bg-danger/80 transition glow-on-hover"> | |
| Iniciar Monitoramento | |
| </button> | |
| <button class="px-6 py-3 border border-primary-400 text-primary-400 rounded-xl font-rajdhani hover:bg-primary-400/10 transition glow-on-hover"> | |
| Ver Painel | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6 w-full max-w-5xl"> | |
| <!-- KPI Cards --> | |
| <div class="backdrop-blur-lg bg-dark-800/60 rounded-2xl p-6 hud-element"> | |
| <div class="text-4xl font-orbitron text-primary-400 animated-counter" data-target="99.5">0</div> | |
| <p class="text-light-200 font-rajdhani">Melhoria de resposta</p> | |
| </div> | |
| <div class="backdrop-blur-lg bg-dark-800/60 rounded-2xl p-6 hud-element"> | |
| <div class="text-4xl font-orbitron text-primary-400 animated-counter" data-target="1421">0</div> | |
| <p class="text-light-200 font-rajdhani">Integrações</p> | |
| </div> | |
| <div class="backdrop-blur-lg bg-dark-800/60 rounded-2xl p-6 hud-element"> | |
| <div class="text-4xl font-orbitron text-primary-400 animated-counter" data-target="156">0</div> | |
| <p class="text-light-200 font-rajdhani">Projetos monitorados</p> | |
| </div> | |
| <div class="backdrop-blur-lg bg-dark-800/60 rounded-2xl p-6 hud-element"> | |
| <div class="text-4xl font-orbitron text-primary-400 animated-counter" data-target="8.3">0</div> | |
| <p class="text-light-200 font-rajdhani">ms latência média</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t from-dark-900 to-transparent z-10"></div> | |
| </section> | |
| <!-- Marquee Alert --> | |
| <div class="bg-dark-800/80 border-t border-b border-danger/30 py-2 overflow-hidden"> | |
| <div class="marquee flex"> | |
| <span class="text-danger font-rajdhani uppercase tracking-wider whitespace-nowrap mr-8"> | |
| Ameaças em tempo real: Malware detectado em 192.168.1.45 • Tentativa de acesso não autorizado em 10.0.0.23 • Violação de política detectada em endpoint-42 | |
| </span> | |
| </div> | |
| </div> | |
| <!-- Services Section --> | |
| <section class="py-20 relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-orbitron mb-4">NOSSOS SERVIÇOS</h2> | |
| <p class="text-light-200 max-w-3xl mx-auto font-rajdhani text-xl"> | |
| Conectamos sistemas, reduzimos tarefas manuais e liberamos sua equipe para crescer. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service Card 1 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl p-8 hud-element hover:bg-dark-800/60 transition glow-on-hover"> | |
| <div class="w-16 h-16 bg-primary-400/10 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="cloud" class="text-primary-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-3">Consultoria em TI & Cloud</h3> | |
| <p class="text-light-200 mb-6">Arquitetura, M365, migrações com estratégia personalizada para sua infraestrutura.</p> | |
| <button class="text-primary-400 font-rajdhani flex items-center"> | |
| Saiba mais <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <!-- Service Card 2 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl p-8 hud-element hover:bg-dark-800/60 transition glow-on-hover"> | |
| <div class="w-16 h-16 bg-primary-400/10 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="cpu" class="text-primary-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-3">Automação com IA</h3> | |
| <p class="text-light-200 mb-6">RPA, agentes inteligentes e copilots para otimizar seus processos operacionais.</p> | |
| <button class="text-primary-400 font-rajdhani flex items-center"> | |
| Saiba mais <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <!-- Service Card 3 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl p-8 hud-element hover:bg-dark-800/60 transition glow-on-hover"> | |
| <div class="w-16 h-16 bg-primary-400/10 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="message-square" class="text-primary-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-3">Integrações WhatsApp</h3> | |
| <p class="text-light-200 mb-6">WAHA & n8n para lembrêtes automatizados, funis de vendas e atendimento eficiente.</p> | |
| <button class="text-primary-400 font-rajdhani flex items-center"> | |
| Saiba mais <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <!-- Service Card 4 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl p-8 hud-element hover:bg-dark-800/60 transition glow-on-hover"> | |
| <div class="w-16 h-16 bg-primary-400/10 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="database" class="text-primary-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-3">SaaS & Bancos</h3> | |
| <p class="text-light-200 mb-6">Supabase, Bolt.new, arquitetura multi-tenant com segurança RLS implementada.</p> | |
| <button class="text-primary-400 font-rajdhani flex items-center"> | |
| Saiba mais <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <!-- Service Card 5 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl p-8 hud-element hover:bg-dark-800/60 transition glow-on-hover"> | |
| <div class="w-16 h-16 bg-primary-400/10 rounded-xl flex items-center justify-center mb-6"> | |
| <i data-feather="server" class="text-primary-400 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-3">DevOps & Containers</h3> | |
| <p class="text-light-200 mb-6">Docker, VPS e observabilidade completa para seus ambientes de produção.</p> | |
| <button class="text-primary-400 font-rajdhani flex items-center"> | |
| Saiba mais <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions Section --> | |
| <section class="py-20 bg-gradient-to-b from-dark-800/40 to-dark-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-orbitron mb-4">SOLUÇÕES COMERCIAIS</h2> | |
| <p class="text-light-200 max-w-3xl mx-auto font-rajdhani text-xl"> | |
| Pacotes prontos para acelerar sua transformação digital | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Solution 1 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl p-8 hud-element hover:bg-dark-800/60 transition glow-on-hover"> | |
| <div class="w-12 h-12 bg-primary-400/10 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="eye" class="text-primary-400 w-5 h-5"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-3">Starter Monitor</h3> | |
| <p class="text-light-200 mb-6 text-sm">Monitoramento básico de infraestrutura e alertas essenciais</p> | |
| <div class="text-primary-400 font-orbitron text-2xl mb-6">R$ 1.299/mês</div> | |
| <ul class="space-y-2 mb-8 text-light-200 text-sm"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-cyan mr-2 w-4 h-4 mt-0.5"></i> | |
| <span>5 servidores monitorados</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-cyan mr-2 w-4 h-4 mt-0.5"></i> | |
| <span>Alertas por e-mail/SMS</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-cyan mr-2 w-4 h-4 mt-0.5"></i> | |
| <span>Dashboard básico</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-2 border border-primary-400 text-primary-400 rounded-lg font-rajdhani hover:bg-primary-400/10 transition"> | |
| Solicitar Proposta | |
| </button> | |
| </div> | |
| <!-- Solution 2 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl p-8 hud-element hover:bg-dark-800/60 transition glow-on-hover"> | |
| <div class="w-12 h-12 bg-primary-400/10 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="shopping-cart" class="text-primary-400 w-5 h-5"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-3">Sales Automations</h3> | |
| <p class="text-light-200 mb-6 text-sm">Automação completa do funil de vendas e CRM</p> | |
| <div class="text-primary-400 font-orbitron text-2xl mb-6">R$ 2.799/mês</div> | |
| <ul class="space-y-2 mb-8 text-light-200 text-sm"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-cyan mr-2 w-4 h-4 mt-0.5"></i> | |
| <span>Integração com WhatsApp</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-cyan mr-2 w-4 h-4 mt-0.5"></i> | |
| <span>Sequências automáticas</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-cyan mr-2 w-4 h-4 mt-0.5"></i> | |
| <span>Relatórios de performance</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-2 border border-primary-400 text-primary-400 rounded-lg font-rajdhani hover:bg-primary-400/10 transition"> | |
| Solicitar Proposta | |
| </button> | |
| </div> | |
| <!-- Solution 3 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl p-8 hud-element hover:bg-dark-800/60 transition glow-on-hover"> | |
| <div class="w-12 h-12 bg-primary-400/10 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="trello" class="text-primary-400 w-5 h-5"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-3">Ops Control</h3> | |
| <p class="text-light-200 mb-6 text-sm">Kanban digital e MES para gestão operacional</p> | |
| <div class="text-primary-400 font-orbitron text-2xl mb-6">R$ 3.499/mês</div> | |
| <ul class="space-y-2 mb-8 text-light-200 text-sm"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-cyan mr-2 w-4 h-4 mt-0.5"></i> | |
| <span>Quadro Kanban inteligente</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-cyan mr-2 w-4 h-4 mt-0.5"></i> | |
| <span>Controle de produção</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-cyan mr-2 w-4 h-4 mt-0.5"></i> | |
| <span>Alertas de gargalos</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-2 bg-primary-400 text-dark-900 rounded-lg font-rajdhani hover:bg-primary-400/90 transition"> | |
| Agendar Descoberta | |
| </button> | |
| </div> | |
| <!-- Solution 4 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl p-8 hud-element hover:bg-dark-800/60 transition glow-on-hover"> | |
| <div class="w-12 h-12 bg-primary-400/10 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="bar-chart-2" class="text-primary-400 w-5 h-5"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-3">Data & IA</h3> | |
| <p class="text-light-200 mb-6 text-sm">Dashboards avançados e modelos preditivos</p> | |
| <div class="text-primary-400 font-orbitron text-2xl mb-6">R$ 4.999/mês</div> | |
| <ul class="space-y-2 mb-8 text-light-200 text-sm"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-cyan mr-2 w-4 h-4 mt-0.5"></i> | |
| <span>Painéis personalizados</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-cyan mr-2 w-4 h-4 mt-0.5"></i> | |
| <span>Modelos preditivos</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-cyan mr-2 w-4 h-4 mt-0.5"></i> | |
| <span>Alertas inteligentes</span> | |
| </li> | |
| </ul> | |
| <button class="w-full py-2 bg-primary-400 text-dark-900 rounded-lg font-rajdhani hover:bg-primary-400/90 transition"> | |
| Agendar Descoberta | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dashboard Demo Section --> | |
| <section class="py-20 relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-orbitron mb-4">PAINEL DE MONITORAMENTO</h2> | |
| <p class="text-light-200 max-w-3xl mx-auto font-rajdhani text-xl"> | |
| Visualize seus dados em tempo real com nossa plataforma integrada | |
| </p> | |
| </div> | |
| <div class="backdrop-blur-lg bg-dark-800/60 rounded-2xl overflow-hidden hud-element"> | |
| <div class="p-8"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h3 class="text-xl font-orbitron">Visão Geral do Sistema</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-primary-400/10 text-primary-400 rounded-lg text-sm">24h</button> | |
| <button class="px-3 py-1 bg-primary-400/10 text-primary-400 rounded-lg text-sm">7d</button> | |
| <button class="px-3 py-1 bg-primary-400 text-dark-900 rounded-lg text-sm">30d</button> | |
| </div> | |
| </div> | |
| <!-- Mock Dashboard --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8"> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-6 border border-primary-400/20"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h4 class="text-light-200 font-rajdhani mb-1">Latência Média</h4> | |
| <p class="text-3xl font-orbitron text-primary-400">8.3 <span class="text-sm text-light-200">ms</span></p> | |
| </div> | |
| <div class="bg-primary-400/10 text-primary-400 px-2 py-1 rounded text-xs">-2.1%</div> | |
| </div> | |
| <div class="h-20 bg-dark-800/40 rounded" style="background: repeating-linear-gradient(45deg, #0C1229, #0C1229 2px, #3AA0FF25 2px, #3AA0FF25 4px);"></div> | |
| </div> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-6 border border-primary-400/20"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h4 class="text-light-200 font-rajdhani mb-1">Requisições</h4> | |
| <p class="text-3xl font-orbitron text-primary-400">142K <span class="text-sm text-light-200">/dia</span></p> | |
| </div> | |
| <div class="bg-cyan/10 text-cyan px-2 py-1 rounded text-xs">+12.6%</div> | |
| </div> | |
| <div class="h-20 bg-dark-800/40 rounded" style="background: repeating-linear-gradient(45deg, #0C1229, #0C1229 2px, #00E5FF25 2px, #00E5FF25 4px);"></div> | |
| </div> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-6 border border-primary-400/20"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <h4 class="text-light-200 font-rajdhani mb-1">Alertas</h4> | |
| <p class="text-3xl font-orbitron text-primary-400">3 <span class="text-sm text-light-200">hoje</span></p> | |
| </div> | |
| <div class="bg-danger/10 text-danger px-2 py-1 rounded text-xs">+1</div> | |
| </div> | |
| <div class="h-20 bg-dark-800/40 rounded" style="background: repeating-linear-gradient(45deg, #0C1229, #0C1229 2px, #FF2D2D25 2px, #FF2D2D25 4px);"></div> | |
| </div> | |
| </div> | |
| <!-- Main Chart --> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-6 border border-primary-400/20 mb-8"> | |
| <div class="h-64 bg-dark-800/40 rounded" style="background: repeating-linear-gradient(45deg, #0C1229, #0C1229 2px, #3AA0FF10 2px, #3AA0FF10 4px);"></div> | |
| </div> | |
| <div class="text-center"> | |
| <button id="open-demo-modal" class="px-6 py-3 bg-primary-400 text-dark-900 rounded-xl font-rajdhani hover:bg-primary-400/90 transition glow-on-hover"> | |
| Abrir demo do painel | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Cases Section --> | |
| <section class="py-20 bg-gradient-to-b from-dark-900 to-dark-800/40"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-orbitron mb-4">CASES & RESULTADOS</h2> | |
| <p class="text-light-200 max-w-3xl mx-auto font-rajdhani text-xl"> | |
| Transformações reais que entregamos para nossos clientes | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> | |
| <!-- Case 1 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl p-8 hud-element"> | |
| <div class="mb-6"> | |
| <div class="w-16 h-16 bg-danger/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-feather="alert-triangle" class="text-danger w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-2">Problema</h3> | |
| <p class="text-light-200 text-sm">Tempo de resposta lento em aplicação crítica causava perda de clientes.</p> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="w-16 h-16 bg-cyan/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-feather="cpu" class="text-cyan w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-2">Solução</h3> | |
| <p class="text-light-200 text-sm">Reestruturação da arquitetura cloud com balanceamento de carga e CDN.</p> | |
| </div> | |
| <div> | |
| <div class="w-16 h-16 bg-primary-400/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-feather="trending-up" class="text-primary-400 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-2">Impacto</h3> | |
| <p class="text-light-200 text-sm">Redução de 2.3s para 190ms no tempo de resposta. 27% mais conversões.</p> | |
| </div> | |
| </div> | |
| <!-- Case 2 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl p-8 hud-element"> | |
| <div class="mb-6"> | |
| <div class="w-16 h-16 bg-danger/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-feather="clock" class="text-danger w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-2">Problema</h3> | |
| <p class="text-light-200 text-sm">Processos manuais consomem 60% do tempo da equipe comercial.</p> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="w-16 h-16 bg-cyan/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-feather="zap" class="text-cyan w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-2">Solução</h3> | |
| <p class="text-light-200 text-sm">Automação de prospecção, follow-up e geração de propostas via WhatsApp.</p> | |
| </div> | |
| <div> | |
| <div class="w-16 h-16 bg-primary-400/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-feather="dollar-sign" class="text-primary-400 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-2">Impacto</h3> | |
| <p class="text-light-200 text-sm">Redução de 72% no tempo operacional. Aumento de 41% em vendas fechadas.</p> | |
| </div> | |
| </div> | |
| <!-- Case 3 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl p-8 hud-element"> | |
| <div class="mb-6"> | |
| <div class="w-16 h-16 bg-danger/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-feather="shield" class="text-danger w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-2">Problema</h3> | |
| <p class="text-light-200 text-sm">Dados sensíveis vulneráveis após incidente de segurança.</p> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="w-16 h-16 bg-cyan/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-feather="lock" class="text-cyan w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-2">Solução</h3> | |
| <p class="text-light-200 text-sm">Hardening completo, políticas RBAC e monitoramento contínuo de ameaças.</p> | |
| </div> | |
| <div> | |
| <div class="w-16 h-16 bg-primary-400/10 rounded-xl flex items-center justify-center mb-4"> | |
| <i data-feather="check-circle" class="text-primary-400 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-2">Impacto</h3> | |
| <p class="text-light-200 text-sm">100% de compliance com LGPD. Zero incidentes em 18 meses.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials Carousel --> | |
| <div class="backdrop-blur-lg bg-dark-800/60 rounded-2xl p-8 hud-element"> | |
| <h3 class="text-xl font-orbitron mb-8 text-center">DEPOIMENTOS</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-primary-400/10 flex items-center justify-center mr-4"> | |
| <i data-feather="user" class="text-primary-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-orbitron">Carlos M.</h4> | |
| <p class="text-light-200 text-sm">Diretor de TI</p> | |
| </div> | |
| </div> | |
| <p class="text-light-200 text-sm">"A WROX transformou nossa operação em 3 meses. O que antes era caótico agora tem métricas claras e automações que poupam milhares de horas."</p> | |
| </div> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-primary-400/10 flex items-center justify-center mr-4"> | |
| <i data-feather="user" class="text-primary-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-orbitron">Ana L.</h4> | |
| <p class="text-light-200 text-sm">CEO</p> | |
| </div> | |
| </div> | |
| <p class="text-light-200 text-sm">"Implementamos o Sales Automations e em 30 dias já tínhamos recuperado o investimento. A equipe comercial nunca foi tão produtiva."</p> | |
| </div> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-primary-400/10 flex items-center justify-center mr-4"> | |
| <i data-feather="user" class="text-primary-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-orbitron">Roberto S.</h4> | |
| <p class="text-light-200 text-sm">CTO</p> | |
| </div> | |
| </div> | |
| <p class="text-light-200 text-sm">"Finalmente temos visibilidade completa da nossa infraestrutura. Os alertas preventivos já evitaram diversos incidentes críticos."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Security Section --> | |
| <section class="py-20 relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-orbitron mb-4">SEGURANÇA & CONFORMIDADE</h2> | |
| <p class="text-light-200 max-w-3xl mx-auto font-rajdhani text-xl"> | |
| Priorizamos a proteção dos seus dados em todas as camadas | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16"> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl p-8 hud-element"> | |
| <h3 class="text-xl font-orbitron mb-6">Nossos Padrões</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="w-8 h-8 bg-primary-400/10 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="check" class="text-primary-400 w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-rajdhani mb-1">Conformidade com LGPD</h4> | |
| <p class="text-light-200 text-sm">Todos os dados tratados conforme a Lei Geral de Proteção de Dados</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-8 h-8 bg-primary-400/10 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="check" class="text-primary-400 w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-rajdhani mb-1">Controle de Acesso (RBAC)</h4> | |
| <p class="text-light-200 text-sm">Permissões granulares baseadas em funções para cada usuário</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-8 h-8 bg-primary-400/10 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="check" class="text-primary-400 w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-rajdhani mb-1">Backups Automatizados</h4> | |
| <p class="text-light-200 text-sm">Rotina diária com retenção configurável e testes periódicos</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-8 h-8 bg-primary-400/10 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="check" class="text-primary-400 w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-rajdhani mb-1">Auditoria Completa</h4> | |
| <p class="text-light-200 text-sm">Logs detalhados de todas as ações com retenção por 1 ano</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="w-8 h-8 bg-primary-400/10 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="check" class="text-primary-400 w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-rajdhani mb-1">Hardening de Sistemas</h4> | |
| <p class="text-light-200 text-sm">Configurações reforçadas seguindo benchmarks do CIS</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl p-8 hud-element"> | |
| <h3 class="text-xl font-orbitron mb-6">Certificações e Selos</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-6 border border-primary-400/20 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i data-feather="shield" class="text-primary-400 w-10 h-10 mx-auto mb-2"></i> | |
| <p class="text-sm font-rajdhani">Security<br>Verified</p> | |
| </div> | |
| </div> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-6 border border-primary-400/20 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i data-feather="lock" class="text-primary-400 w-10 h-10 mx-auto mb-2"></i> | |
| <p class="text-sm font-rajdhani">Data<br>Encryption</p> | |
| </div> | |
| </div> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-6 border border-primary-400/20 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i data-feather="globe" class="text-primary-400 w-10 h-10 mx-auto mb-2"></i> | |
| <p class="text-sm font-rajdhani">GDPR<br>Compliant</p> | |
| </div> | |
| </div> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-6 border border-primary-400/20 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i data-feather="cloud" class="text-primary-400 w-10 h-10 mx-auto mb-2"></i> | |
| <p class="text-sm font-rajdhani">ISO 27001<br>Aligned</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-20 bg-gradient-to-b from-dark-800/40 to-dark-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-orbitron mb-4">SOBRE NÓS</h2> | |
| <p class="text-light-200 max-w-3xl mx-auto font-rajdhani text-xl"> | |
| Tecnologia com propósito para impulsionar negócios | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-16"> | |
| <div> | |
| <h3 class="text-xl font-orbitron mb-4">Missão</h3> | |
| <p class="text-light-200 mb-6"> | |
| Proteger e acelerar negócios através de automações inteligentes e arquitetura robusta, permitindo que empresas focuem no que realmente importa: crescimento e inovação. | |
| </p> | |
| <h3 class="text-xl font-orbitron mb-4">Valores</h3> | |
| <div class="grid grid-cols-2 gap-4 mb-8"> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-4 border border-primary-400/20"> | |
| <i data-feather="zap" class="text-primary-400 w-6 h-6 mb-2"></i> | |
| <h4 class="font-rajdhani mb-1">Eficiência</h4> | |
| <p class="text-light-200 text-sm">Automatizamos o repetitivo para você inovar</p> | |
| </div> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-4 border border-primary-400/20"> | |
| <i data-feather="eye" class="text-primary-400 w-6 h-6 mb-2"></i> | |
| <h4 class="font-rajdhani mb-1">Transparência</h4> | |
| <p class="text-light-200 text-sm">Dados claros para decisões acertadas</p> | |
| </div> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-4 border border-primary-400/20"> | |
| <i data-feather="shield" class="text-primary-400 w-6 h-6 mb-2"></i> | |
| <h4 class="font-rajdhani mb-1">Segurança</h4> | |
| <p class="text-light-200 text-sm">Proteção de dados em primeiro lugar</p> | |
| </div> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-4 border border-primary-400/20"> | |
| <i data-feather="trending-up" class="text-primary-400 w-6 h-6 mb-2"></i> | |
| <h4 class="font-rajdhani mb-1">Resultados</h4> | |
| <p class="text-light-200 text-sm">Métricas que comprovam nosso impacto</p> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-4">Stack Tecnológica</h3> | |
| <div class="flex flex-wrap gap-2 mb-6"> | |
| <span class="px-3 py-1 bg-primary-400/10 text-primary-400 rounded-full text-xs">Supabase</span> | |
| <span class="px-3 py-1 bg-primary-400/10 text-primary-400 rounded-full text-xs">n8n</span> | |
| <span class="px-3 py-1 bg-primary-400/10 text-primary-400 rounded-full text-xs">WhatsApp API</span> | |
| <span class="px-3 py-1 bg-primary-400/10 text-primary-400 rounded-full text-xs">Docker</span> | |
| <span class="px-3 py-1 bg-primary-400/10 text-primary-400 rounded-full text-xs">PostgreSQL</span> | |
| <span class="px-3 py-1 bg-primary-400/10 text-primary-400 rounded-full text-xs">React</span> | |
| <span class="px-3 py-1 bg-primary-400/10 text-primary-400 rounded-full text-xs">Node.js</span> | |
| <span class="px-3 py-1 bg-primary-400/10 text-primary-400 rounded-full text-xs">Python</span> | |
| </div> | |
| </div> | |
| <div class="backdrop-blur-lg bg-dark-800/60 rounded-2xl p-8 hud-element"> | |
| <div class="aspect-w-16 aspect-h-9 bg-dark-700/40 rounded-xl overflow-hidden mb-6"> | |
| <img src="http://static.photos/technology/1024x576/42" alt="Equipe WROX" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="text-xl font-orbitron mb-4">Nossa Equipe</h3> | |
| <p class="text-light-200 mb-6"> | |
| Engenheiros, arquitetos e especialistas em IA com anos de experiência em transformação digital para empresas de diversos segmentos. | |
| </p> | |
| <!-- Mini Timeline --> | |
| <div class="space-y-4"> | |
| <div class="flex"> | |
| <div class="flex flex-col items-center mr-4"> | |
| <div class="w-4 h-4 bg-primary-400 rounded-full mt-1"></div> | |
| <div class="w-px h-full bg-primary-400/30"></div> | |
| </div> | |
| <div class="pb-8"> | |
| <h4 class="font-rajdhani text-primary-400">2018</h4> | |
| <p class="text-light-200 text-sm">Fundação da WROX com foco em automações</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex flex-col items-center mr-4"> | |
| <div class="w-4 h-4 bg-primary-400 rounded-full mt-1"></div> | |
| <div class="w-px h-full bg-primary-400/30"></div> | |
| </div> | |
| <div class="pb-8"> | |
| <h4 class="font-rajdhani text-primary-400">2020</h4> | |
| <p class="text-light-200 text-sm">Lançamento da plataforma de monitoramento</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex flex-col items-center mr-4"> | |
| <div class="w-4 h-4 bg-primary-400 rounded-full mt-1"></div> | |
| <div class="w-px h-full bg-primary-400/30"></div> | |
| </div> | |
| <div class="pb-4"> | |
| <h4 class="font-rajdhani text-primary-400">2023</h4> | |
| <p class="text-light-200 text-sm">Expansão para soluções completas de IA e dados</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section class="py-20 relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-orbitron mb-4">BLOG & INSIGHTS</h2> | |
| <p class="text-light-200 max-w-3xl mx-auto font-rajdhani text-xl"> | |
| Conhecimento compartilhado para você se manter à frente | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> | |
| <!-- Post 1 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl overflow-hidden hud-element hover:bg-dark-800/60 transition glow-on-hover"> | |
| <div class="aspect-w-16 aspect-h-9 bg-dark-700/40"> | |
| <img src="http://static.photos/technology/640x360/1" alt="Post 1" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-primary-400 text-sm font-rajdhani">Automação</span> | |
| <h3 class="text-xl font-orbitron mb-3 mt-2">Como implementar RPA em processos comerciais</h3> | |
| <p class="text-light-200 text-sm mb-4">Guia prático para identificar oportunidades e implementar robôs que aumentam a produtividade da equipe.</p> | |
| <button class="text-primary-400 font-rajdhani text-sm flex items-center"> | |
| Ler artigo <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Post 2 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl overflow-hidden hud-element hover:bg-dark-800/60 transition glow-on-hover"> | |
| <div class="aspect-w-16 aspect-h-9 bg-dark-700/40"> | |
| <img src="http://static.photos/technology/640x360/2" alt="Post 2" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-primary-400 text-sm font-rajdhani">Segurança</span> | |
| <h3 class="text-xl font-orbitron mb-3 mt-2">5 erros comuns em políticas de backup</h3> | |
| <p class="text-light-200 text-sm mb-4">Saiba quais armadilhas evitar para garantir que seus backups sejam realmente confiáveis quando necessário.</p> | |
| <button class="text-primary-400 font-rajdhani text-sm flex items-center"> | |
| Ler artigo <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Post 3 --> | |
| <div class="backdrop-blur-md bg-dark-800/40 rounded-2xl overflow-hidden hud-element hover:bg-dark-800/60 transition glow-on-hover"> | |
| <div class="aspect-w-16 aspect-h-9 bg-dark-700/40"> | |
| <img src="http://static.photos/technology/640x360/3" alt="Post 3" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-primary-400 text-sm font-rajdhani">IA</span> | |
| <h3 class="text-xl font-orbitron mb-3 mt-2">Modelos preditivos para vendas B2B</h3> | |
| <p class="text-light-200 text-sm mb-4">Como utilizar dados históricos para prever oportunidades e antecipar necessidades dos clientes.</p> | |
| <button class="text-primary-400 font-rajdhani text-sm flex items-center"> | |
| Ler artigo <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button class="px-6 py-3 border border-primary-400 text-primary-400 rounded-xl font-rajdhani hover:bg-primary-400/10 transition glow-on-hover"> | |
| Ver todos os artigos | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="py-20 bg-gradient-to-b from-dark-900 to-dark-800/40"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-orbitron mb-4">FALE CONOSCO</h2> | |
| <p class="text-light-200 max-w-3xl mx-auto font-rajdhani text-xl"> | |
| Pronto para transformar sua operação? Vamos conversar. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div class="backdrop-blur-lg bg-dark-800/60 rounded-2xl p-8 hud-element"> | |
| <h3 class="text-xl font-orbitron mb-6">Envie uma mensagem</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-light-200 text-sm font-rajdhani mb-2">Nome</label> | |
| <input type="text" id="name" class="w-full backdrop-blur-sm bg-dark-700/40 border border-primary-400/20 rounded-lg px-4 py-3 text-light-100 focus:outline-none focus:ring-2 focus:ring-primary-400/50"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-light-200 text-sm font-rajdhani mb-2">E-mail</label> | |
| <input type="email" id="email" class="w-full backdrop-blur-sm bg-dark-700/40 border border-primary-400/20 rounded-lg px-4 py-3 text-light-100 focus:outline-none focus:ring-2 focus:ring-primary-400/50"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="company" class="block text-light-200 text-sm font-rajdhani mb-2">Empresa</label> | |
| <input type="text" id="company" class="w-full backdrop-blur-sm bg-dark-700/40 border border-primary-400/20 rounded-lg px-4 py-3 text-light-100 focus:outline-none focus:ring-2 focus:ring-primary-400/50"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-light-200 text-sm font-rajdhani mb-2">Mensagem</label> | |
| <textarea id="message" rows="4" class="w-full backdrop-blur-sm bg-dark-700/40 border border-primary-400/20 rounded-lg px-4 py-3 text-light-100 focus:outline-none focus:ring-2 focus:ring-primary-400/50"></textarea> | |
| </div> | |
| <button type="submit" class="w-full py-3 bg-primary-400 text-dark-900 rounded-lg font-rajdhani hover:bg-primary-400/90 transition glow-on-hover"> | |
| Enviar Mensagem | |
| </button> | |
| </form> | |
| </div> | |
| <div> | |
| <div class="backdrop-blur-lg bg-dark-800/60 rounded-2xl p-8 hud-element mb-8"> | |
| <h3 class="text-xl font-orbitron mb-6">Outros contatos</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-primary-400/10 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="phone" class="text-primary-400 w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-rajdhani mb-1">Telefone</h4> | |
| <p class="text-light-200 text-sm">+55 (11) 99999-9999</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-primary-400/10 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="mail" class="text-primary-400 w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-rajdhani mb-1">E-mail</h4> | |
| <p class="text-light-200 text-sm">contato@wrox.com.br</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-primary-400/10 rounded-lg flex items-center justify-center mr-4"> | |
| <i data-feather="map-pin" class="text-primary-400 w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-rajdhani mb-1">Endereço</h4> | |
| <p class="text-light-200 text-sm">Av. Paulista, 1000 - São Paulo/SP</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full py-4 bg-green-500 text-white rounded-xl font-rajdhani flex items-center justify-center hover:bg-green-600 transition glow-on-hover mb-8"> | |
| <i data-feather="message-circle" class="mr-3 w-5 h-5"></i> Falar no WhatsApp | |
| </button> | |
| <div class="backdrop-blur-lg bg-dark-800/60 rounded-2xl overflow-hidden hud-element aspect-w-16 aspect-h-9"> | |
| <img src="http://static.photos/cityscape/640x360/1" alt="Mapa" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 border-t border-primary-400/20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h4 class="text-xl font-orbitron mb-4">WROX</h4> | |
| <p class="text-light-200 text-sm"> | |
| Consultoria em Tecnologia, Automação e IA para empresas. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="font-rajdhani mb-4">Serviços</h4> | |
| <ul class="space-y-2 text-light-200 text-sm"> | |
| <li><a href="#" class="hover:text-primary-400 transition">Consultoria em TI</a></li> | |
| <li><a href="#" class="hover:text-primary-400 transition">Automação com IA</a></li> | |
| <li><a href="#" class="hover:text-primary-400 transition">Integrações WhatsApp</a></li> | |
| <li><a href="#" class="hover:text-primary-400 transition">SaaS & Bancos</a></li> | |
| <li><a href="#" class="hover:text-primary-400 transition">DevOps & Containers</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-rajdhani mb-4">Soluções</h4> | |
| <ul class="space-y-2 text-light-200 text-sm"> | |
| <li><a href="#" class="hover:text-primary-400 transition">Starter Monitor</a></li> | |
| <li><a href="#" class="hover:text-primary-400 transition">Sales Automations</a></li> | |
| <li><a href="#" class="hover:text-primary-400 transition">Ops Control</a></li> | |
| <li><a href="#" class="hover:text-primary-400 transition">Data & IA</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-rajdhani mb-4">Redes Sociais</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-dark-800/60 rounded-full flex items-center justify-center hover:bg-primary-400/10 transition"> | |
| <i data-feather="linkedin" class="text-light-200 hover:text-primary-400"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-dark-800/60 rounded-full flex items-center justify-center hover:bg-primary-400/10 transition"> | |
| <i data-feather="twitter" class="text-light-200 hover:text-primary-400"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-dark-800/60 rounded-full flex items-center justify-center hover:bg-primary-400/10 transition"> | |
| <i data-feather="instagram" class="text-light-200 hover:text-primary-400"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-dark-800/60 rounded-full flex items-center justify-center hover:bg-primary-400/10 transition"> | |
| <i data-feather="youtube" class="text-light-200 hover:text-primary-400"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-primary-400/10"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-light-200 text-sm mb-4 md:mb-0"> | |
| © 2023 WROX Tecnologia. Todos os direitos reservados. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-light-200 text-sm hover:text-primary-400 transition">Política de Privacidade</a> | |
| <a href="#" class="text-light-200 text-sm hover:text-primary-400 transition">Termos de Serviço</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Demo Modal --> | |
| <div id="demo-modal" class="fixed inset-0 bg-dark-900/90 z-50 flex items-center justify-center hidden"> | |
| <div class="backdrop-blur-xl bg-dark-800/90 border border-primary-400/20 rounded-2xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto"> | |
| <div class="p-8"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h3 class="text-2xl font-orbitron">Demonstração do Painel</h3> | |
| <button id="close-demo-modal" class="text-light-200 hover:text-primary-400"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div class="aspect-w-16 aspect-h-9 bg-dark-700/40 rounded-xl mb-8"> | |
| <img src="http://static.photos/technology/1024x576/10" alt="Dashboard Demo" class="w-full h-full object-cover rounded-xl"> | |
| </div> | |
| <p class="text-light-200 mb-8"> | |
| Nosso painel de monitoramento oferece visibilidade completa da sua operação em tempo real, com alertas inteligentes e métricas acionáveis. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-6 border border-primary-400/20"> | |
| <h4 class="font-rajdhani mb-3">Solicite uma demonstração personalizada</h4> | |
| <p class="text-light-200 text-sm mb-4">Preencha o formulário e nossa equipe entrará em contato para agendar uma apresentação focada nas necessidades do seu negócio.</p> | |
| <button class="w-full py-2 bg-primary-400 text-dark-900 rounded-lg font-rajdhani hover:bg-primary-400/90 transition"> | |
| Solicitar Demo | |
| </button> | |
| </div> | |
| <div class="backdrop-blur-sm bg-dark-700/40 rounded-xl p-6 border border-primary-400/20"> | |
| <h4 class="font-rajdhani mb-3">Teste gratuitamente por 14 dias</h4> | |
| <p class="text-light-200 text-sm mb-4">Experimente nossa plataforma sem compromisso e veja na prática como podemos otimizar sua operação.</p> | |
| <button class="w-full py-2 border border-primary-400 text-primary-400 rounded-lg font-rajdhani hover:bg-primary-400/10 transition"> | |
| Iniciar Teste | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3aa0ff, | |
| backgroundColor: 0x0a0f1f, | |
| size: 0.8 | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Animated counters | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const counters = document.querySelectorAll('.animated-counter'); | |
| const speed = 200; | |
| counters.forEach(counter => { | |
| const target = +counter.getAttribute('data-target'); | |
| const count = +counter.innerText; | |
| const increment = target / speed; | |
| if (count < target) { | |
| counter.innerText = Math.ceil(count + increment); | |
| setTimeout(updateCounter, 1); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| function updateCounter() { | |
| const current = +counter.innerText; | |
| const increment = target / speed; | |
| if (current < target) { | |
| counter.innerText = Math.ceil(current + increment); | |
| setTimeout(updateCounter, 1); | |
| } else { | |
| counter.innerText = target; | |
| } | |
| } | |
| }); | |
| // Marquee animation | |
| const marquee = document.querySelector('.marquee'); | |
| const marqueeContent = marquee.querySelector('span'); | |
| const marqueeContentClone = marqueeContent.cloneNode(true); | |
| marquee.appendChild(marqueeContentClone); | |
| let tween; | |
| function playMarquee() { | |
| let progress = tween ? tween.progress() : 0; | |
| tween && tween.progress(0).kill(); | |
| const width = marqueeContent.offsetWidth; | |
| const duration = width / 60; | |
| tween = gsap.fromTo(marquee, { | |
| x: 0 | |
| }, { | |
| x: -width, | |
| duration: duration, | |
| ease: "none", | |
| repeat: -1 | |
| }); | |
| tween.progress(progress); | |
| } | |
| playMarquee(); | |
| window.addEventListener('resize', playMarquee); | |
| // Modal functionality | |
| const openModalBtn = document.getElementById('open-demo-modal'); | |
| const closeModalBtn = document.getElementById('close-demo-modal'); | |
| const modal = document.getElementById('demo-modal'); | |
| openModalBtn.addEventListener('click', () => { | |
| modal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| closeModalBtn.addEventListener('click', () => { | |
| modal.classList.add('hidden'); | |
| document.body.style.overflow = ''; | |
| }); | |
| // Close modal when clicking outside | |
| modal.addEventListener('click', (e) => { | |
| if (e.target === modal) { | |
| modal.classList.add('hidden'); | |
| document.body.style.overflow = ''; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |