Update index.html

index.html

@@ -4,6 +4,8 @@
     <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>
@@ -248,71 +250,82 @@
                 <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="flex flex-col md:flex-row items-center mb-16">
-                    <div class="md:w-1/2 md:pr-10 mb-6 md:mb-0 md:text-right">
-                        <h3 class="text-2xl font-bold text-secondary mb-3">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 class="md:w-1/2 flex justify-center md:justify-start">
-                        <div class="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold shadow-lg">
-                            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="flex flex-col md:flex-row items-center mb-16">
-                    <div class="md:w-1/2 md:pr-10 mb-6 md:mb-0 md:text-right">
-                        <h3 class="text-2xl font-bold text-secondary mb-3">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> 
+                
+                <!-- 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="md:w-1/2 flex justify-center md:justify-start">
-                        <div class="w-16 h-16 rounded-full bg-secondary text-white flex items-center justify-center text-2xl font-bold shadow-lg">
-                            2
+                    <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>
-                
+                </div> 
                 
                 <!-- Step 3 -->
-                <div class="flex flex-col md:flex-row items-center mb-16">
-                    <div class="md:w-1/2 md:pr-10 mb-6 md:mb-0 md:text-right">
-                        <h3 class="text-2xl font-bold text-secondary mb-3">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 class="md:w-1/2 flex justify-center md:justify-start">
-                        <div class="w-16 h-16 rounded-full bg-primary text-white flex items-center justify-center text-2xl font-bold shadow-lg">
-                            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>
-                </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="flex flex-col md:flex-row items-center mb-16">
-                    <div class="md:w-1/2 md:pr-10 mb-6 md:mb-0 md:text-right">
-                        <h3 class="text-2xl font-bold text-secondary mb-3">Monitoramento</h3>
-                        <p class="text-gray-600">
-                            Monitoramos os resultados e ajustamos continuamente para melhorar performance e satisfação dos clientes.
-                        </p>
-                    </div>
-                    <div class="md:w-1/2 flex justify-center md:justify-start">
-                        <div class="w-16 h-16 rounded-full bg-secondary text-white flex items-center justify-center text-2xl font-bold shadow-lg">
-                            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>
-                
+                    <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">
@@ -325,7 +338,7 @@
             <div class="relative">
                 <div class="testimonial-carousel overflow-hidden">
                     <div class="flex transition-transform duration-300">
-                        <!-- Testimonial 1 -->
+                        
                         <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">
@@ -350,7 +363,7 @@
                     </div>
                 </div>
                 
-                        <!-- Testimonial 2 -->
+                        
                         <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">
@@ -375,7 +388,7 @@
                     </div>
                 </div>
                 
-                <!-- Testimonial 3 -->
+                
                 <div class="bg-white p-8 rounded-xl shadow-md">
                     <div class="flex items-center mb-4">
                         <div class="text-yellow-400 mr-2">
@@ -401,7 +414,7 @@
                 </div>
             </div>
         </div>
-    </section>
+    </section> -->
 
     <!-- CTA Section -->
     <section class="py-16 bg-primary text-white">
@@ -564,11 +577,11 @@
             <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">
+    <!--    <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');
@@ -667,7 +680,7 @@
                 </button>
             </div>
         `;
-        document.body.appendChild(chatModal);
+       document.body.appendChild(chatModal);
 
         aiAssistant.addEventListener('click', () => {
             chatModal.classList.toggle('hidden');
@@ -698,6 +711,7 @@
                 chatMessages.scrollTop = chatMessages.scrollHeight;
             }
         });
+        
 
         // Testimonial Carousel
         const carousel = document.querySelector('.testimonial-carousel .flex');