CoolFace
Apppublic

moedaz/datax-b2b-rocket-access

sourceHugging Faceupdated 9mo agoView on Hugging Face
0likes
index.html397 linesDownload Raw Back to root
1 2<!DOCTYPE html>3<html lang="pt-BR">4<head>5    <meta charset="UTF-8">6    <meta name="viewport" content="width=device-width, initial-scale=1.0">7    <title>DataX Intelligence - Acesso Direto a Decisores B2B</title>8    <link rel="stylesheet" href="style.css">9    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">10    <script src="https://cdn.tailwindcss.com"></script>11    <script>12      tailwind.config = {13        theme: {14          extend: {15            colors: {16              primary: '#1E40AF',17              secondary: '#1E3A8A',18            }19          }20        }21      }22    </script>23</head>24<body class="font-sans bg-white">25    <!-- Navigation Component -->26    <custom-nav></custom-nav>27    <!-- Hero Section -->28    <section class="relative bg-gradient-to-b from-blue-50 to-white">29        <div class="container mx-auto px-6 py-32">30            <div class="flex flex-col lg:flex-row items-center gap-12">31                <div class="lg:w-1/2">32                    <h1 class="text-4xl md:text-5xl font-bold text-gray-900 leading-tight mb-6">33                        Inteligência de acesso para vendas B2B34                    </h1>35                    <p class="text-xl text-gray-600 mb-8">36                        A DataX ajuda empresas a falar diretamente com decisores, sócios, diretores e VPs usando inteligência proprietária de contato.37                    </p>38                    <div class="flex flex-col sm:flex-row gap-4">39                        <a href="#verificar-viabilidade" class="bg-primary hover:bg-secondary text-white font-semibold py-3 px-8 rounded-lg transition duration-300 text-center">40                            Verificar viabilidade41                        </a>42                        <a href="#contato" class="border border-primary text-primary hover:bg-blue-50 font-semibold py-3 px-8 rounded-lg transition duration-300 text-center">43                            Fale conosco44                        </a>45                    </div>46                </div>47                <div class="lg:w-1/2">48                    <img src="hero-image.png" alt="Dashboard DataX" class="w-full rounded-lg shadow-xl">49                </div>50            </div>51        </div>52    </section>53    <!-- Features Section -->54    <section class="py-20 bg-white">55        <div class="container mx-auto px-6">56            <div class="text-center mb-16">57                <h2 class="text-3xl font-bold text-gray-900 mb-4">58                    O GARGALO DO B2B NÃO É LEAD, É ACESSO59                </h2>60                <p class="text-xl text-gray-600 max-w-3xl mx-auto">61                    Camadas proprietárias de inteligência de dados e acesso (D1, D2 e VP)62                </p>63            </div>64 65            <div class="grid md:grid-cols-3 gap-8">66                <div class="bg-blue-50 p-8 rounded-xl">67                    <div class="bg-primary text-white w-14 h-14 rounded-full flex items-center justify-center mb-6">68                        <i class="fas fa-bullseye text-2xl"></i>69                    </div>70                    <h3 class="text-xl font-bold mb-4">D1 - Decisor Principal</h3>71                    <p class="text-gray-600">72                        Acessibilidade ao número do decisor mais curto. Anti-secretária. Principal gargalo. Pula intermediários.73                    </p>74                </div>75                76                <div class="bg-blue-50 p-8 rounded-xl">77                    <div class="bg-primary text-white w-14 h-14 rounded-full flex items-center justify-center mb-6">78                        <i class="fas fa-chess-queen text-2xl"></i>79                    </div>80                    <h3 class="text-xl font-bold mb-4">D2 - Camada Estratégica</h3>81                    <p class="text-gray-600">82                        Quando o alvo não está na linha de frente mas exerce influência crítica na decisão.83                    </p>84                </div>85                86                <div class="bg-blue-50 p-8 rounded-xl">87                    <div class="bg-primary text-white w-14 h-14 rounded-full flex items-center justify-center mb-6">88                        <i class="fas fa-brain text-2xl"></i>89                    </div>90                    <h3 class="text-xl font-bold mb-4">VP - Inteligência de Contexto</h3>91                    <p class="text-gray-600">92                        Contexto para uma abordagem hiper-personalizada. Estrutura completa de dados.93                    </p>94                </div>95            </div>96        </div>97    </section>98<!-- Gatekeeper Section -->99    <section class="py-20">100        <div class="container mx-auto px-6">101            <div class="flex flex-col lg:flex-row items-center gap-12">102                <div class="lg:w-1/2">103                    <h2 class="text-3xl font-bold text-gray-900 mb-6">104                        O FIM DO GATEKEEPER105                    </h2>106                    <p class="text-xl text-gray-600 mb-4">107                        Seu time anda para na secretaria? Falar direto com quem decide é o verdadeiro 80/20108                    </p>109                </div>110                <div class="lg:w-1/2">111                    <p class="text-gray-600 mb-4">112                        Chega de ouvir "não está", "está em reunião". Entregamos inteligência de contato validado, com e-mails e telefones diretos.113                    </p>114                    <p class="text-gray-600 mb-4">115                        O funil de vendas moderno elimina o ruído e conecta você direto com quem decide, sem as barreiras tradicionais que travam a sua operação. (O tempo é o ativo mais valioso...)116                    </p>117                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">118                        <button class="faq-toggle w-full text-left p-6 flex justify-between items-center">119                            <h3 class="text-lg font-semibold">Saiba mais sobre a metodologia de Acesso da DataX</h3>120                            <i data-feather="chevron-down" class="text-primary transform transition-transform duration-300"></i>121                        </button>122                        <div class="faq-content px-6 pb-6 hidden">123                            <p class="text-gray-600">124                                A metodologia de Acesso da DataX destrava o contato com decisores...125                            </p>126                        </div>127                    </div>128                </div>129            </div>130        </div>131    </section>132    <!-- Services Section -->133    <section class="bg-gray-100 py-20">134        <div class="container mx-auto px-6">135            <div class="grid md:grid-cols-3 gap-8">136                <div class="bg-white p-8 rounded-xl shadow-md">137                    <h3 class="text-xl font-bold mb-4">D1 - Decisor Principal</h3>138                    <p class="text-gray-600 mb-4">139                        Acessibilidade ao número do decisor mais curto. Anti-secretária. Principal gargalo. Pula intermediários. Foco no contato direto. Reduz o ciclo de vendas drasticamente.140                    </p>141                </div>142                143                <div class="bg-white p-8 rounded-xl shadow-md">144                    <h3 class="text-xl font-bold mb-4">D2 - Camada Estratégica</h3>145                    <p class="text-gray-600 mb-4">146                        Quando o alvo não está na linha de frente mas exerce influência crítica na decisão. Mapeamento de sócios e diretores nível C-Level para cercar a conta.147                    </p>148                </div>149                150                <div class="bg-white p-8 rounded-xl shadow-md">151                    <h3 class="text-xl font-bold mb-4">VP - Inteligência de Contexto</h3>152                    <p class="text-gray-600 mb-4">153                        Contexto para uma abordagem hiper-personalizada. Estrutura completa de dados para descobrir tudo sobre o lead antes do primeiro contato.154                    </p>155                </div>156            </div>157        </div>158    </section>159 160    <!-- Clients Section -->161    <section class="py-20 bg-primary text-white">162        <div class="container mx-auto px-6 text-center">163            <h2 class="text-3xl font-bold mb-6">QUEM CONTRATA?</h2>164            <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">165                Acesso onde o mercado trava. Atendemos diferentes cenários de prospecção entregando inteligência comercial com o mesmo objetivo: acesso validado aos níveis exatos de contato.166            </p>167            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">168                <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-blur-sm">169                    <p class="font-semibold">Outbound B2B</p>170                </div>171                <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-blur-sm">172                    <p class="font-semibold">Vendas Enterprise</p>173                </div>174                <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-blur-sm">175                    <p class="font-semibold">Inteligência Comercial</p>176                </div>177                <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-blur-sm">178                    <p class="font-semibold">Recuperação & Cobrança</p>179                </div>180            </div>181        </div>182    </section>183 184    <!-- Quote Section -->185    <section class="py-20 bg-blue-900 text-white text-center">186        <div class="container mx-auto px-6">187            <h2 class="text-3xl font-bold mb-6">188                "Quem controla o acesso, controla o pipeline."189            </h2>190        </div>191    </section>192<!-- Stats Section -->193    <section class="py-20 bg-gray-900 text-white">194        <div class="container mx-auto px-6">195            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 text-center">196                <div class="p-6">197                    <div class="text-5xl font-bold mb-3">25M+</div>198                    <p class="text-gray-300">Empresas ativas no Brasil</p>199                </div>200                <div class="p-6">201                    <div class="text-5xl font-bold mb-3">17M+</div>202                    <p class="text-gray-300">Decisores mapeados</p>203                </div>204                <div class="p-6">205                    <div class="text-5xl font-bold mb-3">20M+</div>206                    <p class="text-gray-300">Telefones validados</p>207                </div>208                <div class="p-6">209                    <div class="text-5xl font-bold mb-3">17M+</div>210                    <p class="text-gray-300">E-mails verificados</p>211                </div>212            </div>213        </div>214    </section>215    <!-- Pricing Section -->216    <section class="py-20">217        <div class="container mx-auto px-6">218            <div class="text-center mb-16">219                <h2 class="text-3xl font-bold text-gray-900 mb-4">220                    DATAXINTEL MODUS OPERANDI221                </h2>222                <p class="text-xl text-gray-600 max-w-3xl mx-auto">223                    A DataX opera sob demanda, servindo modelos testados e validados. Entregamos estrutura de dados (D1, D2 e VP) para a sua equipe comercial focar apenas no que interessa: vender.224                </p>225            </div>226            227            <div class="grid md:grid-cols-3 gap-8">228                <div class="bg-white p-8 rounded-xl shadow-md border border-gray-200">229                    <div class="mb-6">230                        <h3 class="text-xl font-bold mb-2">Acesso INICIAL</h3>231                        <p class="text-gray-600 mb-4">Para empresas que precisam iniciar prospecção qualificada sem desperdício de tempo.</p>232                    </div>233                    234                    <ul class="space-y-3 mb-8">235                        <li class="flex items-center">236                            <i data-feather="check" class="text-green-500 mr-2"></i>237                            <span>Volume em escala inicial</span>238                        </li>239                        <li class="flex items-center">240                            <i data-feather="check" class="text-green-500 mr-2"></i>241                            <span>Contato direto com decisor (D1)</span>242                        </li>243                        <li class="flex items-center">244                            <i data-feather="check" class="text-green-500 mr-2"></i>245                            <span>Validação prévia de contato</span>246                        </li>247                        <li class="flex items-center">248                            <i data-feather="check" class="text-green-500 mr-2"></i>249                            <span>Suporte básico</span>250                        </li>251                    </ul>252                    253                    <a href="#verificar-viabilidade" class="block w-full bg-primary hover:bg-primary-600 text-white text-center font-semibold py-3 px-6 rounded-lg transition duration-300">254                        Verificar viabilidade255                    </a>256                </div>257                258                <div class="bg-white p-8 rounded-xl shadow-lg border-2 border-primary relative">259                    <div class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-primary text-white text-xs font-semibold py-1 px-3 rounded-full">260                        Mais popular261                    </div>262                    <div class="mb-6">263                        <h3 class="text-xl font-bold mb-2">Acesso OPERAÇÃO</h3>264                        <p class="text-gray-600 mb-4">Para times comerciais que precisam escalar contato real.</p>265                    </div>266                    267                    <ul class="space-y-3 mb-8">268                        <li class="flex items-center">269                            <i data-feather="check" class="text-green-500 mr-2"></i>270                            <span>Full time / equipe ativa</span>271                        </li>272                        <li class="flex items-center">273                            <i data-feather="check" class="text-green-500 mr-2"></i>274                            <span>Contato direto com decisores (D1+D2)</span>275                        </li>276                        <li class="flex items-center">277                            <i data-feather="check" class="text-green-500 mr-2"></i>278                            <span>Validação superior de contato</span>279                        </li>280                        <li class="flex items-center">281                            <i data-feather="check" class="text-green-500 mr-2"></i>282                            <span>Suporte avançado</span>283                        </li>284                    </ul>285                    286                    <a href="#verificar-viabilidade" class="block w-full bg-primary hover:bg-primary-600 text-white text-center font-semibold py-3 px-6 rounded-lg transition duration-300">287                        Verificar viabilidade288                    </a>289                </div>290                291                <div class="bg-white p-8 rounded-xl shadow-md border border-gray-200">292                    <div class="mb-6">293                        <h3 class="text-xl font-bold mb-2">Acesso ENTERPRISE</h3>294                        <p class="text-gray-600 mb-4">Desenhado para operações onde o acesso é crítico.</p>295                    </div>296                    297                    <ul class="space-y-3 mb-8">298                        <li class="flex items-center">299                            <i data-feather="check" class="text-green-500 mr-2"></i>300                            <span>Vol. de empresa custom</span>301                        </li>302                        <li class="flex items-center">303                            <i data-feather="check" class="text-green-500 mr-2"></i>304                            <span>Contato total com decisores D1, D2 e VP</span>305                        </li>306                        <li class="flex items-center">307                            <i data-feather="check" class="text-green-500 mr-2"></i>308                            <span>Validação máxima de contato</span>309                        </li>310                        <li class="flex items-center">311                            <i data-feather="check" class="text-green-500 mr-2"></i>312                            <span>Suporte prioritário</span>313                        </li>314                    </ul>315                    316                    <a href="#verificar-elegibilidade" class="block w-full bg-primary hover:bg-primary-600 text-white text-center font-semibold py-3 px-6 rounded-lg transition duration-300">317                        Verificar elegibilidade318                    </a>319                </div>320            </div>321        </div>322    </section>323    <!-- FAQ Section -->324    <section class="py-20 bg-gray-50">325        <div class="container mx-auto px-6">326            <div class="text-center mb-16">327                <h2 class="text-3xl font-bold text-gray-900 mb-4">328                    Perguntas frequentes329                </h2>330                <p class="text-xl text-gray-600 max-w-3xl mx-auto">331                    Tudo o que você precisa saber sobre a DataX332                </p>333            </div>334            335            <div class="max-w-3xl mx-auto">336                <div class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden">337                    <button class="faq-toggle w-full text-left p-6 flex justify-between items-center">338                        <h3 class="text-lg font-semibold">O que é a DataX?</h3>339                        <i data-feather="chevron-down" class="text-primary transform transition-transform duration-300"></i>340                    </button>341                    <div class="faq-content px-6 pb-6 hidden">342                        <p class="text-gray-600">343                            Somos uma empresa especializada em inteligência de acesso B2B, focada em conectar empresas diretamente com tomadores de decisão.344                        </p>345                    </div>346                </div>347                348                <div class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden">349                    <button class="faq-toggle w-full text-left p-6 flex justify-between items-center">350                        <h3 class="text-lg font-semibold">Qual é o diferencial da DataX?</h3>351                        <i data-feather="chevron-down" class="text-primary transform transition-transform duration-300"></i>352                    </button>353                    <div class="faq-content px-6 pb-6 hidden">354                        <p class="text-gray-600">355                            Nossa metodologia exclusiva de camadas de acesso (D1, D2 e VP) permite que você ultrapasse barreiras tradicionais e fale diretamente com quem decide, aumentando drasticamente suas taxas de conversão.356                        </p>357                    </div>358                </div>359                360                <div class="bg-white rounded-xl shadow-sm mb-4 overflow-hidden">361                    <button class="faq-toggle w-full text-left p-6 flex justify-between items-center">362                        <h3 class="text-lg font-semibold">E a LGPD?</h3>363                        <i data-feather="chevron-down" class="text-primary transform transition-transform duration-300"></i>364                    </button>365                    <div class="faq-content px-6 pb-6 hidden">366                        <p class="text-gray-600">367                            Operamos em total conformidade com a Lei Geral de Proteção de Dados (LGPD), garantindo que todas as informações sejam tratadas com segurança e sigilo.368                        </p>369                    </div>370                </div>371            </div>372        </div>373    </section>374    <!-- CTA Section -->375    <section class="py-20 bg-primary text-white">376        <div class="container mx-auto px-6 text-center">377            <h2 class="text-3xl font-bold mb-6">Pronto para destravar seu acesso a decisores?</h2>378            <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">379                Transforme sua prospecção com inteligência de contato validada.380            </p>381            <a href="#verificar-viabilidade" class="inline-block bg-white text-primary hover:bg-gray-100 font-semibold py-3 px-8 rounded-lg transition duration-300">382                Verificar viabilidade383            </a>384        </div>385    </section>386    <!-- Footer Component -->387    <custom-footer></custom-footer>388<!-- Scripts -->389    <script src="components/nav.js"></script>390    <script src="components/footer.js"></script>391    <script src="script.js"></script>392    <script>393        feather.replace();394    </script>395<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>396</body>397</html>