Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ThinkFlowBR - Soluções em Automação Industrial</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1a365d', | |
| secondary: '#2c5282', | |
| accent: '#4299e1', | |
| darkblue: '#1e3a8a', | |
| lightblue: '#ebf8ff', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Custom CSS for animations and additional styling */ | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #1a365d 0%, #2c5282 50%, #4299e1 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .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); | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: #4299e1; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- 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"> | |
| <img src="https://via.placeholder.com/50" alt="ThinkFlowBR Logo" class="h-10 w-10 mr-3"> | |
| <span class="text-2xl font-bold text-primary">Think<span class="text-accent">Flow</span>BR</span> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <button id="mobile-menu-button" class="md:hidden text-primary"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link text-primary font-medium">Início</a> | |
| <a href="#services" class="nav-link text-primary font-medium">Serviços</a> | |
| <a href="#about" class="nav-link text-primary font-medium">Sobre Nós</a> | |
| <a href="#portfolio" class="nav-link text-primary font-medium">Portfólio</a> | |
| <a href="#contact" class="nav-link text-primary font-medium">Contato</a> | |
| </nav> | |
| </div> | |
| <!-- Mobile Navigation --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 border-t"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#home" class="text-primary font-medium">Início</a> | |
| <a href="#services" class="text-primary font-medium">Serviços</a> | |
| <a href="#about" class="text-primary font-medium">Sobre Nós</a> | |
| <a href="#portfolio" class="text-primary font-medium">Portfólio</a> | |
| <a href="#contact" class="text-primary font-medium">Contato</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient text-white py-20 md:py-32"> | |
| <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-4xl md:text-5xl font-bold mb-6">Soluções Inteligentes em <span class="text-accent">Automação Industrial</span></h1> | |
| <p class="text-xl mb-8">Tecnologia de ponta para otimizar seus processos industriais e aumentar sua produtividade.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="bg-accent hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg text-center transition duration-300">Solicitar Orçamento</a> | |
| <a href="#services" class="bg-transparent hover:bg-white hover:text-primary border-2 border-white text-white font-bold py-3 px-6 rounded-lg text-center transition duration-300">Nossos Serviços</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://via.placeholder.com/600x400" alt="Automação Industrial" class="rounded-lg shadow-xl floating" style="max-width: 100%; height: auto;"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="bg-lightblue py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">Por que escolher a ThinkFlowBR?</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Nós combinamos tecnologia de ponta com expertise industrial para entregar soluções sob medida para sua empresa.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center card-hover"> | |
| <div class="bg-accent text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-cogs text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-4">Tecnologia Avançada</h3> | |
| <p class="text-gray-600">Utilizamos as mais modernas plataformas de automação para garantir a máxima eficiência e confiabilidade.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center card-hover"> | |
| <div class="bg-accent text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-user-tie text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-4">Equipe Especializada</h3> | |
| <p class="text-gray-600">Nossos engenheiros possuem vasta experiência em implementação de sistemas automatizados.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center card-hover"> | |
| <div class="bg-accent text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-headset text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-4">Suporte 24/7</h3> | |
| <p class="text-gray-600">Oferecemos suporte técnico especializado a qualquer momento, garantindo a continuidade dos seus processos.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">Nossos Serviços</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Soluções completas em automação industrial para diversos segmentos</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md card-hover"> | |
| <div class="h-48 bg-primary flex items-center justify-center"> | |
| <i class="fas fa-project-diagram text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-primary mb-3">Sistemas de Controle</h3> | |
| <p class="text-gray-600 mb-4">Implementação de CLPs, sistemas SCADA e painéis de supervisão para controle de processos industriais.</p> | |
| <a href="#" class="text-accent font-medium flex items-center">Saiba mais <i class="fas fa-arrow-right ml-2"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md card-hover"> | |
| <div class="h-48 bg-primary flex items-center justify-center"> | |
| <i class="fas fa-robot text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-primary mb-3">Robótica Industrial</h3> | |
| <p class="text-gray-600 mb-4">Automatização de processos com robôs industriais para aumentar precisão e produtividade.</p> | |
| <a href="#" class="text-accent font-medium flex items-center">Saiba mais <i class="fas fa-arrow-right ml-2"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md card-hover"> | |
| <div class="h-48 bg-primary flex items-center justify-center"> | |
| <i class="fas fa-network-wired text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-primary mb-3">Redes Industriais</h3> | |
| <p class="text-gray-600 mb-4">Projeto e implementação de redes de comunicação industrial para integração de sistemas.</p> | |
| <a href="#" class="text-accent font-medium flex items-center">Saiba mais <i class="fas fa-arrow-right ml-2"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md card-hover"> | |
| <div class="h-48 bg-primary flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-primary mb-3">IIoT (Indústria 4.0)</h3> | |
| <p class="text-gray-600 mb-4">Implementação de soluções de Internet das Coisas Industrial para coleta e análise de dados.</p> | |
| <a href="#" class="text-accent font-medium flex items-center">Saiba mais <i class="fas fa-arrow-right ml-2"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md card-hover"> | |
| <div class="h-48 bg-primary flex items-center justify-center"> | |
| <i class="fas fa-wrench text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-primary mb-3">Manutenção Preditiva</h3> | |
| <p class="text-gray-600 mb-4">Sistemas de monitoramento para antecipar falhas e reduzir paradas não programadas.</p> | |
| <a href="#" class="text-accent font-medium flex items-center">Saiba mais <i class="fas fa-arrow-right ml-2"></i></a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md card-hover"> | |
| <div class="h-48 bg-primary flex items-center justify-center"> | |
| <i class="fas fa-laptop-code text-white text-6xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-primary mb-3">Desenvolvimento de Software</h3> | |
| <p class="text-gray-600 mb-4">Soluções personalizadas para integração de sistemas e aplicações industriais.</p> | |
| <a href="#" class="text-accent font-medium flex items-center">Saiba mais <i class="fas fa-arrow-right ml-2"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-lightblue"> | |
| <div class="container mx-auto px-4"> | |
| <div class="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 font-bold text-primary mb-6">Sobre a ThinkFlowBR</h2> | |
| <p class="text-gray-600 mb-4">Fundada em 2015, a ThinkFlowBR surgiu com o propósito de revolucionar a automação industrial no Brasil, trazendo soluções inteligentes e inovadoras para nossos clientes.</p> | |
| <p class="text-gray-600 mb-4">Com uma equipe altamente qualificada e comprometida, já implementamos mais de 200 projetos de automação em diversos segmentos industriais.</p> | |
| <p class="text-gray-600 mb-6">Nossa missão é transformar processos industriais através da tecnologia, aumentando eficiência, segurança e lucratividade para nossos clientes.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="bg-primary text-white py-2 px-4 rounded-full text-sm font-medium">+200 Projetos</div> | |
| <div class="bg-accent text-white py-2 px-4 rounded-full text-sm font-medium">15+ Indústrias</div> | |
| <div class="bg-darkblue text-white py-2 px-4 rounded-full text-sm font-medium">100% Satisfação</div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://via.placeholder.com/500x350" alt="Equipe ThinkFlowBR" class="rounded-lg shadow-xl z-10 relative"> | |
| <div class="absolute -bottom-5 -right-5 bg-primary w-64 h-64 rounded-lg z-0"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section id="portfolio" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">Nossos Trabalhos</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Alguns dos projetos recentes que realizamos para nossos clientes</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="portfolio-item relative overflow-hidden rounded-lg shadow-md group"> | |
| <img src="https://via.placeholder.com/600x400" alt="Projeto 1" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-primary to-transparent opacity-0 group-hover:opacity-90 transition duration-500 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-2">Automação de Linha de Produção</h3> | |
| <p class="text-white">Setor: Alimentício</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="portfolio-item relative overflow-hidden rounded-lg shadow-md group"> | |
| <img src="https://via.placeholder.com/600x400" alt="Projeto 2" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-primary to-transparent opacity-0 group-hover:opacity-90 transition duration-500 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-2">Sistema SCADA Industrial</h3> | |
| <p class="text-white">Setor: Químico</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="portfolio-item relative overflow-hidden rounded-lg shadow-md group"> | |
| <img src="https://via.placeholder.com/600x400" alt="Projeto 3" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-primary to-transparent opacity-0 group-hover:opacity-90 transition duration-500 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white text-xl font-bold mb-2">Robótica para Montagem</h3> | |
| <p class="text-white">Setor: Automotivo</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-flex items-center text-accent font-medium"> | |
| Ver todos os projetos | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-primary text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold mb-4">O que dizem nossos clientes</h2> | |
| <p class="max-w-2xl mx-auto">Depoimentos de empresas que confiaram em nossas soluções</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-secondary p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/50" alt="Cliente 1" class="rounded-full h-12 w-12 mr-4"> | |
| <div> | |
| <h4 class="font-bold">Carlos Silva</h4> | |
| <p class="text-accent text-sm">Eng. de Produção - Indústria ABC</p> | |
| </div> | |
| </div> | |
| <p>"A ThinkFlowBR transformou nossa linha de produção com seu sistema de automação, aumentando nossa produtividade em 40%."</p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <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> | |
| <div class="bg-secondary p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/50" alt="Cliente 2" class="rounded-full h-12 w-12 mr-4"> | |
| <div> | |
| <h4 class="font-bold">Ana Oliveira</h4> | |
| <p class="text-accent text-sm">Diretora Industrial - Empresa XYZ</p> | |
| </div> | |
| </div> | |
| <p>"O suporte técnico da ThinkFlowBR é excepcional. Resolvem qualquer problema rapidamente, garantindo a continuidade da nossa produção."</p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <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> | |
| <div class="bg-secondary p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/50" alt="Cliente 3" class="rounded-full h-12 w-12 mr-4"> | |
| <div> | |
| <h4 class="font-bold">Roberto Santos</h4> | |
| <p class="text-accent text-sm">Gerente Industrial - Grupo EFG</p> | |
| </div> | |
| </div> | |
| <p>"Implementamos a solução de IoT industrial da ThinkFlowBR e agora temos controle total sobre nossos ativos, com dados em tempo real."</p> | |
| <div class="flex mt-4 text-yellow-400"> | |
| <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> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">Entre em Contato</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Solicite um orçamento ou tire suas dúvidas sobre nossos serviços</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h3 class="text-xl font-bold text-primary mb-6">Informações de Contato</h3> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-accent text-white p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary">Endereço</h4> | |
| <p class="text-gray-600">Av. Industrial, 1234 - Sala 501<br>São Paulo/SP - CEP 00000-000</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-accent text-white p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary">Telefone</h4> | |
| <p class="text-gray-600">(11) 9999-9999</p> | |
| <p class="text-gray-600">(11) 8888-8888</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-accent text-white p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-primary">E-mail</h4> | |
| <p class="text-gray-600">contato@thinkflowbr.com.br</p> | |
| <p class="text-gray-600">comercial@thinkflowbr.com.br</p> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-primary mb-4 mt-8">Siga-nos</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-primary hover:bg-darkblue text-white p-3 rounded-full transition duration-300"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-primary hover:bg-darkblue text-white p-3 rounded-full transition duration-300"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-primary hover:bg-darkblue text-white p-3 rounded-full transition duration-300"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="bg-primary hover:bg-darkblue text-white p-3 rounded-full transition duration-300"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form class="bg-gray-50 p-8 rounded-lg shadow-md"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Seu Nome</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent" placeholder="Digite seu nome completo"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Seu E-mail</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent" placeholder="Digite seu melhor e-mail"> | |
| </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 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent" placeholder="(00) 00000-0000"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="service" class="block text-gray-700 font-medium mb-2">Serviço de Interesse</label> | |
| <select id="service" class="w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"> | |
| <option value="">Selecione um serviço</option> | |
| <option value="controle">Sistemas de Controle</option> | |
| <option value="robotica">Robótica Industrial</option> | |
| <option value="redes">Redes Industriais</option> | |
| <option value="iiot">IIoT (Indústria 4.0)</option> | |
| <option value="manutencao">Manutenção Preditiva</option> | |
| <option value="software">Desenvolvimento de Software</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 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent" placeholder="Descreva brevemente sua necessidade"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-accent hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-lg transition duration-300">Enviar Mensagem</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Partners Section --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h3 class="text-center text-primary font-bold mb-8">Parceiros e Clientes</h3> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <img src="https://via.placeholder.com/150x80" alt="Parceiro 1" class="h-16 opacity-60 hover:opacity-100 transition duration-300"> | |
| <img src="https://via.placeholder.com/150x80" alt="Parceiro 2" class="h-16 opacity-60 hover:opacity-100 transition duration-300"> | |
| <img src="https://via.placeholder.com/150x80" alt="Parceiro 3" class="h-16 opacity-60 hover:opacity-100 transition duration-300"> | |
| <img src="https://via.placeholder.com/150x80" alt="Parceiro 4" class="h-16 opacity-60 hover:opacity-100 transition duration-300"> | |
| <img src="https://via.placeholder.com/150x80" alt="Parceiro 5" class="h-16 opacity-60 hover:opacity-100 transition duration-300"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-primary text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://via.placeholder.com/40" alt="ThinkFlowBR Logo" class="h-8 w-8 mr-2"> | |
| <span class="text-xl font-bold">Think<span class="text-accent">Flow</span>BR</span> | |
| </div> | |
| <p class="text-gray-300">Soluções em automação industrial para otimizar seus processos e aumentar sua produtividade.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Links Rápidos</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-300 hover:text-accent transition duration-300">Início</a></li> | |
| <li><a href="#services" class="text-gray-300 hover:text-accent transition duration-300">Serviços</a></li> | |
| <li><a href="#about" class="text-gray-300 hover:text-accent transition duration-300">Sobre Nós</a></li> | |
| <li><a href="#portfolio" class="text-gray-300 hover:text-accent transition duration-300">Portfólio</a></li> | |
| <li><a href="#contact" class="text-gray-300 hover:text-accent transition duration-300">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Serviços</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-accent transition duration-300">Sistemas de Controle</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-accent transition duration-300">Robótica Industrial</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-accent transition duration-300">Redes Industriais</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-accent transition duration-300">IIoT (Indústria 4.0)</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-accent transition duration-300">Manutenção Preditiva</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Newsletter</h4> | |
| <p class="text-gray-300 mb-4">Assine nossa newsletter para receber novidades e conteúdos exclusivos.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Seu e-mail" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full"> | |
| <button type="submit" class="bg-accent hover:bg-blue-600 px-4 py-2 rounded-r-lg transition duration-300"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center md:text-left md:flex md:justify-between"> | |
| <p class="text-gray-300 mb-2 md:mb-0">© 2023 ThinkFlowBR. Todos os direitos reservados.</p> | |
| <div class="flex justify-center md:justify-start space-x-6"> | |
| <a href="#" class="text-gray-300 hover:text-accent transition duration-300">Termos de Serviço</a> | |
| <a href="#" class="text-gray-300 hover:text-accent transition duration-300">Política de Privacidade</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-6 right-6 bg-accent text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300"> | |
| <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'); | |
| }); | |
| // Smooth Scrolling for Navigation Links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| if(this.getAttribute('href') === '#') return; | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if(target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if(!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('opacity-0', 'invisible'); | |
| backToTopButton.classList.add('opacity-100', 'visible'); | |
| } else { | |
| backToTopButton.classList.remove('opacity-100', 'visible'); | |
| backToTopButton.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| </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=pedrofarini/thinkflowbr" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |