Hugging Face's logo

Spaces:
Lioszada
/
teste-avivando
Running

App Files Community
teste-avivando / index.html
Lioszada's picture
Lioszada
Add 2 files
b209788 verified
raw
history blame contribute delete
70.4 kB
 <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Igreja Avivando - Uma comunidade de fé e amor</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/Draggable.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'avivando-dark': '#0D0D0D',
'avivando-brown': '#403E3B',
'avivando-darkred': '#59190B',
'avivando-red': '#A63126',
'avivando-brightred': '#F20505',
'avivando-light': '#F8F8F8',
'avivando-lighttext': '#FFFFFF',
'avivando-darktext': '#333333'
}
}
}
}
</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=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
overflow-x: hidden;
color: #333;
background-image: url('https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/DSC09900.JPG');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax-section {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
/* Hero section with custom background */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/IMG_1078.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/IMG_1078.jpg');
background-size: cover;
background-position: center;
opacity: 0.3;
z-index: 0;
}
.hero-content {
position: relative;
z-index: 1;
}
.sermon-card {
transition: transform 0.3s ease;
}
.sermon-card:hover {
transform: translateY(-10px);
}
.event-card {
transition: all 0.3s ease;
}
.event-card:hover {
transform: scale(1.03);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.navbar {
transition: all 0.3s ease;
}
.navbar.scrolled {
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.dropdown:hover .dropdown-menu {
display: block;
}
.instagram-post {
background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
}
/* WhatsApp Button */
.whatsapp-button {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 99;
background: #A63126;
color: white;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 60px;
height: 60px;
line-height: 60px;
transition: all 0.3s ease;
}
.whatsapp-button:hover {
background: #59190B;
transform: scale(1.1);
}
/* Instagram Button */
.instagram-button {
position: fixed;
bottom: 100px;
right: 30px;
z-index: 99;
background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
color: white;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 60px;
height: 60px;
line-height: 60px;
transition: all 0.3s ease;
}
.instagram-button:hover {
transform: scale(1.1);
}
.instagram-image {
height: 300px;
object-fit: cover;
width: 100%;
}
.leader-card {
transition: all 0.3s ease;
}
.leader-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Efeitos parallax */
.parallax-layer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
will-change: transform;
}
.parallax-content {
position: relative;
z-index: 2;
}
/* Elementos arrastáveis */
.draggable-element {
cursor: grab;
user-select: none;
touch-action: none;
}
.draggable-element:active {
cursor: grabbing;
}
/* Efeito de vidro */
.glass-effect {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Animação flutuante */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
.floating {
animation: float 6s ease-in-out infinite;
}
/* Efeito de partículas */
.particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
}
.particle {
position: absolute;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
pointer-events: none;
}
/* Leader section styles */
.leader-container {
display: flex;
flex-direction: column;
gap: 2rem;
}
.leader-profile {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
background: rgba(0, 0, 0, 0.7);
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
color: white;
}
@media (min-width: 768px) {
.leader-profile {
flex-direction: row;
align-items: flex-start;
}
}
.leader-image {
width: 350px;
height: 400px;
object-fit: cover;
border-radius: 0.5rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
margin: 0 auto;
}
.leader-info {
flex: 1;
}
.leader-name {
color: white;
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.leader-title {
color: #F8F8F8;
font-weight: 600;
margin-bottom: 1rem;
}
.leader-bio {
color: #F8F8F8;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.leader-social {
display: flex;
gap: 1rem;
}
.social-icon {
color: white;
font-size: 1.2rem;
transition: all 0.3s ease;
}
.social-icon:hover {
color: #F20505;
transform: translateY(-2px);
}
/* Contact info styles */
.contact-info {
color: white !important;
}
.contact-icon {
background: #F20505;
color: white;
}
/* Sermons list style */
.sermon-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.sermon-item {
background: rgba(255, 255, 255, 0.9);
border-radius: 0.5rem;
padding: 1rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.sermon-item:hover {
background: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.sermon-item-header {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.sermon-item-title {
font-weight: 600;
color: #333;
}
.sermon-item-date {
color: #666;
font-size: 0.875rem;
}
.sermon-item-description {
color: #555;
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.sermon-item-footer {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
}
.sermon-item-views {
color: #666;
}
.sermon-item-link {
color: #F20505;
font-weight: 500;
}
/* Darker glass effect for contact */
.contact-glass {
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Social media section */
.social-media-title {
color: white;
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 1rem;
}
.social-media-subtitle {
color: white;
font-size: 1.2rem;
margin-bottom: 2rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* Gallery section */
.gallery-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
padding: 2rem 0;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
aspect-ratio: 4/3;
}
.gallery-item:hover {
transform: scale(1.03);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}
.gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.gallery-item:hover .gallery-image {
transform: scale(1.1);
}
.gallery-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 0.5rem;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.gallery-item:hover .gallery-caption {
transform: translateY(0);
}
/* White background sections */
.white-bg {
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
/* Service times grid */
.service-times {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.service-time-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Fixed top info bar */
.top-info-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(89, 25, 11, 0.9);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: 0.5rem 0;
transition: all 0.3s ease;
transform: translateY(-100%);
}
.top-info-bar.visible {
transform: translateY(0);
}
/* Ofertas section */
.pix-container {
background: white;
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: 0 auto;
}
.pix-qr-code {
width: 200px;
height: 200px;
margin: 0 auto 1rem;
border: 1px solid #ddd;
padding: 0.5rem;
background: white;
}
.pix-key {
background: #f8f8f8;
padding: 0.75rem;
border-radius: 0.5rem;
font-family: monospace;
word-break: break-all;
text-align: center;
margin-bottom: 1rem;
}
/* Service times highlight */
.service-times-highlight {
background: rgba(255, 255, 255, 0.1);
border-radius: 1rem;
padding: 2rem;
margin-top: 2rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Donation methods */
.donation-method {
background: white;
border-radius: 0.5rem;
padding: 1.5rem;
margin-bottom: 1rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Gallery button highlight */
.gallery-button {
background: #F20505;
color: white;
font-weight: bold;
padding: 0.75rem 1.5rem;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(242, 5, 5, 0.3);
}
.gallery-button:hover {
background: #A63126;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(242, 5, 5, 0.4);
}
/* Service times highlight */
.service-times-container {
background: rgba(89, 25, 11, 0.8);
border-radius: 1rem;
padding: 2rem;
margin: 2rem auto;
max-width: 800px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.service-time-highlight {
background: rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
padding: 1.5rem;
margin-bottom: 1rem;
border-left: 4px solid #F20505;
}
/* Donation methods highlight */
.donation-method-highlight {
background: rgba(255, 255, 255, 0.9);
border-radius: 0.5rem;
padding: 1.5rem;
margin-bottom: 1rem;
border-left: 4px solid #59190B;
transition: all 0.3s ease;
}
.donation-method-highlight:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Leaders section highlight */
.leaders-highlight {
background: rgba(89, 25, 11, 0.9);
padding: 3rem 0;
margin-top: 3rem;
margin-bottom: 3rem;
}
</style>
</head>
<body>
<!-- WhatsApp Button -->
<a href="https://wa.me/5561996732422" class="whatsapp-button">
<i class="fab fa-whatsapp"></i>
</a>
<!-- Instagram Button -->
<a href="https://www.instagram.com/avivandooficial/" class="instagram-button">
<i class="fab fa-instagram"></i>
</a>
<!-- Fixed Top Info Bar -->
<div class="top-info-bar text-white text-sm">
<div class="container mx-auto px-4 flex justify-between items-center">
<div class="flex space-x-4">
<span><i class="fas fa-phone-alt mr-1"></i> (61) 3308-3546</span>
<span><i class="fas fa-envelope mr-1"></i> [email protected]</span>
</div>
<div class="flex space-x-4">
<a href="https://www.youtube.com/c/Minist%C3%A9rioAvivandoasNa%C3%A7%C3%B5es" class="hover:text-avivando-light"><i class="fab fa-youtube"></i></a>
<a href="https://www.instagram.com/avivandooficial/" class="hover:text-avivando-light"><i class="fab fa-instagram"></i></a>
<a href="https://wa.me/5561996732422" class="hover:text-avivando-light"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
</div>
<!-- Top Bar -->
<div class="bg-avivando-darkred text-avivando-lighttext py-2 px-4 text-sm">
<div class="container mx-auto flex justify-between items-center">
<div class="flex space-x-4">
<span><i class="fas fa-phone-alt mr-1"></i> (61) 3308-3546</span>
<span><i class="fas fa-envelope mr-1"></i> [email protected]</span>
</div>
<div class="flex space-x-4">
<a href="https://www.youtube.com/c/Minist%C3%A9rioAvivandoasNa%C3%A7%C3%B5es" class="hover:text-avivando-light"><i class="fab fa-youtube"></i></a>
<a href="https://www.instagram.com/avivandooficial/" class="hover:text-avivando-light"><i class="fab fa-instagram"></i></a>
<a href="https://wa.me/5561996732422" class="hover:text-avivando-light"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar fixed w-full z-50 bg-white py-4" style="top: 32px;">
<div class="container mx-auto px-4 flex justify-between items-center">
<div class="flex items-center">
<a href="#" class="text-2xl font-bold text-avivando-darkred flex items-center">
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/LOGO%20AVIVANDO%20HORIZONTAL.png" alt="Igreja Avivando" class="h-12">
</a>
</div>
<div class="hidden md:flex space-x-8">
<a href="#home" class="text-gray-800 hover:text-avivando-brightred font-medium">Início</a>
<a href="#events" class="text-gray-800 hover:text-avivando-brightred font-medium">Eventos</a>
<a href="#sermons" class="text-gray-800 hover:text-avivando-brightred font-medium">Mensagens</a>
<a href="#leaders" class="text-gray-800 hover:text-avivando-bbrightred font-medium">Líderes</a>
<a href="#contact" class="text-gray-800 hover:text-avivando-bbrightred font-medium">Contato</a>
<a href="#media" class="text-gray-800 hover:text-avivando-bbrightred font-medium">Mídias</a>
<a href="#offers" class="text-gray-800 hover:text-avivando-bbrightred font-medium">Ofertas</a>
</div>
<div class="md:hidden">
<button id="mobile-menu-button" class="text-gray-800">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white absolute w-full left-0 px-4 pb-4 shadow-lg" style="top: 100%;">
<a href="#home" class="block py-2 border-b border-gray-100">Início</a>
<a href="#events" class="block py-2 border-b border-gray-100">Eventos</a>
<a href="#sermons" class="block py-2 border-b border-gray-100">Mensagens</a>
<a href="#leaders" class="block py-2 border-b border-gray-100">Líderes</a>
<a href="#contact" class="block py-2 border-b border-gray-100">Contato</a>
<a href="#media" class="block py-2 border-b border-gray-100">Mídias</a>
<a href="#offers" class="block py-2">Ofertas</a>
</div>
</div>
</nav>
<!-- Hero Section with Parallax -->
<section id="home" class="hero text-white pt-32 pb-20 md:pt-40 md:pb-28" style="margin-top: 32px;">
<div class="hero-overlay"></div>
<div class="particles" id="particles-1"></div>
<div class="parallax-content container mx-auto px-4 text-center relative z-10 hero-content">
<h1 class="text-4xl md:text-6xl font-bold mb-6 draggable-element" id="hero-title">A unção de Deus está aqui</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto draggable-element" id="hero-subtitle">Venha viver dias sobrenaturais conosco</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#events" class="bg-avivando-bbrightred hover:bg-avivando-red text-white font-bold py-3 px-8 rounded-full transition duration-300 draggable-element">
Próximo Evento <i class="fas fa-arrow-right ml-2"></i>
</a>
<a href="https://www.youtube.com/c/Minist%C3%A9rioAvivandoasNa%C3%A7%C3%B5es" class="bg-transparent hover:bg-white hover:text-avivando-darkred border-2 border-white text-white font-bold py-3 px-8 rounded-full transition duration-300 draggable-element">
Culto Online <i class="fas fa-play-circle ml-2"></i>
</a>
</div>
</div>
<!-- Floating cross elements -->
<div class="absolute top-1/4 left-1/4 text-white text-4xl opacity-20 floating" style="transform: rotate(15deg);">
<i class="fas fa-cross"></i>
</div>
<div class="absolute top-1/3 right-1/4 text-white text-6xl opacity-20 floating" style="transform: rotate(-10deg); animation-delay: 1s;">
<i class="fas fa-cross"></i>
</div>
<div class="absolute bottom-1/4 left-1/3 text-white text-5xl opacity-20 floating" style="transform: rotate(5deg); animation-delay: 2s;">
<i class="fas fa-cross"></i>
</div>
</section>
<!-- Countdown Section -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<!-- ... (mantenha todo o head existente) ... -->
</head>
<body>
<!-- ... (mantenha todo o conteúdo até a seção de Countdown) ... -->
<!-- Countdown Section -->
<section class="bg-avivando-darkred text-white py-8 parallax-section">
<div class="glass-effect container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0 text-center md:text-left">
<h3 class="text-xl font-bold" id="next-service-title">Próximo culto na Avivando</h3>
<p class="text-avivando-lighttext" id="next-service-time"></p>
<p class="text-avivando-lighttext" id="next-service-theme"></p>
</div>
<div class="flex justify-center space-x-4 text-center">
<div class="bg-avivando-dark rounded-lg p-4 w-20 draggable-element">
<div class="text-2xl font-bold" id="days">00</div>
<div class="text-xs">Dias</div>
</div>
<div class="bg-avivando-dark rounded-lg p-4 w-20 draggable-element">
<div class="text-2xl font-bold" id="hours">00</div>
<div class="text-xs">Horas</div>
</div>
<div class="bg-avivando-dark rounded-lg p-4 w-20 draggable-element">
<div class="text-2xl font-bold" id="minutes">00</div>
<div class="text-xs">Minutos</div>
</div>
<div class="bg-avivando-dark rounded-lg p-4 w-20 draggable-element">
<div class="text-2xl font-bold" id="seconds">00</div>
<div class="text-xs">Segundos</div>
</div>
</div>
<a href="#events" class="mt-4 md:mt-0 bg-white text-avivando-darkred hover:bg-gray-100 font-bold py-3 px-6 rounded-full transition duration-300 draggable-element">
Mais Informações
</a>
</div>
</div>
</section>
<!-- ... (mantenha o restante do conteúdo) ... -->
<script>
// ... (mantenha os scripts existentes) ...
// Countdown Timer for Next Service
function updateCountdown() {
// Get current date and time
const now = new Date();
const currentDay = now.getDay(); // 0 = Domingo, 1 = Segunda, etc.
const currentHour = now.getHours();
const currentMinute = now.getMinutes();
// Define all services with day (0-6), hour, minute, name and theme
const services = [
{ day: 1, hour: 20, minute: 0, name: "Segunda-feira", theme: "Culto de Oração" },
{ day: 2, hour: 20, minute: 0, name: "Terça-feira", theme: "Campanha Efatá" },
{ day: 4, hour: 20, minute: 0, name: "Quinta-feira", theme: "Série Destino" },
{ day: 6, hour: 8, minute: 0, name: "Sábado", theme: "Consagração" },
{ day: 6, hour: 20, minute: 0, name: "Sábado", theme: "Santa Ceia" },
{ day: 0, hour: 9, minute: 0, name: "Domingo", theme: "Academia de Líderes" },
{ day: 0, hour: 19, minute: 0, name: "Domingo", theme: "Culto de Celebração" }
];
// Find the next service
let nextService = null;
let daysToAdd = 0;
// Check services for today and upcoming days
for (let i = 0; i < 7; i++) {
const checkDay = (currentDay + i) % 7;
const servicesToday = services.filter(s => s.day === checkDay);
// Sort services by time for this day
servicesToday.sort((a, b) => {
if (a.hour !== b.hour) return a.hour - b.hour;
return a.minute - b.minute;
});
// Check each service for this day
for (const service of servicesToday) {
// If it's today, check if time is in the future
if (i === 0) {
if (service.hour > currentHour ||
(service.hour === currentHour && service.minute > currentMinute)) {
nextService = service;
break;
}
} else {
// For future days, take the first service of the day
nextService = service;
daysToAdd = i;
break;
}
}
if (nextService) break;
}
// If no service found in the next 7 days (shouldn't happen), default to next Monday
if (!nextService) {
nextService = services[0];
daysToAdd = (1 - currentDay + 7) % 7;
}
// Calculate the date of the next service
const nextServiceDate = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate() + daysToAdd,
nextService.hour,
nextService.minute,
0
);
// Update the display
document.getElementById('next-service-title').textContent = `Próximo culto: ${nextService.name}`;
document.getElementById('next-service-time').textContent = `${nextService.hour.toString().padStart(2, '0')}:${nextService.minute.toString().padStart(2, '0')}`;
document.getElementById('next-service-theme').textContent = nextService.theme;
// Calculate time difference
const diff = nextServiceDate - now;
if (diff <= 0) {
// Service is happening now or in the past (shouldn't happen due to our logic)
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
document.getElementById('next-service-title').textContent = 'Culto acontecendo agora!';
return;
}
// Calculate days, hours, minutes, seconds
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
// Update the countdown display
document.getElementById('days').textContent = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
}
// Update countdown immediately and then every second
updateCountdown();
setInterval(updateCountdown, 1000);
// ... (mantenha o restante dos scripts) ...
</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=Lioszada/teste-avivando" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>
<!-- Welcome Section with Parallax -->
<section class="py-16 white-bg relative overflow-hidden">
<div class="particles" id="particles-2"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-12">
<h2 class="text-3xl md:text-4xl font-bold text-avivando-darktext mb-6 draggable-element">Bem-vindo à Igreja Avivando</h2>
<p class="text-avivando-darktext mb-6 draggable-element">Somos uma comunidade cristã comprometida em compartilhar o amor de Deus e transformar vidas através da mensagem do Evangelho. Nossa missão é levar esperança, fé e propósito a todos que nos procuram.</p>
<p class="text-avivando-darktext mb-8 draggable-element">Independentemente de onde você está em sua jornada espiritual, há um lugar para você aqui. Venha como você é e descubra o que significa viver uma vida cheia de propósito e significado.</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="https://g.co/kgs/RbE876W" class="bg-avivando-bbrightred hover: bg-black text-white font-bold py-3 px-6 rounded-full transition duration-300 draggable-element">
Visite-nos <i class="fas fa-map-marker-alt ml-2"></i>
</a>
<a href="https://www.youtube.com/c/Minist%C3%A9rioAvivandoasNa%C3%A7%C3%B5es" class="bg-black-100 hover: bg-avivando-red text-white font-bold py-3 px-6 rounded-full transition duration-300 draggable-element">
Nosso Canal <i class="fab fa-youtube ml-2"></i>
</a>
</div>
</div>
<div class="md:w-1/2">
<div class="relative draggable-element">
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/DSC09900.JPG" alt="Igreja Avivando" class="rounded-lg shadow-xl w-full">
<div class="absolute -bottom-6 -right-6 bg-avivando-red bbrightred text-white p-6 rounded-lg shadow-lg hidden md:block">
<div class="bg-avivando-red text-4xl font-bold">18+</div>
<div class="text-sm">Anos servindo a comunidade</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Service Times Section -->
<section id="service-times" class="py-16 parallax-section">
<div class="service-times-container container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-8">Horários de Culto</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 justify-items-center">
<!-- Monday Service -->
<div class="service-time-highlight">
<h3 class="text-xl font-bold text-white mb-2">Segunda-feira</h3>
<p class="text-avivando-lighttext">Culto de Oração</p>
<p class="text-2xl font-bold text-white mt-2">20:00</p>
</div>
<!-- Tuesday Service -->
<div class="service-time-highlight">
<h3 class="text-xl font-bold text-white mb-2">Terça-feira</h3>
<p class="text-avivando-lighttext">Campanha Efatá</p>
<p class="text-2xl font-bold text-white mt-2">20:00</p>
</div>
<!-- Thursday Service -->
<div class="service-time-highlight">
<h3 class="text-xl font-bold text-white mb-2">Quinta-feira</h3>
<p class="text-avivando-lighttext">Série Destino</p>
<p class="text-2xl font-bold text-white mt-2">20:00</p>
</div>
<!-- Saturday Morning Service -->
<div class="service-time-highlight">
<h3 class="text-xl font-bold text-white mb-2">Sábado</h3>
<p class="text-avivando-lighttext">Consagração</p>
<p class="text-2xl font-bold text-white mt-2">08:00</p>
</div>
<!-- Saturday Evening Service -->
<div class="service-time-highlight">
<h3 class="text-xl font-bold text-white mb-2">Sábado</h3>
<p class="text-avivando-lighttext">Santa Ceia</p>
<p class="text-2xl font-bold text-white mt-2">20:00</p>
</div>
<!-- Sunday Morning Service -->
<div class="service-time-highlight">
<h3 class="text-xl font-bold text-white mb-2">Domingo</h3>
<p class="text-avivando-lighttext">Academia de Líderes</p>
<p class="text-2xl font-bold text-white mt-2">09:00</p>
</div>
<!-- Sunday Evening Service -->
<div class="service-time-highlight">
<h3 class="text-xl font-bold text-white mb-2">Domingo</h3>
<p class="text-avivando-lighttext">Culto de Celebração</p>
<p class="text-2xl font-bold text-white mt-2">19:00</p>
</div>
</div>
<p class="text-white mt-8 text-lg">Venha adorar conosco e experimente a presença de Deus!</p>
</div>
</section>
<!-- Leaders Section with Parallax -->
<section id="leaders" class="py-16 parallax-section leaders-highlight">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-4xl md:text-5xl font-bold text-white mb-4">Nossos Líderes</h2>
<p class="text-white text-xl max-w-2xl mx-auto">Conheça os pastores que lideram nossa igreja com amor e dedicação.</p>
</div>
<div class="leader-container">
<!-- Líderes -->
<div class="leader-profile draggable-element">
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/AP-BPA.png" alt="Apóstolo Marcio e Bispa Vaninha Mendes" class="leader-image">
<div class="leader-info">
<h3 class="leader-name text-3xl">Apóstolo Marcio e Bispa Vaninha Mendes</h3>
<p class="leader-title text-xl">Fundadores e Líderes Espirituais</p>
<p class="leader-bio text-lg">O Apóstolo Marcio Mendes e a Bispa Vaninha Mendes têm um ministério marcado por sinais, prodígios e maravilhas. Com mais de 20 anos de ministério, eles têm dedicado suas vidas ao avivamento e à pregação do Evangelho com poder. Sua paixão é ver vidas transformadas pelo poder de Deus e igrejas cheias do Espírito Santo. A Bispa Vaninha tem um ministério voltado para mulheres e famílias, com mensagens de cura e restauração, enquanto o Apóstolo Marcio tem um chamado para o avivamento das nações.</p>
<div class="leader-social">
<a href="#" class="social-icon text-2xl"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-icon text-2xl"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-icon text-2xl"><i class="fab fa-youtube"></i></a>
<a href="#" class="social-icon text-2xl"><i class="fas fa-globe"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Sermons Section -->
<section id="sermons" class="py-16 white-bg relative overflow-hidden">
<div class="particles" id="particles-3"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-avivando-darktext mb-4">Mensagens Inspiradoras</h2>
<p class="text-avivando-darktext max-w-2xl mx-auto">Confira nossas últimas mensagens no YouTube:</p>
</div>
<div class="sermon-list max-w-4xl mx-auto">
<!-- Sermon 1 -->
<div class="sermon-item draggable-element">
<div class="sermon-item-header">
<span class="sermon-item-title">O Poder da Fé em Tempos Difíceis</span>
<span class="sermon-item-date">1 dia atrás</span>
</div>
<div class="sermon-item-description">Como exercer fé genuína mesmo nas circunstâncias mais desafiadoras.</div>
<div class="sermon-item-footer">
<span class="sermon-item-views"><i class="fas fa-eye mr-1"></i> 1,245 visualizações</span>
<a href="https://www.youtube.com/c/Minist%C3%A9rioAvivandoasNa%C3%A7%C3%B5es" class="sermon-item-link">Assistir <i class="fas fa-arrow-right ml-1"></i></a>
</div>
</div>
<!-- Sermon 2 -->
<div class="sermon-item draggable-element">
<div class="sermon-item-header">
<span class="sermon-item-title">Mulheres que Impactam Gerações</span>
<span class="sermon-item-date">3 dias atrás</span>
</div>
<div class="sermon-item-description">O papel da mulher cristã na transformação da sociedade.</div>
<div class="sermon-item-footer">
<span class="sermon-item-views"><i class="fas fa-eye mr-1"></i> 987 visualizações</span>
<a href="https://www.youtube.com/c/Minist%C3%A9rioAvivandoasNa%C3%A7%C3%B5es" class="sermon-item-link">Assistir <i class="fas fa-arrow-right ml-1"></i></a>
</div>
</div>
<!-- Sermon 3 -->
<div class="sermon-item draggable-element">
<div class="sermon-item-header">
<span class="sermon-item-title">Libertos Para Adorar</span>
<span class="sermon-item-date">1 semana atrás</span>
</div>
<div class="sermon-item-description">Como a verdadeira adoração pode libertá-lo de qualquer jugo.</div>
<div class="sermon-item-footer">
<span class="sermon-item-views"><i class="fas fa-eye mr-1"></i> 2,543 visualizações</span>
<a href="https://www.youtube.com/c/Minist%C3%A9rioAvivandoasNa%C3%A7%C3%B5es" class="sermon-item-link">Assistir <i class="fas fa-arrow-right ml-1"></i></a>
</div>
</div>
<!-- Sermon 4 -->
<div class="sermon-item draggable-element">
<div class="sermon-item-header">
<span class="sermon-item-title">O Avivamento Chegou</span>
<span class="sermon-item-date">2 semanas atrás</span>
</div>
<div class="sermon-item-description">Experiencie o poder do Espírito Santo em sua vida.</div>
<div class="sermon-item-footer">
<span class="sermon-item-views"><i class="fas fa-eye mr-1"></i> 3,245 visualizações</span>
<a href="https://www.youtube.com/c/Minist%C3%A9rioAvivandoasNa%C3%A7%C3%B5es" class="sermon-item-link">Assistir <i class="fas fa-arrow-right ml-1"></i></a>
</div>
</div>
<!-- Sermon 5 -->
<div class="sermon-item draggable-element">
<div class="sermon-item-header">
<span class="sermon-item-title">Famílias Restauradas</span>
<span class="sermon-item-date">3 semanas atrás</span>
</div>
<div class="sermon-item-description">Princípios bíblicos para famílias saudáveis e abençoadas.</div>
<div class="sermon-item-footer">
<span class="sermon-item-views"><i class="fas fa-eye mr-1"></i> 1,876 visualizações</span>
<a href="https://www.youtube.com/c/Minist%C3%A9rioAvivandoasNa%C3%A7%C3%B5es" class="sermon-item-link">Assistir <i class="fas fa-arrow-right ml-1"></i></a>
</div>
</div>
</div>
<div class="text-center mt-8">
<a href="https://www.youtube.com/c/Minist%C3%A9rioAvivandoasNa%C3%A7%C3%B5es" class="inline-block bg-avivando-bbrightred hover:bg-avivando-red text-white font-bold py-3 px-6 rounded-full transition duration-300">
Ver Todas as Mensagens <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Events Section -->
<section id="events" class="py-16 parallax-section">
<div class="glass-effect container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Próximos Eventos</h2>
<p class="text-white max-w-2xl mx-auto">Participe dos nossos eventos e seja transformado pelo poder de Deus.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Event 1 -->
<div class="event-card bg-white rounded-lg overflow-hidden shadow-lg draggable-element">
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/IMG_1078.jpg" alt="Evento 1" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-600"><i class="fas fa-calendar-alt mr-1"></i> 15 Jun, 2023</span>
<span class="text-sm text-gray-600"><i class="fas fa-clock mr-1"></i> 20:00</span>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Noite de Avivamento</h3>
<p class="text-gray-600 mb-4">Uma noite especial de adoração e poder com a presença do Espírito Santo.</p>
<a href="#" class="inline-block bg-avivando-bbrightred hover:bg-avivando-red text-white font-bold py-2 px-4 rounded transition duration-300">
Mais Informações
</a>
</div>
</div>
<!-- Event 2 -->
<div class="event-card bg-white rounded-lg overflow-hidden shadow-lg draggable-element">
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/DSC09900.JPG" alt="Evento 2" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-600"><i class="fas fa-calendar-alt mr-1"></i> 18 Jun, 2023</span>
<span class="text-sm text-gray-600"><i class="fas fa-clock mr-1"></i> 09:00</span>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Culto da Família</h3>
<p class="text-gray-600 mb-4">Um culto especial para toda a família com mensagem edificante e comunhão.</p>
<a href="#" class="inline-block bg-avivando-bbrightred hover:bg-avivando-red text-white font-bold py-2 px-4 rounded transition duration-300">
Mais Informações
</a>
</div>
</div>
<!-- Event 3 -->
<div class="event-card bg-white rounded-lg overflow-hidden shadow-lg draggable-element">
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/IMG_1078.jpg" alt="Evento 3" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-gray-600"><i class="fas fa-calendar-alt mr-1"></i> 21 Jun, 2023</span>
<span class="text-sm text-gray-600"><i class="fas fa-clock mr-1"></i> 20:00</span>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Encontro de Oração</h3>
<p class="text-gray-600 mb-4">Um momento poderoso de intercessão e busca pela presença de Deus.</p>
<a href="#" class="inline-block bg-avivando-bbrightred hover:bg-avivando-red text-white font-bold py-2 px-4 rounded transition duration-300">
Mais Informações
</a>
</div>
</div>
</div>
<div class="text-center mt-8">
<a href="#" class="inline-block bg-white hover:bg-gray-100 text-avivando-darkred font-bold py-3 px-6 rounded-full transition duration-300">
Ver Todos os Eventos <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Donations Section -->
<section id="offers" class="py-16 white-bg">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-avivando-darktext mb-4">Contribua com a Obra</h2>
<p class="text-avivando-darktext max-w-2xl mx-auto">Sua offerta ajuda a sustentar o ministério e expandir o Reino de Deus.</p>
</div>
<div class="max-w-4xl mx-auto">
<!-- Pix Donation -->
<div class="donation-method-highlight draggable-element">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/3 mb-4 md:mb-0 text-center">
<div class="text-4xl text-avivando-bbrightred mb-2">
<i class="fas fa-qrcode"></i>
</div>
<h3 class="text-xl font-bold text-avivando-darktext">PIX</h3>
</div>
<div class="md:w-2/3">
<p class="text-gray-700 mb-4">Faça sua doação via PIX de forma rápida e segura.</p>
<div class="pix-key bg-gray-100 p-3 rounded text-sm font-mono">
10.636.004/0001-14
</div>
<div class="pix-qr-code">
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/Captura%20de%20tela%202025-05-08%20135658.png" alt="QR Code PIX" class="w-full h-auto">
</div>
<p class="text-sm text-gray-600 mt-2">Use este QR Code ou a chave acima em seu aplicativo bancário.</p>
</div>
</div>
</div>
<!-- Transferência Bancária -->
<div class="donation-method-highlight draggable-element">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/3 mb-4 md:mb-0 text-center">
<div class="text-4xl text-avivando-bbrightred mb-2">
<i class="fas fa-exchange-alt"></i>
</div>
<h3 class="text-xl font-bold text-avivando-darktext">Transferência Bancária</h3>
</div>
<div class="md:w-2/3">
<p class="text-gray-700 mb-4">Faça uma transferência para nossas contas:</p>
<div class="bg-gray-100 p-3 rounded mb-4">
<div class="flex items-center mb-2">
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/Marca-BRB.png" alt="Banco BRB" class="h-8 mr-2">
<span class="font-bold">Banco BRB</span>
</div>
<p>Banco: 070 - Banco BRB</p>
<p>Agência: 110</p>
<p>Conta Corrente: 110060724-0</p>
<p class="mt-2">Agência: 253</p>
<p>Conta Poupança: 003468-5</p>
<p>CNPJ: 10.636.004/0001-14</p>
</div>
</div>
</div>
</div>
<!-- Presencialmente -->
<div class="donation-method-highlight draggable-element">
<div class="flex flexocol md:flex-row items-center">
<div class="md:w-1/3 mb-4 md:mb-0 text-center">
<div class="text-4xl text-avivando-bbrightred mb-2">
<i class="fas fa-hand-holding-usd"></i>
</div>
<h3 class="text-xl font-bold text-avivando-darktext">Presencialmente</h3>
</div>
<div class="md:w-2/3">
<p class="text-gray-700 mb-4">Você pode trazer sua oferta pessoalmente:</p>
<ul class="list-disc pl-5 text-gray-600 mb-4">
<li>De Segunda a Sexta: 08h às 12h e 13h às 17h</li>
<li>Nos horários dos cultos de terça, quinta e domingo</li>
</ul>
<a href="#contact" class="inline-block mt-4 bg-avivando-bbrightred hover:bg-avivando-red text-white font-bold py-2 px-4 rounded transition duration-300">
Ver Localização <i class="fas fa-map-marker-alt ml-1"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section id="media" class="py-16 parallax-section">
<div class="glass-effect container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Nossas Fotos</h2>
<p class="text-white max-w-2xl mx-auto">Momentos especiais em nossa comunidade de fé.</p>
</div>
<div class="gallery-container">
<!-- Photo 1 -->
<div class="gallery-item draggable-element">
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/IMG_1078.jpg" alt="Galeria 1" class="gallery-image">
<div class="gallery-caption">Culto de Avivamento</div>
</div>
<!-- Photo 2 -->
<div class="gallery-item draggable-element">
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/DSC09900.JPG" alt="Galeria 2" class="gallery-image">
<div class="gallery-caption">Louvor e Adoração</div>
</div>
<!-- Photo 3 -->
<div class="gallery-item draggable-element">
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/IMG_1078.jpg" alt="Galeria 3" class="gallery-image">
<div class="gallery-caption">Momento de Oração</div>
</div>
<!-- Photo 4 -->
<div class="gallery-item draggable-element">
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/DSC09900.JPG" alt="Galeria 4" class="gallery-image">
<div class="gallery-caption">Batismos</div>
</div>
<!-- Photo 5 -->
<div class="gallery-item draggable-element">
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/IMG_1078.jpg" alt="Galeria 5" class="gallery-image">
<div class="gallery-caption">Eventos Especiais</div>
</div>
<!-- Photo 6 -->
<div class="gallery-item draggable-element">
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/DSC09900.JPG" alt="Galeria 6" class="gallery-image">
<div class="gallery-caption">Comunhão</div>
</div>
</div>
<div class="text-center mt-8">
<a href="#" class="gallery-button inline-block hover:bg-avivando-red">
Ver Mais Fotos <i class="fas fa-images ml-2"></i>
</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 white-bg">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-avivando-darktext mb-4">Entre em Contato</h2>
<p class="text-avivando-darktext max-w-2xl mx-auto">Estamos aqui para servir e responder suas dúvidas.</p>
</div>
<div class="flex flex-col lg:flex-row gap-8 max-w-6xl mx-auto">
<div class="lg:w-1/2">
<div class="contact-glass p-8 rounded-lg">
<h3 class="text-2xl font-bold text-white mb-6">Informações de Contato</h3>
<div class="space-y-6">
<!-- Address -->
<div class="flex items-start">
<div class="contact-icon p-3 rounded-full mr-4">
<i class="fas fa-map-marker-alt"></i>
</div>
<div>
<h4 class="text-lg font-semibold text-white mb-1">Endereço</h4>
<p class="contact-info">Quadra 12 Conjunto A Lote 1 - Setor Habitacional Jardim Botânico, Brasília - DF, 71680-108</p>
</div>
</div>
<!-- Phone -->
<div class="flex items-start">
<div class="contact-icon p-3 rounded-full mr-4">
<i class="fas fa-phone-alt"></i>
</div>
<div>
<h4 class="text-lg font-semibold text-white mb-1">Telefone</h4>
<p class="contact-info">(61) 3308-3546</p>
<p class="contact-info">(61) 99673-2422 (WhatsApp)</p>
</div>
</div>
<!-- Email -->
<div class="flex items-start">
<div class="contact-icon p-3 rounded-full mr-4">
<i class="fas fa-envelope"></i>
</div>
<div>
<h4 class="text-lg font-semibold text-white mb-1">Email</h4>
<p class="contact-info">[email protected]</p>
</div>
</div>
<!-- Social Media -->
<div class="flex items-start">
<div class="contact-icon p-3 rounded-full mr-4">
<i class="fas fa-share-alt"></i>
</div>
<div>
<h4 class="text-lg font-semibold text-white mb-1">Redes Sociais</h4>
<div class="flex space-x-4 mt-2">
<a href="https://www.youtube.com/c/Minist%C3%A9rioAvivandoasNa%C3%A7%C3%B5es" class="text-white hover:text-avivando-lighttext text-xl">
<i class="fab fa-youtube"></i>
</a>
<a href="https://www.instagram.com/avivandooficial/" class="text-white hover:text-avivando-lighttext text-xl">
<i class="fab fa-instagram"></i>
</a>
<a href="https://wa.me/5561996732422" class="text-white hover:text-avivando-lighttext text-xl">
<i class="fab fa-whatsapp"></i>
</a>
<a href="#" class="text-white hover:text-avivando-lighttext text-xl">
<i class="fab fa-facebook-f"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2">
<div class="bg-white p-8 rounded-lg shadow-lg">
<h3 class="text-2xl font-bold text-avivando-darktext mb-6">Envie uma Mensagem</h3>
<form>
<div class="mb-4">
<label for="name" class="block text-gray-700 mb-2">Nome</label>
<input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-avivando-bbrightred">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 mb-2">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-avivando-bbrightred">
</div>
<div class="mb-4">
<label for="phone" class="block text-gray-700 mb-2">Telefone</label>
<input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-avivando-bbrightred">
</div>
<div class="mb-4">
<label for="message" class="block text-gray-700 mb-2">Mensagem</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-avivando-bbrightred"></textarea>
</div>
<button type="submit" class="w-full bg-avivando-bbrightred hover:bg-avivando-red text-white font-bold py-3 px-4 rounded-lg transition duration-300">
Enviar Mensagem <i class="fas fa-paper-plane ml-2"></i>
</button>
</form>
</div>
</div>
</div>
<!-- Map -->
<div class="mt-12 rounded-lg overflow-hidden shadow-lg">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3838.693010277011!2d-47.88499992471293!3d-15.82242302264045!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x935a24a9e8b9f8b5%3A0x5c1b7b0b5b0b5b0b!2sIgreja%20Avivando!5e0!3m2!1spt-BR!2sbr!4v1684343200000!5m2!1spt-BR!2sbr" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-avivando-dark text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<!-- About -->
<div>
<h3 class="text-xl font-bold mb-4">Sobre Nós</h3>
<p class="mb-4">A Igreja Avivando é uma comunidade cristã comprometida com o avivamento e a transformação de vidas através do poder do Evangelho.</p>
<img src="https://huggingface.co/spaces/Lioszada/teste-avivando/resolve/main/LOGO%20AVIVANDO%20HORIZONTAL%20BRANCA.png" alt="Igreja Avivando" class="h-12">
</div>
<!-- Quick Links -->
<div>
<h3 class="text-xl font-bold mb-4">Links Rápidos</h3>
<ul class="space-y-2">
<li><a href="#home" class="hover:text-avivando-lighttext">Início</a></li>
<li><a href="#events" class="hover:text-avivando-lighttext">Eventos</a></li>
<li><a href="#sermons" class="hover:text-avivando-lighttext">Mensagens</a></li>
<li><a href="#leaders" class="hover:text-avivando-lighttext">Líderes</a></li>
<li><a href="#contact" class="hover:text-avivando-lighttext">Contato</a></li>
<li><a href="#offers" class="hover:text-avivando-lighttext">Ofertas</a></li>
</ul>
</div>
<!-- Service Times -->
<div>
<h3 class="text-xl font-bold mb-4">Horários de Culto</h3>
<ul class="space-y-2">
<li class="flex justify-between">
<span>Segunda-feira</span>
<span>20:00</span>
</li>
<li class="flex justify-between">
<span>Terça-feira</span>
<span>20:00</span>
</li>
<li class="flex justify-between">
<span>Quinta-feira</span>
<span>20:00</span>
</li>
<li class="flex justify-between">
<span>Sábado</span>
<span>08:00</span>
</li>
<li class="flex justify-between">
<span>Sábado</span>
<span>20:00</span>
</li>
<li class="flex justify-between">
<span>Domingo</span>
<span>09:00</span>
</li>
<li class="flex justify-between">
<span>Domingo</span>
<span>19:00</span>
</li>
</ul>
</div>
<!-- Newsletter -->
<div>
<h3 class="text-xl font-bold mb-4">Newsletter</h3>
<p class="mb-4">Inscreva-se para receber nossas novidades e eventos.</p>
<form class="flex">
<input type="email" placeholder="Seu email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
<button type="submit" class="bg-avivando-bbrightred hover:bg-avivando-red px-4 py-2 rounded-r-lg transition duration-300">
<i class="fas fa-paper-plane"></i>
</button>
</form>
<div class="flex space-x-4 mt-6">
<a href="https://www.youtube.com/c/Minist%C3%A9rioAvivandoasNa%C3%A7%C3%B5es" class="text-white hover:text-avivando-lighttext text-xl">
<i class="fab fa-youtube"></i>
</a>
<a href="https://www.instagram.com/avivandooficial/" class="text-white hover:text-avivando-lighttext text-xl">
<i class="fab fa-instagram"></i>
</a>
<a href="https://wa.me/5561996732422" class="text-white hover:text-avivando-lighttext text-xl">
<i class="fab fa-whatsapp"></i>
</a>
<a href="#" class="text-white hover:text-avivando-lighttext text-xl">
<i class="fab fa-facebook-f"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center">
<p>&copy; 2025 Ministério Avivando as Nações. Todos os direitos reservados.</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Scroll to top button
const scrollToTopBtn = document.createElement('div');
scrollToTopBtn.innerHTML = '<i class="fas fa-arrow-up"></i>';
scrollToTopBtn.className = 'fixed bottom-8 right-8 bg-avivando-bbrightred text-white w-12 h-12 rounded-full flex items-center justify-center cursor-pointer shadow-lg z-50 opacity-0 invisible transition-all duration-300';
document.body.appendChild(scrollToTopBtn);
window.addEventListener('scroll', function() {
if (window
</html>