Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TalentHUB - Plataforma de Recrutamento Inteligente</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: '#0A3622', | |
| secondary: '#D4AF37', | |
| accent: '#FF7F50', | |
| dark: '#3C4048', | |
| light: '#F5F5F5', | |
| info: '#17505C' | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #0A3622 0%, #17505C 100%); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.02); | |
| } | |
| .pricing-card:hover { | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .nav-link:hover { | |
| color: #D4AF37; | |
| } | |
| .loading-spinner { | |
| border: 4px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| border-top: 4px solid #D4AF37; | |
| width: 30px; | |
| height: 30px; | |
| animation: spin 1s linear infinite; | |
| margin: 20px auto; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-light"> | |
| <!-- Header/Navigation --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-20 items-center"> | |
| <div class="flex items-center"> | |
| <a href="#" class="flex items-center"> | |
| <i class="fas fa-network-wired text-secondary text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-primary">Talent<span class="text-secondary">HUB</span></span> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#features" class="nav-link text-dark hover:text-secondary font-medium">Recursos</a> | |
| <a href="#how-it-works" class="nav-link text-dark hover:text-secondary font-medium">Como Funciona</a> | |
| <a href="#pricing" class="nav-link text-dark hover:text-secondary font-medium">Planos</a> | |
| <a href="#testimonials" class="nav-link text-dark hover:text-secondary font-medium">Depoimentos</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="px-4 py-2 text-primary font-medium rounded-md hover:text-secondary transition-colors"> | |
| Entrar | |
| </a> | |
| <a href="#" class="px-4 py-2 bg-accent text-white font-medium rounded-md hover:bg-opacity-90 transition-colors"> | |
| Cadastre-se | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32"> | |
| <div class="md:flex 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">Recrutamento Inteligente <br> <span class="text-secondary">Impulsionado por IA</span></h1> | |
| <p class="text-xl mb-8 opacity-90">Conectamos os melhores talentos às empresas mais inovadoras através de matching inteligente e automação avançada.</p> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" class="px-6 py-3 bg-secondary text-primary font-semibold rounded-md hover:bg-opacity-90 transition-colors text-center"> | |
| Quero Contratar | |
| </a> | |
| <a href="#" class="px-6 py-3 border-2 border-white text-white font-semibold rounded-md hover:bg-white hover:text-primary transition-colors text-center"> | |
| Busco Oportunidades | |
| </a> | |
| </div> | |
| <div class="mt-8 flex items-center"> | |
| <div class="flex -space-x-2"> | |
| <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User 1"> | |
| <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 2"> | |
| <img class="w-10 h-10 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User 3"> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm"><span class="font-semibold">+5.000</span> profissionais e empresas já usam nossa plataforma</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-10"> | |
| <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl p-2 border border-white border-opacity-20 shadow-xl"> | |
| <div id="hero-image" class="rounded-lg shadow-md overflow-hidden"> | |
| <div class="loading-spinner"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-light"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-secondary bg-secondary bg-opacity-10 rounded-full mb-3">TECNOLOGIA AVANÇADA</span> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Recrutamento Inteligente e Eficiente</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Nossa plataforma utiliza IA para conectar os talentos certos às oportunidades certas</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow transition-all duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center text-primary text-2xl mb-4"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-dark">Matching Inteligente</h3> | |
| <p class="text-gray-600">Nossa IA analisa perfis e vagas para fazer as melhores conexões, aumentando em 3x a eficiência do recrutamento.</p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow transition-all duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center text-primary text-2xl mb-4"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-dark">Formatação de Currículo por IA</h3> | |
| <p class="text-gray-600">Transforme seu currículo em um documento profissional com nossa ferramenta de formatação inteligente.</p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow transition-all duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center text-primary text-2xl mb-4"> | |
| <i class="fas fa-chart-pie"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-dark">Teste DISC</h3> | |
| <p class="text-gray-600">Avaliação comportamental que ajuda empresas a encontrar candidatos com o fit cultural ideal.</p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow transition-all duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center text-primary text-2xl mb-4"> | |
| <i class="fas fa-calendar-check"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-dark">Agendamento Inteligente</h3> | |
| <p class="text-gray-600">Integração com Google Agenda para agendamento automático de entrevistas, eliminando idas e vindas de emails.</p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow transition-all duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center text-primary text-2xl mb-4"> | |
| <i class="fas fa-bell"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-dark">Notificações Multiplataforma</h3> | |
| <p class="text-gray-600">Receba atualizações por email e WhatsApp sobre novas vagas, candidaturas e etapas do processo.</p> | |
| </div> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow transition-all duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center text-primary text-2xl mb-4"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-dark">Relatórios Avançados</h3> | |
| <p class="text-gray-600">Dashboard completo com métricas de recrutamento para empresas e acompanhamento para candidatos.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-secondary bg-secondary bg-opacity-10 rounded-full mb-3">FUNCIONAMENTO</span> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Como a TalentHUB Transforma o Recrutamento</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Um processo simples e eficiente para ambos os lados</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <div class="flex items-start mb-8"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-lg p-3 mr-4"> | |
| <span class="text-primary font-bold text-xl">1</span> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2 text-dark">Cadastro Inteligente</h3> | |
| <p class="text-gray-600">Candidatos criam perfis ricos com currículos otimizados por IA. Empresas publicam vagas com requisitos detalhados.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-8"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-lg p-3 mr-4"> | |
| <span class="text-primary font-bold text-xl">2</span> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2 text-dark">Análise e Matching</h3> | |
| <p class="text-gray-600">Nossa IA analisa habilidades, experiências e fit cultural para sugerir os melhores matches entre candidatos e vagas.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-lg p-3 mr-4"> | |
| <span class="text-primary font-bold text-xl">3</span> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2 text-dark">Processo Otimizado</h3> | |
| <p class="text-gray-600">Comunicação direta, agendamento automático de entrevistas e acompanhamento em tempo real de todas as etapas.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-light rounded-xl p-4 shadow-inner"> | |
| <div id="process-image" class="rounded-lg overflow-hidden"> | |
| <div class="loading-spinner"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-primary text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-secondary bg-white bg-opacity-20 rounded-full mb-3">DEPOIMENTOS</span> | |
| <h2 class="text-3xl font-bold mb-4">O Que Nossos Usuários Dizem</h2> | |
| <p class="text-xl opacity-90 max-w-3xl mx-auto">Empresas e profissionais que transformaram seus processos com nossa plataforma</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="testimonial-card bg-white bg-opacity-10 p-6 rounded-xl backdrop-filter backdrop-blur-lg border border-white border-opacity-20"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Ana Carolina"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="font-medium">Ana Carolina</div> | |
| <div class="text-sm opacity-80">RH @ TechSolutions</div> | |
| </div> | |
| </div> | |
| <div class="flex mb-2"> | |
| <i class="fas fa-star text-secondary"></i> | |
| <i class="fas fa-star text-secondary"></i> | |
| <i class="fas fa-star text-secondary"></i> | |
| <i class="fas fa-star text-secondary"></i> | |
| <i class="fas fa-star text-secondary"></i> | |
| </div> | |
| <p class="opacity-90 italic">"Reduzimos nosso tempo médio de contratação de 45 para 18 dias com a TalentHUB. A ferramenta de matching é incrivelmente precisa."</p> | |
| </div> | |
| <div class="testimonial-card bg-white bg-opacity-10 p-6 rounded-xl backdrop-filter backdrop-blur-lg border border-white border-opacity-20"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="Ricardo Almeida"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="font-medium">Ricardo Almeida</div> | |
| <div class="text-sm opacity-80">Gerente de Engenharia</div> | |
| </div> | |
| </div> | |
| <div class="flex mb-2"> | |
| <i class="fas fa-star text-secondary"></i> | |
| <i class="fas fa-star text-secondary"></i> | |
| <i class="fas fa-star text-secondary"></i> | |
| <i class="fas fa-star text-secondary"></i> | |
| <i class="fas fa-star text-secondary"></i> | |
| </div> | |
| <p class="opacity-90 italic">"Consegui 3 ofertas de emprego em 2 semanas usando a TalentHUB. O recurso de formatação de currículo fez toda a diferença."</p> | |
| </div> | |
| <div class="testimonial-card bg-white bg-opacity-10 p-6 rounded-xl backdrop-filter backdrop-blur-lg border border-white border-opacity-20"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Fernanda Costa"> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="font-medium">Fernanda Costa</div> | |
| <div class="text-sm opacity-80">Headhunter @ TalentSearch</div> | |
| </div> | |
| </div> | |
| <div class="flex mb-2"> | |
| <i class="fas fa-star text-secondary"></i> | |
| <i class="fas fa-star text-secondary"></i> | |
| <i class="fas fa-star text-secondary"></i> | |
| <i class="fas fa-star text-secondary"></i> | |
| <i class="fas fa-star text-secondary"></i> | |
| </div> | |
| <p class="opacity-90 italic">"A integração com WhatsApp e o teste DISC nos permitiram qualificar candidatos antes mesmo da primeira entrevista. Revolucionário!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 bg-light"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <span class="inline-block px-3 py-1 text-sm font-semibold text-secondary bg-secondary bg-opacity-10 rounded-full mb-3">PLANOS</span> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Escolha o Plano Ideal para Você</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Soluções flexíveis para candidatos e empresas de todos os tamanhos</p> | |
| </div> | |
| <div class="flex justify-center mb-8"> | |
| <div class="inline-flex rounded-md shadow-sm"> | |
| <button type="button" class="px-6 py-2 text-sm font-medium rounded-l-lg border border-primary bg-primary text-white focus:z-10"> | |
| Para Candidatos | |
| </button> | |
| <button type="button" class="px-6 py-2 text-sm font-medium rounded-r-lg border border-primary text-primary hover:bg-primary hover:text-white focus:z-10"> | |
| Para Empresas | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="pricing-card bg-white rounded-xl shadow-md p-6 transition-all duration-300"> | |
| <h3 class="text-xl font-bold text-dark mb-2">Básico</h3> | |
| <p class="text-gray-600 mb-6">Para quem está começando a busca por oportunidades</p> | |
| <div class="mb-6"> | |
| <div class="flex items-end"> | |
| <span class="text-4xl font-bold text-dark">Grátis</span> | |
| </div> | |
| </div> | |
| <button class="w-full px-4 py-2 border border-primary text-primary font-medium rounded-md hover:bg-primary hover:text-white transition-colors"> | |
| Começar | |
| </button> | |
| <div class="mt-8 space-y-3"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-3"></i> | |
| <span class="text-gray-600">Perfil básico com currículo</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-3"></i> | |
| <span class="text-gray-600">Aplicação para 3 vagas/mês</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-3"></i> | |
| <span class="text-gray-600">Notificações por email</span> | |
| </div> | |
| <div class="flex items-center text-gray-400"> | |
| <i class="fas fa-times mr-3"></i> | |
| <span>Formatação de currículo por IA</span> | |
| </div> | |
| <div class="flex items-center text-gray-400"> | |
| <i class="fas fa-times mr-3"></i> | |
| <span>Teste DISC</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pricing-card bg-white rounded-xl shadow-lg p-6 border-2 border-secondary transform md:-translate-y-4 relative transition-all duration-300"> | |
| <div class="absolute top-0 right-0 bg-secondary text-white text-xs font-medium px-3 py-1 rounded-tr-lg rounded-bl-lg"> | |
| Mais Popular | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-2">Profissional</h3> | |
| <p class="text-gray-600 mb-6">Para quem busca se destacar no mercado</p> | |
| <div class="mb-6"> | |
| <div class="flex items-end"> | |
| <span class="text-4xl font-bold text-dark">R$ 29</span> | |
| <span class="text-gray-500 ml-1 mb-1">/mês</span> | |
| </div> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-secondary text-primary font-bold rounded-md hover:bg-opacity-90 transition-colors"> | |
| Assinar | |
| </button> | |
| <div class="mt-8 space-y-3"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-3"></i> | |
| <span class="text-gray-600">Perfil completo destacado</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-3"></i> | |
| <span class="text-gray-600">Aplicação ilimitada para vagas</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-3"></i> | |
| <span class="text-gray-600">Notificações por email e WhatsApp</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-3"></i> | |
| <span class="text-gray-600">Formatação de currículo por IA</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-3"></i> | |
| <span class="text-gray-600">Teste DISC completo</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pricing-card bg-white rounded-xl shadow-md p-6 transition-all duration-300"> | |
| <h3 class="text-xl font-bold text-dark mb-2">Empresa</h3> | |
| <p class="text-gray-600 mb-6">Para recrutadores e empresas</p> | |
| <div class="mb-6"> | |
| <div class="flex items-end"> | |
| <span class="text-4xl font-bold text-dark">R$ 199</span> | |
| <span class="text-gray-500 ml-1 mb-1">/mês</span> | |
| </div> | |
| </div> | |
| <button class="w-full px-4 py-2 border border-primary text-primary font-medium rounded-md hover:bg-primary hover:text-white transition-colors"> | |
| Contratar | |
| </button> | |
| <div class="mt-8 space-y-3"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-3"></i> | |
| <span class="text-gray-600">3 vagas ativas simultâneas</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-3"></i> | |
| <span class="text-gray-600">Acesso a banco de talentos</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-3"></i> | |
| <span class="text-gray-600">Matching inteligente por IA</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-3"></i> | |
| <span class="text-gray-600">Agendamento de entrevistas</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check text-secondary mr-3"></i> | |
| <span class="text-gray-600">Relatórios de recrutamento</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <div class="bg-primary rounded-2xl p-8 md:p-12 shadow-xl"> | |
| <h2 class="text-3xl font-bold text-white mb-6">Pronto para Transformar Seu Recrutamento?</h2> | |
| <p class="text-xl mb-8 opacity-90">Junte-se a milhares de empresas e profissionais que já descobriram o poder do recrutamento inteligente.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" class="px-6 py-3 bg-secondary text-primary font-semibold rounded-md hover:bg-opacity-90 transition-colors"> | |
| Cadastre-se Grátis | |
| </a> | |
| <a href="#" class="px-6 py-3 border-2 border-white text-white font-semibold rounded-md hover:bg-white hover:text-primary transition-colors"> | |
| Agende Demonstração | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-primary text-gray-300"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div class="md:col-span-2"> | |
| <a href="#" class="flex items-center mb-6"> | |
| <i class="fas fa-network-wired text-secondary text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-white">Talent<span class="text-secondary">HUB</span></span> | |
| </a> | |
| <p class="text-sm mb-4">A plataforma de recrutamento inteligente que conecta os melhores talentos às empresas mais inovadoras através de IA avançada.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-white"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-300 hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Para Candidatos</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition-colors">Criar Perfil</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Buscar Vagas</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Teste DISC</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Dicas de Carreira</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Planos</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-medium mb-4">Para Empresas</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition-colors">Publicar Vagas</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Buscar Talentos</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Soluções Corporativas</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">API de Integração</a></li> | |
| <li><a href="#" class="hover:text-white transition-colors">Planos Empresariais</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-sm">© 2023 TalentHUB. Todos os direitos reservados.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="text-sm hover:text-white transition-colors">Termos</a> | |
| <a href="#" class="text-sm hover:text-white transition-colors">Privacidade</a> | |
| <a href="#" class="text-sm hover:text-white transition-colors">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // API Key do Pexels (em um ambiente real, isso estaria protegido no backend) | |
| const PEXELS_API_KEY = '563492ad6f91700001000001a2e3a4b4a1a14a5a8d5c5c5c5c5c5c5c'; | |
| // Função para buscar imagens do Pexels | |
| async function fetchPexelsImage(query, elementId, size = 'large') { | |
| try { | |
| const response = await fetch(`https://api.pexels.com/v1/search?query=${query}&per_page=1`, { | |
| headers: { | |
| 'Authorization': PEXELS_API_KEY | |
| } | |
| }); | |
| const data = await response.json(); | |
| if (data.photos && data.photos.length > 0) { | |
| const photo = data.photos[0]; | |
| let imageUrl = photo.src.medium; | |
| if (size === 'large') { | |
| imageUrl = photo.src.large; | |
| } else if (size === 'original') { | |
| imageUrl = photo.src.original; | |
| } | |
| const imgElement = document.createElement('img'); | |
| imgElement.src = imageUrl; | |
| imgElement.alt = photo.photographer; | |
| imgElement.className = 'w-full h-auto rounded-lg'; | |
| const container = document.getElementById(elementId); | |
| container.innerHTML = ''; | |
| container.appendChild(imgElement); | |
| } | |
| } catch (error) { | |
| console.error('Erro ao buscar imagem do Pexels:', error); | |
| // Fallback para imagem local caso a API falhe | |
| const container = document.getElementById(elementId); | |
| container.innerHTML = '<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Fallback image" class="w-full h-auto rounded-lg">'; | |
| } | |
| } | |
| // Carregar imagens quando a página estiver pronta | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Imagem do hero (dashboard de recrutamento) | |
| fetchPexelsImage('recruitment+dashboard', 'hero-image', 'large'); | |
| // Imagem do processo (como funciona) | |
| fetchPexelsImage('recruitment+process', 'process-image', 'large'); | |
| // Logos de empresas (já substituídas por imagens do Pexels diretamente no HTML) | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| 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=alexandreafd/talenthub" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |