Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Igreja Assembléia de Deus Refúgio Cristão</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=Montserrat:wght@400;600;700&family=Playfair+Display:wght@700&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .hero { | |
| background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1435527173128-983b87201f4d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .sermon-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .floating-cross { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header/Navigation --> | |
| <header class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-cross text-purple-700 text-2xl mr-2"></i> | |
| <h1 class="text-xl md:text-2xl font-bold text-purple-900">Igreja Assembléia de Deus Refúgio Cristão</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-purple-800 hover:text-purple-600 font-medium">Início</a> | |
| <div class="dropdown relative"> | |
| <button class="text-purple-800 hover:text-purple-600 font-medium flex items-center"> | |
| Ministérios <i class="fas fa-chevron-down ml-1 text-sm"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-purple-50">Louvor</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-purple-50">Crianças</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-purple-50">Jovens</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-purple-50">Mulheres</a> | |
| </div> | |
| </div> | |
| <a href="#events" class="text-purple-800 hover:text-purple-600 font-medium">Eventos</a> | |
| <a href="#sermons" class="text-purple-800 hover:text-purple-600 font-medium">Mensagens</a> | |
| <a href="#contact" class="text-purple-800 hover:text-purple-600 font-medium">Contato</a> | |
| </nav> | |
| <button class="md:hidden text-purple-800" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden bg-white shadow-lg" id="mobile-menu"> | |
| <div class="px-4 py-3 flex flex-col space-y-3"> | |
| <a href="#home" class="text-purple-800 hover:text-purple-600">Início</a> | |
| <a href="#" class="text-purple-800 hover:text-purple-600">Ministérios</a> | |
| <a href="#events" class="text-purple-800 hover:text-purple-600">Eventos</a> | |
| <a href="#sermons" class="text-purple-800 hover:text-purple-600">Mensagens</a> | |
| <a href="#contact" class="text-purple-800 hover:text-purple-600">Contato</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero text-white py-20 md:py-32"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <div class="floating-cross inline-block mb-6"> | |
| <i class="fas fa-cross text-5xl text-white opacity-80"></i> | |
| </div> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Bem-vindo à Igreja Assembléia de Deus Refúgio Cristão</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Uma comunidade de fé onde o Espírito Santo transforma vidas</p> | |
| <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6"> | |
| <a href="#events" class="bg-purple-700 hover:bg-purple-600 text-white px-8 py-3 rounded-full font-semibold transition duration-300">Próximos Eventos</a> | |
| <a href="#contact" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-900 text-white px-8 py-3 rounded-full font-semibold transition duration-300">Visite-nos</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-10 md:mb-0 md:pr-10"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-purple-900 mb-6">Nossa História</h2> | |
| <p class="text-gray-700 mb-6">Fundada em 1985, a Igreja Assembléia de Deus Refúgio Cristão tem sido um farol de esperança e transformação em nossa comunidade. Nossa jornada começou com um pequeno grupo de fiéis buscando um avivamento genuíno.</p> | |
| <p class="text-gray-700 mb-6">Hoje, continuamos comprometidos com os princípios pentecostais originais: oração, batismo no Espírito Santo, dons espirituais e uma paixão pelas almas perdidas.</p> | |
| <div class="bg-purple-100 border-l-4 border-purple-700 p-4"> | |
| <p class="text-purple-900 italic">"Porque não me envergonho do evangelho de Cristo, pois é o poder de Deus para salvação de todo aquele que crê."</p> | |
| <p class="text-purple-700 font-semibold mt-2">Romanos 1:16</p> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1452421822248-d4c2b47f0c81?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1474&q=80" alt="Congregação em culto" class="rounded-lg shadow-xl w-full"> | |
| <div class="absolute -bottom-6 -right-6 bg-purple-700 text-white p-4 rounded-lg shadow-lg hidden md:block"> | |
| <p class="text-2xl font-bold">35+</p> | |
| <p class="text-sm">Anos servindo</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bible Verses Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-purple-100 p-6 rounded-lg shadow-md"> | |
| <p class="text-purple-900 italic">"Deus é o nosso refúgio e fortaleza, socorro bem presente na angústia."</p> | |
| <p class="text-purple-700 font-semibold mt-2">Salmos 46:1</p> | |
| </div> | |
| <div class="bg-purple-100 p-6 rounded-lg shadow-md"> | |
| <p class="text-purple-900 italic">"Tomai toda a armadura de Deus, para que possais resistir no dia mau e, havendo feito tudo, ficar firmes."</p> | |
| <p class="text-purple-700 font-semibold mt-2">Efésios 6:13</p> | |
| </div> | |
| <div class="bg-purple-100 p-6 rounded-lg shadow-md"> | |
| <p class="text-purple-900 italic">"Porque virá tempo em que não suportarão a sã doutrina; mas, tendo comichão nos ouvidos, amontoarão para si doutores conforme as suas próprias concupiscências."</p> | |
| <p class="text-purple-700 font-semibold mt-2">2 Timóteo 4:3</p> | |
| </div> | |
| <div class="bg-purple-100 p-6 rounded-lg shadow-md"> | |
| <p class="text-purple-900 italic">"Porque Deus amou o mundo de tal maneira que deu o seu Filho unigênito, para que todo aquele que nele crê não pereça, mas tenha a vida eterna."</p> | |
| <p class="text-purple-700 font-semibold mt-2">João 3:16</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Beliefs Section --> | |
| <section class="py-16 bg-purple-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-purple-900 mb-4">Nossas Crenças</h2> | |
| <div class="w-24 h-1 bg-purple-700 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition duration-300"> | |
| <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-bible text-purple-700 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-purple-900 mb-4">A Bíblia Sagrada</h3> | |
| <p class="text-gray-700">Cremos que a Bíblia é a inspirada, infalível e autoritária Palavra de Deus, nossa única regra de fé e prática.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition duration-300"> | |
| <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-dove text-purple-700 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-purple-900 mb-4">Batismo no Espírito Santo</h3> | |
| <p class="text-gray-700">Cremos no batismo no Espírito Santo com a evidência inicial de falar em outras línguas, conforme Atos 2:4.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition duration-300"> | |
| <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-heart text-purple-700 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-purple-900 mb-4">Salvação</h3> | |
| <p class="text-gray-700">Cremos na salvação pela graça através da fé em Jesus Cristo, com arrependimento genuíno e conversão.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Events Section --> | |
| <section id="events" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-purple-900 mb-4">Próximos Eventos</h2> | |
| <div class="w-24 h-1 bg-purple-700 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-purple-50 rounded-lg overflow-hidden shadow-md"> | |
| <div class="bg-purple-700 text-white py-3 px-4"> | |
| <p class="font-bold text-lg">Culto de Avivamento</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 text-purple-800 rounded-lg p-3 mr-4 text-center"> | |
| <p class="font-bold text-xl">15</p> | |
| <p class="text-sm">JUN</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-700">Sexta-feira, 19:30</p> | |
| <p class="text-gray-500">Igreja Assembléia de Deus Refúgio Cristão</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">Noite especial de busca pelo poder do Espírito Santo com oração, louvor e palavra.</p> | |
| <a href="#" class="text-purple-700 font-semibold hover:underline">Mais detalhes →</a> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 rounded-lg overflow-hidden shadow-md"> | |
| <div class="bg-purple-700 text-white py-3 px-4"> | |
| <p class="font-bold text-lg">Escola Bíblica</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 text-purple-800 rounded-lg p-3 mr-4 text-center"> | |
| <p class="font-bold text-xl">18</p> | |
| <p class="text-sm">JUN</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-700">Domingo, 09:00</p> | |
| <p class="text-gray-500">Igreja Assembléia de Deus Refúgio Cristão</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">Estudo bíblico para todas as idades. Traga sua família para aprender mais da Palavra.</p> | |
| <a href="#" class="text-purple-700 font-semibold hover:underline">Mais detalhes →</a> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 rounded-lg overflow-hidden shadow-md"> | |
| <div class="bg-purple-700 text-white py-3 px-4"> | |
| <p class="font-bold text-lg">Retiro de Jovens</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 text-purple-800 rounded-lg p-3 mr-4 text-center"> | |
| <p class="font-bold text-xl">23-25</p> | |
| <p class="text-sm">JUN</p> | |
| </div> | |
| <div> | |
| <p class="text-gray-700">Sexta a Domingo</p> | |
| <p class="text-gray-500">Acampamento Monte Sinai</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">Fim de semana de comunhão, estudos bíblicos e atividades para jovens de 13-25 anos.</p> | |
| <a href="#" class="text-purple-700 font-semibold hover:underline">Mais detalhes →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block bg-purple-700 hover:bg-purple-600 text-white px-8 py-3 rounded-full font-semibold transition duration-300">Ver todos os eventos</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sermons Section --> | |
| <section id="sermons" class="py-16 bg-purple-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-purple-900 mb-4">Mensagens Recentes</h2> | |
| <div class="w-24 h-1 bg-purple-700 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="sermon-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1501287360003-eab5e2e4b0b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Púlpito" class="w-full h-48 object-cover"> | |
| <div class="absolute bottom-0 left-0 bg-purple-700 text-white px-3 py-1 text-sm">Assistir</div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-purple-900 mb-2">O Poder do Espírito Santo</h3> | |
| <p class="text-gray-600 mb-4">Pr. Aurélio Guilherme Borges • 04/06/2023</p> | |
| <p class="text-gray-700 mb-4">Mensagem sobre a importância de buscar o batismo no Espírito Santo e viver cheio do poder de Deus.</p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-purple-700 font-semibold hover:underline">Assistir agora</a> | |
| <span class="text-gray-500"><i class="fas fa-clock mr-1"></i> 42 min</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="sermon-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1564865878688-9a244444042a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bíblia aberta" class="w-full h-48 object-cover"> | |
| <div class="absolute bottom-0 left-0 bg-purple-700 text-white px-3 py-1 text-sm">Ouvir</div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-purple-900 mb-2">Fé que Move Montanhas</h3> | |
| <p class="text-gray-600 mb-4">Pr. Aurélio Guilherme Borges • 28/05/2023</p> | |
| <p class="text-gray-700 mb-4">Estudo sobre como desenvolver uma fé genuína que pode superar qualquer obstáculo em nossas vidas.</p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-purple-700 font-semibold hover:underline">Ouvir agora</a> | |
| <span class="text-gray-500"><i class="fas fa-clock mr-1"></i> 35 min</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="sermon-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1566459822397-06b8d5e1b9b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mãos levantadas" class="w-full h-48 object-cover"> | |
| <div class="absolute bottom-0 left-0 bg-purple-700 text-white px-3 py-1 text-sm">Assistir</div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-purple-900 mb-2">Vivendo em Santidade</h3> | |
| <p class="text-gray-600 mb-4">Pr. Aurélio Guilherme Borges • 21/05/2023</p> | |
| <p class="text-gray-700 mb-4">Mensagem sobre a importância da santificação na vida do cristão e como praticá-la no dia a dia.</p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-purple-700 font-semibold hover:underline">Assistir agora</a> | |
| <span class="text-gray-500"><i class="fas fa-clock mr-1"></i> 50 min</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block bg-purple-700 hover:bg-purple-600 text-white px-8 py-3 rounded-full font-semibold transition duration-300">Ver mais mensagens</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Leadership Section --> | |
| <section class="py-16 bg-purple-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-purple-900 mb-4">Nossa Liderança</h2> | |
| <div class="w-24 h-1 bg-purple-700 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="w-32 h-32 mx-auto rounded-full bg-purple-100 mb-6 flex items-center justify-center"> | |
| <i class="fas fa-user text-purple-700 text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-purple-900 mb-2">Djalma Silva</h3> | |
| <p class="text-gray-700">Líder de Louvor</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="w-32 h-32 mx-auto rounded-full bg-purple-100 mb-6 flex items-center justify-center"> | |
| <i class="fas fa-user text-purple-700 text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-purple-900 mb-2">Gracielly Borges</h3> | |
| <p class="text-gray-700">Líder de Mulheres</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="w-32 h-32 mx-auto rounded-full bg-purple-100 mb-6 flex items-center justify-center"> | |
| <i class="fas fa-user text-purple-700 text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-purple-900 mb-2">Carlos Teixeira</h3> | |
| <p class="text-gray-700">Líder de Homens</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="w-32 h-32 mx-auto rounded-full bg-purple-100 mb-6 flex items-center justify-center"> | |
| <i class="fas fa-user text-purple-700 text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-purple-900 mb-2">Natalie Teixeira</h3> | |
| <p class="text-gray-700">Líder de Crianças</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="w-32 h-32 mx-auto rounded-full bg-purple-100 mb-6 flex items-center justify-center"> | |
| <i class="fas fa-user text-purple-700 text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-purple-900 mb-2">Albertina Borges</h3> | |
| <p class="text-gray-700">Líder de Oração</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-lg shadow-md text-center"> | |
| <div class="w-32 h-32 mx-auto rounded-full bg-purple-100 mb-6 flex items-center justify-center"> | |
| <i class="fas fa-user text-purple-700 text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-purple-900 mb-2">Israel Borges</h3> | |
| <p class="text-gray-700">Líder de Jovens</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-purple-900 mb-4">Transformações de Vida</h2> | |
| <div class="w-24 h-1 bg-purple-700 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="testimonial-card bg-purple-50 p-8 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Maria Silva" class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h4 class="font-bold text-purple-900">Maria Silva</h4> | |
| <p class="text-gray-600 text-sm">Membro há 5 anos</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic">"Quando cheguei nesta igreja, estava completamente perdida. Através do poder do Espírito Santo e do amor desta comunidade, encontrei propósito e uma nova vida em Cristo."</p> | |
| <div class="mt-4 text-purple-700"> | |
| <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> | |
| <div class="testimonial-card bg-purple-50 p-8 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Carlos Oliveira" class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h4 class="font-bold text-purple-900">Carlos Oliveira</h4> | |
| <p class="text-gray-600 text-sm">Membro há 2 anos</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic">"Fui batizado no Espírito Santo durante um culto de avivamento aqui. Desde então, minha vida nunca mais foi a mesma. A Palavra pregada com unção transformou meu casamento e família."</p> | |
| <div class="mt-4 text-purple-700"> | |
| <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> | |
| <div class="testimonial-card bg-purple-50 p-8 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Ana Santos" class="w-16 h-16 rounded-full object-cover mr-4"> | |
| <div> | |
| <h4 class="font-bold text-purple-900">Ana Santos</h4> | |
| <p class="text-gray-600 text-sm">Membro há 8 meses</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 italic">"Depois de anos em depressão, encontrei libertação e alegria verdadeira através dos cultos e grupos de oração desta igreja. Hoje sirvo no ministério de louvor com gratidão!"</p> | |
| <div class="mt-4 text-purple-700"> | |
| <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> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-purple-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Venha nos Visitar</h2> | |
| <div class="w-24 h-1 bg-white mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <h3 class="text-2xl font-bold mb-6">Informações de Contato</h3> | |
| <div class="flex items-start mb-6"> | |
| <i class="fas fa-map-marker-alt text-xl mr-4 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold mb-1">Endereço</h4> | |
| <p>Rua José Cosme Pamplona, 1737</p> | |
| <p>Bela Vista, Palhoça - SC</p> | |
| <p>CEP: 88132-700</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <i class="fas fa-phone-alt text-xl mr-4 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold mb-1">Telefone</h4> | |
| <p>(48) 9965-0980 (WhatsApp)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <i class="fas fa-envelope text-xl mr-4 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold mb-1">Email</h4> | |
| <p>contato@adrefugiocristao.com.br</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-clock text-xl mr-4 mt-1"></i> | |
| <div> | |
| <h4 class="font-bold mb-1">Horários de Culto</h4> | |
| <p>Sábado: 19h30 (Culto)</p> | |
| <p>Domingo: 19h30 (Culto)</p> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-4">Siga-nos nas redes sociais</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-white text-purple-900 w-10 h-10 rounded-full flex items-center justify-center hover:bg-purple-100 transition duration-300"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="bg-white text-purple-900 w-10 h-10 rounded-full flex items-center justify-center hover:bg-purple-100 transition duration-300"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="bg-white text-purple-900 w-10 h-10 rounded-full flex items-center justify-center hover:bg-purple-100 transition duration-300"><i class="fab fa-youtube"></i></a> | |
| <a href="#" class="bg-white text-purple-900 w-10 h-10 rounded-full flex items-center justify-center hover:bg-purple-100 transition duration-300"><i class="fab fa-whatsapp"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-bold mb-6">Envie uma Mensagem</h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block mb-1">Seu Nome</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 rounded bg-purple-800 border border-purple-700 focus:outline-none focus:ring-2 focus:ring-white"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-1">Seu Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 rounded bg-purple-800 border border-purple-700 focus:outline-none focus:ring-2 focus:ring-white"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block mb-1">Seu Telefone</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-2 rounded bg-purple-800 border border-purple-700 focus:outline-none focus:ring-2 focus:ring-white"> | |
| </div> | |
| <div> | |
| <label for="message" class="block mb-1">Sua Mensagem</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 rounded bg-purple-800 border border-purple-700 focus:outline-none focus:ring-2 focus:ring-white"></textarea> | |
| </div> | |
| <button type="submit" class="bg-white text-purple-900 hover:bg-purple-100 px-8 py-3 rounded-full font-semibold transition duration-300">Enviar Mensagem</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map Section --> | |
| <div class="h-96 w-full"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3539.238123594123!2d-48.6676709242392!3d-27.6331223827256!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x952735a7ac5e0a1d%3A0x2f5a3a7a3a3a3a3a!2sRua%20Jos%C3%A9%20Cosme%20Pamplona%2C%201737%2C%20Bela%20Vista%2C%20Palho%C3%A7a%20-%20SC!5e0!3m2!1spt-BR!2sbr!4v1686771908803!5m2!1spt-BR!2sbr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-purple-950 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-cross text-2xl mr-2"></i> | |
| <h3 class="text-xl font-bold">Igreja Assembléia de Deus Refúgio Cristão</h3> | |
| </div> | |
| <p class="text-purple-300">Uma comunidade de fé comprometida com o avivamento genuíno e a proclamação do Evangelho de Jesus Cristo.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Links Rápidos</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-purple-300 hover:text-white transition duration-300">Início</a></li> | |
| <li><a href="#events" class="text-purple-300 hover:text-white transition duration-300">Eventos</a></li> | |
| <li><a href="#sermons" class="text-purple-300 hover:text-white transition duration-300">Mensagens</a></li> | |
| <li><a href="#contact" class="text-purple-300 hover:text-white transition duration-300">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Ministérios</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-purple-300 hover:text-white transition duration-300">Louvor</a></li> | |
| <li><a href="#" class="text-purple-300 hover:text-white transition duration-300">Crianças</a></li> | |
| <li><a href="#" class="text-purple-300 hover:text-white transition duration-300">Jovens</a></li> | |
| <li><a href="#" class="text-purple-300 hover:text-white transition duration-300">Mulheres</a></li> | |
| <li><a href="#" class="text-purple-300 hover:text-white transition duration-300">Homens</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Newsletter</h4> | |
| <p class="text-purple-300 mb-4">Inscreva-se para receber notícias e eventos em seu email.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Seu email" class="px-4 py-2 rounded-l text-gray-900 w-full focus:outline-none"> | |
| <button type="submit" class="bg-purple-700 hover:bg-purple-600 px-4 py-2 rounded-r"><i class="fas fa-paper-plane"></i></button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-purple-800 mt-12 pt-8 text-center text-purple-400"> | |
| <p>© 2023 Igreja Assembléia de Deus Refúgio Cristão. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-8 right-8 bg-purple-700 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-purple-600 transition duration-300 hidden"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('hidden'); | |
| } else { | |
| backToTopButton.classList.add('hidden'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Smooth Scrolling for Anchor Links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| </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=israelborges/ad-ref-gio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |