Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GeraFácil Docs - Documentos Prontos em Minutos</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: '#1e3a8a', | |
| secondary: '#3b82f6', | |
| accent: '#10b981', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); | |
| } | |
| .document-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .step-card { | |
| transition: all 0.3s ease; | |
| } | |
| .step-card:hover { | |
| transform: scale(1.05); | |
| } | |
| .form-section { | |
| background-color: #f8fafc; | |
| } | |
| #paymentSection { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Header/Navigation --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold mr-3">GF</div> | |
| <h1 class="text-xl font-bold text-primary">GeraFácil Docs</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-primary font-medium hover:text-secondary">Início</a> | |
| <a href="#how-it-works" class="text-gray-600 hover:text-primary">Como Funciona</a> | |
| <a href="#templates" class="text-gray-600 hover:text-primary">Modelos</a> | |
| <a href="#generate" class="text-gray-600 hover:text-primary">Gerar Documento</a> | |
| </nav> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Documentos prontos em minutos, sem advogado!</h1> | |
| <p class="text-xl mb-8 opacity-90">Preencha os dados e receba seu contrato automático em PDF.</p> | |
| <a href="#generate" class="bg-white text-primary font-bold py-4 px-8 rounded-full text-lg hover:bg-gray-100 transition duration-300 inline-block"> | |
| Gerar documento agora | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-primary mb-12">Como funciona</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Step 1 --> | |
| <div class="step-card bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4">1</div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Escolha o documento</h3> | |
| <p class="text-gray-600">Selecione entre nossos modelos profissionais o documento que você precisa.</p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="step-card bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4">2</div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Preencha os dados</h3> | |
| <p class="text-gray-600">Nosso formulário inteligente guiará você no preenchimento de todas as informações necessárias.</p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="step-card bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4">3</div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Baixe seu PDF</h3> | |
| <p class="text-gray-600">Após o pagamento, você receberá imediatamente o documento pronto para download.</p> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="step-card bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center text-white text-2xl font-bold mx-auto mb-4">4</div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Assine e use</h3> | |
| <p class="text-gray-600">Imprima, assine e utilize seu documento com segurança e tranquilidade.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Templates Section --> | |
| <section id="templates" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-primary mb-12">Modelos Disponíveis</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Contract 1 --> | |
| <div class="document-card bg-white p-6 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-primary mb-4"> | |
| <i class="fas fa-file-contract text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Contrato de Prestação de Serviços</h3> | |
| <p class="text-gray-600 mb-4">Ideal para profissionais autônomos e empresas que prestam serviços.</p> | |
| <a href="#generate" data-template="service" class="text-secondary font-medium hover:text-primary transition duration-300 inline-flex items-center"> | |
| Gerar este documento | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Contract 2 --> | |
| <div class="document-card bg-white p-6 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-primary mb-4"> | |
| <i class="fas fa-home text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Contrato de Aluguel Residencial</h3> | |
| <p class="text-gray-600 mb-4">Modelo completo para locação de imóveis residenciais.</p> | |
| <a href="#generate" data-template="rental" class="text-secondary font-medium hover:text-primary transition duration-300 inline-flex items-center"> | |
| Gerar este documento | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Contract 3 --> | |
| <div class="document-card bg-white p-6 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-primary mb-4"> | |
| <i class="fas fa-id-card text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Declaração de Residência</h3> | |
| <p class="text-gray-600 mb-4">Documento simples para comprovação de endereço.</p> | |
| <a href="#generate" data-template="residence" class="text-secondary font-medium hover:text-primary transition duration-300 inline-flex items-center"> | |
| Gerar este documento | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Contract 4 --> | |
| <div class="document-card bg-white p-6 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-primary mb-4"> | |
| <i class="fas fa-shield-alt text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Termo de Responsabilidade</h3> | |
| <p class="text-gray-600 mb-4">Para assumir responsabilidade sobre bens, equipamentos ou atividades.</p> | |
| <a href="#generate" data-template="responsibility" class="text-secondary font-medium hover:text-primary transition duration-300 inline-flex items-center"> | |
| Gerar este documento | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Contract 5 --> | |
| <div class="document-card bg-white p-6 rounded-xl shadow-md transition duration-300"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-primary mb-4"> | |
| <i class="fas fa-briefcase text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Declaração de Trabalho Autônomo</h3> | |
| <p class="text-gray-600 mb-4">Comprovação de atividade como profissional autônomo.</p> | |
| <a href="#generate" data-template="freelance" class="text-secondary font-medium hover:text-primary transition duration-300 inline-flex items-center"> | |
| Gerar este documento | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <!-- Custom Document --> | |
| <div class="document-card bg-white p-6 rounded-xl shadow-md transition duration-300 border-2 border-dashed border-primary"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-primary mb-4"> | |
| <i class="fas fa-plus text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Documento Personalizado</h3> | |
| <p class="text-gray-600 mb-4">Não encontrou o que precisa? Podemos criar um modelo exclusivo para você.</p> | |
| <a href="#contact" class="text-secondary font-medium hover:text-primary transition duration-300 inline-flex items-center"> | |
| Solicitar modelo | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Form Section --> | |
| <section id="generate" class="form-section py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-primary mb-2">Gerar Documento</h2> | |
| <p class="text-center text-gray-600 mb-8">Preencha os campos abaixo para gerar seu documento personalizado</p> | |
| <div class="bg-white rounded-xl shadow-md p-6 md:p-8"> | |
| <!-- Document Selection --> | |
| <div class="mb-8"> | |
| <label class="block text-gray-700 font-medium mb-3">Selecione o tipo de documento</label> | |
| <select id="documentType" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary focus:ring-opacity-50"> | |
| <option value="" disabled selected>Selecione uma opção</option> | |
| <option value="service">Contrato de Prestação de Serviços</option> | |
| <option value="rental">Contrato de Aluguel Residencial</option> | |
| <option value="residence">Declaração de Residência</option> | |
| <option value="responsibility">Termo de Responsabilidade</option> | |
| <option value="freelance">Declaração de Trabalho Autônomo</option> | |
| </select> | |
| </div> | |
| <!-- Dynamic Form Fields --> | |
| <div id="formFields" class="space-y-6"> | |
| <!-- Fields will be dynamically inserted here based on document type --> | |
| <div class="text-center py-10 text-gray-500"> | |
| <i class="fas fa-file-alt text-4xl mb-3"></i> | |
| <p>Selecione um tipo de documento para começar</p> | |
| </div> | |
| </div> | |
| <!-- Submit Button --> | |
| <div class="mt-10 text-center"> | |
| <button id="generateBtn" class="bg-primary hover:bg-blue-800 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300"> | |
| Gerar Documento | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Payment Section (Hidden by default) --> | |
| <section id="paymentSection" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-md p-8 text-center"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center text-green-600 text-2xl mx-auto mb-6"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Finalizar Compra</h2> | |
| <p class="text-gray-600 mb-6">Seu documento está pronto! Para baixar, complete o pagamento seguro abaixo.</p> | |
| <div class="bg-gray-100 rounded-lg p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="text-gray-700">Documento:</span> | |
| <span class="font-medium" id="documentNameDisplay">Contrato de Prestação de Serviços</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-700">Valor:</span> | |
| <span class="text-xl font-bold text-primary">R$ 29,90</span> | |
| </div> | |
| </div> | |
| <!-- Payment Options --> | |
| <div class="space-y-4 mb-8"> | |
| <button class="w-full bg-yellow-400 hover:bg-yellow-500 text-gray-900 font-medium py-3 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fab fa-cc-paypal text-xl mr-3"></i> | |
| Pagar com PayPal | |
| </button> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-qrcode text-xl mr-3"></i> | |
| Pagar com Pix | |
| </button> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fab fa-cc-visa text-xl mr-3"></i> | |
| Pagar com Cartão | |
| </button> | |
| </div> | |
| <p class="text-sm text-gray-500">Pagamento 100% seguro. Seu documento será liberado imediatamente após a confirmação.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Download Section (Hidden by default) --> | |
| <section id="downloadSection" class="py-16 bg-white hidden"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-2xl mx-auto bg-gradient-to-r from-primary to-secondary rounded-xl shadow-md p-8 text-center text-white"> | |
| <div class="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center text-3xl mx-auto mb-6"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold mb-4">Documento Gerado com Sucesso!</h2> | |
| <p class="mb-8 opacity-90">Seu documento está pronto para download. Você também receberá uma cópia por e-mail.</p> | |
| <button id="downloadBtn" class="bg-white text-primary font-bold py-3 px-8 rounded-full text-lg hover:bg-gray-100 transition duration-300 inline-flex items-center mx-auto"> | |
| <i class="fas fa-download mr-2"></i> | |
| Baixar PDF | |
| </button> | |
| <div class="mt-8 pt-6 border-t border-white border-opacity-20"> | |
| <p class="text-sm opacity-80">Dica: Salve uma cópia do documento e compartilhe com as partes envolvidas.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-primary mb-12">O que nossos clientes dizem</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-primary mr-4"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Carlos Silva</h4> | |
| <p class="text-sm text-gray-500">Prestador de serviços</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Usei o contrato de prestação de serviços e foi perfeito para meu trabalho. Economizei tempo e dinheiro que gastaria com um advogado."</p> | |
| <div class="mt-4 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> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-primary mr-4"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Ana Paula</h4> | |
| <p class="text-sm text-gray-500">Proprietária</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"O contrato de aluguel foi exatamente o que eu precisava. Fácil de preencher e muito profissional. Meu inquilino também aprovou!"</p> | |
| <div class="mt-4 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> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-primary mr-4"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold">Roberto Almeida</h4> | |
| <p class="text-sm text-gray-500">Freelancer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Finalmente encontrei uma solução prática para meus documentos. Uso há 6 meses e nunca tive problemas com os contratos gerados."</p> | |
| <div class="mt-4 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> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4 max-w-3xl"> | |
| <h2 class="text-3xl font-bold text-center text-primary mb-12">Perguntas Frequentes</h2> | |
| <div class="space-y-4"> | |
| <!-- Question 1 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-question w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition duration-300 flex justify-between items-center"> | |
| <span class="font-medium">Os documentos gerados têm validade legal?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer p-4 hidden"> | |
| <p class="text-gray-600">Sim, nossos documentos são baseados em modelos jurídicos padrão e têm validade legal quando devidamente preenchidos e assinados pelas partes. No entanto, para casos complexos ou específicos, recomendamos consultar um advogado.</p> | |
| </div> | |
| </div> | |
| <!-- Question 2 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-question w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition duration-300 flex justify-between items-center"> | |
| <span class="font-medium">Posso editar o documento após o download?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer p-4 hidden"> | |
| <p class="text-gray-600">Sim, o documento é fornecido em formato PDF editável. Você pode abrir em programas como Adobe Acrobat Reader e editar os campos conforme necessário. Também incluímos instruções de edição no e-mail de confirmação.</p> | |
| </div> | |
| </div> | |
| <!-- Question 3 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-question w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition duration-300 flex justify-between items-center"> | |
| <span class="font-medium">Quanto tempo leva para receber meu documento?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer p-4 hidden"> | |
| <p class="text-gray-600">O processo é instantâneo! Assim que o pagamento for confirmado, você receberá imediatamente o link para download do documento. Em caso de pagamento por Pix ou cartão, a confirmação pode levar alguns minutos.</p> | |
| </div> | |
| </div> | |
| <!-- Question 4 --> | |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> | |
| <button class="faq-question w-full text-left p-4 bg-gray-50 hover:bg-gray-100 transition duration-300 flex justify-between items-center"> | |
| <span class="font-medium">E se eu precisar de um documento que não está na lista?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer p-4 hidden"> | |
| <p class="text-gray-600">Oferecemos serviço de criação de modelos personalizados. Entre em contato conosco através do e-mail contato@gerafacildocs.com.br com os detalhes do documento que você precisa, e retornaremos com uma proposta.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Pronto para gerar seu documento?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">Economize tempo e dinheiro com nossos modelos profissionais.</p> | |
| <a href="#generate" class="bg-white text-primary font-bold py-3 px-8 rounded-full text-lg hover:bg-gray-100 transition duration-300 inline-block"> | |
| Começar agora | |
| </a> | |
| </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 mb-8"> | |
| <!-- Column 1 --> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white font-bold mr-3">GF</div> | |
| <h3 class="text-xl font-bold">GeraFácil Docs</h3> | |
| </div> | |
| <p class="text-gray-400">Documentos prontos em minutos, sem complicação.</p> | |
| </div> | |
| <!-- Column 2 --> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Links Úteis</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Início</a></li> | |
| <li><a href="#how-it-works" class="text-gray-400 hover:text-white transition duration-300">Como Funciona</a></li> | |
| <li><a href="#templates" class="text-gray-400 hover:text-white transition duration-300">Modelos</a></li> | |
| <li><a href="#generate" class="text-gray-400 hover:text-white transition duration-300">Gerar Documento</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 3 --> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Suporte</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Central de Ajuda</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Política de Privacidade</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Termos de Uso</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Contato</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 4 --> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Contato</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-3 text-gray-400"></i> | |
| <span class="text-gray-400">contato@gerafacildocs.com.br</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-3 text-gray-400"></i> | |
| <span class="text-gray-400">(11) 98765-4321</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-3 text-gray-400"></i> | |
| <span class="text-gray-400">São Paulo - SP</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800"> | |
| <p class="text-gray-400 text-center text-sm"> | |
| © 2023 GeraFácil Docs. Todos os direitos reservados. | |
| </p> | |
| <p class="text-gray-500 text-center text-xs mt-2"> | |
| Este site não oferece consultoria jurídica. Os documentos gerados são modelos simples de uso geral. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Document templates and their fields | |
| const documentTemplates = { | |
| service: { | |
| name: "Contrato de Prestação de Serviços", | |
| fields: [ | |
| { type: "text", name: "contractorName", label: "Nome do Contratante", placeholder: "Nome completo ou razão social" }, | |
| { type: "text", name: "contractorId", label: "CPF/CNPJ do Contratante", placeholder: "000.000.000-00 ou 00.000.000/0000-00" }, | |
| { type: "text", name: "providerName", label: "Nome do Prestador", placeholder: "Nome completo ou razão social" }, | |
| { type: "text", name: "providerId", label: "CPF/CNPJ do Prestador", placeholder: "000.000.000-00 ou 00.000.000/0000-00" }, | |
| { type: "text", name: "serviceDescription", label: "Descrição do Serviço", placeholder: "Descreva detalhadamente o serviço a ser prestado" }, | |
| { type: "text", name: "serviceValue", label: "Valor do Serviço", placeholder: "R$ 0,00" }, | |
| { type: "date", name: "startDate", label: "Data de Início" }, | |
| { type: "date", name: "endDate", label: "Data de Término (se aplicável)", required: false }, | |
| { type: "text", name: "paymentTerms", label: "Condições de Pagamento", placeholder: "Ex: 50% no início e 50% na entrega" }, | |
| { type: "textarea", name: "additionalClauses", label: "Cláusulas Adicionais", placeholder: "Informe quaisquer cláusulas específicas", required: false } | |
| ] | |
| }, | |
| rental: { | |
| name: "Contrato de Aluguel Residencial", | |
| fields: [ | |
| { type: "text", name: "landlordName", label: "Nome do Locador", placeholder: "Nome completo do proprietário" }, | |
| { type: "text", name: "landlordId", label: "CPF do Locador", placeholder: "000.000.000-00" }, | |
| { type: "text", name: "tenantName", label: "Nome do Locatário", placeholder: "Nome completo do inquilino" }, | |
| { type: "text", name: "tenantId", label: "CPF do Locatário", placeholder: "000.000.000-00" }, | |
| { type: "text", name: "propertyAddress", label: "Endereço do Imóvel", placeholder: "Rua, número, complemento, bairro, cidade - estado" }, | |
| { type: "text", name: "rentValue", label: "Valor do Aluguel", placeholder: "R$ 0,00" }, | |
| { type: "date", name: "startDate", label: "Data de Início" }, | |
| { type: "date", name: "endDate", label: "Data de Término" }, | |
| { type: "text", name: "depositValue", label: "Valor do Depósito Caução", placeholder: "R$ 0,00" }, | |
| { type: "text", name: "paymentDay", label: "Dia de Vencimento", placeholder: "Ex: Todo dia 10 do mês" }, | |
| { type: "textarea", name: "propertyRules", label: "Regras do Imóvel", placeholder: "Informe regras específicas", required: false } | |
| ] | |
| }, | |
| residence: { | |
| name: "Declaração de Residência", | |
| fields: [ | |
| { type: "text", name: "declarantName", label: "Nome do Declarante", placeholder: "Nome completo" }, | |
| { type: "text", name: "declarantId", label: "CPF do Declarante", placeholder: "000.000.000-00" }, | |
| { type: "text", name: "residentName", label: "Nome do Residente", placeholder: "Nome completo do residente" }, | |
| { type: "text", name: "residentId", label: "CPF do Residente", placeholder: "000.000.000-00" }, | |
| { type: "text", name: "propertyAddress", label: "Endereço Residencial", placeholder: "Rua, número, complemento, bairro, cidade - estado" }, | |
| { type: "date", name: "residenceStart", label: "Data de Início da Residência" }, | |
| { type: "text", name: "propertyOwner", label: "Proprietário do Imóvel", placeholder: "Nome completo do proprietário", required: false }, | |
| { type: "textarea", name: "additionalInfo", label: "Informações Adicionais", placeholder: "Outras informações relevantes", required: false } | |
| ] | |
| }, | |
| responsibility: { | |
| name: "Termo de Responsabilidade", | |
| fields: [ | |
| { type: "text", name: "responsibleName", label: "Nome do Responsável", placeholder: "Nome completo" }, | |
| { type: "text", name: "responsibleId", label: "CPF do Responsável", placeholder: "000.000.000-00" }, | |
| { type: "text", name: "itemDescription", label: "Descrição do Bem/Atividade", placeholder: "Descreva o bem ou atividade pela qual está se responsabilizando" }, | |
| { type: "text", name: "itemValue", label: "Valor Estimado (se aplicável)", placeholder: "R$ 0,00", required: false }, | |
| { type: "date", name: "startDate", label: "Data de Início" }, | |
| { type: "date", name: "endDate", label: "Data de Término (se aplicável)", required: false }, | |
| { type: "textarea", name: "responsibilityTerms", label: "Termos da Responsabilidade", placeholder: "Descreva os termos específicos da responsabilidade" } | |
| ] | |
| }, | |
| freelance: { | |
| name: "Declaração de Trabalho Autônomo", | |
| fields: [ | |
| { type: "text", name: "workerName", label: "Nome do Autônomo", placeholder: "Nome completo" }, | |
| { type: "text", name: "workerId", label: "CPF do Autônomo", placeholder: "000.000.000-00" }, | |
| { type: "text", name: "activityDescription", label: "Descrição da Atividade", placeholder: "Descreva a atividade autônoma exercida" }, | |
| { type: "date", name: "activityStart", label: "Data de Início da Atividade" }, | |
| { type: "text", name: "averageIncome", label: "Renda Mensal Média", placeholder: "R$ 0,00", required: false }, | |
| { type: "textarea", name: "clientReferences", label: "Principais Clientes/Contratos", placeholder: "Liste principais clientes ou contratos", required: false }, | |
| { type: "text", name: "purpose", label: "Finalidade da Declaração", placeholder: "Ex: Comprovação de renda, abertura de conta bancária" } | |
| ] | |
| } | |
| }; | |
| // DOM elements | |
| const documentTypeSelect = document.getElementById('documentType'); | |
| const formFieldsContainer = document.getElementById('formFields'); | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const paymentSection = document.getElementById('paymentSection'); | |
| const downloadSection = document.getElementById('downloadSection'); | |
| const documentNameDisplay = document.getElementById('documentNameDisplay'); | |
| const downloadBtn = document.getElementById('downloadBtn'); | |
| // Template links | |
| const templateLinks = document.querySelectorAll('[data-template]'); | |
| // FAQ functionality | |
| const faqQuestions = document.querySelectorAll('.faq-question'); | |
| // Event listeners | |
| documentTypeSelect.addEventListener('change', updateFormFields); | |
| generateBtn.addEventListener('click', showPaymentSection); | |
| downloadBtn.addEventListener('click', generateDocument); | |
| templateLinks.forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const template = this.getAttribute('data-template'); | |
| documentTypeSelect.value = template; | |
| updateFormFields(); | |
| window.scrollTo({ | |
| top: document.getElementById('generate').offsetTop - 100, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| faqQuestions.forEach(question => { | |
| question.addEventListener('click', function() { | |
| const answer = this.nextElementSibling; | |
| const icon = this.querySelector('i'); | |
| answer.classList.toggle('hidden'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| // Functions | |
| function updateFormFields() { | |
| const selectedTemplate = documentTypeSelect.value; | |
| if (!selectedTemplate) { | |
| formFieldsContainer.innerHTML = ` | |
| <div class="text-center py-10 text-gray-500"> | |
| <i class="fas fa-file-alt text-4xl mb-3"></i> | |
| <p>Selecione um tipo de documento para começar</p> | |
| </div> | |
| `; | |
| return; | |
| } | |
| const template = documentTemplates[selectedTemplate]; | |
| let fieldsHTML = ''; | |
| template.fields.forEach(field => { | |
| if (field.type === 'textarea') { | |
| fieldsHTML += ` | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">${field.label}${field.required === false ? '' : ' *'}</label> | |
| <textarea name="${field.name}" placeholder="${field.placeholder}" | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary focus:ring-opacity-50" | |
| ${field.required === false ? '' : 'required'}>${field.value || ''}</textarea> | |
| </div> | |
| `; | |
| } else { | |
| fieldsHTML += ` | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-medium mb-2">${field.label}${field.required === false ? '' : ' *'}</label> | |
| <input type="${field.type}" name="${field.name}" placeholder="${field.placeholder}" | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary focus:ring-opacity-50" | |
| ${field.required === false ? '' : 'required'} value="${field.value || ''}"> | |
| </div> | |
| `; | |
| } | |
| }); | |
| formFieldsContainer.innerHTML = fieldsHTML; | |
| } | |
| function showPaymentSection() { | |
| const selectedTemplate = documentTypeSelect.value; | |
| if (!selectedTemplate) { | |
| alert('Por favor, selecione um tipo de documento'); | |
| return; | |
| } | |
| // In a real app, you would validate the form here | |
| documentNameDisplay.textContent = documentTemplates[selectedTemplate].name; | |
| paymentSection.style.display = 'block'; | |
| downloadSection.classList.add('hidden'); | |
| window.scrollTo({ | |
| top: paymentSection.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| function generateDocument() { | |
| // In a real app, this would generate a PDF with the form data | |
| // Here we just simulate the process | |
| paymentSection.style.display = 'none'; | |
| downloadSection.classList.remove('hidden'); | |
| window.scrollTo({ | |
| top: downloadSection.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Simulate PDF generation | |
| setTimeout(() => { | |
| // Create a dummy PDF download | |
| const blob = new Blob(["Simulated PDF content - in a real app this would be your generated document"], {type: "application/pdf"}); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `${documentTemplates[documentTypeSelect.value].name.replace(/\s+/g, '_')}.pdf`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| URL.revokeObjectURL(url); | |
| }, 1000); | |
| } | |
| </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=Xacodavt/geraf-cil-docs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |