Hugging Face's logo

Spaces:
lucianotonet
/
dass-21
Running

App Files Community
lucianotonet commited on
Commit
2132078
·
verified ·
1 Parent(s): 46be3ae

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +529 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Rgi Test
3
- emoji: 💻
4
- colorFrom: pink
5
- colorTo: red
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: rgi-test
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
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,529 @@
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>Rede Gaúcha de Imóveis - Associe-se</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
+ .hero-gradient {
11
+ background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
12
+ }
13
+ .feature-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .testimonial-card {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .testimonial-card:hover {
21
+ transform: scale(1.03);
22
+ }
23
+ .floating {
24
+ animation: floating 3s ease-in-out infinite;
25
+ }
26
+ @keyframes floating {
27
+ 0% { transform: translateY(0px); }
28
+ 50% { transform: translateY(-15px); }
29
+ 100% { transform: translateY(0px); }
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="font-sans antialiased text-gray-800">
34
+ <!-- Header/Navigation -->
35
+ <header class="bg-white shadow-sm sticky top-0 z-50">
36
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
37
+ <div class="flex items-center">
38
+ <img src="https://via.placeholder.com/150x50?text=RGI+Logo" alt="Rede Gaúcha de Imóveis" class="h-10">
39
+ </div>
40
+ <nav class="hidden md:flex space-x-8">
41
+ <a href="#beneficios" class="text-gray-600 hover:text-blue-600 font-medium">Benefícios</a>
42
+ <a href="#sobre" class="text-gray-600 hover:text-blue-600 font-medium">Sobre Nós</a>
43
+ <a href="#depoimentos" class="text-gray-600 hover:text-blue-600 font-medium">Depoimentos</a>
44
+ <a href="#contato" class="text-gray-600 hover:text-blue-600 font-medium">Contato</a>
45
+ </nav>
46
+ <button class="md:hidden text-gray-600">
47
+ <i class="fas fa-bars text-2xl"></i>
48
+ </button>
49
+ </div>
50
+ </header>
51
+
52
+ <!-- Hero Section -->
53
+ <section class="hero-gradient text-white py-20 md:py-32">
54
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
55
+ <div class="md:w-1/2 mb-12 md:mb-0">
56
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Junte-se à maior rede de imobiliárias do RS</h1>
57
+ <p class="text-xl mb-8">Amplie seus negócios com acesso a mais de 25 mil imóveis e uma rede de mais de 60 imobiliárias parceiras.</p>
58
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
59
+ <a href="#associe-se" class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-8 rounded-full text-center transition duration-300">Associe-se agora</a>
60
+ <a href="#saiba-mais" class="border-2 border-white text-white hover:bg-white hover:text-blue-600 font-bold py-3 px-8 rounded-full text-center transition duration-300">Saiba mais</a>
61
+ </div>
62
+ </div>
63
+ <div class="md:w-1/2 relative">
64
+ <img src="https://via.placeholder.com/600x400?text=Reunião+de+Corretores" alt="Corretores reunidos" class="rounded-lg shadow-2xl floating">
65
+ <div class="absolute -bottom-6 -left-6 bg-yellow-400 text-gray-900 py-2 px-4 rounded-lg shadow-lg hidden md:block">
66
+ <p class="font-bold">+60 imobiliárias associadas</p>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </section>
71
+
72
+ <!-- Stats Section -->
73
+ <section class="bg-gray-50 py-12">
74
+ <div class="container mx-auto px-4">
75
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
76
+ <div class="p-6">
77
+ <div class="text-4xl font-bold text-blue-600 mb-2">60+</div>
78
+ <div class="text-gray-600">Imobiliárias associadas</div>
79
+ </div>
80
+ <div class="p-6">
81
+ <div class="text-4xl font-bold text-blue-600 mb-2">25K+</div>
82
+ <div class="text-gray-600">Imóveis disponíveis</div>
83
+ </div>
84
+ <div class="p-6">
85
+ <div class="text-4xl font-bold text-blue-600 mb-2">15+</div>
86
+ <div class="text-gray-600">Anos de experiência</div>
87
+ </div>
88
+ <div class="p-6">
89
+ <div class="text-4xl font-bold text-blue-600 mb-2">100%</div>
90
+ <div class="text-gray-600">Dedicação aos parceiros</div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </section>
95
+
96
+ <!-- Benefits Section -->
97
+ <section id="beneficios" class="py-20 bg-white">
98
+ <div class="container mx-auto px-4">
99
+ <div class="text-center mb-16">
100
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Por que se associar à RGI?</h2>
101
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Descubra os benefícios exclusivos para imobiliárias parceiras</p>
102
+ </div>
103
+
104
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
105
+ <!-- Benefit 1 -->
106
+ <div class="bg-white rounded-xl p-8 shadow-md feature-card transition duration-300">
107
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
108
+ <i class="fas fa-network-wired text-blue-600 text-2xl"></i>
109
+ </div>
110
+ <h3 class="text-xl font-bold mb-4 text-center">Rede Colaborativa</h3>
111
+ <p class="text-gray-600 text-center">Acesso a uma rede de mais de 60 imobiliárias parceiras, ampliando suas oportunidades de negócios.</p>
112
+ </div>
113
+
114
+ <!-- Benefit 2 -->
115
+ <div class="bg-white rounded-xl p-8 shadow-md feature-card transition duration-300">
116
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
117
+ <i class="fas fa-home text-blue-600 text-2xl"></i>
118
+ </div>
119
+ <h3 class="text-xl font-bold mb-4 text-center">Portfólio Ampliado</h3>
120
+ <p class="text-gray-600 text-center">Mais de 25 mil imóveis disponíveis em nossa base compartilhada entre todas as associadas.</p>
121
+ </div>
122
+
123
+ <!-- Benefit 3 -->
124
+ <div class="bg-white rounded-xl p-8 shadow-md feature-card transition duration-300">
125
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
126
+ <i class="fas fa-graduation-cap text-blue-600 text-2xl"></i>
127
+ </div>
128
+ <h3 class="text-xl font-bold mb-4 text-center">Universidade Corporativa</h3>
129
+ <p class="text-gray-600 text-center">Acesso exclusivo a treinamentos, cursos e capacitações para você e sua equipe.</p>
130
+ </div>
131
+
132
+ <!-- Benefit 4 -->
133
+ <div class="bg-white rounded-xl p-8 shadow-md feature-card transition duration-300">
134
+ <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
135
+ <i class="fas fa-handshake text-blue-600 text-2xl"></i>
136
+ </div>
137
+ <h3 class="text-xl font-bold mb-4 text-center">Suporte Completo</h3>
138
+ <p class="text-gray-600 text-center">Assessoria jurídica, marketing compartilhado e todo o suporte necessário para seu crescimento.</p>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </section>
143
+
144
+ <!-- About Section -->
145
+ <section id="sobre" class="py-20 bg-gray-50">
146
+ <div class="container mx-auto px-4">
147
+ <div class="flex flex-col lg:flex-row items-center">
148
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
149
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Sobre a Rede Gaúcha de Imóveis</h2>
150
+ <p class="text-gray-600 mb-6 text-lg">A RGI é a maior rede de imobiliárias associadas do Rio Grande do Sul, com mais de 15 anos de experiência no mercado imobiliário.</p>
151
+ <p class="text-gray-600 mb-8 text-lg">Nossa missão é fortalecer o mercado imobiliário gaúcho através da colaboração entre imobiliárias, compartilhamento de conhecimento e criação de oportunidades de negócios para todos os associados.</p>
152
+ <div class="flex space-x-4">
153
+ <div class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium">Missão</div>
154
+ <div class="bg-blue-100 text-blue-600 px-6 py-3 rounded-lg font-medium">Visão</div>
155
+ <div class="bg-blue-100 text-blue-600 px-6 py-3 rounded-lg font-medium">Valores</div>
156
+ </div>
157
+ </div>
158
+ <div class="lg:w-1/2 relative">
159
+ <img src="https://via.placeholder.com/600x400?text=Equipe+RGI" alt="Equipe RGI" class="rounded-lg shadow-xl w-full">
160
+ <div class="absolute -bottom-6 -right-6 bg-white p-6 rounded-lg shadow-lg hidden lg:block">
161
+ <div class="flex items-center">
162
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
163
+ <i class="fas fa-trophy text-blue-600"></i>
164
+ </div>
165
+ <div>
166
+ <p class="font-bold">Prêmio Excelência Imobiliária</p>
167
+ <p class="text-sm text-gray-600">Reconhecimento por 5 anos consecutivos</p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </section>
175
+
176
+ <!-- Testimonials Section -->
177
+ <section id="depoimentos" class="py-20 bg-white">
178
+ <div class="container mx-auto px-4">
179
+ <div class="text-center mb-16">
180
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">O que dizem nossos associados</h2>
181
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Depoimentos de imobiliárias que já fazem parte da nossa rede</p>
182
+ </div>
183
+
184
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
185
+ <!-- Testimonial 1 -->
186
+ <div class="bg-gray-50 rounded-xl p-8 testimonial-card">
187
+ <div class="flex items-center mb-6">
188
+ <img src="https://via.placeholder.com/80x80?text=CEO" alt="Depoimento" class="w-16 h-16 rounded-full mr-4">
189
+ <div>
190
+ <h4 class="font-bold">Carlos Mendes</h4>
191
+ <p class="text-gray-600 text-sm">Imobiliária Horizonte</p>
192
+ </div>
193
+ </div>
194
+ <p class="text-gray-600 mb-6">"Desde que nos associamos à RGI, nossa carteira de imóveis triplicou e fechamos negócios que antes não seriam possíveis. A rede realmente faz a diferença!"</p>
195
+ <div class="flex text-yellow-400">
196
+ <i class="fas fa-star"></i>
197
+ <i class="fas fa-star"></i>
198
+ <i class="fas fa-star"></i>
199
+ <i class="fas fa-star"></i>
200
+ <i class="fas fa-star"></i>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Testimonial 2 -->
205
+ <div class="bg-gray-50 rounded-xl p-8 testimonial-card">
206
+ <div class="flex items-center mb-6">
207
+ <img src="https://via.placeholder.com/80x80?text=Diretora" alt="Depoimento" class="w-16 h-16 rounded-full mr-4">
208
+ <div>
209
+ <h4 class="font-bold">Ana Paula Silva</h4>
210
+ <p class="text-gray-600 text-sm">Imobiliária Bella Casa</p>
211
+ </div>
212
+ </div>
213
+ <p class="text-gray-600 mb-6">"Os treinamentos da Universidade Corporativa foram transformadores para nossa equipe. Hoje temos muito mais conhecimento e confiança para fechar negócios."</p>
214
+ <div class="flex text-yellow-400">
215
+ <i class="fas fa-star"></i>
216
+ <i class="fas fa-star"></i>
217
+ <i class="fas fa-star"></i>
218
+ <i class="fas fa-star"></i>
219
+ <i class="fas fa-star"></i>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Testimonial 3 -->
224
+ <div class="bg-gray-50 rounded-xl p-8 testimonial-card">
225
+ <div class="flex items-center mb-6">
226
+ <img src="https://via.placeholder.com/80x80?text=Sócio" alt="Depoimento" class="w-16 h-16 rounded-full mr-4">
227
+ <div>
228
+ <h4 class="font-bold">Roberto Almeida</h4>
229
+ <p class="text-gray-600 text-sm">Imobiliária Top House</p>
230
+ </div>
231
+ </div>
232
+ <p class="text-gray-600 mb-6">"A assessoria jurídica da RGI nos salvou em várias situações complexas. Ter esse suporte especializado faz toda a diferença no dia a dia."</p>
233
+ <div class="flex text-yellow-400">
234
+ <i class="fas fa-star"></i>
235
+ <i class="fas fa-star"></i>
236
+ <i class="fas fa-star"></i>
237
+ <i class="fas fa-star"></i>
238
+ <i class="fas fa-star-half-alt"></i>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </section>
244
+
245
+ <!-- CTA Section -->
246
+ <section id="associe-se" class="py-20 hero-gradient text-white">
247
+ <div class="container mx-auto px-4 text-center">
248
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para ampliar seus negócios?</h2>
249
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Junte-se à maior rede de imobiliárias do Rio Grande do Sul e leve sua empresa para o próximo nível.</p>
250
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
251
+ <a href="#formulario" class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-4 px-12 rounded-full text-center transition duration-300 text-lg">Quero me associar</a>
252
+ <a href="#contato" class="border-2 border-white text-white hover:bg-white hover:text-blue-600 font-bold py-4 px-12 rounded-full text-center transition duration-300 text-lg">Falar com um consultor</a>
253
+ </div>
254
+ </div>
255
+ </section>
256
+
257
+ <!-- Contact Form -->
258
+ <section id="formulario" class="py-20 bg-white">
259
+ <div class="container mx-auto px-4 max-w-4xl">
260
+ <div class="bg-gray-50 rounded-xl p-8 md:p-12 shadow-lg">
261
+ <h2 class="text-3xl font-bold mb-2">Formulário de Associação</h2>
262
+ <p class="text-gray-600 mb-8">Preencha o formulário abaixo e em breve entraremos em contato com mais informações.</p>
263
+
264
+ <form id="contactForm" class="grid md:grid-cols-2 gap-6">
265
+ <div>
266
+ <label for="nome" class="block text-gray-700 font-medium mb-2">Nome completo*</label>
267
+ <input type="text" id="nome" name="nome" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
268
+ </div>
269
+
270
+ <div>
271
+ <label for="imobiliaria" class="block text-gray-700 font-medium mb-2">Imobiliária*</label>
272
+ <input type="text" id="imobiliaria" name="imobiliaria" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
273
+ </div>
274
+
275
+ <div>
276
+ <label for="email" class="block text-gray-700 font-medium mb-2">E-mail*</label>
277
+ <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
278
+ </div>
279
+
280
+ <div>
281
+ <label for="telefone" class="block text-gray-700 font-medium mb-2">Telefone*</label>
282
+ <input type="tel" id="telefone" name="telefone" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
283
+ </div>
284
+
285
+ <div class="md:col-span-2">
286
+ <label for="mensagem" class="block text-gray-700 font-medium mb-2">Mensagem (opcional)</label>
287
+ <textarea id="mensagem" name="mensagem" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
288
+ </div>
289
+
290
+ <div class="md:col-span-2">
291
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-lg w-full transition duration-300">Enviar solicitação</button>
292
+ </div>
293
+ </form>
294
+ </div>
295
+ </div>
296
+ </section>
297
+
298
+ <!-- FAQ Section -->
299
+ <section class="py-20 bg-gray-50">
300
+ <div class="container mx-auto px-4 max-w-4xl">
301
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">Perguntas frequentes</h2>
302
+
303
+ <div class="space-y-4">
304
+ <!-- FAQ Item 1 -->
305
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
306
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
307
+ <span class="text-lg font-medium">Quais são os requisitos para se associar à RGI?</span>
308
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
309
+ </button>
310
+ <div class="faq-content px-6 pb-6 hidden">
311
+ <p class="text-gray-600">Para se associar à RGI, sua imobiliária precisa estar regularmente registrada no CRECI, ter pelo menos 1 ano de atuação no mercado e compartilhar dos mesmos valores éticos e profissionais que defendemos.</p>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- FAQ Item 2 -->
316
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
317
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
318
+ <span class="text-lg font-medium">Como funciona o compartilhamento de imóveis?</span>
319
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
320
+ </button>
321
+ <div class="faq-content px-6 pb-6 hidden">
322
+ <p class="text-gray-600">Todas as imobiliárias associadas têm acesso a uma plataforma exclusiva onde podem cadastrar seus imóveis e visualizar os imóveis disponíveis nas outras imobiliárias da rede. As negociações seguem regras claras de repartição de comissões.</p>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- FAQ Item 3 -->
327
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
328
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
329
+ <span class="text-lg font-medium">Quais são os custos de associação?</span>
330
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
331
+ </button>
332
+ <div class="faq-content px-6 pb-6 hidden">
333
+ <p class="text-gray-600">Os valores variam conforme o tamanho e localização da imobiliária. Oferecemos diferentes planos para atender desde pequenas até grandes imobiliárias. Entre em contato para receber uma proposta personalizada.</p>
334
+ </div>
335
+ </div>
336
+
337
+ <!-- FAQ Item 4 -->
338
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
339
+ <button class="faq-toggle w-full flex justify-between items-center p-6 text-left">
340
+ <span class="text-lg font-medium">Quanto tempo leva para o processo de associação?</span>
341
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
342
+ </button>
343
+ <div class="faq-content px-6 pb-6 hidden">
344
+ <p class="text-gray-600">Após a análise e aprovação da documentação, o processo completo leva em média 15 dias úteis. Nossos consultores acompanham todo o processo e oferecem todo o suporte necessário.</p>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </section>
350
+
351
+ <!-- Contact Info -->
352
+ <section id="contato" class="py-20 bg-white">
353
+ <div class="container mx-auto px-4">
354
+ <div class="flex flex-col lg:flex-row">
355
+ <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
356
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Entre em contato</h2>
357
+ <p class="text-gray-600 mb-8 text-lg">Tem dúvidas ou quer saber mais sobre como se associar à RGI? Nossa equipe está pronta para ajudar.</p>
358
+
359
+ <div class="space-y-6">
360
+ <div class="flex items-start">
361
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
362
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
363
+ </div>
364
+ <div>
365
+ <h4 class="font-bold mb-1">Endereço</h4>
366
+ <p class="text-gray-600">Av. Assis Brasil, 3940, Porto Alegre - RS</p>
367
+ </div>
368
+ </div>
369
+
370
+ <div class="flex items-start">
371
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
372
+ <i class="fas fa-phone-alt text-blue-600"></i>
373
+ </div>
374
+ <div>
375
+ <h4 class="font-bold mb-1">Telefone</h4>
376
+ <p class="text-gray-600">(51) 3023-4567</p>
377
+ </div>
378
+ </div>
379
+
380
+ <div class="flex items-start">
381
+ <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
382
+ <i class="fas fa-envelope text-blue-600"></i>
383
+ </div>
384
+ <div>
385
+ <h4 class="font-bold mb-1">E-mail</h4>
386
+ <p class="text-gray-600">[email protected]</p>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="lg:w-1/2">
393
+ <div class="bg-gray-50 rounded-xl p-8 h-full">
394
+ <h3 class="text-2xl font-bold mb-6">Envie uma mensagem</h3>
395
+ <form class="space-y-4">
396
+ <div>
397
+ <label for="contact-name" class="block text-gray-700 font-medium mb-2">Nome*</label>
398
+ <input type="text" id="contact-name" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
399
+ </div>
400
+
401
+ <div>
402
+ <label for="contact-email" class="block text-gray-700 font-medium mb-2">E-mail*</label>
403
+ <input type="email" id="contact-email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
404
+ </div>
405
+
406
+ <div>
407
+ <label for="contact-subject" class="block text-gray-700 font-medium mb-2">Assunto</label>
408
+ <input type="text" id="contact-subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
409
+ </div>
410
+
411
+ <div>
412
+ <label for="contact-message" class="block text-gray-700 font-medium mb-2">Mensagem*</label>
413
+ <textarea id="contact-message" rows="4" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
414
+ </div>
415
+
416
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300">Enviar mensagem</button>
417
+ </form>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </section>
423
+
424
+ <!-- Footer -->
425
+ <footer class="bg-gray-900 text-white py-12">
426
+ <div class="container mx-auto px-4">
427
+ <div class="grid md:grid-cols-4 gap-12">
428
+ <div>
429
+ <img src="https://via.placeholder.com/150x50?text=RGI+Logo" alt="Rede Gaúcha de Imóveis" class="h-10 mb-6">
430
+ <p class="text-gray-400 mb-4">A maior rede de imobiliárias associadas do Rio Grande do Sul.</p>
431
+ <div class="flex space-x-4">
432
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
433
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
434
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
435
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
436
+ </div>
437
+ </div>
438
+
439
+ <div>
440
+ <h4 class="font-bold text-lg mb-6">Links úteis</h4>
441
+ <ul class="space-y-3">
442
+ <li><a href="#" class="text-gray-400 hover:text-white">Benefícios</a></li>
443
+ <li><a href="#" class="text-gray-400 hover:text-white">Como associar-se</a></li>
444
+ <li><a href="#" class="text-gray-400 hover:text-white">Universidade Corporativa</a></li>
445
+ <li><a href="#" class="text-gray-400 hover:text-white">Eventos</a></li>
446
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
447
+ </ul>
448
+ </div>
449
+
450
+ <div>
451
+ <h4 class="font-bold text-lg mb-6">Contato</h4>
452
+ <ul class="space-y-3 text-gray-400">
453
+ <li class="flex items-start">
454
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-sm"></i>
455
+ <span>Av. Assis Brasil, 3940, Porto Alegre - RS</span>
456
+ </li>
457
+ <li class="flex items-center">
458
+ <i class="fas fa-phone-alt mr-3 text-sm"></i>
459
+ <span>(51) 3023-4567</span>
460
+ </li>
461
+ <li class="flex items-center">
462
+ <i class="fas fa-envelope mr-3 text-sm"></i>
463
+ <span>[email protected]</span>
464
+ </li>
465
+ </ul>
466
+ </div>
467
+
468
+ <div>
469
+ <h4 class="font-bold text-lg mb-6">Newsletter</h4>
470
+ <p class="text-gray-400 mb-4">Assine nossa newsletter e receba novidades sobre o mercado imobiliário.</p>
471
+ <form class="flex">
472
+ <input type="email" placeholder="Seu e-mail" class="px-4 py-3 rounded-l-lg focus:outline-none text-gray-900 w-full">
473
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 rounded-r-lg"><i class="fas fa-paper-plane"></i></button>
474
+ </form>
475
+ </div>
476
+ </div>
477
+
478
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
479
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 Rede Gaúcha de Imóveis. Todos os direitos reservados.</p>
480
+ <div class="flex space-x-6">
481
+ <a href="#" class="text-gray-400 hover:text-white">Termos de uso</a>
482
+ <a href="#" class="text-gray-400 hover:text-white">Política de privacidade</a>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </footer>
487
+
488
+ <!-- Back to Top Button -->
489
+ <button id="backToTop" class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg hidden">
490
+ <i class="fas fa-arrow-up"></i>
491
+ </button>
492
+
493
+ <script>
494
+ // FAQ Toggle
495
+ document.querySelectorAll('.faq-toggle').forEach(button => {
496
+ button.addEventListener('click', () => {
497
+ const content = button.nextElementSibling;
498
+ const icon = button.querySelector('i');
499
+
500
+ content.classList.toggle('hidden');
501
+ icon.classList.toggle('transform');
502
+ icon.classList.toggle('rotate-180');
503
+ });
504
+ });
505
+
506
+ // Back to Top Button
507
+ const backToTopButton = document.getElementById('backToTop');
508
+
509
+ window.addEventListener('scroll', () => {
510
+ if (window.pageYOffset > 300) {
511
+ backToTopButton.classList.remove('hidden');
512
+ } else {
513
+ backToTopButton.classList.add('hidden');
514
+ }
515
+ });
516
+
517
+ backToTopButton.addEventListener('click', () => {
518
+ window.scrollTo({ top: 0, behavior: 'smooth' });
519
+ });
520
+
521
+ // Form Submission
522
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
523
+ e.preventDefault();
524
+ alert('Obrigado pelo seu interesse! Entraremos em contato em breve.');
525
+ this.reset();
526
+ });
527
+ </script>
528
+ <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=lucianotonet/rgi-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
529
+ </html>