Hugging Face's logo

Spaces:
lucianotonet
/
dass-21
Running

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

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +305 -420
index.html CHANGED
@@ -3,527 +3,412 @@
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DASS-21 Digital | SISTEP - Plataforma de Avaliação Psicológica</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, #4f46e5 0%, #7c3aed 100%);
12
  }
13
+ .feature-icon {
14
+ background-color: #7c3aed;
15
+ color: white;
16
  }
17
+ .cta-button {
18
  transition: all 0.3s ease;
19
+ box-shadow: 0 4px 6px rgba(124, 58, 237, 0.3);
20
  }
21
+ .cta-button:hover {
22
+ transform: translateY(-2px);
23
+ box-shadow: 0 6px 8px rgba(124, 58, 237, 0.4);
24
  }
25
+ .logo-s {
26
+ position: relative;
27
+ width: 40px;
28
+ height: 40px;
29
+ background: #4f46e5;
30
+ border-radius: 50%;
31
+ display: flex;
32
+ align-items: center;
33
+ justify-content: center;
34
+ color: white;
35
+ font-weight: bold;
36
+ font-size: 24px;
37
+ font-family: 'Arial', sans-serif;
38
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
39
  }
40
+ .logo-s::before {
41
+ content: "";
42
+ position: absolute;
43
+ width: 30px;
44
+ height: 30px;
45
+ border: 3px solid white;
46
+ border-radius: 50%;
47
+ border-top-color: transparent;
48
+ border-right-color: transparent;
49
+ transform: rotate(45deg);
50
  }
51
  </style>
52
  </head>
53
+ <body class="font-sans text-gray-800">
54
+ <!-- Header -->
55
+ <header class="bg-white shadow-sm">
56
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
57
  <div class="flex items-center">
58
+ <div class="logo-s mr-3">S</div>
59
+ <span class="text-xl font-bold text-indigo-600">SISTEP</span>
60
  </div>
61
  <nav class="hidden md:flex space-x-8">
62
+ <a href="#" class="text-gray-600 hover:text-indigo-600">Início</a>
63
+ <a href="#" class="text-gray-600 hover:text-indigo-600">Testes</a>
64
+ <a href="#" class="text-gray-600 hover:text-indigo-600">Recursos</a>
65
+ <a href="#" class="text-gray-600 hover:text-indigo-600">Preços</a>
66
+ <a href="#" class="text-gray-600 hover:text-indigo-600">Contato</a>
67
  </nav>
68
+ <div class="flex items-center space-x-4">
69
+ <a href="#" class="text-gray-600 hover:text-indigo-600 hidden md:block">Login</a>
70
+ <a href="#" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">Cadastre-se</a>
71
+ </div>
72
  </div>
73
  </header>
74
 
75
  <!-- Hero Section -->
76
+ <section class="hero-gradient text-white py-16 md:py-24">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
77
  <div class="container mx-auto px-4">
78
+ <div class="max-w-3xl mx-auto text-center">
79
+ <h1 class="text-3xl md:text-5xl font-bold mb-6">Avalie Depressão, Ansiedade e Estresse com Eficiência no SISTEP</h1>
80
+ <p class="text-xl md:text-2xl mb-8">Obtenha resultados instantâneos e seguros com a aplicação digital do DASS-21 em nossa plataforma especializada.</p>
81
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
82
+ <a href="#cta" class="cta-button bg-white text-indigo-600 font-bold py-3 px-8 rounded-lg">Experimente o DASS-21</a>
83
+ <a href="#como-funciona" class="cta-button bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-lg">Saiba Mais</a>
 
 
 
 
 
 
 
 
 
 
84
  </div>
85
  </div>
86
  </div>
87
  </section>
88
 
89
+ <!-- Problem/Solution Section -->
90
+ <section class="py-16 bg-gray-50">
91
  <div class="container mx-auto px-4">
92
+ <div class="max-w-4xl mx-auto">
93
+ <div class="md:flex items-center gap-12">
94
+ <div class="md:w-1/2 mb-8 md:mb-0">
95
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">O desafio da avaliação psicológica na era digital</h2>
96
+ <p class="text-gray-600 mb-4">Profissionais de psicologia enfrentam diariamente a necessidade de avaliar sintomas de depressão, ansiedade e estresse de forma precisa e eficiente, enquanto lidam com:</p>
97
+ <ul class="space-y-2 mb-6">
98
+ <li class="flex items-start">
99
+ <i class="fas fa-times-circle text-red-500 mt-1 mr-2"></i>
100
+ <span class="text-gray-600">Processos manuais demorados</span>
101
+ </li>
102
+ <li class="flex items-start">
103
+ <i class="fas fa-times-circle text-red-500 mt-1 mr-2"></i>
104
+ <span class="text-gray-600">Risco de erros na correção</span>
105
+ </li>
106
+ <li class="flex items-start">
107
+ <i class="fas fa-times-circle text-red-500 mt-1 mr-2"></i>
108
+ <span class="text-gray-600">Dificuldade no armazenamento seguro dos dados</span>
109
+ </li>
110
+ </ul>
111
  </div>
112
+ <div class="md:w-1/2 bg-white p-8 rounded-xl shadow-md">
113
+ <h2 class="text-2xl font-bold text-indigo-600 mb-4">A solução SISTEP com o DASS-21</h2>
114
+ <p class="text-gray-600 mb-4">Nossa plataforma transforma a aplicação do DASS-21 em um processo digital intuitivo, oferecendo:</p>
115
+ <ul class="space-y-2">
116
+ <li class="flex items-start">
117
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
118
+ <span class="text-gray-600">Aplicação e correção automática em minutos</span>
119
+ </li>
120
+ <li class="flex items-start">
121
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
122
+ <span class="text-gray-600">Resultados precisos e instantâneos</span>
123
+ </li>
124
+ <li class="flex items-start">
125
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
126
+ <span class="text-gray-600">Armazenamento seguro em conformidade com a LGPD</span>
127
+ </li>
128
+ </ul>
129
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
130
  </div>
131
  </div>
132
  </div>
133
  </section>
134
 
135
+ <!-- What is DASS-21 Section -->
136
+ <section class="py-16">
137
  <div class="container mx-auto px-4">
138
+ <div class="max-w-4xl mx-auto">
139
+ <div class="text-center mb-12">
140
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">O que é o DASS-21?</h2>
141
+ <div class="w-24 h-1 bg-indigo-600 mx-auto"></div>
 
 
 
 
 
 
142
  </div>
143
+ <div class="md:flex gap-8">
144
+ <div class="md:w-1/2 mb-8 md:mb-0">
145
+ <p class="text-gray-600 mb-4">O <span class="font-semibold">Depression, Anxiety and Stress Scale - 21 Itens (DASS-21)</span> é um questionário de autorrelato amplamente utilizado em contextos clínicos e de pesquisa para avaliar os níveis sintomáticos de depressão, ansiedade e estresse na última semana.</p>
146
+ <p class="text-gray-600 mb-4">Desenvolvido como uma versão reduzida do DASS original, o DASS-21 mantém a confiabilidade e validade do instrumento completo, sendo uma ferramenta prática para o rastreio de sofrimento psicológico.</p>
147
+ </div>
148
+ <div class="md:w-1/2 bg-indigo-50 p-6 rounded-lg">
149
+ <h3 class="font-bold text-indigo-600 mb-3">Características principais:</h3>
150
+ <ul class="space-y-2 text-gray-700">
151
+ <li class="flex items-start">
152
+ <i class="fas fa-list-ol text-indigo-600 mt-1 mr-2"></i>
153
+ <span>21 itens em escala Likert</span>
154
+ </li>
155
+ <li class="flex items-start">
156
+ <i class="fas fa-clock text-indigo-600 mt-1 mr-2"></i>
157
+ <span>Tempo médio de aplicação: 5-10 minutos</span>
158
+ </li>
159
+ <li class="flex items-start">
160
+ <i class="fas fa-users text-indigo-600 mt-1 mr-2"></i>
161
+ <span>Indicado para adultos</span>
162
+ </li>
163
+ <li class="flex items-start">
164
+ <i class="fas fa-search text-indigo-600 mt-1 mr-2"></i>
165
+ <span>Ferramenta de rastreio (não diagnóstico)</span>
166
+ </li>
167
+ </ul>
168
  </div>
169
  </div>
170
  </div>
171
  </div>
172
  </section>
173
 
174
+ <!-- Benefits Section -->
175
+ <section class="py-16 bg-gray-50">
176
  <div class="container mx-auto px-4">
177
+ <div class="max-w-4xl mx-auto">
178
+ <div class="text-center mb-12">
179
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Por que usar o DASS-21 no SISTEP?</h2>
180
+ <p class="text-gray-600 max-w-2xl mx-auto">Descubra como nossa plataforma otimiza o processo de avaliação psicológica para você e seus pacientes</p>
181
+ </div>
182
+ <div class="grid md:grid-cols-2 gap-8">
183
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
184
+ <div class="feature-icon w-12 h-12 rounded-full flex items-center justify-center mb-4">
185
+ <i class="fas fa-bolt text-xl"></i>
 
 
 
 
186
  </div>
187
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Aplicação Digital Simplificada</h3>
188
+ <p class="text-gray-600">Interface intuitiva e moderna, disponível via web ou aplicativo, tornando o processo de aplicação mais acessível para você e seus pacientes.</p>
189
  </div>
190
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
191
+ <div class="feature-icon w-12 h-12 rounded-full flex items-center justify-center mb-4">
192
+ <i class="fas fa-robot text-xl"></i>
193
+ </div>
194
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Correção Automática e Instantânea</h3>
195
+ <p class="text-gray-600">Resultados calculados automaticamente assim que o teste é concluído, com scores brutos e percentis quando aplicável, economizando seu tempo valioso.</p>
 
196
  </div>
197
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
198
+ <div class="feature-icon w-12 h-12 rounded-full flex items-center justify-center mb-4">
199
+ <i class="fas fa-shield-alt text-xl"></i>
 
 
 
 
 
 
200
  </div>
201
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Segurança e Conformidade LGPD</h3>
202
+ <p class="text-gray-600">Dados armazenados com criptografia e todas as medidas necessárias para garantir a privacidade e conformidade com a legislação brasileira.</p>
203
  </div>
204
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
205
+ <div class="feature-icon w-12 h-12 rounded-full flex items-center justify-center mb-4">
206
+ <i class="fas fa-chart-line text-xl"></i>
207
+ </div>
208
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Gestão Centralizada</h3>
209
+ <p class="text-gray-600">Todos os resultados e histórico de aplicações organizados em um só lugar, facilitando o acompanhamento longitudinal dos pacientes.</p>
 
210
  </div>
211
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
212
+ <div class="feature-icon w-12 h-12 rounded-full flex items-center justify-center mb-4">
213
+ <i class="fas fa-universal-access text-xl"></i>
 
 
 
 
 
 
214
  </div>
215
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Acessibilidade Inclusiva</h3>
216
+ <p class="text-gray-600">Design pensado para diferentes necessidades, com recursos como modo claro/escuro e ajustes de tamanho de fonte.</p>
217
  </div>
218
+ <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
219
+ <div class="feature-icon w-12 h-12 rounded-full flex items-center justify-center mb-4">
220
+ <i class="fas fa-laptop-house text-xl"></i>
221
+ </div>
222
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Aplicação Remota Facilitada</h3>
223
+ <p class="text-gray-600">Possibilidade de enviar o teste para pacientes realizarem remotamente, ampliando o acesso à avaliação psicológica.</p>
 
224
  </div>
225
  </div>
226
  </div>
227
  </div>
228
  </section>
229
 
230
+ <!-- How It Works Section -->
231
+ <section id="como-funciona" class="py-16">
232
+ <div class="container mx-auto px-4">
233
+ <div class="max-w-4xl mx-auto">
234
+ <div class="text-center mb-12">
235
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Como aplicar o DASS-21 no SISTEP</h2>
236
+ <p class="text-gray-600 max-w-2xl mx-auto">Um processo simples em poucos passos</p>
237
+ </div>
238
+ <div class="grid md:grid-cols-3 gap-8">
239
+ <div class="text-center">
240
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
241
+ <span class="text-indigo-600 font-bold text-xl">1</span>
242
+ </div>
243
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Selecione o teste</h3>
244
+ <p class="text-gray-600">Acesse sua conta SISTEP e escolha o DASS-21 na biblioteca de testes disponíveis.</p>
245
+ </div>
246
+ <div class="text-center">
247
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
248
+ <span class="text-indigo-600 font-bold text-xl">2</span>
249
+ </div>
250
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Aplique ao paciente</h3>
251
+ <p class="text-gray-600">Envie o link do teste para seu paciente ou aplique diretamente em seu consultório.</p>
252
+ </div>
253
+ <div class="text-center">
254
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
255
+ <span class="text-indigo-600 font-bold text-xl">3</span>
256
+ </div>
257
+ <h3 class="font-bold text-lg text-gray-800 mb-2">Receba os resultados</h3>
258
+ <p class="text-gray-600">Visualize os scores automaticamente calculados assim que o teste for concluído.</p>
259
+ </div>
260
+ </div>
261
  </div>
262
  </div>
263
  </section>
264
 
265
+ <!-- Target Audience Section -->
266
+ <section class="py-16 bg-indigo-50">
267
+ <div class="container mx-auto px-4">
268
+ <div class="max-w-4xl mx-auto">
269
+ <div class="text-center mb-12">
270
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Para quem é indicado?</h2>
271
+ <div class="w-24 h-1 bg-indigo-600 mx-auto"></div>
272
+ </div>
273
+ <div class="md:flex gap-8">
274
+ <div class="md:w-1/2 mb-8 md:mb-0 bg-white p-6 rounded-lg shadow-sm">
275
+ <h3 class="font-bold text-lg text-indigo-600 mb-4 flex items-center">
276
+ <i class="fas fa-user-md mr-2"></i> Psicólogos
277
+ </h3>
278
+ <p class="text-gray-600 mb-4">Profissionais registrados no CRP que buscam:</p>
279
+ <ul class="space-y-2 text-gray-700">
280
+ <li class="flex items-start">
281
+ <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
282
+ <span>Ferramentas validadas para avaliação psicológica</span>
283
+ </li>
284
+ <li class="flex items-start">
285
+ <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
286
+ <span>Otimização do tempo em consultório</span>
287
+ </li>
288
+ <li class="flex items-start">
289
+ <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
290
+ <span>Armazenamento seguro dos dados dos pacientes</span>
291
+ </li>
292
+ </ul>
 
 
 
293
  </div>
294
+ <div class="md:w-1/2 bg-white p-6 rounded-lg shadow-sm">
295
+ <h3 class="font-bold text-lg text-indigo-600 mb-4 flex items-center">
296
+ <i class="fas fa-user-graduate mr-2"></i> Estudantes de Psicologia
297
+ </h3>
298
+ <p class="text-gray-600 mb-4">Alunos a partir do 6º semestre que necessitam:</p>
299
+ <ul class="space-y-2 text-gray-700">
300
+ <li class="flex items-start">
301
+ <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
302
+ <span>Familiarizar-se com instrumentos de avaliação</span>
303
+ </li>
304
+ <li class="flex items-start">
305
+ <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
306
+ <span>Realizar pesquisas acadêmicas</span>
307
+ </li>
308
+ <li class="flex items-start">
309
+ <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
310
+ <span>Praticar a aplicação de testes psicológicos</span>
311
+ </li>
312
+ </ul>
313
  </div>
314
+ </div>
315
  </div>
316
  </div>
317
  </section>
318
 
319
+ <!-- Ethical Considerations Section -->
320
+ <section class="py-16">
321
+ <div class="container mx-auto px-4">
322
+ <div class="max-w-4xl mx-auto">
323
+ <div class="text-center mb-12">
324
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Considerações Éticas e Técnicas</h2>
325
+ <p class="text-gray-600 max-w-2xl mx-auto">Informações importantes sobre o uso responsável do DASS-21</p>
 
 
 
 
 
 
 
 
326
  </div>
327
+ <div class="bg-white p-8 rounded-xl shadow-sm">
328
+ <div class="mb-6">
329
+ <h3 class="font-bold text-lg text-indigo-600 mb-2 flex items-center">
330
+ <i class="fas fa-exclamation-triangle mr-2"></i> Limitações do Instrumento
331
+ </h3>
332
+ <p class="text-gray-600">O DASS-21 é uma ferramenta de <span class="font-semibold">rastreio/triagem</span> e não deve ser utilizado como único critério para diagnóstico. A interpretação dos resultados deve sempre considerar o contexto clínico e ser realizada por profissional qualificado.</p>
 
 
 
333
  </div>
334
+ <div class="mb-6">
335
+ <h3 class="font-bold text-lg text-indigo-600 mb-2 flex items-center">
336
+ <i class="fas fa-user-shield mr-2"></i> Responsabilidade Profissional
337
+ </h3>
338
+ <p class="text-gray-600">O uso do DASS-21 deve seguir as diretrizes éticas do Conselho Federal de Psicologia (CFP). É responsabilidade do profissional aplicar, interpretar e comunicar os resultados de forma adequada e ética.</p>
 
 
 
 
 
339
  </div>
340
+ <div>
341
+ <h3 class="font-bold text-lg text-indigo-600 mb-2 flex items-center">
342
+ <i class="fas fa-lock mr-2"></i> Proteção de Dados
343
+ </h3>
344
+ <p class="text-gray-600">O SISTEP garante o armazenamento seguro dos dados em conformidade com a Lei Geral de Proteção de Dados (LGPD), mantendo a confidencialidade das informações dos pacientes.</p>
 
 
 
 
 
345
  </div>
346
  </div>
347
  </div>
348
  </div>
349
  </section>
350
 
351
+ <!-- CTA Section -->
352
+ <section id="cta" class="py-16 hero-gradient text-white">
353
  <div class="container mx-auto px-4">
354
+ <div class="max-w-4xl mx-auto text-center">
355
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para otimizar suas avaliações psicológicas?</h2>
356
+ <p class="text-xl mb-8">Experimente o DASS-21 no SISTEP e transforme sua prática clínica hoje mesmo</p>
357
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
358
+ <a href="#" class="cta-button bg-white text-indigo-600 font-bold py-3 px-8 rounded-lg">Comece Agora</a>
359
+ <a href="#" class="cta-button bg-transparent border-2 border-white text-white font-bold py-3 px-8 rounded-lg">Fale com Nossa Equipe</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
360
  </div>
361
+ <p class="mt-4 text-indigo-100">Planos a partir de R$XX/mês ou teste gratuitamente por 7 dias</p>
362
  </div>
363
  </div>
364
  </section>
365
 
366
  <!-- Footer -->
367
+ <footer class="bg-gray-800 text-white py-12">
368
  <div class="container mx-auto px-4">
369
+ <div class="grid md:grid-cols-4 gap-8">
370
  <div>
371
+ <h3 class="text-xl font-bold mb-4 flex items-center">
372
+ <div class="logo-s mr-2">S</div>
373
+ SISTEP
374
+ </h3>
375
+ <p class="text-gray-400">A plataforma digital que moderniza a avaliação psicológica no Brasil.</p>
 
 
 
376
  </div>
 
377
  <div>
378
+ <h4 class="font-bold mb-4">Links Úteis</h4>
379
+ <ul class="space-y-2">
380
+ <li><a href="#" class="text-gray-400 hover:text-white">Início</a></li>
381
+ <li><a href="#" class="text-gray-400 hover:text-white">Testes</a></li>
382
+ <li><a href="#" class="text-gray-400 hover:text-white">Recursos</a></li>
383
+ <li><a href="#" class="text-gray-400 hover:text-white">Preços</a></li>
 
384
  </ul>
385
  </div>
 
386
  <div>
387
+ <h4 class="font-bold mb-4">Jurídico</h4>
388
+ <ul class="space-y-2">
389
+ <li><a href="#" class="text-gray-400 hover:text-white">Termos de Uso</a></li>
390
+ <li><a href="#" class="text-gray-400 hover:text-white">Política de Privacidade</a></li>
391
+ <li><a href="#" class="text-gray-400 hover:text-white">LGPD</a></li>
392
+ </ul>
393
+ </div>
394
+ <div>
395
+ <h4 class="font-bold mb-4">Contato</h4>
396
+ <ul class="space-y-2">
397
  <li class="flex items-center">
398
+ <i class="fas fa-envelope mr-2 text-gray-400"></i>
399
+ <a href="mailto:[email protected]" class="text-gray-400 hover:text-white">[email protected]</a>
400
  </li>
401
  <li class="flex items-center">
402
+ <i class="fas fa-phone-alt mr-2 text-gray-400"></i>
403
+ <span class="text-gray-400">(XX) XXXX-XXXX</span>
404
  </li>
405
  </ul>
406
  </div>
 
 
 
 
 
 
 
 
 
407
  </div>
408
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
409
+ <p>© 2023 SISTEP. Todos os direitos reservados.</p>
 
 
 
 
 
410
  </div>
411
  </div>
412
  </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
413
  <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>
414
  </html>