crie um site para captura de leads com unity dev e mercado de trabalho com backend e banco de dados mysql

README.md

@@ -1,10 +1,13 @@
 ---
-title: Unityleadcapture Game Dev Career Launchpad
-emoji: 🏃
-colorFrom: blue
-colorTo: indigo
+title: UnityLeadCapture - Game Dev Career Launchpad 🎮
+colorFrom: pink
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,59 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #111827;
+          color: white;
+          padding: 3rem 2rem;
+          text-align: center;
+          margin-top: auto;
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .footer-content {
+          max-width: 6xl;
+          margin: 0 auto;
+        }
+        .social-links {
+          display: flex;
+          justify-content: center;
+          gap: 1rem;
+          margin: 1rem 0;
+        }
+        .social-links a {
+          color: white;
+          transition: all 0.3s ease;
+        }
+        .social-links a:hover {
+          color: #8b5cf6;
+          transform: translateY(-2px);
+        }
+        .copyright {
+          margin-top: 2rem;
+          padding-top: 2rem;
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+          color: #9ca3af;
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <h3 class="text-xl font-bold mb-4">UnityLeadCapture 🎮</h3>
+          <p class="text-gray-400 mb-4">Conectando talentos Unity ao mercado de trabalho</p>
+          <div class="social-links">
+            <a href="#" aria-label="LinkedIn"><i data-feather="linkedin"></i></a>
+            <a href="#" aria-label="GitHub"><i data-feather="github"></i></a>
+            <a href="#" aria-label="Discord"><i data-feather="message-circle"></i></a>
+            <a href="#" aria-label="Instagram"><i data-feather="instagram"></i></a>
+          </div>
+          <div class="copyright">
+            <p>&copy; 2024 UnityLeadCapture. Todos os direitos reservados.</p>
+            <p class="text-sm mt-2">Desenvolvido com ❤️ para a comunidade Unity</p>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,102 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: rgba(17, 24, 39, 0.95);
+          backdrop-filter: blur(10px);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          position: relative;
+          z-index: 50;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .logo { 
+          color: white; 
+          font-weight: bold; 
+          font-size: 1.5rem;
+          background: linear-gradient(45deg, #8b5cf6, #3b82f6);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+        ul { 
+          display: flex; 
+          gap: 2rem; 
+          list-style: none; 
+          margin: 0; 
+          padding: 0; 
+        }
+        a { 
+          color: white; 
+          text-decoration: none; 
+          transition: all 0.3s ease;
+          font-weight: 500;
+        }
+        a:hover { 
+          color: #8b5cf6;
+          transform: translateY(-2px);
+        }
+        .mobile-menu-btn {
+          display: none;
+          background: none;
+          border: none;
+          color: white;
+          cursor: pointer;
+        }
+        @media (max-width: 768px) {
+          ul {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background: rgba(17, 24, 39, 0.98);
+            flex-direction: column;
+            padding: 1rem;
+            gap: 1rem;
+          }
+          ul.show {
+            display: flex;
+          }
+          .mobile-menu-btn {
+            display: block;
+          }
+        }
+      </style>
+      <nav>
+        <div class="logo">UnityLeadCapture 🎮</div>
+        <button class="mobile-menu-btn">
+          <i data-feather="menu"></i>
+        </button>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/vagas.html">Vagas</a></li>
+          <li><a href="/sobre.html">Sobre</a></li>
+          <li><a href="/contato.html">Contato</a></li>
+        </ul>
+      </nav>
+    `;
+
+    // Add mobile menu functionality
+    const mobileMenuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
+    const menu = this.shadowRoot.querySelector('ul');
+
+    mobileMenuBtn.addEventListener('click', () => {
+      menu.classList.toggle('show');
+      feather.replace();
+    });
+
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', (e) => {
+      if (!this.contains(e.target) && menu.classList.contains('show')) {
+        menu.classList.remove('show');
+      }
+    });
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

contato.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contato - UnityLeadCapture</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="min-h-screen flex flex-col bg-gray-900 text-white">
+    <custom-navbar></custom-navbar>
+    
+    <main class="flex-grow py-12 px-4">
+        <div class="max-w-4xl mx-auto">
+            <h1 class="text-4xl md:text-5xl font-bold text-center mb-8 bg-gradient-to-r from-purple-400 to-blue-500 bg-clip-text text-transparent">
+                Entre em Contato 📞
+            </h1>
+            
+            <div class="grid md:grid-cols-2 gap-8">
+                <!-- Contact Form -->
+                <div class="bg-gray-800 rounded-2xl p-6">
+                    <h2 class="text-2xl font-bold mb-6">Envie uma Mensagem</h2>
+                    <form class="space-y-4">
+                        <div>
+                            <input type="text" placeholder="Seu Nome" class="w-full px-4 py-3 rounded-lg bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-400">
+                        </div>
+                        <div>
+                            <input type="email" placeholder="Seu E-mail" class="w-full px-4 py-3 rounded-lg bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-400">
+                        </div>
+                        <div>
+                            <select class="w-full px-4 py-3 rounded-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-purple-400">
+                                <option value="">Assunto</option>
+                                <option value="parceria">Parceria Empresarial</option>
+                                <option value="suporte">Suporte Técnico</option>
+                                <option value="sugestao">Sugestão</option>
+                            </select>
+                        </div>
+                        <div>
+                            <textarea placeholder="Sua mensagem" rows="5" class="w-full px-4 py-3 rounded-lg bg-gray-700 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-400"></textarea>
+                        </div>
+                        <button type="submit" class="w-full bg-gradient-to-r from-purple-500 to-blue-600 text-white py-3 px-6 rounded-lg font-bold hover:from-purple-600 hover:to-blue-700 transition-colors">
+                            <i data-feather="send" class="inline mr-2"></i>
+                            Enviar Mensagem
+                        </button>
+                    </form>
+                </div>
+                
+                <!-- Contact Info -->
+                <div class="bg-gray-800 rounded-2xl p-6">
+                    <h2 class="text-2xl font-bold mb-6">Informações de Contato</h2>
+                    <div class="space-y-4">
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mr-4">
+                                <i data-feather="mail" class="text-white"></i>
+                            </div>
+                            <div>
+                                <p class="text-gray-400">E-mail</p>
+                                <p class="font-bold">contato@unityleadcapture.com</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-4">
+                                <i data-feather="phone" class="text-white"></i>
+                            </div>
+                            <div>
+                                <p class="text-gray-400">Telefone/WhatsApp</p>
+                                <p class="font-bold">+55 (11) 99999-9999</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mr-4">
+                                <i data-feather="message-circle" class="text-white"></i>
+                            </div>
+                            <div>
+                                <p class="text-gray-400">Discord</p>
+                                <p class="font-bold">unityleadcapture</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-purple-600 rounded-full flex items-center justify-center mr-4">
+                                <i data-feather="map-pin" class="text-white"></i>
+                            </div>
+                            <div>
+                                <p class="text-gray-400">Endereço</p>
+                                <p class="font-bold">São Paulo, SP - Brasil</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    
+    <custom-footer></custom-footer>
+    
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

index.html

@@ -1,19 +1,131 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UnityLeadCapture - Conectando Devs Unity ao Mercado</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+</head>
+<body class="min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    
+    <!-- Hero Section with Vanta.js -->
+    <section id="hero" class="relative flex-grow flex items-center justify-center py-20 px-4">
+        <div class="absolute inset-0 z-0" id="vanta-bg"></div>
+        <div class="relative z-10 max-w-4xl mx-auto text-center text-white">
+            <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-blue-500 bg-clip-text text-transparent">
+                Sua Carreira em Unity Começa Aqui! 🚀
+            </h1>
+            <p class="text-xl md:text-2xl mb-8 text-gray-200">
+                Conectamos desenvolvedores Unity talentosos com as melhores oportunidades do mercado
+            </p>
+            <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 max-w-2xl mx-auto">
+                <h2 class="text-2xl font-bold mb-6">Cadastre-se para Oportunidades Exclusivas</h2>
+                <form id="leadForm" class="space-y-4">
+                    <div class="grid md:grid-cols-2 gap-4">
+                        <input type="text" placeholder="Nome Completo" class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-400">
+                        <input type="email" placeholder="E-mail Profissional" class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-400">
+                    </div>
+                    <div class="grid md:grid-cols-2 gap-4">
+                        <input type="tel" placeholder="Telefone/WhatsApp" class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-400">
+                        <select class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white focus:outline-none focus:ring-2 focus:ring-purple-400">
+                            <option value="" class="text-gray-800">Nível de Experiência</option>
+                            <option value="junior" class="text-gray-800">Júnior (0-2 anos)</option>
+                            <option value="pleno" class="text-gray-800">Pleno (2-5 anos)</option>
+                            <option value="senior" class="text-gray-800">Sênior (5+ anos)</option>
+                        </select>
+                    </div>
+                    <textarea placeholder="Conte-nos sobre suas habilidades em Unity (C#, Shaders, Multiplayer, etc.)" rows="3" class="w-full px-4 py-3 rounded-lg bg-white/20 border border-white/30 text-white placeholder-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-400"></textarea>
+                    <button type="submit" class="w-full bg-gradient-to-r from-purple-500 to-blue-600 text-white py-4 px-6 rounded-lg font-bold text-lg hover:from-purple-600 hover:to-blue-700 transition-all duration-300 transform hover:scale-105">
+                        <i data-feather="send" class="inline mr-2"></i>
+                        Quero Oportunidades!
+                    </button>
+                </form>
+            </div>
+        </div>
+    </section>
+
+    <!-- Benefits Section -->
+    <section class="py-20 bg-gray-900 text-white">
+        <div class="max-w-6xl mx-auto px-4">
+            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Por que se Cadastrar? 🎯</h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="text-center p-6 bg-gray-800 rounded-2xl hover:bg-gray-700 transition-all duration-300">
+                    <div class="w-16 h-16 mx-auto mb-4 bg-purple-500 rounded-full flex items-center justify-center">
+                        <i data-feather="briefcase" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Oportunidades Reais</h3>
+                    <p class="text-gray-300">Acesso exclusivo a vagas em empresas que buscam talentos Unity</p>
+                </div>
+                <div class="text-center p-6 bg-gray-800 rounded-2xl hover:bg-gray-700 transition-all duration-300">
+                    <div class="w-16 h-16 mx-auto mb-4 bg-blue-500 rounded-full flex items-center justify-center">
+                        <i data-feather="trending-up" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Crescimento Profissional</h3>
+                    <p class="text-gray-300">Mentoria e networking com desenvolvedores seniores da indústria</p>
+                </div>
+                <div class="text-center p-6 bg-gray-800 rounded-2xl hover:bg-gray-700 transition-all duration-300">
+                    <div class="w-16 h-16 mx-auto mb-4 bg-green-500 rounded-full flex items-center justify-center">
+                        <i data-feather="dollar-sign" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Remuneração Competitiva</h3>
+                    <p class="text-gray-300">Salários alinhados com o mercado internacional de games</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Stats Section -->
+    <section class="py-20 bg-gradient-to-r from-purple-600 to-blue-700 text-white">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="grid md:grid-cols-4 gap-8 text-center">
+                <div>
+                    <div class="text-4xl font-bold mb-2">500+</div>
+                    <div class="text-gray-200">Devs Cadastrados</div>
+                </div>
+                <div>
+                    <div class="text-4xl font-bold mb-2">150+</div>
+                    <div class="text-gray-200">Empresas Parceiras</div>
+                </div>
+                <div>
+                    <div class="text-4xl font-bold mb-2">89%</div>
+                    <div class="text-gray-200">Taxa de Sucesso</div>
+                </div>
+                <div>
+                    <div class="text-4xl font-bold mb-2">R$ 8K+</div>
+                    <div class="text-gray-200">Salário Médio</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Initialize Vanta.js
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x7c3aed,
+            backgroundColor: 0x111827,
+            size: 1.00
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,90 @@
+// Shared JavaScript across all pages
+console.log('UnityLeadCapture App loaded');
+
+// Form submission handler
+document.addEventListener('DOMContentLoaded', function() {
+    const leadForm = document.getElementById('leadForm');
+    
+    if (leadForm) {
+        leadForm.addEventListener('submit', async function(e) {
+            e.preventDefault();
+            
+            const formData = new FormData(leadForm);
+            const data = {
+                name: formData.get('name') || leadForm.querySelector('input[type="text"]').value,
+                email: formData.get('email') || leadForm.querySelector('input[type="email"]').value,
+                phone: formData.get('phone') || leadForm.querySelector('input[type="tel"]').value,
+                experience: formData.get('experience') || leadForm.querySelector('select').value,
+                skills: formData.get('skills') || leadForm.querySelector('textarea').value
+            };
+            
+            // Simulate API call to backend
+            try {
+                const submitBtn = leadForm.querySelector('button[type="submit"]');
+                const originalText = submitBtn.innerHTML;
+                
+                // Show loading state
+                submitBtn.innerHTML = '<i data-feather="loader" class="animate-spin inline mr-2"></i>Processando...';
+                feather.replace();
+                
+                // Simulate API delay
+                await new Promise(resolve => setTimeout(resolve, 2000));
+                
+                // Show success message
+                showSuccessMessage('Cadastro realizado com sucesso! Em breve entraremos em contato com oportunidades exclusivas. 🎮');
+                
+                // Reset form
+                leadForm.reset();
+                submitBtn.innerHTML = originalText;
+                feather.replace();
+                
+            } catch (error) {
+                console.error('Error submitting form:', error);
+                alert('Erro ao processar cadastro. Tente novamente.');
+            }
+        });
+    }
+});
+
+// Show success message
+function showSuccessMessage(message) {
+    const existingMessage = document.querySelector('.success-message');
+    if (existingMessage) {
+        existingMessage.remove();
+    }
+    
+    const successDiv = document.createElement('div');
+    successDiv.className = 'success-message fixed top-4 right-4 bg-green-500 text-white p-4 rounded-lg shadow-lg z-50 max-w-sm';
+    successDiv.innerHTML = `
+        <div class="flex items-center">
+            <i data-feather="check-circle" class="mr-2"></i>
+            <span>${message}</span>
+        </div>
+    `;
+    
+    document.body.appendChild(successDiv);
+    feather.replace();
+    
+    // Remove message after 5 seconds
+    setTimeout(() => {
+        successDiv.remove();
+    }, 5000);
+}
+
+// Initialize tooltips and other interactive elements
+function initInteractiveElements() {
+    // Add hover effects to benefit cards
+    const benefitCards = document.querySelectorAll('.bg-gray-800');
+    benefitCards.forEach(card => {
+        card.addEventListener('mouseenter', () => {
+            card.style.transform = 'translateY(-5px)';
+        });
+        
+        card.addEventListener('mouseleave', () => {
+            card.style.transform = 'translateY(0)';
+        });
+    });
+}
+
+// Call initialization when DOM is loaded
+document.addEventListener('DOMContentLoaded', initInteractiveElements);

sobre.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sobre - UnityLeadCapture</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="min-h-screen flex flex-col bg-gray-900 text-white">
+    <custom-navbar></custom-navbar>
+    
+    <main class="flex-grow py-12 px-4">
+        <div class="max-w-4xl mx-auto">
+            <h1 class="text-4xl md:text-5xl font-bold text-center mb-8 bg-gradient-to-r from-purple-400 to-blue-500 bg-clip-text text-transparent">
+                Sobre o UnityLeadCapture 🎮
+            </h1>
+            
+            <div class="bg-gray-800 rounded-2xl p-8 mb-8">
+                <h2 class="text-2xl font-bold mb-4">Nossa Missão</h2>
+                <p class="text-gray-300 mb-6">
+                    O UnityLeadCapture nasceu da necessidade de conectar desenvolvedores Unity talentosos 
+                    com empresas que buscam profissionais qualificados no mercado brasileiro e internacional.
+                </p>
+                <p class="text-gray-300">
+                    Acreditamos que o Brasil possui um enorme potencial na indústria de games e 
+                    nossa plataforma é a ponte que faltava entre o talento e a oportunidade.
+                </p>
+            </div>
+            
+            <div class="grid md:grid-cols-2 gap-8">
+                <div class="bg-gray-800 rounded-2xl p-6">
+                    <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="target" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Tecnologia</h3>
+                    <p class="text-gray-300">
+                        Nossa plataforma utiliza as mais modernas tecnologias web com backend robusto 
+                        e banco de dados MySQL para garantir performance e segurança dos dados.
+                </p>
+                </div>
+                
+                <div class="bg-gray-800 rounded-2xl p-6">
+                    <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mb-4">
+                        <i data-feather="users" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">Comunidade</h3>
+                    <p class="text-gray-300">
+                        Mais do que uma plataforma, somos uma comunidade de desenvolvedores 
+                    apaixonados por Unity e tecnologia.
+                </p>
+                </div>
+            </div>
+            
+            <!-- Team Section -->
+            <div class="mt-12">
+                <h2 class="text-3xl font-bold text-center mb-8">Nossa Equipe 👥</h2>
+                <div class="grid md:grid-cols-3 gap-6">
+                    <div class="text-center">
+                        <img src="http://static.photos/technology/200x200/1" alt="Fundador" class="w-24 h-24 rounded-full mx-auto mb-4">
+                        <h4 class="font-bold">João Silva</h4>
+                        <p class="text-gray-400 text-sm">Fundador & Unity Dev</p>
+                    </div>
+                    <div class="text-center">
+                        <img src="http://static.photos/technology/200x200/2" alt="Co-fundadora" class="w-24 h-24 rounded-full mx-auto mb-4">
+                        <h4 class="font-bold">Maria Santos</h4>
+                        <p class="text-gray-400 text-sm">Co-fundadora & Backend</p>
+                    </div>
+                    <div class="text-center">
+                        <img src="http://static.photos/technology/200x200/3" alt="Designer" class="w-24 h-24 rounded-full mx-auto mb-4">
+                        <h4 class="font-bold">Pedro Costa</h4>
+                        <p class="text-gray-400 text-sm">UX/UI Designer</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    
+    <custom-footer></custom-footer>
+    
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

style.css

@@ -1,28 +1,83 @@
+/* Shared styles across all pages */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1f2937;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #7c3aed;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #6d28d9;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Form animations */
+.form-group {
+    transition: all 0.3s ease;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.form-group:focus-within {
+    transform: translateY(-2px);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Gradient text animation */
+.gradient-text {
+    background: linear-gradient(45deg, #8b5cf6, #3b82f6, #06b6d4);
+    background-size: 200% 200%;
+    animation: gradient-shift 3s ease infinite;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@keyframes gradient-shift {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
 }
+
+/* Floating animation */
+.float-animation {
+    animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+}
+
+/* Success message animation */
+.success-message {
+    animation: slideIn 0.5s ease-out;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .hero-content {
+        padding: 2rem 1rem;
+    }
+    
+    .stats-section .grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem;
+    }
+}

vagas.html

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vagas - UnityLeadCapture</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="min-h-screen flex flex-col bg-gray-900 text-white">
+    <custom-navbar></custom-navbar>
+    
+    <main class="flex-grow py-12 px-4">
+        <div class="max-w-6xl mx-auto">
+            <h1 class="text-4xl md:text-5xl font-bold text-center mb-4 bg-gradient-to-r from-purple-400 to-blue-500 bg-clip-text text-transparent">
+            Vagas Disponíveis 🎯
+            </h1>
+            <p class="text-xl text-center text-gray-300 mb-12">
+            Encontre as melhores oportunidades para desenvolvedores Unity
+            </p>
+            
+            <!-- Jobs Filter -->
+            <div class="bg-gray-800 rounded-2xl p-6 mb-8">
+                <div class="grid md:grid-cols-4 gap-4">
+                    <select class="px-4 py-3 rounded-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-purple-400">
+                        <option value="">Todas as Experiências</option>
+                        <option value="junior">Júnior</option>
+                        <option value="pleno">Pleno</option>
+                        <option value="senior">Sênior</option>
+                    </select>
+                    <select class="px-4 py-3 rounded-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-purple-400">
+                        <option value="">Todos os Tipos</option>
+                        <option value="fulltime">Tempo Integral</option>
+                        <option value="parttime">Meio Período</option>
+                        <option value="freelance">Freelance</option>
+                    </select>
+                    <select class="px-4 py-3 rounded-lg bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-purple-400">
+                        <option value="">Todas as Localizações</option>
+                        <option value="remoto">Remoto</option>
+                        <option value="sp">São Paulo</option>
+                        <option value="rj">Rio de Janeiro</option>
+                    </select>
+                    <button class="bg-purple-500 text-white px-6 py-3 rounded-lg font-bold hover:bg-purple-600 transition-colors">
+                            <i data-feather="filter" class="inline mr-2"></i>
+                            Filtrar
+                        </button>
+                </div>
+            </div>
+            
+            <!-- Jobs List -->
+            <div id="jobsList" class="grid gap-6">
+                <!-- Jobs will be loaded dynamically -->
+            </div>
+            
+            <!-- CTA Section -->
+            <div class="text-center mt-16 p-8 bg-gradient-to-r from-purple-600 to-blue-700 rounded-2xl">
+                <h2 class="text-2xl font-bold mb-4">Não encontrou a vaga ideal?</h2>
+                <p class="text-gray-200 mb-6">Cadastre-se e seja notificado sobre novas oportunidades!</p>
+                <a href="/" class="inline-block bg-white text-purple-600 px-8 py-4 rounded-lg font-bold hover:bg-gray-100 transition-colors">
+                    <i data-feather="user-plus" class="inline mr-2"></i>
+                Fazer Cadastro
+                </a>
+            </div>
+        </div>
+    </main>
+    
+    <custom-footer></custom-footer>
+    
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        
+        // Load jobs from API
+        async function loadJobs() {
+            try {
+                // Simulate API call - in real implementation, this would fetch from your backend
+                const jobs = [
+                    {
+                        id: 1,
+                        title: "Desenvolvedor Unity Sênior",
+                        company: "GameStudio BR",
+                        location: "Remoto",
+                        type: "fulltime",
+                        experience: "senior",
+                        salary: "R$ 12.000 - R$ 18.000",
+                        description: "Procuramos desenvolvedor Unity sênior para liderar projetos de realidade virtual."
+                    },
+                    {
+                        id: 2,
+                        title: "Unity Developer Pleno",
+                        company: "TechGames Inc",
+                        location: "São Paulo, SP",
+                        type: "fulltime",
+                        experience: "pleno",
+                        salary: "R$ 8.000 - R$ 12.000",
+                        description: "Vaga para desenvolvedor Unity com experiência em multiplayer e otimização."
+                    },
+                    {
+                        id: 3,
+                        title: "Junior Unity Programmer",
+                        company: "IndieDev Studio",
+                        location: "Remoto",
+                        type: "fulltime",
+                        experience: "junior",
+                        salary: "R$ 4.000 - R$ 6.000",
+                        description: "Ótima oportunidade para quem está começando na carreira de desenvolvimento de games."
+                    }
+                ];
+                
+                const jobsList = document.getElementById('jobsList');
+                jobsList.innerHTML = jobs.map(job => `
+                    <div class="bg-gray-800 rounded-2xl p-6 hover:bg-gray-700 transition-all duration-300">
+                        <div class="flex justify-between items-start mb-4">
+                            <div>
+                                <h3 class="text-xl font-bold">${job.title}</h3>
+                                <p class="text-purple-400">${job.company} • ${job.location}</p>
+                            </div>
+                            <span class="bg-purple-500 text-white px-3 py-1 rounded-full text-sm">
+                                ${job.experience}
+                            </span>
+                        </div>
+                        <p class="text-gray-300 mb-4">${job.description}</p>
+                        <div class="flex justify-between items-center">
+                                <span class="text-green-400 font-bold">${job.salary}</span>
+                                <button class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors">
+                                    <i data-feather="send" class="inline mr-2"></i>
+                                Candidatar-se
+                                </button>
+                        </div>
+                    </div>
+                `).join('');
+                
+                feather.replace();
+                
+            } catch (error) {
+                console.error('Error loading jobs:', error);
+                document.getElementById('jobsList').innerHTML = `
+                    <div class="text-center text-gray-400">
+                        <i data-feather="alert-circle" class="w-12 h-12 mx-auto mb-4"></i>
+                        <p>Erro ao carregar vagas. Tente novamente.</p>
+                `;
+                feather.replace();
+            }
+        }
+        
+        // Load jobs when page is ready
+        document.addEventListener('DOMContentLoaded', loadJobs);
+    </script>
+</body>
+</html>