Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Limitações da Versão Gratuita</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .feature-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover .feature-icon { | |
| transform: scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white py-6 shadow-lg"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-crown text-2xl text-yellow-300"></i> | |
| <h1 class="text-2xl font-bold">PremiumAI</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-yellow-200 transition">Início</a> | |
| <a href="#" class="hover:text-yellow-200 transition">Planos</a> | |
| <a href="#" class="hover:text-yellow-200 transition">Recursos</a> | |
| <a href="#" class="hover:text-yellow-200 transition">Contato</a> | |
| </nav> | |
| <button class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-12"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold text-gray-800 mb-4">Limitações da Versão Gratuita</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> | |
| Nossa versão gratuita oferece recursos básicos para você experimentar, mas com algumas restrições. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 mb-16"> | |
| <!-- Free Tier Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300"> | |
| <div class="gradient-bg text-white py-4 px-6"> | |
| <h3 class="text-2xl font-bold">Versão Gratuita</h3> | |
| <p class="opacity-90">Ideal para testar o serviço</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-baseline mb-6"> | |
| <span class="text-4xl font-bold text-gray-800">R$0</span> | |
| <span class="ml-1 text-gray-500">/mês</span> | |
| </div> | |
| <ul class="space-y-4"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3 feature-icon"></i> | |
| <span>Até 10 requisições por dia</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3 feature-icon"></i> | |
| <span>Acesso a modelos básicos</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times-circle mr-3 feature-icon"></i> | |
| <span>Sem suporte prioritário</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times-circle mr-3 feature-icon"></i> | |
| <span>Sem acesso a recursos avançados</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times-circle mr-3 feature-icon"></i> | |
| <span>Sem histórico de conversas</span> | |
| </li> | |
| </ul> | |
| <button class="w-full mt-8 py-3 px-4 bg-gray-200 text-gray-800 rounded-lg font-medium hover:bg-gray-300 transition"> | |
| Plano Atual | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Pro Tier Card --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover transition duration-300 transform scale-105"> | |
| <div class="bg-purple-700 text-white py-4 px-6"> | |
| <h3 class="text-2xl font-bold">Versão Pro</h3> | |
| <p class="opacity-90">Recomendado para usuários frequentes</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-baseline mb-6"> | |
| <span class="text-4xl font-bold text-gray-800">R$29</span> | |
| <span class="ml-1 text-gray-500">/mês</span> | |
| </div> | |
| <ul class="space-y-4"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3 feature-icon"></i> | |
| <span>Até 100 requisições por dia</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3 feature-icon"></i> | |
| <span>Acesso a modelos avançados</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3 feature-icon"></i> | |
| <span>Suporte por email</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3 feature-icon"></i> | |
| <span>Histórico de 30 dias</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3 feature-icon"></i> | |
| <span>Exportação de dados</span> | |
| </li> | |
| </ul> | |
| <button class="w-full mt-8 py-3 px-4 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition"> | |
| Atualizar Plano | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Enterprise Tier Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300"> | |
| <div class="bg-gray-800 text-white py-4 px-6"> | |
| <h3 class="text-2xl font-bold">Versão Enterprise</h3> | |
| <p class="opacity-90">Para uso profissional intensivo</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-baseline mb-6"> | |
| <span class="text-4xl font-bold text-gray-800">R$99</span> | |
| <span class="ml-1 text-gray-500">/mês</span> | |
| </div> | |
| <ul class="space-y-4"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3 feature-icon"></i> | |
| <span>Requisições ilimitadas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3 feature-icon"></i> | |
| <span>Todos os modelos disponíveis</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3 feature-icon"></i> | |
| <span>Suporte 24/7 prioritário</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3 feature-icon"></i> | |
| <span>Histórico ilimitado</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3 feature-icon"></i> | |
| <span>API dedicada</span> | |
| </li> | |
| </ul> | |
| <button class="w-full mt-8 py-3 px-4 bg-gray-800 text-white rounded-lg font-medium hover:bg-gray-900 transition"> | |
| Contate-nos | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- FAQ Section --> | |
| <div class="max-w-4xl mx-auto"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6 text-center">Perguntas Frequentes</h3> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4"> | |
| <div class="border-b border-gray-200"> | |
| <button class="faq-toggle w-full flex justify-between items-center py-4 px-6 text-left hover:bg-gray-50 transition"> | |
| <span class="font-medium text-gray-800">Quais são as principais limitações da versão gratuita?</span> | |
| <i class="fas fa-chevron-down text-purple-600 transition-transform"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-4 text-gray-600"> | |
| <p>A versão gratuita tem as seguintes limitações principais:</p> | |
| <ul class="list-disc pl-5 mt-2 space-y-1"> | |
| <li>Limite de 10 requisições por dia</li> | |
| <li>Apenas modelos básicos disponíveis</li> | |
| <li>Sem acesso ao histórico de conversas</li> | |
| <li>Respostas podem ser mais lentas em horários de pico</li> | |
| <li>Sem suporte prioritário</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4"> | |
| <div class="border-b border-gray-200"> | |
| <button class="faq-toggle w-full flex justify-between items-center py-4 px-6 text-left hover:bg-gray-50 transition"> | |
| <span class="font-medium text-gray-800">Posso usar a versão gratuita para fins comerciais?</span> | |
| <i class="fas fa-chevron-down text-purple-600 transition-transform"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-4 text-gray-600"> | |
| <p>A versão gratuita é destinada apenas para uso pessoal e teste. Para uso comercial, recomendamos pelo menos o plano Pro, que oferece termos de serviço adequados para negócios e recursos mais robustos.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4"> | |
| <div class="border-b border-gray-200"> | |
| <button class="faq-toggle w-full flex justify-between items-center py-4 px-6 text-left hover:bg-gray-50 transition"> | |
| <span class="font-medium text-gray-800">Como faço para atualizar para uma versão paga?</span> | |
| <i class="fas fa-chevron-down text-purple-600 transition-transform"></i> | |
| </button> | |
| <div class="faq-content hidden px-6 pb-4 text-gray-600"> | |
| <p>Atualizar é simples:</p> | |
| <ol class="list-decimal pl-5 mt-2 space-y-1"> | |
| <li>Acesse sua conta no nosso site</li> | |
| <li>Navegue até a seção "Planos"</li> | |
| <li>Escolha o plano que melhor atende suas necessidades</li> | |
| <li>Complete o pagamento com seu cartão de crédito</li> | |
| <li>Seus novos recursos estarão disponíveis imediatamente</li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <h4 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-crown text-yellow-300 mr-2"></i> | |
| PremiumAI | |
| </h4> | |
| <p class="text-gray-400">Tecnologia de IA avançada para todos os tipos de usuários.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Produto</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Recursos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Planos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li> | |
| </ul> | |
| </div> | |
| <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">Documentação</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Termos de Uso</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 PremiumAI. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // FAQ toggle functionality | |
| document.querySelectorAll('.faq-toggle').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| content.classList.toggle('hidden'); | |
| icon.classList.toggle('transform'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| // Mobile menu toggle (placeholder - would need more implementation) | |
| document.querySelector('.md\\:hidden').addEventListener('click', () => { | |
| alert('Menu mobile seria implementado aqui'); | |
| }); | |
| </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=Callado4810/site-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |