Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ThinkFlux - Automação de Negócios Inteligente</title> | |
| <link rel="shortcut icon" type="image/x-icon" href="src/favicon.ico"> | |
| <link rel="icon" type="image/png" href="src/favicon.png"> | |
| <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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#d26f2a', | |
| secondary: '#1e394a', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1e394a 0%, #d26f2a 100%); | |
| } | |
| .feature-card: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); | |
| } | |
| .testimonial-carousel { | |
| width: 100%; | |
| } | |
| .testimonial-carousel .flex { | |
| display: flex; | |
| width: 100%; | |
| } | |
| .hero-carousel { | |
| height: 400px; | |
| } | |
| .hero-carousel img { | |
| height: 400px; | |
| object-fit: contain; | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Header/Navigation --> | |
| <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-30 h-14 mr-3"> | |
| <img src="src/logo.png" alt="ThinkFlux Logo" class="w-full h-full object-contain"> | |
| </div> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#servicos" class="font-medium hover:text-primary transition">Serviços</a> | |
| <a href="#sobre" class="font-medium hover:text-primary transition">Sobre</a> | |
| <a href="#contato" class="font-medium hover:text-primary transition">Contato</a> | |
| </nav> | |
| <button class="md:hidden text-secondary"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white py-20"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-5xl md:text-5xl font-bold leading-tight mb-6"> | |
| Automatize seu Negócio | |
| </h1> | |
| <p class="text-xl mb-8 opacity-90"> | |
| Conectamos WhatsApp, calendários e emails com agentes de atendimento automatizado para transformar sua operação comercial. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contato" class="bg-white text-secondary font-bold py-3 px-6 rounded-lg hover:bg-opacity-90 transition text-center"> | |
| Fale conosco | |
| </a> | |
| <a href="#servicos" class="border-2 border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-white hover:bg-opacity-10 transition text-center"> | |
| Nossos serviços | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="hero-carousel relative overflow-hidden "> | |
| <div class="flex transition-transform duration-500"> | |
| <div class="flex-shrink-0 w-full"> | |
| <img src="src/foto1.png" alt="Automação de Negócios" class="w-full"> | |
| </div> | |
| <div class="flex-shrink-0 w-full"> | |
| <img src="src/foto2.png" alt="Integração de Sistemas" class="w-full"> | |
| </div> | |
| <div class="flex-shrink-0 w-full"> | |
| <img src="src/foto3.png" alt="Inteligência Artificial" class="w-full" border-radius: 50%> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2"> | |
| <button class="hero-carousel-indicator w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition" data-index="0"></button> | |
| <button class="hero-carousel-indicator w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition" data-index="1"></button> | |
| <button class="hero-carousel-indicator w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition" data-index="2"></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="servicos" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-secondary mb-4">Nossas Soluções de Automação</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Integrações poderosas que simplificam seu fluxo de trabalho e melhoram a experiência do cliente. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-4"> | |
| <i class="fab fa-whatsapp text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-secondary mb-3">Automação WhatsApp</h3> | |
| <p class="text-gray-600"> | |
| Chatbots inteligentes para WhatsApp que atendem clientes 24/7, agendam compromissos e qualificam leads automaticamente. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-4"> | |
| <i class="fas fa-calendar-alt text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-secondary mb-3">Agendamentos Automáticos</h3> | |
| <p class="text-gray-600"> | |
| Sistema de agendamento que sincroniza com Google Calendar, Outlook e conecta diretamente com seus clientes. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-4"> | |
| <i class="fas fa-envelope text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-secondary mb-3">Email Marketing Avançado</h3> | |
| <p class="text-gray-600"> | |
| Campanhas personalizadas com segmentação inteligente e automação baseada no comportamento do cliente. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-4"> | |
| <i class="fas fa-robot text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-secondary mb-3">Agentes de IA</h3> | |
| <p class="text-gray-600"> | |
| Assistentes virtuais que aprendem com seus processos para oferecer respostas precisas e personalizadas. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-4"> | |
| <i class="fab fa-facebook-messenger text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-secondary mb-3">Integração com Redes Sociais</h3> | |
| <p class="text-gray-600"> | |
| Automação para Instagram e Facebook Messenger que engaja clientes e converte conversas em vendas. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden feature-card transition duration-300"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mb-4"> | |
| <i class="fas fa-chart-line text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-secondary mb-3">Análise de Dados</h3> | |
| <p class="text-gray-600"> | |
| Dashboard completo com métricas de performance e insights para melhorar seus resultados. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="sobre" class="py-20 bg-secondary text-white"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Transformando Negócios com Tecnologia</h2> | |
| <!--<p class="text-lg mb-6 opacity-90"> | |
| Na ThinkFlux, acreditamos que a automação inteligente é a chave para escalar operações comerciais sem perder o toque humano. | |
| </p>--> | |
| <p class="text-lg mb-8 opacity-90"> | |
| Utilizamos as melhores ferramentas para automatizar a comunicação com clientes, desde o primeiro contato até o suporte pós-venda. Com inteligência artificial para analisar dados dessas e obter insights valiosos sobre o comportamento do consumidor. Contamos com as melhores inteligências artificiais para responder perguntas complexas e personalizar a experiência do cliente. Invista na automação e na análise de dados para aumentar a eficiência, reduzir custos, melhorar a satisfação do cliente e impulsionar o crescimento do seu negócio. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <div class="bg-primary bg-opacity-20 p-4 rounded-lg"> | |
| <h3 class="font-bold text-xl mb-2">+350</h3> | |
| <p class="opacity-90">Processos automatizados</p> | |
| </div> | |
| <!--<div class="bg-primary bg-opacity-20 p-4 rounded-lg"> | |
| <h3 class="font-bold text-xl mb-2">+200</h3> | |
| <p class="opacity-90">Clientes satisfeitos</p> | |
| </div>--> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img class="w-500 h-500 rounded-lg shadow-lg floating" src="src/tecnologias.png" alt="Sobre a ThinkFlux" width="500" height="600"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-secondary mb-4">Como Funciona</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Implementamos sua automação em 4 etapas simples | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <!-- Timeline --> | |
| <div class="hidden md:block absolute left-1/2 h-full w-1 bg-gradient-to-b from-primary to-secondary transform -translate-x-1/2"></div> | |
| <!-- Step 1 --> | |
| <div class="relative flex flex-col md:flex-row items-center md:even:flex-row-reverse"> | |
| <div class="md:w-1/2 md:px-12 mb-8 md:mb-0"> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="text-blue-900 text-3xl mb-4"> | |
| <!--<i class="fas fa-search"></i>--> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-800 mb-3 text-secondary">Diagnóstico</h3> | |
| <p class="text-gray-600">Analisamos seus processos atuais para identificar oportunidades de automação que trarão maior impacto.</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center justify-center md:w-1/2 md:px-12"> | |
| <div class="flex items-center justify-center w-16 h-16 rounded-full bg-primary text-white text-xl font-bold shadow-lg"> | |
| 1 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="relative flex flex-col md:flex-row items-center md:even:flex-row-reverse"> | |
| <div class="md:w-1/2 md:px-12 mb-8 md:mb-0"> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="text-blue-900 text-3xl mb-4"> | |
| <!-- <i class="fas fa-dev"></i> --> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-800 mb-3 text-secondary">Desenvolvimento</h3> | |
| <p class="text-gray-600">Desenvolvemos fluxos personalizados que se adaptam ao seu negócio e à sua forma de atender clientes.</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center justify-center md:w-1/2 md:px-12"> | |
| <div class="flex items-center justify-center w-16 h-16 rounded-full bg-secondary text-white text-xl font-bold shadow-lg"> | |
| 2 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="relative flex flex-col md:flex-row items-center md:even:flex-row-reverse"> | |
| <div class="md:w-1/2 md:px-12 mb-8 md:mb-0"> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="text-blue-900 text-3xl mb-4"> | |
| <!--<i class="fas fa-search"></i>--> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-800 mb-3 text-secondary">Implementação</h3> | |
| <p class="text-gray-600">Configuramos todas as integrações necessárias e treinamos sua equipe para usar as novas ferramentas.</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center justify-center md:w-1/2 md:px-12"> | |
| <div class="flex items-center justify-center w-16 h-16 rounded-full bg-primary text-white text-xl font-bold shadow-lg"> | |
| 3 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="relative flex flex-col md:flex-row items-center md:even:flex-row-reverse"> | |
| <div class="md:w-1/2 md:px-12 mb-8 md:mb-0"> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="text-blue-900 text-3xl mb-4"> | |
| <!-- <i class="fas fa-dev"></i> --> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-800 mb-3 text-secondary">Monitoramento</h3> | |
| <p class="text-gray-600">Monitoramos os resultados e ajustamos continuamente para melhorar performance e satisfação dos clientes.</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center justify-center md:w-1/2 md:px-12"> | |
| <div class="flex items-center justify-center w-16 h-16 rounded-full bg-secondary text-white text-xl font-bold shadow-lg"> | |
| 4 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <!-- | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-secondary mb-4">O que nossos clientes dizem</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto"> | |
| Empresas que transformaram seus negócios com nossas soluções | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <div class="testimonial-carousel overflow-hidden"> | |
| <div class="flex transition-transform duration-300"> | |
| <div class="bg-white p-8 rounded-xl shadow-md flex-shrink-0 w-full md:w-1/3 px-4"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| "A automação do WhatsApp reduziu nosso tempo de resposta de horas para segundos. Os clientes adoram a agilidade e nossa equipe pode focar em vendas mais complexas." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 mr-4 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Cliente" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-secondary">Ana Carolina</h4> | |
| <p class="text-sm text-gray-500">CEO - ModaFit</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md flex-shrink-0 w-full md:w-1/3 px-4"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| "O sistema de agendamento eliminou completamente os conflitos na agenda e reduziu faltas em 70%. Uma revolução para nosso consultório médico." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 mr-4 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-secondary">Dr. Marcelo Silva</h4> | |
| <p class="text-sm text-gray-500">Clínica Saúde Total</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6"> | |
| "Os agentes de IA estão respondendo 80% das perguntas frequentes, liberando nosso time para questões estratégicas. O ROI foi impressionante." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-200 mr-4 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Cliente" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-secondary">Juliana Mendes</h4> | |
| <p class="text-sm text-gray-500">Diretora - Imobiliária Prime</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> --> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-primary text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para automatizar seu negócio?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto"> | |
| Agende uma demonstração gratuita e descubra como podemos transformar sua operação comercial. | |
| </p> | |
| <a href="#contato" class="bg-white text-primary font-bold py-3 px-8 rounded-lg hover:bg-opacity-90 transition inline-block"> | |
| Começar agora | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contato" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-secondary mb-6">Entre em contato</h2> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Tem dúvidas sobre nossas soluções? Quer saber como a automação pode ajudar seu negócio? Fale com nosso time. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-secondary bg-opacity-10 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-envelope text-primary text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-secondary">Email</h4> | |
| <a href="mailto:contato@thinkflux.com.br" class="text-gray-600 hover:text-primary transition">contato@thinkflux.com.br</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-secondary bg-opacity-10 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-phone-alt text-primary text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-secondary">Telefone</h4> | |
| <a href="tel:71986813544" class="text-gray-600 hover:text-primary transition">(71) 98681-3544</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-secondary bg-opacity-10 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-map-marker-alt text-primary text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-secondary">Endereço</h4> | |
| <p class="text-gray-600">Salvador, BA - Brasil</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <h4 class="font-bold text-secondary mb-4">Siga-nos</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-primary hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-primary hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-primary hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-primary hover:text-white transition"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md: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</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-primary focus:border-transparent"> | |
| </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-primary focus:border-transparent"> | |
| </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-primary focus:border-transparent"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Mensagem</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-primary text-white font-bold py-3 px-6 rounded-lg hover:bg-opacity-90 transition"> | |
| Enviar mensagem | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-secondary text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center"> | |
| <div class="w-15 h-15 flex items-center justify-center mr-4"> | |
| <img src="src/logobranco.png" class="fas fa-bolt text-white" width="250" height="300"></i> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-gray-300 max-w-md"> | |
| Transforme sua operação: menos custos, vendas turbinadas e clientes satisfeitos. Simplifique, otimize e veja seu sucesso decolar com automações inteligentes! | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#servicos" class="text-gray-300 hover:text-white transition">Serviços</a></li> | |
| <li><a href="#sobre" class="text-gray-300 hover:text-white transition">Sobre</a></li> | |
| <li><a href="#contato" class="text-gray-300 hover:text-white transition">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Serviços</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">WhatsApp</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Agendamentos</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Email Marketing</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Termos</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-white transition">Privacidade</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2025 ThinkFlux. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating Buttons --> | |
| <div class="fixed bottom-6 right-6 space-y-4 z-50"> | |
| <a href="https://wa.me/71986813544" target="_blank" class="w-14 h-14 rounded-full bg-[#25D366] text-white flex items-center justify-center shadow-lg hover:bg-opacity-90 transition"> | |
| <i class="fab fa-whatsapp text-2xl"></i> | |
| </a> | |
| <!-- <button id="aiAssistant" class="w-14 h-14 rounded-full bg-secondary text-white flex items-center justify-center shadow-lg hover:bg-opacity-90 transition"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </button> | |
| </div> | |
| --> | |
| <script> | |
| // Hero Carousel | |
| const heroCarousel = document.querySelector('.hero-carousel .flex'); | |
| const heroIndicators = document.querySelectorAll('.hero-carousel-indicator'); | |
| let heroCurrentIndex = 0; | |
| function updateHeroCarousel() { | |
| heroCarousel.style.transform = `translateX(-${heroCurrentIndex * 100}%)`; | |
| heroIndicators.forEach((indicator, index) => { | |
| if (index === heroCurrentIndex) { | |
| indicator.classList.add('bg-opacity-100'); | |
| indicator.classList.remove('bg-opacity-50'); | |
| } else { | |
| indicator.classList.add('bg-opacity-50'); | |
| indicator.classList.remove('bg-opacity-100'); | |
| } | |
| }); | |
| } | |
| heroIndicators.forEach(indicator => { | |
| indicator.addEventListener('click', () => { | |
| heroCurrentIndex = parseInt(indicator.dataset.index); | |
| updateHeroCarousel(); | |
| }); | |
| }); | |
| // Auto-rotate carousel | |
| setInterval(() => { | |
| heroCurrentIndex = (heroCurrentIndex + 1) % 3; | |
| updateHeroCarousel(); | |
| }, 5000); | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('backToTop'); | |
| 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' | |
| }); | |
| }); | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.querySelector('header button.md\\:hidden'); | |
| const mobileMenu = document.createElement('div'); | |
| mobileMenu.className = 'fixed inset-0 bg-white z-50 flex flex-col items-center justify-center hidden'; | |
| mobileMenu.innerHTML = ` | |
| <button class="absolute top-4 right-4 text-2xl text-secondary"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <nav class="flex flex-col items-center space-y-8"> | |
| <a href="#servicos" class="text-2xl font-medium hover:text-primary transition">Serviços</a> | |
| <a href="#sobre" class="text-2xl font-medium hover:text-primary transition">Sobre</a> | |
| <a href="#contato" class="text-2xl font-medium hover:text-primary transition">Contato</a> | |
| </nav> | |
| `; | |
| document.body.appendChild(mobileMenu); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| mobileMenu.querySelector('button').addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| document.body.style.overflow = ''; | |
| }); | |
| // AI Assistant Chat Interface | |
| const aiAssistant = document.getElementById('aiAssistant'); | |
| const chatModal = document.createElement('div'); | |
| chatModal.className = 'fixed bottom-24 right-6 w-80 bg-white rounded-t-xl shadow-xl z-50 hidden flex flex-col'; | |
| chatModal.innerHTML = ` | |
| <div class="bg-secondary text-white p-4 rounded-t-xl flex justify-between items-center"> | |
| <h3 class="font-bold">Assistente de IA</h3> | |
| <button id="closeChat" class="text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 h-64 overflow-y-auto bg-gray-50" id="chatMessages"> | |
| <div class="text-sm text-gray-500 mb-4">Olá! Sou o assistente virtual da ThinkFlux. Como posso te ajudar hoje?</div> | |
| </div> | |
| <div class="p-4 border-t flex"> | |
| <input type="text" id="chatInput" placeholder="Digite sua mensagem..." class="flex-1 border rounded-l-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-primary"> | |
| <button id="sendMessage" class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-opacity-90"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| `; | |
| document.body.appendChild(chatModal); | |
| aiAssistant.addEventListener('click', () => { | |
| chatModal.classList.toggle('hidden'); | |
| }); | |
| document.getElementById('closeChat').addEventListener('click', () => { | |
| chatModal.classList.add('hidden'); | |
| }); | |
| document.getElementById('sendMessage').addEventListener('click', () => { | |
| const input = document.getElementById('chatInput'); | |
| const message = input.value.trim(); | |
| if (message) { | |
| const chatMessages = document.getElementById('chatMessages'); | |
| chatMessages.innerHTML += ` | |
| <div class="text-right mb-4"> | |
| <div class="inline-block bg-primary text-white rounded-lg px-4 py-2 max-w-xs"> | |
| ${message} | |
| </div> | |
| </div> | |
| <div class="text-left mb-4"> | |
| <div class="inline-block bg-gray-200 text-gray-800 rounded-lg px-4 py-2 max-w-xs"> | |
| Entendi sua pergunta sobre "${message}". Para mais informações, entre em contato pelo WhatsApp ou email. | |
| </div> | |
| </div> | |
| `; | |
| input.value = ''; | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| }); | |
| // Testimonial Carousel | |
| const carousel = document.querySelector('.testimonial-carousel .flex'); | |
| const items = document.querySelectorAll('.testimonial-carousel .flex > div'); | |
| const prevBtn = document.querySelector('.testimonial-carousel ~ button:first-child'); | |
| const nextBtn = document.querySelector('.testimonial-carousel ~ button:last-child'); | |
| let currentIndex = 0; | |
| const itemWidth = items[0].offsetWidth; | |
| function updateCarousel() { | |
| carousel.style.transform = `translateX(-${currentIndex * itemWidth}px)`; | |
| } | |
| nextBtn.addEventListener('click', () => { | |
| currentIndex = (currentIndex + 1) % items.length; | |
| updateCarousel(); | |
| }); | |
| prevBtn.addEventListener('click', () => { | |
| currentIndex = (currentIndex - 1 + items.length) % items.length; | |
| updateCarousel(); | |
| }); | |
| // 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'); | |
| document.body.style.overflow = ''; | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </html> |