Hugging Face's logo

Spaces:
automatize
/
cade-cravinhos
Running

App Files Community
automatize commited on
Commit
1f45c26
·
verified ·
1 Parent(s): 33f0ae4

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +761 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cade Cravinhos
3
- emoji: 🌖
4
- colorFrom: purple
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: cade-cravinhos
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
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,761 @@
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>Projeto Cade Cravinhos - Transformando vidas através da educação e arte</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=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .logo {
18
+ width: 80px;
19
+ height: 80px;
20
+ background: conic-gradient(
21
+ from 0deg at 50% 50%,
22
+ #3b82f6 0deg 120deg,
23
+ #f97316 120deg 240deg,
24
+ #ec4899 240deg 360deg
25
+ );
26
+ border-radius: 50%;
27
+ position: relative;
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ }
32
+
33
+ .logo::before {
34
+ content: "";
35
+ position: absolute;
36
+ width: 60%;
37
+ height: 60%;
38
+ background: white;
39
+ border-radius: 50%;
40
+ }
41
+
42
+ .hand {
43
+ position: absolute;
44
+ width: 30px;
45
+ height: 40px;
46
+ background-color: currentColor;
47
+ border-radius: 50% 50% 0 0;
48
+ }
49
+
50
+ .hand-1 {
51
+ color: #3b82f6;
52
+ transform: rotate(0deg) translate(40px) rotate(0deg);
53
+ }
54
+
55
+ .hand-2 {
56
+ color: #f97316;
57
+ transform: rotate(120deg) translate(40px) rotate(-120deg);
58
+ }
59
+
60
+ .hand-3 {
61
+ color: #ec4899;
62
+ transform: rotate(240deg) translate(40px) rotate(-240deg);
63
+ }
64
+
65
+ .hero-gradient {
66
+ background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(249, 115, 22, 0.1) 50%, rgba(236, 72, 153, 0.1) 100%);
67
+ }
68
+
69
+ .activity-card {
70
+ transition: all 0.3s ease;
71
+ }
72
+
73
+ .activity-card:hover {
74
+ transform: translateY(-10px);
75
+ }
76
+
77
+ .donation-btn {
78
+ background: linear-gradient(90deg, #3b82f6, #ec4899);
79
+ transition: all 0.3s ease;
80
+ }
81
+
82
+ .donation-btn:hover {
83
+ transform: scale(1.05);
84
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
85
+ }
86
+
87
+ .testimonial-card {
88
+ border-left: 4px solid;
89
+ transition: all 0.3s ease;
90
+ }
91
+
92
+ .testimonial-card:hover {
93
+ transform: translateY(-5px);
94
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
95
+ }
96
+
97
+ /* Mobile menu styles */
98
+ .mobile-menu {
99
+ max-height: 0;
100
+ overflow: hidden;
101
+ transition: max-height 0.3s ease-out;
102
+ }
103
+
104
+ .mobile-menu.open {
105
+ max-height: 500px;
106
+ }
107
+
108
+ /* Animation for logo hands */
109
+ @keyframes wave {
110
+ 0%, 100% {
111
+ transform: rotate(0deg) translate(40px) rotate(0deg);
112
+ }
113
+ 50% {
114
+ transform: rotate(10deg) translate(40px) rotate(-10deg);
115
+ }
116
+ }
117
+
118
+ .hand-1 {
119
+ animation: wave 2s infinite;
120
+ }
121
+
122
+ .hand-2 {
123
+ animation: wave 2s infinite 0.66s;
124
+ }
125
+
126
+ .hand-3 {
127
+ animation: wave 2s infinite 1.33s;
128
+ }
129
+
130
+ /* Pulse animation for donation button */
131
+ @keyframes pulse {
132
+ 0% {
133
+ transform: scale(1);
134
+ }
135
+ 50% {
136
+ transform: scale(1.05);
137
+ }
138
+ 100% {
139
+ transform: scale(1);
140
+ }
141
+ }
142
+
143
+ .pulse-animation {
144
+ animation: pulse 2s infinite;
145
+ }
146
+ </style>
147
+ </head>
148
+ <body class="bg-gray-50">
149
+ <!-- Header/Navigation -->
150
+ <header class="bg-white shadow-md sticky top-0 z-50">
151
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
152
+ <div class="flex items-center space-x-2">
153
+ <div class="logo">
154
+ <div class="hand hand-1"></div>
155
+ <div class="hand hand-2"></div>
156
+ <div class="hand hand-3"></div>
157
+ </div>
158
+ <h1 class="text-xl font-bold text-gray-800">Projeto Cade <span class="text-blue-500">Cravinhos</span></h1>
159
+ </div>
160
+
161
+ <nav class="hidden md:flex space-x-8">
162
+ <a href="#inicio" class="text-gray-700 hover:text-blue-500 font-medium">Início</a>
163
+ <a href="#sobre" class="text-gray-700 hover:text-orange-500 font-medium">Sobre</a>
164
+ <a href="#atividades" class="text-gray-700 hover:text-pink-500 font-medium">Atividades</a>
165
+ <a href="#doacao" class="text-gray-700 hover:text-blue-500 font-medium">Doação</a>
166
+ <a href="#contato" class="text-gray-700 hover:text-orange-500 font-medium">Contato</a>
167
+ </nav>
168
+
169
+ <button id="mobileMenuButton" class="md:hidden text-gray-700">
170
+ <i class="fas fa-bars text-2xl"></i>
171
+ </button>
172
+ </div>
173
+
174
+ <!-- Mobile Menu -->
175
+ <div id="mobileMenu" class="mobile-menu bg-white md:hidden">
176
+ <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
177
+ <a href="#inicio" class="text-gray-700 hover:text-blue-500 font-medium py-2 border-b border-gray-100">Início</a>
178
+ <a href="#sobre" class="text-gray-700 hover:text-orange-500 font-medium py-2 border-b border-gray-100">Sobre</a>
179
+ <a href="#atividades" class="text-gray-700 hover:text-pink-500 font-medium py-2 border-b border-gray-100">Atividades</a>
180
+ <a href="#doacao" class="text-gray-700 hover:text-blue-500 font-medium py-2 border-b border-gray-100">Doação</a>
181
+ <a href="#contato" class="text-gray-700 hover:text-orange-500 font-medium py-2">Contato</a>
182
+ </div>
183
+ </div>
184
+ </header>
185
+
186
+ <!-- Hero Section -->
187
+ <section id="inicio" class="hero-gradient py-20">
188
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
189
+ <div class="md:w-1/2 mb-10 md:mb-0">
190
+ <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Transformando vidas através da <span class="text-blue-500">educação</span> e <span class="text-pink-500">arte</span></h2>
191
+ <p class="text-lg text-gray-600 mb-8">O Projeto Cade Cravinhos oferece atividades lúdicas, alimentação e apoio educacional para crianças em situação de vulnerabilidade social.</p>
192
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
193
+ <a href="#doacao" class="donation-btn text-white font-bold py-3 px-6 rounded-full text-center pulse-animation">Faça uma doação</a>
194
+ <a href="#atividades" class="bg-white text-gray-800 font-bold py-3 px-6 rounded-full border border-gray-200 text-center hover:bg-gray-50 transition">Conheça nossas atividades</a>
195
+ </div>
196
+ </div>
197
+ <div class="md:w-1/2 flex justify-center">
198
+ <img src="https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Crianças aprendendo" class="rounded-xl shadow-xl max-w-full h-auto md:max-w-md">
199
+ </div>
200
+ </div>
201
+ </section>
202
+
203
+ <!-- Stats Section -->
204
+ <section class="bg-white py-12">
205
+ <div class="container mx-auto px-4">
206
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
207
+ <div class="p-6 rounded-lg hover:bg-blue-50 transition">
208
+ <div class="text-5xl font-bold text-blue-500 mb-2">200+</div>
209
+ <div class="text-gray-600">Crianças atendidas</div>
210
+ </div>
211
+ <div class="p-6 rounded-lg hover:bg-orange-50 transition">
212
+ <div class="text-5xl font-bold text-orange-500 mb-2">15</div>
213
+ <div class="text-gray-600">Anos de atuação</div>
214
+ </div>
215
+ <div class="p-6 rounded-lg hover:bg-pink-50 transition">
216
+ <div class="text-5xl font-bold text-pink-500 mb-2">10</div>
217
+ <div class="text-gray-600">Atividades oferecidas</div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </section>
222
+
223
+ <!-- About Section -->
224
+ <section id="sobre" class="py-20 bg-gray-50">
225
+ <div class="container mx-auto px-4">
226
+ <div class="text-center mb-16">
227
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Sobre o <span class="text-blue-500">Projeto</span></h2>
228
+ <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto"></div>
229
+ </div>
230
+
231
+ <div class="flex flex-col md:flex-row items-center">
232
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
233
+ <img src="https://images.unsplash.com/photo-1524179091875-bf99a9a6af57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sobre o projeto" class="rounded-xl shadow-lg w-full">
234
+ </div>
235
+ <div class="md:w-1/2">
236
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Nossa missão</h3>
237
+ <p class="text-gray-600 mb-6">O Projeto Cade Cravinhos nasceu da necessidade de oferecer oportunidades para crianças em situação de vulnerabilidade social. Acreditamos que através da educação, arte e esporte, podemos transformar realidades e construir um futuro melhor.</p>
238
+
239
+ <div class="mb-6">
240
+ <div class="flex items-start mb-4">
241
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
242
+ <i class="fas fa-utensils text-blue-500"></i>
243
+ </div>
244
+ <div>
245
+ <h4 class="font-bold text-gray-800">Alimentação</h4>
246
+ <p class="text-gray-600">Fornecemos refeições balanceadas para garantir o desenvolvimento saudável das crianças.</p>
247
+ </div>
248
+ </div>
249
+
250
+ <div class="flex items-start mb-4">
251
+ <div class="bg-orange-100 p-2 rounded-full mr-4">
252
+ <i class="fas fa-book text-orange-500"></i>
253
+ </div>
254
+ <div>
255
+ <h4 class="font-bold text-gray-800">Educação</h4>
256
+ <p class="text-gray-600">Apoio escolar, reforço e acompanhamento pedagógico para melhorar o desempenho acadêmico.</p>
257
+ </div>
258
+ </div>
259
+
260
+ <div class="flex items-start">
261
+ <div class="bg-pink-100 p-2 rounded-full mr-4">
262
+ <i class="fas fa-child text-pink-500"></i>
263
+ </div>
264
+ <div>
265
+ <h4 class="font-bold text-gray-800">Atividades lúdicas</h4>
266
+ <p class="text-gray-600">Balé, xadrez, música e outras atividades que estimulam a criatividade e o desenvolvimento cognitivo.</p>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ <a href="#contato" class="inline-block bg-gray-800 text-white font-bold py-3 px-6 rounded-full hover:bg-gray-700 transition">Saiba mais</a>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </section>
276
+
277
+ <!-- Activities Section -->
278
+ <section id="atividades" class="py-20 bg-white">
279
+ <div class="container mx-auto px-4">
280
+ <div class="text-center mb-16">
281
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nossas <span class="text-pink-500">Atividades</span></h2>
282
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Oferecemos diversas atividades que contribuem para o desenvolvimento integral das crianças.</p>
283
+ <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto mt-4"></div>
284
+ </div>
285
+
286
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
287
+ <!-- Ballet Card -->
288
+ <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
289
+ <div class="h-48 bg-pink-100 flex items-center justify-center">
290
+ <i class="fas fa-child-reaching text-6xl text-pink-500"></i>
291
+ </div>
292
+ <div class="p-6">
293
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Balé</h3>
294
+ <p class="text-gray-600 mb-4">Aulas de balé que promovem disciplina, coordenação motora e expressão artística.</p>
295
+ <div class="flex items-center text-sm text-gray-500">
296
+ <i class="fas fa-calendar-alt mr-2"></i>
297
+ <span>Segundas e quartas, 14h-16h</span>
298
+ </div>
299
+ </div>
300
+ </div>
301
+
302
+ <!-- Chess Card -->
303
+ <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
304
+ <div class="h-48 bg-blue-100 flex items-center justify-center">
305
+ <i class="fas fa-chess text-6xl text-blue-500"></i>
306
+ </div>
307
+ <div class="p-6">
308
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Xadrez</h3>
309
+ <p class="text-gray-600 mb-4">Aulas de xadrez que desenvolvem raciocínio lógico, concentração e estratégia.</p>
310
+ <div class="flex items-center text-sm text-gray-500">
311
+ <i class="fas fa-calendar-alt mr-2"></i>
312
+ <span>Terças e quintas, 10h-12h</span>
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <!-- Music Card -->
318
+ <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
319
+ <div class="h-48 bg-orange-100 flex items-center justify-center">
320
+ <i class="fas fa-music text-6xl text-orange-500"></i>
321
+ </div>
322
+ <div class="p-6">
323
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Música</h3>
324
+ <p class="text-gray-600 mb-4">Aulas de canto e instrumentos musicais que estimulam a criatividade e expressão.</p>
325
+ <div class="flex items-center text-sm text-gray-500">
326
+ <i class="fas fa-calendar-alt mr-2"></i>
327
+ <span>Sextas, 9h-11h</span>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Arts Card -->
333
+ <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
334
+ <div class="h-48 bg-pink-100 flex items-center justify-center">
335
+ <i class="fas fa-palette text-6xl text-pink-500"></i>
336
+ </div>
337
+ <div class="p-6">
338
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Artes</h3>
339
+ <p class="text-gray-600 mb-4">Oficinas de pintura, desenho e artesanato que desenvolvem habilidades manuais.</p>
340
+ <div class="flex items-center text-sm text-gray-500">
341
+ <i class="fas fa-calendar-alt mr-2"></i>
342
+ <span>Quintas, 14h-16h</span>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <!-- Sports Card -->
348
+ <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
349
+ <div class="h-48 bg-blue-100 flex items-center justify-center">
350
+ <i class="fas fa-futbol text-6xl text-blue-500"></i>
351
+ </div>
352
+ <div class="p-6">
353
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Esportes</h3>
354
+ <p class="text-gray-600 mb-4">Atividades esportivas que promovem saúde, trabalho em equipe e disciplina.</p>
355
+ <div class="flex items-center text-sm text-gray-500">
356
+ <i class="fas fa-calendar-alt mr-2"></i>
357
+ <span>Quartas e sextas, 15h-17h</span>
358
+ </div>
359
+ </div>
360
+ </div>
361
+
362
+ <!-- Tutoring Card -->
363
+ <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
364
+ <div class="h-48 bg-orange-100 flex items-center justify-center">
365
+ <i class="fas fa-book-open text-6xl text-orange-500"></i>
366
+ </div>
367
+ <div class="p-6">
368
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Reforço escolar</h3>
369
+ <p class="text-gray-600 mb-4">Acompanhamento pedagógico para melhorar o desempenho acadêmico das crianças.</p>
370
+ <div class="flex items-center text-sm text-gray-500">
371
+ <i class="fas fa-calendar-alt mr-2"></i>
372
+ <span>Segunda a sexta, 8h-12h</span>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </section>
379
+
380
+ <!-- Testimonials Section -->
381
+ <section class="py-20 bg-gray-50">
382
+ <div class="container mx-auto px-4">
383
+ <div class="text-center mb-16">
384
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Depoimentos</h2>
385
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">O que as famílias e crianças dizem sobre o projeto</p>
386
+ <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto mt-4"></div>
387
+ </div>
388
+
389
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
390
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-sm border-l-4 border-blue-500">
391
+ <div class="flex items-center mb-4">
392
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
393
+ <i class="fas fa-user text-blue-500"></i>
394
+ </div>
395
+ <div>
396
+ <h4 class="font-bold text-gray-800">Ana Silva</h4>
397
+ <p class="text-sm text-gray-500">Mãe da Maria</p>
398
+ </div>
399
+ </div>
400
+ <p class="text-gray-600 italic">"O balé mudou completamente minha filha. Ela está mais confiante, disciplinada e feliz. Agradeço ao projeto por essa oportunidade."</p>
401
+ </div>
402
+
403
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-sm border-l-4 border-orange-500">
404
+ <div class="flex items-center mb-4">
405
+ <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center mr-4">
406
+ <i class="fas fa-user text-orange-500"></i>
407
+ </div>
408
+ <div>
409
+ <h4 class="font-bold text-gray-800">Carlos Mendes</h4>
410
+ <p class="text-sm text-gray-500">Pai do João</p>
411
+ </div>
412
+ </div>
413
+ <p class="text-gray-600 italic">"Meu filho melhorou muito na escola depois que começou o reforço e o xadrez. Ele está mais concentrado e suas notas subiram significativamente."</p>
414
+ </div>
415
+
416
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-sm border-l-4 border-pink-500">
417
+ <div class="flex items-center mb-4">
418
+ <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center mr-4">
419
+ <i class="fas fa-user text-pink-500"></i>
420
+ </div>
421
+ <div>
422
+ <h4 class="font-bold text-gray-800">Luiza Fernandes</h4>
423
+ <p class="text-sm text-gray-500">Voluntária</p>
424
+ </div>
425
+ </div>
426
+ <p class="text-gray-600 italic">"Ser voluntária neste projeto é uma das experiências mais gratificantes da minha vida. Ver o desenvolvimento dessas crianças não tem preço."</p>
427
+ </div>
428
+ </div>
429
+ </div>
430
+ </section>
431
+
432
+ <!-- Donation Section -->
433
+ <section id="doacao" class="py-20 bg-gradient-to-r from-blue-500 to-pink-500 text-white">
434
+ <div class="container mx-auto px-4">
435
+ <div class="max-w-4xl mx-auto text-center">
436
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ajude a transformar vidas</h2>
437
+ <p class="text-xl mb-8">Sua doação permite que continuemos oferecendo alimentação, educação e atividades lúdicas para crianças em situação de vulnerabilidade.</p>
438
+
439
+ <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-8 mb-10">
440
+ <h3 class="text-2xl font-bold mb-6">Escolha o valor da doação</h3>
441
+
442
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
443
+ <button class="bg-white bg-opacity-30 hover:bg-opacity-40 text-white font-bold py-3 px-4 rounded-lg transition">R$ 30</button>
444
+ <button class="bg-white bg-opacity-30 hover:bg-opacity-40 text-white font-bold py-3 px-4 rounded-lg transition">R$ 50</button>
445
+ <button class="bg-white bg-opacity-30 hover:bg-opacity-40 text-white font-bold py-3 px-4 rounded-lg transition">R$ 100</button>
446
+ <button class="bg-white bg-opacity-30 hover:bg-opacity-40 text-white font-bold py-3 px-4 rounded-lg transition">Outro valor</button>
447
+ </div>
448
+
449
+ <div class="mb-6">
450
+ <label class="block text-left mb-2">Frequência</label>
451
+ <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
452
+ <button class="bg-white text-blue-500 font-bold py-3 px-6 rounded-full">Única</button>
453
+ <button class="bg-white bg-opacity-20 hover:bg-opacity-30 text-white font-bold py-3 px-6 rounded-full">Mensal</button>
454
+ </div>
455
+ </div>
456
+
457
+ <button class="donation-btn bg-white text-blue-500 font-bold py-3 px-8 rounded-full w-full max-w-xs mx-auto hover:bg-gray-100 transition">Doar agora</button>
458
+ </div>
459
+
460
+ <div class="text-sm opacity-80">
461
+ <p>Todas as doações são fiscalizadas e aplicadas integralmente no projeto.</p>
462
+ <p>O Projeto Cade Cravinhos é uma organização sem fins lucrativos.</p>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </section>
467
+
468
+ <!-- Gallery Section -->
469
+ <section class="py-20 bg-white">
470
+ <div class="container mx-auto px-4">
471
+ <div class="text-center mb-16">
472
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nossos <span class="text-orange-500">Momentos</span></h2>
473
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Alguns registros das atividades e conquistas do projeto</p>
474
+ <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto mt-4"></div>
475
+ </div>
476
+
477
+ <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
478
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
479
+ <img src="https://images.unsplash.com/photo-1542816417-098367509469?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Aula de balé" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
480
+ </div>
481
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
482
+ <img src="https://images.unsplash.com/photo-1546521343-4eb2c01aa44b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Aula de xadrez" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
483
+ </div>
484
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
485
+ <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Refeição" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
486
+ </div>
487
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
488
+ <img src="https://images.unsplash.com/photo-1501612780327-45045538702b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Atividades artísticas" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
489
+ </div>
490
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
491
+ <img src="https://images.unsplash.com/photo-1571260899304-425eee4c7ef0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Evento especial" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
492
+ </div>
493
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
494
+ <img src="https://images.unsplash.com/photo-1608889825101-22d60e3f1f5a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Aula de música" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
495
+ </div>
496
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
497
+ <img src="https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Crianças aprendendo" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
498
+ </div>
499
+ <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition">
500
+ <img src="https://images.unsplash.com/photo-1524179091875-bf99a9a6af57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Voluntários" class="w-full h-48 object-cover hover:scale-105 transition duration-500">
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </section>
505
+
506
+ <!-- Contact Section -->
507
+ <section id="contato" class="py-20 bg-gray-50">
508
+ <div class="container mx-auto px-4">
509
+ <div class="text-center mb-16">
510
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Entre em <span class="text-blue-500">Contato</span></h2>
511
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Tem dúvidas ou quer ser um voluntário? Fale conosco!</p>
512
+ <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto mt-4"></div>
513
+ </div>
514
+
515
+ <div class="flex flex-col md:flex-row">
516
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
517
+ <div class="bg-white rounded-xl shadow-lg p-8 h-full">
518
+ <h3 class="text-2xl font-bold text-gray-800 mb-6">Informações de contato</h3>
519
+
520
+ <div class="mb-6">
521
+ <div class="flex items-start mb-4">
522
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
523
+ <i class="fas fa-map-marker-alt text-blue-500"></i>
524
+ </div>
525
+ <div>
526
+ <h4 class="font-bold text-gray-800">Endereço</h4>
527
+ <p class="text-gray-600">Rua das Flores, 123 - Centro, Cravinhos/SP</p>
528
+ </div>
529
+ </div>
530
+
531
+ <div class="flex items-start mb-4">
532
+ <div class="bg-orange-100 p-3 rounded-full mr-4">
533
+ <i class="fas fa-phone text-orange-500"></i>
534
+ </div>
535
+ <div>
536
+ <h4 class="font-bold text-gray-800">Telefone</h4>
537
+ <p class="text-gray-600">(16) 99999-9999</p>
538
+ </div>
539
+ </div>
540
+
541
+ <div class="flex items-start">
542
+ <div class="bg-pink-100 p-3 rounded-full mr-4">
543
+ <i class="fas fa-envelope text-pink-500"></i>
544
+ </div>
545
+ <div>
546
+ <h4 class="font-bold text-gray-800">Email</h4>
547
+ <p class="text-gray-600">contato@projetocadecravinhos.org.br</p>
548
+ </div>
549
+ </div>
550
+ </div>
551
+
552
+ <div>
553
+ <h4 class="font-bold text-gray-800 mb-4">Horário de funcionamento</h4>
554
+ <div class="flex justify-between border-b border-gray-200 py-2">
555
+ <span class="text-gray-600">Segunda a sexta</span>
556
+ <span class="font-medium">8h às 18h</span>
557
+ </div>
558
+ <div class="flex justify-between border-b border-gray-200 py-2">
559
+ <span class="text-gray-600">Sábado</span>
560
+ <span class="font-medium">9h às 12h</span>
561
+ </div>
562
+ <div class="flex justify-between py-2">
563
+ <span class="text-gray-600">Domingo</span>
564
+ <span class="font-medium">Fechado</span>
565
+ </div>
566
+ </div>
567
+ </div>
568
+ </div>
569
+
570
+ <div class="md:w-1/2">
571
+ <div class="bg-white rounded-xl shadow-lg p-8 h-full">
572
+ <h3 class="text-2xl font-bold text-gray-800 mb-6">Envie uma mensagem</h3>
573
+
574
+ <form id="contactForm">
575
+ <div class="mb-4">
576
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nome</label>
577
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
578
+ </div>
579
+
580
+ <div class="mb-4">
581
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
582
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
583
+ </div>
584
+
585
+ <div class="mb-4">
586
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Assunto</label>
587
+ <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
588
+ <option value="">Selecione um assunto</option>
589
+ <option value="volunteer">Quero ser voluntário</option>
590
+ <option value="donation">Dúvidas sobre doações</option>
591
+ <option value="enrollment">Matrícula de crianças</option>
592
+ <option value="other">Outro assunto</option>
593
+ </select>
594
+ </div>
595
+
596
+ <div class="mb-6">
597
+ <label for="message" class="block text-gray-700 font-medium mb-2">Mensagem</label>
598
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required></textarea>
599
+ </div>
600
+
601
+ <button type="submit" class="w-full bg-blue-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-600 transition">Enviar mensagem</button>
602
+ </form>
603
+ </div>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ </section>
608
+
609
+ <!-- Footer -->
610
+ <footer class="bg-gray-800 text-white py-12">
611
+ <div class="container mx-auto px-4">
612
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
613
+ <div>
614
+ <div class="flex items-center space-x-2 mb-4">
615
+ <div class="logo">
616
+ <div class="hand hand-1"></div>
617
+ <div class="hand hand-2"></div>
618
+ <div class="hand hand-3"></div>
619
+ </div>
620
+ <h3 class="text-xl font-bold">Projeto Cade Cravinhos</h3>
621
+ </div>
622
+ <p class="text-gray-300 mb-4">Transformando vidas através da educação, arte e esporte desde 2008.</p>
623
+ <div class="flex space-x-4">
624
+ <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-facebook-f"></i></a>
625
+ <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-instagram"></i></a>
626
+ <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-youtube"></i></a>
627
+ </div>
628
+ </div>
629
+
630
+ <div>
631
+ <h4 class="text-lg font-bold mb-4">Links úteis</h4>
632
+ <ul class="space-y-2">
633
+ <li><a href="#inicio" class="text-gray-300 hover:text-white transition">Início</a></li>
634
+ <li><a href="#sobre" class="text-gray-300 hover:text-white transition">Sobre</a></li>
635
+ <li><a href="#atividades" class="text-gray-300 hover:text-white transition">Atividades</a></li>
636
+ <li><a href="#doacao" class="text-gray-300 hover:text-white transition">Doação</a></li>
637
+ <li><a href="#contato" class="text-gray-300 hover:text-white transition">Contato</a></li>
638
+ </ul>
639
+ </div>
640
+
641
+ <div>
642
+ <h4 class="text-lg font-bold mb-4">Atividades</h4>
643
+ <ul class="space-y-2">
644
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Balé</a></li>
645
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Xadrez</a></li>
646
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Música</a></li>
647
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Artes</a></li>
648
+ <li><a href="#" class="text-gray-300 hover:text-white transition">Esportes</a></li>
649
+ </ul>
650
+ </div>
651
+
652
+ <div>
653
+ <h4 class="text-lg font-bold mb-4">Newsletter</h4>
654
+ <p class="text-gray-300 mb-4">Assine nossa newsletter e receba novidades sobre o projeto.</p>
655
+ <form class="flex">
656
+ <input type="email" placeholder="Seu email" class="px-4 py-2 rounded-l-lg w-full text-gray-800 focus:outline-none">
657
+ <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r-lg hover:bg-blue-600 transition"><i class="fas fa-paper-plane"></i></button>
658
+ </form>
659
+ </div>
660
+ </div>
661
+
662
+ <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
663
+ <p>&copy; 2023 Projeto Cade Cravinhos. Todos os direitos reservados.</p>
664
+ <p class="mt-2">CNPJ: 00.000.000/0001-00 - Organização sem fins lucrativos</p>
665
+ </div>
666
+ </div>
667
+ </footer>
668
+
669
+ <!-- Back to Top Button -->
670
+ <button id="backToTop" class="fixed bottom-8 right-8 bg-blue-500 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-600 transition opacity-0 invisible">
671
+ <i class="fas fa-arrow-up"></i>
672
+ </button>
673
+
674
+ <script>
675
+ // Back to Top Button
676
+ const backToTopButton = document.getElementById('backToTop');
677
+
678
+ window.addEventListener('scroll', () => {
679
+ if (window.pageYOffset > 300) {
680
+ backToTopButton.classList.remove('opacity-0', 'invisible');
681
+ backToTopButton.classList.add('opacity-100', 'visible');
682
+ } else {
683
+ backToTopButton.classList.remove('opacity-100', 'visible');
684
+ backToTopButton.classList.add('opacity-0', 'invisible');
685
+ }
686
+ });
687
+
688
+ backToTopButton.addEventListener('click', () => {
689
+ window.scrollTo({
690
+ top: 0,
691
+ behavior: 'smooth'
692
+ });
693
+ });
694
+
695
+ // Mobile Menu Toggle
696
+ const mobileMenuButton = document.getElementById('mobileMenuButton');
697
+ const mobileMenu = document.getElementById('mobileMenu');
698
+
699
+ mobileMenuButton.addEventListener('click', () => {
700
+ mobileMenu.classList.toggle('open');
701
+ const icon = mobileMenuButton.querySelector('i');
702
+ if (mobileMenu.classList.contains('open')) {
703
+ icon.classList.remove('fa-bars');
704
+ icon.classList.add('fa-times');
705
+ } else {
706
+ icon.classList.remove('fa-times');
707
+ icon.classList.add('fa-bars');
708
+ }
709
+ });
710
+
711
+ // Smooth scrolling for anchor links
712
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
713
+ anchor.addEventListener('click', function (e) {
714
+ e.preventDefault();
715
+
716
+ // Close mobile menu if open
717
+ if (mobileMenu.classList.contains('open')) {
718
+ mobileMenu.classList.remove('open');
719
+ const icon = mobileMenuButton.querySelector('i');
720
+ icon.classList.remove('fa-times');
721
+ icon.classList.add('fa-bars');
722
+ }
723
+
724
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
725
+ behavior: 'smooth'
726
+ });
727
+ });
728
+ });
729
+
730
+ // Form submission
731
+ const contactForm = document.getElementById('contactForm');
732
+
733
+ contactForm.addEventListener('submit', (e) => {
734
+ e.preventDefault();
735
+
736
+ // Get form values
737
+ const name = document.getElementById('name').value;
738
+ const email = document.getElementById('email').value;
739
+ const subject = document.getElementById('subject').value;
740
+ const message = document.getElementById('message').value;
741
+
742
+ // Here you would typically send the data to a server
743
+ // For this example, we'll just show an alert
744
+ alert(`Obrigado, ${name}! Sua mensagem sobre "${subject}" foi recebida. Entraremos em contato em breve no email ${email}.`);
745
+
746
+ // Reset form
747
+ contactForm.reset();
748
+ });
749
+
750
+ // Donation buttons
751
+ const donationButtons = document.querySelectorAll('.donation-btn');
752
+
753
+ donationButtons.forEach(button => {
754
+ button.addEventListener('click', () => {
755
+ // Here you would typically redirect to a payment page
756
+ alert('Você será redirecionado para nossa página segura de doações. Obrigado pelo seu apoio!');
757
+ });
758
+ });
759
+ </script>
760
+ <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=automatize/cade-cravinhos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
761
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Projeto Cade Cravinhos - Transformando vidas através da educação e arte</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); body { font-family: 'Poppins', sans-serif; scroll-behavior: smooth; } .logo { width: 80px; height: 80px; background: conic-gradient( from 0deg at 50% 50%, #3b82f6 0deg 120deg, #f97316 120deg 240deg, #ec4899 240deg 360deg ); border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; } .logo::before { content: ""; position: absolute; width: 60%; height: 60%; background: white; border-radius: 50%; } .hand { position: absolute; width: 30px; height: 40px; background-color: currentColor; border-radius: 50% 50% 0 0; } .hand-1 { color: #3b82f6; transform: rotate(0deg) translate(40px) rotate(0deg); } .hand-2 { color: #f97316; transform: rotate(120deg) translate(40px) rotate(-120deg); } .hand-3 { color: #ec4899; transform: rotate(240deg) translate(40px) rotate(-240deg); } .hero-gradient { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(249, 115, 22, 0.1) 50%, rgba(236, 72, 153, 0.1) 100%); } .activity-card { transition: all 0.3s ease; } .activity-card:hover { transform: translateY(-10px); } .donation-btn { background: linear-gradient(90deg, #3b82f6, #ec4899); transition: all 0.3s ease; } .donation-btn:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .testimonial-card { border-left: 4px solid; transition: all 0.3s ease; } .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } </style> </head> <body class="bg-gray-50"> <!-- Header/Navigation --> <header class="bg-white shadow-md sticky top-0 z-50"> <div class="container mx-auto px-4 py-3 flex justify-between items-center"> <div class="flex items-center space-x-2"> <div class="logo"> <div class="hand hand-1"></div> <div class="hand hand-2"></div> <div class="hand hand-3"></div> </div> <h1 class="text-xl font-bold text-gray-800">Projeto Cade <span class="text-blue-500">Cravinhos</span></h1> </div> <nav class="hidden md:flex space-x-8"> <a href="#inicio" class="text-gray-700 hover:text-blue-500 font-medium">Início</a> <a href="#sobre" class="text-gray-700 hover:text-orange-500 font-medium">Sobre</a> <a href="#atividades" class="text-gray-700 hover:text-pink-500 font-medium">Atividades</a> <a href="#doacao" class="text-gray-700 hover:text-blue-500 font-medium">Doação</a> <a href="#contato" class="text-gray-700 hover:text-orange-500 font-medium">Contato</a> </nav> <button class="md:hidden text-gray-700"> <i class="fas fa-bars text-2xl"></i> </button> </div> </header> <!-- Hero Section --> <section id="inicio" class="hero-gradient py-20"> <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-10 md:mb-0"> <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Transformando vidas através da <span class="text-blue-500">educação</span> e <span class="text-pink-500">arte</span></h2> <p class="text-lg text-gray-600 mb-8">O Projeto Cade Cravinhos oferece atividades lúdicas, alimentação e apoio educacional para crianças em situação de vulnerabilidade social.</p> <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> <a href="#doacao" class="donation-btn text-white font-bold py-3 px-6 rounded-full text-center">Faça uma doação</a> <a href="#atividades" class="bg-white text-gray-800 font-bold py-3 px-6 rounded-full border border-gray-200 text-center hover:bg-gray-50 transition">Conheça nossas atividades</a> </div> </div> <div class="md:w-1/2 flex justify-center"> <img src="https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Crianças aprendendo" class="rounded-xl shadow-xl max-w-full h-auto md:max-w-md"> </div> </div> </section> <!-- Stats Section --> <section class="bg-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> <div class="p-6 rounded-lg"> <div class="text-5xl font-bold text-blue-500 mb-2">200+</div> <div class="text-gray-600">Crianças atendidas</div> </div> <div class="p-6 rounded-lg"> <div class="text-5xl font-bold text-orange-500 mb-2">15</div> <div class="text-gray-600">Anos de atuação</div> </div> <div class="p-6 rounded-lg"> <div class="text-5xl font-bold text-pink-500 mb-2">10</div> <div class="text-gray-600">Atividades oferecidas</div> </div> </div> </div> </section> <!-- About Section --> <section id="sobre" class="py-20 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Sobre o <span class="text-blue-500">Projeto</span></h2> <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto"></div> </div> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> <img src="https://images.unsplash.com/photo-1524179091875-bf99a9a6af57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sobre o projeto" class="rounded-xl shadow-lg w-full"> </div> <div class="md:w-1/2"> <h3 class="text-2xl font-bold text-gray-800 mb-4">Nossa missão</h3> <p class="text-gray-600 mb-6">O Projeto Cade Cravinhos nasceu da necessidade de oferecer oportunidades para crianças em situação de vulnerabilidade social. Acreditamos que através da educação, arte e esporte, podemos transformar realidades e construir um futuro melhor.</p> <div class="mb-6"> <div class="flex items-start mb-4"> <div class="bg-blue-100 p-2 rounded-full mr-4"> <i class="fas fa-utensils text-blue-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Alimentação</h4> <p class="text-gray-600">Fornecemos refeições balanceadas para garantir o desenvolvimento saudável das crianças.</p> </div> </div> <div class="flex items-start mb-4"> <div class="bg-orange-100 p-2 rounded-full mr-4"> <i class="fas fa-book text-orange-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Educação</h4> <p class="text-gray-600">Apoio escolar, reforço e acompanhamento pedagógico para melhorar o desempenho acadêmico.</p> </div> </div> <div class="flex items-start"> <div class="bg-pink-100 p-2 rounded-full mr-4"> <i class="fas fa-child text-pink-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Atividades lúdicas</h4> <p class="text-gray-600">Balé, xadrez, música e outras atividades que estimulam a criatividade e o desenvolvimento cognitivo.</p> </div> </div> </div> <a href="#contato" class="inline-block bg-gray-800 text-white font-bold py-3 px-6 rounded-full hover:bg-gray-700 transition">Saiba mais</a> </div> </div> </div> </section> <!-- Activities Section --> <section id="atividades" class="py-20 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nossas <span class="text-pink-500">Atividades</span></h2> <p class="text-xl text-gray-600 max-w-2xl mx-auto">Oferecemos diversas atividades que contribuem para o desenvolvimento integral das crianças.</p> <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto mt-4"></div> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Ballet Card --> <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100"> <div class="h-48 bg-pink-100 flex items-center justify-center"> <i class="fas fa-child-reaching text-6xl text-pink-500"></i> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Balé</h3> <p class="text-gray-600 mb-4">Aulas de balé que promovem disciplina, coordenação motora e expressão artística.</p> <div class="flex items-center text-sm text-gray-500"> <i class="fas fa-calendar-alt mr-2"></i> <span>Segundas e quartas, 14h-16h</span> </div> </div> </div> <!-- Chess Card --> <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100"> <div class="h-48 bg-blue-100 flex items-center justify-center"> <i class="fas fa-chess text-6xl text-blue-500"></i> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Xadrez</h3> <p class="text-gray-600 mb-4">Aulas de xadrez que desenvolvem raciocínio lógico, concentração e estratégia.</p> <div class="flex items-center text-sm text-gray-500"> <i class="fas fa-calendar-alt mr-2"></i> <span>Terças e quintas, 10h-12h</span> </div> </div> </div> <!-- Music Card --> <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100"> <div class="h-48 bg-orange-100 flex items-center justify-center"> <i class="fas fa-music text-6xl text-orange-500"></i> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Música</h3> <p class="text-gray-600 mb-4">Aulas de canto e instrumentos musicais que estimulam a criatividade e expressão.</p> <div class="flex items-center text-sm text-gray-500"> <i class="fas fa-calendar-alt mr-2"></i> <span>Sextas, 9h-11h</span> </div> </div> </div> <!-- Arts Card --> <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100"> <div class="h-48 bg-pink-100 flex items-center justify-center"> <i class="fas fa-palette text-6xl text-pink-500"></i> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Artes</h3> <p class="text-gray-600 mb-4">Oficinas de pintura, desenho e artesanato que desenvolvem habilidades manuais.</p> <div class="flex items-center text-sm text-gray-500"> <i class="fas fa-calendar-alt mr-2"></i> <span>Quintas, 14h-16h</span> </div> </div> </div> <!-- Sports Card --> <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100"> <div class="h-48 bg-blue-100 flex items-center justify-center"> <i class="fas fa-futbol text-6xl text-blue-500"></i> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Esportes</h3> <p class="text-gray-600 mb-4">Atividades esportivas que promovem saúde, trabalho em equipe e disciplina.</p> <div class="flex items-center text-sm text-gray-500"> <i class="fas fa-calendar-alt mr-2"></i> <span>Quartas e sextas, 15h-17h</span> </div> </div> </div> <!-- Tutoring Card --> <div class="activity-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100"> <div class="h-48 bg-orange-100 flex items-center justify-center"> <i class="fas fa-book-open text-6xl text-orange-500"></i> </div> <div class="p-6"> <h3 class="text-xl font-bold text-gray-800 mb-2">Reforço escolar</h3> <p class="text-gray-600 mb-4">Acompanhamento pedagógico para melhorar o desempenho acadêmico das crianças.</p> <div class="flex items-center text-sm text-gray-500"> <i class="fas fa-calendar-alt mr-2"></i> <span>Segunda a sexta, 8h-12h</span> </div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="py-20 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Depoimentos</h2> <p class="text-xl text-gray-600 max-w-2xl mx-auto">O que as famílias e crianças dizem sobre o projeto</p> <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto mt-4"></div> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="testimonial-card bg-white p-6 rounded-lg shadow-sm border-l-4 border-blue-500"> <div class="flex items-center mb-4"> <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> <i class="fas fa-user text-blue-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Ana Silva</h4> <p class="text-sm text-gray-500">Mãe da Maria</p> </div> </div> <p class="text-gray-600 italic">"O balé mudou completamente minha filha. Ela está mais confiante, disciplinada e feliz. Agradeço ao projeto por essa oportunidade."</p> </div> <div class="testimonial-card bg-white p-6 rounded-lg shadow-sm border-l-4 border-orange-500"> <div class="flex items-center mb-4"> <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center mr-4"> <i class="fas fa-user text-orange-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Carlos Mendes</h4> <p class="text-sm text-gray-500">Pai do João</p> </div> </div> <p class="text-gray-600 italic">"Meu filho melhorou muito na escola depois que começou o reforço e o xadrez. Ele está mais concentrado e suas notas subiram significativamente."</p> </div> <div class="testimonial-card bg-white p-6 rounded-lg shadow-sm border-l-4 border-pink-500"> <div class="flex items-center mb-4"> <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center mr-4"> <i class="fas fa-user text-pink-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Luiza Fernandes</h4> <p class="text-sm text-gray-500">Voluntária</p> </div> </div> <p class="text-gray-600 italic">"Ser voluntária neste projeto é uma das experiências mais gratificantes da minha vida. Ver o desenvolvimento dessas crianças não tem preço."</p> </div> </div> </div> </section> <!-- Donation Section --> <section id="doacao" class="py-20 bg-gradient-to-r from-blue-500 to-pink-500 text-white"> <div class="container mx-auto px-4"> <div class="max-w-4xl mx-auto text-center"> <h2 class="text-3xl md:text-4xl font-bold mb-6">Ajude a transformar vidas</h2> <p class="text-xl mb-8">Sua doação permite que continuemos oferecendo alimentação, educação e atividades lúdicas para crianças em situação de vulnerabilidade.</p> <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-8 mb-10"> <h3 class="text-2xl font-bold mb-6">Escolha o valor da doação</h3> <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8"> <button class="bg-white bg-opacity-30 hover:bg-opacity-40 text-white font-bold py-3 px-4 rounded-lg transition">R$ 30</button> <button class="bg-white bg-opacity-30 hover:bg-opacity-40 text-white font-bold py-3 px-4 rounded-lg transition">R$ 50</button> <button class="bg-white bg-opacity-30 hover:bg-opacity-40 text-white font-bold py-3 px-4 rounded-lg transition">R$ 100</button> <button class="bg-white bg-opacity-30 hover:bg-opacity-40 text-white font-bold py-3 px-4 rounded-lg transition">Outro valor</button> </div> <div class="mb-6"> <label class="block text-left mb-2">Frequência</label> <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4"> <button class="bg-white text-blue-500 font-bold py-3 px-6 rounded-full">Única</button> <button class="bg-white bg-opacity-20 hover:bg-opacity-30 text-white font-bold py-3 px-6 rounded-full">Mensal</button> </div> </div> <button class="donation-btn bg-white text-blue-500 font-bold py-3 px-8 rounded-full w-full max-w-xs mx-auto hover:bg-gray-100 transition">Doar agora</button> </div> <div class="text-sm opacity-80"> <p>Todas as doações são fiscalizadas e aplicadas integralmente no projeto.</p> <p>O Projeto Cade Cravinhos é uma organização sem fins lucrativos.</p> </div> </div> </div> </section> <!-- Gallery Section --> <section class="py-20 bg-white"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nossos <span class="text-orange-500">Momentos</span></h2> <p class="text-xl text-gray-600 max-w-2xl mx-auto">Alguns registros das atividades e conquistas do projeto</p> <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto mt-4"></div> </div> <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1542816417-098367509469?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Aula de balé" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1546521343-4eb2c01aa44b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Aula de xadrez" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Refeição" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1501612780327-45045538702b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Atividades artísticas" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1571260899304-425eee4c7ef0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Evento especial" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1608889825101-22d60e3f1f5a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Aula de música" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1588072432836-e10032774350?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Crianças aprendendo" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> <div class="overflow-hidden rounded-lg shadow-md hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1524179091875-bf99a9a6af57?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Voluntários" class="w-full h-48 object-cover hover:scale-105 transition duration-500"> </div> </div> </div> </section> <!-- Contact Section --> <section id="contato" class="py-20 bg-gray-50"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Entre em <span class="text-blue-500">Contato</span></h2> <p class="text-xl text-gray-600 max-w-2xl mx-auto">Tem dúvidas ou quer ser um voluntário? Fale conosco!</p> <div class="w-24 h-1 bg-gradient-to-r from-blue-500 via-orange-500 to-pink-500 mx-auto mt-4"></div> </div> <div class="flex flex-col md:flex-row"> <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> <div class="bg-white rounded-xl shadow-lg p-8 h-full"> <h3 class="text-2xl font-bold text-gray-800 mb-6">Informações de contato</h3> <div class="mb-6"> <div class="flex items-start mb-4"> <div class="bg-blue-100 p-3 rounded-full mr-4"> <i class="fas fa-map-marker-alt text-blue-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Endereço</h4> <p class="text-gray-600">Rua das Flores, 123 - Centro, Cravinhos/SP</p> </div> </div> <div class="flex items-start mb-4"> <div class="bg-orange-100 p-3 rounded-full mr-4"> <i class="fas fa-phone text-orange-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Telefone</h4> <p class="text-gray-600">(16) 99999-9999</p> </div> </div> <div class="flex items-start"> <div class="bg-pink-100 p-3 rounded-full mr-4"> <i class="fas fa-envelope text-pink-500"></i> </div> <div> <h4 class="font-bold text-gray-800">Email</h4> <p class="text-gray-600">contato@projetocadecravinhos.org.br</p> </div> </div> </div> <div> <h4 class="font-bold text-gray-800 mb-4">Horário de funcionamento</h4> <div class="flex justify-between border-b border-gray-200 py-2"> <span class="text-gray-600">Segunda a sexta</span> <span class="font-medium">8h às 18h</span> </div> <div class="flex justify-between border-b border-gray-200 py-2"> <span class="text-gray-600">Sábado</span> <span class="font-medium">9h às 12h</span> </div> <div class="flex justify-between py-2"> <span class="text-gray-600">Domingo</span> <span class="font-medium">Fechado</span> </div> </div> </div> </div> <div class="md:w-1/2"> <div class="bg-white rounded-xl shadow-lg p-8 h-full"> <h3 class="text-2xl font-bold text-gray-800 mb-6">Envie uma mensagem</h3> <form> <div class="mb-4"> <label for="name" class="block text-gray-700 font-medium mb-2">Nome</label> <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div class="mb-4"> <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> </div> <div class="mb-4"> <label for="subject" class="block text-gray-700 font-medium mb-2">Assunto</label> <select id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> <option value="">Selecione um assunto</option> <option value="volunteer">Quero ser voluntário</option> <option value="donation">Dúvidas sobre doações</option> <option value="enrollment">Matrícula de crianças</option> <option value="other">Outro assunto</option> </select> </div> <div class="mb-6"> <label for="message" class="block text-gray-700 font-medium mb-2">Mensagem</label> <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> </div> <button type="submit" class="w-full bg-blue-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-600 transition">Enviar mensagem</button> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-800 text-white py-12"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div> <div class="flex items-center space-x-2 mb-4"> <div class="logo"> <div class="hand hand-1"></div> <div class="hand hand-2"></div> <div class="hand hand-3"></div> </div> <h3 class="text-xl font-bold">Projeto Cade Cravinhos</h3> </div> <p class="text-gray-300 mb-4">Transformando vidas através da educação, arte e esporte desde 2008.</p> <div class="flex space-x-4"> <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-instagram"></i></a> <a href="#" class="text-gray-300 hover:text-white"><i class="fab fa-youtube"></i></a> </div> </div> <div> <h4 class="text-lg font-bold mb-4">Links úteis</h4> <ul class="space-y-2"> <li><a href="#inicio" class="text-gray-300 hover:text-white transition">Início</a></li> <li><a href="#sobre" class="text-gray-300 hover:text-white transition">Sobre</a></li> <li><a href="#atividades" class="text-gray-300 hover:text-white transition">Atividades</a></li> <li><a href="#doacao" class="text-gray-300 hover:text-white transition">Doação</a></li> <li><a href="#contato" class="text-gray-300 hover:text-white transition">Contato</a></li> </ul> </div> <div> <h4 class="text-lg font-bold mb-4">Atividades</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-300 hover:text-white transition">Balé</a></li> <li><a href="#" class="text-gray-300 hover:text-white transition">Xadrez</a></li> <li><a href="#" class="text-gray-300 hover:text-white transition">Música</a></li> <li><a href="#" class="text-gray-300 hover:text-white transition">Artes</a></li> <li><a href="#" class="text-gray-300 hover:text-white transition">Esportes</a></li> </ul> </div> <div> <h4 class="text-lg font-bold mb-4">Newsletter</h4> <p class="text-gray-300 mb-4">Assine nossa newsletter e receba novidades sobre o projeto.</p> <form class="flex"> <input type="email" placeholder="Seu email" class="px-4 py-2 rounded-l-lg w-full text-gray-800 focus:outline-none"> <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r-lg hover:bg-blue-600 transition"><i class="fas fa-paper-plane"></i></button> </form> </div> </div> <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> <p>&copy; 2023 Projeto Cade Cravinhos. Todos os direitos reservados.</p> <p class="mt-2">CNPJ: 00.000.000/0001-00 - Organização sem fins lucrativos</p> </div> </div> </footer> <!-- Back to Top Button --> <button id="backToTop" class="fixed bottom-8 right-8 bg-blue-500 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:bg-blue-600 transition opacity-0 invisible"> <i class="fas fa-arrow-up"></i> </button> <script> // Back to Top Button const backToTopButton = document.getElementById('backToTop'); window.addEventListener('scroll', () => { if (window.pageYOffset > 300) { backToTopButton.classList.remove('opacity-0', 'invisible'); backToTopButton.classList.add('opacity-100', 'visible'); } else { backToTopButton.classList.remove('opacity-100', 'visible'); backToTopButton.classList.add('opacity-0', 'invisible'); } }); backToTopButton.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Mobile Menu Toggle (would need additional implementation) const mobileMenuButton = document.querySelector('.md\\:hidden'); mobileMenuButton.addEventListener('click', () => { alert('Menu mobile seria implementado aqui com JavaScript adicional'); }); </script> </body> </html>