Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NexusAI - Soluções Inteligentes</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS for animations and effects */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header/Navbar --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <span class="text-2xl font-bold gradient-text">NexusAI</span> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-gray-700 hover:text-indigo-600 transition-all font-medium">Início</a> | |
| <a href="#services" class="text-gray-700 hover:text-indigo-600 transition-all font-medium">Serviços</a> | |
| <a href="#solutions" class="text-gray-700 hover:text-indigo-600 transition-all font-medium">Soluções</a> | |
| <a href="#about" class="text-gray-700 hover:text-indigo-600 transition-all font-medium">Sobre</a> | |
| <a href="#contact" class="text-gray-700 hover:text-indigo-600 transition-all font-medium">Contato</a> | |
| </nav> | |
| <button class="md:hidden text-gray-700" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| <div class="hidden md:block"> | |
| <button class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition-all font-medium"> | |
| Demonstração | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-md" id="mobile-menu"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#home" class="text-gray-700 hover:text-indigo-600 transition-all font-medium">Início</a> | |
| <a href="#services" class="text-gray-700 hover:text-indigo-600 transition-all font-medium">Serviços</a> | |
| <a href="#solutions" class="text-gray-700 hover:text-indigo-600 transition-all font-medium">Soluções</a> | |
| <a href="#about" class="text-gray-700 hover:text-indigo-600 transition-all font-medium">Sobre</a> | |
| <a href="#contact" class="text-gray-700 hover:text-indigo-600 transition-all font-medium">Contato</a> | |
| <button class="bg-indigo-600 text-white px-6 py-2 rounded-full hover:bg-indigo-700 transition-all font-medium w-full"> | |
| Demonstração | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="py-20 bg-gradient-to-r from-indigo-50 to-purple-50"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6"> | |
| Potencialize seu negócio com <span class="gradient-text">Agentes de IA</span> | |
| </h1> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Soluções inteligentes personalizadas para automatizar processos, melhorar a eficiência e impulsionar seus resultados. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-indigo-600 text-white px-8 py-3 rounded-full hover:bg-indigo-700 transition-all font-medium"> | |
| Começar Agora | |
| </button> | |
| <button class="border border-indigo-600 text-indigo-600 px-8 py-3 rounded-full hover:bg-indigo-50 transition-all font-medium flex items-center justify-center"> | |
| <i class="fas fa-play-circle mr-2"></i> Ver Vídeo | |
| </button> | |
| </div> | |
| <div class="mt-8 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white"> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm text-gray-600">+500 clientes satisfeitos</p> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <span class="text-gray-600 ml-1">5.0</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://illustrations.popsy.co/amber/artificial-intelligence.svg" alt="AI Illustration" class="w-full max-w-md floating"> | |
| <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg"> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-chart-line text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Eficiência comprovada</p> | |
| <p class="font-bold">+85% de produtividade</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Clients Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <p class="text-center text-gray-500 mb-8">Confiam em nossas soluções:</p> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <img src="https://logo.clearbit.com/google.com" alt="Google" class="h-8 opacity-60 hover:opacity-100 transition-all"> | |
| <img src="https://logo.clearbit.com/microsoft.com" alt="Microsoft" class="h-8 opacity-60 hover:opacity-100 transition-all"> | |
| <img src="https://logo.clearbit.com/amazon.com" alt="Amazon" class="h-8 opacity-60 hover:opacity-100 transition-all"> | |
| <img src="https://logo.clearbit.com/spotify.com" alt="Spotify" class="h-8 opacity-60 hover:opacity-100 transition-all"> | |
| <img src="https://logo.clearbit.com/airbnb.com" alt="Airbnb" class="h-8 opacity-60 hover:opacity-100 transition-all"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <span class="text-indigo-600 font-semibold">NOSSOS SERVIÇOS</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Soluções de IA para todas as necessidades</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto mt-4"> | |
| Desenvolvemos agentes inteligentes que se adaptam ao seu negócio, proporcionando eficiência e inovação. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-all card-hover"> | |
| <div class="w-14 h-14 bg-indigo-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-comments text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Chatbots Inteligentes</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Atendimento ao cliente 24/7 com respostas naturais e personalizadas, reduzindo custos e melhorando a experiência. | |
| </p> | |
| <a href="#" class="text-indigo-600 font-medium flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-all card-hover"> | |
| <div class="w-14 h-14 bg-purple-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-brain text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Processamento de Dados</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Análise avançada de grandes volumes de dados para extrair insights valiosos e tomar decisões estratégicas. | |
| </p> | |
| <a href="#" class="text-purple-600 font-medium flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-all card-hover"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-cogs text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Automação de Processos</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Automatize tarefas repetitivas e complexas com agentes inteligentes, liberando sua equipe para atividades estratégicas. | |
| </p> | |
| <a href="#" class="text-blue-600 font-medium flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-all card-hover"> | |
| <div class="w-14 h-14 bg-green-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-pie text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Análise Preditiva</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Previsões precisas baseadas em machine learning para antecipar tendências e comportamentos do mercado. | |
| </p> | |
| <a href="#" class="text-green-600 font-medium flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-all card-hover"> | |
| <div class="w-14 h-14 bg-red-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-lock text-red-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Segurança Inteligente</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Sistemas de detecção de ameaças em tempo real usando IA para proteger seus dados e infraestrutura. | |
| </p> | |
| <a href="#" class="text-red-600 font-medium flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition-all card-hover"> | |
| <div class="w-14 h-14 bg-yellow-100 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-shopping-cart text-yellow-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Recomendações Personalizadas</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Sistemas de recomendação que aumentam conversões e fidelização através de sugestões altamente relevantes. | |
| </p> | |
| <a href="#" class="text-yellow-600 font-medium flex items-center"> | |
| Saiba mais <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions Section --> | |
| <section id="solutions" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <span class="text-indigo-600 font-semibold">NOSSAS SOLUÇÕES</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-6">Transformando dados em decisões inteligentes</h2> | |
| <p class="text-gray-600 mb-8"> | |
| Nossos agentes de IA são projetados para entender contextos complexos, aprender com interações e melhorar continuamente seu desempenho. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-4 flex-shrink-0"> | |
| <i class="fas fa-check-circle text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Integração Simples</h4> | |
| <p class="text-gray-600">Conecte-se facilmente com seus sistemas existentes através de APIs robustas.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-4 flex-shrink-0"> | |
| <i class="fas fa-check-circle text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Aprendizado Contínuo</h4> | |
| <p class="text-gray-600">Nossos modelos melhoram com o tempo, adaptando-se às suas necessidades.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-4 flex-shrink-0"> | |
| <i class="fas fa-check-circle text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Escalabilidade</h4> | |
| <p class="text-gray-600">Soluções que crescem junto com seu negócio, sem comprometer performance.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-8 bg-indigo-600 text-white px-8 py-3 rounded-full hover:bg-indigo-700 transition-all font-medium"> | |
| Explorar Soluções | |
| </button> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-gradient-to-br from-indigo-50 to-purple-50 p-8 rounded-2xl"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm mb-6 transition-all card-hover"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-chart-line text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-2">Análise em Tempo Real</h4> | |
| <p class="text-gray-600">Monitoramento contínuo de KPIs com alertas inteligentes para ações imediatas.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm mb-6 transition-all card-hover"> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-users text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-2">Atendimento Personalizado</h4> | |
| <p class="text-gray-600">Agentes que entendem contexto emocional para interações mais humanizadas.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm transition-all card-hover"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-shield-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-2">Proteção Avançada</h4> | |
| <p class="text-gray-600">Detecção de anomalias e padrões suspeitos com 99.9% de precisão.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-16 bg-indigo-600 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center"> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold mb-2">98%</div> | |
| <p class="text-indigo-100">Satisfação dos Clientes</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold mb-2">500+</div> | |
| <p class="text-indigo-100">Projetos Concluídos</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold mb-2">24/7</div> | |
| <p class="text-indigo-100">Suporte Especializado</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold mb-2">3x</div> | |
| <p class="text-indigo-100">Retorno em 6 Meses</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <span class="text-indigo-600 font-semibold">DEPOIMENTOS</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">O que nossos clientes dizem</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm transition-all card-hover"> | |
| <div class="flex mb-4"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| <p class="text-gray-600 italic mb-6"> | |
| "A implementação dos chatbots da NexusAI transformou nosso atendimento ao cliente. Reduzimos em 70% o tempo de resposta e aumentamos a satisfação dos clientes." | |
| </p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Ana Carolina</h4> | |
| <p class="text-gray-500 text-sm">Diretora de CX, TechSolutions</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm transition-all card-hover"> | |
| <div class="flex mb-4"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| <p class="text-gray-600 italic mb-6"> | |
| "A análise preditiva nos permitiu antecipar tendências de mercado com 3 meses de antecedência. Um divisor de águas para nossa estratégia de vendas." | |
| </p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/54.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Ricardo Almeida</h4> | |
| <p class="text-gray-500 text-sm">CEO, GlobalRetail</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm transition-all card-hover"> | |
| <div class="flex mb-4"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| <p class="text-gray-600 italic mb-6"> | |
| "A automação de processos eliminou 80% das tarefas manuais da nossa equipe, permitindo que focassem em inovação e crescimento estratégico." | |
| </p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Fernanda Oliveira</h4> | |
| <p class="text-gray-500 text-sm">COO, FinTech Innovations</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <img src="https://illustrations.popsy.co/amber/customer-survey.svg" alt="About Us" class="w-full rounded-xl shadow-sm"> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <span class="text-indigo-600 font-semibold">SOBRE NÓS</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-6">Inovação impulsionada por inteligência artificial</h2> | |
| <p class="text-gray-600 mb-6"> | |
| Na NexusAI, combinamos expertise técnica com profundo entendimento de negócios para criar soluções de IA que realmente fazem a diferença. | |
| </p> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-lightbulb text-indigo-600"></i> | |
| </div> | |
| <h4 class="font-bold text-gray-800">Nossa Missão</h4> | |
| </div> | |
| <p class="text-gray-600 ml-12"> | |
| Democratizar o acesso à inteligência artificial, tornando-a acessível e útil para empresas de todos os tamanhos. | |
| </p> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-eye text-purple-600"></i> | |
| </div> | |
| <h4 class="font-bold text-gray-800">Nossa Visão</h4> | |
| </div> | |
| <p class="text-gray-600 ml-12"> | |
| Ser referência em soluções de IA na América Latina, transformando a maneira como as empresas operam e competem. | |
| </p> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-4"> | |
| <i class="fas fa-heart text-blue-600"></i> | |
| </div> | |
| <h4 class="font-bold text-gray-800">Nossos Valores</h4> | |
| </div> | |
| <p class="text-gray-600 ml-12"> | |
| Inovação, transparência, ética no uso de dados e compromisso com resultados mensuráveis para nossos clientes. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <span class="text-indigo-600 font-semibold">NOSSO TIME</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Conheça nossos especialistas</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto mt-4"> | |
| Uma equipe multidisciplinar de cientistas de dados, engenheiros de machine learning e especialistas em negócios. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Team Member 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center transition-all card-hover"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Team Member" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-1">Dra. Laura Mendes</h3> | |
| <p class="text-indigo-600 font-medium mb-4">Chief AI Officer</p> | |
| <p class="text-gray-600 mb-4"> | |
| PhD em Machine Learning com 15 anos de experiência em modelos preditivos. | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fas fa-envelope"></i></a> | |
| </div> | |
| </div> | |
| <!-- Team Member 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center transition-all card-hover"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-1">Carlos Ribeiro</h3> | |
| <p class="text-indigo-600 font-medium mb-4">Engenheiro de Dados</p> | |
| <p class="text-gray-600 mb-4"> | |
| Especialista em arquitetura de big data e pipelines de machine learning. | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| <!-- Team Member 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center transition-all card-hover"> | |
| <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Team Member" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-1">Amanda Torres</h3> | |
| <p class="text-indigo-600 font-medium mb-4">Product Manager</p> | |
| <p class="text-gray-600 mb-4"> | |
| Conecta necessidades de negócios com soluções técnicas inovadoras. | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-twitter"></i></a> | |
| </div> | |
| </div> | |
| <!-- Team Member 4 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm text-center transition-all card-hover"> | |
| <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="Team Member" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-1">Rodrigo Silva</h3> | |
| <p class="text-indigo-600 font-medium mb-4">Engenheiro de NLP</p> | |
| <p class="text-gray-600 mb-4"> | |
| Especialista em processamento de linguagem natural e chatbots. | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-600"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-indigo-600 to-purple-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para transformar seu negócio com IA?</h2> | |
| <p class="text-xl text-indigo-100 max-w-2xl mx-auto mb-8"> | |
| Agende uma demonstração gratuita e descubra como nossos agentes inteligentes podem impulsionar seus resultados. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-indigo-600 px-8 py-3 rounded-full hover:bg-gray-100 transition-all font-medium"> | |
| Agendar Demonstração | |
| </button> | |
| <button class="border border-white text-white px-8 py-3 rounded-full hover:bg-indigo-700 transition-all font-medium"> | |
| Fale com Especialista | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> | |
| <span class="text-indigo-600 font-semibold">CONTATO</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2 mb-6">Vamos conversar sobre seu projeto</h2> | |
| <p class="text-gray-600 mb-8"> | |
| Tem perguntas sobre nossas soluções ou quer discutir como podemos ajudar seu negócio? Preencha o formulário ou entre em contato diretamente. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-1">Endereço</h4> | |
| <p class="text-gray-600">Av. Paulista, 1000 - São Paulo, SP</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-1">Email</h4> | |
| <p class="text-gray-600">contato@nexusai.com.br</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800 mb-1">Telefone</h4> | |
| <p class="text-gray-600">(11) 1234-5678</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold text-gray-800 mb-4">Siga-nos</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-indigo-600 hover:text-white transition-all"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-indigo-600 hover:text-white transition-all"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-indigo-600 hover:text-white transition-all"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-indigo-600 hover:text-white transition-all"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <form class="bg-gray-50 p-8 rounded-xl shadow-sm"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nome Completo</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Seu nome"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="seu@email.com"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Telefone</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="(00) 00000-0000"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block text-gray-700 font-medium mb-2">Assunto</label> | |
| <select id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> | |
| <option value="">Selecione um assunto</option> | |
| <option value="consulting">Consultoria</option> | |
| <option value="chatbot">Chatbots</option> | |
| <option value="automation">Automação</option> | |
| <option value="other">Outro</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Mensagem</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Descreva sua necessidade..."></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-full hover:bg-indigo-700 transition-all font-medium"> | |
| Enviar Mensagem | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <span class="text-indigo-600 font-semibold">FAQ</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Perguntas frequentes</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto mt-4"> | |
| Aqui estão algumas das dúvidas mais comuns sobre nossos serviços e soluções. | |
| </p> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-4"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 text-left"> | |
| <h3 class="font-bold text-gray-800">Quanto tempo leva para implementar uma solução de IA?</h3> | |
| <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i> | |
| </button> | |
| <div class="faq-content px-6 pb-6 hidden"> | |
| <p class="text-gray-600"> | |
| O tempo de implementação varia conforme a complexidade do projeto. Soluções padrão podem ser implementadas em 2-4 semanas, enquanto projetos personalizados mais complexos podem levar de 8 a 12 semanas. Realizamos uma avaliação detalhada para fornecer um cronograma preciso. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-4"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 text-left"> | |
| <h3 class="font-bold text-gray-800">Quais tipos de dados são necessários para treinar os modelos?</h3> | |
| <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i> | |
| </button> | |
| <div class="faq-content px-6 pb-6 hidden"> | |
| <p class="text-gray-600"> | |
| Depende do tipo de solução. Para chatbots, precisamos de logs de conversas históricas. Para análise preditiva, dados históricos de desempenho. Avaliamos seus dados existentes e, se necessário, complementamos com dados sintéticos ou de fontes públicas para melhorar a performance do modelo. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-4"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 text-left"> | |
| <h3 class="font-bold text-gray-800">Como é garantida a segurança dos dados?</h3> | |
| <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i> | |
| </button> | |
| <div class="faq-content px-6 pb-6 hidden"> | |
| <p class="text-gray-600"> | |
| Utilizamos criptografia de ponta a ponta, controle rigoroso de acesso e cumprimos todas as regulamentações de proteção de dados (LGPD, GDPR). Oferecemos a opção de implementação on-premise para clientes com requisitos específicos de segurança. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-4"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 text-left"> | |
| <h3 class="font-bold text-gray-800">Qual o custo médio de uma solução de IA?</h3> | |
| <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i> | |
| </button> | |
| <div class="faq-content px-6 pb-6 hidden"> | |
| <p class="text-gray-600"> | |
| Os custos variam conforme escopo e complexidade. Soluções básicas começam em R$ 5.000/mês, enquanto projetos empresariais complexos podem chegar a R$ 50.000+/mês. Oferecemos modelos de assinatura flexíveis e calculamos o ROI esperado para cada projeto. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <button class="faq-toggle w-full flex justify-between items-center p-6 text-left"> | |
| <h3 class="font-bold text-gray-800">Como é o suporte pós-implantação?</h3> | |
| <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i> | |
| </button> | |
| <div class="faq-content px-6 pb-6 hidden"> | |
| <p class="text-gray-600"> | |
| Oferecemos suporte 24/7 com SLA de resposta em até 2 horas para questões críticas. Incluímos atualizações regulares dos modelos, monitoramento contínuo de performance e sessões trimestrais de revisão estratégica para garantir que a solução continue atendendo às necessidades do negócio. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="py-16 bg-indigo-600 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Assine nossa newsletter</h2> | |
| <p class="text-xl text-indigo-100 mb-8"> | |
| Receba insights exclusivos sobre IA, cases de sucesso e novidades da NexusAI diretamente em seu email. | |
| </p> | |
| <form class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"> | |
| <input type="email" placeholder="Seu melhor email" class="flex-grow px-6 py-3 rounded-full focus:outline-none text-gray-800"> | |
| <button type="submit" class="bg-white text-indigo-600 px-8 py-3 rounded-full hover:bg-gray-100 transition-all font-medium whitespace-nowrap"> | |
| Assinar Agora | |
| </button> | |
| </form> | |
| <p class="text-sm text-indigo-200 mt-4"> | |
| Não compartilhamos seus dados. Leia nossa <a href="#" class="underline">Política de Privacidade</a>. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12"> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <span class="text-2xl font-bold gradient-text">NexusAI</span> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| Soluções inteligentes para negócios inovadores. Transformando dados em decisões estratégicas. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:bg-indigo-600 hover:text-white transition-all"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:bg-indigo-600 hover:text-white transition-all"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:bg-indigo-600 hover:text-white transition-all"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center text-gray-300 hover:bg-indigo-600 hover:text-white transition-all"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">Serviços</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Chatbots Inteligentes</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Processamento de Dados</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Automação de Processos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Análise Preditiva</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Segurança Inteligente</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">Links Úteis</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Cases de Sucesso</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Carreiras</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Termos de Serviço</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-all">Política de Privacidade</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-6">Contato</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-gray-400 mt-1 mr-3"></i> | |
| <span class="text-gray-400">Av. Paulista, 1000 - São Paulo, SP</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-gray-400 mr-3"></i> | |
| <span class="text-gray-400">contato@nexusai.com.br</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt text-gray-400 mr-3"></i> | |
| <span class="text-gray-400">(11) 1234-5678</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 NexusAI. Todos os direitos reservados.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-all">Termos de Serviço</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-all">Política de Privacidade</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-all">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-indigo-600 text-white rounded-full shadow-lg flex items-center justify-center hover:bg-indigo-700 transition-all hidden"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // FAQ Toggle | |
| const faqToggles = document.querySelectorAll('.faq-toggle'); | |
| faqToggles.forEach(toggle => { | |
| toggle.addEventListener('click', () => { | |
| const content = toggle.nextElementSibling; | |
| const icon = toggle.querySelector('i'); | |
| content.classList.toggle('hidden'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('hidden'); | |
| } else { | |
| backToTopButton.classList.add('hidden'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mateusbmo/my-website-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |