Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bull Partners - Investimento em Gado Nelore de Corte</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"> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%); | |
| } | |
| .animal-card { | |
| transition: all 0.3s ease; | |
| } | |
| .animal-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .testimonial-card { | |
| background: linear-gradient(135deg, #f8f8f8 0%, #ffffff 100%); | |
| border-left: 4px solid #d97706; | |
| } | |
| .btn-primary { | |
| background-color: #d97706; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: #b65c04; | |
| transform: translateY(-2px); | |
| } | |
| .stats-item { | |
| border-bottom: 3px solid #d97706; | |
| } | |
| .form-step { | |
| display: none; | |
| } | |
| .form-step.active { | |
| display: block; | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| background-color: #e5e7eb; | |
| border-radius: 3px; | |
| } | |
| .progress { | |
| height: 100%; | |
| background-color: #d97706; | |
| border-radius: 3px; | |
| transition: width 0.4s ease; | |
| } | |
| .investment-option { | |
| border: 2px solid #e5e7eb; | |
| border-radius: 0.5rem; | |
| transition: all 0.3s ease; | |
| } | |
| .investment-option:hover { | |
| border-color: #d97706; | |
| } | |
| .investment-option.selected { | |
| border-color: #d97706; | |
| background-color: #fef3c7; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header/Navbar --> | |
| <header class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-cow text-3xl text-amber-700 mr-2"></i> | |
| <h1 class="text-2xl font-bold text-gray-800">Bull<span class="text-amber-700">Partners</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-gray-800 hover:text-amber-700 font-medium">Início</a> | |
| <a href="#about" class="text-gray-800 hover:text-amber-700 font-medium">Sobre Nós</a> | |
| <a href="#invest" class="text-gray-800 hover:text-amber-700 font-medium">Investir</a> | |
| <a href="#results" class="text-gray-800 hover:text-amber-700 font-medium">Resultados</a> | |
| <a href="#contact" class="text-gray-800 hover:text-amber-700 font-medium">Contato</a> | |
| </nav> | |
| <button class="md:hidden text-gray-800"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="relative h-screen flex items-center"> | |
| <div class="absolute inset-0"> | |
| <img src="https://images.unsplash.com/photo-1559123692-5a96f0a88744?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Gado Nelore" class="w-full h-full object-cover"> | |
| <div class="absolute inset-0 hero-gradient"></div> | |
| </div> | |
| <div class="container mx-auto px-4 relative z-10 text-white text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Invista em Gado Nelore com Segurança</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Rentabilidade acima de 18% ao ano com um dos investimentos mais sólidos do agronegócio brasileiro</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <a href="#invest" class="btn-primary py-3 px-8 rounded-full text-white font-bold text-lg">Simular Investimento</a> | |
| <a href="#about" class="bg-white py-3 px-8 rounded-full text-amber-700 font-bold text-lg border-2 border-amber-700">Conheça o Processo</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-amber-700 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center"> | |
| <div class="stats-item pb-4"> | |
| <h3 class="text-4xl font-bold mb-2">R$ 50mi+</h3> | |
| <p class="text-lg">Em animais negociados</p> | |
| </div> | |
| <div class="stats-item pb-4"> | |
| <h3 class="text-4xl font-bold mb-2">1.200+</h3> | |
| <p class="text-lg">Investidores ativos</p> | |
| </div> | |
| <div class="stats-item pb-4"> | |
| <h3 class="text-4xl font-bold mb-2">18%+</h3> | |
| <p class="text-lg">Rentabilidade média anual</p> | |
| </div> | |
| <div class="stats-item pb-4"> | |
| <h3 class="text-4xl font-bold mb-2">100%</h3> | |
| <p class="text-lg">De contratos honrados</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <img src="https://images.unsplash.com/photo-1586771107445-d3ca888129ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Gado Nelore" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Sobre a Bull Partners</h2> | |
| <p class="text-lg text-gray-600 mb-6">Especializada na engorda de gado Nelore, a Bull Partners oferece oportunidades de investimento seguro no mercado pecuário, com toda a expertise de uma equipe com mais de 15 anos de experiência.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-check-circle text-amber-700 text-xl mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Gado Nelore Puro</h4> | |
| <p class="text-gray-600">Raça adaptada ao clima tropical com excelente conversão alimentar.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-check-circle text-amber-700 text-xl mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Tecnologia de Ponta</h4> | |
| <p class="text-gray-600">Manejo moderno com acompanhamento nutricional e sanitário individualizado.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-check-circle text-amber-700 text-xl mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Transparência Total</h4> | |
| <p class="text-gray-600">Acompanhamento mensal do desenvolvimento do seu investimento.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#invest" class="btn-primary inline-block mt-8 py-3 px-8 rounded-full text-white font-bold text-lg">Quero Investir</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Invest Section --> | |
| <section class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Por Que Investir em Gado Nelore?</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">O mercado de carne bovina brasileira é um dos mais fortes do mundo, com demanda crescente tanto no mercado interno quanto para exportação.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-lg shadow-md animal-card"> | |
| <div class="text-amber-700 text-4xl mb-4"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Rentabilidade Comprovada</h3> | |
| <p class="text-gray-600">Histórico de rentabilidade acima de 18% ao ano, superando muitos investimentos tradicionais.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md animal-card"> | |
| <div class="text-amber-700 text-4xl mb-4"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Proteção Against Inflação</h3> | |
| <p class="text-gray-600">O preço da carne acompanha a inflação, protegendo seu poder de compra.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md animal-card"> | |
| <div class="text-amber-700 text-4xl mb-4"> | |
| <i class="fas fa-globe-americas"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Mercado Global</h3> | |
| <p class="text-gray-600">O Brasil é o maior exportador de carne bovina do mundo, com demanda crescente.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Investment Process Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Como Funciona o Investimento</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Um processo simples e transparente para você investir com segurança.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div class="text-center"> | |
| <div class="bg-amber-700 text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-2xl font-bold">1</div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Escolha sua Cota</h3> | |
| <p class="text-gray-600">Selecione o valor de investimento que melhor atende suas necessidades.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-amber-700 text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-2xl font-bold">2</div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Assinatura Digital</h3> | |
| <p class="text-gray-600">Contrato eletrônico seguro com todas as garantias legais.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-amber-700 text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-2xl font-bold">3</div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Acompanhamento</h3> | |
| <p class="text-gray-600">Receba relatórios periódicos sobre o desenvolvimento do seu investimento.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-amber-700 text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 text-2xl font-bold">4</div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Retorno</h3> | |
| <p class="text-gray-600">Receba seu capital mais lucros ao final do ciclo de engorda.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Investment Options Section --> | |
| <section id="invest" class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Invista em Gado Nelore</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Escolha a quantidade de cotas que deseja adquirir.</p> | |
| </div> | |
| <!-- Investment Form --> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-8"> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium text-gray-700">Progresso</span> | |
| <span class="text-sm font-medium text-gray-700"><span id="current-step">1</span>/3</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress" id="form-progress" style="width: 33%"></div> | |
| </div> | |
| </div> | |
| <!-- Step 1: Choose Investment Amount --> | |
| <div class="form-step active" id="step-1"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Selecione a Quantidade de Cotas</h3> | |
| <p class="text-gray-600 mb-6">Cada cota equivale a R$ 3.560,00 e representa uma participação no lote de animais.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- 1 Cota --> | |
| <div class="investment-option p-6 rounded-lg cursor-pointer" onclick="selectInvestment(1)"> | |
| <div class="text-center mb-4"> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-center text-gray-800 mb-2">1 Cota</h4> | |
| <p class="text-gray-600 text-center">Valor: R$ 3.560,00</p> | |
| <p class="text-gray-600 text-center mt-2">Retorno estimado: R$ 4.343,20</p> | |
| <div class="mt-4 text-center"> | |
| <span class="text-sm text-amber-700">Rentabilidade: 22%</span> | |
| </div> | |
| </div> | |
| <!-- 2 Cotas --> | |
| <div class="investment-option p-6 rounded-lg cursor-pointer" onclick="selectInvestment(2)"> | |
| <div class="text-center mb-4"> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-center text-gray-800 mb-2">2 Cotas</h4> | |
| <p class="text-gray-600 text-center">Valor: R$ 7.120,00</p> | |
| <p class="text-gray-600 text-center mt-2">Retorno estimado: R$ 8.686,40</p> | |
| <div class="mt-4 text-center"> | |
| <span class="text-sm text-amber-700">Rentabilidade: 22%</span> | |
| </div> | |
| </div> | |
| <!-- 3 Cotas --> | |
| <div class="investment-option p-6 rounded-lg cursor-pointer" onclick="selectInvestment(3)"> | |
| <div class="text-center mb-4"> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-center text-gray-800 mb-2">3 Cotas</h4> | |
| <p class="text-gray-600 text-center">Valor: R$ 10.680,00</p> | |
| <p class="text-gray-600 text-center mt-2">Retorno estimado: R$ 13.029,60</p> | |
| <div class="mt-4 text-center"> | |
| <span class="text-sm text-amber-700">Rentabilidade: 22%</span> | |
| </div> | |
| </div> | |
| <!-- 5 Cotas --> | |
| <div class="investment-option p-6 rounded-lg cursor-pointer" onclick="selectInvestment(5)"> | |
| <div class="text-center mb-4"> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-center text-gray-800 mb-2">5 Cotas</h4> | |
| <p class="text-gray-600 text-center">Valor: R$ 17.800,00</p> | |
| <p class="text-gray-600 text-center mt-2">Retorno estimado: R$ 21.716,00</p> | |
| <div class="mt-4 text-center"> | |
| <span class="text-sm text-amber-700">Rentabilidade: 22%</span> | |
| </div> | |
| </div> | |
| <!-- 10 Cotas --> | |
| <div class="investment-option p-6 rounded-lg cursor-pointer" onclick="selectInvestment(10)"> | |
| <div class="text-center mb-4"> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| <i class="fas fa-cow text-4xl text-amber-700"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-center text-gray-800 mb-2">10 Cotas</h4> | |
| <p class="text-gray-600 text-center">Valor: R$ 35.600,00</p> | |
| <p class="text-gray-600 text-center mt-2">Retorno estimado: R$ 43.432,00</p> | |
| <div class="mt-4 text-center"> | |
| <span class="text-sm text-amber-700">Rentabilidade: 22%</span> | |
| </div> | |
| </div> | |
| <!-- Valor Personalizado --> | |
| <div class="investment-option p-6 rounded-lg cursor-pointer" onclick="selectInvestment('custom')"> | |
| <div class="text-center mb-4"> | |
| <i class="fas fa-edit text-4xl text-amber-700"></i> | |
| </div> | |
| <h4 class="text-xl font-bold text-center text-gray-800 mb-2">Valor Personalizado</h4> | |
| <p class="text-gray-600 text-center">A partir de R$ 3.560,00</p> | |
| <div class="mt-4"> | |
| <input type="number" id="custom-amount" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-700 focus:border-transparent" placeholder="Digite o valor" min="3560" step="3560"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-right"> | |
| <button type="button" onclick="nextStep()" class="btn-primary py-3 px-8 rounded-full text-white font-bold text-lg">Próximo</button> | |
| </div> | |
| </div> | |
| <!-- Step 2: Personal Information --> | |
| <div class="form-step" id="step-2"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Seus Dados</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nome Completo</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-700 focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-700 focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Telefone</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-700 focus:border-transparent" required> | |
| </div> | |
| <div> | |
| <label for="cpf" class="block text-gray-700 font-medium mb-2">CPF</label> | |
| <input type="text" id="cpf" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-700 focus:border-transparent" required> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Alguma observação?</label> | |
| <textarea id="message" rows="3" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-700 focus:border-transparent"></textarea> | |
| </div> | |
| <div class="mt-8 flex justify-between"> | |
| <button type="button" onclick="prevStep()" class="bg-gray-200 py-3 px-8 rounded-full text-gray-800 font-bold text-lg">Voltar</button> | |
| <button type="button" onclick="nextStep()" class="btn-primary py-3 px-8 rounded-full text-white font-bold text-lg">Próximo</button> | |
| </div> | |
| </div> | |
| <!-- Step 3: Review and Submit --> | |
| <div class="form-step" id="step-3"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Confirme seu Investimento</h3> | |
| <div class="bg-gray-50 p-6 rounded-lg mb-6"> | |
| <h4 class="text-lg font-bold text-gray-800 mb-4">Resumo do Investimento</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-gray-600">Quantidade de Cotas:</p> | |
| <p class="font-medium" id="review-shares">1</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Valor do Investimento:</p> | |
| <p class="font-medium" id="review-amount">R$ 3.560,00</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Retorno Estimado:</p> | |
| <p class="font-medium" id="review-return">R$ 4.343,20</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Rentabilidade:</p> | |
| <p class="font-medium text-green-600">22%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <h4 class="text-lg font-bold text-gray-800 mb-4">Seus Dados</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-gray-600">Nome:</p> | |
| <p class="font-medium" id="review-name">-</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Email:</p> | |
| <p class="font-medium" id="review-email">-</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Telefone:</p> | |
| <p class="font-medium" id="review-phone">-</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">CPF:</p> | |
| <p class="font-medium" id="review-cpf">-</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="terms" class="mt-1 mr-3" required> | |
| <label for="terms" class="text-gray-600">Li e aceito os <a href="#" class="text-amber-700 hover:underline">Termos de Contrato</a> e <a href="#" class="text-amber-700 hover:underline">Política de Privacidade</a></label> | |
| </div> | |
| </div> | |
| <div class="mt-8 flex justify-between"> | |
| <button type="button" onclick="prevStep()" class="bg-gray-200 py-3 px-8 rounded-full text-gray-800 font-bold text-lg">Voltar</button> | |
| <button type="button" onclick="submitForm()" class="btn-primary py-3 px-8 rounded-full text-white font-bold text-lg">Finalizar Investimento</button> | |
| </div> | |
| </div> | |
| <!-- Success Message --> | |
| <div class="form-step hidden" id="success-message"> | |
| <div class="text-center py-12"> | |
| <div class="text-green-500 text-6xl mb-6"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Investimento Solicitado com Sucesso!</h3> | |
| <p class="text-gray-600 mb-6">Nossa equipe entrará em contato em até 24 horas para finalizar os detalhes do seu investimento.</p> | |
| <a href="#home" class="btn-primary py-3 px-8 rounded-full text-white font-bold text-lg inline-block">Voltar ao Início</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section --> | |
| <section id="results" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Resultados dos Nossos Investidores</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Veja o retorno real que nossos investidores obtiveram nos últimos ciclos.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-100 p-6 rounded-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h4 class="text-lg font-bold text-gray-800">Ciclo 2022/1</h4> | |
| <span class="bg-amber-700 text-white text-xs font-bold px-2 py-1 rounded">Finalizado</span> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-600">Investimento médio:</p> | |
| <p class="text-xl font-bold text-gray-800">R$ 25.000</p> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-600">Retorno médio:</p> | |
| <p class="text-xl font-bold text-gray-800">R$ 30.500</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Rentabilidade:</p> | |
| <p class="text-xl font-bold text-green-600">22%</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-6 rounded-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h4 class="text-lg font-bold text-gray-800">Ciclo 2022/2</h4> | |
| <span class="bg-amber-700 text-white text-xs font-bold px-2 py-1 rounded">Finalizado</span> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-600">Investimento médio:</p> | |
| <p class="text-xl font-bold text-gray-800">R$ 28.000</p> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-600">Retorno médio:</p> | |
| <p class="text-xl font-bold text-gray-800">R$ 33.600</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Rentabilidade:</p> | |
| <p class="text-xl font-bold text-green-600">20%</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-6 rounded-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h4 class="text-lg font-bold text-gray-800">Ciclo 2023/1</h4> | |
| <span class="bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded">Em Andamento</span> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-600">Investimento médio:</p> | |
| <p class="text-xl font-bold text-gray-800">R$ 32.000</p> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-600">Projeção de retorno:</p> | |
| <p class="text-xl font-bold text-gray-800">R$ 38.400</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-600">Rentabilidade estimada:</p> | |
| <p class="text-xl font-bold text-blue-600">20%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#invest" class="btn-primary py-3 px-8 rounded-full text-white font-bold text-lg inline-block">Quero Ter Esses Resultados</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">O Que Nossos Investidores Dizem</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Depoimentos real de quem já investe conosco.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="testimonial-card p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-700 text-3xl mr-3"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <div class="text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6">"Investi R$ 20.000 há dois anos e recebi R$ 24.800 no final do ciclo. Melhor que muitos fundos de investimento tradicionais."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Carlos Mendes</h4> | |
| <p class="text-gray-600">Investidor desde 2019</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-700 text-3xl mr-3"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <div class="text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6">"A transparência dos relatórios me deixou muito seguro. Pude acompanhar todo o processo e visitar a fazenda."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Ana Paula Silva</h4> | |
| <p class="text-gray-600">Investidora desde 2020</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-700 text-3xl mr-3"> | |
| <i class="fas fa-quote-left"></i> | |
| </div> | |
| <div class="text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-6">"Como empresário, diversifiquei meus investimentos com cotas de gado e tem sido uma excelente alternativa à bolsa de valores."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Cliente" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Roberto Almeida</h4> | |
| <p class="text-gray-600">Investidor desde 2018</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nossa Fazenda em Imagens</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Conheça nossa estrutura e nossos animais.</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1559123692-5a96f0a88744?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Gado Nelore" class="w-full h-64 object-cover transition duration-500 hover:scale-105"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1516467508483-a7212febe31a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" | |
| alt="Fazenda" class="w-full h-64 object-cover transition duration-500 hover:scale-105"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1501706362039-c06b2d715385?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Pastagem" class="w-full h-64 object-cover transition duration-500 hover:scale-105"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1553284965-5dd8352ff6bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Curral" class="w-full h-64 object-cover transition duration-500 hover:scale-105"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1553284965-83c287af8963?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Gado no curral" class="w-full h-64 object-cover transition duration-500 hover:scale-105"> | |
| </div> | |
| <div class="overflow-hidden rounded-lg shadow-lg"> | |
| <img src="https://images.unsplash.com/photo-1553284965-5f480c0c8c1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Equipe" class="w-full h-64 object-cover transition duration-500 hover:scale-105"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-20 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Perguntas Frequentes</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Tire suas dúvidas sobre investimento em gado de corte.</p> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="mb-6 border-b border-gray-200 pb-6"> | |
| <button class="flex justify-between items-center w-full text-left font-bold text-lg text-gray-800"> | |
| <span>Como é calculado o retorno do investimento?</span> | |
| <i class="fas fa-chevron-down text-amber-700"></i> | |
| </button> | |
| <div class="mt-4 text-gray-600"> | |
| <p>O retorno é calculado com base no peso vivo do animal no momento da venda, descontados os custos operacionais. Nossos contratos estabelecem claramente a porcentagem de participação nos lucros, que varia conforme o tipo de cota escolhida.</p> | |
| </div> | |
| </div> | |
| <div class="mb-6 border-b border-gray-200 pb-6"> | |
| <button class="flex justify-between items-center w-full text-left font-bold text-lg text-gray-800"> | |
| <span>Quais são os riscos envolvidos?</span> | |
| <i class="fas fa-chevron-down text-amber-700"></i> | |
| </button> | |
| <div class="mt-4 text-gray-600"> | |
| <p>Todo investimento possui riscos. No caso da pecuária, os principais são variações no preço da arroba do boi e fatores climáticos. Mitigamos esses riscos com:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>Seguro contra morte dos animais</li> | |
| <li>Diversificação de compradores</li> | |
| <li>Contratos futuros para parte da production</li> | |
| <li>Monitoramento sanitário rigoroso</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mb-6 border-b border-gray-200 pb-6"> | |
| <button class="flex justify-between items-center w-full text-left font-bold text-lg text-gray-800"> | |
| <span>Posso visitar a fazenda e ver meu gado?</span> | |
| <i class="fas fa-chevron-down text-amber-700"></i> | |
| </button> | |
| <div class="mt-4 text-gray-600"> | |
| <p>Sim! Investidores das cotas Premium e Empresarial têm direito a visitas agendadas. Para cotas Básicas, oferecemos visitas coletivas periódicas. Todas as visitas são acompanhadas por nosso team técnico que explica todo o processo de engorda.</p> | |
| </div> | |
| </div> | |
| <div class="mb-6 border-b border-gray-200 pb-6"> | |
| <button class="flex justify-between items-center w-full text-left font-bold text-lg text-gray-800"> | |
| <span>Como é feita a identificação dos animais?</span> | |
| <i class="fas fa-chevron-down text-amber-700"></i> | |
| </button> | |
| <div class="mt-4 text-gray-600"> | |
| <p>Utilizamos brincos eletrônicos com identificação única para cada animal, permitindo rastreamento individualizado. Além disso, mantemos registro fotográfico atualizado e sistema de geolocalização dos lotes.</p> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <button class="flex justify-between items-center w-full text-left font-bold text-lg text-gray-800"> | |
| <span>Qual a procedência dos animais?</span> | |
| <i class="fas fa-chevron-down text-amber-700"></i> | |
| </button> | |
| <div class="mt-4 text-gray-600"> | |
| <p>Todos nossos animais são adquiridos de criatórios certificados, com comprovada genética Nelore. Exigimos atestado de vacinação completo e realizamos quarentena e exames complementares antes de incorporar novos lotes ao nosso sistema.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-amber-700 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para Investir em Gado Nelore?</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Preencha o formulário abaixo e nossa equipe entrará em contato para explicar todos os detalhes.</p> | |
| <a href="#invest" class="bg-white py-3 px-8 rounded-full text-amber-700 font-bold text-lg inline-block">Simular Investimento</a> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Entre em Contato</h2> | |
| <p class="text-lg text-gray-600 mb-8">Nossa equipe está pronta para esclarecer todas suas dúvidas sobre investimento em gado de corte.</p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="text-amber-700 text-xl mr-4 mt-1"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Endereço</h4> | |
| <p class="text-gray-600">Fazenda Bull Partners, Zona Rural, Barretos/SP</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-amber-700 text-xl mr-4 mt-1"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Telefone</h4> | |
| <p class="text-gray-600">(17) 3321-4567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-amber-700 text-xl mr-4 mt-1"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Email</h4> | |
| <p class="text-gray-600">[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-amber-700 text-xl mr-4 mt-1"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-800">Horário de Atendimento</h4> | |
| <p class="text-gray-600">Segunda a Sexta, das 8h às 18h</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <h4 class="font-bold text-gray-800 mb-4">Siga-nos nas Redes Sociais</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-gray-100 text-amber-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-amber-700 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-gray-100 text-amber-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-amber-700 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-gray-100 text-amber-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-amber-700 hover:text-white transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="bg-gray-100 text-amber-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-amber-700 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form class="bg-gray-50 p-8 rounded-lg shadow-md"> | |
| <div class="mb-6"> | |
| <label for="contact-name" class="block text-gray-700 font-medium mb-2">Nome Completo</label> | |
| <input type="text" id="contact-name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-700 focus:border-transparent" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="contact-email" class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="contact-email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-700 focus:border-transparent" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="contact-phone" class="block text-gray-700 font-medium mb-2">Telefone</label> | |
| <input type="tel" id="contact-phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-700 focus:border-transparent" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="contact-subject" class="block text-gray-700 font-medium mb-2">Assunto</label> | |
| <select id="contact-subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-700 focus:border-transparent"> | |
| <option value="">Selecione um assunto</option> | |
| <option value="investment">Informações sobre investimento</option> | |
| <option value="visit">Agendamento de visita</option> | |
| <option value="partnership">Parcerias comerciais</option> | |
| <option value="other">Outros</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="contact-message" class="block text-gray-700 font-medium mb-2">Mensagem</label> | |
| <textarea id="contact-message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-700 focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="btn-primary w-full py-3 px-6 rounded-full text-white font-bold text-lg">Enviar Mensagem</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-cow text-2xl text-amber-700 mr-2"></i> | |
| <h3 class="text-xl font-bold">Bull<span class="text-amber-700">Partners</span></h3> | |
| </div> | |
| <p class="text-gray-400">Especialistas em engorda de gado Nelore e investimentos pecuários seguros.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Links Rápidos</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-amber-700">Início</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-amber-700">Sobre Nós</a></li> | |
| <li><a href="#invest" class="text-gray-400 hover:text-amber-700">Investir</a></li> | |
| <li><a href="#results" class="text-gray-400 hover:text-amber-700">Resultados</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-amber-700">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Investimento</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-700">1 Cota (R$3.560)</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-700">2 Cotas (R$7.120)</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-700">3 Cotas (R$10.680)</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-700">5 Cotas (R$17.800)</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-amber-700">10 Cotas (R$35.600)</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Newsletter</h4> | |
| <p class="text-gray-400 mb-4">Assine nossa newsletter para receber novidades e oportunidades.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Seu email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full"> | |
| <button type="submit" class="bg-amber-700 px-4 py-2 rounded-r-lg hover:bg-amber-800"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Bull Partners. Todos os direitos reservados.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-youtube"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-amber-700"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Form steps functionality | |
| let currentStep = 1; | |
| const totalSteps = 3; | |
| let selectedShares = 1; | |
| const shareValue = 3560; | |
| const profitability = 0.22; | |
| function showStep(step) { | |
| document.querySelectorAll('.form-step').forEach(el => { | |
| el.classList.add('hidden'); | |
| el.classList.remove('active'); | |
| }); | |
| document.getElementById(`step-${step}`).classList.remove('hidden'); | |
| document.getElementById(`step-${step}`).classList.add('active'); | |
| // Update progress bar | |
| const progressPercentage = (step / totalSteps) * 100; | |
| document.getElementById('form-progress').style.width = `${progressPercentage}%`; | |
| document.getElementById('current-step').textContent = step; | |
| // Update review section if on last step | |
| if(step === 3) { | |
| updateReviewSection(); | |
| } | |
| } | |
| function nextStep() { | |
| if(currentStep < totalSteps) { | |
| currentStep++; | |
| showStep(currentStep); | |
| } | |
| } | |
| function prevStep() { | |
| if(currentStep > 1) { | |
| currentStep--; | |
| showStep(currentStep); | |
| } | |
| } | |
| function selectInvestment(shares) { | |
| // Remove selected class from all options | |
| document.querySelectorAll('.investment-option').forEach(el => { | |
| el.classList.remove('selected'); | |
| }); | |
| // Add selected class to clicked option | |
| event.currentTarget.classList.add('selected'); | |
| if(shares === 'custom') { | |
| const customAmount = parseFloat(document.getElementById('custom-amount').value); | |
| if(!isNaN(customAmount) && customAmount >= shareValue) { | |
| selectedShares = Math.round(customAmount / shareValue); | |
| } | |
| } else { | |
| selectedShares = shares; | |
| } | |
| } | |
| function updateReviewSection() { | |
| const investmentAmount = selectedShares * shareValue; | |
| const estimatedReturn = investmentAmount * (1 + profitability); | |
| document.getElementById('review-shares').textContent = selectedShares; | |
| document.getElementById('review-amount').textContent = `R$ ${investmentAmount.toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`; | |
| document.getElementById('review-return').textContent = `R$ ${estimatedReturn.toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2})}`; | |
| // Get personal info | |
| document.getElementById('review-name').textContent = document.getElementById('name').value || '-'; | |
| document.getElementById('review-email').textContent = document.getElementById('email').value || '-'; | |
| document.getElementById('review-phone').textContent = document.getElementById('phone').value || '-'; | |
| document.getElementById('review-cpf').textContent = document.getElementById('cpf').value || '-'; | |
| } | |
| function submitForm() { | |
| // Here you would normally submit the form to your backend | |
| // For demo purposes, we'll just show the success message | |
| document.getElementById('step-3').classList.add('hidden'); | |
| document.getElementById('success-message').classList.remove('hidden'); | |
| } | |
| // FAQ toggle functionality | |
| document.querySelectorAll('#faq button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| if(content.style.maxHeight) { | |
| content.style.maxHeight = null; | |
| icon.classList.remove('fa-chevron-up'); | |
| icon.classList.add('fa-chevron-down'); | |
| } else { | |
| content.style.maxHeight = content.scrollHeight + 'px'; | |
| icon.classList.remove('fa-chevron-down'); | |
| icon.classList.add('fa-chevron-up'); | |
| } | |
| }); | |
| }); | |
| // 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=antocarloss/testeweb-bp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |