Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SecraPet - Assistente Virtual para Clínicas Veterinárias</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, #e9d5ff 0%, #fbcfe8 50%, #ffffff 100%); | |
| } | |
| .chat-container { | |
| height: 400px; | |
| transition: all 0.3s ease; | |
| } | |
| .chat-message { | |
| max-width: 80%; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.02); | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%); | |
| color: white; | |
| border: none; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(167, 139, 250, 0.3), 0 4px 6px -2px rgba(244, 114, 182, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-paw text-purple-500 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-purple-600">SecraPet</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#dores" class="px-3 py-2 text-sm font-medium hover:text-purple-600">Dores</a> | |
| <a href="#beneficios" class="px-3 py-2 text-sm font-medium hover:text-purple-600">Benefícios</a> | |
| <a href="#depoimentos" class="px-3 py-2 text-sm font-medium hover:text-purple-600">Depoimentos</a> | |
| <a href="#demo" class="px-3 py-2 text-sm font-medium hover:text-purple-600">Converse com a Paula</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <a href="#cta" class="btn-primary ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"> | |
| Agende Demonstração | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> | |
| <div class="mb-12 lg:mb-0"> | |
| <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl"> | |
| Automatize seu WhatsApp e encante tutores sem parar suas consultas | |
| </h1> | |
| <p class="mt-6 text-xl text-gray-700"> | |
| A Paula, nossa assistente virtual, cuida da comunicação da sua clínica 24/7 no WhatsApp, enquanto você se dedica ao que realmente importa: cuidar dos animais. | |
| </p> | |
| <div class="mt-10 flex flex-wrap gap-4"> | |
| <a href="#cta" class="btn-primary inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm"> | |
| Agende uma demonstração gratuita | |
| </a> | |
| <a href="#demo" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-purple-700 bg-white hover:bg-purple-50"> | |
| <i class="fas fa-play-circle mr-2"></i> Ver vídeo | |
| </a> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1583337130417-3346a1be7dee?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="Veterinária sorrindo com cachorro" class="rounded-lg shadow-xl"> | |
| <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-100 rounded-full p-3"> | |
| <i class="fas fa-clock text-purple-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500">Economize até</p> | |
| <p class="text-xl font-bold text-gray-900">15h semanais</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pain Points Section --> | |
| <div id="dores" class="bg-white py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| A realidade das clínicas veterinárias | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> | |
| Conheça as principais dores que a SecraPet ajuda a resolver | |
| </p> | |
| </div> | |
| <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <div class="bg-purple-50 p-8 rounded-xl feature-card transition duration-300"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-white text-purple-600 shadow-md mx-auto"> | |
| <i class="fas fa-burn text-2xl"></i> | |
| </div> | |
| <h3 class="mt-6 text-xl font-bold text-center text-gray-900">Sobrecarga e Burnout</h3> | |
| <p class="mt-4 text-center text-gray-600"> | |
| Atender mensagens fora do horário, lidar com agendamentos e responder às mesmas perguntas repetidamente esgotam sua energia. | |
| </p> | |
| </div> | |
| <div class="bg-pink-50 p-8 rounded-xl feature-card transition duration-300"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-white text-pink-600 shadow-md mx-auto"> | |
| <i class="fas fa-calendar-times text-2xl"></i> | |
| </div> | |
| <h3 class="mt-6 text-xl font-bold text-center text-gray-900">Perda de Clientes</h3> | |
| <p class="mt-4 text-center text-gray-600"> | |
| Quando os tutores não recebem respostas rápidas, acabam procurando outras clínicas que atendam suas expectativas de comunicação. | |
| </p> | |
| </div> | |
| <div class="bg-purple-50 p-8 rounded-xl feature-card transition duration-300"> | |
| <div class="flex items-center justify-center h-16 w-16 rounded-full bg-white text-purple-600 shadow-md mx-auto"> | |
| <i class="fas fa-tired text-2xl"></i> | |
| </div> | |
| <h3 class="mt-6 text-xl font-bold text-center text-gray-900">Cansaço Mental</h3> | |
| <p class="mt-4 text-center text-gray-600"> | |
| A sobrecarga de tarefas administrativas reduz sua capacidade de se dedicar plenamente aos pacientes durante as consultas. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Benefits Section --> | |
| <div id="beneficios" class="bg-gray-50 py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Como a SecraPet transforma sua clínica | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> | |
| Benefícios que farão você se perguntar como vivia sem a Paula | |
| </p> | |
| </div> | |
| <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-4"> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-clock text-xl"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Atendimento 24/7</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| A Paula responde mensagens a qualquer hora, inclusive finais de semana e feriados, sem custo adicional. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-full bg-pink-100 text-pink-600"> | |
| <i class="fas fa-calendar-check text-xl"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">Agendamento Automático</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Integração direta com sua agenda. A Paula marca consultas conforme sua disponibilidade, sem conflitos. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">IA Humanizada</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Respostas naturais e empáticas que fazem os tutores acharem que estão falando com uma recepcionista real. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-full bg-pink-100 text-pink-600"> | |
| <i class="fas fa-hourglass-half text-xl"></i> | |
| </div> | |
| <h3 class="mt-6 text-lg font-medium text-gray-900">+15h Semanais</h3> | |
| <p class="mt-2 text-base text-gray-600"> | |
| Economize até 15 horas por semana que seriam gastas com atendimento e agendamentos manuais. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials Section --> | |
| <div id="depoimentos" class="bg-white py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Quem usa, recomenda | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> | |
| Depoimentos reais de veterinárias que já transformaram suas clínicas | |
| </p> | |
| </div> | |
| <div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3"> | |
| <div class="bg-gray-50 p-8 rounded-xl testimonial-card shadow-sm hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Dra. Ana"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Dra. Ana</h4> | |
| <p class="text-purple-600">Clínica PetLove - SP</p> | |
| </div> | |
| </div> | |
| <p class="mt-6 text-gray-600"> | |
| "A SecraPet mudou minha vida profissional. Antes eu perdia horas respondendo mensagens, agora a Paula faz isso por mim. Meus clientes adoram a rapidez no atendimento e eu recuperei meu tempo e paz de espírito." | |
| </p> | |
| <div class="mt-6 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl testimonial-card shadow-sm hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1594824476967-48c8b964273f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Dra. Carla"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Dra. Carla</h4> | |
| <p class="text-purple-600">VetCare - RJ</p> | |
| </div> | |
| </div> | |
| <p class="mt-6 text-gray-600"> | |
| "Minha taxa de retenção de clientes aumentou 30% depois que implementamos a SecraPet. Os tutores ficam impressionados com o atendimento rápido e personalizado, mesmo fora do horário comercial." | |
| </p> | |
| <div class="mt-6 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl testimonial-card shadow-sm hover:shadow-md"> | |
| <div class="flex items-center"> | |
| <img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Dra. Fernanda"> | |
| <div class="ml-4"> | |
| <h4 class="text-lg font-medium text-gray-900">Dra. Fernanda</h4> | |
| <p class="text-purple-600">Animal Center - MG</p> | |
| </div> | |
| </div> | |
| <p class="mt-6 text-gray-600"> | |
| "Finalmente consegui equilibrar minha vida pessoal e profissional. A Paula cuida de toda a comunicação via WhatsApp, e eu só preciso me preocupar com as consultas. Meus clientes nem percebem que não sou eu quem responde!" | |
| </p> | |
| <div class="mt-6 flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Demo Chat Section --> | |
| <div id="demo" class="bg-gray-50 py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Converse com a Paula | |
| </h2> | |
| <p class="mt-4 text-xl text-gray-600"> | |
| Experimente como nossa assistente virtual pode ajudar sua clínica | |
| </p> | |
| </div> | |
| <div class="mt-12 bg-white rounded-xl shadow-xl overflow-hidden"> | |
| <div class="bg-gradient-to-r from-purple-500 to-pink-500 px-6 py-4 flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-white flex items-center justify-center"> | |
| <i class="fas fa-paw text-purple-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-white">Paula - Assistente SecraPet</h3> | |
| <p class="text-purple-100">Online • Responde em segundos</p> | |
| </div> | |
| <div class="ml-auto flex space-x-2"> | |
| <div class="h-3 w-3 rounded-full bg-green-400"></div> | |
| <div class="h-3 w-3 rounded-full bg-yellow-400"></div> | |
| <div class="h-3 w-3 rounded-full bg-red-400"></div> | |
| </div> | |
| </div> | |
| <div class="chat-container bg-gray-50 p-4 overflow-y-auto"> | |
| <div class="space-y-4" id="chat-messages"> | |
| <div class="chat-message bg-white p-4 rounded-lg shadow-sm"> | |
| <p class="text-gray-800">Olá! Eu sou a Paula, assistente virtual da SecraPet. Como posso ajudar sua clínica veterinária hoje? Veja alguns exemplos:</p> | |
| <div class="mt-2 space-y-1"> | |
| <button onclick="sendDemoMessage('Quero agendar uma consulta')" class="text-left w-full px-3 py-2 bg-purple-50 rounded hover:bg-purple-100 text-purple-700">Quero agendar uma consulta</button> | |
| <button onclick="sendDemoMessage('Quais são os horários de funcionamento?')" class="text-left w-full px-3 py-2 bg-purple-50 rounded hover:bg-purple-100 text-purple-700">Quais são os horários de funcionamento?</button> | |
| <button onclick="sendDemoMessage('Meu gato está vomitando')" class="text-left w-full px-3 py-2 bg-purple-50 rounded hover:bg-purple-100 text-purple-700">Meu gato está vomitando</button> | |
| <button onclick="sendDemoMessage('Preciso de um atestado de saúde')" class="text-left w-full px-3 py-2 bg-purple-50 rounded hover:bg-purple-100 text-purple-700">Preciso de um atestado de saúde</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white border-t px-4 py-3"> | |
| <div class="flex"> | |
| <input type="text" id="chat-input" placeholder="Digite sua mensagem..." class="flex-1 border rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <button onclick="sendUserMessage()" class="btn-primary px-4 py-2 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div id="cta" class="gradient-bg py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Transforme sua rotina com a SecraPet | |
| </h2> | |
| <p class="mt-6 text-xl text-gray-700"> | |
| Agende uma demonstração gratuita e descubra como a Paula pode revolucionar o atendimento da sua clínica veterinária. | |
| </p> | |
| <div class="mt-10"> | |
| <a href="#" class="btn-primary inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-md shadow-sm"> | |
| Agendar Demonstração Gratuita | |
| </a> | |
| </div> | |
| <div class="mt-8 bg-white bg-opacity-30 rounded-lg p-4 inline-block"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-white rounded-full p-2"> | |
| <i class="fas fa-check-circle text-purple-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-gray-800"> | |
| <span class="font-medium">Sem compromisso</span> • Sem custo • Sem cartão de crédito | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">SecraPet</h3> | |
| <p class="text-gray-400"> | |
| A assistente virtual que transforma a comunicação das clínicas veterinárias. | |
| </p> | |
| <div class="mt-4 flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Produto</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Funcionalidades</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Planos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Demonstração</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Integrações</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Suporte</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Central de Ajuda</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Tutoriais</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Privacidade</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Termos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">LGPD</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400"> | |
| © 2023 SecraPet. Todos os direitos reservados. | |
| </p> | |
| <div class="mt-4 md:mt-0"> | |
| <p class="text-gray-400"> | |
| Feito com <i class="fas fa-heart text-pink-400"></i> para veterinários | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Demo chat functionality | |
| const demoResponses = { | |
| "Quero agendar uma consulta": "Claro! Vou te ajudar a marcar a consulta. Por favor, me informe:\n\n1. O nome do seu pet e a espécie\n2. O motivo da consulta\n3. Sua preferência de dia e horário\n\nAssim que você me passar essas informações, já verifico a disponibilidade na agenda da clínica e confirmo o agendamento para você!", | |
| "Quais são os horários de funcionamento?": "A clínica funciona nos seguintes horários:\n\nSegunda a Sexta: 8h às 19h\nSábado: 9h às 14h\nDomingo: Fechado\n\nPara emergências fora do horário, temos um plantão 24h. Caso precise, posso te passar o contato ou já conectar com o veterinário de plantão.", | |
| "Meu gato está vomitando": "Sinto muito que seu gatinho não esteja bem! Vamos avaliar a situação:\n\n1. Há quanto tempo ele está vomitando?\n2. Quantas vezes já vomitou?\n3. Há sangue ou algo anormal no vômito?\n4. Ele está comendo e bebendo água normalmente?\n\nCom essas informações, posso te orientar melhor e, se necessário, já marcar uma consulta urgente.", | |
| "Preciso de um atestado de saúde": "Entendido! Para emitir o atestado de saúde, precisamos que:\n\n1. O pet passe em consulta com nosso veterinário\n2. Traga a carteirinha de vacinação atualizada\n3. O pagamento pode ser feito no local\n\nPosso te ajudar a agendar essa consulta? Normalmente emitimos o atestado no mesmo dia." | |
| }; | |
| function sendDemoMessage(message) { | |
| document.getElementById('chat-input').value = message; | |
| sendUserMessage(); | |
| } | |
| function sendUserMessage() { | |
| const input = document.getElementById('chat-input'); | |
| const message = input.value.trim(); | |
| if (message === '') return; | |
| // Add user message to chat | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const userMessage = document.createElement('div'); | |
| userMessage.className = 'chat-message ml-auto bg-purple-100 p-4 rounded-lg shadow-sm'; | |
| userMessage.innerHTML = `<p class="text-gray-800">${message}</p>`; | |
| chatMessages.appendChild(userMessage); | |
| // Clear input | |
| input.value = ''; | |
| // Scroll to bottom | |
| chatMessages.parentElement.scrollTop = chatMessages.parentElement.scrollHeight; | |
| // Show typing indicator | |
| const typingIndicator = document.createElement('div'); | |
| typingIndicator.className = 'chat-message bg-white p-4 rounded-lg shadow-sm'; | |
| typingIndicator.innerHTML = '<div class="flex space-x-2"><div class="w-2 h-2 rounded-full bg-gray-300 animate-bounce"></div><div class="w-2 h-2 rounded-full bg-gray-300 animate-bounce" style="animation-delay: 0.2s"></div><div class="w-2 h-2 rounded-full bg-gray-300 animate-bounce" style="animation-delay: 0.4s"></div></div>'; | |
| chatMessages.appendChild(typingIndicator); | |
| // Scroll to bottom again | |
| chatMessages.parentElement.scrollTop = chatMessages.parentElement.scrollHeight; | |
| // Simulate AI response after delay | |
| setTimeout(() => { | |
| // Remove typing indicator | |
| chatMessages.removeChild(typingIndicator); | |
| // Add AI response | |
| const aiResponse = document.createElement('div'); | |
| aiResponse.className = 'chat-message bg-white p-4 rounded-lg shadow-sm'; | |
| let responseText = "Desculpe, não entendi completamente. Poderia reformular ou escolher uma das opções abaixo?\n\n1. Agendar consulta\n2. Horário de funcionamento\n3. Emergência\n4. Outro assunto"; | |
| // Check if we have a predefined response | |
| for (const key in demoResponses) { | |
| if (message.toLowerCase().includes(key.toLowerCase())) { | |
| responseText = demoResponses[key]; | |
| break; | |
| } | |
| } | |
| aiResponse.innerHTML = `<p class="text-gray-800">${responseText}</p>`; | |
| chatMessages.appendChild(aiResponse); | |
| // Scroll to bottom | |
| chatMessages.parentElement.scrollTop = chatMessages.parentElement.scrollHeight; | |
| }, 1500); | |
| } | |
| // Allow pressing Enter to send message | |
| document.getElementById('chat-input').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendUserMessage(); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=alexandreafd/secrapet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |