coloque um carrossel de fotos na área do hero - Initial Deployment

index.html

@@ -33,6 +33,13 @@
             display: flex;
             width: 100%;
         }
+        .hero-carousel {
+            height: 400px;
+        }
+        .hero-carousel img {
+            height: 400px;
+            object-fit: contain;
+        }
         .floating {
             animation: floating 3s ease-in-out infinite;
         }
@@ -68,8 +75,8 @@
     <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-4xl md:text-5xl font-bold leading-tight mb-6">
-                    Automatize Seu Negócio com Inteligência Artificial
+                <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.
@@ -83,8 +90,25 @@
                     </a>
                 </div>
             </div>
-            <div class="md:w-1/2 flex justify-center">
-                <img src="https://cdn-icons-png.flaticon.com/512/3271/3271597.png" alt="Automação de Negócios" class="w-3/4 floating">
+            <div class="md:w-1/2">
+                <div class="hero-carousel relative overflow-hidden rounded-xl shadow-xl">
+                    <div class="flex transition-transform duration-500">
+                        <div class="flex-shrink-0 w-full">
+                            <img src="https://cdn-icons-png.flaticon.com/512/3271/3271597.png" alt="Automação de Negócios" class="w-full">
+                        </div>
+                        <div class="flex-shrink-0 w-full">
+                            <img src="https://cdn-icons-png.flaticon.com/512/2933/2933245.png" alt="Integração de Sistemas" class="w-full">
+                        </div>
+                        <div class="flex-shrink-0 w-full">
+                            <img src="https://cdn-icons-png.flaticon.com/512/1055/1055687.png" alt="Inteligência Artificial" class="w-full">
+                        </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>
@@ -545,6 +569,38 @@
     </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');
         

prompts.txt

@@ -0,0 +1 @@
+coloque um carrossel de fotos na área do hero