Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ASOF - Associação Nacional dos Oficiais de Chancelaria</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500;700&family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .font-azeret { | |
| font-family: 'Azeret Mono', monospace; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #0D2A4A 0%, #005b92 100%); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #82b4d6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-[#0D2A4A] flex items-center justify-center"> | |
| <i class="fas fa-passport text-white text-xl"></i> | |
| </div> | |
| <h1 class="font-azeret font-bold text-xl text-[#0D2A4A]">ASOF</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="nav-link text-[#0D2A4A] font-medium">Início</a> | |
| <a href="#" class="nav-link text-[#0D2A4A] font-medium">Sobre</a> | |
| <a href="#" class="nav-link text-[#0D2A4A] font-medium">Revistas</a> | |
| <a href="#" class="nav-link text-[#0D2A4A] font-medium">Comunicação</a> | |
| <a href="#" class="nav-link text-[#0D2A4A] font-medium">Convênios</a> | |
| <a href="#" class="nav-link text-[#0D2A4A] font-medium">Filiados</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="hidden md:block bg-[#005b92] hover:bg-[#0D2A4A] text-white px-4 py-2 rounded-md transition-all"> | |
| Área do Associado <i class="fas fa-user ml-1"></i> | |
| </a> | |
| <button class="md:hidden text-[#0D2A4A]"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white py-16 md:py-24"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Associação Nacional dos Oficiais de Chancelaria</h1> | |
| <p class="text-xl md:text-2xl mb-8 opacity-90">Representando e defendendo os interesses dos Oficiais de Chancelaria do Serviço Exterior Brasileiro desde 1990</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#" class="bg-white text-[#005b92] hover:bg-gray-100 font-medium px-6 py-3 rounded-md transition-all"> | |
| Conheça a ASOF <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| <a href="#" class="border-2 border-white text-white hover:bg-white hover:text-[#005b92] font-medium px-6 py-3 rounded-md transition-all"> | |
| Filie-se <i class="fas fa-user-plus ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quick Links --> | |
| <section class="bg-[#e7edf4] py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <a href="#" class="bg-white rounded-lg p-4 flex items-center justify-center text-center hover:shadow-md transition-all"> | |
| <div> | |
| <i class="fas fa-newspaper text-3xl text-[#005b92] mb-2"></i> | |
| <p class="font-medium text-[#0D2A4A]">Notícias</p> | |
| </div> | |
| </a> | |
| <a href="#" class="bg-white rounded-lg p-4 flex items-center justify-center text-center hover:shadow-md transition-all"> | |
| <div> | |
| <i class="fas fa-calendar-alt text-3xl text-[#005b92] mb-2"></i> | |
| <p class="font-medium text-[#0D2A4A]">Eventos</p> | |
| </div> | |
| </a> | |
| <a href="#" class="bg-white rounded-lg p-4 flex items-center justify-center text-center hover:shadow-md transition-all"> | |
| <div> | |
| <i class="fas fa-handshake text-3xl text-[#005b92] mb-2"></i> | |
| <p class="font-medium text-[#0D2A4A]">Convênios</p> | |
| </div> | |
| </a> | |
| <a href="#" class="bg-white rounded-lg p-4 flex items-center justify-center text-center hover:shadow-md transition-all"> | |
| <div> | |
| <i class="fas fa-book text-3xl text-[#005b92] mb-2"></i> | |
| <p class="font-medium text-[#0D2A4A]">Biblioteca</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h2 class="text-3xl font-bold text-[#0D2A4A] mb-6">Sobre a ASOF</h2> | |
| <p class="text-gray-700 mb-4">Fundada em 1990, a ASOF é a entidade representativa dos Oficiais de Chancelaria do Serviço Exterior Brasileiro, profissionais essenciais para a execução da política externa brasileira.</p> | |
| <p class="text-gray-700 mb-6">Nossa missão é defender os interesses da categoria, promover o aprimoramento profissional e oferecer suporte jurídico e assistencial aos associados.</p> | |
| <a href="#" class="inline-block bg-[#005b92] hover:bg-[#0D2A4A] text-white px-6 py-2 rounded-md transition-all"> | |
| Saiba mais <i class="fas fa-info-circle ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-[#e7edf4] rounded-xl p-6"> | |
| <h3 class="text-xl font-bold text-[#0D2A4A] mb-4">Nossos Objetivos</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-[#82b4d6] mt-1 mr-3"></i> | |
| <span class="text-gray-700">Representação junto ao MRE e outras instâncias governamentais</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-[#82b4d6] mt-1 mr-3"></i> | |
| <span class="text-gray-700">Assistência jurídica e social aos associados</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-[#82b4d6] mt-1 mr-3"></i> | |
| <span class="text-gray-700">Aprimoramento profissional e cultural</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-[#82b4d6] mt-1 mr-3"></i> | |
| <span class="text-gray-700">Defesa dos direitos da carreira</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- News Section --> | |
| <section class="py-16 bg-[#e7edf4]"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-[#0D2A4A]">Últimas Notícias</h2> | |
| <a href="#" class="text-[#005b92] hover:text-[#0D2A4A] font-medium"> | |
| Ver todas <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover transition-all"> | |
| <div class="h-48 bg-[#82b4d6] flex items-center justify-center"> | |
| <i class="fas fa-newspaper text-5xl text-white opacity-50"></i> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-sm text-[#005b92] font-medium">10/06/2023</span> | |
| <h3 class="text-xl font-bold text-[#0D2A4A] mt-2 mb-3">ASOF participa de audiência no MRE</h3> | |
| <p class="text-gray-600 mb-4">Representantes da associação se reuniram com autoridades para discutir pautas da carreira.</p> | |
| <a href="#" class="text-[#005b92] hover:text-[#0D2A4A] font-medium"> | |
| Ler mais <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover transition-all"> | |
| <div class="h-48 bg-[#82b4d6] flex items-center justify-center"> | |
| <i class="fas fa-gavel text-5xl text-white opacity-50"></i> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-sm text-[#005b92] font-medium">25/05/2023</span> | |
| <h3 class="text-xl font-bold text-[#0D2A4A] mt-2 mb-3">Novos benefícios para associados</h3> | |
| <p class="text-gray-600 mb-4">ASOF anuncia novos convênios com descontos em saúde, educação e viagens.</p> | |
| <a href="#" class="text-[#005b92] hover:text-[#0D2A4A] font-medium"> | |
| Ler mais <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover transition-all"> | |
| <div class="h-48 bg-[#82b4d6] flex items-center justify-center"> | |
| <i class="fas fa-chalkboard-teacher text-5xl text-white opacity-50"></i> | |
| </div> | |
| <div class="p-6"> | |
| <span class="text-sm text-[#005b92] font-medium">15/05/2023</span> | |
| <h3 class="text-xl font-bold text-[#0D2A4A] mt-2 mb-3">Curso de atualização profissional</h3> | |
| <p class="text-gray-600 mb-4">Inscrições abertas para o programa de capacitação em diplomacia contemporânea.</p> | |
| <a href="#" class="text-[#005b92] hover:text-[#0D2A4A] font-medium"> | |
| Ler mais <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-16 bg-[#0D2A4A] text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">ASOF em Números</h2> | |
| <p class="max-w-2xl mx-auto text-[#82b4d6]">Conheça alguns dados sobre nossa associação e a carreira que representamos</p> | |
| </div> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold mb-2">33</div> | |
| <div class="text-[#82b4d6] font-medium">Anos de história</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold mb-2">800+</div> | |
| <div class="text-[#82b4d6] font-medium">Associados</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold mb-2">63%</div> | |
| <div class="text-[#82b4d6] font-medium">No Brasil</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold mb-2">100+</div> | |
| <div class="text-[#82b4d6] font-medium">Convênios</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Membership Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <img src="https://images.unsplash.com/photo-1521791055366-0d3a7eb0ea94?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Associados ASOF" class="rounded-lg shadow-md w-full"> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <h2 class="text-3xl font-bold text-[#0D2A4A] mb-6">Torne-se um Associado</h2> | |
| <p class="text-gray-700 mb-6">Junte-se à ASOF e tenha acesso a todos os benefícios exclusivos para Oficiais de Chancelaria:</p> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-start"> | |
| <div class="bg-[#82b4d6] rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| <span class="text-gray-700">Assistência jurídica especializada</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-[#82b4d6] rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| <span class="text-gray-700">Acesso a convênios com descontos</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-[#82b4d6] rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| <span class="text-gray-700">Cursos e capacitações exclusivas</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-[#82b4d6] rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-check text-white text-xs"></i> | |
| </div> | |
| <span class="text-gray-700">Representação institucional</span> | |
| </li> | |
| </ul> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <a href="#" class="bg-[#005b92] hover:bg-[#0D2A4A] text-white px-6 py-3 rounded-md text-center transition-all"> | |
| Filie-se agora <i class="fas fa-user-plus ml-2"></i> | |
| </a> | |
| <a href="#" class="border-2 border-[#005b92] text-[#005b92] hover:bg-[#005b92] hover:text-white px-6 py-3 rounded-md text-center transition-all"> | |
| Benefícios <i class="fas fa-star ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Events Section --> | |
| <section class="py-16 bg-[#e7edf4]"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold text-[#0D2A4A]">Próximos Eventos</h2> | |
| <a href="#" class="text-[#005b92] hover:text-[#0D2A4A] font-medium"> | |
| Ver todos <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover transition-all"> | |
| <div class="h-48 bg-[#82b4d6] flex items-center justify-center relative"> | |
| <div class="absolute top-4 left-4 bg-[#0D2A4A] text-white px-3 py-1 rounded-md text-sm font-medium"> | |
| 15 JUN | |
| </div> | |
| <i class="fas fa-calendar-day text-5xl text-white opacity-50"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-[#0D2A4A] mb-3">Assembleia Geral Ordinária</h3> | |
| <div class="flex items-center text-gray-500 mb-3"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>14:00 - 17:00</span> | |
| </div> | |
| <div class="flex items-center text-gray-500 mb-4"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> | |
| <span>Sede da ASOF - Brasília/DF</span> | |
| </div> | |
| <a href="#" class="text-[#005b92] hover:text-[#0D2A4A] font-medium"> | |
| Mais informações <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover transition-all"> | |
| <div class="h-48 bg-[#82b4d6] flex items-center justify-center relative"> | |
| <div class="absolute top-4 left-4 bg-[#0D2A4A] text-white px-3 py-1 rounded-md text-sm font-medium"> | |
| 22 JUN | |
| </div> | |
| <i class="fas fa-chalkboard-teacher text-5xl text-white opacity-50"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-[#0D2A4A] mb-3">Workshop: Diplomacia Digital</h3> | |
| <div class="flex items-center text-gray-500 mb-3"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>09:00 - 12:00</span> | |
| </div> | |
| <div class="flex items-center text-gray-500 mb-4"> | |
| <i class="fas fa-video mr-2"></i> | |
| <span>Evento Online</span> | |
| </div> | |
| <a href="#" class="text-[#005b92] hover:text-[#0D2A4A] font-medium"> | |
| Inscreva-se <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover transition-all"> | |
| <div class="h-48 bg-[#82b4d6] flex items-center justify-center relative"> | |
| <div class="absolute top-4 left-4 bg-[#0D2A4A] text-white px-3 py-1 rounded-md text-sm font-medium"> | |
| 30 JUN | |
| </div> | |
| <i class="fas fa-glass-cheers text-5xl text-white opacity-50"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-[#0D2A4A] mb-3">Confratenização Anual</h3> | |
| <div class="flex items-center text-gray-500 mb-3"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>19:00 - 23:00</span> | |
| </div> | |
| <div class="flex items-center text-gray-500 mb-4"> | |
| <i class="fas fa-map-marker-alt mr-2"></i> | |
| <span>Hotel Nacional - Brasília/DF</span> | |
| </div> | |
| <a href="#" class="text-[#005b92] hover:text-[#0D2A4A] font-medium"> | |
| Confirmar presença <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="py-16 bg-[#005b92] text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Receba nossas atualizações</h2> | |
| <p class="text-[#e7edf4] mb-8">Cadastre-se para receber notícias, eventos e informações importantes sobre a ASOF diretamente no seu e-mail.</p> | |
| <form class="flex flex-col sm:flex-row gap-2 max-w-lg mx-auto"> | |
| <input type="email" placeholder="Seu e-mail" class="flex-grow px-4 py-3 rounded-md text-gray-800 focus:outline-none focus:ring-2 focus:ring-[#82b4d6]"> | |
| <button type="submit" class="bg-[#0D2A4A] hover:bg-[#0a213d] px-6 py-3 rounded-md font-medium transition-all"> | |
| Assinar <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-[#0D2A4A] text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center"> | |
| <i class="fas fa-passport text-[#0D2A4A] text-xl"></i> | |
| </div> | |
| <h3 class="font-azeret font-bold text-xl">ASOF</h3> | |
| </div> | |
| <p class="text-[#82b4d6] mb-4">Associação Nacional dos Oficiais de Chancelaria do Serviço Exterior Brasileiro</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-[#82b4d6] hover:text-white text-xl"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-[#82b4d6] hover:text-white text-xl"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-[#82b4d6] hover:text-white text-xl"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-[#82b4d6] hover:text-white text-xl"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Links Rápidos</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-[#82b4d6] hover:text-white">Início</a></li> | |
| <li><a href="#" class="text-[#82b4d6] hover:text-white">Sobre a ASOF</a></li> | |
| <li><a href="#" class="text-[#82b4d6] hover:text-white">Notícias</a></li> | |
| <li><a href="#" class="text-[#82b4d6] hover:text-white">Eventos</a></li> | |
| <li><a href="#" class="text-[#82b4d6] hover:text-white">Convênios</a></li> | |
| <li><a href="#" class="text-[#82b4d6] hover:text-white">Filiados</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Contato</h4> | |
| <ul class="space-y-3 text-[#82b4d6]"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3"></i> | |
| <span>SHS Quadra 6, Bloco A, Sala 304<br>Brasília - DF, 70322-915</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-3"></i> | |
| <span>(61) 3224-1234</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-3"></i> | |
| <span>[email protected]</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Horário de Funcionamento</h4> | |
| <ul class="space-y-2 text-[#82b4d6]"> | |
| <li class="flex justify-between"> | |
| <span>Segunda - Sexta</span> | |
| <span>08:00 - 18:00</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Sábado</span> | |
| <span>09:00 - 12:00</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Domingo</span> | |
| <span>Fechado</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-[#1a3a5f] pt-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-[#82b4d6] text-sm mb-4 md:mb-0">© 2023 ASOF - Todos os direitos reservados</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-[#82b4d6] hover:text-white text-sm">Termos de Uso</a> | |
| <a href="#" class="text-[#82b4d6] hover:text-white text-sm">Política de Privacidade</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple mobile menu toggle | |
| document.querySelector('header button').addEventListener('click', function() { | |
| // This would toggle a mobile menu in a real implementation | |
| alert('Menu mobile seria aberto aqui em uma implementação completa'); | |
| }); | |
| </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=SherlockRamos/asof2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |