Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AgentePessoal - Seu Assistente Virtual Inteligente</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#FF6B35', | |
| secondary: '#FFBE0B', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(255,107,53,0.2) 0%, rgba(255,190,11,0.2) 100%), | |
| url('https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1565&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(255,107,53,0.4); | |
| } | |
| .pricing-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(45deg, #FF6B35, #FF9505); | |
| } | |
| .btn-primary:hover { | |
| background: linear-gradient(45deg, #FF9505, #FF6B35); | |
| box-shadow: 0 4px 15px rgba(255,107,53,0.4); | |
| } | |
| .btn-secondary { | |
| background: linear-gradient(45deg, #FFBE0B, #FFD60A); | |
| } | |
| .btn-secondary:hover { | |
| background: linear-gradient(45deg, #FFD60A, #FFBE0B); | |
| box-shadow: 0 4px 15px rgba(255,190,11,0.4); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="flex items-center bg-primary rounded-full p-2"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <a href="#" class="ml-3 text-2xl font-bold text-primary">Agente<span class="text-secondary">Pessoal</span></a> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#features" class="font-medium hover:text-primary transition">Recursos</a> | |
| <a href="#how-it-works" class="font-medium hover:text-primary transition">Como Funciona</a> | |
| <a href="#pricing" class="font-medium hover:text-primary transition">Planos</a> | |
| <a href="#faq" class="font-medium hover:text-primary transition">FAQ</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="hidden md:inline-block px-4 py-2 font-medium hover:text-primary transition">Login</a> | |
| <a href="#pricing" class="btn-primary text-white px-6 py-2 rounded-full font-bold transition-all duration-300">Experimente Grátis</a> | |
| </div> | |
| <button class="md:hidden text-gray-600 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient py-20 text-white"> | |
| <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6"> | |
| Seu <span class="text-primary">Assistente Pessoal</span> | |
| <br>Alimentado por <span class="text-secondary">Inteligência Artificial</span> | |
| </h1> | |
| <p class="text-lg text-white mb-8"> | |
| Controle financeiro, agenda de reuniões e muito mais em um único lugar. | |
| Deixe a IA cuidar da organização para você focar no que realmente importa. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#pricing" class="btn-primary text-white px-8 py-3 rounded-full font-bold text-center transition-all duration-300"> | |
| Comece Agora | |
| </a> | |
| <a href="#how-it-works" class="bg-white text-gray-800 px-8 py-3 rounded-full font-bold text-center transition-all duration-300 hover:bg-gray-100"> | |
| <i class="fas fa-play-circle mr-2"></i> Ver Demonstração | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1565&q=80" | |
| alt="Assistente Virtual" | |
| class="rounded-xl shadow-2xl border-8 border-white transform rotate-2"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Clients Logo --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <p class="text-center text-gray-500 mb-8">Confiam em nossa solução:</p> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <div class="text-2xl font-bold text-gray-400">Empresa A</div> | |
| <div class="text-2xl font-bold text-gray-400">Empresa B</div> | |
| <div class="text-2xl font-bold text-gray-400">Empresa C</div> | |
| <div class="text-2xl font-bold text-gray-400">Empresa D</div> | |
| <div class="text-2xl font-bold text-gray-400">Empresa E</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Recursos Poderosos</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Descubra como o AgentePessoal pode transformar sua produtividade e organização financeira | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-wallet text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Controle Financeiro</h3> | |
| <p class="text-gray-600"> | |
| Monitoramento automático de gastos, categorização de despesas e alertas de orçamento excedido. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-calendar-alt text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Agenda Inteligente</h3> | |
| <p class="text-gray-600"> | |
| Agendamento automático de reuniões, lembretes personalizados e integração com calendários populares. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-line text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Relatórios Detalhados</h3> | |
| <p class="text-gray-600"> | |
| Análises mensais de gastos, gráficos interativos e insights para melhorar sua saúde financeira. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-bell text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Alertas Personalizados</h3> | |
| <p class="text-gray-600"> | |
| Notificações sobre contas a pagar, reuniões importantes e oportunidades de economia. | |
| </p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300"> | |
| <div class="w-14 h-14 bg-primary bg_opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-robot text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Assistente por Voz</h3> | |
| <p class="text-gray-600"> | |
| Interação por comando de voz para adicionar despesas, agendar compromissos e obter informações rápidas. | |
| </p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-md transition-all duration-300"> | |
| <div class="w-14 h-14 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-lock text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Segurança Avançada</h3> | |
| <p class="text-gray-600"> | |
| Criptografia de ponta a ponta, autenticação biométrica e backup automático dos seus dados. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section id="how-it-works" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Como Funciona</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Em poucos passos, você terá seu assistente pessoal de IA trabalhando para você | |
| </p> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <div class="relative"> | |
| <div class="absolute -left-8 -top-8 w-32 h-32 bg-secondary rounded-full opacity-20"></div> | |
| <div class="relative z-10"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="App Interface" | |
| class="rounded-xl shadow-xl border-8 border-white"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <div class="space-y-8"> | |
| <!-- Step 1 --> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white font-bold text-xl">1</div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-xl font-bold mb-2">Cadastre-se Gratuitamente</h3> | |
| <p class="text-gray-600"> | |
| Crie sua conta em menos de 2 minutos e comece seu período de teste imediatamente. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white font-bold text-xl">2</div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-xl font-bold mb-2">Conecte suas Contas</h3> | |
| <p class="text-gray-600"> | |
| Integre seus bancos, cartões e calendários para o AgentePessoal começar a trabalhar. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white font-bold text-xl">3</div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-xl font-bold mb-2">Personalize seu Assistente</h3> | |
| <p class="text-gray-600"> | |
| Defina suas metas financeiras, preferências de agenda e receba recomendações personalizadas. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary text-white font-bold text-xl">4</div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-xl font-bold mb-2">Deixe a IA Trabalhar</h3> | |
| <p class="text-gray-600"> | |
| Nosso agente inteligente cuidará da organização enquanto você aproveita os resultados. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">O Que Nossos Clientes Dizem</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Veja como o AgentePessoal está transformando vidas e negócios | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl"> | |
| <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-600 mb-6"> | |
| "O AgentePessoal revolucionou minha organização financeira. Em 3 meses já economizei 30% mais do que antes!" | |
| </p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Ana Silva" class="w-12 h-12 rounded-full"> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Ana Silva</h4> | |
| <p class="text-sm text-gray-500">Empreendedora</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl"> | |
| <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-600 mb-6"> | |
| "Nunca mais perdi uma reunião importante e consegui organizar melhor minhas finanças pessoais. Recomendo demais!" | |
| </p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Carlos Oliveira" class="w-12 h-12 rounded-full"> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Carlos Oliveira</h4> | |
| <p class="text-sm text-gray-500">Executivo</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl"> | |
| <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-600 mb-6"> | |
| "Para nossa pequena empresa, o plano empresarial foi essencial. Controle de contas a receber e múltiplos usuários facilitaram muito nosso fluxo." | |
| </p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Mariana Costa" class="w-12 h-12 rounded-full"> | |
| <div class="ml-4"> | |
| <h4 class="font-bold">Mariana Costa</h4> | |
| <p class="text-sm text-gray-500">Pequena Empresária</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Planos que Cabem no Seu Bolso</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Escolha o plano ideal para suas necessidades e comece a transformar sua organização hoje mesmo | |
| </p> | |
| </div> | |
| <div class="max-w-5xl mx-auto"> | |
| <div class="flex justify-center mb-8"> | |
| <div class="inline-flex rounded-md shadow-sm"> | |
| <button type="button" class="px-6 py-3 text-sm font-medium rounded-l-lg bg-primary text-white focus:z-10"> | |
| Mensal | |
| </button> | |
| <button type="button" class="px-6 py-3 text-sm font-medium rounded-r-lg bg-gray-100 text-gray-700 hover:bg-gray-200 focus:z-10"> | |
| Anual (20% off) | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Personal Plan --> | |
| <div class="pricing-card bg-white border-2 border-gray-100 rounded-xl p-8 shadow-md transition-all duration-300"> | |
| <div class="mb-6"> | |
| <h3 class="text-2xl font-bold mb-2">Plano Pessoal</h3> | |
| <p class="text-gray-600">Ideal para organização pessoal</p> | |
| </div> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold">R$29</span> | |
| <span class="text-gray-500">/mês</span> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Controle financeiro completo</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Agenda inteligente</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Relatórios mensais</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Alertas personalizados</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Assistente por voz</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times-circle mr-3"></i> | |
| <span>Controle de contas a receber</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times-circle mr-3"></i> | |
| <span>Cobranças automáticas</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times-circle mr-3"></i> | |
| <span>Múltiplos usuários</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="btn-primary text-white w-full py-3 rounded-lg font-bold text-center block transition-all duration-300"> | |
| Assinar Plano | |
| </a> | |
| </div> | |
| <!-- Business Plan --> | |
| <div class="pricing-card bg-white border-2 border-primary rounded-xl p-8 shadow-lg relative transition-all duration-300"> | |
| <div class="absolute top-0 right-0 bg-primary text-white px-4 py-1 text-sm font-bold rounded-bl-lg rounded-tr-lg"> | |
| MAIS POPULAR | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-2xl font-bold mb-2">Plano Empresarial</h3> | |
| <p class="text-gray-600">Para empresas e profissionais</p> | |
| </div> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold">R$79</span> | |
| <span class="text-gray-500">/mês</span> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Todos os recursos do Plano Pessoal</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Controle de contas a receber</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Cobranças automáticas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Múltiplos usuários (até 5)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Relatórios empresariais</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Integração com sistemas contábeis</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Suporte prioritário</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Usuários adicionais por R$15/mês</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="btn-secondary text-gray-800 w-full py-3 rounded-lg font-bold text-center block transition-all duration-300"> | |
| Assinar Plano | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <p class="text-gray-600 mb-4">Não tem certeza de qual plano escolher?</p> | |
| <a href="#" class="text-primary font-bold hover:underline"> | |
| Fale com nosso team de vendas <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Perguntas Frequentes</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Encontre respostas para as dúvidas mais comuns sobre o AgentePessoal | |
| </p> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="space-y-4"> | |
| <!-- FAQ 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <button class="faq-toggle w-full text-left p-6 focus:outline-none"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-bold">Como funciona o período de teste gratuito?</h3> | |
| <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i> | |
| </div> | |
| </button> | |
| <div class="faq-content px-6 pb-6 hidden"> | |
| <p class="text-gray-600"> | |
| Oferecemos 14 dias de teste gratuito para você experimentar todos os recursos do AgentePessoal. | |
| Não é necessário fornecer dados de cartão de crédito durante o período de teste. | |
| Se você decidir continuar após o teste, basta escolher um plano e fazer o pagamento. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <button class="faq-toggle w-full text-left p-6 focus:outline-none"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-bold">Meus dados financeiros estão seguros?</h3> | |
| <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i> | |
| </div> | |
| </button> | |
| <div class="faq-content px-6 pb-6 hidden"> | |
| <p class="text-gray-600"> | |
| Segurança é nossa prioridade. Utilizamos criptografia de ponta a ponta e seguimos os mais altos | |
| padrões de proteção de dados. Nossos servidores estão localizados no Brasil e seguem todas as | |
| regulamentações de proteção de dados pessoais (LGPD). Além disso, você pode ativar autenticação | |
| biométrica para acesso adicional ao aplicativo. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <button class="faq-toggle w-full text-left p-6 focus:outline-none"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-bold">Posso mudar de plano depois?</h3> | |
| <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i> | |
| </div> | |
| </button> | |
| <div class="faq-content px-6 pb-6 hidden"> | |
| <p class="text-gray-600"> | |
| Sim, você pode mudar de plano a qualquer momento. Se você estiver no Plano Pessoal e quiser | |
| atualizar para o Empresarial, a diferença de valor será cobrada proporcionalmente ao restante | |
| do seu ciclo de faturamento. Da mesma forma, se você quiser fazer downgrade, a mudança será | |
| aplicada no próximo ciclo de faturamento. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ 4 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <button class="faq-toggle w-full text-left p-6 focus:outline-none"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-bold">Quais bancos e calendários são compatíveis?</h3> | |
| <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i> | |
| </div> | |
| </button> | |
| <div class="faq-content px-6 pb-6 hidden"> | |
| <p class="text-gray-600"> | |
| Nosso sistema é compatível com os principais bancos brasileiros (Itaú, Bradesco, Santander, | |
| Banco do Brasil, Caixa, Nubank, Inter, entre outros) e com os calendários mais populares | |
| (Google Calendar, Outlook, Apple Calendar). Estamos constantemente adicionando novas integrações | |
| - se seu banco ou calendário não estiver na lista, entre em contato conosco. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ 5 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <button class="faq-toggle w-full text-left p-6 focus:outline-none"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-bold">Como funciona o cancelamento?</h3> | |
| <i class="fas fa-chevron-down text-primary transition-transform duration-300"></i> | |
| </div> | |
| </button> | |
| <div class="faq-content px-6 pb-6 hidden"> | |
| <p class="text-gray-600"> | |
| Você pode cancelar seu plano a qualquer momento através da área de configurações da sua conta. | |
| O cancelamento será efetivado no final do período atual que você já pagou, sem cobranças adicionais. | |
| Todos os seus dados serão mantidos por 90 dias após o cancelamento, caso você queira retornar. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <p class="text-gray-600 mb-4">Não encontrou sua dúvida?</p> | |
| <a href="#" class="text-primary font-bold hover:underline"> | |
| Fale conosco <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-primary text-white"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para Transformar sua Organização?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto"> | |
| Comece hoje mesmo e experimente o poder de um assistente pessoal alimentado por IA | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#pricing" class="bg-white text-primary px-8 py-3 rounded-full font-bold text-center transition-all duration-300 hover:bg-gray-100"> | |
| Comece Agora | |
| </a> | |
| <a href="#" class="border-2 border-white px-8 py-3 rounded-full font-bold text-center transition-all duration-300 hover:bg-white hover:bg-opacity-10"> | |
| Fale com um Especialista | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <!-- Logo and About --> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex items-center bg-primary rounded-full p-2"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <a href="#" class="ml-3 text-2xl font-bold text-white">Agente<span class="text-secondary">Pessoal</span></a> | |
| </div> | |
| <p class="text-gray-400 mb-4"> | |
| Seu assistente virtual inteligente para controle financeiro e organização pessoal. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Links 1 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Produto</h3> | |
| <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">Integrações</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Atualizações</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <!-- Links 2 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Empresa</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Sobre Nós</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Carreiras</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Clientes</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Parceiros</a></li> | |
| </ul> | |
| </div> | |
| <!-- Contact --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Contato</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-gray-400 mr-2"></i> | |
| <a href="mailto:contato@agentepessoal.com" class="text-gray-400 hover:text-white transition">contato@agentepessoal.com</a> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt text-gray-400 mr-2"></i> | |
| <a href="tel:+5511999999999" class="text-gray-400 hover:text-white transition">(11) 99999-9999</a> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i> | |
| <span class="text-gray-400">São Paulo, SP - Brasil</span> | |
| </li> | |
| </ul> | |
| </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 AgentePessoal. Todos os direitos reservados. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Termos de Serviço</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // FAQ Toggle | |
| document.querySelectorAll('.faq-toggle').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const faqContent = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| faqContent.classList.toggle('hidden'); | |
| icon.classList.toggle('fa-chevron-down'); | |
| icon.classList.toggle('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=EduMaster/agentepessoal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |