Add 1 files

index.html

@@ -39,6 +39,7 @@
                 <nav class="flex space-x-1 md:space-x-6">
                     <a href="#services" class="px-3 py-2 rounded hover:bg-blue-700 transition">Serviços</a>
                     <a href="#about" class="px-3 py-2 rounded hover:bg-blue-700 transition">Sobre</a>
+                    <a href="#articles" class="px-3 py-2 rounded hover:bg-blue-700 transition">Artigos</a>
                     <a href="#contact" class="px-3 py-2 rounded hover:bg-blue-700 transition">Contato</a>
                 </nav>
             </div>
@@ -254,8 +255,43 @@
         </div>
     </section>
 
+    <!-- Articles Section -->
+    <section id="articles" class="py-16 bg-gray-100">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Artigos e Conteúdos</h2>
+                <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
+                <p class="text-gray-600 max-w-2xl mx-auto">Acesse nossos artigos e conteúdos exclusivos sobre tecnologia e inovação</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Article cards would go here -->
+                <div class="bg-white rounded-lg shadow-md overflow-hidden">
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Tendências em IA para 2024</h3>
+                        <p class="text-gray-600 mb-4">Descubra as principais tendências em Inteligência Artificial que vão impactar os negócios no próximo ano.</p>
+                        <a href="#" class="text-blue-600 hover:underline">Ler mais →</a>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow-md overflow-hidden">
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Como automatizar seu negócio</h3>
+                        <p class="text-gray-600 mb-4">Guia prático para implementar automações que aumentam a produtividade da sua empresa.</p>
+                        <a href="#" class="text-blue-600 hover:underline">Ler mais →</a>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow-md overflow-hidden">
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Segurança digital para PMEs</h3>
+                        <p class="text-gray-600 mb-4">Proteja sua empresa com essas dicas essenciais de segurança digital.</p>
+                        <a href="#" class="text-blue-600 hover:underline">Ler mais →</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <!-- About Section -->
-    <section id="about" class="py-16 bg-gray-100">
+    <section id="about" class="py-16 bg-white">
         <div class="container mx-auto px-6">
             <div class="flex flex-col md:flex-row items-center">
                 <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
@@ -269,7 +305,7 @@
                         A PixelCTech é uma equipe de especialistas em tecnologia comprometidos em oferecer soluções digitais inovadoras para empresas de todos os tamanhos.
                     </p>
                     <p class="text-gray-600 mb-6">
-                        Combinamos expertise técnica com criatividade para desenvolver produtos que realmente fazem a diferença no seu negócio, aumentando eficiência, reduzindo custos e melhorando a experiência do cliente.
+                        Combinamos expertise técnica with criatividade para desenvolver produtos que realmente fazem a diferença no seu negócio, aumentando eficiência, reduzindo custos e melhorando a experiência do cliente.
                     </p>
                     <div class="flex flex-wrap gap-4">
                         <div class="flex items-center bg-white px-4 py-2 rounded-full shadow-sm">
@@ -302,7 +338,7 @@
     </section>
 
     <!-- Contact Section -->
-    <section id="contact" class="py-16 bg-white">
+    <section id="contact" class="py-16 bg-gray-100">
         <div class="container mx-auto px-6">
             <div class="text-center mb-16">
                 <h2 class="text-3xl font-bold text-gray-800 mb-4">Entre em Contato</h2>
@@ -312,18 +348,18 @@
 
             <div class="flex flex-col md:flex-row gap-10">
                 <div class="md:w-1/2">
-                    <form class="space-y-6">
+                    <form class="space-y-6" onsubmit="event.preventDefault(); sendEmail();">
                         <div>
                             <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-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                         </div>
                         <div>
                             <label for="email" class="block text-gray-700 font-medium mb-2">E-mail</label>
-                            <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                         </div>
                         <div>
                             <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-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
+                            <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required></textarea>
                         </div>
                         <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-md transition duration-300">
                             Enviar Mensagem
@@ -331,7 +367,7 @@
                     </form>
                 </div>
                 <div class="md:w-1/2">
-                    <div class="bg-gray-100 p-8 rounded-lg h-full">
+                    <div class="bg-white p-8 rounded-lg h-full">
                         <h3 class="text-xl font-semibold text-gray-800 mb-6">Informações de Contato</h3>
                         <div class="space-y-6">
                             <div class="flex items-start">
@@ -339,8 +375,10 @@
                                     <i class="fas fa-map-marker-alt text-blue-600"></i>
                                 </div>
                                 <div>
-                                    <h4 class="font-medium text-gray-800">Endereço</h4>
+                                    <h4 class="font-medium text-gray-800">Endereço (Matriz)</h4>
                                     <p class="text-gray-600">Rua Para N52, Chácara Brasil - Turu<br>São Luís - MA</p>
+                                    <h4 class="font-medium text-gray-800 mt-4">Endereço (Filial)</h4>
+                                    <p class="text-gray-600">Rua Nicarágua, N22 - Anjo da Guarda<br>São Luís - MA</p>
                                 </div>
                             </div>
                             <div class="flex items-start">
@@ -392,8 +430,12 @@
                     <h4 class="text-lg font-semibold mb-4">Serviços</h4>
                     <ul class="space-y-2">
                         <li><a href="#" class="text-gray-400 hover:text-white transition">Aplicações com IA</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Desenvolvimento Web</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Automações com IA</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Certificado Digital</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Chatbots Inteligentes</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white transition">Design Gráfico</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Desenvolvimento Web</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Gestão de Redes Sociais</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white transition">Redes de Computadores</a></li>
                         <li><a href="#" class="text-gray-400 hover:text-white transition">Treinamentos</a></li>
                     </ul>
@@ -403,8 +445,8 @@
                     <ul class="space-y-2">
                         <li><a href="#services" class="text-gray-400 hover:text-white transition">Serviços</a></li>
                         <li><a href="#about" class="text-gray-400 hover:text-white transition">Sobre Nós</a></li>
+                        <li><a href="#articles" class="text-gray-400 hover:text-white transition">Artigos</a></li>
                         <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contato</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
                     </ul>
                 </div>
                 <div>
@@ -417,7 +459,7 @@
                 </div>
             </div>
             <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
-                <p class="text-gray-400 mb-4 md:mb-0">© 2023 PixelCTech. Todos os direitos reservados.</p>
+                <p class="text-gray-400 mb-4 md:mb-0">�� 2012 - 2025 PixelCTech. Todos os direitos reservados.</p>
                 <div class="flex space-x-6">
                     <a href="#" class="text-gray-400 hover:text-white transition">Termos de Serviço</a>
                     <a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a>
@@ -463,7 +505,7 @@
                     
                     <div class="mt-8 bg-blue-50 p-4 rounded-lg">
                         <h4 class="font-semibold text-blue-800 mb-2">Como funciona?</h4>
-                        <p>Nossa equipe de especialistas em IA trabalha em estreita colaboração com você para entender suas necessidades específicas e desenvolver uma solução sob medida que atenda aos seus objetivos de negócios.</p>
+                        <p>Nossa equipe de especialistas em IA trabalha em estreita colaboração com você para entender suas necessidades específicas and desenvolver uma solução sob medida que atenda aos seus objetivos de negócios.</p>
                     </div>
                 </div>
                 <div class="mt-8 flex justify-end">
@@ -592,7 +634,7 @@
                         <li>Atendimento automático a perguntas frequentes</li>
                         <li>Agendamento de serviços e consultas</li>
                         <li>Processamento de pedidos e vendas</li>
-                        <li>Triagem de leads e qualificação</li>
+                        <li>Triagem de leads and qualificação</li>
                         <li>Integração com CRM e sistemas internos</li>
                         <li>Suporte multilíngue</li>
                     </ul>
@@ -652,7 +694,7 @@
                         <li>Aumento do reconhecimento da marca</li>
                         <li>Conteúdo otimizado para cada plataforma</li>
                         <li>Materiais que convertem e engajam</li>
-                        <li>Processo criativo colaborativo</li>
+                        <li>Processo creativo colaborativo</li>
                     </ul>
                     
                     <div class="mt-8 bg-red-50 p-4 rounded-lg">
@@ -714,7 +756,7 @@
                     
                     <div class="mt-8 bg-indigo-50 p-4 rounded-lg">
                         <h4 class="font-semibold text-indigo-800 mb-2">Metodologia:</h4>
-                        <p>Trabalhamos com metodologias ágeis para garantir que seu projeto seja entregue no prazo, dentro do orçamento e com a mais alta qualidade, desde o planejamento até a implementação e lançamento.</p>
+                        <p>Trabalhamos com metodologias ágeis para garantir que seu projeto seja entregue no prazo, dentro do orçamento and com a mais alta qualidade, desde o planejamento até a implementação e lançamento.</p>
                     </div>
                 </div>
                 <div class="mt-8 flex justify-end">
@@ -886,7 +928,7 @@
                     
                     <div class="mt-8 bg-orange-50 p-4 rounded-lg">
                         <h4 class="font-semibold text-orange-800 mb-2">Formato dos treinamentos:</h4>
-                        <p>Oferecemos treinamentos presenciais e online, com turmas abertas ou in company, adaptados às necessidades específicas da sua equipe. Desenvolvemos programas desde introdução até níveis avançados, com carga horária flexível.</p>
+                        <p>Oferecemos treinamentos presenciais e online, with turmas abertas ou in company, adaptados às necessidades específicas da sua equipe. Desenvolvemos programas desde introdução até níveis avançados, com carga horária flexível.</p>
                     </div>
                 </div>
                 <div class="mt-8 flex justify-end">
@@ -941,6 +983,26 @@
                 }
             });
         });
+
+        // Email sending function
+        function sendEmail() {
+            const name = document.getElementById('name').value;
+            const email = document.getElementById('email').value;
+            const message = document.getElementById('message').value;
+            
+            const subject = `Contato via site de ${name}`;
+            const body = `Nome: ${name}%0D%0AEmail: ${email}%0D%0A%0D%0AMensagem:%0D%0A${message}`;
+            
+            window.location.href = `mailto:[email protected]?subject=${subject}&body=${body}`;
+            
+            // Show success message
+            alert('Mensagem enviada com sucesso! Entraremos em contato em breve.');
+            
+            // Clear form
+            document.getElementById('name').value = '';
+            document.getElementById('email').value = '';
+            document.getElementById('message').value = '';
+        }
     </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=marcospaiva/lab" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>