Hugging Face's logo

Spaces:
israelborges
/
ad-ref-gio
Running

App Files Community
israelborges commited on
Commit
4f261b4
·
verified ·
1 Parent(s): 33168f6

O culto são às 19:30 sábado e domingo, no mapa tá apontado para av paulista e deveria ser atualizado - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +627 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ad Ref Gio
3
- emoji: 🏆
4
- colorFrom: gray
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ad-ref-gio
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,627 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Igreja Assembléia de Deus Refúgio Cristão - Comunidade de Fé</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Playfair+Display:wght@700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ }
15
+
16
+ .hero {
17
+ 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');
18
+ background-size: cover;
19
+ background-position: center;
20
+ }
21
+
22
+ .sermon-card:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
25
+ }
26
+
27
+ .testimonial-card {
28
+ transition: all 0.3s ease;
29
+ }
30
+
31
+ .testimonial-card:hover {
32
+ transform: scale(1.03);
33
+ }
34
+
35
+ .floating-cross {
36
+ animation: float 6s ease-in-out infinite;
37
+ }
38
+
39
+ @keyframes float {
40
+ 0% { transform: translateY(0px); }
41
+ 50% { transform: translateY(-15px); }
42
+ 100% { transform: translateY(0px); }
43
+ }
44
+
45
+ .dropdown:hover .dropdown-menu {
46
+ display: block;
47
+ }
48
+ </style>
49
+ </head>
50
+ <body class="bg-gray-50">
51
+ <!-- Header/Navigation -->
52
+ <header class="bg-white shadow-md sticky top-0 z-50">
53
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
54
+ <div class="flex items-center">
55
+ <i class="fas fa-cross text-purple-700 text-2xl mr-2"></i>
56
+ <h1 class="text-xl md:text-2xl font-bold text-purple-900">Igreja Assembléia de Deus Refúgio Cristão</h1>
57
+ </div>
58
+
59
+ <nav class="hidden md:flex space-x-8">
60
+ <a href="#home" class="text-purple-800 hover:text-purple-600 font-medium">Início</a>
61
+ <div class="dropdown relative">
62
+ <button class="text-purple-800 hover:text-purple-600 font-medium flex items-center">
63
+ Ministérios <i class="fas fa-chevron-down ml-1 text-sm"></i>
64
+ </button>
65
+ <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded-md mt-2 py-2 w-48">
66
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-purple-50">Louvor</a>
67
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-purple-50">Crianças</a>
68
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-purple-50">Jovens</a>
69
+ <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-purple-50">Mulheres</a>
70
+ </div>
71
+ </div>
72
+ <a href="#events" class="text-purple-800 hover:text-purple-600 font-medium">Eventos</a>
73
+ <a href="#sermons" class="text-purple-800 hover:text-purple-600 font-medium">Mensagens</a>
74
+ <a href="#contact" class="text-purple-800 hover:text-purple-600 font-medium">Contato</a>
75
+ </nav>
76
+
77
+ <button class="md:hidden text-purple-800" id="mobile-menu-button">
78
+ <i class="fas fa-bars text-2xl"></i>
79
+ </button>
80
+ </div>
81
+
82
+ <!-- Mobile Menu -->
83
+ <div class="md:hidden hidden bg-white shadow-lg" id="mobile-menu">
84
+ <div class="px-4 py-3 flex flex-col space-y-3">
85
+ <a href="#home" class="text-purple-800 hover:text-purple-600">Início</a>
86
+ <a href="#" class="text-purple-800 hover:text-purple-600">Ministérios</a>
87
+ <a href="#events" class="text-purple-800 hover:text-purple-600">Eventos</a>
88
+ <a href="#sermons" class="text-purple-800 hover:text-purple-600">Mensagens</a>
89
+ <a href="#contact" class="text-purple-800 hover:text-purple-600">Contato</a>
90
+ </div>
91
+ </div>
92
+ </header>
93
+
94
+ <!-- Hero Section -->
95
+ <section id="home" class="hero text-white py-20 md:py-32">
96
+ <div class="container mx-auto px-4 text-center">
97
+ <div class="floating-cross inline-block mb-6">
98
+ <i class="fas fa-cross text-5xl text-white opacity-80"></i>
99
+ </div>
100
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Bem-vindo à Igreja Assembléia de Deus Refúgio Cristão</h1>
101
+ <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>
102
+ <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6">
103
+ <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>
104
+ <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>
105
+ </div>
106
+ </div>
107
+ </section>
108
+
109
+ <!-- About Section -->
110
+ <section class="py-16 bg-white">
111
+ <div class="container mx-auto px-4">
112
+ <div class="flex flex-col md:flex-row items-center">
113
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
114
+ <h2 class="text-3xl md:text-4xl font-bold text-purple-900 mb-6">Nossa História</h2>
115
+ <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>
116
+ <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>
117
+ <div class="bg-purple-100 border-l-4 border-purple-700 p-4">
118
+ <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>
119
+ <p class="text-purple-700 font-semibold mt-2">Romanos 1:16</p>
120
+ </div>
121
+ </div>
122
+ <div class="md:w-1/2">
123
+ <div class="relative">
124
+ <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">
125
+ <div class="absolute -bottom-6 -right-6 bg-purple-700 text-white p-4 rounded-lg shadow-lg hidden md:block">
126
+ <p class="text-2xl font-bold">35+</p>
127
+ <p class="text-sm">Anos servindo</p>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </section>
134
+
135
+ <!-- Beliefs Section -->
136
+ <section class="py-16 bg-purple-50">
137
+ <div class="container mx-auto px-4">
138
+ <div class="text-center mb-16">
139
+ <h2 class="text-3xl md:text-4xl font-bold text-purple-900 mb-4">Nossas Crenças</h2>
140
+ <div class="w-24 h-1 bg-purple-700 mx-auto"></div>
141
+ </div>
142
+
143
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
144
+ <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition duration-300">
145
+ <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-6">
146
+ <i class="fas fa-bible text-purple-700 text-2xl"></i>
147
+ </div>
148
+ <h3 class="text-xl font-bold text-purple-900 mb-4">A Bíblia Sagrada</h3>
149
+ <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>
150
+ </div>
151
+
152
+ <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition duration-300">
153
+ <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-6">
154
+ <i class="fas fa-dove text-purple-700 text-2xl"></i>
155
+ </div>
156
+ <h3 class="text-xl font-bold text-purple-900 mb-4">Batismo no Espírito Santo</h3>
157
+ <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>
158
+ </div>
159
+
160
+ <div class="bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition duration-300">
161
+ <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-6">
162
+ <i class="fas fa-heart text-purple-700 text-2xl"></i>
163
+ </div>
164
+ <h3 class="text-xl font-bold text-purple-900 mb-4">Salvação</h3>
165
+ <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>
166
+ </div>
167
+ </div>
168
+ </div>
169
+ </section>
170
+
171
+ <!-- Events Section -->
172
+ <section id="events" class="py-16 bg-white">
173
+ <div class="container mx-auto px-4">
174
+ <div class="text-center mb-16">
175
+ <h2 class="text-3xl md:text-4xl font-bold text-purple-900 mb-4">Próximos Eventos</h2>
176
+ <div class="w-24 h-1 bg-purple-700 mx-auto"></div>
177
+ </div>
178
+
179
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
180
+ <div class="bg-purple-50 rounded-lg overflow-hidden shadow-md">
181
+ <div class="bg-purple-700 text-white py-3 px-4">
182
+ <p class="font-bold text-lg">Culto de Avivamento</p>
183
+ </div>
184
+ <div class="p-6">
185
+ <div class="flex items-center mb-4">
186
+ <div class="bg-purple-100 text-purple-800 rounded-lg p-3 mr-4 text-center">
187
+ <p class="font-bold text-xl">15</p>
188
+ <p class="text-sm">JUN</p>
189
+ </div>
190
+ <div>
191
+ <p class="text-gray-700">Sexta-feira, 19:30</p>
192
+ <p class="text-gray-500">Igreja Assembléia de Deus Refúgio Cristão</p>
193
+ </div>
194
+ </div>
195
+ <p class="text-gray-700 mb-4">Noite especial de busca pelo poder do Espírito Santo com oração, louvor e palavra.</p>
196
+ <a href="#" class="text-purple-700 font-semibold hover:underline">Mais detalhes →</a>
197
+ </div>
198
+ </div>
199
+
200
+ <div class="bg-purple-50 rounded-lg overflow-hidden shadow-md">
201
+ <div class="bg-purple-700 text-white py-3 px-4">
202
+ <p class="font-bold text-lg">Escola Bíblica</p>
203
+ </div>
204
+ <div class="p-6">
205
+ <div class="flex items-center mb-4">
206
+ <div class="bg-purple-100 text-purple-800 rounded-lg p-3 mr-4 text-center">
207
+ <p class="font-bold text-xl">18</p>
208
+ <p class="text-sm">JUN</p>
209
+ </div>
210
+ <div>
211
+ <p class="text-gray-700">Domingo, 09:00</p>
212
+ <p class="text-gray-500">Igreja Assembléia de Deus Refúgio Cristão</p>
213
+ </div>
214
+ </div>
215
+ <p class="text-gray-700 mb-4">Estudo bíblico para todas as idades. Traga sua família para aprender mais da Palavra.</p>
216
+ <a href="#" class="text-purple-700 font-semibold hover:underline">Mais detalhes →</a>
217
+ </div>
218
+ </div>
219
+
220
+ <div class="bg-purple-50 rounded-lg overflow-hidden shadow-md">
221
+ <div class="bg-purple-700 text-white py-3 px-4">
222
+ <p class="font-bold text-lg">Retiro de Jovens</p>
223
+ </div>
224
+ <div class="p-6">
225
+ <div class="flex items-center mb-4">
226
+ <div class="bg-purple-100 text-purple-800 rounded-lg p-3 mr-4 text-center">
227
+ <p class="font-bold text-xl">23-25</p>
228
+ <p class="text-sm">JUN</p>
229
+ </div>
230
+ <div>
231
+ <p class="text-gray-700">Sexta a Domingo</p>
232
+ <p class="text-gray-500">Acampamento Monte Sinai</p>
233
+ </div>
234
+ </div>
235
+ <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>
236
+ <a href="#" class="text-purple-700 font-semibold hover:underline">Mais detalhes →</a>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <div class="text-center mt-12">
242
+ <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>
243
+ </div>
244
+ </div>
245
+ </section>
246
+
247
+ <!-- Sermons Section -->
248
+ <section id="sermons" class="py-16 bg-purple-50">
249
+ <div class="container mx-auto px-4">
250
+ <div class="text-center mb-16">
251
+ <h2 class="text-3xl md:text-4xl font-bold text-purple-900 mb-4">Mensagens Recentes</h2>
252
+ <div class="w-24 h-1 bg-purple-700 mx-auto"></div>
253
+ </div>
254
+
255
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
256
+ <div class="sermon-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
257
+ <div class="relative">
258
+ <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">
259
+ <div class="absolute bottom-0 left-0 bg-purple-700 text-white px-3 py-1 text-sm">Assistir</div>
260
+ </div>
261
+ <div class="p-6">
262
+ <h3 class="text-xl font-bold text-purple-900 mb-2">O Poder do Espírito Santo</h3>
263
+ <p class="text-gray-600 mb-4">Pr. Aurélio Guilherme Borges • 04/06/2023</p>
264
+ <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>
265
+ <div class="flex justify-between items-center">
266
+ <a href="#" class="text-purple-700 font-semibold hover:underline">Assistir agora</a>
267
+ <span class="text-gray-500"><i class="fas fa-clock mr-1"></i> 42 min</span>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <div class="sermon-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
273
+ <div class="relative">
274
+ <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">
275
+ <div class="absolute bottom-0 left-0 bg-purple-700 text-white px-3 py-1 text-sm">Ouvir</div>
276
+ </div>
277
+ <div class="p-6">
278
+ <h3 class="text-xl font-bold text-purple-900 mb-2">Fé que Move Montanhas</h3>
279
+ <p class="text-gray-600 mb-4">Pr. Aurélio Guilherme Borges • 28/05/2023</p>
280
+ <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>
281
+ <div class="flex justify-between items-center">
282
+ <a href="#" class="text-purple-700 font-semibold hover:underline">Ouvir agora</a>
283
+ <span class="text-gray-500"><i class="fas fa-clock mr-1"></i> 35 min</span>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <div class="sermon-card bg-white rounded-lg overflow-hidden shadow-md transition duration-300">
289
+ <div class="relative">
290
+ <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">
291
+ <div class="absolute bottom-0 left-0 bg-purple-700 text-white px-3 py-1 text-sm">Assistir</div>
292
+ </div>
293
+ <div class="p-6">
294
+ <h3 class="text-xl font-bold text-purple-900 mb-2">Vivendo em Santidade</h3>
295
+ <p class="text-gray-600 mb-4">Pr. Aurélio Guilherme Borges • 21/05/2023</p>
296
+ <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>
297
+ <div class="flex justify-between items-center">
298
+ <a href="#" class="text-purple-700 font-semibold hover:underline">Assistir agora</a>
299
+ <span class="text-gray-500"><i class="fas fa-clock mr-1"></i> 50 min</span>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <div class="text-center mt-12">
306
+ <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>
307
+ </div>
308
+ </div>
309
+ </section>
310
+
311
+ <!-- Leadership Section -->
312
+ <section class="py-16 bg-purple-50">
313
+ <div class="container mx-auto px-4">
314
+ <div class="text-center mb-16">
315
+ <h2 class="text-3xl md:text-4xl font-bold text-purple-900 mb-4">Nossa Liderança</h2>
316
+ <div class="w-24 h-1 bg-purple-700 mx-auto"></div>
317
+ </div>
318
+
319
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
320
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
321
+ <div class="w-32 h-32 mx-auto rounded-full bg-purple-100 mb-6 flex items-center justify-center">
322
+ <i class="fas fa-user text-purple-700 text-4xl"></i>
323
+ </div>
324
+ <h3 class="text-xl font-bold text-purple-900 mb-2">Djalma Silva</h3>
325
+ <p class="text-gray-700">Líder de Louvor</p>
326
+ </div>
327
+
328
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
329
+ <div class="w-32 h-32 mx-auto rounded-full bg-purple-100 mb-6 flex items-center justify-center">
330
+ <i class="fas fa-user text-purple-700 text-4xl"></i>
331
+ </div>
332
+ <h3 class="text-xl font-bold text-purple-900 mb-2">Gracielly Borges</h3>
333
+ <p class="text-gray-700">Líder de Mulheres</p>
334
+ </div>
335
+
336
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
337
+ <div class="w-32 h-32 mx-auto rounded-full bg-purple-100 mb-6 flex items-center justify-center">
338
+ <i class="fas fa-user text-purple-700 text-4xl"></i>
339
+ </div>
340
+ <h3 class="text-xl font-bold text-purple-900 mb-2">Carlos Teixeira</h3>
341
+ <p class="text-gray-700">Líder de Homens</p>
342
+ </div>
343
+
344
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
345
+ <div class="w-32 h-32 mx-auto rounded-full bg-purple-100 mb-6 flex items-center justify-center">
346
+ <i class="fas fa-user text-purple-700 text-4xl"></i>
347
+ </div>
348
+ <h3 class="text-xl font-bold text-purple-900 mb-2">Natalie Teixeira</h3>
349
+ <p class="text-gray-700">Líder de Crianças</p>
350
+ </div>
351
+
352
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
353
+ <div class="w-32 h-32 mx-auto rounded-full bg-purple-100 mb-6 flex items-center justify-center">
354
+ <i class="fas fa-user text-purple-700 text-4xl"></i>
355
+ </div>
356
+ <h3 class="text-xl font-bold text-purple-900 mb-2">Albertina Borges</h3>
357
+ <p class="text-gray-700">Líder de Oração</p>
358
+ </div>
359
+
360
+ <div class="bg-white p-8 rounded-lg shadow-md text-center">
361
+ <div class="w-32 h-32 mx-auto rounded-full bg-purple-100 mb-6 flex items-center justify-center">
362
+ <i class="fas fa-user text-purple-700 text-4xl"></i>
363
+ </div>
364
+ <h3 class="text-xl font-bold text-purple-900 mb-2">Israel Borges</h3>
365
+ <p class="text-gray-700">Líder de Jovens</p>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </section>
370
+
371
+ <!-- Testimonials Section -->
372
+ <section class="py-16 bg-white">
373
+ <div class="container mx-auto px-4">
374
+ <div class="text-center mb-16">
375
+ <h2 class="text-3xl md:text-4xl font-bold text-purple-900 mb-4">Transformações de Vida</h2>
376
+ <div class="w-24 h-1 bg-purple-700 mx-auto"></div>
377
+ </div>
378
+
379
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
380
+ <div class="testimonial-card bg-purple-50 p-8 rounded-lg shadow-md">
381
+ <div class="flex items-center mb-6">
382
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Maria Silva" class="w-16 h-16 rounded-full object-cover mr-4">
383
+ <div>
384
+ <h4 class="font-bold text-purple-900">Maria Silva</h4>
385
+ <p class="text-gray-600 text-sm">Membro há 5 anos</p>
386
+ </div>
387
+ </div>
388
+ <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>
389
+ <div class="mt-4 text-purple-700">
390
+ <i class="fas fa-star"></i>
391
+ <i class="fas fa-star"></i>
392
+ <i class="fas fa-star"></i>
393
+ <i class="fas fa-star"></i>
394
+ <i class="fas fa-star"></i>
395
+ </div>
396
+ </div>
397
+
398
+ <div class="testimonial-card bg-purple-50 p-8 rounded-lg shadow-md">
399
+ <div class="flex items-center mb-6">
400
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Carlos Oliveira" class="w-16 h-16 rounded-full object-cover mr-4">
401
+ <div>
402
+ <h4 class="font-bold text-purple-900">Carlos Oliveira</h4>
403
+ <p class="text-gray-600 text-sm">Membro há 2 anos</p>
404
+ </div>
405
+ </div>
406
+ <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>
407
+ <div class="mt-4 text-purple-700">
408
+ <i class="fas fa-star"></i>
409
+ <i class="fas fa-star"></i>
410
+ <i class="fas fa-star"></i>
411
+ <i class="fas fa-star"></i>
412
+ <i class="fas fa-star"></i>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="testimonial-card bg-purple-50 p-8 rounded-lg shadow-md">
417
+ <div class="flex items-center mb-6">
418
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Ana Santos" class="w-16 h-16 rounded-full object-cover mr-4">
419
+ <div>
420
+ <h4 class="font-bold text-purple-900">Ana Santos</h4>
421
+ <p class="text-gray-600 text-sm">Membro há 8 meses</p>
422
+ </div>
423
+ </div>
424
+ <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>
425
+ <div class="mt-4 text-purple-700">
426
+ <i class="fas fa-star"></i>
427
+ <i class="fas fa-star"></i>
428
+ <i class="fas fa-star"></i>
429
+ <i class="fas fa-star"></i>
430
+ <i class="fas fa-star"></i>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </section>
436
+
437
+ <!-- Contact Section -->
438
+ <section id="contact" class="py-16 bg-purple-900 text-white">
439
+ <div class="container mx-auto px-4">
440
+ <div class="text-center mb-16">
441
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Venha nos Visitar</h2>
442
+ <div class="w-24 h-1 bg-white mx-auto"></div>
443
+ </div>
444
+
445
+ <div class="flex flex-col md:flex-row">
446
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
447
+ <h3 class="text-2xl font-bold mb-6">Informações de Contato</h3>
448
+
449
+ <div class="flex items-start mb-6">
450
+ <i class="fas fa-map-marker-alt text-xl mr-4 mt-1"></i>
451
+ <div>
452
+ <h4 class="font-bold mb-1">Endereço</h4>
453
+ <p>Rua José Cosme Pamplona, 1737</p>
454
+ <p>Bela Vista, Palhoça - SC</p>
455
+ <p>CEP: 88132-700</p>
456
+ </div>
457
+ </div>
458
+
459
+ <div class="flex items-start mb-6">
460
+ <i class="fas fa-phone-alt text-xl mr-4 mt-1"></i>
461
+ <div>
462
+ <h4 class="font-bold mb-1">Telefone</h4>
463
+ <p>(11) 1234-5678</p>
464
+ <p>(11) 98765-4321 (WhatsApp)</p>
465
+ </div>
466
+ </div>
467
+
468
+ <div class="flex items-start mb-6">
469
+ <i class="fas fa-envelope text-xl mr-4 mt-1"></i>
470
+ <div>
471
+ <h4 class="font-bold mb-1">Email</h4>
472
+ <p>contato@adrefugiocristao.com.br</p>
473
+ </div>
474
+ </div>
475
+
476
+ <div class="flex items-start">
477
+ <i class="fas fa-clock text-xl mr-4 mt-1"></i>
478
+ <div>
479
+ <h4 class="font-bold mb-1">Horários de Culto</h4>
480
+ <p>Sábado: 19h30 (Culto)</p>
481
+ <p>Domingo: 19h30 (Culto)</p>
482
+ <p>Quarta-feira: 20h (Oração)</p>
483
+ </div>
484
+ </div>
485
+
486
+ <div class="mt-8">
487
+ <h4 class="font-bold mb-4">Siga-nos nas redes sociais</h4>
488
+ <div class="flex space-x-4">
489
+ <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>
490
+ <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>
491
+ <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>
492
+ <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>
493
+ </div>
494
+ </div>
495
+ </div>
496
+
497
+ <div class="md:w-1/2">
498
+ <h3 class="text-2xl font-bold mb-6">Envie uma Mensagem</h3>
499
+ <form class="space-y-4">
500
+ <div>
501
+ <label for="name" class="block mb-1">Seu Nome</label>
502
+ <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">
503
+ </div>
504
+ <div>
505
+ <label for="email" class="block mb-1">Seu Email</label>
506
+ <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">
507
+ </div>
508
+ <div>
509
+ <label for="phone" class="block mb-1">Seu Telefone</label>
510
+ <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">
511
+ </div>
512
+ <div>
513
+ <label for="message" class="block mb-1">Sua Mensagem</label>
514
+ <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>
515
+ </div>
516
+ <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>
517
+ </form>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </section>
522
+
523
+ <!-- Map Section -->
524
+ <div class="h-96 w-full">
525
+ <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>
526
+ </div>
527
+
528
+ <!-- Footer -->
529
+ <footer class="bg-purple-950 text-white py-12">
530
+ <div class="container mx-auto px-4">
531
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
532
+ <div>
533
+ <div class="flex items-center mb-4">
534
+ <i class="fas fa-cross text-2xl mr-2"></i>
535
+ <h3 class="text-xl font-bold">Igreja Assembléia de Deus Refúgio Cristão</h3>
536
+ </div>
537
+ <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>
538
+ </div>
539
+
540
+ <div>
541
+ <h4 class="text-lg font-bold mb-4">Links Rápidos</h4>
542
+ <ul class="space-y-2">
543
+ <li><a href="#home" class="text-purple-300 hover:text-white transition duration-300">Início</a></li>
544
+ <li><a href="#events" class="text-purple-300 hover:text-white transition duration-300">Eventos</a></li>
545
+ <li><a href="#sermons" class="text-purple-300 hover:text-white transition duration-300">Mensagens</a></li>
546
+ <li><a href="#contact" class="text-purple-300 hover:text-white transition duration-300">Contato</a></li>
547
+ </ul>
548
+ </div>
549
+
550
+ <div>
551
+ <h4 class="text-lg font-bold mb-4">Ministérios</h4>
552
+ <ul class="space-y-2">
553
+ <li><a href="#" class="text-purple-300 hover:text-white transition duration-300">Louvor</a></li>
554
+ <li><a href="#" class="text-purple-300 hover:text-white transition duration-300">Crianças</a></li>
555
+ <li><a href="#" class="text-purple-300 hover:text-white transition duration-300">Jovens</a></li>
556
+ <li><a href="#" class="text-purple-300 hover:text-white transition duration-300">Mulheres</a></li>
557
+ <li><a href="#" class="text-purple-300 hover:text-white transition duration-300">Homens</a></li>
558
+ </ul>
559
+ </div>
560
+
561
+ <div>
562
+ <h4 class="text-lg font-bold mb-4">Newsletter</h4>
563
+ <p class="text-purple-300 mb-4">Inscreva-se para receber notícias e eventos em seu email.</p>
564
+ <form class="flex">
565
+ <input type="email" placeholder="Seu email" class="px-4 py-2 rounded-l text-gray-900 w-full focus:outline-none">
566
+ <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>
567
+ </form>
568
+ </div>
569
+ </div>
570
+
571
+ <div class="border-t border-purple-800 mt-12 pt-8 text-center text-purple-400">
572
+ <p>&copy; 2023 Igreja Assembléia de Deus Refúgio Cristão. Todos os direitos reservados.</p>
573
+ </div>
574
+ </div>
575
+ </footer>
576
+
577
+ <!-- Back to Top Button -->
578
+ <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">
579
+ <i class="fas fa-arrow-up"></i>
580
+ </button>
581
+
582
+ <script>
583
+ // Mobile Menu Toggle
584
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
585
+ const mobileMenu = document.getElementById('mobile-menu');
586
+
587
+ mobileMenuButton.addEventListener('click', () => {
588
+ mobileMenu.classList.toggle('hidden');
589
+ });
590
+
591
+ // Back to Top Button
592
+ const backToTopButton = document.getElementById('back-to-top');
593
+
594
+ window.addEventListener('scroll', () => {
595
+ if (window.pageYOffset > 300) {
596
+ backToTopButton.classList.remove('hidden');
597
+ } else {
598
+ backToTopButton.classList.add('hidden');
599
+ }
600
+ });
601
+
602
+ backToTopButton.addEventListener('click', () => {
603
+ window.scrollTo({ top: 0, behavior: 'smooth' });
604
+ });
605
+
606
+ // Smooth Scrolling for Anchor Links
607
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
608
+ anchor.addEventListener('click', function (e) {
609
+ e.preventDefault();
610
+
611
+ const targetId = this.getAttribute('href');
612
+ if (targetId === '#') return;
613
+
614
+ const targetElement = document.querySelector(targetId);
615
+ if (targetElement) {
616
+ targetElement.scrollIntoView({
617
+ behavior: 'smooth'
618
+ });
619
+
620
+ // Close mobile menu if open
621
+ mobileMenu.classList.add('hidden');
622
+ }
623
+ });
624
+ });
625
+ </script>
626
+ <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>
627
+ </html>